:root{
  --bg:#F4F4F1;
  --surface:#FFFFFF;
  --surface-2:#FAFAF8;
  --ink:#0E0E10;
  --ink-2:#56565E;
  --ink-3:#7B7B82;
  --line:#E4E4DE;
  --line-soft:#EDEDE8;
  --up:#C0402A;
  --up-soft:#F4E3DF;
  --down:#2E63A6;
  --down-soft:#DFE7F2;
  --flat:#B8B8B2;
  --sex-m:#3E8FD4;
  --sex-f:#D9569B;
  --sex-m-soft:#E1EDF9;
  --sex-f-soft:#FAE3EE;
  --line-2:#D6D6CF;
  /* текст и знаки на плашке цвета --ink: в тёмной теме он становится тёмным */
  --on-ink:#FFFFFF;
  --on-ink-fill:rgba(255,255,255,.14);
  --surface-3:#F0F0EB;
  /* полупрозрачная заливка служебных кнопок поверх непрозрачного фона */
  --fill:rgba(14,14,16,.06);
  --fill-hi:rgba(14,14,16,.10);
  --ring:rgba(14,14,16,.12);
  --ring-soft:rgba(14,14,16,.05);
  --scroll-thumb:rgba(14,14,16,.22);
  --veil:rgba(244,244,241,.82);
  --bar-bg:rgba(244,244,241,.94);
  --bar-line:rgba(255,255,255,.5);
  --tip-m:#9CC8EE;
  --tip-f:#F1A6CB;
  /* график рисуется в SVG, поэтому его цвета тоже живут переменными */
  --chart-span:#F1F1EC;
  --chart-grid:#EDEDE8;
  --chart-zero:#D2D2CB;
  --chart-vgrid:#F2F2EE;
  --chart-tick:#8A8A82;
  --chart-mark:#DCDCD5;
  --chart-mark-dot:#C2C2BA;
  --chart-mark-text:#83837B;
  --chart-base:#C9C9C1;
  --radius:20px;
  --radius-s:12px;
  --shadow:0 1px 2px rgba(16,16,20,.04), 0 12px 32px -18px rgba(16,16,20,.18);
  --ease:cubic-bezier(.22,.7,.2,1);
  --pad:20px;
  /* высота шапки: на неё липнет .picker, менять только здесь */
  --topbar-h:62px;
  color-scheme:light;
}

/* ─── тёмная тема ───────────────────────────────────────── */
/* Включается только кнопкой в шапке (на телефоне — в меню) и запоминается
   в браузере: системную настройку не слушаем, иначе выбор человека спорил бы
   с ней на каждом заходе. Здесь переопределяются одни токены — правила ниже
   про тему ничего не знают. */
:root[data-theme="dark"]{
  --bg:#0F0F11;
  --surface:#18181A;
  --surface-2:#1F1F22;
  --surface-3:#26262A;
  --ink:#F1F1EE;
  --ink-2:#A6A6A3;
  --ink-3:#7C7C7A;
  --line:#2D2D31;
  --line-soft:#242428;
  --line-2:#3A3A3F;
  /* Красный и синий на тёмном фоне гаснут — берём те же тона светлее. */
  --up:#F0907A;
  --up-soft:#38231E;
  --down:#82B2E8;
  --down-soft:#1B2A3B;
  --flat:#5B5B60;
  --sex-m:#5EA8E4;
  --sex-f:#E87CB4;
  --sex-m-soft:#1B2A38;
  --sex-f-soft:#33202B;
  --on-ink:#0F0F11;
  --on-ink-fill:rgba(15,15,17,.14);
  --fill:rgba(255,255,255,.07);
  --fill-hi:rgba(255,255,255,.13);
  --ring:rgba(241,241,238,.20);
  --ring-soft:rgba(241,241,238,.07);
  --scroll-thumb:rgba(241,241,238,.24);
  --veil:rgba(15,15,17,.82);
  --bar-bg:rgba(15,15,17,.92);
  --bar-line:rgba(255,255,255,.05);
  --tip-m:#2C6BA3;
  --tip-f:#A83B76;
  --chart-span:#1E1E21;
  --chart-grid:#26262A;
  --chart-zero:#3B3B40;
  --chart-vgrid:#202024;
  --chart-tick:#76767A;
  --chart-mark:#38383D;
  --chart-mark-dot:#5A5A5F;
  --chart-mark-text:#8A8A8E;
  --chart-base:#4A4A4F;
  /* На тёмном фоне тень не читается — карточки держатся на разнице подложек,
     а тень остаётся только чтобы отделить всплывающие окна. */
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* Раздел «Цикл» в светлой теме стоит на слегка розовом фоне. Меняются только
   фон страницы, полупрозрачные слои поверх него и зона фазы на графике —
   карточки остаются белыми. В тёмной теме раздел выглядит как все. */
:root[data-mode="cycle"]:not([data-theme="dark"]){
  --bg:#FFF9FF;
  --veil:rgba(255,249,255,.82);
  --bar-bg:rgba(255,249,255,.94);
  --chart-span:#FBF0F8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Geist","Helvetica Neue",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:400; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.025em}
p{margin:0}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
a{color:inherit}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}

main{max-width:1080px; margin:0 auto; padding:0 var(--pad) 0}

/* ─── онбординг ─────────────────────────────────────────── */
.onboarding{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  padding:var(--pad); background:var(--veil); backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  animation:fade .4s var(--ease);
}
.onboarding[hidden]{display:none}
.ob-card{
  position:relative; width:100%; max-width:440px; background:var(--surface);
  border-radius:28px; padding:36px 28px 24px; box-shadow:var(--shadow);
  animation:rise .5s var(--ease) both;
}
.ob-close[hidden]{display:none}
.ob-close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; color:var(--ink-3); display:grid; place-items:center}
.ob-close:hover{background:var(--surface-2); color:var(--ink)}
.ob-title{font-size:26px; letter-spacing:-.03em}
.ob-lead{color:var(--ink-2); font-size:15px; margin:8px 0 26px; text-wrap:pretty}
.ob-block{margin-bottom:20px}
.ob-label{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.ob-options{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ob-options--age{grid-template-columns:repeat(3,1fr)}
.ob-opt{
  padding:13px 8px; border-radius:14px; background:var(--surface-2);
  border:1.5px solid transparent; font-size:15px; transition:.18s var(--ease);
  text-align:center;
}
.ob-opt:hover{background:var(--surface-3)}
.ob-opt[aria-checked="true"]{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.ob-submit{
  width:100%; margin-top:8px; padding:15px; border-radius:15px; background:var(--ink); color:var(--on-ink);
  font-size:16px; font-weight:500; transition:.18s var(--ease);
}
.ob-submit:disabled{background:var(--line); color:var(--ink-3); cursor:not-allowed}
.ob-submit:not(:disabled):hover{transform:translateY(-1px)}
.ob-foot{margin-top:16px; font-size:12px; line-height:1.45; color:var(--ink-3); text-align:center}

/* ─── шапка ─────────────────────────────────────────────── */
/* Шапка узкая и липкая: в ней только имя сайта и чип текущего сценария.
   Сама навигация листается вместе со страницей (на мобильном — прячется в бургер). */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center;
  gap:10px; height:var(--topbar-h); padding:0 var(--pad); max-width:1080px; margin:0 auto;
}
/* Размытие живёт в отдельном слое ровно по габаритам шапки: ни пикселя ниже её
   границы. Хвоста с затуханием нет — он давал размытую полосу под шапкой.
   Край не бросается в глаза за счёт почти непрозрачного фона и белой отбивки. */
.topbar::before{
  content:""; position:absolute; z-index:-1; inset:0; left:50%; margin-left:-50vw;
  width:100vw; pointer-events:none;
  background:var(--bar-bg);
  backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6);
}
.wordmark{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600;
  letter-spacing:-.02em; text-decoration:none; white-space:nowrap; min-width:0; flex:none;
}
.wordmark-text{overflow:hidden; text-overflow:ellipsis}
.wordmark-mark,.wordmark-up{width:20px; height:20px; flex:none; color:var(--ink); display:block}
.wordmark-up{display:none}
/* На десктопе знак под курсором превращается в стрелку «наверх» — это и есть
   единственное, что делает логотип. После клика возвращаем знак, не дожидаясь,
   пока курсор уйдёт: страница уже наверху, и стрелке нечего предлагать. */
/* Пока страница не прокручена, стрелке нечего предлагать — знак остаётся знаком. */
@media (hover:hover){
  .topbar:not(.is-top) .wordmark:hover:not(.is-reverted) .wordmark-mark{display:none}
  .topbar:not(.is-top) .wordmark:hover:not(.is-reverted) .wordmark-up{display:block}
}

.sect-chip{
  display:inline-flex; align-items:center; min-width:0; max-width:46%; margin-left:auto;
  padding:6px 13px; border-radius:100px; background:var(--ink); color:var(--on-ink);
  font-size:13px; font-weight:500; letter-spacing:-.01em; white-space:nowrap;
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.topbar.is-scrolled .sect-chip{opacity:1; pointer-events:auto; transform:none}
/* Полоска шире самой шапки: та ограничена колонкой в 1080 px, а отбивка нужна
   через весь экран. Отсюда 100vw и сдвиг от середины. */
.topbar.is-scrolled::after{
  content:""; position:absolute; bottom:0; left:50%; margin-left:-50vw;
  width:100vw; height:1px; background:var(--bar-line);
}
.sect-chip span{overflow:hidden; text-overflow:ellipsis}

.burger{
  display:none; width:38px; height:38px; border-radius:12px; margin-left:auto; flex:none;
  align-items:center; justify-content:center; background:var(--surface);
  box-shadow:0 1px 2px rgba(16,16,20,.06); color:var(--ink); transition:.18s var(--ease);
}
.burger:hover{background:var(--surface)}

/* Солнце и луна занимают тот же угол, что и чип раздела: пока страница
   наверху, в шапке стоит знак темы, при скролле он уступает место чипу —
   ровно так же, как на телефоне это делает бургер. Поэтому кнопка вынута
   из потока: иначе невидимый чип отнимал бы у неё место.
   Подложки нет: знак стоит на одной линии с логотипом и одного с ним
   размера — кнопка из него сделала бы элемент другого рода. Габарит шире
   знака ради тап-зоны, поэтому правый край сдвинут внутрь ровно на эту
   разницу: знак кончается там же, где чип, который приходит ему на смену. */
.theme{display:grid; place-items:center}
.topbar .theme{
  position:absolute; right:calc(var(--pad) - 9px); top:50%; width:38px; height:38px;
  background:none; color:var(--ink);
  transform:translateY(-50%);
  transition:opacity .24s var(--ease), transform .24s var(--ease), color .18s var(--ease);
}
.topbar .theme svg{width:20px; height:20px}
.topbar .theme:hover{color:var(--ink-2)}
.topbar.is-scrolled .theme{opacity:0; transform:translateY(-50%) scale(.8); pointer-events:none}
/* Знак показывает текущее состояние, а не будущее: в светлой теме горит
   солнце, в тёмной — луна. */
.theme-moon{display:none}
:root[data-theme="dark"] .theme-sun{display:none}
:root[data-theme="dark"] .theme-moon{display:block}

/* ─── выбор ситуации ────────────────────────────────────── */
.picker{
  max-width:1080px; margin:0 auto; padding:6px var(--pad) 16px;
  display:flex; flex-direction:column; align-items:stretch;
}
.nav-top{display:none}
/* Ситуации переносятся на столько строк, сколько нужно: без скрытого скролла. */
.cats{display:flex; flex-wrap:wrap; gap:4px 20px; padding:6px 0 4px}
.chips{display:flex; flex-wrap:wrap; gap:5px; padding:10px 0 0}
.cat{
  flex:none; display:inline-flex; align-items:center;
  padding:3px 0; font-size:13px; font-weight:400; letter-spacing:-.01em;
  color:var(--ink-3); transition:.18s var(--ease); white-space:nowrap;
}
.cat:hover{color:var(--ink-2)}
.cat[aria-selected="true"]{color:var(--ink); font-weight:600}
/* Точка разделяет группы активностей внутри ряда чипов. */
.chip-dot{flex:0 0 auto; align-self:center; padding:0 6px; color:var(--ink-3)}
/* На десктопе чипы подразделов мельче разделов; на телефоне размер свой — 13px. */
.chip{
  flex:none; padding:5px 11px; border-radius:100px; font-size:13px; background:var(--surface);
  color:var(--ink-2); border:1px solid var(--line); transition:.2s var(--ease);
  white-space:nowrap;
}
.chip:hover{color:var(--ink); border-color:var(--line-2)}
.chip[aria-selected="true"]{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.chip.is-hint{
  border-color:var(--ink); box-shadow:0 0 0 3px var(--ring);
  animation:hintpulse 1.6s var(--ease) infinite;
}
@keyframes hintpulse{
  0%,100%{box-shadow:0 0 0 3px var(--ring)}
  50%{box-shadow:0 0 0 7px var(--ring-soft)}
}
.profile{position:relative}
.nav-profile{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--ink-2);
  white-space:nowrap; transition:.18s var(--ease); margin-top:4px;
}
.nav-profile:hover{color:var(--ink); border-color:var(--line-2)}
.nav-profile-label{color:var(--ink-3)}
.nav-profile-value{font-weight:500; color:var(--ink)}
.nav-profile-caret{flex:none; color:var(--ink-3); transition:transform .18s var(--ease)}
.nav-profile[aria-expanded="true"] .nav-profile-caret{transform:rotate(180deg)}

/* Выпадающее меню профиля раскрывается вверх из самой кнопки: она стоит
   в подвале, и вниз ему некуда. */
.profile-pop{
  position:absolute; bottom:calc(100% + 8px); left:0; z-index:45; width:250px;
  padding:14px; border-radius:16px; background:var(--surface);
  box-shadow:0 2px 6px rgba(16,16,20,.06), 0 24px 50px -22px rgba(16,16,20,.45);
  animation:pop .18s var(--ease);
}
.profile-pop[hidden]{display:none}
.profile-pop-label{
  display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:7px;
}
.profile-opts{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:14px}
.profile-opts--age{grid-template-columns:repeat(3,1fr); margin-bottom:0}
.profile-opt{
  padding:8px 6px; border-radius:11px; background:var(--surface-2); font-size:13px;
  text-align:center; transition:.16s var(--ease);
}
.profile-opt:hover{background:var(--surface-3)}
.profile-opt[aria-checked="true"]{background:var(--ink); color:var(--on-ink)}
.nav-scrim{position:fixed; inset:0; z-index:42; background:rgba(14,14,16,.3); animation:fade .2s}
.nav-scrim[hidden]{display:none}
.nav-hint{
  grid-column:1 / -1; display:flex; align-items:center; gap:14px; margin-top:10px;
  padding:11px 12px 11px 16px; border-radius:100px; background:var(--ink); color:var(--on-ink);
}
.nav-hint[hidden]{display:none}
.nav-hint-text{font-size:13px; line-height:1.4}
.nav-hint-ok{padding:6px 14px; border-radius:100px; background:var(--on-ink); color:var(--ink); font-size:12.5px; font-weight:500; flex:none; margin-left:auto}

/* ─── герой ─────────────────────────────────────────────── */
.hero{padding:62px 0 0; max-width:720px}
/* Раздел над заголовком повторяет выбранный чип, а на широком экране вся
   навигация стоит тут же, прямо над героем: подпись только дублировала её.
   На телефоне навигация спрятана в меню — там подпись остаётся единственным
   указанием, в каком разделе мы находимся, и её видно. */
.eyebrow{display:none; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
h1{font-size:clamp(30px,6.4vw,50px); line-height:1.06; letter-spacing:-.035em; margin:8px 0 14px}
/* Размер вынесен в переменную: по ней же считается высота строки,
   на которую садится кнопка More в свёрнутом виде. */
.blurb-wrap{--blurb-fs:clamp(15px,3.6vw,18px)}
.blurb{font-size:var(--blurb-fs); line-height:1.5; color:var(--ink-2); text-wrap:pretty}

/* ─── показатели ────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:46px 0 8px}
.stat{background:var(--surface); border-radius:var(--radius-s); padding:14px 14px 13px; box-shadow:0 1px 2px rgba(16,16,20,.04)}
.stat-label{display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
.stat-value{display:block; font-size:clamp(17px,4.2vw,23px); font-weight:500; letter-spacing:-.03em; line-height:1.1}
.stat-sub{display:block; font-size:12px; color:var(--ink-3); margin-top:4px; line-height:1.3}

/* ─── таймлайн ──────────────────────────────────────────── */
.timeline{
  background:var(--surface); border-radius:var(--radius); padding:18px 16px 14px;
  margin:12px 0 28px; box-shadow:var(--shadow);
}
.time-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.time-readout{display:flex; align-items:baseline; gap:8px; min-width:0; flex:1}
.time-value{
  font-family:"Geist Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(18px,4.4vw,22px); font-weight:500; letter-spacing:-.03em; white-space:nowrap;
}
.time-caption{font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Доза сценария: на чём посчитана кривая. Стоит между «Сбросить» и отклонением. */
.dose{
  flex:none; max-width:42%;
  color:var(--ink-3); font-size:11.5px; line-height:1.25; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reset{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:100px;
  background:var(--surface-2); color:var(--ink-2); font-size:12.5px; flex:none;
  transition:.18s var(--ease);
}
.reset:hover{background:var(--surface-3); color:var(--ink)}
.reset span{white-space:nowrap}

/* ─── легенда полов ─────────────────────────────────────── */
.sex-legend{display:flex; align-items:center; gap:6px; margin:2px 0 -4px}
.sex-legend[hidden]{display:none}
.sex-legend-label{font-size:12px; color:var(--ink-3); margin-right:2px}
.sexbtn{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 8px; border-radius:100px;
  font-size:12.5px; font-weight:500; color:var(--ink-3); background:var(--surface-2);
  border:1px solid transparent; transition:.16s var(--ease);
}
.sexbtn i{width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.35; flex:none}
.sexbtn:hover{color:var(--ink-2)}
.sexbtn--m[aria-pressed="true"]{color:var(--sex-m); background:var(--sex-m-soft); border-color:rgba(62,143,212,.35)}
.sexbtn--f[aria-pressed="true"]{color:var(--sex-f); background:var(--sex-f-soft); border-color:rgba(217,86,155,.35)}
.sexbtn[aria-pressed="true"] i{opacity:1}

.chart-wrap{position:relative; touch-action:pan-y}
.chart{width:100%; height:256px; cursor:crosshair; user-select:none}
.chart svg{display:block; width:100%; height:100%; overflow:visible}
.chart-tip{
  position:absolute; z-index:5; background:var(--ink); color:var(--on-ink);
  border-radius:10px; padding:8px 26px 8px 10px; font-size:12px; line-height:1.45; white-space:nowrap;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.4); transform:translate(-50%,0); transition:opacity .15s;
}
.chart-tip[hidden]{display:none}
.chart-tip b{font-weight:500}
.chart-tip .tip-row{display:flex; justify-content:space-between; gap:14px}
.chart-tip .tip-vals{display:inline-flex; gap:8px}
.chart-tip .tip-v{font-family:"Geist Mono",monospace; opacity:.85}
.chart-tip .tip-v--m{color:var(--tip-m); opacity:1}
.chart-tip .tip-v--f{color:var(--tip-f); opacity:1}
.tip-close{
  position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; color:var(--on-ink); opacity:.55; font-size:11px; line-height:1;
}
.tip-close:hover{opacity:1; background:var(--on-ink-fill)}

.scrub{
  -webkit-appearance:none; appearance:none; height:26px; background:transparent;
  display:block; cursor:grab;
  /* совпадает с полем построения графика, чтобы ползунок шёл ровно по линии времени */
  width:calc(100% - 46px); margin:2px 10px 0 36px;
}
.scrub:active{cursor:grabbing}
.scrub::-webkit-slider-runnable-track{height:4px; border-radius:3px; background:var(--line)}
.scrub::-moz-range-track{height:4px; border-radius:3px; background:var(--line)}
.scrub::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--surface);
  border:1.5px solid var(--line); box-shadow:0 2px 8px -2px rgba(16,16,20,.3); margin-top:-9px;
  transition:transform .15s var(--ease);
}
.scrub::-moz-range-thumb{
  width:22px; height:22px; border:1.5px solid var(--line); border-radius:50%; background:var(--surface);
  box-shadow:0 2px 8px -2px rgba(16,16,20,.3);
}
.scrub:active::-webkit-slider-thumb{transform:scale(1.12)}
.scrub:focus-visible::-webkit-slider-thumb{border-color:var(--ink)}

/* ─── фильтр списка ─────────────────────────────────────── */
.hfilter{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px}
.seg{display:inline-flex; gap:2px; padding:3px; border-radius:100px; background:var(--fill); min-width:0}
.seg-btn{
  padding:6px 13px; border-radius:100px; font-size:13.5px; color:var(--ink-2);
  transition:.18s var(--ease); display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.seg-btn[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(16,16,20,.08)}
.seg-count{
  font-family:"Geist Mono",monospace; font-size:11px; padding:1px 5px; border-radius:100px;
  background:var(--fill); color:var(--ink-2);
}

/* ─── гормоны ───────────────────────────────────────────── */
.hormones{margin-bottom:34px}
.hgroup{margin-bottom:22px}
.hgroup-title{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 9px 2px; font-weight:400;
}
.hgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(352px,1fr)); gap:6px}
.hcard{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
  background:var(--surface); border-radius:13px; padding:12px 14px; text-align:left; width:100%;
  box-shadow:0 1px 2px rgba(16,16,20,.04); transition:.2s var(--ease); position:relative;
}
.hcard:hover,.hcard.is-active{box-shadow:0 1px 2px rgba(16,16,20,.06), 0 10px 24px -14px rgba(16,16,20,.4); transform:translateY(-1px)}
.hcard.is-active{outline:1.5px solid var(--ink); outline-offset:-1.5px}
.hcard.is-flat{opacity:.55}
.hcard.is-flat:hover{opacity:1}
.hname{font-size:15px; font-weight:500; letter-spacing:-.015em; line-height:1.25; min-width:0}
.hrole{display:block; font-size:11.5px; color:var(--ink-3); font-weight:400; letter-spacing:0; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hbar{position:relative; width:104px; height:7px; flex:none}
.hbar-track{position:absolute; inset:0; border-radius:4px; background:var(--line-soft)}
.hbar-mid{position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--flat); opacity:.55}
.hbar-fill{
  position:absolute; top:0; height:7px; border-radius:4px;
  transition:left .45s var(--ease), width .45s var(--ease), background-color .3s var(--ease);
}
.hval{
  font-family:"Geist Mono",monospace; font-variant-numeric:tabular-nums; font-size:12.5px;
  width:56px; text-align:right; color:var(--ink-2); transition:color .3s var(--ease);
  white-space:nowrap;
}
.hval.up{color:var(--up)} .hval.down{color:var(--down)} .hval.flat{color:var(--ink-3)}
.hval.sex-m{color:var(--sex-m)} .hval.sex-f{color:var(--sex-f)}

/* Режим сравнения: у гормона две шкалы — мужская и женская. */
.hcard--dual{grid-template-columns:minmax(0,1fr) auto}
.hduo{display:grid; gap:5px}
.hrow{display:flex; align-items:center; gap:9px}
.hsex{
  font-style:normal; font-size:10.5px; font-weight:500; width:15px; text-align:center;
  border-radius:4px; padding:1px 0; flex:none;
}
.hsex--m{color:var(--sex-m); background:var(--sex-m-soft)}
.hsex--f{color:var(--sex-f); background:var(--sex-f-soft)}

/* ─── восстановление ────────────────────────────────────── */
.recovery{background:var(--surface); border-radius:var(--radius); padding:24px 20px; margin-bottom:28px; box-shadow:var(--shadow)}
.recovery-title{font-size:20px; margin-bottom:10px; letter-spacing:-.03em}
.recovery-text{font-size:15px; color:var(--ink-2); line-height:1.55; max-width:660px; text-wrap:pretty; white-space:pre-line}
/* колонка по контейнеру, а не по min-content длинного названия гормона */
.recovery-list{margin-top:18px; display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--line-soft); border-radius:12px; overflow:hidden}
.rrow{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--surface); padding:10px 13px}
.rrow-name{font-size:14px; min-width:0}
.rrow-name em{font-style:normal; color:var(--ink-3); font-size:12px; margin-left:7px}
.rrow-time{font-family:"Geist Mono",monospace; font-size:12.5px; color:var(--ink-2); white-space:nowrap}

/* ─── откуда цифры ──────────────────────────────────────── */
/* Последний блок страницы: без подложки, чтобы не спорить с карточкой
   возврата к норме, и тише её текста — это сноска, а не раздел. */
.source{margin:0 0 30px}
.source-title{font-size:13px; font-weight:500; color:var(--ink-2); letter-spacing:-.01em; margin-bottom:6px}
.source-text{
  font-size:13px; line-height:1.55; color:var(--ink-3); max-width:660px; text-wrap:pretty;
  /* источник бывает на десяток строк — в свёрнутом виде показываем три */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.source.is-open .source-text{display:block; overflow:visible}
.source-more{
  display:inline-flex; align-items:center; margin-top:9px; padding:2px 9px; border-radius:100px;
  font-size:12px; color:var(--ink-2); background:var(--fill); transition:.16s var(--ease); white-space:nowrap;
}
.source-more[hidden]{display:none}
.source-more:hover{background:var(--fill-hi); color:var(--ink)}

/* ─── рекомендация ──────────────────────────────────────── */
/* Плашка сразу под показателями: заголовок, две строки и More.
   Кнопка стоит на второй строке, а не под ней — плашка так на строку ниже. */
/* Обычно карточка одна. У цикла их две — ей и ему: рядом на широком экране
   и друг под другом на узком. Первой идёт карточка того, кто смотрит. */
.advice{display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:8px 0 0}
.advice.is-pair{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
.advice.is-him-first #timing2{order:-1}
.timing[hidden],.recovery-list[hidden],.hfilter[hidden]{display:none}
.timing{
  position:relative; margin:0; padding:16px 18px 15px; border-radius:var(--radius-s);
  background:var(--surface); box-shadow:0 1px 2px rgba(16,16,20,.04);
  --timing-fs:14.5px; --timing-pad:18px; --timing-bot:15px;
}
.timing-title{font-size:16px; font-weight:500; letter-spacing:-.025em; margin-bottom:7px}
.timing-text{
  font-size:var(--timing-fs); line-height:1.55; color:var(--ink-2); max-width:880px; text-wrap:pretty;
  /* рекомендация может идти шагами: пустая строка между ними должна доезжать до страницы */
  white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.timing.is-open .timing-text{display:block; overflow:visible}
.timing-text b{font-weight:500; color:var(--ink)}
.timing-more{
  position:absolute; right:var(--timing-pad); bottom:var(--timing-bot);
  display:inline-flex; align-items:center; height:calc(var(--timing-fs) * 1.55);
  padding:0 11px; border-radius:100px; font-size:12.5px; color:var(--ink-2);
  /* полупрозрачная заливка поверх непрозрачного фона карточки */
  background:linear-gradient(var(--fill),var(--fill)), var(--surface);
  transition:.16s var(--ease);
}
.timing-more[hidden]{display:none}
.timing-more::before{
  content:""; position:absolute; right:100%; top:0; bottom:0; width:32px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--surface));
}
.timing.is-open .timing-more{position:static; height:auto; margin-top:10px; padding:4px 12px}
.timing.is-open .timing-more::before{display:none}
.timing-more:hover{background:linear-gradient(var(--fill-hi),var(--fill-hi)), var(--surface); color:var(--ink)}

/* ─── подвал ────────────────────────────────────────────── */
.foot{padding:10px var(--pad) 44px; max-width:1080px; margin:0 auto; width:100%}
.foot-warn{
  padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:12.5px; line-height:1.55; color:var(--ink-3); text-wrap:pretty;
}
/* в свёрнутом виде от предупреждения остаётся одна строка — остальное под кнопкой More */
.foot-warn-p{display:inline}
.foot-warn .foot-warn-rest{display:none}
.foot-warn.is-open .foot-warn-rest{display:inline}
.foot-warn.is-open .foot-warn-p{display:block}
.foot-warn.is-open .foot-warn-p + .foot-warn-p{margin-top:.9em}
.foot-warn.is-open .foot-more{margin-top:.9em; margin-left:0}
.foot-warn-lead{color:var(--ink-2)}
.foot-more{
  font-size:12px; color:var(--ink-2); padding:1px 7px; margin-left:6px; border-radius:100px;
  background:var(--fill); transition:.16s var(--ease); white-space:nowrap;
}
.foot-more:hover{background:var(--fill-hi); color:var(--ink)}
.foot-row{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:14px}
.foot-row .profile{flex:none}
/* В подвале кнопка живёт без подложки: строка и так служебная. */
.foot-row .nav-profile{margin:0; background:none; border-color:transparent; padding:6px 4px}
.foot-row .nav-profile:hover{border-color:transparent; color:var(--ink)}
.foot-row .nav-profile-label{display:none}
/* В подвале кнопка стоит у правого края: меню растёт влево, иначе уходит за страницу. */
.foot-row .profile-pop{left:auto; right:0}
.foot-meta{font-size:12.5px; color:var(--ink-3); min-width:0}
.foot-meta a{color:var(--ink-2)}

/* ─── карточка гормона ──────────────────────────────────── */
.detail{
  position:fixed; z-index:50; width:min(360px,calc(100vw - 32px)); background:var(--surface);
  border-radius:18px; box-shadow:0 2px 6px rgba(16,16,20,.06), 0 28px 60px -24px rgba(16,16,20,.45);
  padding:18px 18px 16px; max-height:min(560px,calc(100vh - 40px)); overflow-y:auto;
  animation:pop .22s var(--ease); overscroll-behavior:contain;
}
.detail[hidden]{display:none}
/* Полоса прокрутки появляется только на время прокрутки: в покое ползунок
   прозрачный, место под него зарезервировано и не дёргает вёрстку. */
.detail{scrollbar-width:thin; scrollbar-color:transparent transparent}
.detail.is-scrolling{scrollbar-color:var(--scroll-thumb) transparent}
.detail::-webkit-scrollbar{width:6px}
.detail::-webkit-scrollbar-track{background:transparent}
.detail::-webkit-scrollbar-thumb{
  background:transparent; border-radius:100px; transition:background-color .3s var(--ease);
}
.detail.is-scrolling::-webkit-scrollbar-thumb{background:var(--scroll-thumb)}
/* Крестик везде один и тот же и нарисован вектором, а не знаком «✕»: у знака
   положение внутри строки задаёт шрифт, которым его рисует система, — на iOS
   это не тот шрифт, что на десктопе, и крестик уезжал по вертикали
   относительно соседнего знака темы. Обводка у всех знаков в шапке одна
   (1,7 экранного пикселя независимо от размера) — отсюда non-scaling-stroke. */
.x{flex:none}
.iconbtn .x,.ob-close .x{width:20.8px; height:20.8px}
.tip-close .x{width:14.4px; height:14.4px}
/* Пин крупнее крестика: у него мелкая внутренняя деталь, и в один размер
   с крестиком он читался хуже соседа. */
.detail-pin svg{width:16.8px; height:16.8px}

/* Одна круглая кнопка на всё: крестик в меню, крестик и «закрепить» в окне гормона.
   Кружок 34px, тап-зона расширена невидимым полем — палец попадает и на телефоне. */
.iconbtn{
  position:relative; width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--surface-2); color:var(--ink-2); font-size:13px;
  display:grid; place-items:center; transition:.15s var(--ease);
}
.iconbtn::after{content:""; position:absolute; inset:-6px; border-radius:50%}
.iconbtn:hover{background:var(--surface-3); color:var(--ink)}
.iconbtn[aria-pressed="true"]{background:var(--ink); color:var(--on-ink)}

.detail-tools{position:absolute; top:12px; right:12px; z-index:2; display:flex; gap:6px}
.detail-close[hidden]{display:none}
.detail-head{margin-bottom:12px; padding-right:82px}
.detail-name{font-size:21px; letter-spacing:-.03em}
.detail-latin{font-size:12px; color:var(--ink-3); font-family:"Geist Mono",monospace; margin-top:2px}
.detail-note{font-size:13.5px; line-height:1.5; color:var(--ink); margin-bottom:14px; padding-left:11px; border-left:2px solid var(--line); text-wrap:pretty}
.detail-sec{margin-bottom:12px}
.detail-sec h4{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:400; margin:0 0 4px}
.detail-sec p{font-size:13.5px; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.detail-base{font-size:12.5px; line-height:1.45; color:var(--ink-3); padding-top:11px; border-top:1px solid var(--line-soft)}
.detail-base b{color:var(--ink-2); font-weight:500}
body.is-locked{position:fixed; left:0; right:0; width:100%; overflow:hidden}
.scrim{position:fixed; inset:0; z-index:45; background:rgba(14,14,16,.28); animation:fade .2s}
.scrim[hidden]{display:none}

/* ─── анимации ──────────────────────────────────────────── */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:translateY(6px) scale(.98)}to{opacity:1; transform:none}}
.fade-in{animation:fade .35s var(--ease) both}

/* ─── мобильный ─────────────────────────────────────────── */
@media (max-width:720px){
  :root{--pad:16px; --topbar-h:56px}
  .burger{display:inline-flex}
  .topbar{gap:8px}
  /* Логотип остаётся на месте, а чип занимает место бургера: при скролле
     в шапке всё равно две кнопки, просто вторая теперь называет раздел. */
  .sect-chip{flex:0 1 auto; min-width:0; margin-left:auto; max-width:calc(100% - 150px)}


  /* Вся навигация уезжает в панель под бургером. */
  .picker{
    position:fixed; top:0; right:0; bottom:0; z-index:44; width:min(370px,88vw); max-width:none;
    display:flex; flex-direction:column; align-items:stretch; margin:0;
    padding:0 var(--pad) calc(24px + env(safe-area-inset-bottom));
    background:var(--surface); overflow-y:auto; overscroll-behavior:contain;
    /* Полоса прокрутки съедала 15px справа и сдвигала крестик с оси бургера. */
    scrollbar-width:none;
    box-shadow:-12px 0 40px -18px rgba(16,16,20,.5);
    transform:translateX(102%); transition:transform .28s var(--ease); visibility:hidden;
  }
  .picker::-webkit-scrollbar{width:0; height:0}
  .picker.is-open{transform:none; visibility:visible}
  .nav-top{order:0; flex:none} .cats{order:1; flex:none} .chips{order:2; flex:none} .nav-hint{order:3}
  .profile{order:4}
  /* Шапка панели повторяет шапку страницы: «Разделы» стоят на уровне логотипа,
     а крестик попадает ровно в центр бургера — по обеим осям. */
  .nav-top{
    display:flex; align-items:center; justify-content:space-between;
    height:var(--topbar-h); margin-bottom:12px; flex:none;
  }
  .nav-title{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
  /* В панели знак темы встаёт слева от крестика: auto-отступ съедает
     свободное место, и обе кнопки остаются парой у правого края —
     крестик при этом не сходит с оси бургера. */
  .nav-top .theme{
    position:static; transform:none; opacity:1; pointer-events:auto;
    width:44px; height:44px; margin-left:auto; border-radius:50%;
    background:none; box-shadow:none; color:var(--ink-2);
  }
  .nav-top .theme:hover{background:none}
  /* Знак и крестик — пара: одинаковые габариты, один уровень, встык. */
  .nav-top .theme svg{width:24px; height:24px}
  /* пол и возраст трогают редко — они уходят в самый низ панели */
  .profile{margin:auto 0 0; flex:none}
  .nav-profile{display:flex; width:100%; justify-content:space-between; margin:0; padding:12px 14px; border-radius:13px}
  .nav-profile-value{margin-left:auto}
  .nav-profile-caret{margin-left:8px}
  /* В панели меню занимает всю её ширину и раскрывается вверх над кнопкой. */
  .profile-pop{width:auto; left:0; right:0; bottom:calc(100% + 8px)}
  .profile-opt{padding:11px 6px; font-size:14px}
  .cats,.chips{display:flex; flex-wrap:wrap; padding:0}
  .cats{gap:4px 18px; margin-bottom:26px; padding:0 0 26px; border-bottom:1px solid var(--line-soft)}
  .chips{gap:5px; padding:0 0 6px}
  .cat{padding:3px 0; font-size:13px}
  .chip{padding:6px 11px; font-size:13px}
  .nav-hint{
    display:block; position:sticky; bottom:0; margin-top:18px; padding:14px;
    border-radius:14px; background:var(--ink); color:var(--on-ink);
  }
  .nav-hint[hidden]{display:none}
  .nav-hint-text{font-size:13px; line-height:1.45; text-wrap:pretty}
  .nav-hint-ok{margin-top:10px; padding:8px 16px; border-radius:100px; background:var(--on-ink); color:var(--ink); font-size:13px; font-weight:500}

  .stats{grid-template-columns:repeat(3,1fr); gap:6px; margin:30px 0 6px}
  .stat{padding:11px 10px 12px; border-radius:11px}
  .stat-label{font-size:9px; letter-spacing:.04em; line-height:1.25; margin-bottom:6px; min-height:22px}
  .stat-value{font-size:15px}
  .stat-sub{font-size:10px; line-height:1.25; margin-top:3px}

  .advice{gap:6px; margin-top:6px}
  .advice.is-pair{grid-template-columns:minmax(0,1fr)}
  .timing{margin:0; padding:15px 15px 14px; --timing-fs:13.5px; --timing-pad:15px; --timing-bot:14px}
  .timing-title{font-size:15px; margin-bottom:6px}
  .timing-text{line-height:1.5}
  .timing-more{height:calc(var(--timing-fs) * 1.5); font-size:12px}
  .timing.is-open .timing-more{margin-top:9px; padding:3px 11px}
  .hero{padding-top:18px}
  .eyebrow{display:block}
  .timeline{padding:15px 13px 12px; border-radius:17px}
  .chart{height:214px}
  .hgrid{grid-template-columns:1fr}
  .hcard{padding:11px 13px; gap:10px}
  .hbar{width:80px}
  .hcard--dual .hbar{width:74px}
  .recovery{padding:20px 16px}
  .source{margin-bottom:22px; padding-top:16px}
  .source-text{font-size:12.5px}
  .hfilter{margin-bottom:12px}
  .seg{display:grid; grid-template-columns:1fr 1fr; justify-content:stretch; width:100%}
  .seg-btn{padding:7px 6px; font-size:12.5px; justify-content:center; gap:4px; min-width:0}
  .seg-btn > span:not(.seg-count){min-width:0; overflow:hidden; text-overflow:ellipsis}
  .seg-count{font-size:10.5px; padding:1px 4px}
  .reset span{display:none}
  .time-caption{display:none}
  .reset{padding:7px; width:32px; height:32px; justify-content:center}   /* знак вырос до 16px — без высоты кружок становится овалом */
  .chart-tip{white-space:normal; max-width:min(78vw,260px)}
  .foot-row{flex-direction:column; align-items:flex-start; gap:12px}
  .detail{
    left:0 !important; right:0; bottom:0; top:auto !important; width:100%;
    border-radius:22px 22px 0 0; padding:20px 18px calc(22px + env(safe-area-inset-bottom));
    max-height:82vh; animation:sheet .3s var(--ease);
  }
  /* На телефоне у кнопок-кружков нет фона: в него всё равно целятся пальцем,
     а сам знак вдвое крупнее — так он читается без подложки. */
  .iconbtn,.ob-close{background:none; width:44px; height:44px}
  .iconbtn .x,.ob-close .x{width:27.2px; height:27.2px}
  .iconbtn:hover{background:none}
  /* Пин в шите не нужен: лист и так держится, пока его не закроют. */
  .detail-pin{display:none}
  /* Бургер и чип занимают один и тот же угол и перетекают друг в друга:
     бургер уходит через прозрачность и лёгкое сжатие, чип приходит навстречу.
     Поэтому бургер вынут из потока — иначе чипу не хватало бы ширины. */
  .burger{
    position:absolute; right:var(--pad); top:50%; margin:0; width:44px; height:44px;
    background:none; box-shadow:none; transform:translateY(-50%);
    transition:opacity .24s var(--ease), transform .24s var(--ease);
  }
  .burger:hover{background:none}
  .topbar.is-scrolled .burger{opacity:0; transform:translateY(-50%) scale(.8); pointer-events:none}
  .sect-chip{transform:translateY(-2px) scale(.94); transform-origin:right center;
    transition:opacity .24s var(--ease), transform .24s var(--ease)}
  /* Доза рядом со временем на узкий экран не влезает: она сжимала подпись
     «после начала» до нуля, а на самых узких налезала на сами цифры.
     Поэтому время с кнопкой остаются в первой строке, а доза уходит
     во вторую на всю ширину и переносится по словам. */
  .time-head{flex-wrap:wrap}
  .reset{order:2}
  .dose{order:3; flex:1 0 100%; max-width:100%; white-space:normal; margin-top:4px}
  .detail-tools{top:10px; right:10px}
  .detail-close{display:grid}
  .detail-head{padding-right:46px}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
}
@media (hover:none){
  .hcard:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:6px}