/* Оформление радара.
   Текст не сидит в плашках: пилюль вокруг подписей нет, рамок вокруг
   версии и логотипа нет. Строка выдачи и карточка человека обведены
   одной проведённой линией по решению reference/ui/ramki.md: радиус 3,
   заливки нет, вложенных контейнеров нет, выбранная строка отмечена
   уголками в двух углах. Цвет несёт смысл, а не украшает: бирюзовый
   единственный акцент, по ramki.md; оранжевого нет нигде с 22 сентября. */

@import url("/static/tokens.css");
/* Все токены живут в tokens.css, у каждого назван замер. Здесь их не
   переопределять: второе объявление --faint тихо возвращало контраст
   2.98 вместо 4.77. */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-4)/var(--lh-body) var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--teal); }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }

/* ------------------------------------------------------------- шапка */

/* Глубина слоями и линиями, не тенью: шапка это поднятая поверхность,
   на 1.5 L* светлее фона (токен --surface с референса 07), под ней
   волосяная линия. Строки и карточки поверхности не получают: решение
   ramki.md, подтверждено снимком пары 22 сентября
   (out/shots/2026-09-22/poverhnosti-*-ryadom.png). */
header.top {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
}
/* Шапка это две строки по решению, а не по нехватке места: марка слева и
   кто вошёл справа в первой, одиннадцать вкладок во второй. Одна строка
   не вмещает их ни на какой ширине: содержимого 1254 пикселя при 1016
   доступных на 1440, и жёсткая высота 58 ломала «Радар скрытых
   талантов» в три строки под вкладки, а третья строка выходила из
   липкой шапки на текст страницы. Переносы только между вкладками. */
.top .wrap {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-6);
  align-items: baseline; padding-top: var(--s-4);
}
.mark { grid-column: 1; grid-row: 1; font-size: var(--fs-4); color: var(--ink); white-space: nowrap; }
.mark b { font-weight: 600; }
.mark span { color: var(--faint); font-weight: 400; }
.who { grid-column: 2; grid-row: 1; color: var(--faint); font-size: var(--fs-2); white-space: nowrap; }
nav.tabs {
  grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-0) var(--s-5); margin-top: var(--s-2); padding-bottom: var(--s-3); font-size: var(--fs-3);
}
nav.tabs a { color: var(--dim); padding-bottom: var(--s-0); white-space: nowrap; }
nav.tabs a:hover { color: var(--ink); }
nav.tabs a.on { color: var(--ink); border-bottom: 1px solid var(--teal); }

/* ------------------------------------------------------------- герой */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
/* Видео проявляется за --dur по кривой с кадров движения: быстрый вход,
   мягкая посадка; до этого на месте стоит постер, тот же первый кадр. */
.hero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .85;
}
video[data-ambient] { transition: opacity var(--dur) var(--ease); }
video[data-ambient]:not(.on) { opacity: .85; }
.hero .veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 72% 50%, transparent 0%, rgba(8,9,10,.35) 55%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 8%, rgba(8,9,10,.55) 42%, transparent 70%);
}
.hero .inner { position: relative; padding: var(--s-9) 0 var(--s-9); }
h1.display {
  margin: 0; font-size: var(--fs-9); line-height: var(--lh-tight); font-weight: 600;
  letter-spacing: var(--ls-display); max-width: 15ch; font-family: var(--font-display);
}
.lede { margin: var(--s-5) 0 0; color: var(--dim); max-width: var(--measure); font-size: var(--fs-4); }

/* ------------------------------------------------------------- действие */

.act {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding: var(--s-3) var(--s-5);
  background: var(--teal); color: #08090a;
  border: 0; border-radius: var(--r); cursor: pointer;
  font: 600 var(--fs-4)/1 inherit;
}
.act:hover { opacity: .88; }
.act .arr { font-weight: 400; opacity: .7; }
.act-note { margin-top: var(--s-3); color: var(--faint); font-size: var(--fs-2); }

/* ------------------------------------------------------------- заголовки */

h2.head {
  margin: 0; font-size: var(--fs-6); font-weight: 600; letter-spacing: var(--ls-head);
}
h3.sub {
  margin: 0 0 var(--s-4); font-size: var(--fs-2); font-weight: 600; color: var(--faint);
  letter-spacing: var(--ls-mono-caps); text-transform: uppercase;
}
.section { padding: var(--s-8) 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
p.note { color: var(--dim); max-width: var(--measure); margin: var(--s-3) 0 0; }

/* ------------------------------------------------------------- прогоны */

.runs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
.run .when { color: var(--faint); font-size: var(--fs-2); }
.run .big {
  font-size: var(--fs-8); font-weight: 600; letter-spacing: var(--ls-head); margin: var(--s-2) 0 var(--s-1);
}
.run .big em { font-style: normal; color: var(--faint); font-size: var(--fs-4); font-weight: 400; }
.run .meta { color: var(--dim); font-size: var(--fs-3); }

/* ------------------------------------------------------------- список */

/* Строка выдачи это карточка с одной обводкой по reference/ui/ramki.md:
   радиус 3, линия #1c1f22, заливки нет, вложенных контейнеров нет.
   Отступы намеренно несимметричны: 10 сверху, 8 снизу, 16 по бокам,
   6 между строками; это плотность, принятая 22 сентября со снимком
   до и после (18 строк на экран вместо 15), и таблица в ramki.md
   поправлена под неё. Номер и балл моноширинным, архетип голым словом
   прописными, без пилюли и без коробки. */
.rows { margin-top: var(--s-2); }
.row {
  display: grid; grid-template-columns: 20px 1fr auto auto;
  gap: var(--s-4); align-items: baseline; position: relative;
  padding: var(--row-pad); margin-bottom: var(--row-gap);
  border: 1px solid var(--frame); border-radius: var(--r);
}
/* Без колонки «Кто», когда у всех строк одно слово. */
.row.narrow, .head-row.narrow { grid-template-columns: 20px 1fr auto; }
.row .place { font: var(--fs-1) var(--mono); color: var(--faint); text-align: right; }
.row .name { font-size: var(--fs-3); }
.row .why { display: block; color: var(--faint); font-size: var(--fs-1); line-height: var(--lh-caption); margin-top: var(--s-1); }
.row .why i { font-style: normal; color: var(--faint); }
.row .arch {
  font: var(--fs-1) var(--mono); color: var(--teal); letter-spacing: var(--ls-mono-caps);
  text-transform: uppercase; white-space: nowrap;
}
.row .val { text-align: right; font: var(--fs-2) var(--mono); color: var(--dim); min-width: 48px; }
.row .val.neg { color: var(--faint); }
/* Выбранная строка: уголки в двух углах, не подсветка и не заливка. */
.row:hover, .row.on, .row:focus-visible { border-color: var(--frame-hover); outline: 0; }
.row::before, .row::after {
  content: ''; position: absolute; width: 7px; height: 7px;
  border: 1px solid var(--teal);
}
.row::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.row::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.head-row {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: var(--s-4);
  padding: 0 var(--s-4) var(--s-2); color: var(--faint); font: var(--fs-1) var(--mono);
  letter-spacing: var(--ls-mono-caps); text-transform: uppercase;
}

/* Поле точек: весь корпус, верх выдачи подсвечен. Единственный приём
   с референсов, который несёт информацию, а не украшает. */
.field { display: block; width: 100%; height: auto; margin-top: var(--s-4); }
.field-note { color: var(--faint); font: var(--fs-1) var(--mono); letter-spacing: var(--ls-mono-caps); margin-top: var(--s-2); }

/* ------------------------------------------------------------ источники */

.srow, .head-row.shead {
  display: grid; grid-template-columns: 1fr 92px 132px 108px 132px; gap: var(--s-4);
}
.srow {
  align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--line-soft);
}
.srow .name { font-size: var(--fs-4); }
.srow .why { display: block; color: var(--dim); font-size: var(--fs-2); margin-top: var(--s-1); }
.srow .num, .head-row.shead .num { text-align: right; font-size: var(--fs-4); }
.srow .num i { font-style: normal; color: var(--faint); font-size: var(--fs-2); }
.srow .num.teal { color: var(--teal); }

/* ---------------------------------------------------------- тип человека */

.kinds { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0 var(--s-1); }
.kinds a {
  color: var(--dim); font-size: var(--fs-3); padding: var(--s-2) 0; border-bottom: 1px solid transparent;
}
.kinds a.on { color: var(--ink); border-bottom-color: var(--teal); }
.kinds a i { font-style: normal; color: var(--faint); }
.head-row .val { text-align: right; }

.bar i { display: block; height: 2px; background: var(--teal-dim); }
.bar i.minus { background: var(--teal-line); }

/* ------------------------------------------------------------- фильтры */

/* Форма переносится по полям: шесть полей группы на 390 пикселях иначе
   уезжали за край страницы на 800 пикселей. */
form.filter { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin: var(--s-5) 0 var(--s-2); }
input[type=text], input[type=password], input[type=number], select {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: inherit; padding: var(--s-2) var(--s-0); min-width: 190px; max-width: 100%;
  border-radius: 0;
}
input:focus, select:focus { outline: 0; border-bottom-color: var(--teal); }
select option { background: var(--surface); }
button.plain {
  background: transparent; border: 0; border-bottom: 1px solid var(--teal-dim);
  color: var(--teal); font: inherit; padding: var(--s-2) 0; cursor: pointer;
}
button.plain:hover { border-bottom-color: var(--teal); }

/* ------------------------------------------------------------- карточка */

/* Карточка человека: одна обводка вокруг того, что о нём известно
   сразу, внутри волосяные линии, вторая обводка не ставится. */
.card {
  border: 1px solid var(--frame); border-radius: var(--r);
  padding: var(--s-4) var(--s-4) var(--s-3); margin-bottom: var(--s-6);
}
.card h2.head { margin: 0; }
/* Шапка карточки человека: тот же материал, что в герое, сдержанно:
   правая половина, четверть яркости, под завесой к фону. Текст сверху. */
.card.with-hero { position: relative; overflow: hidden; }
.card video.card-back {
  position: absolute; top: 0; right: 0; bottom: 0; width: 50%; height: 100%;
  object-fit: cover; opacity: .28;
}
.card.with-hero .veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 40%, rgba(8,9,10,.6) 70%, transparent 100%);
}
.card.with-hero .over { position: relative; }
.card hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s-3) 0; }
.card .kv { font: var(--fs-2) var(--mono); }
.card .kv dt { font: inherit; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8); }
.fact { padding: var(--s-4) 0; border-top: 1px solid var(--line-soft); }
.fact .when { color: var(--faint); font-size: var(--fs-2); }
.fact .what { margin-top: var(--s-0); }
.fact .src { color: var(--faint); font-size: var(--fs-2); }
.fact .src a { color: var(--teal-dim); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); font-size: var(--fs-3); }
.kv dt { color: var(--dim); margin: 0; }
.kv dd { margin: 0; text-align: right; }

/* ------------------------------------------------------------- кривые */

.band { position: relative; height: 176px; overflow: hidden; border-bottom: 1px solid var(--line); }
.band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.band .veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,10,.2), var(--bg) 96%); }
.band .inner { position: relative; padding-top: var(--s-8); }

.curves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-7); }
.curve .key { font-size: var(--fs-4); }
.curve .hint { color: var(--faint); font-size: var(--fs-2); margin: var(--s-0) 0 var(--s-3); min-height: 34px; }
.curve svg { display: block; width: 100%; height: 66px; }
.curve .ctl { display: flex; gap: var(--s-3); align-items: baseline; margin-top: var(--s-3); }
.curve .ctl input { min-width: 0; width: 64px; text-align: right; }
.curve .ctl label { color: var(--faint); font-size: var(--fs-2); }

/* ------------------------------------------------------------- поиск */

#veil {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#veil .orb { width: 64px; height: 64px; }
/* Тихие орбы: у марки в шапке, у заголовка раздела, в герое и на входе.
   Размер с букву, медленно, вполсилы; они присутствие, не индикатор. */
.orb.mark-orb { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--s-2); }
.orb.head-orb { display: inline-block; width: 18px; height: 18px; vertical-align: -2px; margin-right: var(--s-3); }
.orb.hero-orb { display: block; width: 48px; height: 48px; margin-bottom: var(--s-4); }
.orb.gate-orb { display: block; width: 40px; height: 40px; margin: 0 auto var(--s-4); }
.orb.small { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin: 0 var(--s-3) 0 var(--s-4); }
.note .orb.small, .sub .orb.small { margin: 0 var(--s-2) 0 0; }
.refresh { margin-top: var(--s-4); display: flex; align-items: center; }
.refresh .faint { font: var(--fs-1) var(--mono); }
#veil .stage { margin-top: var(--s-6); font-size: var(--fs-4); }
#veil .tick { margin-top: var(--s-2); color: var(--faint); font-size: var(--fs-2); min-height: 20px; }

/* ------------------------------------------------------------- движение */

/* Строки входят сверху вниз с шагом 18 мс, ступеней не больше двенадцати:
   дальше глаз ступени не разбирает, а список только задерживается. Класс
   in стоит у первых двух десятков строк, остальные ниже экрана и входят
   сразу. Завеса проявляется, а не выскакивает. Смена страницы: старая
   гаснет, новая проявляется, без сдвига. */
@keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.row.in { animation: row-in var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }

@keyframes veil-in { from { opacity: 0; } }
#veil { animation: veil-in var(--dur-fast) var(--ease); }

/* Одна система: всё, что отвечает на курсор или фокус, отвечает за
   --dur-fast по --ease, той же кривой, что вход строк и завеса. Меняются
   только цвет, обводка и прозрачность: ничего не сдвигается и не
   пружинит, число под курсором не уезжает. Фокус с клавиатуры виден там
   же, где виден курсор. */
a, nav.tabs a, button.plain, .act, .row, .row::before, .row::after,
input[type=text], input[type=password], input[type=number], select, .ev-what a, .kinds a {
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.row::before, .row::after { opacity: 0; }
.row:hover::before, .row:hover::after, .row.on::before, .row.on::after,
.row:focus-visible::before, .row:focus-visible::after { opacity: .85; }
a:focus-visible, button.plain:focus-visible, .act:focus-visible { outline: 1px solid var(--teal); outline-offset: 2px; }
nav.tabs a:focus-visible { outline: 0; color: var(--ink); border-bottom: 1px solid var(--teal); }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-fast); animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-fast: 0ms; }
  .row.in, #veil { animation: none; }
  *, *::before, *::after { transition: none !important; }
  @view-transition { navigation: none; }
}

/* ------------------------------------------------------------- вход */

.gate { min-height: 100vh; display: grid; place-items: center; }
.gate form { width: 300px; }
.gate .mark { display: block; margin-bottom: var(--s-6); font-size: var(--fs-4); }
.gate input { width: 100%; margin-bottom: var(--s-4); }
.gate .err { color: var(--ink); font-size: var(--fs-2); margin-bottom: var(--s-4); }

/* ------------------------------------------------------------- мелочь */

.muted { color: var(--dim); }
.faint { color: var(--faint); }
/* Предупреждение без цвета: акцент один, и он не для ошибок. */
.warn { color: var(--ink); font-weight: 600; }
.teal { color: var(--teal); }
.right { text-align: right; }
.gap { height: 28px; }
table.grid { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
table.grid th {
  text-align: left; font-weight: 400; color: var(--faint); font-size: var(--fs-2);
  letter-spacing: var(--ls-mono-caps); text-transform: uppercase; padding-bottom: var(--s-2);
}
table.grid td { padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
table.grid td.n { text-align: right; color: var(--dim); }

@media (max-width: 900px) {
  .runs, .two, .curves { grid-template-columns: 1fr; gap: var(--s-6); }
  h1.display { font-size: var(--fs-7); }
  /* На узком экране вкладки переносятся внутри своей строки, за край
     не выезжают; марка и кто вошёл остаются в первой. */
  nav.tabs { gap: var(--s-0) var(--s-4); }
  /* Четыре ячейки строки получают четыре дорожки: раньше балл падал во
     вторую строку сетки под номер. */
  .row, .head-row { grid-template-columns: 34px 1fr auto 64px; gap: var(--s-3); }
  .row.narrow, .head-row.narrow { grid-template-columns: 34px 1fr 64px; }
  .srow, .head-row.shead { grid-template-columns: 1fr 74px 74px; }
  .srow span:nth-child(4), .srow span:nth-child(5),
  .head-row.shead span:nth-child(4), .head-row.shead span:nth-child(5) { display: none; }
  .row .bar, .head-row .bar { display: none; }
}

table.grid .bar { display: block; margin-left: var(--s-4); }
table.grid th + th, table.grid td + td { padding-left: var(--s-5); }
table.grid td.n { white-space: nowrap; }

.gate { position: relative; overflow: hidden; }
.gate video.back {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
}
.gate .veil {
  position: absolute; inset: 0;
  background: radial-gradient(48% 52% at 50% 50%, rgba(8,9,10,.92), var(--bg) 76%);
}
.gate form { position: relative; }

/* ------------------------------------------------------------- сравнение */

.two-even { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }

.cmp-row {
  display: grid; grid-template-columns: 34px 1fr 54px;
  gap: var(--s-4); align-items: baseline;
  padding: var(--s-3) 0; border-top: 1px solid var(--line-soft);
}
/* Подсветки заливкой нет ни у одной строки; числа моноширинным. */
.cmp-row .place { color: var(--faint); font: var(--fs-2) var(--mono); }
.cmp-row .name { font-size: var(--fs-4); }
.cmp-row .val { text-align: right; color: var(--teal); font: var(--fs-2) var(--mono); }

.row .place { white-space: nowrap; }

/* Кривая крупнее и с полем: на экране весов она главная, а не подпись. */
.curve svg { height: 78px; }
.curve .key { font-size: var(--fs-4); }
.curves { gap: var(--s-7) var(--s-7); }

@media (max-width: 900px) {
  .two-even { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* --------------------------------------------------- кривая всей выдачи */

svg.dist { display: block; width: 100%; height: auto; overflow: visible; }
svg.dist .dot { fill: var(--teal-dim); }
svg.dist .dot.hot { fill: var(--teal); }
svg.dist .lbl {
  fill: var(--dim); font: var(--fs-2) var(--font);
}
svg.dist .lbl.hot { fill: var(--ink); font-weight: 600; }
.two-even svg.dist { margin-bottom: var(--s-4); }

/* --------------------------------------------------------- срез прошлого */

.hero.short .inner { padding: var(--s-9) 0 var(--s-9); }
.hero.short h1.display { font-size: var(--fs-8); max-width: 18ch; }

.catch { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.catch:first-child { border-top: 0; }
.catch-head { display: flex; align-items: baseline; gap: var(--s-4); }
.catch-name { font-size: var(--fs-5); letter-spacing: var(--ls-head); }
.catch-move {
  margin-left: auto; color: var(--faint); font: var(--fs-3) var(--mono); white-space: nowrap;
}
.catch-move i { font-style: normal; color: var(--teal-dim); padding: 0 var(--s-1); }
.catch-why { color: var(--dim); font-size: var(--fs-3); margin-top: var(--s-2); }

.evs { margin-top: var(--s-4); }
.ev {
  display: grid; grid-template-columns: 168px 1fr 210px;
  gap: var(--s-4); align-items: baseline;
  padding: var(--s-2) 0; border-top: 1px solid var(--line-soft);
}
.ev-date { color: var(--faint); font-size: var(--fs-2); }
.ev-what { font-size: var(--fs-4); }
.ev-what a { border-bottom: 1px solid var(--line); }
.ev-what a:hover { border-bottom-color: var(--teal); }
.ev-gap { color: var(--teal); font-size: var(--fs-2); text-align: right; }

@media (max-width: 900px) {
  .ev { grid-template-columns: 1fr; gap: var(--s-0); }
  .ev-gap { text-align: left; }
  .catch-head { flex-wrap: wrap; }
  .catch-move { margin-left: 0; }
}