/* ═══════════════════════════════════════════════════════════════════════
   Doxx — дизайн-система, собранная по замерам четырёх разобранных систем.
   Все значения ниже сняты с живых страниц, а не выбраны на глаз:
     teardown/{reuters,apnewsroom,stripe,linear}/out/probe.json

   Reuters Agency и AP Newsroom — наша категория (портал для редакций):
     белый фон · радиус 2–3px · заголовки веса 700 · корпус 14px ·
     один насыщенный акцент · линейка 2px акцентом как подчёркивание
   Stripe — механика органов управления:
     кнопка r4px, высота 40 и 48, падинг 20 и 24, волосяная #E5EDF5,
     контейнер 1232 внутри 1440, трекинг −0.02em на крупном кегле
   Linear — плотность и дисциплина границ:
     граница низкой альфы вместо сплошной, корпус 15/24, ls −0.011em
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Основа — белая, как у обоих отраслевых. */
  --bg:#FFFFFF;
  --bg-soft:#F6F9FC;          /* Stripe canvas-soft */
  --bg-sunken:#EEF2F6;
  --ink:#0A2540;              /* тёмно-синие чернила отраслевых порталов */
  --ink-2:#425466;
  --ink-3:#697386;
  --ink-4:#8792A2;
  /* Волосяная — Stripe #E5EDF5; сильная — 2px акцентом, как у Reuters. */
  --line:#E5EDF5;
  --line-2:#D6DEE8;
  /* Один насыщенный акцент. Ровно один, как у всех четырёх. */
  --accent:#005EC7;           /* синий отраслевого портала (AP #005EC7) */
  --accent-ink:#004AA0;
  --accent-soft:#E4EEFA;
  --on-accent:#FFFFFF;
  --danger:#AB3300;           /* ржавый Reuters — только для исправлений */
  --ok:#0E6245;
  --sky:#0A2540;              /* подложка звёздных карт */

  /* Отступы: шаг 4, как у всех четырёх. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  /* Радиусы: 4px основной (Stripe ×55), 2px мелкий (AP), 6px крупный. */
  --r:4px; --r-sm:2px; --r-lg:6px;

  --container:1232px;         /* Stripe */
  --container-narrow:1140px;  /* Reuters */

  --font:Archivo,"Söhne","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.23,1,.32,1);

  /* Тени только у всплывающего. Stripe: 0 16px 32px rgba(50,50,93,.12). */
  --shadow:0 2px 5px rgba(50,50,93,.10),0 1px 2px rgba(0,0,0,.08);
  --shadow-pop:0 16px 32px rgba(50,50,93,.12),0 4px 12px rgba(0,0,0,.08);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#08090A; --bg-soft:#0F1011; --bg-sunken:#141517;   /* Linear */
  --ink:#F7F8F8; --ink-2:#D0D6E0; --ink-3:#8A8F98; --ink-4:#62666D;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12);
  --accent:#5CA4FF; --accent-ink:#8FC0FF; --accent-soft:#0E2036; --on-accent:#08090A;
  --danger:#E0785F; --ok:#4FBF8F; --sky:#05070A;
  --shadow:0 0 0 1px rgba(255,255,255,.08);
  --shadow-pop:0 0 0 1px rgba(255,255,255,.10),0 16px 32px rgba(0,0,0,.55);
}}
:root[data-theme="dark"]{
  --bg:#08090A; --bg-soft:#0F1011; --bg-sunken:#141517;
  --ink:#F7F8F8; --ink-2:#D0D6E0; --ink-3:#8A8F98; --ink-4:#62666D;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12);
  --accent:#5CA4FF; --accent-ink:#8FC0FF; --accent-soft:#0E2036; --on-accent:#08090A;
  --danger:#E0785F; --ok:#4FBF8F; --sky:#05070A;
  --shadow:0 0 0 1px rgba(255,255,255,.08);
  --shadow-pop:0 0 0 1px rgba(255,255,255,.10),0 16px 32px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
     font-size:14px;line-height:1.6;              /* корпус 14 — у обоих отраслевых */
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent-soft);color:var(--ink)}
a{color:var(--accent);text-underline-offset:2px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
img,svg{max-width:100%}

/* Шкала. Разрыв дисплея и корпуса огромен — 64 против 14, как у AP.
   Трекинг сжимается с ростом кегля: Stripe −0.02em, Linear −0.022em. */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.021em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,5vw,56px);line-height:1.08}
h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em}
h3{font-size:20px;line-height:1.3;letter-spacing:-.013em}
h4{font-size:16px;line-height:1.4;letter-spacing:-.006em}
p{margin:0 0 var(--s3);text-wrap:pretty}
.lede{font-size:18px;line-height:1.55;color:var(--ink-2)}
.fine{font-size:13px;color:var(--ink-3)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
         color:var(--accent);margin:0 0 var(--s2)}
.num{font-variant-numeric:tabular-nums}
code,.mono{font-family:var(--font-mono);font-size:.86em}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s6)}
.narrow{max-width:var(--container-narrow)}

/* Шапка. У AP статичная и уезжает со страницей — так же и у нас: редактору
   нужен материал, а не навигация, приклеенная к верху. */
.rail{border-bottom:1px solid var(--line);background:var(--bg)}
.rail__in{max-width:var(--container);margin:0 auto;padding:var(--s4) var(--s6);
          display:flex;align-items:center;gap:var(--s6)}
.rail .mark{font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.rail nav{display:flex;gap:var(--s5);margin-left:auto;flex-wrap:wrap}
.rail nav a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none}
.rail nav a:hover{color:var(--ink)}
/* Подчёркивание активного пункта линейкой 2px акцентом — приём Reuters. */
.rail nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

/* Кнопки: Stripe — r4px, высота 40 и 48, падинг 20 и 24. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
     height:40px;padding:0 var(--s5);border-radius:var(--r);font-family:var(--font);
     font-size:14px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
     border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
     transition:transform .12s var(--ease),background .12s var(--ease)}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn:active{transform:scale(.98)}
.btn--lg{height:48px;padding:0 var(--s6);font-size:15px}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--quiet:hover{background:var(--bg-soft);border-color:var(--ink-4)}
.btn[disabled]{opacity:.45;cursor:default;transform:none}

.field{margin:0 0 var(--s4)}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:var(--s1)}
.field input,.field select,.field textarea{
  width:100%;height:40px;font-family:var(--font);font-size:16px;padding:0 var(--s3);color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r)}
.field textarea{height:auto;padding:var(--s3)}
.field .hint{font-size:13px;color:var(--ink-3);margin-top:var(--s1)}
.field .err{font-size:13px;color:var(--danger);font-weight:600;margin-bottom:var(--s1)}

.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);padding:var(--s6)}
.card--soft{background:var(--bg-soft);border-color:transparent}

/* Состояние материала — линейка 2px слева, приём Reuters (2px solid акцент ×26). */
.item{border-left:2px solid var(--accent);padding-left:var(--s4)}
.item--live{border-left-color:var(--ink)}
.item--fix{border-left-color:var(--danger)}

.note{border-left:2px solid var(--accent);background:var(--bg-soft);padding:var(--s4) var(--s5);border-radius:0 var(--r) var(--r) 0}
.note--warn{border-left-color:var(--danger)}
.note__tag{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
           color:var(--accent);margin-bottom:var(--s1)}
.note--warn .note__tag{color:var(--danger)}

table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-align:left;
   color:var(--ink-3);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-2)}
td{padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
.tabwrap{overflow-x:auto}

.sky{background:var(--sky);border-radius:var(--r);padding:var(--s3);overflow:hidden}
.sky svg,.sky img{display:block;width:100%;height:auto}

/* Подвал тёмный — AP #1F1F1F. */
.foot{background:var(--ink);color:#FFF;margin-top:var(--s24)}
.foot__in{max-width:var(--container);margin:0 auto;padding:var(--s12) var(--s6);
          display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s8)}
.foot h4{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
         color:rgba(255,255,255,.55);margin-bottom:var(--s3)}
.foot a{display:block;color:rgba(255,255,255,.85);text-decoration:none;font-size:14px;margin-bottom:var(--s2)}
.foot a:hover{color:#FFF;text-decoration:underline}
.foot__legal{max-width:var(--container);margin:0 auto;padding:var(--s5) var(--s6);
             border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.55);
             display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:640px){.wrap,.rail__in,.foot__in,.foot__legal{padding-left:var(--s4);padding-right:var(--s4)}}

/* ── Переключатель языков. Своё меню, а не родной select: системный виджет
   рисует ОС, его нельзя выровнять по сетке, а 28 языков в нём — сплошная
   полоса. Ширина списка задана, высота ограничена, выбранный помечен. ── */
.n18{position:relative;display:inline-flex}
.n18__btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  font:inherit;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r)}
.n18__btn:hover{color:var(--ink);border-color:var(--ink-4)}
.n18__btn::after{content:"";width:0;height:0;margin-left:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.6}
.n18__menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:190px;max-height:min(60vh,420px);overflow-y:auto;padding:4px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.n18__item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:7px 10px;font:inherit;font-size:14px;text-align:left;
  color:var(--ink);background:none;border:0;border-radius:var(--r-sm);cursor:pointer}
.n18__item:hover,.n18__item:focus-visible{background:var(--bg-soft);outline:none}
.n18__item[aria-selected="true"]{color:var(--accent);font-weight:600}
.n18__item[aria-selected="true"]::after{content:"✓";font-size:12px}