/* ============================================================================
   RU: Дизайн-система Yottis. Единый источник токенов и компонентов для всех
       макетов. Токены объявлены на :root в светлой теме; тёмная переопределяет
       ТОЛЬКО значения токенов — ни один компонент ниже не знает о теме.
       Это позволяет менять палитру целиком, не трогая разметку.
   EN: Yottis design system. Single source of tokens and components for every
       mockup. Tokens are declared on :root for the light theme; the dark theme
       overrides ONLY token values — no component below is theme-aware.
       This lets the whole palette change without touching any markup.
   ============================================================================ */

:root {
  /* RU: Цвет — светлая тема / EN: Color — light theme */
  --y-brand:#0F7A6B; --y-brand-strong:#0A5C51; --y-brand-soft:#E6F4F1;
  --y-link:#1A4FBF;  --y-visited:#6B3FA0;      --y-accent:#E8862A;
  --y-ink:#16191D;   --y-ink-2:#3C444C;        --y-muted:#5B646E; --y-faint:#8A939C;
  --y-bg:#FFFFFF;    --y-surface:#F6F8F8;      --y-surface-2:#EDF1F1;
  /* RU: line-strong — граница поля ввода и кнопки. Требование WCAG 1.4.11:
         контраст границы элемента управления к фону не ниже 3:1. Прежний
         #C4CCCF давал 1.63 — границу поля не видел никто, у кого экран
         не идеален или свет падает на него сбоку. Новый даёт 3.48 на белом
         и 3.06 на самой светлой поверхности, то есть проходит везде,
         где используется.
     EN: line-strong is the border of an input and a button. WCAG 1.4.11 requires a control
         boundary to contrast at least 3:1 with its background. The former #C4CCCF gave 1.63 —
         nobody with a less-than-perfect screen or side light saw the field's edge. The new one
         gives 3.48 on white and 3.06 on the lightest surface, i.e. it passes everywhere it is
         used. */
  --y-line:#DFE4E6;  --y-line-strong:#828B8F;
  --y-ok:#137A44;    --y-warn:#9A6B00;         --y-danger:#C0392B; --y-ad:#7A5C00;

  /* RU: Типографика / EN: Typography */
  --y-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --y-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* RU: Шаг сетки 4px / EN: 4px spacing scale */
  --y-1:4px; --y-2:8px; --y-3:12px; --y-4:16px; --y-5:20px;
  --y-6:24px; --y-8:32px; --y-10:40px; --y-12:48px;

  /* RU: Форма и тени / EN: Shape and shadows */
  --y-r-sm:6px; --y-r-md:10px; --y-r-lg:16px; --y-r-pill:999px;
  --y-sh-1:0 1px 2px rgba(16,24,28,.06),0 1px 3px rgba(16,24,28,.08);
  --y-sh-2:0 4px 12px rgba(16,24,28,.10),0 1px 3px rgba(16,24,28,.06);
  --y-focus:0 0 0 3px rgba(15,122,107,.35);

  /* RU: Раскладка / EN: Layout */
  --y-col-results:652px; --y-col-side:372px; --y-gutter:40px; --y-header-h:64px;
}

/* RU: Тёмная тема. Два селектора: системное предпочтение и явный выбор кнопкой.
       Guard :not([data-theme="light"]) нужен, чтобы явный светлый выбор побеждал
       системную тёмную — иначе переключатель работает только в одну сторону.
   EN: Dark theme. Two selectors: system preference and explicit toggle.
       The :not([data-theme="light"]) guard lets an explicit light choice beat a
       dark system setting — otherwise the toggle only works one way. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --y-brand:#3FBFAE; --y-brand-strong:#63D3C3; --y-brand-soft:#0F2C29;
    --y-link:#8AB4F8;  --y-visited:#C9A7EE;      --y-accent:#F0A94E;
    --y-ink:#E6EBEC;   --y-ink-2:#B9C2C6;        --y-muted:#8E999E; --y-faint:#6E787D;
    --y-bg:#0E1416;    --y-surface:#161D20;      --y-surface-2:#1E272A;
    --y-line:#263134;  --y-line-strong:#69787C;
    --y-ok:#4ED08A;    --y-warn:#E0B341;         --y-danger:#F0776A; --y-ad:#D9B45B;
    --y-sh-1:0 1px 2px rgba(0,0,0,.4); --y-sh-2:0 4px 14px rgba(0,0,0,.5);
    --y-focus:0 0 0 3px rgba(63,191,174,.4);
  }
}
:root[data-theme="dark"]{
  --y-brand:#3FBFAE; --y-brand-strong:#63D3C3; --y-brand-soft:#0F2C29;
  --y-link:#8AB4F8;  --y-visited:#C9A7EE;      --y-accent:#F0A94E;
  --y-ink:#E6EBEC;   --y-ink-2:#B9C2C6;        --y-muted:#8E999E; --y-faint:#6E787D;
  --y-bg:#0E1416;    --y-surface:#161D20;      --y-surface-2:#1E272A;
  --y-line:#263134;  --y-line-strong:#69787C;
  --y-ok:#4ED08A;    --y-warn:#E0B341;         --y-danger:#F0776A; --y-ad:#D9B45B;
  --y-sh-1:0 1px 2px rgba(0,0,0,.4); --y-sh-2:0 4px 14px rgba(0,0,0,.5);
  --y-focus:0 0 0 3px rgba(63,191,174,.4);
}

/* ── База / Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--y-bg); color:var(--y-ink);
  font:15px/1.53 var(--y-font);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--y-link); text-decoration:none}
a:hover{text-decoration:underline}
a:visited{color:var(--y-visited)}
:focus-visible{outline:none; box-shadow:var(--y-focus); border-radius:var(--y-r-sm)}
img{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}

/* RU: Уважаем системную настройку «меньше движения» — в утилите анимация это задержка.
   EN: Respect reduced-motion — in a utility, animation is just latency. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ── Логотип / Logo ──────────────────────────────────────────────────────── */
/* RU: Знак — «Y», стебель которой распадается на убывающие точки: метафора
       глубины индекса (yotta = 10^24). Рисуется инлайновым SVG, без картинок.
   EN: The mark is a "Y" whose stem breaks into shrinking dots: a metaphor for
       index depth (yotta = 10^24). Drawn as inline SVG, no image assets. */
.y-logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none!important}
.y-logo:visited{color:inherit}
.y-logo svg{display:block; flex:none}
.y-logo-text{
  font-weight:650; letter-spacing:-.022em; color:var(--y-ink);
  font-size:22px; line-height:1;
}
.y-logo-text b{color:var(--y-brand); font-weight:650}
.y-logo--lg .y-logo-text{font-size:44px}
.y-logo--sm .y-logo-text{font-size:19px}

/* ── Шапка / Header ──────────────────────────────────────────────────────── */
.y-header{
  position:sticky; top:0; z-index:40; background:var(--y-bg);
  border-bottom:1px solid var(--y-line);
}
.y-header-in{display:flex; align-items:center; gap:var(--y-6); padding:var(--y-3) var(--y-6); min-height:var(--y-header-h)}
.y-header-search{flex:1; max-width:640px}
.y-header-actions{margin-left:auto; display:flex; align-items:center; gap:var(--y-2)}

/* ── Строка поиска / Search box ──────────────────────────────────────────── */
.y-search{position:relative}
.y-search-field{
  display:flex; align-items:center; gap:var(--y-2);
  height:48px; padding:0 var(--y-2) 0 var(--y-5);
  background:var(--y-bg); border:1px solid var(--y-line-strong);
  border-radius:var(--y-r-pill); transition:box-shadow .12s, border-color .12s;
}
.y-search-field:hover{box-shadow:var(--y-sh-1)}
.y-search-field:focus-within{border-color:var(--y-brand); box-shadow:var(--y-focus)}
.y-search--lg .y-search-field{height:56px; font-size:17px}
.y-search input{
  flex:1; border:0; background:transparent; outline:none;
  font-size:16px; color:var(--y-ink); min-width:0;
}
.y-search input::placeholder{color:var(--y-faint)}
.y-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; border-radius:var(--y-r-pill);
  background:transparent; color:var(--y-muted); cursor:pointer;
}
.y-icon-btn:hover{background:var(--y-surface-2); color:var(--y-ink)}
.y-icon-btn--go{color:var(--y-brand)}

/* RU: Саджест. Скрыт через [hidden]; при показе — тень 2-го уровня.
   EN: Suggestions. Hidden via [hidden]; shown with level-2 shadow. */
.y-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50;
  background:var(--y-bg); border:1px solid var(--y-line);
  border-radius:var(--y-r-md); box-shadow:var(--y-sh-2);
  padding:var(--y-1) 0; overflow:hidden;
}
.y-suggest[hidden]{display:none}
.y-suggest-item{
  display:flex; align-items:center; gap:var(--y-3);
  padding:0 var(--y-5); height:40px; cursor:pointer; color:var(--y-ink);
}
.y-suggest-item:hover,.y-suggest-item[aria-selected="true"]{background:var(--y-surface-2)}
.y-suggest-item .ico{color:var(--y-faint); flex:none; display:flex}
.y-suggest-item .txt{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.y-suggest-item .txt b{font-weight:600}
.y-suggest-item .rm{color:var(--y-faint); font-size:12px; padding:2px 6px; border-radius:var(--y-r-sm)}
.y-suggest-item .rm:hover{background:var(--y-line); color:var(--y-ink)}

/* ── Регион / Region ─────────────────────────────────────────────────────── */
/* RU: Плашка региона ненавязчива, но всегда на месте. Скрывать регион нельзя:
       пользователь, получивший результаты не своего города и не понимающий
       почему, уходит и не возвращается (docs/17-geo-detection.md, §17.3).
   EN: The region chip is unobtrusive but always present. Hiding the region is not
       an option: a user who gets results for the wrong city and cannot see why
       leaves and does not come back (docs/17-geo-detection.md §17.3). */
.y-region{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 var(--y-3);
  border:1px solid transparent; border-radius:var(--y-r-pill);
  background:transparent; color:var(--y-muted); font-size:13px; cursor:pointer;
}
.y-region:hover{background:var(--y-surface-2); color:var(--y-ink); border-color:var(--y-line)}
.y-region b{font-weight:600; color:var(--y-ink-2)}
/* RU: Разделитель ставим псевдоэлементом: в разметке он был бы частью текста
       и слипался с названием города при любом размере шрифта.
   EN: The separator is a pseudo-element: in markup it would be part of the text and
       would collide with the city name at any font size. */
.y-region .chg{color:var(--y-faint)}
.y-region .chg::before{content:"·"; margin:0 5px 0 1px; color:var(--y-line-strong)}
.y-region svg{flex:none}

.y-regionbox{
  position:absolute; z-index:60; width:300px; max-width:calc(100vw - 32px);
  background:var(--y-bg); border:1px solid var(--y-line);
  border-radius:var(--y-r-md); box-shadow:var(--y-sh-2); padding:var(--y-3);
}
.y-regionbox[hidden]{display:none}
.y-regionbox input{
  width:100%; height:36px; padding:0 var(--y-3); font-size:14px; margin-bottom:var(--y-2);
  border:1px solid var(--y-line-strong); border-radius:var(--y-r-sm);
  background:var(--y-bg); color:var(--y-ink); outline:none;
}
.y-regionbox input:focus{border-color:var(--y-brand); box-shadow:var(--y-focus)}
.y-regionbox ul{list-style:none; margin:0; padding:0; max-height:214px; overflow-y:auto}
.y-regionbox li{
  padding:8px var(--y-3); border-radius:var(--y-r-sm); cursor:pointer; font-size:14px;
  display:flex; align-items:baseline; gap:var(--y-2);
}
.y-regionbox li:hover{background:var(--y-surface-2)}
.y-regionbox li.is-on{background:var(--y-brand-soft); color:var(--y-brand-strong); font-weight:600}
.y-regionbox li span{font-size:12px; color:var(--y-muted); margin-left:auto}
.y-regionbox .auto{
  margin-top:var(--y-2); padding-top:var(--y-2); border-top:1px solid var(--y-line);
  font-size:12.5px; color:var(--y-muted); display:flex; align-items:center; gap:var(--y-2);
}
.y-regionbox .auto button{
  border:0; background:none; color:var(--y-link); font-size:12.5px; cursor:pointer; padding:0;
}

/* ── Вкладки вертикалей / Vertical tabs ──────────────────────────────────── */
.y-tabs{
  display:flex; gap:var(--y-1); align-items:center;
  border-bottom:1px solid var(--y-line); padding:0 var(--y-6);
  overflow-x:auto; scrollbar-width:none;
}
.y-tabs::-webkit-scrollbar{display:none}
.y-tab{
  padding:0 var(--y-3); height:44px; display:inline-flex; align-items:center;
  color:var(--y-muted); border-bottom:2px solid transparent; white-space:nowrap;
  background:none; border-top:0; border-left:0; border-right:0; cursor:pointer;
}
.y-tab:hover{color:var(--y-ink); text-decoration:none}
.y-tab[aria-current="page"],.y-tab.is-active{color:var(--y-brand); border-bottom-color:var(--y-brand); font-weight:550}

/* ── Чипы / Chips ────────────────────────────────────────────────────────── */
.y-chips{display:flex; flex-wrap:wrap; gap:var(--y-2)}
.y-chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 var(--y-3);
  border:1px solid var(--y-line-strong); border-radius:var(--y-r-pill);
  background:var(--y-bg); color:var(--y-ink-2); font-size:13px; cursor:pointer;
}
.y-chip:hover{background:var(--y-surface-2)}
.y-chip.is-on{background:var(--y-brand-soft); border-color:var(--y-brand); color:var(--y-brand-strong); font-weight:550}

/* ── Уточнение запроса (задача 5.14) / Query clarification (task 5.14) ────── */
/* RU: Высота ограничена, а не выведена из содержимого: блок входит
       в общий бюджет первого экрана (`serpdialog.CLARIFICATION_MAX_PX`
       = 96), и растущий по содержимому он отодвигал бы органику ровно
       на длинных вопросах — то есть незаметно и не всегда.
       Переполнение прячется, а не переносится: второй ряд вариантов
       означает, что их слишком много, и вопрос надо сокращать в коде,
       а не растягивать в стилях.
   EN: The height is capped rather than derived from content: the block enters the shared
       first-screen budget (`serpdialog.CLARIFICATION_MAX_PX` = 96), and growing with content it
       would push the organic results down exactly on long questions — that is, invisibly and not
       always. Overflow is hidden rather than wrapped: a second row of options means there are too
       many of them, and the question must be shortened in code rather than stretched in styles. */
.y-clarify{
  display:flex; align-items:center; gap:var(--y-3); flex-wrap:wrap;
  max-height:96px; overflow:hidden;
  margin:var(--y-3) 0; padding:var(--y-3) var(--y-4);
  border:1px solid var(--y-line); border-radius:var(--y-r-sm);
  background:var(--y-surface-2);
}
.y-clarify-q{font-size:14px; color:var(--y-ink-2); font-weight:550}
.y-clarify-opts{display:flex; gap:var(--y-2); flex-wrap:wrap}
/* RU: Крестик прижат вправо: закрытие — не вариант ответа, и стоять
       в одном ряду с вариантами оно не должно, иначе закрывают вместо
       того, чтобы отвечать.
   EN: The close control is pushed right: dismissing is not one of the answers, and it must not sit in
       the same row as them, otherwise people dismiss instead of answering. */
.y-clarify [data-dismiss]{margin-left:auto}

/* ── Кнопки / Buttons ────────────────────────────────────────────────────── */
.y-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--y-2);
  height:40px; padding:0 var(--y-5); border-radius:var(--y-r-sm);
  border:1px solid transparent; background:var(--y-brand); color:#fff;
  font-size:14px; font-weight:550; cursor:pointer; text-decoration:none!important;
}
.y-btn:hover{background:var(--y-brand-strong)}
.y-btn--ghost{background:transparent; border-color:var(--y-line-strong); color:var(--y-ink)}
.y-btn--ghost:hover{background:var(--y-surface-2)}
.y-btn--text{background:transparent; color:var(--y-link); padding:0 var(--y-2)}
.y-btn--text:hover{background:var(--y-surface-2)}
.y-btn--sm{height:32px; padding:0 var(--y-3); font-size:13px}
.y-btn--danger{background:var(--y-danger)}

/* ── Раскладка выдачи / SERP layout ──────────────────────────────────────── */
.y-serp{display:grid; grid-template-columns:var(--y-col-results) var(--y-col-side);
  gap:var(--y-gutter); padding:var(--y-6) var(--y-6) 80px 148px; align-items:start}
@media (max-width:1439px){.y-serp{padding-left:var(--y-6)}}
@media (max-width:1100px){.y-serp{grid-template-columns:minmax(0,var(--y-col-results))}}
@media (max-width:700px){.y-serp{padding:var(--y-4) var(--y-4) 60px}}

.y-stats{color:var(--y-muted); font-size:13px; margin:0 0 var(--y-5)}
.y-fix{margin:0 0 var(--y-5); font-size:15px}
.y-fix b{color:var(--y-ink); font-style:italic}

/* ── Результат / Result ──────────────────────────────────────────────────── */
.y-result{margin-bottom:var(--y-8); max-width:100%}
.y-result-head{display:flex; align-items:center; gap:var(--y-3); margin-bottom:var(--y-1)}
.y-fav{
  width:26px; height:26px; border-radius:var(--y-r-pill); flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--y-surface-2); border:1px solid var(--y-line);
  font-size:12px; font-weight:650; color:var(--y-muted);
}
.y-result-path{min-width:0}
.y-result-site{font-size:14px; color:var(--y-ink); line-height:18px}
.y-result-crumbs{font-size:12px; color:var(--y-muted); line-height:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.y-result-menu{margin-left:auto}
.y-result-title{
  font-size:19px; line-height:25px; font-weight:400; margin:0 0 var(--y-1);
}
.y-result-title a{color:var(--y-link)}
.y-result-title a:visited{color:var(--y-visited)}
.y-result-snip{font-size:14px; line-height:22px; color:var(--y-ink-2); margin:0}
.y-result-snip b{color:var(--y-ink); font-weight:650}
.y-result-snip .date{color:var(--y-muted)}
.y-sitelinks{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--y-1) var(--y-6);
  margin-top:var(--y-3); padding-left:var(--y-3);
  border-left:2px solid var(--y-line);
}
.y-sitelinks a{font-size:13px}
.y-result-badges{display:flex; gap:var(--y-2); margin-top:var(--y-2); flex-wrap:wrap}
.y-badge{
  font-size:11px; padding:2px 7px; border-radius:var(--y-r-sm);
  background:var(--y-surface-2); color:var(--y-muted); border:1px solid var(--y-line);
}
.y-badge--score{font-family:var(--y-mono); color:var(--y-brand-strong); background:var(--y-brand-soft); border-color:transparent}
.y-badge--ad{color:var(--y-ad); border-color:currentColor; background:transparent; font-weight:600}

/* ── Карточки и блоки / Cards and blocks ─────────────────────────────────── */
.y-card{
  background:var(--y-surface); border:1px solid var(--y-line);
  border-radius:var(--y-r-md); padding:var(--y-5); margin-bottom:var(--y-6);
}
.y-card-title{font-size:13px; font-weight:600; color:var(--y-muted);
  text-transform:uppercase; letter-spacing:.05em; margin:0 0 var(--y-3)}

/* RU: Блок «Ответ» — генеративная сводка. Левая полоса цветом бренда и мягкая
       подложка отделяют машинный текст от органики визуально, а не только словом.
   EN: The "Answer" block — generative summary. A brand-colored left rule and a
       soft tint separate machine text from organic results visually, not just in words. */
.y-answer{
  border-left:3px solid var(--y-brand); background:var(--y-brand-soft);
  border-radius:0 var(--y-r-md) var(--y-r-md) 0;
  padding:var(--y-4) var(--y-5); margin-bottom:var(--y-6);
}
.y-answer-head{display:flex; align-items:center; gap:var(--y-2); margin-bottom:var(--y-2)}
.y-answer-label{font-size:12px; font-weight:650; color:var(--y-brand-strong);
  text-transform:uppercase; letter-spacing:.05em}
.y-answer-body{font-size:15px; line-height:23px; color:var(--y-ink); margin:0}
.y-cite{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; margin:0 1px;
  border-radius:4px; background:var(--y-bg); border:1px solid var(--y-line-strong);
  font-size:11px; font-weight:650; color:var(--y-brand-strong);
  vertical-align:2px; text-decoration:none!important;
}
.y-cite:hover{background:var(--y-brand); color:#fff; border-color:var(--y-brand)}
.y-answer-sources{display:flex; flex-wrap:wrap; gap:var(--y-2); margin-top:var(--y-3)}
.y-answer-src{
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  padding:4px 10px; background:var(--y-bg); border:1px solid var(--y-line);
  border-radius:var(--y-r-pill); color:var(--y-ink-2);
}
.y-answer-note{font-size:11px; color:var(--y-muted); margin-top:var(--y-3)}

/* ── Панель знаний / Knowledge panel ─────────────────────────────────────── */
.y-kp{border:1px solid var(--y-line); border-radius:var(--y-r-lg); overflow:hidden;
  background:var(--y-bg); margin-bottom:var(--y-6)}
.y-kp-hero{height:120px; background:linear-gradient(135deg,var(--y-brand) 0%,#1B9E8C 55%,var(--y-accent) 160%)}
.y-kp-body{padding:var(--y-5)}
.y-kp-title{font-size:21px; font-weight:600; margin:0 0 2px}
.y-kp-sub{font-size:13px; color:var(--y-muted); margin:0 0 var(--y-4)}
.y-kp-fact{display:flex; gap:var(--y-3); font-size:13px; padding:7px 0;
  border-top:1px solid var(--y-line)}
.y-kp-fact dt{color:var(--y-muted); flex:0 0 118px}
.y-kp-fact dd{margin:0; color:var(--y-ink)}

/* ── Таблицы и служебные / Tables and utilities ──────────────────────────── */
.y-table{width:100%; border-collapse:collapse; font-size:13px}
.y-table th{text-align:left; font-weight:600; color:var(--y-muted); padding:8px 10px;
  border-bottom:1px solid var(--y-line-strong); white-space:nowrap}
.y-table td{padding:9px 10px; border-bottom:1px solid var(--y-line); vertical-align:top}
.y-table tr:hover td{background:var(--y-surface)}
/* RU: Широкий блок прокручивается внутри себя, страница вбок не едет никогда.
   EN: A wide block scrolls inside itself; the page body never scrolls sideways. */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.y-mono{font-family:var(--y-mono); font-size:12px}
.y-dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex:none}
.y-dot--ok{background:var(--y-ok)} .y-dot--warn{background:var(--y-warn)}
.y-dot--err{background:var(--y-danger)} .y-dot--idle{background:var(--y-line-strong)}

.y-toggle{
  position:relative; width:44px; height:24px; flex:none; border-radius:var(--y-r-pill);
  background:var(--y-line-strong); border:0; cursor:pointer; transition:background .15s;
}
.y-toggle::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform .15s; box-shadow:var(--y-sh-1)}
.y-toggle[aria-checked="true"]{background:var(--y-brand)}
.y-toggle[aria-checked="true"]::after{transform:translateX(20px)}

.y-row{display:flex; align-items:center; gap:var(--y-4); padding:var(--y-4) 0;
  border-bottom:1px solid var(--y-line)}
.y-row:last-child{border-bottom:0}
.y-row-main{flex:1; min-width:0}
.y-row-title{font-size:14px; font-weight:550; margin:0 0 2px}
.y-row-desc{font-size:13px; color:var(--y-muted); margin:0}

.y-metric{background:var(--y-surface); border:1px solid var(--y-line);
  border-radius:var(--y-r-md); padding:var(--y-4)}
.y-metric-label{font-size:12px; color:var(--y-muted); margin:0 0 var(--y-2)}
.y-metric-value{font-size:26px; font-weight:600; line-height:1; margin:0;
  font-variant-numeric:tabular-nums}
.y-metric-delta{font-size:12px; margin:6px 0 0}
.y-metric-delta.up{color:var(--y-ok)} .y-metric-delta.down{color:var(--y-danger)}

.y-grid{display:grid; gap:var(--y-4)}
.y-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.y-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.y-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.y-grid--3,.y-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.y-grid--2,.y-grid--3,.y-grid--4{grid-template-columns:1fr}}

.y-page{max-width:1100px; margin:0 auto; padding:var(--y-8) var(--y-6) 80px}
.y-h1{font-size:26px; line-height:32px; font-weight:600; margin:0 0 var(--y-2)}
.y-h2{font-size:20px; line-height:26px; font-weight:600; margin:var(--y-8) 0 var(--y-4)}
.y-lead{font-size:15px; color:var(--y-muted); margin:0 0 var(--y-6); max-width:70ch}
.y-side{display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--y-8); align-items:start}
@media (max-width:820px){.y-side{grid-template-columns:1fr}}
.y-nav{position:sticky; top:calc(var(--y-header-h) + 16px)}
.y-nav a{display:block; padding:8px var(--y-3); border-radius:var(--y-r-sm);
  color:var(--y-ink-2); font-size:14px; text-decoration:none}
.y-nav a:hover{background:var(--y-surface-2)}
.y-nav a.is-active{background:var(--y-brand-soft); color:var(--y-brand-strong); font-weight:550}

/* RU: Плашка «это макет» — обязательна, чтобы прототип нельзя было принять
       за работающий сервис. / EN: A "this is a mockup" banner — required so the
       prototype can never be mistaken for a live service. */
.y-demobar{
  background:var(--y-accent); color:#231404; font-size:12px; font-weight:600;
  padding:6px var(--y-6); display:flex; align-items:center; gap:var(--y-3); flex-wrap:wrap;
}
.y-demobar a{color:#231404; text-decoration:underline}
.y-demobar .sp{margin-left:auto; font-weight:500; opacity:.8}

.y-footer{border-top:1px solid var(--y-line); background:var(--y-surface);
  padding:var(--y-5) var(--y-6); font-size:13px; color:var(--y-muted);
  display:flex; gap:var(--y-5); flex-wrap:wrap}
.y-footer a{color:var(--y-muted)}

/* ── Доступность / Accessibility ─────────────────────────────────────────── */

/* RU: Текст только для экранного диктора. НЕ display:none и НЕ
       visibility:hidden: и то и другое диктор пропускает, а нам нужно
       обратное — скрыть от глаза, оставив голосу. Рецепт с clip-path
       и рамкой в один пиксель — единственный, работающий во всех
       браузерах разом.
   EN: Text for screen readers only. NOT display:none and NOT visibility:hidden: a reader skips both,
       while we need the opposite — hide from the eye, keep for the voice. The clip-path plus
       one-pixel box recipe is the only one that works across every browser at once. */
.y-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* RU: Ссылка «к содержанию» — первое, что получает фокус. Видна ТОЛЬКО
       при фокусе: постоянно видимая мешает всем остальным, а скрытая
       навсегда недоступна и тому, ради кого сделана.
   EN: The skip link is the first thing to receive focus. Visible ONLY on focus: a permanently
       visible one bothers everyone else, while one hidden forever is unavailable to the very person
       it is for. */
.y-skip{
  position:absolute; left:var(--y-2); top:-64px; z-index:100;
  padding:var(--y-2) var(--y-4); border-radius:var(--y-r-sm);
  background:var(--y-brand); color:#fff; text-decoration:none;
  transition:top .12s ease;
}
.y-skip:focus{top:var(--y-2)}

/* RU: Уменьшенное движение — не «поменьше анимации», а системная
       настройка человека, которому от движения на экране физически
       плохо. Поэтому переходы не ускоряются, а отключаются.
   EN: Reduced motion is not "less animation" but a system setting of a person to whom on-screen
       movement is physically unpleasant. So transitions are not sped up but switched off. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* RU: Голосовой ввод. Задача 2.37. Пульсация — единственная анимация
       в строке поиска, и она подчиняется предпочтению уменьшенного
       движения: у правила выше стоит !important, и оно её остановит.
   EN: Voice input. Task 2.37. The pulse is the only animation in the search box, and it obeys the
       reduced-motion preference: the rule above carries !important and will stop it. */
.y-voice-btn.is-listening{color:var(--y-danger)}
.y-voice-btn.is-listening svg{animation:y-pulse 1.1s ease-in-out infinite}
@keyframes y-pulse{0%,100%{opacity:1}50%{opacity:.35}}