/* Общий CSS ученических страниц (V0 Д-CSS): токены, шрифты, компоненты.
 *
 * Источник значений — Figma, файл TWfsruzUN9ItxqRrhL3kyP, страница «Основа»;
 * в контракте V0_CONTRACT_DCSS_2026-10-05 это приложения А (токены) и Б
 * (компоненты). Номера строк приложений стоят в комментариях: тест
 * tests/test_dcss_base_css.py сверяет файл с теми же таблицами.
 *
 * Тема: светлая по умолчанию; тёмная — data-theme="dark" на любом предке или
 * системная тёмная тема, если светлая не выбрана явно. Предмет —
 * data-subject на любом предке, без атрибута действует «default». Предмет
 * меняет только --accent, --accent-soft, --tint, --accent-hover.
 *
 * Подключать до собственного <style> страницы: страница оставляет себе только
 * раскладку и переопределяет нужное без !important.
 */

/* Шрифты лежат на своём домене (R-011): SIL OFL 1.1, лицензии — /fonts/OFL-*.txt. */
@font-face{font-family:"Golos Text";src:url("/fonts/GolosText.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Literata";src:url("/fonts/Literata.woff2") format("woff2");font-weight:400 500;font-display:swap}

/* ---------- А1, А2 (default), А3: светлая тема ---------- */
:root{
  --bg:#F7F8F4;
  --paper:#FCFCF9;
  --field:#F7F8F4;
  --rule:#E4E7DD;
  --line:#DCDFD6;
  --ink:#161B19;
  --muted:#5A625B;
  --faint:#636B64;
  --on-accent:#FFFFFF;
  --ok:#2F6B4F;
  --ok-bg:#E6F1EA;
  --warn:#8A5A12;
  --warn-bg:#F6EDD9;
  --bad:#8C2F2F;
  --bad-bg:#F5E4E4;
  --accent:#2C3A54;
  --accent-soft:#3E4E6E;
  --tint:#EDF1F8;
  --accent-hover:#253147;
  /* Старые имена, которыми пользовались страницы. */
  --canvas:var(--bg);
  --surface:var(--paper);
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:16px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --tap-min:44px;
  color-scheme:light;
}

/* ---------- А1: тёмная тема ---------- */
[data-theme="dark"]{
  --bg:#141618;
  --paper:#1B1E22;
  --field:#23272C;
  --rule:#2A2E33;
  --line:#3A4046;
  --ink:#ECEEE9;
  --muted:#A8B0A9;
  --faint:#8E968F;
  --on-accent:#101316;
  --ok:#6FCB9B;
  --ok-bg:#1B2D24;
  --warn:#E3B766;
  --warn-bg:#33291A;
  --bad:#F29C9C;
  --bad-bg:#3B2124;
  --accent:#9DB0D6;
  --accent-soft:#B4C3E2;
  --tint:#2D323B;
  --accent-hover:#B4C3E2;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141618;
    --paper:#1B1E22;
    --field:#23272C;
    --rule:#2A2E33;
    --line:#3A4046;
    --ink:#ECEEE9;
    --muted:#A8B0A9;
    --faint:#8E968F;
    --on-accent:#101316;
    --ok:#6FCB9B;
    --ok-bg:#1B2D24;
    --warn:#E3B766;
    --warn-bg:#33291A;
    --bad:#F29C9C;
    --bad-bg:#3B2124;
    --accent:#9DB0D6;
    --accent-soft:#B4C3E2;
    --tint:#2D323B;
    --accent-hover:#B4C3E2;
    color-scheme:dark;
  }
}

/* ---------- А2: предмет, светлая тема ---------- */
[data-subject="default"]{--accent:#2C3A54;--accent-soft:#3E4E6E;--tint:#EDF1F8;--accent-hover:#253147}
[data-subject="math"]{--accent:#3347A8;--accent-soft:#5263B5;--tint:#EFF0F8;--accent-hover:#2B3C8F}
[data-subject="phys"]{--accent:#6B3FA0;--accent-soft:#815CAE;--tint:#F3F0F7;--accent-hover:#5B3688}
[data-subject="chem"]{--accent:#0F766E;--accent-soft:#338B84;--tint:#ECF4F3;--accent-hover:#0D645E}
[data-subject="inf"]{--accent:#0369A1;--accent-soft:#2980AF;--tint:#EBF3F7;--accent-hover:#035989}
[data-subject="rus"]{--accent:#A0395F;--accent-soft:#AE5777;--tint:#F7EFF2;--accent-hover:#883051}
[data-subject="bio"]{--accent:#3F7D20;--accent-soft:#5C9141;--tint:#F0F5ED;--accent-hover:#366A1B}
[data-subject="hist"]{--accent:#8A5A2B;--accent-soft:#9C734B;--tint:#F6F2EE;--accent-hover:#754C25}

/* ---------- А2: предмет, тёмная тема ---------- */
[data-theme="dark"] [data-subject="default"],[data-theme="dark"][data-subject="default"]{--accent:#9DB0D6;--accent-soft:#B4C3E2;--tint:#2D323B;--accent-hover:#B4C3E2}
[data-theme="dark"] [data-subject="math"],[data-theme="dark"][data-subject="math"]{--accent:#A3B1F2;--accent-soft:#B1BDF4;--tint:#2E333F;--accent-hover:#B1BDF4}
[data-theme="dark"] [data-subject="phys"],[data-theme="dark"][data-subject="phys"]{--accent:#C6A8EE;--accent-soft:#CFB5F1;--tint:#33313F;--accent-hover:#CFB5F1}
[data-theme="dark"] [data-subject="chem"],[data-theme="dark"][data-subject="chem"]{--accent:#5DD0C3;--accent-soft:#75D7CC;--tint:#243739;--accent-hover:#75D7CC}
[data-theme="dark"] [data-subject="inf"],[data-theme="dark"][data-subject="inf"]{--accent:#6DC3F2;--accent-soft:#83CCF4;--tint:#26353F;--accent-hover:#83CCF4}
[data-theme="dark"] [data-subject="rus"],[data-theme="dark"][data-subject="rus"]{--accent:#F0A3BF;--accent-soft:#F2B1C9;--tint:#393138;--accent-hover:#F2B1C9}
[data-theme="dark"] [data-subject="bio"],[data-theme="dark"][data-subject="bio"]{--accent:#96D45F;--accent-soft:#A6DA77;--tint:#2C372B;--accent-hover:#A6DA77}
[data-theme="dark"] [data-subject="hist"],[data-theme="dark"][data-subject="hist"]{--accent:#D9AE7A;--accent-soft:#DFBA8E;--tint:#36322E;--accent-hover:#DFBA8E}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-subject="default"],:root:not([data-theme="light"])[data-subject="default"]{--accent:#9DB0D6;--accent-soft:#B4C3E2;--tint:#2D323B;--accent-hover:#B4C3E2}
  :root:not([data-theme="light"]) [data-subject="math"],:root:not([data-theme="light"])[data-subject="math"]{--accent:#A3B1F2;--accent-soft:#B1BDF4;--tint:#2E333F;--accent-hover:#B1BDF4}
  :root:not([data-theme="light"]) [data-subject="phys"],:root:not([data-theme="light"])[data-subject="phys"]{--accent:#C6A8EE;--accent-soft:#CFB5F1;--tint:#33313F;--accent-hover:#CFB5F1}
  :root:not([data-theme="light"]) [data-subject="chem"],:root:not([data-theme="light"])[data-subject="chem"]{--accent:#5DD0C3;--accent-soft:#75D7CC;--tint:#243739;--accent-hover:#75D7CC}
  :root:not([data-theme="light"]) [data-subject="inf"],:root:not([data-theme="light"])[data-subject="inf"]{--accent:#6DC3F2;--accent-soft:#83CCF4;--tint:#26353F;--accent-hover:#83CCF4}
  :root:not([data-theme="light"]) [data-subject="rus"],:root:not([data-theme="light"])[data-subject="rus"]{--accent:#F0A3BF;--accent-soft:#F2B1C9;--tint:#393138;--accent-hover:#F2B1C9}
  :root:not([data-theme="light"]) [data-subject="bio"],:root:not([data-theme="light"])[data-subject="bio"]{--accent:#96D45F;--accent-soft:#A6DA77;--tint:#2C372B;--accent-hover:#A6DA77}
  :root:not([data-theme="light"]) [data-subject="hist"],:root:not([data-theme="light"])[data-subject="hist"]{--accent:#D9AE7A;--accent-soft:#DFBA8E;--tint:#36322E;--accent-hover:#DFBA8E}
}

/* ---------- Основа ---------- */
*{box-sizing:border-box}
.hidden{display:none!important}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grow{flex:1}

/* ---------- Б1: шрифты и шкала ---------- */
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;font-size:16px;line-height:24px}
h1{font-weight:600;font-size:28px;line-height:36px;color:var(--ink)}
h2{font-weight:600;font-size:20px;line-height:28px;color:var(--ink)}
.display{font-weight:600;font-size:40px;line-height:48px;color:var(--ink)}
.lead,.muted{font-weight:400;font-size:14px;line-height:20px;color:var(--muted)}
.small,.hint{font-weight:400;font-size:12px;line-height:16px;color:var(--muted)}
.brand{font-weight:600;font-size:20px;line-height:28px;color:var(--accent)}
.task-text,.statement{font-family:Literata,Georgia,serif;font-weight:400;font-size:18px;line-height:30px;color:var(--ink)}
.task-text.sm{font-size:16px;line-height:26px}

/* ---------- Б2: кнопки ---------- */
button,a.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:10px;font-family:"Golos Text",system-ui,sans-serif;font-weight:600;font-size:16px;line-height:24px;box-sizing:border-box;text-decoration:none;cursor:pointer}
/* Б2.1 primary × default */
button,button.primary,a.button{background:var(--accent);color:var(--on-accent);border:0;padding:0 20px}
/* Б2.2 secondary × default. В разметке стола .quiet — это secondary Figma. */
button.secondary,button.quiet{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:0 20px}
/* Б2.3 quiet Figma × default — новое имя .ghost */
button.ghost{background:transparent;color:var(--accent);border:0;padding:0 12px}
/* Б2.4 danger × default */
button.danger{background:var(--paper);color:var(--bad);border:1px solid var(--bad);padding:0 20px}
/* Б2.5 primary × hover; .is-hover — двойник состояния для образца */
button:hover,button.primary:hover,a.button:hover,button.is-hover,a.button.is-hover{background:var(--accent-hover);color:var(--on-accent);border:0}
/* Б2.6 secondary × hover */
button.secondary:hover,button.quiet:hover,button.secondary.is-hover,button.quiet.is-hover{background:var(--field);color:var(--ink);border:1px solid var(--line)}
/* Б2.7 quiet Figma × hover */
button.ghost:hover,button.ghost.is-hover{background:var(--tint);color:var(--accent);border:0}
/* Б2.8 danger × hover */
button.danger:hover,button.danger.is-hover{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)}
/* Б2.9 все варианты × focus-visible */
button:focus-visible,a.button:focus-visible,button.is-focus,a.button.is-focus{outline:2px solid var(--accent);outline-offset:2px}
/* Б2.10 все варианты × disabled */
button:disabled,button[aria-disabled="true"],a.button[aria-disabled="true"]{opacity:.45;cursor:default}

/* Закрытие модального окна (Б8.2): 44×44, радиус 10, без заливки. */
button.modal-close{position:absolute;top:16px;right:16px;width:44px;min-height:44px;padding:0;border-radius:10px;background:transparent;color:var(--muted);border:0;font-size:24px;line-height:1}
button.modal-close:hover{background:var(--field);color:var(--ink);border:0}

/* ---------- Б3: чипы ---------- */
.chip{display:inline-flex;align-items:center;height:32px;border-radius:16px;padding:0 12px;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}
/* Б3.1 */
.chip{background:var(--field);color:var(--muted);border:1px solid var(--rule)}
/* Б3.2 */
.chip.accent{background:var(--tint);color:var(--accent);border:0}
/* Б3.3 */
.chip.ok{background:var(--ok-bg);color:var(--ok);border:0}
/* Б3.4 */
.chip.warn{background:var(--warn-bg);color:var(--warn);border:0}
/* Б3.5 */
.chip.bad{background:var(--bad-bg);color:var(--bad);border:0}

/* ---------- Б4: баннеры ---------- */
.banner{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:16px;color:var(--ink);font-weight:400;font-size:14px;line-height:20px}
.banner-icon{flex:0 0 24px;width:24px;height:24px}
.banner-title{font-weight:600;font-size:16px;line-height:24px;color:var(--ink);margin:0 0 4px}
/* Б4.1 */
.banner.info{background:var(--tint);border:1px solid var(--line)}
.banner.info .banner-icon{color:var(--accent)}
/* Б4.2 */
.banner.ok{background:var(--ok-bg);border:1px solid var(--ok)}
.banner.ok .banner-icon{color:var(--ok)}
/* Б4.3 */
.banner.warn{background:var(--warn-bg);border:1px solid var(--warn)}
.banner.warn .banner-icon{color:var(--warn)}
/* Б4.4 */
.banner.error{background:var(--bad-bg);border:1px solid var(--bad)}
.banner.error .banner-icon{color:var(--bad)}

/* ---------- Б5: вкладки ---------- */
.tabs{display:flex;gap:4px;margin-bottom:8px}
.tab{display:inline-flex;align-items:center;height:44px;padding:0 16px;font-weight:500;font-size:14px;line-height:20px;background:transparent;cursor:pointer;border:0}
/* Б5.1 */
.tab{color:var(--muted);border-bottom:1px solid var(--rule)}
/* Б5.2 */
.tab.on,.tab[aria-selected="true"]{color:var(--accent);border-bottom:2px solid var(--accent)}

/* ---------- Б6: поля ---------- */
label{display:block;font-weight:500;font-size:14px;line-height:20px;color:var(--ink);margin:12px 0 6px}
.hint{margin-top:6px}
/* Б6.1 default. Флажки и переключатели — не поля: у них своя форма (Б7). */
input:where(:not([type="checkbox"],[type="radio"])),textarea,select{width:100%;height:48px;padding:0 14px;border-radius:8px;background-color:var(--field);color:var(--ink);font-family:"Golos Text",system-ui,sans-serif;font-weight:400;font-size:16px;line-height:24px;border:1px solid var(--line)}
textarea{height:auto;min-height:96px;padding:14px;resize:vertical}
/* Стрелка select: справа, цвет --muted. */
select{appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* Б6.2 focus: рамка 2px без сдвига — отступ на 1px меньше. */
input:where(:not([type="checkbox"],[type="radio"])):focus,textarea:focus,select:focus,input.is-focus,textarea.is-focus,select.is-focus{border:2px solid var(--accent);outline:none;padding-left:13px;padding-right:13px}
select:focus,select.is-focus{padding-right:39px}
textarea:focus,textarea.is-focus{padding:13px}
/* Б6.3 error */
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"],input.is-error,textarea.is-error,select.is-error{border:2px solid var(--bad);padding-left:13px;padding-right:13px}
select[aria-invalid="true"],select.is-error{padding-right:39px}
textarea[aria-invalid="true"],textarea.is-error{padding:13px}
.is-error ~ .hint,[aria-invalid="true"] ~ .hint,.note.bad{color:var(--bad)}
/* Б6.4 disabled */
input:disabled,textarea:disabled,select:disabled{border:1px solid var(--rule);background-color:var(--bg);color:var(--faint);cursor:not-allowed}

.note{color:var(--muted);font-size:14px;line-height:20px;margin-top:8px;min-height:20px}
.note.ok{color:var(--ok)}

/* ---------- Б7: критерий самопроверки ---------- */
.criterion{display:flex;align-items:center;min-height:48px;gap:12px;font-weight:400;font-size:16px;line-height:24px;color:var(--ink)}
.criterion input[type="checkbox"],.criterion .box{appearance:none;flex:0 0 28px;width:28px;height:28px;margin:0;border-radius:8px;background-color:var(--field);border:2px solid var(--line);background-repeat:no-repeat;background-position:center;background-size:18px 18px}
/* Б7.2 отмечен; галочка цвета --on-accent (светлая #FFFFFF, тёмная #101316), линия 2,5px */
.criterion input[type="checkbox"]:checked,.criterion .box.on{background-color:var(--accent);border:2px solid var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-theme="dark"] .criterion input[type="checkbox"]:checked,[data-theme="dark"] .criterion .box.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23101316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .criterion input[type="checkbox"]:checked,:root:not([data-theme="light"]) .criterion .box.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23101316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
}

/* ---------- Б8: карточка, модальное окно, пустое состояние ---------- */
/* Б8.1 */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:24px}
.card + .card{margin-top:16px}
/* Б8.2 */
.modal-content{position:relative;width:90%;max-width:400px;background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:24px}
/* Б8.3 */
.modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;background:color-mix(in srgb,var(--ink) 45%,transparent)}
/* Б8.4 */
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:32px}
.empty-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--tint);color:var(--accent)}
.empty-title{font-weight:600;font-size:20px;line-height:28px;color:var(--ink);margin:0}
.empty-text{font-size:14px;line-height:20px;color:var(--muted);margin:0}

.gate{max-width:520px;margin:14vh auto;text-align:center;padding:26px}
.gate p{color:var(--muted)}