/* s1 */
/* ===========================================================================
   mobile-v2.css — глобальный мобильный скин «Бенто» (V2)
   Эталон: scratchpad/out/student.html, секция data-v="2", CSS-блок .r-student .v2

   ВСЁ строго внутри html[data-ui="v2"] и @media (max-width: 899px).
   Без флага ?ui=v2 прод выглядит ровно как раньше — ни одного правила
   наружу этой обёртки выносить нельзя.

   Только переменные платформы (--surface, --ink, --muted, …) — светлая тема
   html[data-theme="light"] переопределяет их сама, ничего дублировать не надо.

   Ролевые главные экраны живут в mobile-v2-<role>.css (подключается в
   base.html вторым link'ом) — этот файл их не трогает.

   s1: скин доведён до стиля S1 «Система» (Apple/iOS inset grouped).
   Эталон — scratchpad/out/style-s1.html, блок .r-style .s1, телефоны /me и
   /assess. Типографика Inter Tight (display) + Inter (body) — link ставит
   base.html (desk-core) только под флагом; fallback -apple-system/system-ui.
   Секции 11 (док) и 12 (шторка «Ещё») одобрены Амиром — НЕ трогаем.
   =========================================================================== */

@media (max-width: 899px) {

/* ---------- 0. Токены скина ---------- */
html[data-ui="v2"] {
  /* Радиусы бенто. Отдельные переменные, чтобы не ломать десктоп. */
  --v2-r: 20px;          /* карточка / плитка */
  --v2-r-sm: 14px;       /* кнопка, инпут, мелкая плитка */
  --v2-r-xs: 10px;       /* чип-квадрат, бейдж */
  --v2-pad: 16px;        /* поле экрана */
  --v2-gap: 12px;        /* между блоками */
  --v2-dock-h: 68px;     /* высота дока */
  --v2-dock-gap: 16px;   /* зазор дока от низа = боковым отступам (просьба Амира 02.09) */
  /* Инвертированная плитка: в тёмной теме светлая, в светлой — тёмная.
     --accent уже так себя ведёт (#E5E5EA / #1C1C1E), берём его. */
  --v2-inv-bg: var(--accent);
  --v2-inv-ink: var(--accent-ink);
  --v2-inv-mut: color-mix(in srgb, var(--accent-ink) 62%, transparent);

  /* s1: шрифтовая пара. Google Fonts подключает base.html под флагом;
     если link ещё не пришёл — падаем на системные, метрики те же. */
  --v2-f-d: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
            "SF Pro Display", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --v2-f-b: "Inter", -apple-system, BlinkMacSystemFont,
            "SF Pro Text", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --v2-r-ctl: 12px;      /* s1: контрол — кнопка/поле/поиск */
  --v2-hdr-h: 52px;      /* s1: компактная липкая шапка при скролле */
}

/* ---------- 1. Каркас ---------- */
html[data-ui="v2"] body {
  /* s1: body — Inter 15/1.45, без общего трекинга (он живёт в display). */
  font-family: var(--v2-f-b);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
/* s1: цифры везде табличные — колонки значений не пляшут. */
html[data-ui="v2"] .li-trail,
html[data-ui="v2"] .stat-card .v,
html[data-ui="v2"] .stat,
html[data-ui="v2"] .v2-big,
html[data-ui="v2"] .mono,
html[data-ui="v2"] .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Поле экрана 16, снизу — место под плавающий док (68 + 12 + safe + воздух). */
html[data-ui="v2"] .app-main {
  padding: calc(12px + var(--safe-top)) var(--v2-pad)
           calc(var(--v2-dock-h) + var(--v2-dock-gap) + var(--safe-bottom) + 20px);
  max-width: none;
}
html[data-ui="v2"] body.no-nav .app-main,
html[data-ui="v2"] .in-frame .app-main {
  padding-bottom: calc(24px + var(--safe-bottom));
}
/* Никакого горизонтального скролла страницы. */
html[data-ui="v2"] body { overflow-x: hidden; }

/* ---------- 2. Шапка страницы (s1: large title + компакт при скролле) ---------- */
/* Large title 34/700 слева, Inter Tight, трекинг −.03em — как .lt в эталоне. */
html[data-ui="v2"] .app-main h1,
html[data-ui="v2"] .page-title {
  font-family: var(--v2-f-d);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0;
}
/* Подзаголовок под large title — 15 muted (в шаблонах это .sub / первый
   .muted-абзац сразу за h1, как на /me и /assess). */
html[data-ui="v2"] .app-main h1 + .sub,
html[data-ui="v2"] .app-main h1 + p.muted,
html[data-ui="v2"] .app-main .page-title + .sub,
html[data-ui="v2"] .hero-greet .sub,
html[data-ui="v2"] .assess-head > p.muted {
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
  margin: 6px 0 0;
}
html[data-ui="v2"] .app-main h2,
html[data-ui="v2"] .app-main .section-title,
html[data-ui="v2"] .td-section-title {
  font-family: var(--v2-f-d);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
}
html[data-ui="v2"] .app-main h3 {
  font-family: var(--v2-f-d);
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
html[data-ui="v2"] .title-lg {
  font-family: var(--v2-f-d);
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
}

/* s1: large title и в ролевых экранах. Ролевые файлы (mobile-v2-<role>.css)
   грузятся ПОСЛЕ этого и пиннят h1 в 22px селекторами с ролью — поднимаем
   вес своими, ролевые файлы при этом не трогаем. */
html[data-ui="v2"] body.role-student .app-main .hero-greet h1,
html[data-ui="v2"] body.role-director .app-main > .row.between:first-of-type h1,
html[data-ui="v2"] body.role-zavuch.role-zavuch .app-main > .row.between.mb-3 > h1,
html[data-ui="v2"] body.role-parent .pv2-home .pv2-head h1,
html[data-ui="v2"] body.role-curator .app-main .td-head h1,
html[data-ui="v2"] body.role-admin .app-main h1 {
  font-family: var(--v2-f-d);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}
/* Директор пиннит h1 селектором с :first-of-type — повторяем его и добиваем
   вес классом роли дважды (ролевой файл при этом не трогаем). */
html[data-ui="v2"] body.role-director.role-director .app-main > .row.between:first-of-type h1 {
  font-family: var(--v2-f-d);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}
/* Подзаголовок под ним — 15 muted (ролевые ставят 13). */
html[data-ui="v2"] body.role-student .app-main .hero-greet .sub,
html[data-ui="v2"] body.role-parent .pv2-home .pv2-head .sub {
  font-size: 15px;
  color: var(--muted);
  margin-top: 6px;
}

/* s1: компактная липкая шапка 52px. Класс hdr-compact на body ставит
   мини-JS в base.html (IntersectionObserver на первый h1/.page-title).
   h1 НЕ делаем sticky: липкий элемент не уходит из вьюпорта и наблюдатель
   тогда не срабатывает. Вместо этого при hdr-compact поверх страницы
   появляется полоса 52 с копией заголовка — через ::before на .app-main
   (content берём из --v2-title, который ставит тот же скрипт; если его нет,
   полоса пустая, поэтому подстраховываемся: показываем сам h1 копией). */
/* jitterfix (02.09): компакт-шапка НЕ меняет раскладку — h1 остаётся в потоке,
   .app-main без доп. паддинга; полоса 52px рисуется через body::before из
   data-page-title и просто проявляется. Раньше h1 становился fixed и
   контент прыгал → сентинел пересекал границу обратно → дрожание. */
html[data-ui="v2"] body.has-nav::before {
  content: attr(data-page-title);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  box-sizing: border-box;
  height: calc(var(--v2-hdr-h) + var(--safe-top));
  padding: var(--safe-top) 56px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-f-d);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 -1px 0 var(--line);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
html[data-ui="v2"] body.has-nav.hdr-compact::before {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"] body.has-nav::before { transition: none; }
}

/* ---------- 3. Капс-подпись ---------- */
/* Label над цифрой/заголовком: 11/700, .08em, uppercase, --muted. */
/* s1: капс 11/600, трекинг .12em. .sec-h — заголовок секции НАД группой,
   отступ слева 16 (под текст строки) и 8 снизу, как .cap в эталоне. */
html[data-ui="v2"] .card-title,
html[data-ui="v2"] .v2-k,
html[data-ui="v2"] .stat-card .k,
html[data-ui="v2"] .sec-k,
html[data-ui="v2"] .sec-h,
html[data-ui="v2"] .pick-label,
html[data-ui="v2"] .side-sec {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
html[data-ui="v2"] .card-title { margin-bottom: 10px; }
/* .sec-h живёт прямо в .app-main перед сеткой — даём ему поле 16 и воздух 24
   сверху между секциями (первую секцию не отбиваем). */
html[data-ui="v2"] .app-main > .sec-h {
  padding: 0 var(--v2-pad) 8px;
  margin: 24px 0 0;
}
html[data-ui="v2"] .app-main > .sec-h:first-child { margin-top: 0; }
/* pick-label в шаблонах с инлайновым font-size/letter-spacing — перебиваем. */
html[data-ui="v2"] .pick-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  margin: 0 2px 8px !important;
}

/* s1: KPI — цифра 34/700 Inter Tight tabular, подпись 13 muted. */
html[data-ui="v2"] .stat,
html[data-ui="v2"] .v2-big {
  font-family: var(--v2-f-d);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
}
html[data-ui="v2"] .v2-cap { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- 4. Карточки и плитки ---------- */
/* s1: inset-группа — радиус 20, фон surface, БЕЗ рамок и теней, паддинг 16. */
html[data-ui="v2"] .card {
  background: var(--surface);
  border-radius: var(--v2-r);
  border: 0;
  box-shadow: none;
  padding: 16px;
  margin-bottom: var(--v2-gap);
}
html[data-ui="v2"] .card.pad-lg { padding: 20px; }
/* s1: рамок в стиле нет — .flat тоже без бордера, отличается фоном. */
html[data-ui="v2"] .card.flat { border: 0; box-shadow: none; background: var(--surface); }
html[data-ui="v2"] .card.pad-0 { padding: 0; overflow: hidden; }
html[data-ui="v2"] .card > :last-child { margin-bottom: 0; }
html[data-ui="v2"] a.card:active,
html[data-ui="v2"] .card.link:active { background: var(--surface-2); transform: scale(.99); }

/* Сетки плиток: 2 колонки, gap 12. Плитка 2×1 — grid-column: span 2. */
html[data-ui="v2"] .grid-2,
html[data-ui="v2"] .grid-auto,
html[data-ui="v2"] .stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v2-gap);
}
html[data-ui="v2"] .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html[data-ui="v2"] .v2-w2,
html[data-ui="v2"] .grid-2 > .span-2,
html[data-ui="v2"] .stat-grid > .span-2 { grid-column: 1 / -1; }

/* Плитка статистики (.stat-card — директор/завуч/куратор). */
html[data-ui="v2"] .stat-card {
  background: var(--surface);
  border: 0;
  box-shadow: none;
  border-radius: var(--v2-r);
  padding: 16px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  overflow: hidden;
}
/* s1: KPI-цифра 34/700 Inter Tight. */
html[data-ui="v2"] .stat-card .v {
  font-family: var(--v2-f-d);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
html[data-ui="v2"] .stat-card .v small { font-size: 17px; font-weight: 600; }
html[data-ui="v2"] .stat-card .sub,
html[data-ui="v2"] .stat-card .sub-act {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Инвертированная плитка — одна на экран, главное действие роли. */
html[data-ui="v2"] .v2-inv {
  background: var(--v2-inv-bg);
  color: var(--v2-inv-ink);
}
html[data-ui="v2"] .v2-inv .card-title,
html[data-ui="v2"] .v2-inv .v2-k,
html[data-ui="v2"] .v2-inv .v2-cap,
html[data-ui="v2"] .v2-inv .muted,
html[data-ui="v2"] .v2-inv .k,
html[data-ui="v2"] .v2-inv .sub,
html[data-ui="v2"] .v2-inv .sub-act,
html[data-ui="v2"] .v2-inv .li-sub { color: var(--v2-inv-mut); }
html[data-ui="v2"] .v2-inv .v,
html[data-ui="v2"] .v2-inv .stat,
html[data-ui="v2"] .v2-inv .li-title,
html[data-ui="v2"] .v2-inv h1,
html[data-ui="v2"] .v2-inv h2,
html[data-ui="v2"] .v2-inv h3 { color: var(--v2-inv-ink); }

/* Заголовок / текст плитки. */
html[data-ui="v2"] .v2-ttl { font-size: 17px; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
html[data-ui="v2"] .v2-sub { font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
html[data-ui="v2"] .v2-mut { font-size: 13px; color: var(--muted); }

/* ---------- 5. Кнопки ---------- */
/* s1: телефон — кнопка 48, радиус 14, Inter 16/600. */
html[data-ui="v2"] .btn {
  font-family: var(--v2-f-b);
  min-height: 48px;
  border-radius: var(--v2-r-sm);
  font-size: 16px;
  font-weight: 600;
  padding: 0 18px;
  letter-spacing: -.01em;
  border: 0;
}
html[data-ui="v2"] .btn-sm {
  min-height: 40px;
  border-radius: var(--v2-r-ctl);
  font-size: 14px;
  padding: 0 14px;
}
html[data-ui="v2"] .btn-lg { min-height: 52px; font-size: 17px; }
/* s1: вторичная кнопка — заливка surface-2, не обводка. */
html[data-ui="v2"] .btn-ghost {
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
}
html[data-ui="v2"] .btn-block { width: 100%; }

/* ---------- 6. Чипы, бейджи, оценки ---------- */
/* s1: чип — пилюля 32, Inter 13, фон surface-2. */
html[data-ui="v2"] .chip {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  background: var(--surface-2);
  color: var(--ink-2);
}
html[data-ui="v2"] .chip.accent,
html[data-ui="v2"] .chip.on,
html[data-ui="v2"] .chip.active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
/* Чип внутри строки списка / хвоста — мельче, чтобы не распирать строку 52px. */
html[data-ui="v2"] .li-trail .chip,
html[data-ui="v2"] .list-item .chip,
html[data-ui="v2"] .card-title .chip {
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--v2-r-xs);
  font-size: 12px;
}
html[data-ui="v2"] .badge { border-radius: 999px; font-size: 12px; font-weight: 700; }
html[data-ui="v2"] .grade { border-radius: var(--v2-r-xs); font-weight: 800; }

/* ---------- 7. Списки ---------- */
html[data-ui="v2"] .list {
  background: var(--surface);
  border-radius: var(--v2-r);
  box-shadow: none;
  border: 0;
  overflow: hidden;
  margin-bottom: var(--v2-gap);
}
/* s1: строка 52, паддинг 11/16, gap 12. Hairline — псевдоэлементом сверху с
   отступом слева 52 (под иконку 28 + gap 12 + поле 16), у первой строки нет.
   border-bottom снимаем: он рисуется на всю ширину и спорит с inset-линией. */
html[data-ui="v2"] .list-item {
  min-height: 52px;
  padding: 11px var(--v2-pad);
  gap: 12px;
  border-bottom: 0;
  position: relative;
}
html[data-ui="v2"] .list-item + .list-item::before {
  content: "";
  position: absolute;
  left: var(--v2-pad);
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
}
/* s1: если у строки есть иконка 28 — линия уходит под текст, отступ 52
   (поле 16 + иконка 28 + gap 12 = 56; берём 52 как в эталоне). */
html[data-ui="v2"] .list-item:has(> .fi-ic) + .list-item:has(> .fi-ic)::before,
html[data-ui="v2"] .list-item:has(> .mv2-ic) + .list-item:has(> .mv2-ic)::before,
html[data-ui="v2"] .list-item:has(> span:first-child:not(.li-main):not(.li-trail)) + .list-item:has(> span:first-child:not(.li-main):not(.li-trail))::before { left: 52px; }
html[data-ui="v2"] .list-item .li-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
html[data-ui="v2"] .list-item .li-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
/* s1: значение справа — 15 muted, tabular, без плашки. */
html[data-ui="v2"] .list-item .li-trail {
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Нейтральный счётчик в хвосте строки — просто цифра, не чип.
   Цветные статусы (.ok/.warn/.danger/.accent) остаются плашками. */
html[data-ui="v2"] .list-item .li-trail > .chip:not(.ok):not(.warn):not(.danger):not(.accent) {
  background: transparent;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}
/* s1: шеврон — 7×7 из бордеров, а не глиф «›». Глиф в разметке гасим. */
html[data-ui="v2"] .list-item.link::after,
html[data-ui="v2"] .list-item .li-trail > .chev { font-size: 0; }
html[data-ui="v2"] .list-item.link::after {
  content: "";
  width: 7px; height: 7px;
  flex: 0 0 7px;
  border-right: 1.6px solid var(--line-strong);
  border-bottom: 1.6px solid var(--line-strong);
  transform: rotate(-45deg);
  margin-left: 2px;
  align-self: center;
  background: none;
}
html[data-ui="v2"] .list-item .li-trail > .chev::after {
  content: "";
  display: block;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--line-strong);
  border-bottom: 1.6px solid var(--line-strong);
  transform: rotate(-45deg);
}
/* s1: иконка строки — эмодзи в квадрате 28, радиус 8, фон surface-2.
   .fi-ic уже так называется у ученика; голый <span> с эмодзи в начале
   строки выравниваем тем же квадратом. */
html[data-ui="v2"] .list-item > .fi-ic,
html[data-ui="v2"] .list-item > .mv2-ic,
html[data-ui="v2"] .list-item > span:first-child:not(.li-main):not(.li-trail) {
  width: 28px;
  height: 28px;
  min-width: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
/* Список внутри карточки уже на своей поверхности — фон и радиус не дублируем. */
html[data-ui="v2"] .card > .list,
html[data-ui="v2"] .card .list { border-radius: 0; margin-bottom: 0; background: transparent; }
/* s1: .card.pad-0 — группа целиком из строк, паддинг у строк свой. */
html[data-ui="v2"] .card.pad-0 > .card-title { padding: 16px var(--v2-pad) 8px !important; margin: 0; }

html[data-ui="v2"] .rowlist .rl-text { font-size: 14px; }

/* ---------- 8. Формы ---------- */
/* s1: поле — surface-2, радиус 12, без рамки. */
html[data-ui="v2"] .input,
html[data-ui="v2"] .select,
html[data-ui="v2"] .textarea {
  font-family: var(--v2-f-b);
  min-height: 48px;
  border-radius: var(--v2-r-ctl);
  background: var(--surface-2);
  border: 1px solid transparent;
  font-size: 16px;          /* < 16px даёт зум при фокусе в iOS — не трогаем */
  padding: 0 12px;
}
/* s1: поле поиска — 44/12 с иконкой (у ученика это .assess-search). */
html[data-ui="v2"] .assess-search,
html[data-ui="v2"] .assess-search .input,
html[data-ui="v2"] .search-field .input {
  min-height: 44px;
  border-radius: var(--v2-r-ctl);
  background: var(--surface-2);
  border: 0;
}
html[data-ui="v2"] .assess-search-wrap { margin-bottom: var(--v2-gap); }
html[data-ui="v2"] .textarea { min-height: 96px; padding: 12px 14px; }
html[data-ui="v2"] .input:focus,
html[data-ui="v2"] .select:focus,
html[data-ui="v2"] .textarea:focus { border-color: var(--line-strong); }
html[data-ui="v2"] .field { gap: 6px; }
html[data-ui="v2"] .field-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ---------- 9. Таблицы ---------- */
/* Ни одна таблица не должна распирать страницу — только свой скролл. */
html[data-ui="v2"] .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--v2-r);
  max-width: 100%;
}
html[data-ui="v2"] .table-scroll table { font-size: 13px; }
html[data-ui="v2"] .table-scroll th,
html[data-ui="v2"] .table-scroll td { font-size: 13px; }
/* s1: шапка таблицы — капс 11/.12em muted, строки на hairline. */
html[data-ui="v2"] .table-scroll th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-ui="v2"] .app-main > table,
html[data-ui="v2"] .card > table { font-size: 13px; }

/* ---------- 10. Прочее из app.css ---------- */
html[data-ui="v2"] .alert { border-radius: var(--v2-r-ctl); padding: 12px 14px; font-size: 14px; }
html[data-ui="v2"] .divider { margin: 12px 0; }
html[data-ui="v2"] .stack { gap: 12px; }
html[data-ui="v2"] .stack.tight { gap: 8px; }
html[data-ui="v2"] .row { gap: 12px; }
html[data-ui="v2"] .mb-4 { margin-bottom: var(--v2-gap); }
html[data-ui="v2"] .mb-3 { margin-bottom: 10px; }
html[data-ui="v2"] .sheet {
  border-radius: 28px 28px 0 0;
  padding: 16px 16px calc(24px + var(--safe-bottom));
}
html[data-ui="v2"] .sheet-grip { width: 36px; height: 4px; }

/* ===========================================================================
   11. ДОК — плавающая пилюля с подписями
   =========================================================================== */
html[data-ui="v2"] .tab-bar {
  left: var(--v2-pad);
  right: var(--v2-pad);
  bottom: var(--v2-dock-gap); /* в Safari нижняя панель браузера сама закрывает home-indicator */
  height: var(--v2-dock-h);
  min-height: var(--v2-dock-h);
  border-radius: 34px;
  background: rgba(22, 22, 24, .86);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  padding: 0 6px;
  padding-bottom: 0;          /* safe-area уже учтён в bottom */
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
}
html[data-theme="light"][data-ui="v2"] .tab-bar {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .14);
}

/* Пункт: кружок 36×36 с иконкой 22 + подпись 10.5/600 под ним. */
html[data-ui="v2"] .tab-bar .tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
}
html[data-ui="v2"] .tab-bar .tab .ic {
  /* ovalfix: жёстко круг — без сжатия во flex-колонке и без наследованных паддингов (iOS Safari рисовал овал) */
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  filter: none;
  background: transparent;
  transition: background var(--ease), transform var(--ease);
}
/* Подписи ОБЯЗАТЕЛЬНО видны — Амир просил их вернуть. */
html[data-ui="v2"] .tab-bar .tab .lb {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
/* Активный: белый кружок с тёмной иконкой, подпись --ink.
   color задаём явно: у «Ещё» иконка — глиф ⋯, а не эмодзи, и он наследует
   цвет вкладки; без этого на светлой теме получаем тёмное на тёмном. */
html[data-ui="v2"] .tab-bar .tab.active .ic,
html[data-ui="v2"] .tab-bar .tab-more.open .ic {
  background: #fff;
  color: #0B0B0C;
  transform: none;
}
html[data-theme="light"][data-ui="v2"] .tab-bar .tab.active .ic,
html[data-theme="light"][data-ui="v2"] .tab-bar .tab-more.open .ic {
  background: #1C1C1E;
  color: #FFFFFF;
}
html[data-ui="v2"] .tab-bar .tab.active,
html[data-ui="v2"] .tab-bar .tab-more.open { color: var(--ink); }
html[data-ui="v2"] .tab-bar .tab.active .lb,
html[data-ui="v2"] .tab-bar .tab-more.open .lb { color: var(--ink); }
html[data-ui="v2"] .tab-bar .tab:active { transform: scale(.94); }
html[data-ui="v2"] .tab-bar .tab-more .ic { letter-spacing: .06em; font-size: 22px; }
/* Бейдж на иконке — кружок теперь 36px, сдвигаем к его краю. */
html[data-ui="v2"] .tab-badge { top: 0; right: 0; }

/* ===========================================================================
   12. ШТОРКА «Ещё»
   =========================================================================== */
html[data-ui="v2"] .more-sheet {
  /* moresheet: радиус 24 — как .msheet в макете (было 28). */
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--line);
  padding: 10px 16px
           calc(var(--v2-dock-h) + var(--v2-dock-gap) + var(--safe-bottom) + 12px);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .35);
  /* Длинные меню (куратор, директор) не должны уезжать за верх экрана —
     шторка упирается в 88vh и скроллится внутри себя. */
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-ui="v2"] .more-sheet::-webkit-scrollbar { width: 0; }
html[data-ui="v2"] .more-grab {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  /* moresheet: 0/12 как .grab в макете. */
  margin: 0 auto 12px;
}
/* Сетка 3 колонки, gap 8; плитка 84: иконка 28 + подпись 13. Размеры сняты
   с макета (.mg / .mi в out/student.html, секция data-v="2"). */
html[data-ui="v2"] .more-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
html[data-ui="v2"] .more-item {
  /* moresheet: 84/14/10-6/gap 6 — один в один с .mi макета. */
  min-height: 84px;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--surface-2);
  gap: 6px;
  justify-content: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
html[data-ui="v2"] .more-item .ic { font-size: 28px; line-height: 1; }
html[data-ui="v2"] .more-item .lb { font-size: 13px; font-weight: 400; }
/* moresheet: в макете активный пункт в шторке НЕ подсвечен — теперь в сетке
   лежат и вкладки нижней панели, и подсветка «Главной» спорила бы с доком.
   Класс .active разметка больше не ставит, правило гасим на случай кэша. */
html[data-ui="v2"] .more-item.active {
  background: var(--surface-2);
  color: var(--ink-2);
}
html[data-ui="v2"] .more-item.danger,
html[data-ui="v2"] .more-item.danger .lb { color: var(--danger); }
html[data-ui="v2"] .more-sec { padding: 12px 2px 2px; letter-spacing: .09em; }

/* Ряд переключателей: кнопки 44, радиус 14, подпись справа 13 --muted. */
html[data-ui="v2"] .more-toggles {
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
html[data-ui="v2"] .more-toggles .tgl {
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--v2-r-sm);
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 17px;
}
/* moresheet: в макете кнопка масштаба подписана «🔍 100%» — под флагом
   показываем процент прямо на ней, кнопка при этом растягивается. */
html[data-ui="v2"] .more-toggles .tgl.js-zoom-toggle {
  width: auto;
  padding: 0 14px;
  gap: 6px;
}
html[data-ui="v2"] .more-toggles .tgl.js-zoom-toggle .zoom-cur {
  /* Без флага span скрыт инлайновым display:none — прод остаётся прежним. */
  display: inline !important;
  font-size: 17px;
  color: var(--ink);
}
html[data-ui="v2"] .more-toggles .tgl.tgl-lang {
  width: auto;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}
html[data-ui="v2"] .more-toggles .tgl.on { border: 1px solid var(--accent); }
html[data-ui="v2"] .more-toggles-hint { font-size: 13px; color: var(--muted); line-height: 1.2; }

/* .zoom-box в app.css задан display:flex — атрибут hidden он перебивает, и
   ползунок масштаба виден всегда (так на проде и без флага). Под флагом
   уважаем hidden: блок раскрывается только по кнопке 🔍. Разметку и скрипты
   не трогаем — только видимость. */
html[data-ui="v2"] .zoom-box[hidden] { display: none; }
html[data-ui="v2"] .zoom-box { gap: 10px; margin-top: 12px; }
html[data-ui="v2"] .zoom-step {
  width: 44px; height: 44px;
  border-radius: var(--v2-r-sm);
  border: 0;
  background: var(--surface-2);
  font-size: 20px;
}
html[data-ui="v2"] .zoom-val { font-size: 13px; color: var(--muted); }
html[data-ui="v2"] .zoom-reset {
  min-height: 44px;
  border: 0;
  border-radius: var(--v2-r-sm);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- 13. Сегментные переключатели ---------- */
/* Четверти (.q-picker), дни недели (.daytabs), период (.td-seg) — единый вид
   чипов 36px/радиус 18, ряд со своим скроллом, без распирания страницы. */
html[data-ui="v2"] .daytabs,
html[data-ui="v2"] .td-daytabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--v2-gap);
  padding-bottom: 2px;
}
html[data-ui="v2"] .q-picker { margin-bottom: var(--v2-gap); }
html[data-ui="v2"] .q-picker::-webkit-scrollbar,
html[data-ui="v2"] .rep-q::-webkit-scrollbar,
html[data-ui="v2"] .td-seg::-webkit-scrollbar,
html[data-ui="v2"] .daytabs::-webkit-scrollbar,
html[data-ui="v2"] .td-daytabs::-webkit-scrollbar { height: 0; }
/* s1: сегмент — единый трек surface-2 радиус 10, активный сегмент surface-3
   с тенью (как .seg в эталоне). Четверти I–IV и период — именно сегмент. */
html[data-ui="v2"] .q-picker,
html[data-ui="v2"] .td-seg {
  display: inline-flex;
  gap: 0;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 2px;
  overflow-x: auto;
  max-width: 100%;
}
html[data-ui="v2"] .q-picker > a,
html[data-ui="v2"] .td-seg > a {
  flex: 1 0 auto;
  min-height: 34px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
/* Дни недели остаются рядом пилюль-чипов 32 — их много, сегмент не влезет. */
html[data-ui="v2"] .daytabs > .daytab,
html[data-ui="v2"] .td-daytabs > .td-daytab {
  flex: 1 0 auto;
  min-height: 32px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
/* Активное состояние в шаблонах называется по-разному: .active (четверти,
   период) и .on (дни недели — ставится скриптом). Покрываем оба. */
/* s1: активный сегмент — приподнятая плашка surface-3, не инверсия. */
html[data-ui="v2"] .q-picker > a.active,
html[data-ui="v2"] .q-picker > a.on,
html[data-ui="v2"] .td-seg > a.active,
html[data-ui="v2"] .td-seg > a.on {
  background: var(--surface-3);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
/* Дни недели — активный по-прежнему инверсией: это выбор, а не сегмент. */
html[data-ui="v2"] .daytabs > .daytab.active,
html[data-ui="v2"] .daytabs > .daytab.on,
html[data-ui="v2"] .td-daytabs > .td-daytab.active,
html[data-ui="v2"] .td-daytabs > .td-daytab.on {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Полоса классов на главной ученика (.grade-strip) — свой скролл. */
html[data-ui="v2"] .grade-strip { margin-bottom: var(--v2-gap); }
html[data-ui="v2"] .grade-strip .gs-title {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
html[data-ui="v2"] .grade-strip .gs-row {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
html[data-ui="v2"] .grade-strip .gs-row::-webkit-scrollbar { height: 0; }
html[data-ui="v2"] .grade-strip .gs {
  flex: 0 0 auto; min-width: 44px; height: 34px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 15px; font-weight: 600;
}
html[data-ui="v2"] .grade-strip .gs.mine { background: var(--accent); color: var(--accent-ink); }

/* ---------- 13b. Карточки /assess (s1) ---------- */
/* Предмет — inset-группа: шапка, строки работ на hairline, действие снизу. */
html[data-ui="v2"] .subj-block2 {
  background: var(--surface);
  border-radius: var(--v2-r);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  margin-bottom: var(--v2-gap);
}
html[data-ui="v2"] .subj-head { padding: 12px 14px 10px; gap: 10px; }
html[data-ui="v2"] .subj-name {
  font-family: var(--v2-f-d);
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
html[data-ui="v2"] .subj-hours { font-size: 11px; color: var(--muted); }
html[data-ui="v2"] .subj-ic {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
html[data-ui="v2"] .work-card { min-height: 44px; }
html[data-ui="v2"] .wc-title { font-size: 13px; }
html[data-ui="v2"] .wc-sub { font-size: 12px; color: var(--muted); }

/* ---------- 14. Дока нет — восстанавливаем нижний отступ ---------- */
/* Страницы без навигации (логин, встроенная рама) под док не подкладываются. */
html[data-ui="v2"] .in-frame .tab-bar { display: none !important; }


/* ---------- 15. sched-unify: расписание на телефоне (02.09) ---------- */
/* sched-unify
   Единый вид расписания для всех ролей на телефоне:
   • переключатель режима /teach/schedule (.ts-toggle → .ts-seg) — две
     компактные карточки в ряд, активная инвертирована с галочкой ✓;
   • список уроков (.mrow в .daypanel / .td-daypanel) — время СЛЕВА
     колонкой 64px, справа цветная плашка предмета по категории
     (--tt-bg/--tt-bd/--tt-ac/--tt-tx из tt-cat-*, объявлены в шаблонах);
   • обед (.mlunch) — тихая строка на всю ширину, без плашки;
   • дни-недели (.daytab/.td-daytab) — пилюли 44px, активная инвертирована.
   Все селекторы под html[data-ui="v2"] — это даёт 0,1,1 против 0,1,0
   у inline-<style> в шаблонах, поэтому наши правила выигрывают. */

/* --- 15a. Переключатель режима: две карточки в ряд --- */
html[data-ui="v2"] .ts-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 var(--v2-gap);
  flex-wrap: nowrap;
}
html[data-ui="v2"] .ts-toggle > .ts-seg {
  position: relative;
  flex: none;
  min-width: 0;
  min-height: 60px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font-family: var(--v2-f-d);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.24;
  box-shadow: none;
  /* Эмодзи в шаблоне — голый текстовый узел без обёртки, поэтому строку
     «иконка + заголовок» держим одним блоком, а эмодзи поднимаем до 20px
     через ::first-letter (первый символ строки — как раз он). */
  display: block;
  -webkit-appearance: none;
  appearance: none;
}
html[data-ui="v2"] .ts-toggle > .ts-seg::first-letter {
  font-size: 20px;
  line-height: 1;
}
html[data-ui="v2"] .ts-toggle > .ts-seg > small {
  display: block;
  margin-top: 2px;
  font-family: var(--v2-f-b);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--muted);
}
/* Активная — инвертированная плитка + галочка в правом верхнем углу. */
html[data-ui="v2"] .ts-toggle > .ts-seg.on {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  border-color: transparent;
  box-shadow: none;
}
html[data-ui="v2"] .ts-toggle > .ts-seg.on > small {
  color: color-mix(in srgb, var(--btn-primary-ink) 62%, transparent);
}
html[data-ui="v2"] .ts-toggle > .ts-seg.on::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--btn-primary-ink);
}
/* Место под галочку, чтобы длинный заголовок под неё не залезал. */
html[data-ui="v2"] .ts-toggle > .ts-seg.on { padding-right: 32px; }

/* --- 15b. Дни недели: пилюли 44px --- */
html[data-ui="v2"] .daytabs > .daytab,
html[data-ui="v2"] .td-daytabs > .td-daytab {
  min-height: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}
html[data-ui="v2"] .daytabs > .daytab.on,
html[data-ui="v2"] .daytabs > .daytab.active,
html[data-ui="v2"] .td-daytabs > .td-daytab.on,
html[data-ui="v2"] .td-daytabs > .td-daytab.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  border-color: transparent;
}

/* --- 15c. Список уроков: время слева, цветная плашка справа --- */
/* Панель дня — просто вертикальный стек, без своей рамки. */
/* :not([hidden]) обязателен: display:flex перебил бы атрибут hidden и на
   экране оказались бы все дни сразу. */
html[data-ui="v2"] .sched-mobile .daypanel:not([hidden]),
html[data-ui="v2"] .tsched-mobile .td-daypanel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html[data-ui="v2"] .sched-mobile .mrow,
html[data-ui="v2"] .tsched-mobile .mrow {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  min-height: 60px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Левая колонка: номер урока сверху, время начала крупно, конец приглушённо.
   Времени конца в разметке нет (шаблон печатает только p.start), поэтому
   вторая строка остаётся пустой — колонка всё равно выровнена. */
html[data-ui="v2"] .sched-mobile .mrow > .mrow-time,
html[data-ui="v2"] .tsched-mobile .mrow > .mrow-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  width: 64px;
  padding: 0 0 0 2px;
  font-variant-numeric: tabular-nums;
}
/* <b> в разметке — номер урока; <span> — время начала. Меняем их ролями
   визуально: номер уходит наверх мелким, время встаёт крупным. */
html[data-ui="v2"] .sched-mobile .mrow > .mrow-time > b,
html[data-ui="v2"] .tsched-mobile .mrow > .mrow-time > b {
  order: 1;
  font-family: var(--v2-f-b);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
}
html[data-ui="v2"] .sched-mobile .mrow > .mrow-time > b::after,
html[data-ui="v2"] .tsched-mobile .mrow > .mrow-time > b::after {
  content: " урок";
  font-weight: 500;
}
html[data-ui="v2"] .sched-mobile .mrow > .mrow-time > span,
html[data-ui="v2"] .tsched-mobile .mrow > .mrow-time > span {
  order: 2;
  font-family: var(--v2-f-d);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
}
/* Правая колонка — плашка-карточка предмета с цветом категории. */
html[data-ui="v2"] .sched-mobile .mrow > .mrow-body,
html[data-ui="v2"] .tsched-mobile .mrow > .mrow-body {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tt-bg, var(--surface));
  border: 1px solid var(--tt-bd, var(--line));
  box-shadow: inset 3px 0 0 var(--tt-ac, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html[data-ui="v2"] .sched-mobile .mrow .mrow-subj,
html[data-ui="v2"] .tsched-mobile .mrow .mrow-subj {
  font-family: var(--v2-f-d);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.22;
  color: var(--tt-tx, var(--ink));
}
html[data-ui="v2"] .sched-mobile .mrow .mrow-subj .tt-extra,
html[data-ui="v2"] .tsched-mobile .mrow .mrow-subj .tt-extra {
  font-size: 13px;
  font-weight: 400;
  opacity: .72;
}
html[data-ui="v2"] .sched-mobile .mrow .mrow-who,
html[data-ui="v2"] .tsched-mobile .mrow .mrow-who {
  margin-top: 2px;
  font-family: var(--v2-f-b);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--muted);
}

/* --- 15d. Обед — тихая строка на всю ширину, без плашки --- */
html[data-ui="v2"] .sched-mobile .mlunch,
html[data-ui="v2"] .tsched-mobile .mlunch {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  background-image: none;
  border: 0;
  color: var(--muted);
  font-family: var(--v2-f-b);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
html[data-ui="v2"] .sched-mobile .mempty,
html[data-ui="v2"] .tsched-mobile .mempty {
  border-radius: var(--v2-r);
  background: var(--surface);
  padding: 28px 16px;
  font-size: 14px;
}

/* --- 15e. Панель класса у классрука: мобильной ленты в разметке нет --- */
/* Шаблон teach/schedule.html рисует для «Класса N» только широкую таблицу
   (макрос grid), .mrow там не создаётся, а шаблоны править нельзя. Скрипт
   страницы вешает .tt-today на колонку сегодняшнего дня — этого хватает,
   чтобы на телефоне показать один день столбиком: прячем остальные колонки
   и оформляем оставшийся chip как плашку из 15c. */
html[data-ui="v2"] .ts-panel[data-panel="class"] .table-scroll {
  overflow: visible;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
/* min-width:max-content из app.css распирал бы таблицу шире экрана. */
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color th,
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color td {
  position: static;
  white-space: normal;
  border-bottom: 0;
  box-shadow: none;
  text-align: left;
  vertical-align: middle;
}
/* Шапку «Урок / Среда» на телефоне не показываем — день уже виден по чипам. */
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color thead { display: none; }
/* classdays: видна колонка выбранного дня (.tt-view ставит скрипт шаблона
   по клику на .class-daytabs), а не жёстко сегодняшняя (.tt-today). */
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color th:not(.sticky-col):not(.tt-view),
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color td:not(.sticky-col):not(.tt-view) {
  display: none;
}
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color td.sticky-col {
  width: 92px;
  padding: 4px 10px 4px 2px;
  overflow: hidden;
  background: none;
  font-variant-numeric: tabular-nums;
}
/* classdays: снимаем «приподнятую колонку» с любой видимой ячейки дня */
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color td.tt-today,
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color td.tt-view {
  background: none;
  box-shadow: none;
  padding: 4px 0;
}
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color td.sticky-col b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color td.sticky-col .bz-time {
  display: block;
  white-space: nowrap;
  font-family: var(--v2-f-d);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color .tt-chip {
  height: auto;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--tt-ac, transparent);
  justify-content: center;
}
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color .tt-chip .bz-subj {
  font-family: var(--v2-f-d);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.22;
  white-space: normal;
}
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color .tt-chip .bz-who {
  font-size: 13px;
  line-height: 1.28;
  white-space: normal;
}
/* Пустой урок: «—» на телефоне только мешает — прячем, строка и так пустая. */
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color .bz-dash { display: none; }
html[data-ui="v2"] .ts-panel[data-panel="class"] table.tt-color tr:not(:has(.tt-chip)) td.sticky-col {
  opacity: .45;
}

} /* /@media (max-width: 899px) */

/* dockgap: в standalone/PWA нет панели браузера — добавляем safe-area */
@media (max-width: 899px) and (display-mode: standalone) {
  html[data-ui="v2"] .tab-bar { bottom: calc(var(--v2-dock-gap) + var(--safe-bottom)); }
}