/* ═══════════════════════════════════════════════════════════════════════════
   TOLK AI · Motion5 — layer 1: fonts, tokens, reset, primitives.
   Light-first. Every colour, radius, shadow and duration used anywhere in the
   product is declared here once; the component sheets only consume tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typeface ──────────────────────────────────────────────────────────────
   Manrope (OFL) and Caveat (OFL) are bundled under /web/static/fonts/ because
   the production CSP is `default-src 'self'` — a remote font would be blocked.
   Licences travel with the files. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-800.woff2) format('woff2')}
@font-face{font-family:Caveat;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-600.woff2) format('woff2')}

:root{
  color-scheme:light;

  /* ── Surfaces · 80 % of the interface ─────────────────────────────────── */
  --bg:#f7fbfa;
  --bg-2:#f4f9f7;
  --surface:#ffffff;
  --surface-soft:#fcfdfe;
  --surface-glass:rgba(255,255,255,.72);
  --nav-glass:rgba(255,255,255,.90);
  --surface-card:rgba(255,255,255,.94);
  --surface-sunken:#eef5f4;

  /* ── Ink · 15 % ───────────────────────────────────────────────────────── */
  --text:#102b2c;
  --text-2:#163332;
  /* Значения подобраны под WCAG 2.2 AA: #6b7e7c давал 4.29:1 на белом —
     этого не хватало для обычного текста. */
  --muted:#526866;
  --muted-2:#5f7270;

  /* ── Accent · 5 % ─────────────────────────────────────────────────────── */
  --brand:#0a9f91;
  --brand-2:#17bba8;
  --brand-3:#50d8c7;
  --brand-deep:#06736b;
  --brand-ink:#0b6f66;

  /* Заливки. Белый текст на ярком бирюзовом даёт 2.4:1, поэтому под подписи
     идёт более глубокая пара (4.6:1 в самой светлой точке), а под иконки —
     яркая: графике достаточно 3:1. --fill-ink переключает цвет содержимого,
     чтобы в тёмной теме на ярком бирюзовом стоял тёмный знак. */
  --fill-a:#096b63;
  --fill-b:#08837a;
  --fill-ia:#087f76;
  --fill-ib:#0a9f91;
  --fill-ink:#ffffff;
  --mint:#ddf8f2;
  --mint-2:#eafbf7;
  --mint-3:#e7f7f3;

  /* ── Category accents · colour lives in icons only ────────────────────── */
  --c-idea:#12a882;      --c-idea-a:#e2fbef;  --c-idea-b:#cdf4e4;
  --c-text:#2f6bf0;      --c-text-a:#e6eeff;  --c-text-b:#d6e5ff;
  --c-image:#0fa98f;     --c-image-a:#daf7ef; --c-image-b:#c6f2e5;
  --c-video:#8b5cf6;     --c-video-a:#f1e8ff; --c-video-b:#e4d8ff;
  --c-audio:#f2843c;     --c-audio-a:#ffeedd; --c-audio-b:#ffe1c8;
  --c-doc:#2f6bf0;       --c-doc-a:#e6eeff;   --c-doc-b:#d6e5ff;
  --c-find:#0e9e93;      --c-find-a:#dcf6f3;  --c-find-b:#c7efeb;
  --c-all:#0fa88e;       --c-all-a:#dcf7ee;   --c-all-b:#c9f2e4;
  --c-pdf:#e2564d;       --c-pdf-a:#ffe9e7;   --c-pdf-b:#ffdad6;

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --ok:#0b8763;
  --warn:#a8630f;
  --danger:#d03631;
  --danger-soft:#fdeceb;
  /* Заливка для необратимого действия. Отдельно от --danger: тот идёт
     текстом по светлому, эта — фоном под текстом, и градиент под белым
     должен держать AA в самой светлой точке. */
  --danger-a:#be2c28; --danger-b:#c93a35; --danger-ink:#ffffff;

  /* ── Lines ────────────────────────────────────────────────────────────── */
  --line:rgba(15,90,80,.10);
  --line-2:rgba(15,90,80,.16);
  --line-strong:rgba(15,90,80,.24);

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px;
  --r-pill:999px;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --sh-1:0 1px 2px rgba(16,60,56,.05);
  --sh-2:0 1px 2px rgba(16,60,56,.04),0 6px 18px rgba(16,80,72,.06);
  --sh-3:0 2px 6px rgba(16,80,72,.05),0 14px 36px rgba(16,80,72,.08);
  --sh-4:0 4px 10px rgba(16,80,72,.06),0 24px 60px rgba(20,90,78,.11);
  --sh-pop:0 10px 20px rgba(12,60,55,.09),0 30px 70px rgba(12,60,55,.14);
  --sh-teal:0 6px 16px rgba(10,159,145,.26);
  --sh-teal-lg:0 10px 26px rgba(10,159,145,.32);

  /* ── Type scale ───────────────────────────────────────────────────────── */
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  --f-mono:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Menlo,Consolas,monospace;

  /* Шаг сетки. Одна шкала на весь продукт: пока отступы задавались числами
     на месте, рядом оказывались 18 и 20 px, и ритм страницы рассыпался.
     Компоненты берут только эти значения. */
  --s-0:0;
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:24px; --s-6:32px;  --s-7:48px;  --s-8:64px;
  --s-9:80px; --s-10:96px; --s-11:128px;

  /* Размеры текста. clamp() вместо набора медиазапросов: заголовок
     уменьшается непрерывно, и на 360 px не остаётся «дисплейным». Верхняя
     граница нужна не меньше нижней — на 1920 px текст не должен раздуваться.
     1rem = 16px, поэтому vw-часть считается от ширины окна. */
  --t-display:clamp(30px,2.2vw + 20px,46px);
  --t-h1:clamp(25px,1.5vw + 17px,36px);
  --t-h2:clamp(20px,.8vw + 16px,26px);
  --t-h3:clamp(17px,.4vw + 15px,20px);
  --t-h4:clamp(15px,.2vw + 14px,17px);
  --t-lead:clamp(15.5px,.35vw + 14px,18px);
  --t-body:15px;
  --t-sm:13.5px;
  --t-caption:12.5px;
  --t-label:11.5px;
  /* Межстрочные: заголовкам — плотно, тексту — воздух. */
  --lh-tight:1.1;
  --lh-head:1.18;
  --lh-body:1.55;
  --lh-loose:1.65;
  --ls-display:-.03em;
  --ls-head:-.02em;
  --ls-label:.08em;
  /* Длинная строка не должна тянуться во всю ширину экрана. */
  --measure:66ch;
  --measure-narrow:52ch;

  /* Высоты контролов. Кнопка, поле и пилюля одной строки обязаны совпадать
     по высоте — иначе строка формы выглядит собранной из разных наборов. */
  --h-xs:30px; --h-sm:36px; --h-md:44px; --h-lg:52px;
  --tap:44px;            /* минимальная цель для пальца */

  /* ── Geometry ─────────────────────────────────────────────────────────── */
  --sidebar:280px;
  --sidebar-rail:80px;
  --topbar:68px;
  --content:1160px;
  --gutter:32px;
  --bottom-nav:0px;

  /* ── Motion tokens · the only durations in the product ──────────────────
     Три уровня по назначению, а не по вкусу:
       micro (120–200 мс) — отклик на палец и курсор: наведение, нажатие,
                            переключение галочки;
       standard (200–350) — смена состояния компонента: dropdown, таб,
                            подсказка, тост;
       large (350–600)    — появление крупного: модалка, лист, секция.
     Кривые: --e-out для появления (быстро начать, мягко остановиться),
     --e-in для исчезновения, --e-spring для того, что «прилетает». */
  --d-instant:120ms;
  --d-fast:180ms;
  --d-standard:280ms;
  --d-emphasized:420ms;
  --d-slow:560ms;
  --d-spring:360ms;
  --d-ambient:22s;
  --e-out:cubic-bezier(.22,.76,.28,1);
  --e-in:cubic-bezier(.4,0,.68,.24);
  --e-inout:cubic-bezier(.5,.05,.25,1);
  --e-spring:cubic-bezier(.2,1.24,.32,1);
  --e-soft:cubic-bezier(.32,.72,.24,1);
  --stagger:38ms;        /* шаг каскада внутри группы */

  /* ── Stacking ladder ──────────────────────────────────────────────────── */
  --z-ambient:0; --z-content:1; --z-rail:30; --z-nav:35; --z-sidebar:50;
  --z-scrim:60; --z-drawer:70; --z-pop:80; --z-sheet:90; --z-dialog:100; --z-toast:110;
}

/* ── Dark theme · token swap only. The Motion5 layout never changes. ────── */
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#081112;
  --bg-2:#0b1516;
  --surface:#111d1e;
  --surface-soft:#0f1a1b;
  --surface-glass:rgba(17,29,30,.74);
  --nav-glass:rgba(11,21,22,.92);
  --surface-card:rgba(20,34,35,.94);
  --surface-sunken:#142223;
  --text:#e8f4f2;
  --text-2:#d8ebe8;
  --muted:#9db3b0;
  --muted-2:#8ea5a2;
  --brand:#17bba8;
  --brand-2:#2ad0bb;
  --brand-3:#50d8c7;
  --brand-deep:#7ce7d8;
  --brand-ink:#9beee1;
  /* В тёмной теме бирюза остаётся яркой, а знак на ней становится тёмным —
     так контраст выше, чем у белого на бирюзовом. */
  --fill-a:#13b3a1;
  --fill-b:#2ad0bb;
  --fill-ia:#17bba8;
  --fill-ib:#2ad0bb;
  --fill-ink:#04211f;
  --mint:#123331;
  --mint-2:#0f2a29;
  --mint-3:#12302e;
  --c-idea-a:#0f2f27; --c-idea-b:#123a2f; --c-idea:#3fd9ab;
  --c-text-a:#121f3b; --c-text-b:#16274b; --c-text:#7ba4ff;
  --c-image-a:#0e2f2a; --c-image-b:#123a33; --c-image:#3ad7bb;
  --c-video-a:#201b3a; --c-video-b:#2a2350; --c-video:#b494ff;
  --c-audio-a:#33210f; --c-audio-b:#402913; --c-audio:#ffab6b;
  --c-doc-a:#121f3b; --c-doc-b:#16274b; --c-doc:#7ba4ff;
  --c-find-a:#0e2c2b; --c-find-b:#123634; --c-find:#3ed3c8;
  --c-all-a:#0e2f28; --c-all-b:#123a31; --c-all:#3bd6b4;
  --c-pdf-a:#3a1b19; --c-pdf-b:#48211f; --c-pdf:#ff8b84;
  /* Красный из светлой темы на тёмном фоне даёт 3.4:1 — ниже AA.
     Осветляем только в тёмной теме: он везде используется как цвет
     текста и иконки, не как фон. */
  /* Как и красный, оранжевый из светлой темы на тёмном даёт 3.5:1 —
     ниже AA для мелкого текста. Осветляем только в тёмной теме. */
  --warn:#ffab6b;
  --danger:#ff8b84;
  --danger-soft:#3a1a19;
  /* В тёмной теме красный остаётся ярким, а надпись на нём — тёмной:
     так же, как бирюза с тёмным знаком выше. */
  --danger-a:#ff8b84; --danger-b:#ffa39c; --danger-ink:#2a0c0a;
  --line:rgba(140,220,210,.12);
  --line-2:rgba(140,220,210,.18);
  --line-strong:rgba(140,220,210,.28);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.4);
  --sh-3:0 2px 6px rgba(0,0,0,.35),0 14px 36px rgba(0,0,0,.45);
  --sh-4:0 4px 10px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);
  --sh-pop:0 10px 20px rgba(0,0,0,.45),0 30px 70px rgba(0,0,0,.55);
}

/* ═══════════════════════ Reset ═══════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
/* Ни одного автоматического переноса по слогам во всём интерфейсе:
   русский текст браузер переносит грубо, и «Изображени-е» в карточке
   читается как ошибка, а не как перенос. Где слово не помещается —
   меняем подпись, а не режем слово. */
html{hyphens:manual;-webkit-hyphens:manual}

/* ── Выделение текста (§8) ────────────────────────────────────────────────
   По умолчанию интерфейс не выделяется: случайный протяг мышью по меню
   красил кнопки и подписи, как обычный текст, и выглядело это сломанным.
   Выделение оставлено там, где оно нужно по делу: ответ модели, свой
   текст, код, поля ввода и таблицы — оттуда люди копируют. */
body{-webkit-user-select:none;user-select:none}
.answer,.answer *,.bubble,.msg.user .bubble,.prose,.prose *,
pre,code,kbd,samp,table,td,th,
input,textarea,select,[contenteditable],
.copy-src,.mono,.selectable,.selectable *{
  -webkit-user-select:text;user-select:text;
}
/* У кнопок внутри ответа выделение снова не нужно: это управление, не текст. */
.answer .acts,.answer .acts *,.answer .charge,.prose .copy{
  -webkit-user-select:none;user-select:none;
}

/* ── Полосы прокрутки (§11) ───────────────────────────────────────────────
   Системный скроллбар в Windows — широкая серая полоса, которая ломает
   ритм светлого интерфейса. Делаем тоньше и в цвете темы, но НЕ убираем:
   исчезнувшая прокрутка в длинном списке — это потерянный контент. */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:999px;
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
body{
  margin:0;
  font:400 15px/1.5 var(--f);
  font-feature-settings:'tnum' 0;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:where(button,a,input,textarea,select,[tabindex]):focus{outline:none}
:where(button,a,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
::selection{background:var(--brand-3);color:#06302c}
[hidden]{display:none !important}
[inert]{pointer-events:none}

/* Any control that paints a pseudo-element or clips a ripple must establish
   its own containing block, otherwise an absolutely positioned child resolves
   against a distant ancestor and can cover — and swallow clicks for — the
   controls beside it. This bit is load-bearing; do not remove. */
.btn,.btn-ghost,.btn-icon,.pill,.chip,.card,.quick,.nav-item,.row-link,
.send,.circle,.iconbtn,.model-row,.mini,.act,.seg button,.tab,.amount,
.drawer-item,.bnav button,.sheet-row,[data-ripple]{position:relative}

/* Скрытая подпись для экранного диктора. clip работает только у
   абсолютно позиционированных элементов, поэтому рядом стоит clip-path:
   если чужое правило сделает элемент relative, подпись всё равно не
   появится на экране. Ровно это однажды и случилось. */
.sr-only{
  position:absolute;display:block;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;left:16px;top:-60px;z-index:var(--z-toast);
  padding:10px 16px;border-radius:var(--r-md);
  background:var(--surface);box-shadow:var(--sh-3);font-weight:700;
  transition:top var(--d-fast) var(--e-out);
}
.skip-link:focus-visible{top:16px}

/* ═══════════════════════ Primitives ═══════════════════════ */

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border-radius:var(--r-md);
  font-weight:700;font-size:14.5px;letter-spacing:.005em;
  color:var(--fill-ink);background:linear-gradient(135deg,var(--fill-a),var(--fill-b));
  box-shadow:var(--sh-teal);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),filter var(--d-fast) var(--e-out);
  overflow:hidden;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-teal-lg);filter:saturate(1.06)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[aria-disabled=true],.btn:disabled{
  background:var(--surface-sunken);color:var(--muted-2);
  box-shadow:none;cursor:not-allowed;transform:none;filter:none;
}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 14px;font-size:13.5px;border-radius:var(--r-sm)}
.btn-lg{min-height:54px;padding:0 26px;font-size:16px;border-radius:var(--r-lg)}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  color:var(--text);font-weight:600;font-size:14.5px;box-shadow:var(--sh-1);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),
             background var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out);
}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.btn-ghost:active{transform:translateY(0) scale(.99)}
.btn-ghost[aria-disabled=true]{color:var(--muted-2);cursor:not-allowed;transform:none;box-shadow:var(--sh-1)}
.btn-ghost.btn-sm{min-height:36px;padding:0 14px;font-size:13.5px;border-radius:var(--r-sm)}
.btn-ghost:disabled{background:var(--surface-sunken);color:var(--muted-2);cursor:not-allowed;transform:none;box-shadow:none}
.btn-danger{color:var(--danger);border-color:rgba(224,64,60,.28);background:var(--surface)}
.btn.danger{background:linear-gradient(135deg,var(--danger-a),var(--danger-b));color:var(--danger-ink);box-shadow:0 1px 2px rgba(120,20,18,.28),0 8px 20px rgba(120,20,18,.22)}
.btn.danger:hover{box-shadow:0 2px 4px rgba(120,20,18,.3),0 14px 30px rgba(120,20,18,.26)}
.btn-danger:hover{background:var(--danger-soft)}

.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  box-shadow:var(--sh-1);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.btn-icon:hover{transform:translateY(-1px);box-shadow:var(--sh-2);color:var(--brand-deep)}
.btn-icon:active{transform:scale(.94)}
.btn-icon.bare{background:none;border:0;box-shadow:none}
.btn-icon.bare:hover{background:var(--mint-3);box-shadow:none}

.circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-pill);flex:0 0 auto;
  color:var(--fill-ink);background:linear-gradient(140deg,var(--fill-ia),var(--fill-ib));
  box-shadow:var(--sh-teal);
  transition:transform var(--d-fast) var(--e-spring),box-shadow var(--d-fast) var(--e-out);
}
.circle:hover{transform:scale(1.08) rotate(90deg);box-shadow:var(--sh-teal-lg)}
.circle:active{transform:scale(.95)}

/* Pills ------------------------------------------------------------------ */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  min-height:40px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-1);font-weight:700;font-size:14px;color:var(--text);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out);
}
.pill:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.pill:active{transform:translateY(0) scale(.99)}
.pill .ico{color:var(--muted)}
.pill.soft{background:var(--surface-glass);backdrop-filter:blur(14px)}

.chip{
  display:inline-flex;align-items:center;gap:7px;
  min-height:var(--h-sm);padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-weight:500;font-size:13px;color:var(--text-2);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),
             background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.chip:hover{transform:translateY(-1px);box-shadow:var(--sh-2);color:var(--brand-deep)}
.chip[aria-selected=true],.chip.on{
  background:linear-gradient(135deg,var(--fill-a),var(--fill-b));
  color:var(--fill-ink);border-color:transparent;box-shadow:var(--sh-teal);font-weight:700;
}
.badge{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--mint);color:var(--brand-ink);
  font-weight:700;font-size:12.5px;white-space:nowrap;
}
.badge.grey{background:var(--surface-sunken);color:var(--muted)}
.badge.warn{background:#fff1dd;color:#9a5a10}
:root[data-theme=dark] .badge.warn{background:#3a2a10;color:#ffc97a}
.badge.new{background:linear-gradient(135deg,var(--fill-a),var(--fill-b));color:var(--fill-ink)}

/* Fields ----------------------------------------------------------------- */
.field{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 14px;border-radius:var(--r-md);
  background:var(--surface-sunken);border:1px solid transparent;
  transition:border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.field .ico{color:var(--muted);flex:0 0 auto}
.field input,.field textarea{
  flex:1 1 auto;min-width:0;background:none;border:0;padding:0;
  font-size:14.5px;color:var(--text);
}
.field input::placeholder,.field textarea::placeholder,.composer textarea::placeholder{color:var(--muted-2);opacity:1}
.field:focus-within{background:var(--surface);border-color:var(--brand-3);box-shadow:0 0 0 4px rgba(23,187,168,.14)}
.field.plain{background:var(--surface);border-color:var(--line);box-shadow:var(--sh-1)}
.field input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:7px;
  background:var(--surface-sunken);color:var(--muted);
  font:600 11.5px/1 var(--f);
}
.kbd{display:inline-flex;gap:4px;align-items:center}

/* Cards ------------------------------------------------------------------ */
.card{
  background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.card.flat{box-shadow:var(--sh-1)}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px 12px;
}
.card-head h2,.card-head h3{font-size:17px;font-weight:800;letter-spacing:-.01em}
.link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--brand-deep);font-weight:700;font-size:13.5px;
  transition:gap var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.link:hover{gap:11px}

/* Icon tile · the only place category colour appears -------------------- */
.tile{
  display:grid;place-items:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:var(--r-md);
  background:linear-gradient(145deg,var(--a,var(--mint-2)),var(--b,var(--mint)));
  color:var(--c,var(--brand));
  transition:transform var(--d-standard) var(--e-spring);
}
.tile.sm{width:36px;height:36px;border-radius:11px}
.tile.lg{width:56px;height:56px;border-radius:var(--r-lg)}
.tile[data-cat=idea]{--a:var(--c-idea-a);--b:var(--c-idea-b);--c:var(--c-idea)}
.tile[data-cat=text]{--a:var(--c-text-a);--b:var(--c-text-b);--c:var(--c-text)}
.tile[data-cat=image]{--a:var(--c-image-a);--b:var(--c-image-b);--c:var(--c-image)}
.tile[data-cat=video]{--a:var(--c-video-a);--b:var(--c-video-b);--c:var(--c-video)}
.tile[data-cat=audio]{--a:var(--c-audio-a);--b:var(--c-audio-b);--c:var(--c-audio)}
.tile[data-cat=doc]{--a:var(--c-doc-a);--b:var(--c-doc-b);--c:var(--c-doc)}
.tile[data-cat=find]{--a:var(--c-find-a);--b:var(--c-find-b);--c:var(--c-find)}
.tile[data-cat=all]{--a:var(--c-all-a);--b:var(--c-all-b);--c:var(--c-all)}
.tile[data-cat=pdf]{--a:var(--c-pdf-a);--b:var(--c-pdf-b);--c:var(--c-pdf)}

/* Brand marks ----------------------------------------------------------- */
.brand-mark{
  width:100%;height:100%;object-fit:contain;border-radius:inherit;
}
.logo-tile{
  display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;padding:7px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
}
.logo-tile.sm{width:30px;height:30px;padding:4px;border-radius:9px}
.logo-tile.lg{width:56px;height:56px;padding:9px;border-radius:var(--r-lg)}
.logo-tile.round{border-radius:var(--r-pill)}

/* Wordmark -------------------------------------------------------------- */
.wordmark{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--text);
}
.wordmark .ai{color:var(--brand)}
.wordmark img{width:34px;height:34px;flex:0 0 auto}

/* Utility --------------------------------------------------------------- */
.muted{color:var(--muted)}
.tiny{font-size:12.5px}
.strong{font-weight:800}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1 1 auto}
.stack{display:flex;flex-direction:column;gap:14px}
.grow{flex:1 1 auto;min-width:0}
.nowrap{white-space:nowrap}
.divider{height:1px;background:var(--line);margin:8px 0}

/* ═══════════════════════════════════════════════════════════════════════════
   Типографика как система (§16)
   Один класс — один уровень. Размеры фиксируются токенами с clamp(), поэтому
   заголовок не остаётся «дисплейным» на 360 px и не раздувается на 1920.
   ═══════════════════════════════════════════════════════════════════════════ */
.t-display{font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:800}
.t-h1{font-size:var(--t-h1);line-height:var(--lh-head);letter-spacing:var(--ls-head);font-weight:800}
.t-h2{font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);font-weight:800}
.t-h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.015em;font-weight:800}
.t-h4{font-size:var(--t-h4);line-height:1.3;letter-spacing:-.01em;font-weight:750}
.t-lead{font-size:var(--t-lead);line-height:var(--lh-body);color:var(--muted);max-width:var(--measure)}
.t-body{font-size:var(--t-body);line-height:var(--lh-body)}
.t-sm{font-size:var(--t-sm);line-height:1.5}
.t-caption{font-size:var(--t-caption);line-height:1.45;color:var(--muted)}
/* Надзаголовок раздела: капитель с разрядкой. Отделяет группы без лишней
   линии и без ещё одного размера заголовка. */
.t-label{
  font-size:var(--t-label);line-height:1;font-weight:800;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted-2);
}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
.measure{max-width:var(--measure)}
.measure-narrow{max-width:var(--measure-narrow)}

/* ═══════════════════════════════════════════════════════════════════════════
   Контейнеры и вертикальный ритм (§4, §6)
   ═══════════════════════════════════════════════════════════════════════════ */
.container{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.container.narrow{max-width:880px}
/* Секция знает свои отступы сама: так соседние блоки не слипаются и не
   расходятся на случайные 18 и 44 px. */
.section{padding-block:var(--s-7)}
.section.tight{padding-block:var(--s-5)}
.section.roomy{padding-block:var(--s-8)}
/* Заголовок секции: надзаголовок, название, пояснение, действие справа. */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);margin-bottom:var(--s-4);
}
.section-head .t-lead{margin-top:var(--s-1)}
.section-head>div{min-width:0}
/* Тонкая линия-разделитель, которая гаснет по краям: честнее, чем border
   во всю ширину, и не спорит с карточками. */
.rule{
  height:1px;border:0;margin:var(--s-6) 0;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Поля и формы (§11)
   Ни одного элемента в браузерном виде: свой select со своей стрелкой, свои
   галочка, радио и переключатель. Нативные оставлены только под капотом —
   с них приходит поведение, доступность и работа с клавиатуры.
   ═══════════════════════════════════════════════════════════════════════════ */
.form-row{display:flex;flex-direction:column;gap:var(--s-2)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4)}
.lbl{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-sm);font-weight:700;color:var(--text-2);
}
.lbl .req{color:var(--danger);font-weight:800}
.hint{font-size:var(--t-caption);color:var(--muted);line-height:1.45}
/* Ошибка появляется над полем по высоте, а не вместо подписи: тогда форма
   не прыгает, а человек видит, что именно поправить. */
.err{
  display:flex;align-items:flex-start;gap:6px;
  font-size:var(--t-caption);color:var(--danger);font-weight:600;
  animation:errIn var(--d-fast) var(--e-out) backwards;
}
@keyframes errIn{from{opacity:0;transform:translate3d(0,-3px,0)}to{opacity:1;transform:none}}
.ok-note{display:flex;align-items:center;gap:6px;font-size:var(--t-caption);color:var(--ok);font-weight:600}

/* Одиночное поле ввода в форме — тот же вид, что у .field, но блочный. */
.inp{
  width:100%;min-height:var(--h-md);padding:0 var(--s-3);
  border-radius:var(--r-md);background:var(--surface-sunken);
  border:1px solid transparent;color:var(--text);font-size:14.5px;
  transition:border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out);
}
textarea.inp{min-height:96px;padding:var(--s-3);line-height:1.5;resize:vertical}
.inp::placeholder{color:var(--muted-2);opacity:1}
.inp:hover:not(:disabled){background:var(--surface);border-color:var(--line)}
.inp:focus{outline:none;background:var(--surface);border-color:var(--brand-3);box-shadow:0 0 0 4px rgba(23,187,168,.14)}
.inp:disabled{background:var(--surface-sunken);color:var(--muted-2);cursor:not-allowed}
.inp[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(208,54,49,.12)}
.form-row.bad .inp{border-color:var(--danger)}

/* Свой select. appearance:none снимает системную стрелку, обёртка рисует
   свою и поворачивает её при открытии. */
.sel{position:relative;display:block}
.sel select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;min-height:var(--h-md);padding:0 40px 0 var(--s-3);
  border-radius:var(--r-md);background:var(--surface-sunken);
  border:1px solid transparent;color:var(--text);font-size:14.5px;font-weight:600;
  cursor:pointer;
  transition:border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out);
}
.sel select:hover{background:var(--surface);border-color:var(--line)}
.sel select:focus{outline:none;background:var(--surface);border-color:var(--brand-3);box-shadow:0 0 0 4px rgba(23,187,168,.14)}
.sel select:disabled{color:var(--muted-2);cursor:not-allowed}
.sel::after{
  content:'';position:absolute;right:15px;top:50%;width:8px;height:8px;
  margin-top:-6px;pointer-events:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  border-radius:1px;transform:rotate(45deg);
  transition:transform var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out);
}
.sel:hover::after{border-color:var(--brand-deep)}
.sel:focus-within::after{border-color:var(--brand-deep);transform:rotate(225deg);margin-top:-2px}
/* Список опций рисует система, но его цвета мы задать можем. */
.sel select option{background:var(--surface);color:var(--text)}

/* Галочка, радио и переключатель.

   appearance:none снимает системную отрисовку, дальше рисуем сами — на самом
   input, а не на соседнем span. Так любой флажок в интерфейсе, в том числе
   добавленный скриптом, выглядит одинаково, и нигде не остаётся системного
   квадратика из Windows или macOS. Нативный элемент при этом сохраняется
   целиком: фокус, пробел, чтение экранным диктором, :checked.  */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none;appearance:none;position:relative;
  flex:0 0 auto;width:22px;height:22px;margin:0;cursor:pointer;
  border-radius:7px;background:var(--surface);
  border:1.5px solid var(--line-strong);box-shadow:var(--sh-1);
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-spring);
}
input[type=radio]{border-radius:50%}
input[type=checkbox]::after{
  content:'';position:absolute;left:5.5px;top:2px;width:7px;height:12px;
  border-right:2.5px solid var(--fill-ink);border-bottom:2.5px solid var(--fill-ink);
  border-radius:1px;transform:rotate(42deg) scale(.4);opacity:0;
  transition:transform var(--d-fast) var(--e-spring),opacity var(--d-instant) linear;
}
input[type=radio]::after{
  content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--fill-ink);
  transform:scale(.2);opacity:0;
  transition:transform var(--d-fast) var(--e-spring),opacity var(--d-instant) linear;
}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--brand-3)}
input[type=checkbox]:active,input[type=radio]:active{transform:scale(.92)}
input[type=checkbox]:checked,input[type=radio]:checked{
  background:linear-gradient(140deg,var(--fill-ia),var(--fill-ib));
  border-color:transparent;box-shadow:var(--sh-teal);
}
input[type=checkbox]:checked::after,input[type=radio]:checked::after{opacity:1}
input[type=checkbox]:checked::after{transform:rotate(42deg) scale(1)}
input[type=radio]:checked::after{transform:scale(1)}
input[type=checkbox]:indeterminate{background:var(--surface);border-color:var(--brand-3)}
input[type=checkbox]:indeterminate::after{
  opacity:1;transform:none;left:4px;top:9px;width:12px;height:0;
  border-right:0;border-bottom:2.5px solid var(--brand);
}
input[type=checkbox]:disabled,input[type=radio]:disabled{
  background:var(--surface-sunken);border-color:var(--line);box-shadow:none;cursor:not-allowed;
}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}

/* Строка с флажком: цель для пальца во всю строку, подпись не липнет к метке. */
.tick,.check{
  display:flex;align-items:flex-start;gap:var(--s-3);
  min-height:var(--tap);padding:var(--s-1) 0;cursor:pointer;
  font-size:14.5px;line-height:1.45;color:var(--text-2);
}
.tick input,.check input{margin-top:1px}
.tick input:disabled~span,.check input:disabled~span{color:var(--muted-2)}

/* Переключатель. Для «включено/выключено», где галочка выглядела бы как
   пункт списка, а не как выключатель. */
.sw{display:inline-flex;align-items:center;gap:var(--s-3);cursor:pointer;min-height:var(--tap)}
.sw input[type=checkbox]{
  width:46px;height:26px;border-radius:var(--r-pill);
  background:var(--surface-sunken);border:1px solid var(--line-2);box-shadow:none;
}
.sw input[type=checkbox]::after{
  content:'';left:3px;top:2.5px;width:19px;height:19px;margin:0;
  border:0;border-radius:50%;background:var(--surface);box-shadow:var(--sh-2);
  opacity:1;transform:none;
  transition:transform var(--d-standard) var(--e-spring),width var(--d-fast) var(--e-out);
}
.sw input[type=checkbox]:checked{
  background:linear-gradient(120deg,var(--fill-ia),var(--fill-ib));border-color:transparent;
}
.sw input[type=checkbox]:checked::after{transform:translateX(20px);background:var(--surface)}
.sw input[type=checkbox]:active{transform:none}
.sw input[type=checkbox]:active::after{width:22px}

/* Ползунок. Нативный range выглядит системным в каждом браузере по-своему. */
.rng{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:none;cursor:pointer;
}
.rng::-webkit-slider-runnable-track{
  height:6px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand-2) var(--fill,50%),var(--surface-sunken) var(--fill,50%));
}
.rng::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--surface-sunken)}
.rng::-moz-range-progress{height:6px;border-radius:var(--r-pill);background:var(--brand-2)}
.rng::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;
  border-radius:50%;background:var(--surface);border:2px solid var(--brand);
  box-shadow:var(--sh-2);
  transition:transform var(--d-fast) var(--e-spring),box-shadow var(--d-fast) var(--e-out);
}
.rng::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--surface);
  border:2px solid var(--brand);box-shadow:var(--sh-2);
}
.rng:hover::-webkit-slider-thumb{transform:scale(1.12)}
.rng:active::-webkit-slider-thumb{transform:scale(.96);box-shadow:var(--sh-teal)}
.rng:focus-visible::-webkit-slider-thumb{outline:2px solid var(--brand);outline-offset:2px}

/* Выбор файла: системная кнопка «Обзор…» заменена своей зоной. */
.filewell{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);border-radius:var(--r-lg);
  background:var(--surface-sunken);border:1.5px dashed var(--line-strong);
  cursor:pointer;text-align:left;
  transition:border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),
             transform var(--d-fast) var(--e-out);
}
.filewell:hover{border-color:var(--brand-3);background:var(--mint-2)}
.filewell.over{border-color:var(--brand);background:var(--mint);transform:scale(1.005)}
.filewell input[type=file]{position:absolute;width:1px;height:1px;opacity:0}

/* ═══════════════════════════════════════════════════════════════════════════
   Состояния: загрузка, пусто, ошибка, нет результатов (§17)
   ═══════════════════════════════════════════════════════════════════════════ */
.state{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  padding:var(--s-7) var(--s-5);text-align:center;
}
.state .tile{width:56px;height:56px;border-radius:var(--r-lg)}
.state h3{font-size:var(--t-h3);font-weight:800;color:var(--text)}
.state p{max-width:var(--measure-narrow);font-size:14.5px;line-height:var(--lh-body);color:var(--muted)}
.state .row{margin-top:var(--s-2)}
/* Пустое место — не пустое: слабая сетка на фоне говорит «здесь будет
   содержимое», а не «здесь ничего нет и ничего не будет». */
.state.framed{
  border-radius:var(--r-xl);border:1px dashed var(--line-2);
  background:
    radial-gradient(60% 60% at 50% 0%,var(--mint-2),transparent 70%),
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(15,90,80,.02) 10px 11px);
}
:root[data-theme=dark] .state.framed{
  background:
    radial-gradient(60% 60% at 50% 0%,var(--mint-2),transparent 70%),
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(140,220,210,.03) 10px 11px);
}
.state.bad .tile{--a:var(--c-pdf-a);--b:var(--c-pdf-b);--c:var(--c-pdf)}
.state.good .tile{--a:var(--c-idea-a);--b:var(--c-idea-b);--c:var(--c-idea)}

/* Скелет. Не «Loading…», а форма будущего содержимого. */
.sk-wrap{display:flex;flex-direction:column;gap:var(--s-3)}
.sk-row{display:flex;align-items:center;gap:var(--s-3)}
.sk-dot{width:40px;height:40px;border-radius:var(--r-md);flex:0 0 auto}
.sk-col{display:flex;flex-direction:column;gap:7px;flex:1 1 auto}
.sk-line{height:12px;border-radius:var(--r-pill)}
.sk-line.w40{width:40%} .sk-line.w60{width:60%} .sk-line.w80{width:80%}
.sk-dot,.sk-line,.sk-box{
  background:linear-gradient(100deg,var(--surface-sunken) 22%,rgba(255,255,255,.72) 46%,var(--surface-sunken) 70%);
  background-size:280% 100%;animation:shimmer 1.5s linear infinite;
}
:root[data-theme=dark] .sk-dot,:root[data-theme=dark] .sk-line,:root[data-theme=dark] .sk-box{
  background:linear-gradient(100deg,var(--surface-sunken) 22%,rgba(255,255,255,.07) 46%,var(--surface-sunken) 70%);
  background-size:280% 100%;
}
.sk-box{border-radius:var(--r-lg);height:140px}

/* Кнопка в работе: подпись меняется, ширина — нет, иначе строка дёргается. */
.btn.is-loading,.btn-ghost.is-loading{color:transparent;pointer-events:none}
.btn.is-loading::after,.btn-ghost.is-loading::after{
  content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--fill-ink);animation:spin .7s linear infinite;
}
.btn-ghost.is-loading::after{color:var(--brand-deep)}

/* ═══════════════════════════════════════════════════════════════════════════
   Подсказка, таблица, страницы, крошки, аккордеон (§2)
   ═══════════════════════════════════════════════════════════════════════════ */
.tip{position:relative}
.tip>.tip-body{
  position:absolute;left:50%;bottom:calc(100% + 8px);z-index:var(--z-pop);
  transform:translate3d(-50%,4px,0);
  padding:7px 11px;border-radius:var(--r-sm);white-space:nowrap;
  background:var(--text);color:var(--bg);font-size:var(--t-caption);font-weight:600;
  box-shadow:var(--sh-3);opacity:0;pointer-events:none;
  transition:opacity var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.tip:hover>.tip-body,.tip:focus-visible>.tip-body{opacity:1;transform:translate3d(-50%,0,0)}

.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm)}
.tbl th{
  position:sticky;top:0;z-index:1;text-align:left;white-space:nowrap;
  padding:var(--s-3) var(--s-4);background:var(--surface-sunken);
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--muted-2);font-weight:800;border-bottom:1px solid var(--line);
}
.tbl th:first-child{border-radius:var(--r-md) 0 0 0}
.tbl th:last-child{border-radius:0 var(--r-md) 0 0}
.tbl td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{transition:background var(--d-fast) var(--e-out)}
.tbl tbody tr:hover{background:var(--mint-2)}
.tbl tbody tr:last-child td{border-bottom:0}

.pager{display:flex;align-items:center;gap:var(--s-2);justify-content:center;margin-top:var(--s-5)}
.pager button{
  min-width:var(--h-sm);height:var(--h-sm);padding:0 var(--s-3);
  border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
  font-weight:700;font-size:var(--t-sm);color:var(--text-2);box-shadow:var(--sh-1);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),
             background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.pager button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--sh-2);color:var(--brand-deep)}
.pager button[aria-current=page]{
  background:linear-gradient(135deg,var(--fill-a),var(--fill-b));color:var(--fill-ink);
  border-color:transparent;box-shadow:var(--sh-teal);
}
.pager button:disabled{opacity:.45;cursor:not-allowed}

.crumbs{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--muted)}
.crumbs a{
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);
  transition:color var(--d-fast) var(--e-out)
}
.crumbs a:hover{color:var(--brand-deep)}
.crumbs .sep{color:var(--line-strong)}
.crumbs [aria-current=page]{color:var(--text);font-weight:700}

/* Аккордеон на grid-template-rows: высота анимируется без замера в JS и
   без max-height «на глаз». */
.acc{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.acc+.acc{margin-top:var(--s-2)}
.acc-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  width:100%;padding:var(--s-4);text-align:left;font-weight:700;font-size:14.5px;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.acc-head:hover{background:var(--mint-2)}
.acc-head .ico{color:var(--muted);transition:transform var(--d-standard) var(--e-out),color var(--d-fast) var(--e-out)}
.acc-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-standard) var(--e-out);
}
.acc-body>div{overflow:hidden;min-height:0}
.acc-body>div>*{padding:0 var(--s-4) var(--s-4)}
.acc[open] .acc-body,.acc.on .acc-body{grid-template-rows:1fr}
.acc[open] .acc-head .ico,.acc.on .acc-head .ico{transform:rotate(180deg);color:var(--brand-deep)}

/* ── Подсказки на своём движке ────────────────────────────────────────────
   Системная всплывающая подсказка (атрибут title) появляется через секунду,
   рисуется шрифтом операционной системы и не знает ни про тему, ни про
   скругления. Своя появляется за 180 мс и выглядит частью интерфейса.
   Текст берётся из data-tip, доступное имя по-прежнему в aria-label. */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:50%;top:calc(100% + 8px);z-index:var(--z-pop);
  transform:translate3d(-50%,-4px,0);
  padding:6px 10px;border-radius:var(--r-sm);white-space:nowrap;
  background:var(--text);color:var(--bg);
  font-size:var(--t-caption);font-weight:600;letter-spacing:0;
  box-shadow:var(--sh-3);opacity:0;pointer-events:none;
  transition:opacity var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate3d(-50%,0,0)}
/* У краёв экрана подсказка уезжает внутрь: прижатая к правому краю она
   раньше расширяла страницу и появлялся горизонтальный скролл. */
[data-tip][data-tip-side=left]::after{left:auto;right:0;transform:translate3d(0,-4px,0)}
[data-tip][data-tip-side=left]:hover::after{transform:translate3d(0,0,0)}
@media(hover:none){[data-tip]::after{display:none}}

/* ── Меньше движения ──────────────────────────────────────────────────────
   Слой примитивов обязан уметь останавливаться сам: мерцание скелета и
   вращение спиннера живут здесь, и полагаться только на общий выключатель
   в motion.css неправильно — этот файл могут подключить отдельно. */
@media(prefers-reduced-motion:reduce){
  .sk-dot,.sk-line,.sk-box{animation:none;background:var(--surface-sunken)}
  .btn.is-loading::after,.btn-ghost.is-loading::after{animation-duration:1.2s}
  input[type=checkbox],input[type=radio],.sw .track,.sw .track::after,
  .acc-body,.acc-head .ico,[data-tip]::after,.filewell{transition-duration:1ms}
  .err{animation:none}
}