/* Общая тема «тетрадь»: шрифты, палитра и базовые элементы для всех страниц сайта.
   Подключается первой, дальше app.css и стили конкретных страниц берут цвета отсюда.
   Идея: бумага в клетку, синяя ручка, красная ручка учителя, жёлтый маркер.
   Две схемы: светлая (по умолчанию) и тёмная (html[data-scheme="dark"]). Схему выставляет static/js/theme-init.js
   ещё до отрисовки страницы. Новый цвет добавляется в ОБА блока ниже, в стилях страниц #hex писать не нужно.
   Класс .keep-light возвращает светлую палитру внутри тёмной схемы (доска: штрихи на ней заданы конкретными цветами). */

@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/literata-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/literata-latin-wght-normal.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:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/golos-text-latin-wght-normal.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:"Bad Script";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bad-script-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:"Bad Script";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bad-script-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root,.keep-light{
  color-scheme:light;
  /* бумага и линейки */
  --paper:#F4F7FB; --paper-2:#E8EFF8; --grid:#D3E0F0; --grid-line:rgba(211,224,240,.55);
  --bg:var(--paper); --card:#fff; --field:#fff;
  --inset:#EEF3FA;               /* вдавленные панели, подложки */
  --raised:#E6EDF8;              /* круглые кнопки, неактивные чипы */
  --raised-2:#D6E1F3;            /* наведение на них */
  --line:#C6D4E7; --line-2:#DDE6F2; --line-3:#9FB2D3;
  /* текст */
  --ink:#16203B; --ink-2:#48526D; --muted:#56617D; --placeholder:#7C879F;
  /* ручки */
  --blue:#2342C7; --blue-d:#1A33A3; --accent:var(--blue); --accent-d:var(--blue-d); --accent-2:#5B3F86;
  --red:#D3342A; --danger:#C62F2F; --danger-d:#A82424;
  --hi:#FFE56B; --night:#13204A; --cover:#13204A;
  /* текст на закрашенных кнопках и значках */
  --on-accent:#fff; --on-accent-2:#fff; --on-ink:#fff; --on-ok:#fff; --on-danger:#fff; --on-red:#fff; --on-hi:#16203B;
  /* статусы: фон, текст на нём, линия */
  --ok:#1F6B52; --ok-dot:#2FB872; --ok-bg:#DDF3E8; --ok-ink:#17543F; --ok-line:#9ED6BC;
  --bad-bg:#FBE4E1; --bad-ink:#9E2420; --bad-line:#EDB3AD; --bad-hover:#F6D2CD;
  --warn:#8F5A0F; --warn-bg:#FFF1BF; --warn-ink:#7A4E0A; --warn-line:#E0B72B; --warn-edge:#EBCF7A;
  --info-bg:#E3EBFB; --info-ink:#1E3A9E; --info-line:#C4D3F3;
  --mine:#DCE6FB;                /* свои сообщения в чате */
  /* прозрачные слои */
  --scrim:rgba(19,32,74,.62); --glass:rgba(255,255,255,.96); --topbar-bg:rgba(244,247,251,.94);
  --ring:rgba(35,66,199,.18); --ring-2:rgba(35,66,199,.35);
  --wash:rgba(22,32,59,.05); --wash-2:rgba(22,32,59,.12); --wash-blue:rgba(35,66,199,.05);
  --today:rgba(255,229,107,.16); --ev-line:#9DB3FF; --ev-ok-line:#7FD3AE;
  /* тени */
  --shadow:0 1px 0 rgba(22,32,59,.04),0 14px 26px -20px rgba(22,32,59,.45);
  --shadow-pop:0 18px 50px -12px rgba(19,32,74,.38);
}
:root[data-scheme="dark"],.keep-dark{
  color-scheme:dark;
  --paper:#0F1630; --paper-2:#151D3D; --grid:#1E2850; --grid-line:rgba(120,140,210,.09);
  --bg:var(--paper); --card:#171F45; --field:#111A3B;
  --inset:#121A3A; --raised:#232F62; --raised-2:#2D3B78;
  --line:#2D3B70; --line-2:#222D5C; --line-3:#4A5A97;
  --ink:#E8ECFF; --ink-2:#C3CCEB; --muted:#9EAAD4; --placeholder:#7F8BB5;
  --blue:#8FA6FF; --blue-d:#B3C2FF; --accent:var(--blue); --accent-d:var(--blue-d); --accent-2:#7C5CC4;
  --red:#FF7B72; --danger:#FF6B6B; --danger-d:#FF9B9B;
  --hi:#FFE56B; --night:#0A1029; --cover:#223076;
  --on-accent:#0E1736; --on-accent-2:#fff; --on-ink:#0F1630; --on-ok:#062A1D; --on-danger:#2B0A0A; --on-red:#2B0A0A; --on-hi:#16203B;
  --ok:#5FD6A2; --ok-dot:#2FB872; --ok-bg:#12382C; --ok-ink:#8FE5BF; --ok-line:#2A6B52;
  --bad-bg:#43191E; --bad-ink:#FFA8A0; --bad-line:#7A3036; --bad-hover:#5A2229;
  --warn:#F0C36A; --warn-bg:#3A3010; --warn-ink:#F6DC8A; --warn-line:#B8901F; --warn-edge:#6B5A1E;
  --info-bg:#1B2A63; --info-ink:#B8C7FF; --info-line:#34459B;
  --mine:#22388C;
  --scrim:rgba(3,6,18,.72); --glass:rgba(23,31,69,.96); --topbar-bg:rgba(15,22,48,.94);
  --ring:rgba(143,166,255,.28); --ring-2:rgba(143,166,255,.5);
  --wash:rgba(255,255,255,.06); --wash-2:rgba(255,255,255,.14); --wash-blue:rgba(143,166,255,.08);
  --today:rgba(143,166,255,.10); --ev-line:#4E66C9; --ev-ok-line:#1F8A63;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 14px 26px -20px rgba(0,0,0,.85);
  --shadow-pop:0 18px 50px -12px rgba(0,0,0,.75);
}
:root{
  /* шрифты */
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Bad Script","Segoe Script","Comic Sans MS",cursive;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* скругления */
  --r-card:14px;
}

html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg);color:var(--ink)}
body{font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--hi);color:var(--on-hi)}
a{color:var(--blue)}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line)}

/* Кабинет: тетрадный лист за карточками. В комнате урока фон ровный, там важнее видео и доска. */
body{min-height:100vh;min-height:100dvh;background-color:var(--paper);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:28px 28px;background-position:-1px -1px}
body:has(.tm){background-image:none}

/* Заголовки страниц: гарнитура с засечками и красная «волна» под названием, как у логотипа. */
main h1,main h2,main h3{font-family:var(--serif);font-weight:650;letter-spacing:-.01em;color:var(--ink)}
main h1{line-height:1.15}
.tm h1,.tm h2,.tm h3,.tm-top h1,.chat h2,.dm h3{font-family:var(--sans);letter-spacing:0}
html:not(.site) main h1:not(.no-squiggle)::after{content:"";display:block;width:64px;height:8px;margin-top:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M1 5.5c9-4 15 2 24-1.2s17 2.2 26-.8c4-1.2 8-.6 12 .2' fill='none' stroke='%23D3342A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center/64px 8px}
.tm h1::after{content:none !important}
html[data-scheme="dark"]:not(.site) main h1:not(.no-squiggle)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M1 5.5c9-4 15 2 24-1.2s17 2.2 26-.8c4-1.2 8-.6 12 .2' fill='none' stroke='%23FF7B72' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}


/* Рукописная заметка (жёлтый стикер): подсказки и пояснения */
.note-hi{display:block;padding:12px 16px;background:var(--hi);color:var(--on-hi);border-radius:3px;box-shadow:0 10px 16px -14px rgba(22,32,59,.55)}

/* Плавная смена схемы: класс ставится на 300 мс только в момент переключения */
html.scheme-anim,html.scheme-anim *,html.scheme-anim *::before,html.scheme-anim *::after{
  transition:background-color .28s,color .28s,border-color .28s,box-shadow .28s,fill .28s,stroke .28s !important}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  html.scheme-anim,html.scheme-anim *{transition:none !important}
}