/* ============================================================
   Флагманы → вид «Живой» (23.09.2026). Тот же язык, что в движке
   (_engine.html, блок «ВИД «ЖИВОЙ»»): нажимаемое — клавиша с твёрдой
   губой снизу, статичное — светлая рамка без тени, чёрных контуров нет.
   Цвет = смысл: зелёный — верно/вперёд, красный — ошибка, синий — выбор.

   Лежит в /css/, а не в /flag/: страницы «Преподаватели» открываются и с публичных /kurs/,
   а /flag/ закрыт гейтом. Подключается ПОСЛЕДНИМ: после инлайнового <style> страницы и после
   sticker.css (у фармы — после её STYLE из farma-flag-style.mjs).
   Все правила под :root[data-skin=live] — на ступень специфичнее тёмных правил самих страниц
   (:root[data-theme=dark] .seg button[aria-pressed] …), иначе выбранная кнопка теряла цвет текста.
   Атрибут ставит скрипт в <head>
   страницы: ?skin= от движка, иначе localStorage.ekz_skin, иначе live.
   data-skin="classic" — прежний «Стикер», эти правила молчат.

   Два словаря классов: «стикерный» (.stage .seg .opt .qopt .next …,
   13 страниц) и «движковый» (.card .btn .opts .tabs .pill …, фарма).
   Смысловые цвета флагманов (--artery/--vein/--t1..t4/--tc …) НЕ трогаем.
   ============================================================ */

@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-latx.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 1. ТОКЕНЫ ----------
   :root[data-skin] — специфичность выше, чем у :root[data-theme] страниц и sticker.css. */
:root[data-skin=live]{
  /* стикерный словарь */
  --bg:#ffffff; --surface:#ffffff; --surface2:#f1f5ee; --inset:#f6f8f4;
  --ink:#26331f; --muted:#5d6b58; --faint:#65725f; --line:#e3e8df;
  --acc-soft:#e8f7da; --ok:#2f7d14; --ok-soft:#dcffc4; --bad:#c42323; --bad-soft:#ffe3e3;
  --border:#e3e8df; --shadow-c:#e3e8df; --shadow:0 4px 0 var(--shadow-c); --shadow-sm:0 3px 0 var(--shadow-c);
  --acid:#79e228; --on-acid:#173a06; --r:18px; --r-sm:14px;
  --serif:"Nunito",ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  /* движковый словарь (фарма) */
  --text:#26331f; --surface-2:#f6f8f4; --surface-3:#e9eee5; --border-2:#cfd8c9;
  --shadow-lg:0 6px 0 var(--shadow-c); --radius:18px; --radius-sm:14px; --radius-xs:10px;
  /* общие для «живого» */
  --lv-line:#e3e8df; --lv-lip:#58a700; --lv-font:"Nunito",ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --lv-ok-soft:#dcffc4; --lv-ok-line:#a5ed6e; --lv-ok-ink:#2f7d14;
  --lv-bad-soft:#ffe3e3; --lv-bad-line:#ffb3b3; --lv-bad-ink:#c42323;
  --lv-blue-soft:#ddf4ff; --lv-blue-line:#84d8ff; --lv-blue-ink:#0a6799;
  --lv-spring:cubic-bezier(.34,1.56,.64,1); --lv-press:cubic-bezier(.3,.7,.4,1);
}
@media(prefers-color-scheme:dark){:root[data-skin=live]:not([data-theme="light"]){
  --bg:#101a14; --surface:#16231b; --surface2:#1c2c22; --inset:#1c2c22;
  --ink:#eef6ea; --muted:#b9cab3; --faint:#8fa488; --line:#2c4033;
  --acc-soft:#1d3317; --ok:#a6ef6f; --ok-soft:#1d3317; --bad:#ff9a9a; --bad-soft:#3a1719;
  --border:#2c4033; --shadow-c:#2c4033; --acid:#6fd12a; --on-acid:#0d2206;
  --text:#eef6ea; --surface-2:#1c2c22; --surface-3:#26392c; --border-2:#3a5443;
  --lv-line:#2c4033; --lv-lip:#3f8a12;
  --lv-ok-soft:#1d3317; --lv-ok-line:#3f8a12; --lv-ok-ink:#a6ef6f;
  --lv-bad-soft:#3a1719; --lv-bad-line:#8a2a2e; --lv-bad-ink:#ff9a9a;
  --lv-blue-soft:#0f2c3b; --lv-blue-line:#1d6d93; --lv-blue-ink:#8fdcff;
}}
:root[data-skin=live][data-theme="dark"]{
  --bg:#101a14; --surface:#16231b; --surface2:#1c2c22; --inset:#1c2c22;
  --ink:#eef6ea; --muted:#b9cab3; --faint:#8fa488; --line:#2c4033;
  --acc-soft:#1d3317; --ok:#a6ef6f; --ok-soft:#1d3317; --bad:#ff9a9a; --bad-soft:#3a1719;
  --border:#2c4033; --shadow-c:#2c4033; --acid:#6fd12a; --on-acid:#0d2206;
  --text:#eef6ea; --surface-2:#1c2c22; --surface-3:#26392c; --border-2:#3a5443;
  --lv-line:#2c4033; --lv-lip:#3f8a12;
  --lv-ok-soft:#1d3317; --lv-ok-line:#3f8a12; --lv-ok-ink:#a6ef6f;
  --lv-bad-soft:#3a1719; --lv-bad-line:#8a2a2e; --lv-bad-ink:#ff9a9a;
  --lv-blue-soft:#0f2c3b; --lv-blue-line:#1d6d93; --lv-blue-ink:#8fdcff;
}

/* ---------- 2. ТИПОГРАФИКА ---------- */
:root[data-skin=live] body{font-family:var(--lv-font);background:var(--bg)}
:root[data-skin=live] h1{font-family:var(--lv-font);font-weight:900;letter-spacing:-.02em}
:root[data-skin=live] h2,:root[data-skin=live] h3{font-family:var(--lv-font);font-weight:850;letter-spacing:-.015em}
:root[data-skin=live] .eyebrow{font-weight:900}

/* ---------- 3. СТАТИЧНОЕ: рамка без губы ---------- */
:root[data-skin=live] .card,:root[data-skin=live] .stage,:root[data-skin=live] .hcard,:root[data-skin=live] .op,:root[data-skin=live] .figwrap,
:root[data-skin=live] .info-card,:root[data-skin=live] .qimg,:root[data-skin=live] .reveal,:root[data-skin=live] .step,:root[data-skin=live] .states,
:root[data-skin=live] .toggle,:root[data-skin=live] .target,:root[data-skin=live] .mc-key,:root[data-skin=live] .mc-gl,:root[data-skin=live] .ident,
:root[data-skin=live] .expl,:root[data-skin=live] .danger,:root[data-skin=live] .note,:root[data-skin=live] .tip{
  border:2px solid var(--lv-line);border-radius:var(--r);box-shadow:none}
:root[data-skin=live] .hcard{border-top:4px solid var(--tc)}
:root[data-skin=live] .target{border-style:dashed;border-color:var(--acc)}
:root[data-skin=live] .note,:root[data-skin=live] .tip{border-left-width:2px;border-radius:var(--r);background:var(--inset)}
/* переключатели режимов — «таблетница», как вкладки движка */
:root[data-skin=live] .seg,:root[data-skin=live] .modes,:root[data-skin=live] .tabs,:root[data-skin=live] .zoombar{
  border:2px solid var(--lv-line);border-radius:16px;box-shadow:none;background:var(--surface2)}

/* ---------- 4. НАЖИМАЕМОЕ: клавиша ---------- */
:root[data-skin=live] .btn,:root[data-skin=live] .next,:root[data-skin=live] .reset,:root[data-skin=live] .opt,:root[data-skin=live] .qopt,
:root[data-skin=live] .dchip,:root[data-skin=live] .lz,:root[data-skin=live] .opbtn,:root[data-skin=live] .pill,:root[data-skin=live] .opts button{
  border:2px solid var(--lv-line);border-radius:var(--r-sm);box-shadow:0 4px 0 var(--lv-line);
  transition:transform .09s var(--lv-press),box-shadow .09s var(--lv-press),background-color .15s,border-color .15s}
:root[data-skin=live] .chip{border:2px solid var(--lv-line);box-shadow:0 3px 0 var(--lv-line);transition:transform .09s var(--lv-press),box-shadow .09s var(--lv-press)}
:root[data-skin=live] .btn:hover:not(:disabled),:root[data-skin=live] .next:hover:not(:disabled),:root[data-skin=live] .reset:hover,
:root[data-skin=live] .opt:hover:not(:disabled),:root[data-skin=live] .qopt:hover:not(:disabled),:root[data-skin=live] .dchip:hover,
:root[data-skin=live] .lz:hover,:root[data-skin=live] .opbtn:hover,:root[data-skin=live] .pill:hover,:root[data-skin=live] .opts button:hover:not(:disabled){
  transform:none;box-shadow:0 4px 0 var(--lv-line);filter:brightness(.985)}
:root[data-skin=live] .btn:active:not(:disabled),:root[data-skin=live] .next:active:not(:disabled),:root[data-skin=live] .reset:active,
:root[data-skin=live] .opt:active:not(:disabled),:root[data-skin=live] .qopt:active:not(:disabled),:root[data-skin=live] .dchip:active,
:root[data-skin=live] .lz:active,:root[data-skin=live] .opbtn:active,:root[data-skin=live] .pill:active,:root[data-skin=live] .opts button:active:not(:disabled),
:root[data-skin=live] .chip:active{transform:translateY(4px);box-shadow:0 0 0 transparent}
:root[data-skin=live] .btn:disabled,:root[data-skin=live] .next:disabled{box-shadow:0 4px 0 var(--lv-line);transform:none;opacity:.55}
/* главное действие — кислотная клавиша с тёмной губой */
:root[data-skin=live] .btn:not(.ghost):not(.sec):not(.outline),:root[data-skin=live] .next{
  background:var(--acid);color:var(--on-acid);border-color:var(--acid);box-shadow:0 4px 0 var(--lv-lip);font-weight:900}
:root[data-skin=live] .btn:not(.ghost):not(.sec):not(.outline):hover:not(:disabled),:root[data-skin=live] .next:hover:not(:disabled){box-shadow:0 4px 0 var(--lv-lip);filter:brightness(1.05)}
:root[data-skin=live] .btn.ghost,:root[data-skin=live] .btn.sec,:root[data-skin=live] .btn.outline,:root[data-skin=live] .opbtn.sec{
  background:var(--surface);color:var(--ink);font-weight:850}
/* кнопки внутри «таблетницы»: плоские, выбранная — белая клавиша с синим текстом */
:root[data-skin=live] .seg button,:root[data-skin=live] .modes button,:root[data-skin=live] .states button,:root[data-skin=live] .zoombar button,
:root[data-skin=live] .tabs button,:root[data-skin=live] .toggle button{
  border:2px solid transparent;box-shadow:none;border-radius:12px;background:transparent;font-weight:850;color:var(--muted)}
/* вкладки-«tab» (Гемотрансфузия, Лента времени) отмечают выбор aria-selected, а не aria-pressed */
:root[data-skin=live] .seg button[aria-pressed="true"],:root[data-skin=live] .modes button[aria-pressed="true"],:root[data-skin=live] .seg button[aria-selected="true"],
:root[data-skin=live] .states button[aria-pressed="true"],:root[data-skin=live] .tabs button[aria-pressed="true"],:root[data-skin=live] .tabs button.active,
:root[data-skin=live] .toggle button[aria-pressed="true"]{
  background:var(--surface);color:var(--lv-blue-ink);border-color:var(--lv-line);box-shadow:0 3px 0 var(--lv-line)}
/* выбранный фильтр/пункт — синий, как выбор ответа в движке */
:root[data-skin=live] .chip[aria-pressed="true"],:root[data-skin=live] .opbtn[aria-pressed="true"],:root[data-skin=live] .dchip[aria-current="true"],
:root[data-skin=live] .pill.on{
  background:var(--lv-blue-soft);color:var(--lv-blue-ink);border-color:var(--lv-blue-line);box-shadow:0 3px 0 var(--lv-blue-line)}
:root[data-skin=live] .btrack .step{background:var(--acid);color:var(--on-acid);border-color:var(--acid)}
:root[data-skin=live] .pill.done{background:var(--lv-ok-soft);border-color:var(--lv-ok-line);color:var(--lv-ok-ink);box-shadow:0 3px 0 var(--lv-ok-line)}

/* ---------- 5. ОТВЕТЫ: зелёный — верно, красный — ошибка ---------- */
@keyframes lvfRight{0%{transform:scale(1)}35%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes lvfShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
:root[data-skin=live] .opt.ok,:root[data-skin=live] .opt.correct,:root[data-skin=live] .qopt.right,:root[data-skin=live] .opts button.correct{
  background:var(--lv-ok-soft);border-color:var(--lv-ok-line);color:var(--lv-ok-ink);box-shadow:0 4px 0 var(--lv-ok-line);animation:lvfRight .45s var(--lv-spring)}
:root[data-skin=live] .opt.no,:root[data-skin=live] .opt.bad,:root[data-skin=live] .opt.wrong,:root[data-skin=live] .qopt.wrong,:root[data-skin=live] .opts button.wrong{
  background:var(--lv-bad-soft);border-color:var(--lv-bad-line);color:var(--lv-bad-ink);box-shadow:0 4px 0 var(--lv-bad-line);animation:lvfShake .42s ease}
:root[data-skin=live] .opts button{background:var(--surface);font-weight:700}
:root[data-skin=live] .opts button .mk{border:2px solid var(--lv-line);border-radius:8px}

/* ---------- 6. МЕТКИ, ПОЛЯ, ФОКУС ---------- */
/* ссылки без своего класса: браузерный синий в тёмной теме тонул в фоне («Неточность? Напиши в бот») */
:root[data-skin=live] a:not([class]){color:var(--lv-blue-ink)}
:root[data-skin=live] .tag,:root[data-skin=live] .badge,:root[data-skin=live] .tim,:root[data-skin=live] .bpill,:root[data-skin=live] .crumb,:root[data-skin=live] .qstage{box-shadow:none}
:root[data-skin=live] .badge{border-radius:10px;font-weight:850}
:root[data-skin=live] input[type=text],:root[data-skin=live] input[type=search],:root[data-skin=live] input:not([type]),:root[data-skin=live] .searchbox,:root[data-skin=live] textarea{
  border:2px solid var(--lv-line);border-radius:14px;background:var(--inset)}
:root[data-skin=live] input[type=text]:focus,:root[data-skin=live] input:not([type]):focus,:root[data-skin=live] .searchbox:focus,:root[data-skin=live] textarea:focus{
  outline:none;border-color:var(--lv-blue-line);box-shadow:none}
:root[data-skin=live] .btn:focus-visible,:root[data-skin=live] .next:focus-visible,:root[data-skin=live] .opt:focus-visible,:root[data-skin=live] .qopt:focus-visible,
:root[data-skin=live] .chip:focus-visible,:root[data-skin=live] .dchip:focus-visible,:root[data-skin=live] .lz:focus-visible,:root[data-skin=live] .opbtn:focus-visible,
:root[data-skin=live] .seg button:focus-visible,:root[data-skin=live] .modes button:focus-visible,:root[data-skin=live] .tabs button:focus-visible,
:root[data-skin=live] .states button:focus-visible,:root[data-skin=live] .toggle button:focus-visible,:root[data-skin=live] .pill:focus-visible{
  outline:3px solid var(--lv-blue-line);outline-offset:3px}
/* ползунки нативные (accent-color страницы, --acc) — не трогаем: Chrome сам решает, светлой или тёмной
   рисовать незаполненную дорожку, и на светлом кислотном красил её почти в чёрный */

@media(prefers-reduced-motion:reduce){
  :root[data-skin=live] .opt,:root[data-skin=live] .qopt,:root[data-skin=live] .opts button{animation:none!important;transition:none}
  :root[data-skin=live] .btn,:root[data-skin=live] .next,:root[data-skin=live] .chip,:root[data-skin=live] .pill{transition:none}
}