/* ============================================================
   static/css/app.css
   Надстройка над Pico v2 (сборка conditional, тема cyan) — D-51.
   Опирается ТОЛЬКО на переменные Pico: своей палитры нет, иначе
   дашборды разъедутся с сайтом при переключении темы.

   Сюда перенесён весь инлайновый CSS, который до Этапа 3 жил в
   base.html и в пяти шаблонах. Правило теперь ровно одно и в одном
   месте — наслоения «правило есть в двух файлах, побеждает нижнее»
   больше нет.
   ============================================================ */
/* ──────────────────────────────────────────────────────────────
   1 · ТОКЕНЫ
   Опираются на переменные Pico (D-51). Своей палитры нет:
   при смене темы Pico всё едет вместе с сайтом.
   ────────────────────────────────────────────────────────────── */
:root {
  /* фирменный акцент — Cyan 450 */
  --aa-accent:       #059494;
  --aa-accent-rgb:   5, 148, 148;

  /* состояния: решено / ошибка / ждёт / не тронуто */
  --aa-ok:      #029764;  --aa-ok-bg:   rgba(2,151,100,.10);
  --aa-bad:     #d93526;  --aa-bad-bg:  rgba(217,53,38,.09);
  --aa-wait:    #977000;  --aa-wait-bg: rgba(151,112,0,.11);
  --aa-idle:    #6f7887;  --aa-idle-bg: rgba(111,120,135,.09);

  /* линии и поверхности */
  --aa-hair:    var(--pico-muted-border-color);
  --aa-surface: var(--pico-card-background-color);
  --aa-tick:    rgba(111,120,135,.45);

  /* ступени тепловой карты */
  --aa-heat-0: rgba(111,120,135,.10);
  --aa-heat-1: rgba(var(--aa-accent-rgb), .22);
  --aa-heat-2: rgba(var(--aa-accent-rgb), .45);
  --aa-heat-3: rgba(var(--aa-accent-rgb), .70);
  --aa-heat-4: rgba(var(--aa-accent-rgb), .95);

  --aa-gap: 1.1rem;
}

/* ──────────────────────────────────────────────────────────────
   1b · ПЛОТНОСТЬ
   Pico по умолчанию РАЗДУВАЕТ шрифт на широких экранах:
   576px → 106%, 768px → 112.5%, 1024px → 118.75%,
   1280px → 125%, 1536px → 131.25%.
   На мониторе это 20px в основании — отсюда и «три буквы на экран».
   Лестницу гасим и фиксируем один размер на всех ширинах.
   ЭТО ЕДИНСТВЕННАЯ КРУТИЛКА МАСШТАБА: 100% = 16px.
   Мельче — 93.75% (15px). Крупнее — 112.5% (18px).
   ────────────────────────────────────────────────────────────── */
:root, :host { --pico-font-size: 100%; }
@media (min-width: 576px)  { :root, :host { --pico-font-size: 100%; } }
@media (min-width: 768px)  { :root, :host { --pico-font-size: 100%; } }
@media (min-width: 1024px) { :root, :host { --pico-font-size: 100%; } }
@media (min-width: 1280px) { :root, :host { --pico-font-size: 100%; } }
@media (min-width: 1536px) { :root, :host { --pico-font-size: 100%; } }

:root {
  /* Воздух между блоками — больше, чем у Pico по умолчанию.
     Строки при этом плотнее: мельче кегль + тот же интерлиньяж. */
  --pico-spacing: 1.15rem;
  --pico-typography-spacing-vertical: 1.05rem;
  --pico-form-element-spacing-vertical: .5rem;
  --pico-form-element-spacing-horizontal: .7rem;
  --pico-line-height: 1.5;
}

/* Ширина колонки: 60% страницы, по 20% полей слева и справа.

   min-width нужен обязательно. 60% от широкого монитора — это ~1500px,
   и всё хорошо. Но 60% от ноутбучных 1366px — уже 820px, а таблице
   домашек и сетке недели этого впритык. Поэтому колонка не бывает уже
   58rem (928px), а ниже 1160px экрана проценты выключаются совсем
   и работают обычные отступы. */
.container {
  max-width: none;
  width: 60%;
  min-width: 58rem;
  margin-inline: auto;
  padding-inline: 0;
}
.container-fluid { max-width: none; width: auto; min-width: 0; padding-inline: 1rem; }

/* Промежуточная ширина для страниц с сеткой недели: полей меньше,
   чем на обычных страницах, но они есть. container-fluid оставлен
   рисовалке — холсту действительно нужен весь экран. */
.container-wide {
  max-width: none; width: 80%; min-width: 58rem;
  margin-inline: auto; padding-inline: 0;
}

@media (max-width: 1160px) {
  .container, .container-wide { width: auto; min-width: 0; padding-inline: 1rem; }
}

/* Читаемость длинного текста от ширины не зависит: абзацы и разбор
   учителя держим в узкой мере, даже когда страница широкая. */
.measure { max-width: 46rem; }

/* Заголовки — заметно скромнее пиковских 2rem/1.75rem.
   Экран для данных, а не для афиши. */
.pico h1 { --pico-font-size: 1.5rem;  --pico-typography-spacing-top: 2rem; }
.pico h2 { --pico-font-size: 1.25rem; --pico-typography-spacing-top: 1.9rem; }
.pico h3 { --pico-font-size: 1.05rem; --pico-typography-spacing-top: 1.6rem; }
.pico h4 { --pico-font-size: .95rem;  --pico-typography-spacing-top: 1.4rem; }

/* Таблицы: строки плотнее, но с воздухом по бокам */
.pico th, .pico td { padding: .5rem .7rem; }
.pico thead th { font-size: .78rem; letter-spacing: .04em;
                 text-transform: uppercase; color: var(--pico-muted-color); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --aa-accent:  #0ab1b1;   /* cyan-350: на тёмном 450 читается хуже */
    --aa-accent-rgb: 10, 177, 177;
    --aa-ok:   #00b478;  --aa-ok-bg:   rgba(0,180,120,.13);
    --aa-bad:  #f17961;  --aa-bad-bg:  rgba(241,121,97,.12);
    --aa-wait: #d8a100;  --aa-wait-bg: rgba(216,161,0,.13);
    --aa-idle: #969eaf;  --aa-idle-bg: rgba(150,158,175,.10);
    --aa-tick: rgba(150,158,175,.40);
    --aa-heat-0: rgba(150,158,175,.12);
  }
}
[data-theme=dark] {
  --aa-accent:  #0ab1b1;
  --aa-accent-rgb: 10, 177, 177;
  --aa-ok:   #00b478;  --aa-ok-bg:   rgba(0,180,120,.13);
  --aa-bad:  #f17961;  --aa-bad-bg:  rgba(241,121,97,.12);
  --aa-wait: #d8a100;  --aa-wait-bg: rgba(216,161,0,.13);
  --aa-idle: #969eaf;  --aa-idle-bg: rgba(150,158,175,.10);
  --aa-tick: rgba(150,158,175,.40);
  --aa-heat-0: rgba(150,158,175,.12);
}

/* Все цифры — табличными: в таблицах и на плитках колонки
   не пляшут при смене значения. Бесплатно, системным шрифтом. */
.pico table, .tile__value, .bar__num, .stat-num,
.pico time, .num { font-variant-numeric: tabular-nums; }


/* ──────────────────────────────────────────────────────────────
   2 · НАСЛЕДСТВО ЭТАПА 2
   Эти классы уже стоят в шаблонах (только .muted — 73 раза).
   Живут здесь, чтобы <style> из base.html и пяти страниц
   можно было удалить целиком, ничего не переписывая.
   ────────────────────────────────────────────────────────────── */
.muted  { color: var(--pico-muted-color); }
.ok     { color: var(--aa-ok); }
.error  { color: var(--aa-bad); }
.sub    { font-size: .8rem; }
.spacer { margin-left: auto; }

.pico form.inline { display: inline; margin: 0; }
.pico form.inline button { width: auto; margin: 0; }

.warn {
  border-left: 3px solid var(--aa-wait);
  background: var(--aa-wait-bg);
  padding: .55rem .8rem; margin: 1rem 0;
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
}

.badge {
  display: inline-block; padding: .05rem .45rem;
  border-radius: var(--pico-border-radius);
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  background: var(--aa-bad); color: #fff; vertical-align: .1em;
}
.badge-ann { background: var(--aa-ok); }

/* Вкладки. Класс .active оставлен как есть — шаблоны не трогаем. */
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 .9rem;
        border-bottom: 1px solid var(--aa-hair); padding-bottom: .5rem; }
.pico .tabs a {
  padding: .3rem .7rem; border-radius: var(--pico-border-radius);
  text-decoration: none; color: var(--pico-muted-color);
  border: 1px solid transparent; font-size: .92rem;
}
.pico .tabs a:hover { background: var(--aa-idle-bg); color: var(--pico-color); }
.pico .tabs a.active {
  background: var(--aa-accent); color: #fff; border-color: var(--aa-accent);
}

.filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
           margin-bottom: 1rem; }
.pico .filters select, .pico .filters input { width: auto; margin: 0; }
.pico .filters button  { width: auto; margin: 0; }
.pico .filters label   { margin: 0; }

.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1.25rem; }

ul.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.messages li {
  padding: .55rem .8rem; margin-bottom: .5rem;
  border-left: 3px solid var(--aa-idle); background: var(--aa-idle-bg);
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
}
ul.messages li.success { border-color: var(--aa-ok);   background: var(--aa-ok-bg); }
ul.messages li.error   { border-color: var(--aa-bad);  background: var(--aa-bad-bg); color: inherit; }
ul.messages li.warning { border-color: var(--aa-wait); background: var(--aa-wait-bg); }

/* Отрендеренный Markdown (фильтр |md, D-32) */
.md { border-left: 3px solid var(--aa-hair); padding-left: .9rem; margin: 1rem 0; }
.md > :first-child { margin-top: 0; }
.md > :last-child  { margin-bottom: 0; }

/* Загрузчик файлов (homework_uploader.js) */
.file-grid { display: grid; gap: .75rem; margin: 1rem 0;
             grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.file-card { position: relative; border: 1px solid var(--aa-hair);
             border-radius: var(--pico-border-radius); padding: .4rem;
             background: var(--aa-surface); cursor: grab; }
.file-preview { height: 120px; display: flex; align-items: center;
                justify-content: center; overflow: hidden; font-weight: 700; }
.file-preview img { max-width: 100%; max-height: 120px; object-fit: contain; }
.file-caption { font-size: .75rem; overflow-wrap: anywhere; margin-top: .3rem;
                color: var(--pico-muted-color); }
.pico .file-delete {
  position: absolute; top: .25rem; right: .25rem; width: 1.6rem; height: 1.6rem;
  padding: 0; margin: 0; line-height: 1; border: none; border-radius: 50%;
  background: var(--aa-bad); color: #fff; font-size: .9rem;
}
#drop-zone { border: 2px dashed var(--aa-hair); border-radius: .5rem;
             padding: 1.25rem; text-align: center; color: var(--pico-muted-color); }
#drop-zone.over { border-color: var(--aa-accent);
                  background: rgba(var(--aa-accent-rgb), .07); }


/* ──────────────────────────────────────────────────────────────
   3 · ШКАЛА — сквозной элемент проекта
   Каждое число стоит на шкале с рисками: видно не только
   «сколько», но и «где это относительно цели».
   Информирует, но не подгоняет (D-57).
   ────────────────────────────────────────────────────────────── */
.scale {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--aa-idle-bg); overflow: hidden;
}
.scale__fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--aa-accent); border-radius: 3px;
}
.scale__fill.is-ok   { background: var(--aa-ok); }
.scale__fill.is-bad  { background: var(--aa-bad); }
.scale__fill.is-idle { background: var(--aa-idle); }
/* риски на четвертях — «приборная» разметка */
.scale::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to right,
      transparent 0, transparent calc(25% - 1px),
      var(--aa-tick) calc(25% - 1px), var(--aa-tick) 25%);
}
.scale--plain::after { content: none; }
.scale--tall { height: 9px; border-radius: 4px; }
.scale--tall .scale__fill { border-radius: 4px; }


/* ──────────────────────────────────────────────────────────────
   4 · ПЛИТКИ ДАШБОРДА
   ────────────────────────────────────────────────────────────── */
.tiles {
  display: grid; gap: var(--aa-gap); margin: 1rem 0 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tile {
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
  background: var(--aa-surface); padding: .85rem .95rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.tile__label {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--pico-muted-color); font-weight: 600;
}
.tile__value {
  font-size: 2rem; line-height: 1.05; font-weight: 600;
  letter-spacing: -.02em; display: flex; align-items: baseline; gap: .3rem;
}
.tile__unit { font-size: .85rem; font-weight: 400; color: var(--pico-muted-color);
              letter-spacing: 0; }
.tile__note { font-size: .78rem; color: var(--pico-muted-color); }
.tile--accent .tile__value { color: var(--aa-accent); }
.tile--ok     .tile__value { color: var(--aa-ok); }


/* ──────────────────────────────────────────────────────────────
   4b · ПАНЕЛЬ ПОД ГРАФИК
   Рамка, в которую садится что угодно: инлайновый SVG, canvas
   Chart.js или готовый PNG. Содержимое рамке безразлично —
   поэтому движок графиков можно выбрать позже и поменять потом.
   ────────────────────────────────────────────────────────────── */
.panels {
  display: grid; gap: var(--aa-gap); margin: 1.1rem 0 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.panels--wide { grid-template-columns: 1fr; }
.panel {
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
  background: var(--aa-surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.panel__head {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .8rem .5rem; border-bottom: 1px solid var(--aa-hair);
}
.panel__title { font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
.panel__meta  { font-size: .75rem; color: var(--pico-muted-color); margin-left: auto; }
.panel__body  { padding: .8rem; flex: 1 1 auto; }
.panel__body > svg, .panel__body > img { display: block; width: 100%; height: auto; }
.panel__foot  { padding: .1rem .8rem .7rem; font-size: .75rem;
                color: var(--pico-muted-color); }

/* Оси и сетка графиков — одинаковые для любого движка */
.chart .grid  { stroke: var(--aa-tick); stroke-width: .5; }
.chart .axis  { stroke: var(--aa-hair); stroke-width: 1; }
.chart .lbl   { fill: var(--pico-muted-color); font-size: 7px;
                font-family: system-ui; }
.chart .bar   { fill: var(--aa-accent); }
.chart .bar-2 { fill: rgba(var(--aa-accent-rgb), .35); }
.chart .bar-ok  { fill: var(--aa-ok); }
.chart .bar-bad { fill: var(--aa-bad); }
.chart .bar-idle{ fill: var(--aa-idle-bg); }
.chart .line  { fill: none; stroke: var(--aa-accent); stroke-width: 1.6;
                stroke-linejoin: round; stroke-linecap: round; }
.chart .area  { fill: rgba(var(--aa-accent-rgb), .12); stroke: none; }
.chart .dot   { fill: var(--aa-accent); }

/* Заглушка «здесь будет картинка с сервера» */
.panel__png {
  aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--aa-idle-bg); color: var(--pico-muted-color);
  font-size: .78rem; border-radius: var(--pico-border-radius);
}

/* ──────────────────────────────────────────────────────────────
   5 · ПОЛОСЫ ПО ТЕМАМ
   ────────────────────────────────────────────────────────────── */
.bars { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0 1.5rem; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem;
       align-items: baseline; }
.bar__name { font-size: .95rem; }
.bar__name small { color: var(--pico-muted-color); }
.bar__num  { font-size: .82rem; color: var(--pico-muted-color); white-space: nowrap; }
.bar .scale { grid-column: 1 / -1; }
.bar__hint { grid-column: 1 / -1; font-size: .76rem; color: var(--pico-muted-color); }


/* ──────────────────────────────────────────────────────────────
   6 · ТЕПЛОВАЯ КАРТА АКТИВНОСТИ
   CSS-грид из <div>, без плагинов (architecture §2).
   ────────────────────────────────────────────────────────────── */
.heat { display: flex; gap: .6rem; align-items: flex-start;
        overflow-x: auto; padding-bottom: .3rem; }
.heat__days { display: grid; grid-auto-flow: row; grid-template-rows: repeat(7, 13px);
              gap: 3px; font-size: .62rem; color: var(--pico-muted-color);
              padding-top: 0; }
.heat__days span { line-height: 13px; }
.heat__grid { display: grid; grid-auto-flow: column;
              grid-template-rows: repeat(7, 13px); gap: 3px; }
.heat__cell { width: 13px; height: 13px; border-radius: 2px;
              background: var(--aa-heat-0); }
.heat__cell[data-level="1"] { background: var(--aa-heat-1); }
.heat__cell[data-level="2"] { background: var(--aa-heat-2); }
.heat__cell[data-level="3"] { background: var(--aa-heat-3); }
.heat__cell[data-level="4"] { background: var(--aa-heat-4); }
.heat__legend { display: flex; align-items: center; gap: .35rem;
                font-size: .74rem; color: var(--pico-muted-color); margin-top: .6rem; }
.heat__legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }


/* ──────────────────────────────────────────────────────────────
   7 · КАРТОЧКА ЗАДАЧИ (решалка, шаг 6)
   ────────────────────────────────────────────────────────────── */
.qcard { border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
         background: var(--aa-surface); padding: 1rem 1.1rem 1.15rem; margin: 1rem 0; }
.qcard__top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
              margin-bottom: .8rem; }
.qcard__pos { font-size: .78rem; color: var(--pico-muted-color);
              letter-spacing: .04em; }
.qcard__fig { margin: 0 0 1rem; border: 1px solid var(--aa-hair);
              border-radius: var(--pico-border-radius); overflow: hidden;
              background: var(--pico-code-background-color); }
.qcard__fig img, .qcard__fig svg { display: block; width: 100%; height: auto; }
.qcard__answer { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.pico .qcard__answer input { margin: 0; flex: 1 1 12rem; }
.pico .qcard__answer button { margin: 0; width: auto; flex: 0 0 auto; }

.verdict { display: flex; gap: .6rem; margin-top: 1rem; padding: .7rem .85rem;
           border-radius: var(--pico-border-radius); border-left: 3px solid var(--aa-idle);
           background: var(--aa-idle-bg); }
.verdict__mark { font-weight: 700; flex: 0 0 auto; }
.verdict__body { min-width: 0; }
.verdict__body p:last-child { margin-bottom: 0; }
.verdict.is-ok  { border-color: var(--aa-ok);  background: var(--aa-ok-bg); }
.verdict.is-ok  .verdict__mark { color: var(--aa-ok); }
.verdict.is-bad { border-color: var(--aa-bad); background: var(--aa-bad-bg); }
.verdict.is-bad .verdict__mark { color: var(--aa-bad); }

/* индикатор «3 из 10» */
.stepper { display: flex; gap: 3px; align-items: center; }
.stepper i { width: 15px; height: 4px; border-radius: 2px;
             background: var(--aa-idle-bg); display: block; }
.stepper i.is-ok   { background: var(--aa-ok); }
.stepper i.is-bad  { background: var(--aa-bad); }
.stepper i.is-here { background: var(--aa-accent); }


/* ──────────────────────────────────────────────────────────────
   8 · ЧИПЫ: аудитории, темы, сложность
   ────────────────────────────────────────────────────────────── */
.chips { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem; font-size: .76rem; line-height: 1.6;
  border: 1px solid var(--aa-hair); border-radius: 999px;
  color: var(--pico-muted-color); background: transparent; white-space: nowrap;
}
.chip--audience { border-color: rgba(var(--aa-accent-rgb), .45);
                  color: var(--aa-accent); }
.chip--ok   { border-color: var(--aa-ok);   color: var(--aa-ok);   background: var(--aa-ok-bg); }
.chip--bad  { border-color: var(--aa-bad);  color: var(--aa-bad);  background: var(--aa-bad-bg); }
.chip--wait { border-color: var(--aa-wait); color: var(--aa-wait); background: var(--aa-wait-bg); }

/* Оценка за работу. 5 и 4 — зелёная, 3 — жёлтая, 2 и 1 — красная.
   Не заливка, а рамка с подкрашенным фоном: на бумаге и в тёмной теме
   читается одинаково, и в таблице пять таких подряд не пестрят. */
.grade {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5em; height: 1.5em; padding: 0 .25em;
  border: 1px solid currentColor; border-radius: var(--pico-border-radius);
  font-weight: 700; font-size: .82rem; line-height: 1;
  font-variant-numeric: tabular-nums; vertical-align: -.15em;
}
.grade--5, .grade--4 { color: var(--aa-ok);   background: var(--aa-ok-bg); }
.grade--3            { color: var(--aa-wait); background: var(--aa-wait-bg); }
.grade--2, .grade--1 { color: var(--aa-bad);  background: var(--aa-bad-bg); }
.grade--none { color: var(--aa-idle); background: transparent;
               border-style: dashed; font-weight: 400; }

/* Крупный вариант — на странице проверки работы */
.grade--lg { min-width: 2.1em; height: 2.1em; font-size: 1.15rem; }

/* сложность — три засечки, а не звёздочки */
.diff { display: inline-flex; gap: 2px; vertical-align: -1px; }
.diff i { width: 4px; height: 11px; border-radius: 1px; background: var(--aa-idle-bg); display: block; }
.diff i.on { background: var(--aa-accent); }


/* ──────────────────────────────────────────────────────────────
   9 · УЧИТЕЛЬ: «требуют внимания» + спарклайны
   ────────────────────────────────────────────────────────────── */
.attention { border: 1px solid var(--aa-hair); border-left: 3px solid var(--aa-wait);
             border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
             background: var(--aa-surface); padding: .9rem 1rem; margin: 1rem 0 1.5rem; }
.attention h3 { margin: 0 0 .6rem; font-size: 1rem; }
.attention ul { margin: 0; padding-left: 1.1rem; }
.attention li { margin-bottom: .3rem; font-size: .93rem; }
.attention li:last-child { margin-bottom: 0; }

.spark { display: block; width: 84px; height: 22px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--aa-accent); stroke-width: 1.5;
                  stroke-linejoin: round; stroke-linecap: round; }
.spark .base { stroke: var(--aa-tick); stroke-width: 1; }

.pico table.compact th, .pico table.compact td { padding: .45rem .6rem; font-size: .92rem; }
.pico table.compact th { font-size: .74rem; letter-spacing: .05em;
                         text-transform: uppercase; color: var(--pico-muted-color); }


/* ──────────────────────────────────────────────────────────────
   10 · МЕЛОЧИ
   ────────────────────────────────────────────────────────────── */
.empty { border: 1px dashed var(--aa-hair); border-radius: var(--pico-border-radius);
         padding: 1.5rem; text-align: center; color: var(--pico-muted-color); }
.rowline { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.hair { border: 0; border-top: 1px solid var(--aa-hair); margin: 2rem 0; }

/* Шапка сайта */
.pico > header.site, header.site {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--aa-hair);
  padding: .9rem 0 .75rem; margin-bottom: 1.5rem;
}
header.site .brand { font-weight: 600; letter-spacing: -.01em; }
header.site .brand b { color: var(--aa-accent); }
.pico header.site a { text-decoration: none; font-size: .93rem;
                      color: var(--pico-muted-color); }
.pico header.site a:hover { color: var(--aa-accent); }
.pico header.site a.is-current { color: var(--pico-color); font-weight: 600; }

@media (max-width: 640px) {
  .tile__value { font-size: 1.6rem; }
  .heat__cell  { width: 11px; height: 11px; }
  .heat__grid, .heat__days { grid-template-rows: repeat(7, 11px); }
}

/* ──────────────────────────────────────────────────────────────
   11 · БАЗА ВНЕ .pico
   Страницы, которым Pico противопоказан (рисовалка пометок,
   сетка недели), класса .pico не получают — см. D-51 и блок
   body_class в base.html. Чтобы они не остались с голыми
   браузерными кнопками, сюда перенесён ровно тот CSS, который
   раньше стоял инлайном в base.html.
   Селектор body:not(.pico) исключает пересечение с Pico, а обёртка
   :where() обнуляет его вес. Без неё правило :where(body:not(.pico)) td
   (вес 0,1,2) перебивало .mini td (вес 0,1,1) из schedule.css —
   и мини-календарь получал вместо padding:1px целые .4rem,
   отчего числа месяца ломались пополам. Тот же приём использует
   сам Pico: базовые правила ни с чем не конкурируют.
   ────────────────────────────────────────────────────────────── */
:where(body:not(.pico)) button {
  padding: .45rem 1rem; cursor: pointer; font: inherit;
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
  background: var(--aa-surface); color: var(--pico-color);
}
:where(body:not(.pico)) button:hover { border-color: var(--aa-accent); color: var(--aa-accent); }
:where(body:not(.pico)) label { display: block; margin-top: .8rem; font-weight: 600; }
:where(body:not(.pico)) input[type=text], :where(body:not(.pico)) input[type=password],
:where(body:not(.pico)) input[type=datetime-local], :where(body:not(.pico)) input[type=number],
:where(body:not(.pico)) select, :where(body:not(.pico)) textarea {
  padding: .45rem; width: 100%; box-sizing: border-box; font: inherit;
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
  background: var(--aa-surface); color: var(--pico-color);
}
:where(body:not(.pico)) table { border-collapse: collapse; width: 100%; }
:where(body:not(.pico)) th, :where(body:not(.pico)) td {
  text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--aa-hair);
}
:where(body:not(.pico)) .tabs a {
  padding: .3rem .7rem; border-radius: var(--pico-border-radius);
  text-decoration: none; color: var(--pico-muted-color); border: 1px solid transparent;
}
:where(body:not(.pico)) .tabs a.active {
  background: var(--aa-accent); color: #fff; border-color: var(--aa-accent);
}


/* ──────────────────────────────────────────────────────────────
   12 · СТРАНИЦЫ РАБОТ
   Перенесено из teach/submission_review.html, homework/detail.html
   и teach/homework_form.html — их блоки <style> удалены целиком.
   ────────────────────────────────────────────────────────────── */
.pages img, .big-pages img {
  display: block; width: 100%; height: auto; margin: 0 0 .4rem;
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
}
.page-block { margin-bottom: 2rem; }
.page-num   { font-weight: 700; margin-bottom: .3rem; }
.page-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
                margin-top: .4rem; }
.task-files img, .task-strip img {
  display: block; max-width: 100%; height: auto; margin: .6rem 0;
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
}
.review-box { border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
              padding: 1rem; margin: 1.5rem 0; background: var(--aa-surface); }

/* Кнопка «Разметить» — ссылка, поэтому Pico её кнопкой не считает */
.btn-draw {
  display: inline-block; padding: .3rem .8rem; border-radius: var(--pico-border-radius);
  background: var(--aa-accent); color: #fff; text-decoration: none; font-size: .9rem;
}
.btn-draw:hover { background: var(--pico-primary-hover-background); color: #fff; }

/* details/summary: селектор с .pico обязателен — у Pico своё
   оформление аккордеона той же силы, и без класса оно победит. */
.pico details, body:not(.pico) details {
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
  padding: .6rem .9rem; margin: 1rem 0;
}
.pico summary, body:not(.pico) summary { cursor: pointer; font-weight: 600; }
.pico details[open] summary { margin-bottom: .6rem; }


/* ──────────────────────────────────────────────────────────────
   13 · СТРАНИЦА ВХОДА
   Отдельная раскладка в духе экрана входа Google: карточка по центру,
   слева логотип и заголовок, справа поля. Общая шапка сайта на ней
   скрыта — до входа в ней всё равно нет ни одной ссылки, а логотип
   в карточке дублировал бы её.
   ────────────────────────────────────────────────────────────── */
.auth-page header.site { display: none; }

.auth { display: grid; place-items: center; min-height: 78vh; }

.auth__card {
  width: 100%; max-width: 44rem;
  border: 1px solid var(--aa-hair); border-radius: 1.5rem;
  background: var(--aa-surface);
  padding: 2.75rem 3rem;
}

.auth__grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem;
  align-items: center;
}

/* Селектор обязан начинаться с .pico: у Pico есть правило
   .pico img { height: auto } весом 0,1,1, и голый .auth__logo (0,1,0)
   ему проигрывает — картинка растягивалась до натурального размера.
   Размер задаём по ШИРИНЕ: логотип вытянутый, и высота у него
   получается сама, какой бы ни была исходная картинка. */
.pico .auth__logo {
  display: block; width: 100%; max-width: 13rem; height: auto;
  margin: 0 0 1.4rem;
}

.pico .auth__title { font-size: 1.7rem; margin: 0 0 .5rem; letter-spacing: -.02em; }
.auth__sub { color: var(--pico-muted-color); font-size: .95rem; margin: 0; }

/* Поля: подпись сверху, как в остальной форме проекта */
.pico .auth__form label { margin-bottom: .15rem; font-weight: 600; font-size: .9rem; }
.pico .auth__form input { margin-bottom: 1rem; }

.auth__actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1.25rem; margin-top: 1.75rem;
}
.pico .auth__actions button {
  width: auto; margin: 0; border-radius: 999px; padding: .55rem 1.9rem;
}

.auth__foot {
  width: 100%; max-width: 44rem; margin: 1.1rem auto 0;
  padding: 0 3rem; font-size: .85rem; color: var(--pico-muted-color);
}

.auth__error {
  border-left: 3px solid var(--aa-bad); background: var(--aa-bad-bg);
  padding: .5rem .75rem; margin: 0 0 1rem;
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
  font-size: .9rem;
}

@media (max-width: 720px) {
  .auth { min-height: 0; padding-top: 2rem; }
  .auth__card { padding: 1.75rem; border-radius: 1rem; }
  .auth__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .pico .auth__logo { max-width: 10rem; margin-bottom: 1rem; }
  .auth__foot { padding: 0 .25rem; }
}


/* ──────────────────────────────────────────────────────────────
   14 · ЭКРАН РАЗДЕЛОВ И ТЕМ (Этап 3, шаг 2)
   Строки таблицы — это формы. Поля внутри ячеек должны быть
   компактными, иначе Pico растянет каждое на всю ширину столбца.
   ────────────────────────────────────────────────────────────── */
.pico table.compact input,
.pico table.compact select {
  margin: 0; width: 100%; min-width: 0;
  padding: .3rem .45rem; font-size: .9rem; height: auto;
}
.pico table.compact button {
  width: auto; margin: 0; padding: .3rem .7rem; font-size: .85rem;
}
.pico table.compact td { vertical-align: middle; }
.pico table.compact td form.inline { display: inline-block; margin-left: .35rem; }

/* Строка «создать» — поля рядом, а не в столбик */
.pico .filters input[type=text],
.pico .filters input[type=number],
.pico .filters select { margin: 0; width: auto; }

/* ──────────────────────────────────────────────────────────────
   13 · БАНК ЗАДАЧ (Этап 3, шаг 4)
   Конвейер наполнения и список задач. Компоненты .qcard, .chips,
   .chip--audience и .diff заведены раньше, на шаге 1, — здесь
   только то, чего в макете не было.
   Все селекторы компонентные и начинаются с .pico там, где спорят
   с Pico за один и тот же тег (D-62).
   ────────────────────────────────────────────────────────────── */

/* Шапка партии: раздел · тема · аудитории одной полосой */
.qb-header-strip {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  border: 1px solid var(--aa-hair); border-left: 3px solid var(--aa-accent);
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
  background: var(--aa-surface);
  padding: .55rem .8rem; margin-bottom: 1.2rem; font-size: .92rem;
}

/* Форма шапки: поля не на всю ширину экрана — читать длинные строки
   выбора неудобно, а select всё равно ужимается по содержимому. */
.qb-header { max-width: 34rem; }

/* Уже заведённые в этой партии */
.qb-saved { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.2rem; }
.qb-saved__row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .35rem .6rem; font-size: .88rem;
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
  background: var(--aa-surface);
}
.qb-saved__answers { overflow-wrap: anywhere; }

/* Зона вставки скриншота. Отдельный класс, а не #drop-zone: тот занят
   готовым виджетом homework_uploader.js, и два разных скрипта не должны
   спорить за один идентификатор на одной странице. */
.qb-drop {
  border: 2px dashed var(--aa-hair); border-radius: .5rem;
  padding: .9rem; text-align: center; margin-bottom: .8rem;
}
.qb-drop.over { border-color: var(--aa-accent);
                background: rgba(var(--aa-accent-rgb), .07); }
.pico .qb-drop input[type=file] { margin: 0 auto; width: auto; }

/* Поля конвейера */
.qb-fields { margin-top: .4rem; }
.pico .qb-fields p { margin-bottom: .9rem; }
.qb-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
          margin-bottom: .9rem; }
.pico .qb-row label { margin: 0; }
.pico .qb-row input, .pico .qb-row select { margin: 0; width: auto; }
.qb-check { display: inline-flex; align-items: center; gap: .35rem; }
.pico .qb-check input { margin: 0; }
.qb-narrow  { max-width: 6.5rem; }
.qb-narrow2 { max-width: 9rem; }

.qb-actions { display: flex; gap: .6rem; align-items: center;
              flex-wrap: wrap; margin-top: 1rem; }
.pico .qb-actions button, .pico .qb-actions a[role=button] { width: auto; margin: 0; }

/* Кликабельный чип аудитории. Это <button>, поэтому его надо явно
   отвязать от пиковского оформления кнопок — иначе он растянется
   на всю ширину и станет заливным. */
.pico .chip--btn {
  cursor: pointer; width: auto; margin: 0; line-height: inherit;
  font-family: inherit;
}
.pico .chip--btn:hover { border-color: var(--aa-accent); color: var(--aa-accent);
                         background: rgba(var(--aa-accent-rgb), .10); }

/* Миниатюра условия в списке задач */
.qthumb {
  display: block; width: 4.5rem; height: 3.2rem; object-fit: cover;
  border: 1px solid var(--aa-hair); border-radius: var(--pico-border-radius);
}
.pico table.compact .chips { gap: .25rem; }
.pico table.compact form.inline button { padding: .15rem .5rem; font-size: .78rem; }


/* ──────────────────────────────────────────────────────────────
   15 · ТРЕНАЖЁР УЧЕНИКА (Этап 3, шаг 6)
   Основное здесь уже есть с шага 1: .qcard, .verdict, .stepper,
   .scale, .chip. Ниже — только то, чего в макете не было,
   и мелкие поправки для узкого экрана.
   Селекторы, спорящие с Pico за один и тот же тег, начинаются
   с .pico (D-62). !important не используется.
   ────────────────────────────────────────────────────────────── */

/* Полоса состояния захода — та же деталь, что шапка партии
   у учителя, поэтому и класс тот же. Здесь ей нужен только
   раздвигающий промежуток между областью и индикатором. */
.qb-header-strip .spacer { flex: 1 1 auto; }

/* Условие задачи. Картинка идёт во всю ширину карточки: рукопись
   и формулы на уменьшенной копии нечитаемы (та же логика, что D-31).
   max-height страхует от вертикального скриншота на весь экран —
   без неё поле ответа уезжает за нижний край, и ученик его не находит. */
.qcard__fig img {
  max-height: 70vh; object-fit: contain; background: var(--aa-surface);
}

/* Поле ответа — крупнее обычного: это главный элемент страницы,
   и попадать в него на телефоне надо пальцем, а не курсором. */
.pico .qcard__answer input {
  font-size: 1.15rem; padding: .6rem .75rem;
  font-variant-numeric: tabular-nums;
}
.pico .qcard__answer button { padding: .6rem 1.4rem; font-size: 1rem; }

/* Разбор внутри вердикта не должен начинаться с отступа: у .md
   первый абзац уже отбит, и вместе получается дыра. */
.verdict .md > :first-child { margin-top: 0; }
.verdict .md > :last-child  { margin-bottom: 0; }

/* Итоговая таблица захода: колонка ответа может быть длинной строкой
   без пробелов, и без переноса она растянет таблицу за край экрана. */
.pico table.compact td { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* На телефоне поле ответа и кнопка встают в столбик: рядом они
     сжимаются до нечитаемого, а поле ответа — главный элемент. */
  .pico .qcard__answer input,
  .pico .qcard__answer button { flex: 1 1 100%; width: 100%; }
  .qcard__fig img { max-height: 60vh; }
  .stepper i { width: 10px; }
}

/* ============================================================
   ЭТАП 3, ШАГ 9 · Конспекты.

   Только новые классы с префиксом .note. Ни одного селектора по тегу
   и ни одной правки существующих правил — то есть D-62 (специфичность,
   сломавшая когда-то мини-календарь) здесь не при чём по построению.
   ============================================================ */
.notes { display: flex; flex-direction: column; gap: .55rem; margin: 1rem 0; }

.note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .9rem;
  align-items: start;
  border: 1px solid var(--aa-hair);
  border-radius: var(--pico-border-radius);
  padding: .7rem .9rem;
}
/* Черновик отличается от опубликованного одной вертикальной чертой слева.
   Не заливкой: в списке из двадцати карточек заливка пестрит, а черта
   читается и в тёмной теме, и на распечатке. */
.note--draft { border-left: 3px solid var(--aa-wait); }
.note--nofile { border-left: 3px solid var(--aa-bad); }

.note__title { grid-column: 1; margin: 0; font-size: 1rem; line-height: 1.35; }
.note__title a { text-decoration: none; }
.note__meta  { grid-column: 1; display: flex; gap: .5rem; flex-wrap: wrap;
               align-items: center; font-size: .8rem;
               color: var(--pico-muted-color); margin: .25rem 0 0; }
.note__desc  { grid-column: 1; margin: .35rem 0 0; font-size: .88rem;
               color: var(--pico-muted-color); }
.note__desc > :first-child { margin-top: 0; }
.note__desc > :last-child  { margin-bottom: 0; }

/* Кнопки прижаты вправо и занимают всю высоту карточки: так они
   не прыгают по вертикали, когда у одной карточки есть описание,
   а у соседней нет. */
.note__actions { grid-column: 2; grid-row: 1 / span 4;
                 display: flex; gap: .4rem; align-items: center;
                 flex-wrap: wrap; justify-content: flex-end; }

/* Плашка с данными о файле на странице правки. */
.note-file { border: 1px solid var(--aa-hair);
             border-radius: var(--pico-border-radius);
             padding: .7rem .9rem; margin: .8rem 0; }
.note-file__row { display: flex; gap: .8rem; align-items: center;
                  flex-wrap: wrap; }

@media (max-width: 640px) {
  /* На телефоне кнопки уезжают под текст: рядом с заголовком им места нет,
     а сжатые до иконок они перестают быть понятными. */
  .note { grid-template-columns: 1fr; }
  .note__actions { grid-column: 1; grid-row: auto;
                   justify-content: flex-start; margin-top: .5rem; }
}

/* Заголовок раздела в ученическом списке конспектов (шаг 10).
   Отбивка сверху больше, чем снизу: так группа читается как «шапка
   и её содержимое», а не как строка между двумя одинаковыми зазорами. */
.notes-group {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pico-muted-color);
  margin: 1.8rem 0 .1rem;
}
.notes-group:first-of-type { margin-top: 1rem; }