/* Дизайн-система — docs/DESIGN.md. Значения только из токенов ниже. */

@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PlexMono";font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"PlexMono";font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Seg";font-weight:700;font-display:block;src:url(/static/fonts/DSEG14Classic-Bold.woff2) format("woff2")}

:root{
  --paper:#F4F5F3; --surface:#FFFFFF; --ink:#1B2126; --ink-2:#56616B; --line:#D8DCDE;
  --accent:#0B6A73; --accent-soft:#E2EFEF; --signal:#9A5A00; --signal-soft:#FBF0DC;
  --on-accent:#FFFFFF; --field-line:#8A949C;
  --danger:#B3261E; --danger-soft:#FBE7E5; --panel:#171B1E; --panel-ink:#A9B4BC; --led:#FFB23F; --led-off:#2A2620;

  --sans:"Plex",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"PlexMono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-xs:.8125rem; --t-sm:.875rem; --t-base:1rem; --t-body:1.0625rem;
  --t-lg:1.25rem; --t-xl:1.5rem; --t-2xl:1.8125rem; --t-3xl:2.125rem;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;
  --r1:6px; --r2:10px;
  --measure:42rem; --wide:72rem; --gutter:var(--s4);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111416; --surface:#191D20; --ink:#E5E9EC; --ink-2:#9AA6AF; --line:#2A3136;
    --accent:#5DB8C1; --accent-soft:#14292B; --signal:#E6A441; --signal-soft:#2A2112;
    --danger:#F08A80; --danger-soft:#2E1614;
    --on-accent:#08171A; --field-line:#6B7780;
  }
}
@media (min-width:40rem){ :root{ --gutter:var(--s5) } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Подвал прижат к низу окна, даже когда содержимого мало (короткая главная). */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main.page{flex:1 0 auto;width:100%}
.foot{flex-shrink:0}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:64rem){ body{font-size:var(--t-body)} }
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3{margin:0;line-height:1.2;font-weight:600;text-wrap:balance}
h1{font-size:var(--t-xl);letter-spacing:-.01em}
h2{font-size:var(--t-lg)}
h3{font-size:var(--t-base)}
@media (min-width:40rem){ h1{font-size:var(--t-2xl)} h2{font-size:var(--t-xl)} }
p{margin:0}
ul,ol{margin:0;padding:0}
.code{font-family:var(--mono);font-weight:600;letter-spacing:.02em;white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-3rem;background:var(--surface);padding:var(--s2) var(--s3);z-index:10}
.skip:focus{top:var(--s2)}

/* ---- каркас */
.bar{border-bottom:1px solid var(--line);background:var(--surface)}
.bar__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);height:3rem;display:flex;align-items:center;gap:var(--s4)}
.logo{display:flex;align-items:center;gap:var(--s2);color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--t-base);white-space:nowrap}
.logo svg{flex:none}
.bar__nav{display:none;gap:var(--s4);font-size:var(--t-sm)}
.bar__nav a{color:var(--ink-2);text-decoration:none}
.bar__nav a:hover{color:var(--ink);text-decoration:underline}
@media (min-width:40rem){ .bar__nav{display:flex} }
.bar__search{margin-left:auto;display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;color:var(--ink);border-radius:var(--r1)}
.bar__search:hover{background:var(--paper)}

.page{max-width:var(--wide);margin:0 auto;padding:var(--s3) var(--gutter) var(--s8)}
.col{max-width:var(--measure)}
.stack{display:flex;flex-direction:column;gap:var(--s6)}
.stack--tight{gap:var(--s4)}
@media (min-width:64rem){
  .with-aside{display:grid;grid-template-columns:minmax(0,var(--measure)) 16rem;gap:var(--s7);align-items:start}
  .aside{position:sticky;top:var(--s5)}
}
.aside{display:none}
@media (min-width:64rem){ .aside{display:block} }

.crumbs{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s3)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--s2)}
.crumbs li:not(:last-child)::after{content:"›";margin-left:var(--s2);color:var(--ink-2)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

.lede{font-size:var(--t-body);max-width:38em}
.muted{color:var(--ink-2)}
.small{font-size:var(--t-sm)}
.section{display:flex;flex-direction:column;gap:var(--s4)}
.section > h2{scroll-margin-top:var(--s4)}

/* ---- табло: единственная «громкая» деталь */
.readout{background:var(--panel);color:var(--panel-ink);border-radius:var(--r2);padding:var(--s4);display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.12)}
.readout__lcd{position:relative;font-family:"Seg",var(--mono);font-weight:700;font-size:2rem;line-height:1;color:var(--led);letter-spacing:.04em;padding:var(--s2) var(--s3);background:#0E1113;border-radius:var(--r1);min-width:5.5ch;text-align:right;text-shadow:0 0 12px rgba(255,178,63,.28)}
.readout__lcd::before{content:attr(data-ghost);position:absolute;right:var(--s3);color:var(--led-off);text-shadow:none;z-index:0}
.readout__lcd span{position:relative;z-index:1}
.readout__what{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t-base);line-height:1.35;color:#E6EBEE;font-weight:600}
.readout__meta{display:block;margin-top:var(--s1);font-size:var(--t-sm);font-weight:400;color:var(--panel-ink)}
.readout__urg{display:flex;gap:var(--s1);align-items:flex-start;font-size:var(--t-sm);font-weight:400;color:var(--panel-ink)}
.readout__urg svg{flex:none;width:1rem;height:1rem;margin-top:.15em}
.readout__urg--low svg{color:#6FC7CF}
.readout__urg--high svg{color:var(--led)}
.readout__urg--high{color:#F3D9AE}
.readout__urg--danger svg,.readout__urg--danger{color:#FF8E84}
.scope{color:var(--ink-2);border-left:3px solid var(--line);padding-left:var(--s3)}
@media (min-width:40rem){ .readout{padding:var(--s4) var(--s5)} .readout__lcd{font-size:2.75rem} }

/* ---- срочность: слово + значок, цвет лишь подкрепляет */
.urgency{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--t-base);padding:var(--s3) var(--s4);border-radius:var(--r1);background:var(--surface);border:1px solid var(--line)}
.urgency svg{flex:none;margin-top:.2em}
.urgency b{font-weight:600}
.urgency--low{border-color:var(--accent)}
.urgency--low svg{color:var(--accent)}
.urgency--medium svg{color:var(--ink-2)}
.urgency--high{border-color:var(--signal);background:var(--signal-soft)}
.urgency--high svg{color:var(--signal)}
.urgency--danger{border-color:var(--danger);background:var(--danger-soft)}
.urgency--danger svg{color:var(--danger)}
.gas{display:block}
.gas__steps{margin:var(--s2) 0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s1)}

/* ---- что проверить самому */
.selfcheck{background:var(--accent-soft);border-radius:var(--r2);padding:var(--s4)}
@media (min-width:40rem){ .selfcheck{padding:var(--s5)} }
.steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)}
.steps > li{counter-increment:step;display:grid;grid-template-columns:1.75rem 1fr;gap:var(--s3)}
.steps > li::before{content:counter(step);font:600 var(--t-sm)/1.75rem var(--mono);text-align:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
.steps p + .caution{margin-top:var(--s2)}
.caution{display:flex;gap:var(--s2);font-size:var(--t-sm);line-height:1.5;background:var(--signal-soft);border-left:3px solid var(--signal);padding:var(--s2) var(--s3);border-radius:0 var(--r1) var(--r1) 0}
.caution svg{flex:none;color:var(--signal);margin-top:.15em}

/* ---- таблица причин: на телефоне строка = блок */
.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;font-size:var(--t-base)}
.table th,.table td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.table thead th{font-size:var(--t-sm);font-weight:600;color:var(--ink-2);background:var(--paper)}
.table tr:last-child > *{border-bottom:0}
.who{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.who::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.who--self{color:var(--accent)}
.who--specialist_preferred{color:var(--signal)}
.who--specialist{color:var(--ink-2)}
@media (max-width:39.99rem){
  .table--causes thead{display:none}
  .table--causes,.table--causes tbody,.table--causes tr,.table--causes td,.table--causes th{display:block}
  .table--causes tr{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
  .table--causes tr:last-child{border-bottom:0}
  .table--causes th,.table--causes td{padding:0;border:0}
  .table--causes th{font-weight:600}
  .table--causes td{margin-top:var(--s1)}
}

/* ---- когда нужен мастер — отдельный компонент (точка будущего виджета) */
.tech{border:2px solid var(--ink);border-radius:var(--r2);padding:var(--s4);background:var(--surface);display:flex;flex-direction:column;gap:var(--s3)}
@media (min-width:40rem){ .tech{padding:var(--s5)} }
.tech h2{display:flex;gap:var(--s2);align-items:center}
.tech ul{padding-left:1.1em;display:flex;flex-direction:column;gap:var(--s2)}

/* ---- все коды бренда */
.codes{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.codes li + li{border-top:1px solid var(--line)}
.codes a,.codes .codes__here{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--s3);padding:var(--s3) var(--s4);min-height:2.75rem;color:var(--ink);text-decoration:none}
.codes a:hover{background:var(--paper)}
.codes a:hover .codes__code{text-decoration:underline}
.codes__code{font-family:var(--mono);font-weight:600;color:var(--accent)}
.codes__here{background:var(--accent-soft)}
.codes__here .codes__code{color:var(--ink)}
.codes__self{grid-column:2;font-size:var(--t-sm);color:var(--ink-2);margin-top:calc(var(--s2) * -1)}
@media (min-width:40rem){
  .codes a,.codes .codes__here{grid-template-columns:5rem 1fr auto}
  .codes__self{grid-column:auto;margin-top:0;text-align:right;white-space:nowrap}
}

/* ---- ссылки-чипы и списки */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips a{display:inline-flex;align-items:center;gap:var(--s2);min-height:2.75rem;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--t-base)}
.chips a:hover{border-color:var(--accent)}
.chips .code{color:var(--accent)}
.linklist{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.grid-brands{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:var(--s2)}
.grid-brands a{display:flex;flex-wrap:wrap;gap:0 var(--s2);justify-content:space-between;align-items:baseline;min-height:2.75rem;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);text-decoration:none}
.grid-brands a:hover{border-color:var(--accent)}
.grid-brands small{color:var(--ink-2);font-size:var(--t-sm);white-space:nowrap}

/* ---- проверка информации */
.verify{border-top:1px solid var(--line);padding-top:var(--s5);font-size:var(--t-sm);color:var(--ink-2);display:flex;flex-direction:column;gap:var(--s3)}
.verify h2{font-size:var(--t-base);color:var(--ink)}
.verify ol{padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s2)}
.verify a{color:var(--ink-2);overflow-wrap:anywhere}
.conflict{background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t-base);color:var(--ink)}
.conflict ul{padding-left:1.1em;margin-top:var(--s2)}
.conflict summary{cursor:pointer;color:var(--accent);font-size:var(--t-sm);min-height:2.75rem;display:flex;align-items:center}
.conflict--compact{padding-block:0}
.conflict--compact summary{color:var(--ink);font-size:var(--t-base);gap:var(--s1);flex-wrap:wrap}
.conflict--compact summary b{color:var(--signal)}
.conflict--compact[open]{padding-bottom:var(--s3)}
.linklist a{display:inline-block;padding-block:var(--s1);min-height:1.75rem}
.conflict summary:hover{text-decoration:underline}

/* ---- сравнение одного кода у брендов */
.cmp{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.cmp li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);display:grid;gap:var(--s2)}
@media (min-width:40rem){ .cmp li{grid-template-columns:10rem 1fr auto;align-items:baseline} }

/* ---- поиск */
.search{display:flex;gap:var(--s2)}
.search input{flex:1;min-width:0;font:inherit;font-size:var(--t-body);padding:var(--s3) var(--s4);border:1px solid var(--field-line);border-radius:var(--r1);background:var(--surface);color:var(--ink);min-height:3rem}
.search input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.search button{font:inherit;font-weight:600;min-height:3rem;padding:0 var(--s4);border:0;border-radius:var(--r1);background:var(--accent);color:var(--on-accent);cursor:pointer}
.results{list-style:none;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);overflow:hidden}
.results:empty{display:none}
.results li + li{border-top:1px solid var(--line)}
.results a{display:block;padding:var(--s3) var(--s4);color:var(--ink);text-decoration:none}
.results a:hover,.results a:focus-visible{background:var(--paper)}
.results small{display:block;color:var(--ink-2);font-size:var(--t-sm)}

/* ---- подвал и плашка cookie */
.foot{border-top:1px solid var(--line);margin-top:var(--s7)}
.foot__in{max-width:var(--wide);margin:0 auto;padding:var(--s5) var(--gutter) var(--s7);font-size:var(--t-sm);color:var(--ink-2);display:flex;flex-direction:column;gap:var(--s2)}
.foot a{color:var(--ink-2)}
.cookie{position:fixed;left:var(--s2);right:var(--s2);bottom:var(--s2);max-width:34rem;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s2) var(--s2) var(--s3);display:flex;gap:var(--s3);align-items:center;font-size:var(--t-xs);line-height:1.4;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:20}
.cookie[hidden]{display:none}
.cookie button{flex:none;font:inherit;font-weight:600;min-height:2.75rem;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--paper);color:var(--ink);cursor:pointer}

.notfound .readout__lcd{min-width:auto}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;transition:none!important} }
@media print{ .bar,.foot,.cookie,.aside,.bar__search{display:none!important} body{background:#fff} }