/* ============================================================
   Ultima Checker — hero.css
   Первый экран = рабочий экран сервиса.
   Панель плоская, на хеирлайнах: ни теней, ни свечений, ни градиентов.
   Хром нейтральный — цвет живёт только в данных и статусах.
   Токены и примитивы (.panel/.btn/.badge/.stat/.table/.code) — из base.css,
   здесь только их посадка в герое + фолбэки в var(), чтобы блок не разъезжался,
   если файл открыт в отрыве от базы.
   ============================================================ */

.hero{
  /* локальные производные: плотность и хеирлайн первого экрана */
  --hero-pad-x:clamp(14px,3.4vw,20px);        /* внутренние поля панели */
  --hero-hair:var(--border,rgba(255,255,255,.1));

  padding-block:clamp(26px,4.5vw,48px) clamp(36px,6vw,72px);
  border-top:0;                               /* hero — первая секция */
}

.hero-inner{
  display:flex;
  flex-direction:column;
  gap:clamp(22px,3.4vw,34px);
}

/* ------------------------------------------------------------
   1. Шапка экрана
   Слева смысл, справа действие — одна плотная полоса,
   а не центрованный баннер во весь экран.
   ------------------------------------------------------------ */
.hero-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(20px,3vw,44px);
}

.hero-copy{min-width:0}

.hero-title{
  margin:0 0 10px;
  max-width:20ch;
  font-size:clamp(27px,3.8vw,42px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.028em;                     /* крупный кегль — трекинг в минус */
  text-wrap:balance;
  color:var(--fg,#fafafa);
}

.hero-lead{
  margin:0;
  max-width:58ch;
  color:var(--muted-fg,#9e9e9e);
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:1.55;
  letter-spacing:-.004em;
  text-wrap:pretty;
}

.hero-act{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  flex:none;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-pay{
  margin:0;
  color:var(--muted-fg,#9e9e9e);
  font-size:12.5px;
  line-height:1.4;
  letter-spacing:.002em;
}

/* ------------------------------------------------------------
   2. Панель результата
   Собрана полосами: каждая секция во всю ширину,
   разделители — хеирлайны, как в настоящей панели управления.
   ------------------------------------------------------------ */
.hero-panel{
  padding:0;                                  /* поля держат сами полосы */
  overflow:hidden;                            /* радиус подрезает крайние строки */
  background:var(--card,#121212);
  border:1px solid var(--hero-hair);
  border-radius:var(--radius,16px);
  box-shadow:none;
}

/* --- 2.1 Шапка панели --- */
.hero-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  padding:12px var(--hero-pad-x);
  border-bottom:1px solid var(--hero-hair);
}

.hero-head-id{min-width:0}

.hero-job{
  margin:0;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:13px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:0;
  color:var(--fg,#fafafa);
}

.hero-job-sub{
  margin:2px 0 0;
  color:var(--muted-fg,#9e9e9e);
  font-size:12px;
  line-height:1.35;
}

.hero-head-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}

.hero-time{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted-fg,#9e9e9e);
}

/* --- 2.2 Полоса тайлов --- */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;                                    /* зазор показывает фон = ровные хеирлайны */
  background:var(--hero-hair);
  border-bottom:1px solid var(--hero-hair);
}

.hero-stats .stat{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:11px var(--hero-pad-x) 13px;
  background:var(--card,#121212);
  border:0;
  border-radius:0;
}

.stat-k{
  color:var(--muted-fg,#9e9e9e);
  font-size:11.5px;
  line-height:1.3;
  letter-spacing:.012em;                      /* мелкий кегль — трекинг в плюс */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stat-v{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:clamp(17px,1.6vw,20px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:var(--fg,#fafafa);
}

.stat-of{
  min-width:0;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted-fg,#9e9e9e);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* единственная краска в хроме — и та не краска, а статус точек */
.stat-dot{
  align-self:center;
  inline-size:6px;
  block-size:6px;
  flex:none;
  border-radius:50%;
  background:var(--green,#00bb7f);
}

/* --- 2.3 Этапы: воронка, а не индикатор загрузки ---
   Числа сходятся с матрицей: 16 → 12 → 10 → 9. --- */
.hero-stages{
  padding:13px var(--hero-pad-x) 15px;
  border-top:0;
  border-bottom:1px solid var(--hero-hair);
}

.hero-stages-k{
  margin:0 0 10px;
  color:var(--muted-fg,#9e9e9e);
  font-size:11.5px;
  line-height:1.3;
  letter-spacing:.012em;
}

.stages{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px clamp(12px,2vw,20px);
  margin:0;
  padding:0;
  list-style:none;
}

.stage{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  margin:0;
}

.stage-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

.stage-k{
  min-width:0;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:11.5px;
  letter-spacing:.01em;
  color:var(--fg,#fafafa);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stage-v{
  flex:none;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  color:var(--muted-fg,#9e9e9e);
  white-space:nowrap;
}

.stage-bar{
  display:block;
  block-size:3px;
  border-radius:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.stage-fill{
  display:block;
  block-size:100%;
  border-radius:inherit;
  background:rgba(250,250,250,.62);            /* воронка — объём, а не вердикт: без цвета */
}

.stage-fill[data-fill="100"]{inline-size:100%}
.stage-fill[data-fill="75"]{inline-size:75%}
.stage-fill[data-fill="63"]{inline-size:63%}
.stage-fill[data-fill="56"]{inline-size:56%}

/* --- 2.4 Матрица «цель × провайдер» — ядро продукта ---
   Скролл живёт ВНУТРИ панели: страница по горизонтали не едет никогда. --- */
.hero-grid{
  overflow-x:auto;
  overscroll-behavior-x:contain;
}
.hero-grid:focus-visible{outline-offset:-3px}

.hero-matrix{
  width:100%;
  min-width:544px;                             /* уже — уходит во внутренний скролл */
  border-collapse:separate;                    /* separate: sticky-колонка не теряет линии */
  border-spacing:0;
  font-variant-numeric:tabular-nums;
}

.hero-cap{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.hero-matrix th,
.hero-matrix td{
  text-align:left;
  vertical-align:middle;
  padding:8px 12px;
  border-bottom:1px solid var(--hero-hair);
  background:var(--card,#121212);
}

.hero-matrix th:first-child,
.hero-matrix td:first-child{padding-left:var(--hero-pad-x)}
.hero-matrix th:last-child,
.hero-matrix td:last-child{padding-right:var(--hero-pad-x)}

.hero-matrix thead th{
  padding-block:9px;
  color:var(--muted-fg,#9e9e9e);
  font-size:11.5px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.012em;
  white-space:nowrap;
}

.hero-matrix tbody tr:last-child th,
.hero-matrix tbody tr:last-child td{border-bottom:0}

/* колонка цели остаётся на месте при горизонтальном скролле —
   строку невозможно потерять из виду */
.hero-matrix thead th:first-child,
.hero-matrix tbody th[scope="row"]{
  position:sticky;
  left:0;
  z-index:1;
  width:44%;
  box-shadow:1px 0 0 var(--hero-hair);
}

.hero-matrix tbody th[scope="row"]{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:12.5px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:0;
  color:var(--fg,#fafafa);
  white-space:nowrap;
}

.t-port{color:var(--muted-fg,#9e9e9e)}

@media (hover:hover) and (pointer:fine){
  /* подсветка строки без перехода: это состояние, а не анимация */
  .hero-matrix tbody tr:hover th,
  .hero-matrix tbody tr:hover td{background:var(--elev,#1f1f1f)}
}

/* --- 2.5 Бейджи вердиктов ---
   Прямоугольные, моноширинные, плотные: это данные, а не ярлыки. --- */
.hero .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-block-size:20px;
  min-inline-size:44px;                        /* колонка вердиктов стоит ровной сеткой */
  padding:1px 7px;
  border:1px solid transparent;
  border-radius:6px;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:11.5px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.01em;
  white-space:nowrap;
}

.hero .badge--ok{
  color:var(--green,#00bb7f);
  background:rgba(0,187,127,.11);
  border-color:rgba(0,187,127,.26);
}
.hero .badge--bad{
  color:var(--red,#ff2357);
  background:rgba(255,35,87,.10);
  border-color:rgba(255,35,87,.26);
}
.hero .badge--warn{
  color:var(--amber,#f99c00);
  background:rgba(249,156,0,.10);
  border-color:rgba(249,156,0,.26);
}
.hero .badge--muted{
  color:var(--muted-fg,#9e9e9e);
  background:rgba(255,255,255,.05);
  border-color:var(--hero-hair);
}

@supports (color:color-mix(in oklab,#000,#fff)){
  .hero .badge--ok{
    background:color-mix(in oklab,var(--green,#00bb7f) 12%,transparent);
    border-color:color-mix(in oklab,var(--green,#00bb7f) 28%,transparent);
  }
  .hero .badge--bad{
    background:color-mix(in oklab,var(--red,#ff2357) 12%,transparent);
    border-color:color-mix(in oklab,var(--red,#ff2357) 28%,transparent);
  }
  .hero .badge--warn{
    background:color-mix(in oklab,var(--amber,#f99c00) 12%,transparent);
    border-color:color-mix(in oklab,var(--amber,#f99c00) 28%,transparent);
  }
}

/* бейдж в шапке — статус задачи, не вердикт: ровная сетка ему не нужна */
.hero-head .badge{min-inline-size:0}

/* --- 2.6 Строка резюме --- */
.hero-sum{
  display:flex;
  gap:10px;
  margin:0;
  padding:11px var(--hero-pad-x) 12px;
  border-top:1px solid var(--hero-hair);
  color:var(--muted-fg,#9e9e9e);
  font-size:12.5px;
  line-height:1.5;
  text-wrap:pretty;
}

.hero-sum-k{
  flex:none;
  padding-top:.5px;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:11.5px;
  letter-spacing:.012em;
  color:var(--muted-fg,#9e9e9e);
  opacity:.72;
}

.hero-sum-v{min-width:0}

.hero-sum .code{
  padding:0;
  border:0;
  background:none;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:12px;
  letter-spacing:0;
  color:var(--fg,#fafafa);
  white-space:nowrap;
}

/* ------------------------------------------------------------
   3. Адаптив
   От 320px: горизонтально едет только матрица внутри панели.
   ------------------------------------------------------------ */
@media (max-width:900px){
  .hero-intro{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .hero-act{
    align-items:flex-start;
    gap:9px;
  }
}

@media (max-width:720px){
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:400px){
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 auto}
  .hero-head-meta{width:100%;justify-content:space-between}
  .hero-matrix{min-width:500px}
}

/* ------------------------------------------------------------
   4. Предпочтения пользователя
   ------------------------------------------------------------ */
@media (prefers-contrast:more){
  .hero{--hero-hair:rgba(255,255,255,.24)}
  .stage-bar{background:rgba(255,255,255,.16)}
  .stage-fill{background:rgba(250,250,250,.85)}
  .hero-lead,
  .hero-sum,
  .stat-k,
  .stage-v,
  .hero-matrix thead th{color:#d4d4d4}
}