/* ===========================================================================
   Lingo — design system (single source of truth for colour, shape, type, depth)
   Loaded BEFORE style.css. Components must consume the semantic tokens below,
   never raw hex. The five brand colours come from the owner's palette:

     deep sky blue   #5cc8ff   accent / selection / links      -> --sky-*
     lavender veil   #f2d5f8   soft surface / draft state      -> --veil-*
     vintage grape   #493657   ink / primary fill (the anchor) -> --grape-*
     celadon         #afd5aa   success / done                  -> --cel-*
     grapefruit pink #fe6d73   attention / danger              -> --gf-*

   Contrast rules that keep the whole app readable:
     light fill + grape ink   (sky-300 -> 5.7:1, cel-300 -> 6.5:1)
     grape fill + white text  (10.6:1)
     never white text on a light sky/celadon/grapefruit fill.
   =========================================================================== */

:root{
  /* ---- ramps (the brand hex sits at the starred stop) ---------------------- */
  --sky-50:#f0faff;  --sky-100:#dbf3ff; --sky-200:#b9e7fd; --sky-300:#8fdaff;
  --sky-400:#5cc8ff; /* * */            --sky-500:#2cb0f2; --sky-600:#0d91d3;
  --sky-700:#0971a5; --sky-800:#07567e;

  --veil-50:#fcf7fd; --veil-100:#f8e9fb;
  --veil-200:#f2d5f8; /* * */           --veil-300:#e7beef; --veil-400:#d6a3e0;
  --veil-500:#ba80c6; --veil-600:#9d60a9; --veil-700:#794983; --veil-800:#5b3762;

  --grape-50:#f5f2f7; --grape-100:#ebe6ef; --grape-200:#dad2e0; --grape-300:#beb2c7;
  --grape-400:#9b8ba7; --grape-500:#786388; --grape-600:#5f496e;
  --grape-700:#493657; /* * */          --grape-800:#352541; --grape-900:#251a2e;

  --cel-50:#f1f9f0; --cel-100:#e4f3e2; --cel-200:#cee7ca;
  --cel-300:#afd5aa; /* * */            --cel-400:#86bd7f; --cel-500:#60a857;
  --cel-600:#4b8943; --cel-700:#396c33; --cel-800:#2b5426;

  --gf-50:#ffebeb; --gf-100:#ffdbdc; --gf-200:#fdbec0; --gf-300:#fe9a9d;
  --gf-400:#fe6d73; /* * */             --gf-500:#f5474d; --gf-600:#db242a;
  --gf-700:#a92327; --gf-800:#7e2023;

  /* ---- semantic: text ----------------------------------------------------- */
  --ink:var(--grape-700);         /* headings & body                            */
  --ink-strong:var(--grape-800);  /* the one loud line on a screen              */
  --muted:var(--grape-500);       /* secondary text, 5.3:1                      */
  --faint:var(--grape-400);       /* hints, disabled, timestamps                */
  --on-dark:#fff;

  /* ---- semantic: surfaces ------------------------------------------------- */
  --bg:#faf7fb;                   /* app background — a breath of lavender      */
  --card:#ffffff;
  --surface:var(--grape-50);      /* inset panels, wells                        */
  --surface-2:var(--veil-50);     /* softer, warmer inset                       */
  --task-plaque:var(--surface-2); /* task-overview plaque body (.oent); scheme2 → neutral grey */
  --line:var(--grape-200);        /* default border                             */
  --line-soft:var(--grape-100);   /* hairline / divider                         */
  --line-strong:var(--grape-400);

  /* ---- semantic: accent (sky) --------------------------------------------- */
  --accent:var(--sky-400);        /* fills, selection — pair with --ink         */
  --accent-ink:var(--sky-700);    /* accent as TEXT on white, 5.4:1             */
  --accent-deep:var(--sky-600);
  --accent-tint:var(--sky-50);    /* accent-flavoured background                */
  --accent-line:var(--sky-200);

  /* ---- semantic: states ---------------------------------------------------- */
  /* ok/done — celadon */
  --ok:var(--cel-500); --ok-ink:var(--cel-700); --ok-tint:var(--cel-50); --ok-line:var(--cel-200);
  /* alert — the ONE "teacher must act" colour (unassigned homework, to-check
     counters, nag frames). Was amber; grapefruit now owns it. */
  --alert:var(--gf-500); --alert-ink:var(--gf-700); --alert-tint:var(--gf-50); --alert-line:var(--gf-200);
  /* white text on a SOLID alert fill needs the darker stop: #fff on gf-500 is only 3.6:1,
     on gf-600 it is 4.9:1. Filled white-on-red badges (к-проверке counter, group nag number,
     edited flag) use this; the tint/dot/nag-frame keep the brand gf-500. */
  --alert-solid:var(--gf-600);
  /* danger — destructive only (delete, graduate) */
  --danger:var(--gf-600); --danger-ink:var(--gf-700);
  /* draft — unpublished work in progress. Was amber (clashed with alert); the
     lavender veil now carries it, so "черновик" and "надо действовать" never
     look alike again. */
  --draft:var(--veil-500); --draft-ink:var(--veil-700); --draft-tint:var(--veil-50); --draft-line:var(--veil-300);

  /* ---- semantic: homework task types (student rectangles) ------------------ */
  --task-plain:var(--grape-500);  /* nothing to hand in                          */
  --task-sub:var(--sky-500);      /* has a turn-in                               */
  /* theme-frame outline colour (blox26 #5): ONE token per scheme so the unified
     frame recolours with the palette. Scheme1 — grape; scheme2 — ink; scheme3 —
     the header's deep-Maya right edge (overrides below). */
  --frame-line:var(--grape-300);
  /* challenge — the ONE gold in the product (blox15 #6). A challenge is a task
     everybody can see everybody do; gold is what makes it read as a prize, not
     as an alert. Nothing else may use it. */
  --gold:#c9962c; --gold-ink:#8a6412; --gold-tint:#fdf6e6; --gold-line:#eddcae;

  /* Яндекс.Диск-облик файлового окна «Классный проводник» (blox33 #1, story 7-bis).
     Владелец захотел, чтобы проводник читался как сам файловый браузер Я.Диска —
     белая рабочая область, серая обвязка, его синий акцент, красная метка «Я». Поэтому
     это СЫРОЙ бренд-hex, СОЗНАТЕЛЬНО вне блока схем (как --gold): окно диска выглядит
     одинаково в любой цветовой схеме. Применяются scoped на .plscreen / .exp-shutter
     (см. explorer.css), поэтому не протекают в остальное приложение. */
  --ya-surface:#ffffff;     /* рабочая область файлов — белая, как у Диска */
  --ya-soft:#f4f5f7;        /* серые полосы: шапка окна, адресная строка, тулбар */
  --ya-line:#e6e7ea;        /* тонкие границы-волоски */
  --ya-accent:#4d7cfe;      /* интерактивный синий (рамка выбора, активная вкладка) */
  --ya-accent-dark:#2b5fd9; /* ссылки, бейдж «видео», текст-на-белом */
  --ya-sel:#eaf1ff;         /* подсветка выбранной строки / тон папки */
  --ya-red:#fc3f1d;         /* фирменная красная «Я» (уже применялась в playlist.css) */

  /* ---- component role tokens (blox26) --------------------------------------
     Added so components speak ROLES, never raw ramp stops (var(--grape-500)…).
     `npm run check` now BLOCKS a raw ramp reference outside this file. Each token
     points at a ramp stop; a colour scheme re-skins the app by overriding the
     token here — so all screens follow the 5-colour palette from ONE place. */
  --muted-strong:var(--grape-600);  /* label a shade darker than --muted; AA on --fill-soft */
  --fill-soft:var(--grape-100);     /* subtle neutral fill (tab track, hover well, chip) — kept
                                       distinct from --surface so a hover over a well still reads */
  --line-mid:var(--grape-300);      /* input & visible borders, between --line and --line-strong */
  --primary:var(--grape-700);       /* dark anchor FILL under white text: selected tab, dragged
                                       lesson tile, pool play button (the sky accent is too light) */
  --primary-strong:var(--grape-800);/* darkest chrome fill: toasts, drag readout */
  --accent-solid:var(--sky-700);    /* dark accent FILL under white text (player, primary mgr btn) */
  --accent-fill:var(--sky-100);     /* accent selected/hover fill, a step darker than --accent-tint */
  --ok-solid:var(--cel-700);        /* green FILL under white text — cel-600 was 4.2:1, under AA */
  --ok-fill:var(--cel-100);         /* done fill, a step darker than --ok-tint */
  --alert-fill:var(--gf-100);       /* alert/danger fill (drag-over, trash), darker than --alert-tint */
  --alert-strong:var(--gf-700);     /* dark red FILL under white text: recording-on, count-badge hover */
  /* объявление — a STANDING note, deliberately lavender so it never reads as a state
     (draft/alert/done). Fixed across schemes: veil is not a re-skinned family. */
  --note-bg:var(--veil-50); --note-line:var(--veil-300); --note-ink:var(--veil-700);

  /* ---- shape --------------------------------------------------------------- */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px;
  --r-pill:999px;

  /* ---- depth — shadows are grape-tinted, never grey ------------------------ */
  --sh-1:0 1px 2px rgba(73,54,87,.05), 0 2px 6px rgba(73,54,87,.05);
  --sh-2:0 2px 4px rgba(73,54,87,.05), 0 6px 16px rgba(73,54,87,.07);
  --sh-3:0 4px 10px rgba(73,54,87,.07), 0 14px 34px rgba(73,54,87,.10);
  --sh-4:0 10px 24px rgba(73,54,87,.12), 0 30px 60px rgba(73,54,87,.16);
  --sh-accent:0 4px 14px rgba(13,145,211,.28);
  --sh-inset:inset 0 1px 2px rgba(73,54,87,.06);
  --sh-press:inset 0 2px 5px rgba(37,26,46,.22);   /* button «pressed-in» — darker than --sh-inset so it reads on dark fills too */
  --ring:0 0 0 3px rgba(92,200,255,.35);   /* focus ring */

  /* ---- type ---------------------------------------------------------------- */
  /* Onest (self-hosted, see fonts/onest.css). The system stack stays as the fallback
     that renders while the woff2 loads. */
  --font:'Onest',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px;
  --fs-xl:20px;  --fs-2xl:24px; --fs-3xl:30px;
  --lh-tight:1.2; --lh:1.45;
  --tracking-tight:-.015em;   /* iOS headings are slightly negative-tracked */
  --tracking-caps:.06em;

  /* ---- rhythm --------------------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:44px;

  /* ---- motion --------------------------------------------------------------- */
  --ease:cubic-bezier(.32,.72,0,1);       /* iOS-ish: fast out, gentle settle */
  --t-fast:.14s; --t:.22s; --t-slow:.34s;

  /* ---- signature gradients --------------------------------------------------- */
  /* the playlist's identity: the full palette, left to right */
  --grad-playlist:linear-gradient(100deg,var(--sky-400) 0%,#a8b0ef 34%,var(--veil-300) 55%,var(--gf-400) 100%);
  --grad-playlist-v:linear-gradient(180deg,var(--sky-400),#a8b0ef,var(--veil-300),var(--gf-400));
  --grad-header:linear-gradient(135deg,var(--grape-600) 0%,var(--grape-800) 62%,var(--grape-900) 100%);
  --grad-primary:linear-gradient(180deg,var(--grape-600),var(--grape-700));
  /* button engine — «juicy» filled surfaces: a hair lighter at the top so the fill
     reads as a rounded, lit surface, settling to the role's solid at the bottom.
     DERIVED from the role token via color-mix, so they follow EVERY scheme on their
     own (no scheme-block copy — the §11 trap): --accent-solid is re-skinned per scheme,
     --ok-solid is a fixed state colour (accept stays green everywhere). Kept subtle —
     text sits mid-height where the colour ≈ solid, so AA contrast holds. */
  --grad-accept:linear-gradient(180deg,color-mix(in srgb,var(--ok-solid) 88%,#fff),var(--ok-solid));
  --grad-fill:linear-gradient(180deg,color-mix(in srgb,var(--accent-solid) 88%,#fff),var(--accent-solid));
  /* glossy top edge for filled buttons — a 1px inner-white line = light catching the rim */
  --gloss:inset 0 1px 0 rgba(255,255,255,.18);
  /* the Lingo wordmark — the brand rainbow, deliberately FIXED across schemes */
  --grad-wordmark:linear-gradient(100deg,var(--sky-600),var(--veil-600) 55%,var(--gf-500));
}

/* ===========================================================================
   СИНИЕ СХЕМЫ LINGO (blox26 #4 + доп. запрос владельца) — «синяя база» с реального
   сайта школы lingo-school.com. Пять цветов палитры:  Jet Black #262e35 · Pale Sky
   #d0effe · Maya Blue #7bbeea · Alice Blue #f3f9fb · White.
   Их ДВЕ, и они делят одну палитру — различаются ТОЛЬКО «якорем» (во что окрашена
   шапка + первичные кнопки):
     • «Графитовая» (ключ scheme2) — тёмная ГРАФИТОВАЯ шапка, белый текст;
     • «Lingo» (ключ scheme3) — сам Maya Blue выходит В ШАПКУ, текст на ней белый.
   Имена в меню — из SCHEMES (public/settings.js); ключи scheme2/scheme3 менять НЕЛЬЗЯ,
   они лежат в localStorage и в users.ui_prefs у уже выбравших схему.
   Общая база (текст / фон / акцент / линии) — в сгруппированном правиле ниже; отличие
   каждой схемы — в её собственном коротком блоке.
   Зелёный «сделано» (--ok*), красный «внимание» (--alert* и --danger) и золото челленджа
   (--gold*) СОЗНАТЕЛЬНО НЕ трогаем — наследуются из :root, чтобы «сделано»/«тревога»/«приз»
   читались одинаково во всех схемах (на Alice-Blue фоне контраст тот же, что на белой карточке).
   Значения, которых в 5 цветах нет, ВЫВЕДЕНЫ из базы (затемнение/осветление) — помечены ниже.
   =========================================================================== */
:root[data-scheme="scheme2"],
:root[data-scheme="scheme3"]{
  /* текст: Jet Black как чернила; strong/muted/faint выведены затемнением/осветлением */
  --ink:#262e35;              /* Jet Black — заголовки и текст (12.96:1 на фоне)        */
  --ink-strong:#171c22;       /* выведен: тёмный Jet Black — одна громкая строка          */
  --muted:#566270;            /* выведен: сине-серый, 5.85:1 — вторичный текст            */
  --faint:#7c8894;            /* выведен: светлее — подсказки, таймстемпы, disabled       */

  /* фон и подложки: Alice Blue как основной фон; inset-панели выведены из него */
  --bg:#f3f9fb;               /* Alice Blue — фон приложения                              */
  --surface:#eaf3f8;          /* выведен: чуть темнее фона — вложенные панели             */
  --surface-2:#e3f1fb;        /* выведен: мягче/светлее — тёплый inset                     */
  --line:#cbe0ee;             /* выведен: сине-серая граница по умолчанию                  */
  --line-soft:#e0edf5;        /* выведен: волосяная линия / разделитель                    */
  --line-strong:#9ab4c6;      /* выведен: заметная граница                                 */

  /* акцент: Maya Blue как заливка/выделение; deep/ink/line выведены из него */
  --accent:#7bbeea;           /* Maya Blue — заливки, выделение (с --ink 6.82:1)          */
  --accent-ink:#12689e;       /* выведен: тёмная Maya — акцент ТЕКСТОМ на белом, 6.0:1     */
  --accent-deep:#2f8fd0;      /* выведен: средняя Maya — hover/ссылки                      */
  --accent-tint:#d0effe;      /* Pale Sky — акцентный фон                                  */
  --accent-line:#a9dbf6;      /* выведен: светлая Maya — акцентная граница                 */

  /* новые ролевые ярлыки (blox26) — выведены из той же базы (нейтраль Jet Black + акцент Maya).
     Состояния (--ok*/--alert*) и заметку (--note*) НЕ трогаем: наследуются из :root, чтобы
     «сделано»/«тревога»/объявление читались одинаково во всех схемах. */
  --muted-strong:#3b4653;     /* выведен: между --ink и --muted                            */
  --fill-soft:#e0edf5;        /* = --line-soft: та же светлая подложка, роль «заливка»      */
  --line-mid:#b6cfe0;         /* выведен: между --line и --line-strong                     */
  --primary:#262e35;          /* якорь-заливка = Jet Black (как --ink), белый текст 12.96:1 */
  --primary-strong:#171c22;   /* тёмная заливка чрома (тосты/ридаут)                        */
  --accent-solid:#12689e;     /* глубокий Maya под белый текст (= --accent-ink)             */
  --accent-fill:#bce4fb;      /* выведен: светлая Maya-заливка, темнее --accent-tint        */
  /* рельсы тасков по типу: нейтральный = нейтраль схемы; «нужна сдача» = Maya. Без этого
     grape-500/sky-500 из :root не следовали бы за синей схемой (остаточная утечка). */
  --task-plain:#566270; --task-sub:#2f8fd0;

  /* фокус-кольцо и тень акцента — на Maya Blue */
  --ring:0 0 0 3px rgba(123,190,234,.45);
  --sh-accent:0 4px 14px rgba(47,143,208,.28);
}

/* ── «Графитовая» (scheme2): тёмный ГРАФИТОВЫЙ якорь ─────────────────────────────────
   Шапка и первичные кнопки — тёмный Jet Black вместо винограда (иначе на синей базе
   верхняя панель осталась бы фиолетовой). Оттенки выведены из #262e35. */
:root[data-scheme="scheme2"]{
  --grad-header:linear-gradient(135deg,#323c46 0%,#1e252c 62%,#141920 100%);
  --grad-primary:linear-gradient(180deg,#323c46,#262e35);
  --frame-line:var(--ink);   /* тёмный графитовый контур рамки темы — как якорь схемы */
  /* blox28 #3: рельс обычного таска (без сдачи) — ЧИСТО нейтральный светло-серый,
     а не сине-серый #566270 из общего блока (тот остаётся для scheme3 «голубоватой»). */
  --task-plain:#a6a6a4;
  /* blox28 #3 (уточнение): само ТЕЛО плашки таска на мониторе (.oent) — светло-серое
     в тон рельсу, а не голубоватый --surface-2 (#e3f1fb). В scheme3 тело остаётся голубым. */
  --task-plaque:rgba(236,235,233,.5);
}
/* выделение текста в «Графитовой» — Pale Sky вместо sky-200 (ink на нём 11.45:1) */
:root[data-scheme="scheme2"] ::selection{background:#d0effe;color:var(--ink)}

/* ── «Lingo» (scheme3): сам Maya Blue выходит в ШАПКУ (БЕЛЫЙ текст) ───────────────
   Владелец хотел видеть бренд-цвет Maya Blue именно наверху, а не только в акцентах,
   и чтобы текст на шапке остался БЕЛЫМ. Ограничение: белый на светлом Maya Blue
   #7bbeea нечитаем (1.9:1). Поэтому «якорь» шапки — ГЛУБОКИЙ Maya Blue (из того же
   семейства, не графит как в «Графитовой»), затемнённый ровно настолько, чтобы белый текст
   прошёл AA: самый светлый стоп #1a75b0 даёт с белым 5.0:1, центр #12689e — 6.0:1.
   Белый текст, полупрозрачно-белые подложки и Maya-точка логотипа работают как в
   базовой тёмной шапке — поэтому НИКАКИХ переопределений chrome тут не нужно. */
:root[data-scheme="scheme3"]{
  --grad-header:linear-gradient(135deg,#1a75b0 0%,#12689e 58%,#0d5077 100%);  /* глубокий Maya Blue, белый текст ≥5:1 */
  --grad-primary:linear-gradient(180deg,#2f8fd0,#12689e);                     /* чуть светлее шапки — кнопки выделяются */
  --frame-line:#1a75b0;   /* ЛЕВЫЙ (светлый) край шапки — рамка темы в тон, но легче */
}
/* выделение текста — тоже Pale Sky */
:root[data-scheme="scheme3"] ::selection{background:#d0effe;color:var(--ink)}

/* ---- icons (see icons.svg / icons.js) ---------------------------------------
   One stroked family, coloured by the text around it. Sized in em so an icon always
   matches its label. .ic-lg for the hub tiles, .ic-xl for empty states. */
.ic{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.17em;
    fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:1.7em;height:1.7em;vertical-align:-.3em}
.ic-xl{width:2em;height:2em;vertical-align:-.35em;stroke-width:1.6}

/* ---- base ------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:var(--lh);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{letter-spacing:var(--tracking-tight);line-height:var(--lh-tight)}
button,input,select,textarea{font-family:inherit}
/* Safari на iOS зумит страницу, когда фокус попадает в поле со шрифтом меньше 16px, и обратно
   уже не отзумливает — приложение остаётся «съехавшим» вправо даже после ухода с экрана
   (blox11 #3, поле чата было 15px). На тач-экранах держим все поля ровно на 16px. !important —
   потому что точечные правила компонентов задают свой font-size и иначе перебьют это. */
@media (pointer:coarse){
  input,select,textarea{font-size:16px !important}
}
:focus-visible{outline:none;box-shadow:var(--ring)}
::selection{background:var(--sky-200);color:var(--ink)}