/* style-10-teacher-screens.css — часть бывшего style.css (распил 22.10.2026): учительский ПК, перенос урока, ростер, перевод года, статистика, отчёт родителю.
   Файлы style-NN-*.css — ОДИН каскад: index.html подключает их подряд и по номерам, порядок значим
   (правило ниже по каскаду перебивает равное выше). Стережёт tools/check.js. */
  /* ===== TEACHER PC LAYOUT ("big terminal") ===== */
  body.teacher main{max-width:1400px}
  /* group terminal: wide grid on the left, sticky review panel on the right */
  .term{display:flex;gap:18px;align-items:flex-start}
  .term-main{flex:1;min-width:0}
  .term-head{display:flex;align-items:flex-start;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin-bottom:12px}
  .term-head h2{font-size:var(--fs-2xl)}
  .term-head .toolbar{margin:0}
  .summary{background:var(--card);border-radius:var(--r-md);box-shadow:var(--sheet-1);
    padding:14px 16px;margin-bottom:16px}
  .summary .sline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:var(--fs-md)}
  /* второй счётчик лички — просмотр тасков без сдачи. Свой слой информации, поэтому отдельная
     строка и приглушённый вес: работа учителя — верхняя строка (сдачи), эта только сообщает. */
  .summary .bar{flex:1;min-width:140px;height:10px;border-radius:var(--r-xs);background:var(--accent-tint);overflow:hidden}
  .summary .bar span{display:block;height:100%;background:var(--green);transition:width .3s}
  .summary .muted{color:var(--muted);font-weight:700}
  /* «⧗ N на проверку» — та же ОЧЕРЕДЬ РАБОТЫ, что и плашка .srind.spend на карточке ниже и бейдж
     .rrev.pend в обзоре группы (blox52 #11, blox55 #11): якорь схемы, не тревожный красный.
     «N возвращено» (иконка undo, blox71 #4) рядом ждёт РЕБЁНКА, а не учителя, — это факт, и он носит краску возврата
     (--draft-*), ту же, что чип .srind.sret на карточке. Раньше стоял инлайном в teacher.js. */
  .summary .pend{color:var(--anchor-ink);font-weight:700}
  .summary .pend.ret{background:var(--draft-tint);color:var(--draft-ink)}
  /* bigger, more readable grid on a PC */
  body.teacher .cell{width:74px;height:54px;font-size:var(--fs-md)}
  .cell.sel{outline:2px solid var(--accent-dark)}
  /* review side panel */
  .term-side{flex:0 0 350px;width:350px;background:var(--card);border-radius:var(--r-md);
    box-shadow:var(--sheet-2);padding:18px;position:sticky;top:18px}
  .term-side h3{margin:0 0 4px;font-size:var(--fs-lg)}
  .term-side .rsub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:12px}
  .rev-empty{color:var(--muted);font-size:var(--fs-md);text-align:center;padding:36px 6px;line-height:1.5}
  .rev-attach{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
  .rev-attach img{max-width:100%;border-radius:var(--r-sm)}
  .rev-attach audio{width:100%}
  .rev-next{font-size:var(--fs-sm);color:var(--accent-dark);font-weight:700;margin-top:10px;text-align:center}
  @media(max-width:900px){
    .term{flex-direction:column}
    .term-side{width:100%;flex:1 1 auto;position:static}
  }

  /* лист точного переноса урока (openMoveSheet): строка «в HH:MM · N мин» */
  .sched-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .sched-line label{display:flex;align-items:center;gap:6px;color:var(--muted-strong)}

  /* Лу — кабинет методиста: hub + группы/ученики (blox7) */
  /* «Назад» = вариант B (контур), edition для СВЕТЛОГО фона (чат, кабинет). На тёмной
     шапке .hdr-back .mback ниже перекрывает цвета для полупрозрачно-белого контура. */
  .mback{display:inline-flex;align-items:center;gap:5px;max-width:100%;box-sizing:border-box;
    background:none;border:1px solid var(--line);border-radius:var(--r-md);
    color:var(--muted-strong);font:inherit;font-weight:700;cursor:pointer;padding:6px 12px;margin-bottom:6px;
    transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)}
  @media (hover:hover){.mback:hover{border-color:var(--accent-deep);background:var(--accent-tint);color:var(--accent-ink)}}
  .mback .mlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .chev{font-size:1.5em;line-height:1}   /* стрелка «‹» в 1,5 раза крупнее подписи */
  /* blox52 #16 п.2: на мониторе пять карточек тянулись во всю ширину — телефонный рулон,
     глаз проходил ~1000px пустой бумаги в каждой. Сетка: колонка не уже 360px, сколько
     влезет (на 1200 — две), общий предел 900px по центру. min(360px,100%) — чтобы на
     экранах уже 360px дорожка не распирала страницу. На 375 раскладка прежняя: одна
     колонка, вертикальный зазор те же 12px (14px — только МЕЖДУ колонками). */
  .hub-wrap{max-width:900px;margin:0 auto}
  .hub-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
    gap:12px 14px;margin-top:16px}
  /* Отпускание — пружина с перелётом (--ease-spring), нажатие — сухое и быстрое
     (--t-press). Разные кривые на вдавливание и на возврат: это и даёт ощущение
     живой поверхности, а не переключателя. overflow:hidden — рамка для волны
     касания, иначе она вылезет за скруглённые углы. */
  .hub-card{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;
    /* РАМКА ПРОЗРАЧНАЯ, А НЕ СНЯТАЯ (blox52 #4, п.1): в покое край плитки задают обрезной
       край и контраст к столу, рамка тут была вторым объявлением того же. Но убрать её
       совсем нельзя — на наведении она красится акцентом и это главный признак ховера;
       прозрачная держит место, и плитка не дёргается на 1px под курсором. */
    width:100%;text-align:left;background:var(--card);border:1px solid transparent;
    border-radius:var(--r-xl);padding:18px 22px;cursor:pointer;box-shadow:var(--sheet-1);
    position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;
    /* blox52 #8: голубой ОСТАЛСЯ, но взят --accent-deep, а не --accent. В синих схемах
       --accent — светлая Maya под заливки: волна ею была светлее самой плитки, то есть
       ровно тем «светлым пятном поверх», на которое указал судья. --accent-deep — тот же
       фирменный цвет чернилами; вместе с multiply он читается впитавшимся в лист.
       В базовой и ночной схемах эти два токена равны — там вид не изменился. */
    --ripple-ink:var(--accent-deep);
    transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
               transform var(--t-spring) var(--ease-spring)}
  .hub-card:active{transform:scale(.98);transition-duration:var(--t-press);transition-timing-function:ease-out}
  @media (hover:hover){.hub-card:hover{border-color:var(--accent-deep);box-shadow:var(--sheet-2)}}
  @media (prefers-reduced-motion:reduce){
    .hub-card{transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
    .hub-card:active{transform:none}
  }
  .hub-ic{grid-row:1/span 2;font-size:var(--fs-xl);color:var(--accent-deep);line-height:0;display:flex;
    align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-lg);
    background:var(--surface)}
  /* blox51 #4: заголовок плитки — ЯКОРЕМ схемы, а не чернилами. Шапка над хабом
     баклажановая, а пять заголовков под ней были плоско-чёрные: экран не выглядел
     собранным из одного материала. Якорь тёмный в КАЖДОЙ схеме (баклажан · графит ·
     синий), на бумаге даёт 10:1 — то есть это не «цветной» заголовок, а тот же
     тёмный вес, только в тон шапке. Описание .hub-d остаётся приглушённым. */
  .hub-t{font-weight:800;font-size:var(--fs-lg);letter-spacing:var(--tracking-tight);color:var(--anchor-ink);
    text-wrap:balance}
  /* ОПИСАНИЕ ПЛИТКИ — ЧИТАЮТ, А НЕ НАЖИМАЮТ (blox52 #6). Пять описаний хаба — русские фразы
     из manage.js, единственный текст этого экрана, который читают предложениями; поэтому им и
     книжный вес, и переносы (язык здесь заведомо русский). Заголовок плитки рядом остаётся 800:
     разница между «читают» и «нажимают» и есть весь смысл этой правки. */
  .hub-d{color:var(--muted);font-size:var(--fs-sm);margin-top:4px;line-height:1.5;
    font-weight:var(--fw-read);text-wrap:pretty;hyphens:auto}
  .mgr-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 8px}
  /* .mgr-btn → --ghost, .mgr-btn.primary → --fill, .mgr-btn.warn → --danger (BUTTON ENGINE).
     Was radius 9 / pad 8·14 / font:inherit — now unified via the engine; .mgr-top3 below
     still lays the three top buttons out full-width in a 3-column grid. */
  /* верхние кнопки экрана «Группы и ученики» — одной ширины (blox16 #1). Кнопок стало четыре
     («Перевести группы на год вперёд»), поэтому колонки не фиксированные, а auto-fit: ПК — один
     ряд, планшет — 2×2, телефон — столбиком. Ширина в ряду остаётся равной, как и требовал #1. */
  .mgr-top3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
  .mgr-top3 .mgr-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
  @media(max-width:760px){ .mgr-top3{grid-template-columns:1fr} }
  .dept-block{margin:16px 0}
  .dept-head{font-size:var(--fs-lg);font-weight:800;color:var(--accent-ink);border-bottom:2px solid var(--accent-line);
    padding-bottom:4px}
  .pot-row{margin:10px 0}
  .pot-label{font-size:var(--fs-sm);color:var(--muted);font-weight:600;margin-bottom:5px}
  .grp-chips{display:flex;flex-wrap:wrap;gap:8px}
  .grp-chip{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:9px 13px;cursor:pointer;min-width:120px}
  @media (hover:hover){.grp-chip:hover{border-color:var(--accent-deep)}}
  .grp-chip .gc-n{font-weight:700}
  .grp-chip .gc-c{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
  .dept-empty{color:var(--faint);font-size:var(--fs-sm);margin-top:6px}
  .mgr-panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px;margin:12px 0}
  .mgr-panel h3{margin:0 0 10px;font-size:var(--fs-md)}
  .mgr-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;max-width:340px}
  .mgr-field label{font-size:var(--fs-sm);color:var(--muted-strong)}
  .mgr-field input,.mgr-field select{padding:7px 9px;border:1px solid var(--line-mid);border-radius:var(--r-xs);font:inherit}
  /* blox52 #18 — виноватое поле. Строка ошибки говорит ЧТО, рамка показывает ГДЕ: на форме
     учителя (имя + ник + почта) одного текста мало. Толщина берётся из лестницы линий, цвет —
     роль --red (та же, что у текста .msg.err), гаснет вместе со строкой. */
  input.fbad,select.fbad,textarea.fbad{border-color:var(--red);box-shadow:0 0 0 2px var(--alert-tint)}
  /* заполненные данные ребёнка — компактная сводка вместо формы (blox22 #4) */
  .pf-read{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-md);color:var(--ink);margin-bottom:4px}
  .pf-read .pf-lbl{display:inline-block;min-width:120px;color:var(--muted);font-size:var(--fs-sm)}
  /* ФИО + дата рождения: в один ряд на ПК, столбиком на телефоне (blox15 #1) */
  .fio-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px;max-width:760px}
  .fio-row .mgr-field{max-width:none}
  /* КАРТОЧКА ТУМБЛЕРА В РОСТЕРЕ — .mg-sw — это РАСКЛАДКА (blox56 #11): тумблер слева на две
     строки, справа жирный заголовок и приглушённое описание. Раскладку носят ОБА тумблера
     ростера — «Плейлист» и «English only». А .mg-play — МОДИФИКАТОР только плейлистного:
     он несёт радугу «у группы есть плейлист» (ниже). Разнесены нарочно: пока раскладка и радуга
     жили в одном классе, второй тумблер загорался бы плейлистной радугой и врал. */
  .mg-sw{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;
    max-width:620px;margin:0 0 12px;padding:11px 13px;background:var(--card);
    border:1px solid var(--line-soft);border-radius:var(--r-sm);cursor:pointer}
  /* ТУМБЛЕР — КОМПОНЕНТ, а не украшение одной галочки (blox56 #10). Пишется на самом
     input[type=checkbox] (appearance:none), без обёрток и без второго элемента: контрол остаётся
     НАСТОЯЩЕЙ галочкой — её ловит клавиатура, читает скринридер, и все, кто уже на неё ссылается
     (обработчик, `:has(input:checked)` у радуги, ассерт), продолжают работать. role="switch"
     ставится в разметке — он говорит про ВИД контрола, а не про его устройство.
     Зелёного во включённом положении НЕТ, хотя на айфоне он зелёный: в этом приложении зелёная
     заливка означает «сделано/принято» и только это (гейт «зелёная заливка» в npm run check).
     Включённый тумблер берёт якорь схемы — тот же цвет, что и прочие «включено» состояния.
     46×28 — палец кладётся на весь тумблер, а не в 24px-квадрат, как раньше. */
  /* min-width/min-height обязательны, а не для красоты: в гриде колонка `auto` считает минимум
     пустого контрола по СОДЕРЖИМОМУ (то есть ноль) и на тесной строке ужимает трек — это было
     видно буквально: трек сжался до 24px, а ручка выехала на соседний текст. */
  .swi{appearance:none;-webkit-appearance:none;flex:none;position:relative;margin:0;
    width:46px;height:28px;min-width:46px;min-height:28px;
    border:0;border-radius:var(--r-pill);background:var(--line-mid);
    cursor:pointer;transition:background var(--t) var(--ease)}
  .swi::after{content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;
    border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-1);
    transition:transform var(--t) var(--ease)}
  .swi:checked{background:var(--anchor-ink)}
  .swi:checked::after{transform:translateX(18px)}
  .swi:focus-visible{outline:none;box-shadow:var(--ring)}
  @media (prefers-reduced-motion:reduce){ .swi,.swi::after{transition:none} }
  .mg-sw .swi{grid-row:1 / span 2}
  .mg-sw-t{font-weight:700;color:var(--ink)}
  .mg-sw-d{grid-column:2;font-size:var(--fs-xs);font-weight:600;color:var(--muted);line-height:1.35}
  /* РАДУГА = «У ГРУППЫ ЕСТЬ ПЛЕЙЛИСТ» (blox40 #3 → blox56 #9/#10). Заливка --grad-playlist — общая
     метка плейлиста во всём приложении (плашка «Постоянный плейлист» у ребёнка, рельс плашки
     Playlist у учителя), поэтому в ростере она обязана гореть, пока плейлист У ГРУППЫ ЕСТЬ.
     Условие этой метки переворачивали ДВАЖДЫ вместе со смыслом контрола, и каждый раз она
     оставалась привязана к «плейлист есть»: blox40 #3 — галочка ВКЛЮЧАЛА режим прослушки;
     blox56 #2 — галочка стала ОТНИМАТЬ плейлист (подсветку тогда сняли зря); blox56 #10 — контрол
     стал тумблером ПЛЕЙЛИСТА, и включённое положение снова значит «есть». Отсюда и селектор
     вернулся к :has(input:checked) — чистое CSS-условие, поэтому состояние верное уже на ПЕРВОЙ
     отрисовке, а не только после клика. */
  .mg-play:has(input:checked){background:var(--grad-playlist);border-color:transparent;
    box-shadow:var(--sh-2)}
  .mg-play:has(input:checked) .mg-sw-t{color:var(--ink-strong)}
  .mg-play:has(input:checked) .mg-sw-d{color:var(--ink)}
  .roster-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0}
  .roster-hd h2{margin:0}
  .roster-sub{color:var(--muted);font-size:var(--fs-sm)}
  .stu-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-width:620px}
  .stu-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--card);border:1px solid var(--line-soft);
    border-radius:var(--r-sm);padding:9px 12px}
  .stu-fio{font-weight:700;flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stu-nick{color:var(--accent-ink);font-size:var(--fs-sm);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stu-bd{color:var(--draft-ink);font-size:var(--fs-xs);flex:0 0 auto;white-space:nowrap}
  /* --faint (3.16:1) — для декора и disabled; «почта —» это ИНФОРМАЦИЯ, её читают, поэтому
     --muted (5.33:1). Тот же разбор, что и у .sb-note (axe, 02.09.2026). */
  .stu-em{font-size:var(--fs-xs);flex:0 0 auto;white-space:nowrap;color:var(--muted)}
  .stu-row .stu-sp{margin-left:auto;display:flex;align-items:center;gap:8px}
  .stu-row select{padding:5px 7px;border:1px solid var(--line-mid);border-radius:var(--r-xs);font:inherit;font-size:var(--fs-sm)}
  .stu-x{border:none;background:none;color:var(--danger);font-size:var(--ic-md);cursor:pointer;padding:2px 6px}
  /* ПЕРЕВОД НА НОВЫЙ УЧЕБНЫЙ ГОД — экран предпросмотра плана.
     Строка плана — flex-wrap (не grid): на 375px «имя → куда» и счётчик детей переносятся сами,
     ничего не уезжает за край (G1). Слово-подтверждение — input 16px, иначе Safari зумит страницу
     и не возвращает обратно (правило 3). */
  .pm-sum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
    margin:10px 0 18px;font-size:var(--fs-md);line-height:1.6}
  .pm-sec{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font-size:var(--fs-xs);font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted-strong)}
  .pm-sec::after{content:'';flex:1 1 auto;height:1px;background:var(--line-soft)}
  .pm-sec .pm-cnt{order:3;font-weight:800;color:var(--muted)}
  .pm-sec-skip{color:var(--faint)}
  .pm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--card);
    border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:6px}
  .pm-name{font-weight:700;flex:1 1 110px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pm-move{order:2;display:flex;align-items:center;gap:8px;min-width:0}
  .pm-from{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
  .pm-arr{color:var(--faint)}
  .pm-to{font-weight:700;color:var(--accent-ink);white-space:nowrap}
  .pm-cross{color:var(--accent-deep)}
  .pm-kids{order:3;margin-left:auto;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
  /* телефон: имя и счётчик в первой строке, переход целиком во второй — иначе строки рвутся
     каждая по-своему и список перестаёт читаться колонкой */
  @media(max-width:560px){
    .pm-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px}
    .pm-name{grid-area:1/1} .pm-kids{grid-area:1/2;margin-left:0;text-align:right}
    .pm-move{grid-area:2/1/2/3}
  }
  .pm-row-grad{background:var(--alert-tint);border-color:var(--alert-line)}
  .pm-row-grad .pm-to{color:var(--alert-ink)}
  .pm-row-skip{background:transparent;border-style:dashed}
  .pm-row-skip .pm-to{color:var(--faint);font-weight:400;font-size:var(--fs-sm)}
  .pm-names{color:var(--muted-strong);font-size:var(--fs-sm);line-height:1.5;margin:-2px 0 10px;padding:0 12px}
  .pm-legend{color:var(--faint);font-size:var(--fs-xs);margin:6px 0 0}
  .pm-confirm{background:var(--alert-tint);border:1px solid var(--alert-line);border-radius:var(--r-md);
    padding:14px 16px;margin:22px 0 8px}
  .pm-warn{color:var(--alert-ink);font-size:var(--fs-md);line-height:1.5;margin-bottom:10px}
  .pm-go{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .pm-go input{font:inherit;font-size:var(--fs-input);padding:10px 12px;min-height:44px;
    border:1px solid var(--line-mid);border-radius:var(--r-sm);flex:0 1 180px;min-width:0}
  /* прозрачность снята (blox52 #3, п.1): её роль забрало общее правило .btn:disabled — блёклая
     заливка и приглушённый текст. Свой курсор остаётся: здесь «нельзя» объясняется словом,
     которое надо ввести рядом, и not-allowed — часть этого объяснения. */
  .pm-go .btn-pub:disabled{cursor:not-allowed}
  /* STUDENT MOVER — drag board */
  .sm-hint{color:var(--muted-strong);font-size:var(--fs-sm);line-height:1.5;margin:6px 0 12px;max-width:760px}
  .sm-warn{color:var(--danger);font-size:var(--fs-sm);margin:0 0 10px}
  .sm-grad{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
    background:var(--alert-tint);border:2px dashed var(--alert-line);color:var(--alert-ink);border-radius:var(--r-md);
    padding:14px 18px;margin:0 0 14px;font-weight:700;font-size:var(--fs-md);text-align:center}
  .sm-gradsub{font-weight:400;color:var(--danger);font-size:var(--fs-xs)}
  .sm-grad.sm-over{background:var(--alert-fill);border-color:var(--danger);color:var(--alert-ink);box-shadow:0 0 0 2px var(--danger) inset}
  .sm-board{display:flex;gap:12px;align-items:flex-start}
  .sm-col{flex:1 1 0;min-width:0;background:var(--surface);border:1px solid var(--line-soft);
    border-radius:var(--r-md);padding:12px}
  .sm-col.sm-over{background:var(--ok-tint);border-color:var(--ok);box-shadow:0 0 0 2px var(--ok) inset}
  .sm-colhd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
  .sm-colhd select{flex:1 1 auto;min-width:0;padding:7px 9px;border:1px solid var(--line-mid);
    border-radius:var(--r-xs);font:inherit}
  .sm-cnt{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
  .sm-swap{align-self:center;cursor:pointer;font-size:var(--ic-lg);color:var(--accent-ink);user-select:none;
    padding:0 2px;flex:0 0 auto}
  .sm-drop{display:flex;flex-direction:column;gap:7px;min-height:60px}
  .sm-empty{color:var(--faint);font-size:var(--fs-sm);text-align:center;padding:14px 0}
  /* touch-action:pan-y — пальцем со списка можно скроллить; драг перехватывает жест сам
     (long-press → touchAction:none на плашке + preventDefault на touchmove) */
  .sm-chip{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;
    cursor:grab;touch-action:pan-y;user-select:none}
  .sm-chip:active{cursor:grabbing}
  .sm-chip.sm-lifted{opacity:.35}
  .sm-nick{font-weight:600;font-size:var(--fs-sm)}
  .sm-fio{color:var(--muted);font-size:var(--fs-xs);margin-top:1px}
  .sm-clone{position:fixed;z-index:60;pointer-events:none;background:var(--card);border:1px solid var(--accent-line);
    border-radius:var(--r-sm);padding:8px 11px;box-shadow:var(--sheet-4);transform:scale(1.03)}

  /* УЧИТЕЛЯ — статистика эффективности */
  .stat-note{color:var(--muted);font-size:var(--fs-sm);margin:6px 0 14px;max-width:720px}
  .tstat-card{background:var(--card);border-radius:var(--r-md);padding:16px 18px;
    margin-bottom:16px;box-shadow:var(--sheet-1)}
  .tstat-head{display:flex;align-items:center;gap:16px;cursor:pointer}
  .tsh-l{flex:1}
  /* карточка учителя складывается: на телефоне экран открывается списком, метрики — по тапу */
  .tsh-chev{display:none;color:var(--muted);font-size:var(--ic-lg);font-weight:700;
    transition:transform var(--t) var(--ease)}
  .tstat-card.closed .stat-grid{display:none}
  .tstat-card.closed .tsh-chev{transform:rotate(0deg)}
  .tstat-card .tsh-chev{transform:rotate(90deg)}
  @media(max-width:760px){ .tsh-chev{display:block} }
  .tsh-name{font-weight:800;font-size:var(--fs-lg)}
  .tsh-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
  /* ✎ стоит вплотную к имени/нику учителя — правишь именно того, на кого смотришь */
  .tsh-name{display:flex;align-items:center;gap:8px}
  .tsh-edit{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--line);background:var(--card);
    border-radius:var(--r-sm);color:var(--muted);cursor:pointer;display:flex;align-items:center;
    justify-content:center;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
  @media (hover:hover){.tsh-edit:hover{background:var(--accent-tint);border-color:var(--accent-deep);color:var(--accent)}}
  .tsh-new{color:var(--muted)}
  /* журнал неудачных попыток входа с персональной двери */
  .att-box{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin:0 0 14px;
    background:var(--surface);max-width:720px}
  .att-box summary{cursor:pointer;font-weight:700;font-size:var(--fs-sm);color:var(--muted)}
  .att-row{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:7px 0;
    border-top:1px solid var(--line-soft);font-size:var(--fs-sm);box-shadow:var(--rule-t)}
  .att-mail{font-weight:600}
  .att-why{color:var(--muted);flex:1}
  .att-when{color:var(--muted)}
  .tsh-index{border:2px solid;border-radius:var(--r-md);padding:8px 14px;text-align:center;min-width:78px}
  .tshi-n{font-weight:800;font-size:var(--fs-2xl);line-height:1}
  .tshi-c{font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;letter-spacing:.5px}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
  .stat-tile{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 13px}
  .st-top{display:flex;align-items:center;justify-content:space-between}
  .st-ic{font-size:var(--fs-lg)}
  .st-score{font-weight:800;font-size:var(--fs-xl);line-height:1}
  .st-label{font-weight:600;font-size:var(--fs-sm);margin-top:6px}
  .st-detail{color:var(--faint);font-size:var(--fs-xs);margin-top:3px;line-height:1.35}

  /* ДЛЯ РОДИТЕЛЯ — отчёт по ребёнку */
  .p-sub{color:var(--muted);font-size:var(--fs-sm);margin:-4px 0 10px}
  .p-datebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .p-datebar label{font-size:var(--fs-sm);color:var(--muted-strong)}
  .p-datebar input[type=date]{padding:6px 8px;border:1px solid var(--line-mid);border-radius:var(--r-xs);font:inherit}
  .pstat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .pstat{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:14px 14px 12px;text-align:center}
  .pstat.ok{background:var(--ok-tint);border-color:var(--ok-line)}
  .pstat.warn{background:var(--draft-tint);border-color:var(--draft-line)}
  .pstat.bad{background:var(--alert-tint);border-color:var(--alert-line)}
  .pst-val{font-weight:800;font-size:var(--fs-3xl);line-height:1;color:var(--ink)}
  .pst-of{font-size:var(--fs-lg);color:var(--faint);font-weight:700}
  .pst-lbl{font-size:var(--fs-xs);color:var(--muted);margin-top:7px;line-height:1.35}

  /* ---- icon tinting -----------------------------------------------------------
     An icon inherits the colour of its text, so most need nothing. These few sit on
     their own and would otherwise come out ink-black. */
  .rect .rtico{color:var(--rail)}                 /* task icon = its type's rail colour */
  .rect.done .rtico{color:var(--ok-ink)}
  .eico,.bico,.st-ic,.ex-aud{color:var(--muted)}
  .annc .ah .ic{color:var(--note-ink)}
  .btn-ghost .ic,.mgr-btn .ic,.btn-fb .ic{color:var(--muted)}
  @media (hover:hover){.btn-ghost:hover .ic{color:var(--accent-ink)}}
  .btn-primary .ic,.btn-pub .ic{color:currentColor}
  .srnote .ic{color:var(--muted)}
  .locknote .ic{color:var(--alert-ink)}
  .tb-add .ic,.tb-name .ic{color:var(--accent-ink)}


  /* ПЕРЕРИСОВКА B (агент 2): «N на проверку» в сводке — цвет группы текстом (на полосе — белым,
     см. style-11 «сдачи по таску на полосе») */
  .summary .pend{color:var(--group-ink)}