/* ============================================================================
   Apex Minds — Навчання, the cabinet (apex-minds.org/cabinet). Loaded after styles.apex.css.
   MOBILE FIRST: the base rules are the phone (360–430px); wider layouts are
   added at 720px and 1024px. Tokens only (DESIGN.md «The Ruled Page»): cream
   ground, ink text, cobalt the single action colour, 1px drawn borders, flat at
   rest, the клітинка grid only on surfaces that carry a problem. Topic status
   reads by glyph + label (○ ◐ ●) — never colour alone; difficulty never colour.
   ============================================================================ */

body.cabinet { background: var(--ground); color: var(--text); font-family: var(--font-sans); margin: 0; min-height: 100vh; }
.cabinet * { box-sizing: border-box; }
.cabinet [hidden] { display: none !important; }
.cabinet :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.cab-main:focus, .cab-main:focus-visible { outline: none; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.cab-top { position: sticky; top: 0; z-index: 30; background: var(--card); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
/* The header is the public site's, measure for measure (styles.apex.css
   .site-header-inner and its nav): the same --frame row, the same --gutter, the
   same tile, link padding and gaps, so stepping between «Навчання» and «Усі
   задачі» moves nothing (user 2026-10-11). Change both files together. */
.cab-top-in { display: flex; align-items: center; gap: 10px; padding: 16px var(--gutter); max-width: var(--frame); margin: 0 auto; position: relative; }
/* The brand stands a link tall, so the row keeps its height signed out, with no links beside it. */
/* √ is «Навчання»'s home (a student's предмети), on every screen beside the back link (user 2026-10-09). */
.cab-top .site-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 34px; min-height: calc(var(--fs-label) * 1.6 + 14px); flex: none; text-decoration: none; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: .02em; text-transform: uppercase; }
.cab-top .brand-mark { width: 34px; height: 34px; }
.cab-top .brand-mark rect { fill: var(--cobalt); }
.cab-top .brand-mark .grid { fill: none; stroke: #fff; stroke-opacity: .13; stroke-width: 2; }
.cab-top .brand-mark .root { fill: none; stroke: var(--card); stroke-width: 7.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-word { display: none; }
.cab-badge { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cobalt-deep); background: var(--cobalt-wash); border-radius: var(--radius-full); padding: 3px 9px; white-space: nowrap; }
/* No «Навчання» badge, signed in or out: only staff get theirs («Вчитель»,
   «Редактор», «Адміністратор») when app.js paints. */
.cab-badge:not(.is-staff) { display: none; }
/* Signed in (every role), pushed right: «Навчання» · «Усі задачі» · «Добірка» ·
   avatar (user 2026-10-09). Quiet text links like the public header's; only
   actions are cobalt. «Навчання» is the current place on every /cabinet page.
   Phones keep √ · back · avatar: the two archive links are on the profile page. */
.cab-site { margin-left: auto; display: flex; align-items: center; gap: 0; flex: none; }
.cab-hlink { display: none; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font: 400 var(--fs-label)/1.6 var(--font-sans); white-space: nowrap; position: relative; }
.cab-hlink svg { width: 18px; height: 18px; flex: none; display: none; }
.cab-hlink:hover { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.cab-hlink[aria-current="page"] { color: var(--cobalt-deep); }
.cab-hlink[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px; border-radius: 1px; background: var(--cobalt); }
/* The avatar: a 36px circle with a 1px ink ring (the public header's
   .nav-avatar), the photo cropped to it or the initials by hand (Caveat); the
   ::before widens the tap target to 44px unseen. Same look as styles.apex.css,
   scoped to .cab-top so the public rules' margins never apply here. */
.cab-top a.nav-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; margin: -1px 0 -1px 8px; padding: 0; border: 1px solid var(--text); border-radius: 50%; background: var(--card); color: var(--text); font: 700 20px/1 var(--font-script); letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.cab-top a.nav-avatar::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.cab-top a.nav-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cab-top a.nav-avatar span { display: block; }
.cab-top a.nav-avatar:hover { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt); }
.cab-top a.nav-avatar:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.me-menu { position: absolute; right: 12px; top: calc(100% - 4px); width: min(300px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--text); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); padding: 8px; display: grid; gap: 2px; z-index: 40; }
.me-menu[hidden] { display: none; }
.me-menu.is-sheet { position: fixed; top: auto; left: 8px; right: 8px; width: auto; bottom: calc(64px + env(safe-area-inset-bottom)); border-radius: var(--radius-lg); padding: 10px; }
.me-menu.is-sheet a, .me-menu.is-sheet button { min-height: 48px; }
.me-menu a, .me-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); background: none; border: 0; font: inherit; font-size: var(--fs-body); cursor: pointer; text-align: left; }
.me-menu a:hover, .me-menu button:hover { background: var(--cobalt-wash); }
.me-who { margin: 4px 10px 8px; }
.cab-nav-top { display: none; }
/* The site header's phone and touch steps: a 12px row and a 32px tile on a
   phone; 44px targets wherever the pointer is a finger. */
@media (max-width: 719px) { .cab-top-in { padding: 12px 16px; } .cab-top .site-brand { gap: 10px; } .cab-top .brand-mark { width: 32px; height: 32px; } }
@media (pointer: coarse) { .cab-top .site-brand, .cab-hlink { min-height: 44px; } }

/* Phone navigation: a bottom tab bar, thumb-reachable, with the safe area. */
.cab-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.cab-tabbar[hidden] { display: none; }
.cab-tabbar a, .cab-tabbar button { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; min-height: 56px; text-decoration: none; color: var(--text-muted); font: 500 var(--fs-micro) var(--font-sans); background: none; border: 0; cursor: pointer; }
.cab-tabbar a.is-active, .cab-tabbar button.is-active { color: var(--cobalt-deep); }
body.has-tabbar .cab-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* The page column is the header's: the same --frame row and --gutter, so a
   page's edges stand under the brand and the avatar, as on the public site. */
.cab-main { width: 100%; max-width: var(--frame); margin: 0 auto; padding: 20px var(--gutter) 48px; }
.cab-narrow { max-width: 720px; margin: 0 auto; }
.cab-wide { max-width: 1060px; margin: 0 auto; }
.boot { text-align: center; color: var(--text-muted); padding: 64px 0; }
/* Where the page sits (ui.js crumbs()): every level up the tree, above the
   heading. Links in text-2, a drawn chevron between steps, the current page in ink.
   Wraps on a phone; one long name is cut, never the whole trail. */
.cab-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: -8px 0 -6px; padding: 0; list-style: none; font-size: var(--fs-label); line-height: 1.3; }
.cab-crumbs li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
/* Lucide chevron-right; a mask has no non-scaling stroke, so 2.57 (= 1.5 × 24 / 14px) draws the icons' 1.5px line. */
.cab-crumbs li + li::before { content: ''; flex: none; width: 14px; height: 14px; margin: 0 2px; background: var(--stroke);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.57' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.57' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cab-crumbs a, .cab-crumbs [aria-current] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; padding: 9px 4px; }
.cab-crumbs li:first-child > * { padding-left: 0; }
.cab-crumbs a { color: var(--text-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; border-radius: var(--radius-sm); transition: color .15s, text-decoration-color .15s; }
.cab-crumbs a:hover { color: var(--cobalt-deep); text-decoration-color: color-mix(in srgb, var(--cobalt-deep) 40%, transparent); }
.cab-crumbs [aria-current] { color: var(--text); font-weight: 500; }
@media (min-width: 720px) { .cab-crumbs a, .cab-crumbs [aria-current] { max-width: 36ch; } }
@media (pointer: coarse) { .cab-crumbs a, .cab-crumbs [aria-current] { padding-top: 13px; padding-bottom: 13px; } .cab-crumbs ol { margin: -12px 0 -10px; } }
/* A phone: one line, the step up — «‹ Заняття 1». The step up is the last linked step
   (`.is-up`, set by crumbs()), not the second-to-last: a trail may end in a link. The heading
   names where you are, and the step up has its own step up, so the whole tree stays walkable. */
@media (max-width: 719px) {
    .cab-crumbs li { display: none; }
    .cab-crumbs li.is-up { display: inline-flex; }
    /* Lucide chevron-left; a mask has no non-scaling stroke, so 2.25 (= 1.5 × 24 / 16px) draws the icons' 1.5px line. */
    .cab-crumbs li.is-up::before { content: ''; flex: none; width: 16px; height: 16px; margin: 0 2px 0 -3px; background: var(--text-2);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
    .cab-crumbs li.is-up > a { padding-left: 0; max-width: calc(100vw - 64px); }
}
/* A student page's trail is its first child, full width, not pinned (user 2026-10-11). */
.st-page > .cab-crumbs { grid-column: 1 / -1; }
.st-page > .cab-crumbs + .st-head { margin-top: -18px; }   /* the h1 as under .st-head's 6px gap: 24px row gap − 6 */

/* ── Type ────────────────────────────────────────────────────────────────── */
/* A label over content (a card's head, an eyebrow, a stat, a table head) is the
   archive's Micro, as on the problem page («Умова задачі», «Пов’язані теми»):
   Inter 600, 13px, .06em, capitals, text-2 (user 2026-10-11). */
.eyebrow { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 0 0 6px; }
.cab-title { font-family: var(--font-display); font-size: var(--fs-title); line-height: 1.1; letter-spacing: -.015em; font-weight: 600; margin: 0 0 10px; }
.cab-h1 { font-family: var(--font-display); font-size: var(--fs-title); line-height: 1.15; font-weight: 600; margin: 0 0 12px; }
.cab-h2 { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 28px 0 10px; }   /* a section's label, as «Пов’язані теми» */
.lead { font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); margin: 0 0 18px; max-width: 60ch; }
.fine { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }
/* Markdown with formulas. .math-text is a problem's own text and the mathematics
   explained (statement, answer, solution, theory, cards, the tutor) in CMU Serif;
   .md-text is everything else that may carry a formula (an instruction, a note)
   in the interface face. Never put the serif on interface prose for its formulas. */
.math-text { font-family: var(--font-math); font-size: var(--fs-read); line-height: 1.55; -webkit-text-stroke-width: .02em; }
.math-text, .md-text { overflow-wrap: anywhere; }
:is(.math-text, .md-text) > p:first-child { margin-top: 0; } :is(.math-text, .md-text) > p:last-child { margin-bottom: 0; }
:is(.math-text, .md-text) .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
/* Confirmation is sprout; a miss is ink, said in words (DESIGN.md › Answer states): red is the archive's pencil. */
.v-ok { color: var(--sprout-text); font-weight: 600; }
.v-no { color: var(--text); font-weight: 600; }
.chip { display: inline-block; font-size: var(--fs-micro); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: var(--cobalt-wash); color: var(--cobalt-deep); white-space: nowrap; }

/* ── Controls ────────────────────────────────────────────────────────────── */
/* Buttons are the site's one family (styles.apex.css › Buttons): .btn + .btn-primary /
   .btn-drawn / .btn-quiet, .btn-sm, .btn-block. Rules here only place them. */
.ans-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Phone: the answer's actions fill the row. */
.ans-actions .btn { flex: 1 1 auto; }
.ans-actions .btn-primary { flex-basis: 100%; }
.ans-paper { margin: 0 0 12px; font-size: var(--fs-label); color: var(--text-2); background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-md); padding: 12px 14px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin: 0 0 12px; }
.card-h { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 0 0 8px; }
.grid-paper { background-image: linear-gradient(rgba(44,70,216,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(44,70,216,.045) 1px, transparent 1px); background-size: 23px 23px; background-position: -1px -1px; }

.cab-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cab-wide > .field, .cab-narrow > .field { margin: 12px 0 14px; }
.field > span, .field > legend { font-weight: 600; font-size: var(--fs-label); padding: 0; }
.field i { font-weight: 400; color: var(--text-muted); }
.field small { color: var(--text-muted); font-size: var(--fs-label); }
.cabinet input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]), .cabinet select, .cabinet textarea { font: 16px/1.4 var(--font-sans); color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; min-height: 44px; width: 100%; max-width: 100%; }
.cabinet textarea { min-height: 96px; resize: vertical; }
.cabinet input:not([type=range]):focus, .cabinet select:focus, .cabinet textarea:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 3px var(--cobalt-wash); }
.opt { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: var(--fs-body); }
.opt input { width: 20px; height: 20px; accent-color: var(--cobalt); flex: none; margin: 0; }
.rule { align-items: flex-start; } .rule input { margin-top: 3px; }
.row2 { display: grid; gap: 12px; }
.pair { display: flex; gap: 6px; align-items: center; }
.pair input { width: auto !important; flex: 1 1 0; min-width: 0; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.inline-form .field, .inline-form input { flex: 1 1 200px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
.filters select, .filters input:not([type=checkbox]) { width: auto !important; flex: 1 1 160px; }
.filters .opt { flex: none; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; font-size: var(--fs-label); }
.subnav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.subnav a, .subnav button { flex: none; padding: 12px 12px; min-height: 44px; text-decoration: none; color: var(--text-2); font: 500 var(--fs-label) var(--font-sans); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; white-space: nowrap; }
.subnav .is-active { color: var(--cobalt-deep); border-bottom-color: var(--cobalt); font-weight: 600; }
/* The admin's tabs wrap rather than scroll: at 375px a scrolled strip cut the active label. */
.adm-tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
@media (max-width: 719.98px) { .adm-tabs a { padding: 12px 10px; } }
details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; }
details > summary::before { content: "▸"; color: var(--text-muted); }
details[open] > summary::before { content: "▾"; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.block > summary::before, .block[open] > summary::before { content: none; }

/* ── Responsive table: cards on phones, a grid from 720px ───────────────── */
.rtable { display: grid; gap: 8px; }
.rt-head { display: none; }
.rt-row { display: grid; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; }
.rt-row > span { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-label); }
.rt-row > span:first-child { display: block; font-size: var(--fs-body); }
.rt-row > span:not(:first-child)::before { content: attr(data-label); color: var(--text-muted); }
.rt-row > span.clip { min-width: 0; overflow-wrap: anywhere; }
.bar { display: inline-block; width: 80px; height: 6px; background: var(--line); border-radius: var(--radius-full); vertical-align: middle; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--cobalt); }

/* ── Admin & teacher ─────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 4px; align-content: start; }
.kpi b { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.35; }
/* «Витрати ШІ»: checks waiting in the queue; at the month's cap, said in full. */
.kpi-q { display: flex; gap: 6px; align-items: flex-start; }
.kpi-q svg { flex: none; }
.kpi .kpi-q.is-alert, .kpi .kpi-q.is-alert span { color: var(--text); font-weight: 600; }
.todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.todo li { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0; }
.todo li p { margin: 2px 0 0; }
.todo .btn { flex: none; }
.gcards { display: grid; gap: 10px; }
.gcard { display: grid; gap: 10px; margin: 0; }
.gc-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.gc-h a { color: var(--text); text-decoration: none; }
.gc-next { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.gc-next p { margin: 0; }
.gc-topic { font-size: var(--fs-body); }
.gc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gfill { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }

/* Charts (one series each; values labelled; hover titles) */
.vbars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 18px; }
.vb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.vb-b { flex-shrink: 0; width: 100%; max-width: 26px; background: var(--cobalt); border-radius: 3px 3px 0 0; min-height: 2px; }
.vb-stack { flex-shrink: 0; width: 100%; max-width: 26px; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 2px; gap: 2px; }
.vb-stack .vb-b { border-radius: 0; max-width: none; min-height: 0; }
.vb-ai { background: var(--cobalt-wash); border: 1px solid var(--cobalt); min-height: 0; }
.vb-v { font-size: var(--fs-micro); color: var(--text-2); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.vb-l { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 4px; }
/* The 31-day spend chart: on a narrow card the sums go but the top day's (vb-top), and
   only every 7th date back from today stays (vb-tick); the bars' titles keep all. */
.vb-card { container-type: inline-size; }
@container (max-width: 860px) { .vb-31 .vb:not(.vb-top) .vb-v { visibility: hidden; } }
@container (max-width: 600px) { .vb-31 .vb:not(.vb-tick) .vb-l { visibility: hidden; } }
.legend { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; }
.lg-t { background: var(--cobalt); } .lg-ai { background: var(--cobalt-wash); border: 1px solid var(--cobalt); }
.stack-list { display: grid; gap: 12px; }
.sl-h { font-size: var(--fs-label); margin-bottom: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.sl-n { color: var(--text-muted); }
.sl-bar { display: flex; height: 12px; border-radius: var(--radius-full); overflow: hidden; gap: 2px; background: var(--ground); }
.s-learn { background: var(--line); } .s-basics { background: rgba(44,70,216,.45); } .s-mastered { background: var(--cobalt); }
.sl-num { margin-top: 2px; }

.lessons { list-style: none; padding: 0; display: grid; gap: 6px; }
.lessons li { display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.lessons li.is-past { opacity: .7; }
.lessons a { color: var(--text); text-decoration: none; }
.mats { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mats li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.mats li > p { flex-basis: 100%; margin: 0; }
.addbox { display: grid; gap: 10px; margin-top: 10px; }
.addbox > details { margin: 0; }
.addbox summary { color: var(--cobalt-deep); }
.bank { list-style: none; padding: 4px 10px; display: grid; gap: 4px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 8px 0; }
.bank li { border-bottom: 1px dashed var(--line); padding: 2px 0 6px; }
.bank-st summary { font-weight: 400; font-size: var(--fs-label); color: var(--text-2); }
.bank-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--text); border-radius: var(--radius-sm); overflow: hidden; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; place-items: center; min-height: 44px; font-size: var(--fs-label); cursor: pointer; border-right: 1px solid var(--line); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--cobalt); color: var(--card); }
.seg input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: -3px; }
.bonus { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chipbtn { font: 500 var(--fs-label) var(--font-sans); padding: 8px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); color: var(--text-2); cursor: pointer; }
.chipbtn:hover { border-color: var(--cobalt); color: var(--cobalt-deep); }
.rv { display: grid; gap: 8px; }
.rv-h { margin: 0; }
.work { white-space: pre-wrap; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; }
.heatwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); contain: inline-size; }
.heat { border-collapse: collapse; font-size: var(--fs-micro); }
.heat th, .heat td { padding: 6px; border-bottom: 1px solid var(--line); }
.heat tbody th { text-align: left; font-weight: 400; white-space: nowrap; position: sticky; left: 0; background: var(--card); }
.heat thead th span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; font-weight: 500; }
.heat td { text-align: center; color: var(--cobalt); font-size: var(--fs-body); }
.dev-box { margin-top: 24px; border-style: dashed; }
.dev-list { display: grid; gap: 6px; margin: 8px 0 12px; }
.dev-h { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 10px 0 2px; }
.dev-acc { display: grid; text-align: left; gap: 0; padding: 8px 10px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; font: inherit; font-size: var(--fs-label); color: var(--text); }
.dev-acc span { font-size: var(--fs-micro); color: var(--text-muted); }
.dev-acc:hover { border-color: var(--cobalt); background: var(--cobalt-wash); }

/* ── Student ─────────────────────────────────────────────────────────────── */
.hero { padding-top: 12px; }
.steps { padding-left: 20px; display: grid; gap: 6px; margin: 16px 0 20px; }
.p-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background-color: var(--card); margin-bottom: 16px; }
.p-title { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; margin: 0 0 4px; line-height: 1.25; }
.p-code { font-size: var(--fs-micro); color: var(--text-muted); letter-spacing: .04em; margin: 0 0 12px; }
.p-statement { font-size: var(--fs-math); }
.p-statement img { max-width: 100%; height: auto; }
.p-meta { font-size: var(--fs-label); color: var(--text-muted); margin: 12px 0 0; }
.self { margin: 16px 0; }
.self-opts { display: grid; gap: 8px; margin-top: 8px; }
.ans { display: grid; gap: 12px; margin: 16px 0; }
.yn { display: flex; gap: 24px; }
.ans-err { color: var(--text); font-weight: 600; margin: 0; font-size: var(--fs-label); }
.verdict { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); padding: 12px 14px; margin: 12px 0; }
.verdict.v-ok { border-color: var(--sprout-text); background: var(--sprout-wash); font-weight: 400; color: var(--text); }
.verdict.v-no { border-color: var(--line); background: var(--card); font-weight: 400; color: var(--text); }
.verdict p { margin: 0 0 6px; } .verdict p:last-child { margin: 0; }
.sol { display: grid; gap: 6px; }
.level-n { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; margin: 0; line-height: 1; }
.level-n span { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: 6px; }
.level-n small { font-size: var(--fs-lead); color: var(--text-muted); font-weight: 500; }
.level-t { margin: 6px 0 0; color: var(--text-2); }
.enrol.is-in { border-color: var(--cobalt); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0 12px; max-width: 420px; }
.day { position: relative; }
.day input { position: absolute; opacity: 0; inset: 0; }
.day span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--text); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; font-size: var(--fs-label); }
.day input:checked + span { background: var(--cobalt); color: var(--card); border-color: var(--cobalt); }
.block { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); margin: 12px 0; }
.block > summary { list-style: none; display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; }
.block > summary::-webkit-details-marker { display: none; }
.block[open] > summary { border-bottom: 1px solid var(--line); }
.week { padding: 10px 14px 14px; }
.week + .week { border-top: 1px dashed var(--line); }
.week.is-now { background: var(--cobalt-wash); }
.now { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--card); background: var(--cobalt); border-radius: var(--radius-full); padding: 2px 8px; }
.tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.tasks.card { padding: 6px; }
.task a { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: 'box kind min' 'box t min'; column-gap: 10px; row-gap: 1px; align-items: center; padding: 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); min-height: 44px; }
.task a:hover { background: var(--card); box-shadow: inset 0 0 0 1px var(--cobalt); }
.task.is-done .task-t { color: var(--text-muted); }
.task-kind { grid-area: kind; font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.task-t { grid-area: t; font-size: var(--fs-label); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.task-m { grid-area: min; font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
/* A list of rows without a checkbox (lessons) */
.tasks.plain { padding: 6px; }
.tasks.plain .task a { grid-template-columns: 1fr auto; grid-template-areas: 'kind min' 't min'; }
/* «Далі»: the one next step, first on the phone screen */
.next-up { background: var(--cobalt-wash); border: 1px solid var(--cobalt); border-radius: var(--radius-lg); padding: 16px; margin: 4px 0 12px; display: grid; gap: 4px; }
.next-up p { margin: 0; }
.nu-l { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt-deep); }
.nu-t { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; }
.nu-a { display: grid; gap: 8px; margin-top: 10px; }
.install p { margin: 0 0 10px; font-size: var(--fs-label); }
.install .ans-actions .btn-primary { flex-basis: auto; }
.plan-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.pm { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; display: grid; gap: 2px; text-decoration: none; color: var(--text); min-width: 0; }
.pm-l { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.pm b { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.1; }
.pm b small { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 500; }
.pm-s { font-size: var(--fs-micro); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blocks { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.explain { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; display: grid; gap: 8px; }
.theory { padding-left: 20px; display: grid; gap: 8px; }
.theory p { display: inline; margin: 0; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 0; list-style: none; }
.thumbs[hidden] { display: none; }
.thumbs img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* Homework photos: notebook pages stand upright; a tap opens one full size, ✕ drops it. */
.thumbs .ph { position: relative; }
.thumbs .ph img { display: block; width: 96px; height: 128px; background: var(--card); }
.ph-open { display: block; padding: 0; border: 0; background: none; border-radius: var(--radius-sm); cursor: zoom-in; }
.ph-open:hover img { border-color: var(--cobalt); }
.ph-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--text); cursor: pointer; }
.ph-x::after { content: ''; position: absolute; inset: -6px; }   /* 44px to the finger */
.ph-x:hover { border-color: var(--text); }
.ph-x .st-ic { width: 16px; height: 16px; }
/* The full-screen photo: exactly the screen (100vw counted the scrollbar and, with
   the padding, scrolled sideways), never scrolling itself, the page under it held still. */
.ph-view { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; box-sizing: border-box; margin: 0; padding: 16px; border: 0; background: transparent; display: grid; place-items: center; overflow: hidden; overscroll-behavior: contain; }
html:has(dialog.ph-view[open]) { overflow: hidden; }
.ph-view::backdrop { background: rgb(25 30 54 / .9); }   /* ink; older engines give ::backdrop no custom properties */
.ph-view img { max-width: 100%; max-height: calc(100dvh - 32px); object-fit: contain; border-radius: var(--radius-sm); background: var(--card); }
.ph-close { position: fixed; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow-overlay); }
.hw-file { gap: 8px; }
.asmt { padding-left: 20px; display: grid; gap: 6px; }
blockquote { margin: 8px 0; padding: 10px 14px; background: var(--cobalt-wash); border-radius: var(--radius-sm); }
.toggles { display: grid; gap: 2px; }

/* AI tutor */
.tutor { display: grid; gap: 10px; }
.tutor-log { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.tl { padding: 10px 12px; border-radius: var(--radius-sm); max-width: 94%; font-size: var(--fs-body); }
.tl p { margin: 0 0 6px; } .tl p:last-child { margin: 0; }
.tl-t { background: var(--cobalt-wash); justify-self: start; }
.tl-s { background: var(--ground); border: 1px solid var(--line); justify-self: end; }
.tutor-ask { display: flex; gap: 8px; }
.tutor-ask input { flex: 1; min-width: 0; }
.tutor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tutor-actions .btn { flex: 1 1 auto; }

/* Progress chart — one series: 2px cobalt line, 9px markers, recessive grid. */
.chart { width: 100%; height: auto; display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }

/* Practicum: graph game */
.gg { display: grid; gap: 12px; }
.gg-task { margin: 0; }
.gg-board { width: 100%; max-width: 320px; justify-self: center; touch-action: manipulation; user-select: none; }
.gg-edge { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.gg-v { cursor: pointer; outline: none; }
.gg-v circle { fill: var(--card); stroke: var(--text); stroke-width: 2; }
.gg-v:focus-visible circle { stroke: var(--cobalt); stroke-width: 3; }
.gg-v.sel circle { fill: var(--cobalt-wash); stroke: var(--cobalt); stroke-width: 3; }
.gg-v.ok circle { fill: var(--cobalt); stroke: var(--cobalt); }
.gg-v.ok .gg-target { fill: var(--card); }
.gg-v.over circle { stroke: var(--text); stroke-width: 3; stroke-dasharray: 4 3; }
.gg-target { font: 600 17px var(--font-sans); fill: var(--text); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.gg-now { font: 500 var(--fs-micro) var(--font-sans); fill: var(--text-muted); text-anchor: middle; pointer-events: none; }
.gg-meters { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: var(--fs-label); color: var(--text-2); }
.gg-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gg-msg { border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 8px; justify-items: start; }
.gg-msg.is-ok { background: var(--sprout-wash); border: 1px solid var(--sprout-text); }
.gg-msg.is-no { background: var(--card); border: 1px solid var(--line); }
.gg-msg p { margin: 0; }
.gg-aha { font-family: var(--font-math); }

.cabinet .toast-container { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.cabinet .toast { background: var(--text); color: var(--card); padding: 10px 16px; border-radius: var(--radius-sm); font-size: var(--fs-label); box-shadow: var(--shadow-overlay); }

/* ── ≥ 720px: the full header (links with their drawn icons, as the site's),
      tables as tables, two-column forms ──────────────────────────────────── */
@media (min-width: 720px) {
    .cab-main { padding: 28px var(--gutter) 64px; }
    .brand-word { display: inline; }
    .cab-hlink { display: inline-flex; }
    .cab-hlink svg { display: block; }
    .cab-site { gap: 6px; }
    .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .kpis-3 { grid-template-columns: repeat(3, 1fr); }
    .gcards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .self-opts { grid-template-columns: repeat(3, 1fr); }
    .task a { grid-template-columns: 22px 110px 1fr auto; grid-template-areas: 'box kind t min'; }
    .task-t { -webkit-line-clamp: 1; }
    .tasks.plain .task a { grid-template-columns: 170px 1fr auto; grid-template-areas: 'kind t min'; }
    .nu-a { display: flex; flex-wrap: wrap; }
    .ans-actions .btn, .ans-actions .btn-primary { flex: none; }
    .rtable { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
    .rt-head, .rt-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px; }
    .rt-head > span:first-child, .rt-row > span:first-child, .rt-head > span.wide, .rt-row > span.wide { grid-column: span 2; }
    .rt-row > span.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rt-head { border-bottom: 1px solid var(--line); font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
    .rt-row { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; }
    .rt-row:last-child { border-bottom: 0; }
    .rt-row > span { display: block; }
    .rt-row > span::before { content: none !important; }
    .num { text-align: right; font-variant-numeric: tabular-nums; }
    .p-card { padding: 22px; }
}
/* Staff, 720–749px: the badge leaves no room for the wordmark (a teacher's row
   needs ~744px); the √ mark stays (user 2026-10-13). */
@media (min-width: 720px) and (max-width: 749px) {
    .cab-top-in:has(.cab-badge.is-staff) .brand-word { display: none; }
}

/* ── Grading homework (teacher, phone first) ─────────────────────────────── */
.task .task-a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'kind min' 't min'; column-gap: 10px; padding: 8px; min-height: 44px; align-items: center; }
.task.is-off .task-t { color: var(--text-muted); }
.hw-photos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px -16px 4px; padding: 0 16px 6px; }
.hw-photos button { flex: none; scroll-snap-align: start; padding: 0; border: 0; background: none; border-radius: var(--radius-md); cursor: zoom-in; }
.hw-photos button:hover img { border-color: var(--cobalt); }
.hw-photos img { display: block; height: min(44vh, 420px); width: auto; min-width: 180px; max-width: 86vw; object-fit: contain; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.gp { display: grid; gap: 10px; }
.file-btn { position: relative; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn input:disabled { cursor: default; }
.file-btn[aria-busy="true"] { opacity: .6; }
.file-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
/* Профіль (/cabinet/profile): the photo beside its two buttons. */
.pf-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-photo .st-btn-row { flex: 0 1 auto; }
.pf-photo .st-btn-row .btn { flex: 0 0 auto; }
.pf-ava { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--text); background: var(--card); color: var(--text); display: grid; place-items: center; font: 700 52px/1 var(--font-script); }
.pf-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Uliana's crown (user 2026-10-14; ui.js crowned): the header's (styles.apex.css)
   at the profile photo's scale. Only with a photo. */
.cab-top a.nav-avatar.is-crowned:has(img)::after, .pf-ava.is-crowned:has(img)::after { content: ""; position: absolute; top: -12px; left: 50%; width: 22px; height: 13px; background: var(--cobalt); transform: translateX(-50%); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M2 13.1Q14 8.5 26 13.1L25.5 15.2Q14 10.8 2.5 15.2Z'/%3E%3Cpath d='M3.6 12.4Q6.3 6.4 9.4 10.6M24.4 12.4Q21.7 6.4 18.6 10.6M9.4 10.6Q11.5 7.6 14 7.4Q16.5 7.6 18.6 10.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='6.3' cy='7.6' r='1.35'/%3E%3Ccircle cx='21.7' cy='7.6' r='1.35'/%3E%3Ccircle cx='2.5' cy='10.6' r='1'/%3E%3Ccircle cx='25.5' cy='10.6' r='1'/%3E%3Cpath d='M14 7.2C10.6 4.8 10.9 1.4 12.9 1.4C13.6 1.4 14 2 14 2.6C14 2 14.4 1.4 15.1 1.4C17.1 1.4 17.4 4.8 14 7.2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M2 13.1Q14 8.5 26 13.1L25.5 15.2Q14 10.8 2.5 15.2Z'/%3E%3Cpath d='M3.6 12.4Q6.3 6.4 9.4 10.6M24.4 12.4Q21.7 6.4 18.6 10.6M9.4 10.6Q11.5 7.6 14 7.4Q16.5 7.6 18.6 10.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='6.3' cy='7.6' r='1.35'/%3E%3Ccircle cx='21.7' cy='7.6' r='1.35'/%3E%3Ccircle cx='2.5' cy='10.6' r='1'/%3E%3Ccircle cx='25.5' cy='10.6' r='1'/%3E%3Cpath d='M14 7.2C10.6 4.8 10.9 1.4 12.9 1.4C13.6 1.4 14 2 14 2.6C14 2 14.4 1.4 15.1 1.4C17.1 1.4 17.4 4.8 14 7.2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.pf-ava.is-crowned:has(img) { margin-top: 16px; }
.pf-ava.is-crowned:has(img)::after { top: -27px; width: 50px; height: 29px; }
/* Initials by hand (user 2026-10-11): Caveat 700, the cabinet's numerals' hand. Its
   slant stands the ink about .13em right of the glyph box; padding on the right
   brings the written letters to the circle's centre. */
.cab-top a.nav-avatar span, .pf-ava span, .st-face span { padding-right: .27em; }
/* The page fills the column; a form's fields keep a name's width. */
.st-page > .cab-form { max-width: 480px; }
.goal .bar { display: block; width: 100%; height: 8px; margin: 8px 0 6px; }
.challenge { border: 1px dashed var(--cobalt); border-radius: var(--radius-md); padding: 12px 14px; margin: 10px 0; display: grid; gap: 4px; background: var(--card); }
.challenge p { margin: 0; }
.challenge .btn { justify-self: start; margin-top: 6px; }
.steps { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin: 4px 0 8px; background: var(--ground); scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); color: var(--text); text-decoration: none; font-size: var(--fs-label); white-space: nowrap; }
.step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--text-2); font-size: var(--fs-micro); font-weight: 600; }
.step.is-done .step-n { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
[id^="s-"] { scroll-margin-top: 120px; }
.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.todo-list a { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--text); text-decoration: none; }
.todo-list a:hover { border-color: var(--cobalt); }
.todo-list .td-i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 700; font-size: var(--fs-micro); }
.todo-list .td-t { font-size: var(--fs-label); }
.todo-list .td-t small { display: block; color: var(--text-muted); font-size: var(--fs-micro); }
.guide-steps { padding-left: 20px; display: grid; gap: 12px; margin: 0 0 16px; }
.gloss { margin: 0; display: grid; gap: 4px; }
.gloss dt { font-weight: 600; margin-top: 8px; }
.gloss dd { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.dec-take { background: var(--cobalt); color: var(--card); }
.dec-maybe { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.dec-no { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.enrol-box p { margin: 0 0 8px; }
.probs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.prob { display: grid; justify-items: center; min-width: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.prob small { font-size: var(--fs-micro); color: var(--text-muted); }
.prob b { font-variant-numeric: tabular-nums; }
.rubric .dim { margin: 0 0 12px; }
.rubric .dim-h { margin: 0 0 6px; }
.rubric .dim-h .fine { display: block; }
.dec-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.dec-btns .btn { padding: 6px; }   /* a keypad: three to a narrow row, so the family's 20px sides would clip the label */
.ready { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.ready li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); font-size: var(--fs-label); }
.ready li.is-ok { color: var(--text-2); }
.ready .rd-i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--text-2); flex: none; font-weight: 700; }
.ready li.is-ok .rd-i { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
.set-grid { display: grid; gap: 10px; margin-bottom: 12px; }
.set-sec { display: grid; gap: 8px; margin: 0; }
.set-sec legend { padding: 0; }
.bonus-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 8px; align-items: end; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--line); }
.bonus-row .opt { grid-column: 1 / -1; }
.row3 { display: grid; gap: 10px; }
@media (min-width: 720px) { .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row3 { grid-template-columns: 2fr 1fr 1fr; } .bonus-row { grid-template-columns: minmax(0, 1fr) 90px 90px auto; } .bonus-row .opt { grid-column: auto; } }
.ap-list { list-style: none; padding: 0; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
.ap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: end; padding: 10px 12px; }
.ap-row { position: relative; }
.ap-row .ap-main { grid-column: 1 / -1; }
.ap-row .ap-name { padding-right: 132px; min-height: 40px; }
.ap-row .ap-dec { position: absolute; top: 10px; right: 12px; }
@media (min-width: 720px) { .ap-row { align-items: center; } .ap-row .ap-main { grid-column: 1; } .ap-row .ap-name { padding-right: 0; min-height: 0; } .ap-row .ap-dec { position: static; } }
.ap-row + .ap-row { border-top: 1px solid var(--line); }
/* «Учні → Список очікування» (admin.js waitlist): read-only; how many per grade, then the list. */
.wq-dist { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin: 4px 0 8px; max-width: 520px; }
.wq-dist dt { font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.wq-dist dd { margin: 0; }
.wq-bar { display: block; height: 10px; border-radius: var(--radius-xs); background: var(--text-2); min-width: 2px; }
.wq-dist .n { font: 600 var(--fs-label) var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; }
.wq-dist .sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 4px 0; }
.wq-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px 0 10px; }
.wq-chip { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius-full); background: var(--card); color: var(--text-2); font: 500 var(--fs-label) var(--font-sans); cursor: pointer; }
.wq-chip:hover { border-color: var(--cobalt); background: var(--cobalt-wash); color: var(--cobalt-deep); }
.wq-chip[aria-pressed="true"] { background: var(--cobalt-wash); border-color: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 600; }
.wq-chip .c { font-variant-numeric: tabular-nums; margin-left: 4px; }
@media (pointer: coarse) { .wq-chip { min-height: 44px; } }
.wq-list { list-style: none; margin: 0; padding: 0 16px; }
.wq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.wq-row:first-child { border-top: 0; }
.wq-row[hidden] { display: none; }
.wq-name { font-weight: 600; }
.wq-what { font-size: var(--fs-label); color: var(--text-2); grid-column: 1; }
.wq-mail { overflow-wrap: anywhere; }
.wq-when { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: var(--fs-label); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wq-when small { display: block; color: var(--text-muted); font-size: var(--fs-micro); }
.wq-how { margin: 12px 0 0; max-width: 68ch; }
.ap-main { display: grid; gap: 2px; text-decoration: none; color: var(--text); min-width: 0; }
.ap-name { font-weight: 600; }
.ap-meta { font-size: var(--fs-micro); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-nums { font-size: var(--fs-micro); color: var(--text-2); }
.ap-nums b { color: var(--text); font-variant-numeric: tabular-nums; }
.ap-dec { display: flex; gap: 4px; }
.dbtn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); font: 700 var(--fs-body) var(--font-sans); color: var(--text-2); cursor: pointer; }
.dbtn:disabled { opacity: .4; cursor: default; }
.dbtn.d-take.is-on { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
.dbtn.d-maybe.is-on { background: var(--cobalt-wash); border-color: var(--cobalt); color: var(--cobalt-deep); }
.dbtn.d-no.is-on { background: var(--text); border-color: var(--text); color: var(--card); }
.enrol-box > summary { font-weight: 600; }
.enrol-box[open] > summary { margin-bottom: 8px; }
.vchips b { font-variant-numeric: tabular-nums; margin-left: 2px; }
.vchips { margin: 4px 0 8px; }
.cities > summary { font-weight: 600; }
.city-tab { display: grid; margin: 10px 0 6px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 34px) 52px; gap: 4px; align-items: center; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); font: inherit; font-size: var(--fs-label); text-align: right; color: var(--text); cursor: pointer; min-height: 40px; }
.ct-row > span:first-child { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-row.ct-h { position: sticky; top: 0; cursor: default; font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); background: var(--ground); }
.ct-row.is-on { background: var(--cobalt-wash); }
.ct-row:hover:not(.ct-h) { background: var(--cobalt-wash); }
.city-on { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.legal h2 { margin-top: 24px; }
.legal p, .legal li { line-height: 1.6; }
.marks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.mk { margin: 0; display: grid; gap: 4px; }
.mk p { margin: 0; }
.gp.is-saved { border-color: var(--cobalt); }
.gp-h { display: flex; justify-content: space-between; align-items: baseline; }
.gp-ai { background: var(--cobalt-wash); border-radius: var(--radius-md); padding: 10px 12px; display: grid; gap: 4px; }
.gp-ai p { margin: 0; }
.gp-ai .btn { justify-self: start; }
.pts { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; }
.pt { min-height: 48px; border: 1px solid var(--text); border-radius: var(--radius-sm); background: var(--card); font: 600 17px var(--font-sans); color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.pt.is-on { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbtn.is-on { background: var(--text); border-color: var(--text); color: var(--card); }
.grade-bar { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--text); border-radius: var(--radius-lg); padding: 10px 12px 10px 16px; margin-top: 12px; }
.grade-bar b { font-family: var(--font-display); font-size: var(--fs-lead); }
@media (min-width: 1024px) { .grade-bar { bottom: 16px; } .hw-photos { margin: 8px 0 4px; padding: 0 0 6px; } }

/* ── ≥ 1024px: the navigation moves to the top; no tab bar ───────────────── */
@media (min-width: 1024px) {
    .cab-tabbar { display: none !important; }
    body.has-tabbar .cab-main { padding-bottom: 64px; }
    .cab-nav-top { display: flex; gap: 2px; max-width: var(--frame); margin: 0 auto; padding: 0 calc(var(--gutter) - 12px); overflow-x: auto; }   /* the first tab's label under the brand */
    .cab-nav-top a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px 12px; text-decoration: none; color: var(--text-2); font-size: var(--fs-label); border-bottom: 2px solid transparent; white-space: nowrap; }
    .cab-nav-top a svg { width: 18px; height: 18px; }
    .cab-nav-top a:hover { color: var(--cobalt-deep); }
    .cab-nav-top a.is-active { color: var(--cobalt-deep); border-bottom-color: var(--cobalt); font-weight: 600; }
    .cabinet .toast-container { bottom: 24px; }
}
/* A chip that lists several groups must wrap on a phone. */
.sl-h .chip, .gc-h .chip { white-space: normal; }
.sl-row, .stack-list { min-width: 0; }

/* ── Before the lesson · flashcards · recall · «не зрозумів» ──────────────── */
.task.prep a { background: var(--cobalt-wash); }
.ex { border-top: 1px dashed var(--line); padding-top: 10px; }
.fc { display: grid; gap: 10px; }
.fc-card { display: grid; gap: 12px; place-items: center; text-align: center; min-height: 170px; padding: 20px 16px; border: 1px solid var(--text); border-radius: var(--radius-lg); background: var(--card); cursor: pointer; font: inherit; color: var(--text); background-image: linear-gradient(rgba(44,70,216,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(44,70,216,.045) 1px, transparent 1px); background-size: 23px 23px; }
.fc-card.is-flipped { border-color: var(--cobalt); }
.fc-f { font-size: var(--fs-math); }
.fc-b { font-size: var(--fs-math); color: var(--cobalt-deep); border-top: 1px dashed var(--line); padding-top: 12px; width: 100%; }
.fc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fc-actions[hidden], .fc-b[hidden] { display: none; }
.tf { display: grid; gap: 12px; }
.tf-s { font-size: var(--fs-math); }
.tf-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-b .is-ok { border: 2px solid var(--sprout-text); background: var(--sprout-wash); }
.tf-b .is-no { border: 2px solid var(--text); }
.tf-why { display: grid; gap: 6px; justify-items: start; }
.bg { display: grid; gap: 12px; }
.bg-n { font-family: var(--font-display); font-size: var(--fs-title); margin: 0; text-align: center; }
.bg-start { color: var(--text-muted); }
.bg-tray { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 44px; }
.brick { display: inline-grid; place-items: center; min-width: 44px; height: 40px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--cobalt); color: var(--card); font-weight: 600; }
.bg-primes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bg-primes .btn { padding: 8px 0; }   /* a keypad: six to a row, so the family's 20px sides would clip the number */
.shake { animation: shake .3s; border-color: var(--text) !important; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
.didnt { display: grid; gap: 10px; border-style: dashed; }
.didnt-out .tl { max-width: 100%; }

/* ── Sign-in: a compact centred card; demo accounts in a tight grid ───────────
   The brief's air: 32px from the intro to the card, 24px from the card to what
   follows. Sent, the card gives way to the waiting list's green bed (.wl-ok):
   the address, what to do, one more letter, another address. */
.auth { max-width: 420px; padding-top: 24px; }
.auth .cab-title { margin-bottom: 12px; }
.auth .lead { font-size: var(--fs-body); margin-bottom: 32px; }
.auth .card { margin: 0; padding: 20px; }
.auth .cab-form { gap: 16px; }
.auth .or { margin: 20px 0 16px; }
/* «Увійти через Google» is Google's button, not one of ours (Sign in with Google
   branding, dark theme: #131314, 1px #8E918F inside, #E3E3E3 text, Google Sans
   Medium — Roboto where it is absent — and the full-colour G, padding 12 · 10 · 12).
   Dark, because it is the page's primary: the light theme read as an equal of the
   email button. Scaled to the cabinet's 44px with the logo kept in proportion. The
   one button outside the .btn family; hover and press are Google's state layers. */
.gsi-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; background: #131314; border: 1px solid #8E918F; border-radius: var(--radius-sm); color: #E3E3E3; font: 500 16px/20px 'Google Sans', Roboto, var(--font-sans); letter-spacing: .01em; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.gsi-btn::after { content: ''; position: absolute; inset: 0; background: #E3E3E3; opacity: 0; transition: opacity .15s; pointer-events: none; }
.gsi-btn:hover::after { opacity: .08; }
.gsi-btn:active::after { opacity: .12; }
.gsi-btn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.gsi-btn[aria-busy="true"] { cursor: progress; }
.gsi-g { flex: none; width: 20px; height: 20px; }
.auth-about { margin: 24px 0 0; font-size: var(--fs-label); line-height: 1.55; color: var(--text-2); }
.auth-privacy { margin: 12px 0 0; font-size: var(--fs-label); }
.auth-privacy a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 3px; }
.auth-privacy a:hover { color: var(--cobalt-deep); text-decoration-color: currentColor; }
.auth-sent:focus { outline: none; }
.auth-sent .wl-ok { margin: 0 0 16px; }
.auth-next { margin: 0 0 32px; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.auth-sent .wl-other { margin: 16px 0 0; }
.auth .dev-box { margin-top: 32px; }
.dev-list { gap: 6px; }
@media (min-width: 720px) {
    .auth { padding-top: 64px; }
    .auth .card { padding: 24px; }
    .dev-box { max-width: 420px; }
}
.or { display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--text-muted); font-size: var(--fs-micro); }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* ── The waiting list (pages/waitlist.js): the sign-in page for someone not invited.
   One card for the form or the record; the address in the lead is the fact every
   state turns on. Done is the one green bed, as everywhere the cabinet confirms. */
.wl { padding-top: 24px; }
.wl .cab-title { margin-bottom: 12px; }
.wl .lead { margin-bottom: 16px; }
.wl .cab-title + .wl-ok { margin-top: 16px; }
.wl > .wl-acts, .wl > .btn-block { margin-top: 32px; }
.wl .card { margin-bottom: 0; }
.wl > .fine { margin: 24px 0 0; }
.wl-addr { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.wl-other { margin: 0 0 32px; font-size: var(--fs-label); color: var(--text-2); }
.wl-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--cobalt-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wl-linkbtn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 2px; }
.wl .wl-form { gap: 24px; padding: 20px; }
.wl-form .field { gap: 8px; }
.wl-form legend { margin-bottom: 8px; }
.wl-form .seg { border-color: var(--line); background: var(--card); }
.wl-form .seg.is-2 { max-width: none; }
.wl-grade { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wl-grade span { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.wl-more { display: grid; gap: 20px; }
.wl-more[hidden] { display: none; }
.wl-form input[type="text"] { font: 400 var(--fs-body) var(--font-sans); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text); min-height: 44px; box-sizing: border-box; width: 100%; }
.wl-form input[type="text"]:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-wash); }
.wl-err { margin: -8px 0 0; font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.wl-err[hidden] { display: none; }
.wl-ok { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 16px; background: var(--sprout-wash); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-body); line-height: 1.45; }
.wl-ok svg { flex: none; width: 20px; height: 20px; color: var(--sprout-text); margin-top: 1px; }
.wl-rec { padding: 8px 20px; }
.wl > .wl-rec + .wl-leave { margin-top: 32px; }
.wl-rec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 4px; }
.wl-rec-h .card-h { margin: 0; }
.wl-rec-h .btn-sm { margin-right: -8px; }
.wl-rec dl { margin: 0; }
.wl-rec .r { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); }
.wl-rec .r:first-child { border-top: 0; }
.wl-rec dt { color: var(--text-2); font-size: var(--fs-label); padding-top: 1px; }
.wl-rec dd { margin: 0; overflow-wrap: anywhere; }
.wl-then { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.wl-then p { margin: 0 0 12px; font-size: var(--fs-body); color: var(--text-2); }
.wl-acts { display: grid; gap: 8px; }
.wl-leave { margin-top: 24px; }
.wl-leave .btn-quiet { padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.wl-confirm { margin-top: 16px; padding: 16px 20px; background: var(--panel); border-radius: var(--radius-md); }
.wl-confirm[hidden] { display: none; }
.wl-confirm p { margin: 0 0 12px; font-size: var(--fs-body); }
.wl-confirm .row { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-confirm .wl-err { margin: 10px 0 0; }

/* ── Student: the tree (предмети → предмет → lesson → its three steps) ─────
   A card per предмет on the home: labels for what it wants and one blue button
   for the most pressing thing. Breadcrumbs above each heading walk up the tree;
   a lesson that is starting or running is a strip under the top bar on every screen. */
.cabinet { --panel: #ECEBE0; }   /* Panel (DESIGN.md › Neutral): beds for icons, tags and chips on a card */
.cab-onair { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--cobalt-wash); border-top: 1px solid color-mix(in srgb, var(--cobalt) 20%, transparent); color: var(--cobalt-deep); font-size: var(--fs-label); }
.cab-onair[hidden] { display: none; }
.cab-onair .btn { flex: none; }
.st-onair-t { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.st-onair-t b { font-weight: 600; }
.st-onair-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-live { width: 10px; height: 10px; border-radius: 50%; background: var(--cobalt); flex: none; }
.cab-onair .st-live, .st-tag.is-live .st-live { animation: st-pulse 1.8s var(--ease) infinite; }
@keyframes st-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cobalt) 14%, transparent); } }

/* ── The 12-column grid (user 2026-10-11) ─────────────────────────────────
   A student page stands on twelve columns with 24px gutters across the header's
   column (1056px on a desktop: 66px columns), from 720px; a phone is one column.
   A page takes columns by what it is:
                          720–1023px          from 1024px
     board  (home)        subject 12 · promo 6   subject 8 · promo 4
     track  (.st-narrow)  1–12                   1–8
     lesson (.st-lesson)  1–12, PDF after blocks blocks 1–8 · PDF 9–12, at the top;
                                                 homework cards 1–6 · 7–12
     subject (.st-subject) 1–12, «what next» first lessons 1–8 · who, next, progress 9–12
   The track is eight columns: it halves on a grid line (the homework's two
   cards, four columns each). The side takes the other four, so no column stands
   empty (user 2026-10-11: the grid is there so a page has no gaps). The PDF is
   not pinned (user 2026-10-11): it is fetched once, so it stays at the top, and the
   homework under the blocks takes the whole width, its cards six columns each;
   its heading, hand-in and the pager keep the track's eight. Every span starts on the grid's first line, under the
   brand, so a title stands in one place from page to page. */
.st-page { display: grid; gap: var(--gut); align-content: start; min-width: 0; }
.st-main { display: grid; gap: 24px; align-content: start; min-width: 0; }
/* The twelve columns themselves (from 720px, every child 1 / -1 unless placed) and the
   --frame / --gut tokens are the site's: styles.apex.css, `:is(.search-body, .st-page)`. */
@media (min-width: 1024px) {
    .st-narrow > * { grid-column: 1 / span 8; }
    .st-cols { display: grid; grid-template-columns: subgrid; align-items: start; }
    .st-main { grid-column: 1 / span 8; }
    .st-side { grid-column: 9 / span 4; position: sticky; top: 93px; }   /* the 69px header + 24px */
    .st-lesson .st-cols { row-gap: 24px; }
    .st-lesson .st-side { grid-row: 1; position: static; }
    /* «Матеріали» stands level with the first block's row, not with the time line
       over the blocks (user 2026-10-12): the time line takes the first row alone,
       the blocks and the side share the second. */
    .st-lesson:not(.is-bare) .st-main { display: contents; }
    .st-lesson:not(.is-bare) .st-main > * { grid-column: 1 / span 8; }
    .st-lesson:has(.st-when) .st-side { grid-row: 2; margin-top: 6px; }   /* its title's line on the row's: the 60px row's middle (30px) less the heading's (10px padding + 26px line / 2) */
    .st-lesson:has(.st-flow > .st-b.is-open:first-child) .st-side { margin-top: 20px; }   /* + the open block's 14px margin */
    .st-lesson .st-steps { grid-column: 1 / -1; }
    .st-lesson .st-pager { grid-column: 1 / span 8; }
    /* Eight of twelve columns, as a share of the full width: (2 × 100% − gut) / 3. */
    :is(.st-lesson .st-steps, .st-lesson.is-bare .st-side) :is(.st-step > *, .st-step-b > *):not(.st-step-b, .st-cards, .st-extra-part) { max-width: calc((200% - var(--gut)) / 3); }
    /* A lesson with no blocks yet (only u01 has them): nothing stands beside the
       PDF, so it is a row on the track, as the homework's heading under it. */
    .st-lesson.is-bare .st-main { display: none; }
    .st-lesson.is-bare .st-side { grid-column: 1 / -1; }   /* its lines run the frame as the steps' do; what it holds keeps the eight columns */
}
@media (max-width: 1023px) {
    .st-cols, .st-main { display: contents; }
    .st-cols > *, .st-main > * { grid-column: 1 / -1; }
    .st-side { order: 1; }
    .st-lesson .st-steps, .st-lesson .st-pager, .st-subject .st-main > * { order: 2; }
}
.st-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1024px) and (max-height: 759px) { .st-side { position: static; } }   /* a short screen: a side taller than it would never show its foot */
/* A subject's side opens with who teaches it (user 2026-10-11): the photo, the
   name and role, a button for each way to write, then the group's page. */
/* Who teaches (user 2026-10-12, version 2 of three): a side section in «Матеріали»'s
   grammar, not a card. The display-face title, then one list: the face and the
   name, «Написати на пошту», and on 102 the group's row. */
.st-step.st-whos { background: none; border: 0; border-radius: 0; padding: 0; gap: 12px; }
.st-whos .st-step-h { padding: 10px 0 0; }
.st-whos .st-step-h .st-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.st-who { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; }
.st-mat > li + li .st-who { padding-top: 14px; }
.st-who .st-face { width: 48px; height: 48px; font-size: 26px; }
.st-who-t { display: grid; gap: 2px; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.st-who-t b { font-weight: 500; }
.st-who-t span { font-size: var(--fs-label); color: var(--text-2); }
/* One column: who teaches follows the lessons, so the list is not a screen down. */
@media (max-width: 1023px) {
    .st-subject .st-side { display: contents; }
    .st-subject .st-side > * { grid-column: 1 / -1; }
    .st-subject .st-whos { order: 3; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 16px; }
}
.st-head { display: grid; gap: 6px; }
.st-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title); line-height: 1.1; letter-spacing: -.01em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.st-h2 { font-size: var(--fs-body); font-weight: 600; margin: 0; }
/* A section or card label is Micro, as the problem page's; a row's title (.st-name,
   with its icon and status line) and a bold lead sentence (p.st-h2) stay as they are. */
:is(h2, h3).st-h2:not(.st-name) { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.st-h3 { font-weight: 600; margin: 0 0 6px; }
/* A page part beside the side's section (user 2026-10-12, variant A of three): the
   side's display-face title, set level with it. A status line under it only when it
   says what the rows don't («3 з 20 ще не заходили»); never a count of the rows. */
.st-sec-h { display: grid; gap: 4px; padding: 10px 0 0; }
.st-sec-h h2.st-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.st-sec-h > span { font-size: var(--fs-label); color: var(--text-2); }
.st-meta { font-size: var(--fs-label); color: var(--text-2); margin: 0; }
.st-read { font-size: var(--fs-body); line-height: 1.6; margin: 0; max-width: 62ch; }
.st-strong { font-weight: 600; }
.st-stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.st-gap-l { gap: 28px; }
.st-link { color: var(--cobalt-deep); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cobalt-deep) 35%, transparent); text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.st-link:hover { text-decoration-color: currentColor; }
.st-ic { width: 20px; height: 20px; flex: none; }
.st-chev { width: 18px; height: 18px; flex: none; color: var(--text-2); }   /* text-2, not muted: a faint chevron read as weak (user 2026-10-11) */
.cabinet .btn.st-cta { width: 100%; }
/* Handing in: what it opens, how, the rule — three lines, then the button at
   its own width beside the text on a desktop (a slab past the measure reads as
   a banner), the thumb-wide one on a phone. */
.hw-brief { display: grid; gap: 4px; max-width: 62ch; }
.hw-brief .st-meta { margin-top: 2px; line-height: 1.5; }
@media (min-width: 720px) { .cabinet :is(.hw-form, #step-next) .btn.st-cta { width: auto; justify-self: start; } }
/* Handed in (user 2026-10-11, variant B2): a ladder of the tile states, a rung each
   for Здано (the photos), Розбір (the solution videos, open from the hand-in),
   Оцінка and the lesson it opened. The tiles stand in the step's tile column,
   joined by a hairline. */
.hw-ladder { --hw-tc: max(36px, calc(var(--st-tile, 1.24) * 17.16px + 12px)); list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.hw-ladder > li { position: relative; display: grid; grid-template-columns: var(--hw-tc) minmax(0, 1fr); column-gap: 12px; padding-bottom: 22px; }
.hw-ladder > li:last-child { padding-bottom: 0; }
.hw-ladder > li:not(:last-child)::after { content: ""; position: absolute; left: 17.25px; top: 42px; bottom: 6px; width: 1.5px; border-radius: 1px; background: var(--line); }
.hw-ladder > li > .st-no { justify-self: start; }
.hw-rung { display: grid; gap: 2px; align-content: start; min-width: 0; min-height: 36px; padding-top: 6px; }
.hw-rung-h { margin: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.hw-rung-l { margin: 0; max-width: 62ch; font-size: var(--fs-label); line-height: 1.45; color: var(--text-2); }
.hw-rung-q { margin: 6px 0 0; max-width: 62ch; font-size: var(--fs-body); line-height: 1.5; }
.hw-rung .thumbs { margin: 10px 0 0; }
.hw-rung .thumbs .ph img { width: 60px; height: 80px; }
.hw-rung-go { margin-top: 14px; }
@media (min-width: 720px) { .cabinet .hw-rung-go .btn.st-cta { width: auto; } }
/* The solution videos: a row each (number, title, length), opened in place one at a time. */
.hw-vids { list-style: none; margin: 10px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.hw-vids > li { border-bottom: 1px solid var(--line); }
.hw-vid { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; width: 100%; min-height: 48px; padding: 8px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.hw-vid-g { display: grid; place-items: center; color: var(--text-2); }
.hw-vid-g .st-ic { width: 20px; height: 20px; }
.hw-vid-n { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hw-vid-d { font-size: var(--fs-label); color: var(--text-2); font-variant-numeric: tabular-nums; }
.hw-vid .st-chev { width: 16px; height: 16px; transform: rotate(90deg); transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.hw-vid.is-seen .hw-vid-g { color: var(--sprout-text); }
.hw-vid[aria-expanded="true"] { color: var(--cobalt-deep); font-weight: 600; }
.hw-vid[aria-expanded="true"] :is(.hw-vid-g, .hw-vid-n, .hw-vid-d, .st-chev) { color: var(--cobalt-deep); }
.hw-vid[aria-expanded="true"] .st-chev { transform: rotate(-90deg); }
@media (hover: hover) { .hw-vid:hover { background: var(--cobalt-wash); color: var(--cobalt-deep); } }
.hw-vid-b { padding: 4px 0 14px; }
.hw-vid-b[hidden] { display: none; }
/* A phone: the videos take the whole width, under the tile column too: each row's
   glyph centred in the tile column, its title on the rungs' text edge (2026-10-12:
   it stood 10px left of it, on a column of its own). */
@media (max-width: 719px) {
    .hw-ladder > li { column-gap: 10px; }
    .hw-ladder .hw-vids { margin-left: calc(-1 * (var(--hw-tc) + 10px)); }
    .hw-ladder .hw-vid { grid-template-columns: var(--hw-tc) minmax(0, 1fr) auto auto; padding-left: 0; }
    .hw-ladder > li:has(.hw-vids)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hw-vid .st-chev { transition: none; } }
/* AI-taught homework, the «Оцінка» rung (user 2026-10-11). While the check runs: a
   hairline with a slow cobalt stroke drifting along it, no spinner. Then the mark,
   set as the cabinet's other figures are (Unbounded 600, tabular, as .level-n),
   never by hand: the hand is for maths and maths headings only (user 2026-10-12).
   Then the two grades (.hw-grades below). Points are never coloured. */
.hw-wait { position: relative; display: block; width: min(100%, 220px); height: 2px; margin: 12px 0 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.hw-wait::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: inherit; background: var(--cobalt); animation: hw-wait 2.8s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes hw-wait { from { transform: translateX(0); } to { transform: translateX(194%); } }
@media (prefers-reduced-motion: reduce) { .hw-wait::after { animation: none; width: 100%; opacity: .3; } }
.hw-score { margin: 4px 0 0; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; line-height: 1.1; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.hw-score-of { font-size: var(--fs-lead); font-weight: 500; color: var(--text-2); }
.hw-score + .hw-rung-q { margin-top: 10px; }
/* «Оцінка», two grades (user 2026-10-12): each a label in micro caps (AI Mind,
   Вчитель), the mark, ONE comment for the whole work, and under a teacher's
   comment their name. A hairline between the two. */
.hw-grades { display: grid; max-width: 62ch; }
.hw-grade { padding: 12px 0 14px; }
.hw-grade:first-child { padding-top: 4px; }
.hw-grade + .hw-grade { border-top: 1px solid var(--line); }
.hw-grade-h { display: grid; gap: 4px; margin: 0; }
.hw-grade-by { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.hw-grade-s { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.hw-grade .hw-rung-q { margin-top: 8px; }
.hw-grade-who { margin: 4px 0 0; font-size: var(--fs-label); line-height: 1.4; color: var(--text-2); }
.hw-grade-who::before { content: "— "; }
.hw-again { display: grid; gap: 2px; margin-top: 18px; }
.hw-again-h { margin: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.hw-again .thumbs { margin: 12px 0 0; }
.hw-again-go { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 720px) { .cabinet .hw-again-go .btn.st-cta { width: auto; } }
.st-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.st-btn-row .btn { flex: 1 1 140px; }

/* labels: static tags, tappable chips */
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-tags.sm { margin-top: 4px; }
.st-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-full); background: var(--panel); color: var(--text-2); font-size: var(--fs-label); font-weight: 500; white-space: nowrap; }
.st-tag.is-live { background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 600; }
.st-tag.is-done { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.st-tag .st-live { width: 8px; height: 8px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid transparent; background: var(--panel); color: var(--text); font-size: var(--fs-label); font-weight: 500; text-decoration: none; white-space: nowrap; }
.st-chip:hover { background: var(--cobalt-wash); color: var(--cobalt-deep); }

/* The home's предмети (user 2026-10-12, variant C): sections, not cards. Each is a
   heading row (the Unbounded name, «Пройдено N з M» beside it, the chevron at the
   column's edge) and its brief in columns under it. A hairline between sections, none
   over the first or under the last (as «Матеріали»). The head's link covers the
   section, so the whole section opens the предмет; hover is the lesson list's bed
   (.st-r): cobalt wash, --radius-sm, 12px out from the text, the name cobalt-deep. */
.st-pcards { display: grid; min-width: 0; }
/* Air as the lesson page's sections: 40px over the hairline, 22px under it. The bed
   keeps 12px round the text; the rest is margin, so the line sits outside any bed. */
.st-pcard { position: relative; display: grid; gap: 14px; min-width: 0; margin: -12px -12px 0; padding: 12px; border-radius: var(--radius-sm); }
.st-pcard + .st-pcard { margin-top: 39px; }
.st-pcard + .st-pcard::before { content: ''; position: absolute; top: -11px; left: 12px; right: 12px; border-top: 1px solid var(--line); }
/* Only the head row opens the subject (user 2026-10-14): the brief's lines are links of
   their own, so no target sits inside another. Its bed 8px out, 4px over and under, so
   it never meets a line's. */
.st-pcard-h { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: -4px -8px; padding: 4px 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: background-color 180ms var(--ease); }
.st-pcard-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
/* Beside the name from 720px; under it on a phone, so every heading has one shape. */
@media (min-width: 720px) { .st-pcard-t { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; } }
.st-pcard-h b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; transition: color 180ms var(--ease); }
.st-pcard-m { font-size: var(--fs-label); line-height: 1.35; color: var(--text-2); }
.st-pcard-h .st-chev { flex: none; color: var(--text-2); transition: transform 180ms var(--ease), color 180ms var(--ease); }
@media (hover: hover) {
    .st-pcard-h:hover { background: var(--cobalt-wash); }
    .st-pcard-h:hover b { color: var(--cobalt-deep); }
    .st-pcard-h:hover .st-chev { color: var(--cobalt); transform: translateX(2px); }
}
.st-pcard-h:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 0; }
/* The brief: what waits, no rows and no buttons. Every line is built alike: a 20px
   stroke icon in --text-2, what it is (Body 500) and under it how it stands (Label
   --text-2). Side by side wherever the column has room. */
.st-brief { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 18px var(--gut); align-content: start; min-width: 0; }
.st-brief li, .st-brief-a { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.st-brief :is(li, .st-brief-a) > .st-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--text-2); }
/* A line that opens its own place (the homework, the lesson): a 44px+ target 8px out
   on a --cobalt-wash bed, its name cobalt-deep on hover. */
.st-brief-a { flex: 1; margin: -8px; padding: 8px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: background-color 180ms var(--ease); }
.st-brief-a b { transition: color 180ms var(--ease); }
@media (hover: hover) {
    .st-brief-a:hover { background: var(--cobalt-wash); }
    .st-brief-a:hover b { color: var(--cobalt-deep); }
}
.st-brief-a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 0; }
.st-brief-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.st-brief-t b { font-size: var(--fs-body); font-weight: 500; line-height: 1.35; color: var(--text); }
.st-brief-t span { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); line-height: 1.35; color: var(--text-2); }
/* Promos, after every предмет (user 2026-10-11): hairline rows under «Ще в Apex
   Minds», the kind's glyph in the tile column on a panel bed; no button, ✕ on the right. */
.st-more { display: grid; gap: 12px; min-width: 0; margin-top: 16px; }
.st-pcards + .st-more { margin-top: 28px; }   /* the home: 40px from the last предмет's text to the promos' label */
.st-more > .st-h2 { margin: 0; }
.st-promos { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.st-promo { position: relative; min-width: 0; border-bottom: 1px solid var(--line); }
.st-promo-a { display: flex; align-items: center; min-height: 72px; margin: 0 -6px; padding: 12px 52px 12px 6px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.st-promo-a .st-nm { align-items: flex-start; }
.st-promo-a .st-r-t { gap: 3px; }
.st-promo-a .st-name { font-weight: 600; transition: color 180ms var(--ease); }
.st-promo .st-no { background: var(--panel); border-color: var(--panel); }
.st-promo-p { font-size: var(--fs-label); line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.st-r-t .st-promo-p b { font-size: inherit; font-weight: 500; color: var(--text); }
@media (hover: hover) { .st-promo-a:hover { background: var(--cobalt-wash); } .st-promo-a:hover .st-name { color: var(--cobalt-deep); } }
.st-promo-x { position: absolute; top: 50%; right: -6px; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); cursor: pointer; transform: translateY(-50%); transition: background-color 180ms var(--ease), color 180ms var(--ease); }
.st-promo-x .st-ic { width: 16px; height: 16px; }
.st-promo-x:hover { background: var(--panel); color: var(--text); }
@media (pointer: coarse) { .st-promo-x { width: 44px; height: 44px; } }
.st-h2-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-l-s { display: flex; align-items: center; gap: 6px; transition: color 160ms var(--ease); }
.st-l-s.is-ok { color: var(--sprout-text); }
.st-l-s.is-now { color: var(--cobalt-deep); font-weight: 600; }
.st-l-s.is-wait { color: var(--text-muted); }

/* rows: space, no rules and no boxes; hover lays the cobalt wash under a row */
.st-rows { list-style: none; margin: 0; padding: 0; }
/* AI track: a lesson that opens once the previous homework is handed in. A button
   (it answers a tap with a «no», see .is-nope), drawn as the row it replaces. */
button.st-r { width: calc(100% + 24px); border: 0; background: none; font: inherit; text-align: left; }
/* Homework: the one-time «здати остаточно» step under the photos. */
.st-confirm { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.st-confirm[hidden] { display: none; }
/* The teacher / coordinator on the group page: photo (initials until it loads), full name. */
.st-face { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--text); background: var(--card); color: var(--text); display: grid; place-items: center; overflow: hidden; font: 700 26px/1 var(--font-script); }
.st-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-rows > li + li { margin-top: 2px; }
.st-rows > li[hidden] { display: none; }
.st-r { display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0 -12px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
@media (hover: hover) { a.st-r:hover { background: var(--cobalt-wash); } a.st-r:hover .st-r-t b, a.st-r:hover .st-name { color: var(--cobalt-deep); } }
.st-r-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.st-r-t b { font-weight: 500; font-size: var(--fs-body); }
.st-r-t > span { font-size: var(--fs-label); color: var(--text-2); }
.st-r-v { font-size: var(--fs-label); color: var(--text-2); text-align: right; white-space: nowrap; }
.st-r-v.is-done { color: var(--sprout-text); }

/* a lesson: three steps; the one that matters now is outlined in ink */
.st-steps { display: grid; gap: 12px; }
.st-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px 16px; display: grid; gap: 10px; margin: 0; min-width: 0; }
.st-step.is-cur { border-color: var(--text); }
.st-step-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* A lesson step's heading is a numbered list's row (stepHead): the tile holds an icon. */
.st-step-h .st-name { font-weight: 600; }
.st-step-b { display: grid; gap: 12px; min-width: 0; }
.st-task { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.st-task + .st-task { border-top: 1px solid var(--line); padding-top: 12px; }
.st-task .st-r-t b { font-weight: 600; }
.st-task .btn { flex: none; }
.st-task > .st-read { flex: 1; min-width: 0; }
.st-pager { display: flex; justify-content: flex-end; gap: 12px; }
.st-pager[hidden] { display: none; }
.st-steps[hidden] { display: none; }
/* A lesson on one page, for one sitting (user 2026-10-10). Under the title: its
   time, like a book's reading time, then how far the student is. */
.st-when { display: flex; align-items: flex-start; gap: 8px; margin: -12px 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); max-width: 62ch; scroll-margin-top: 80px; }
.st-when .st-ic { width: 18px; height: 18px; margin-top: 3px; }
.st-when b { display: block; color: var(--text); font-weight: 600; }
.st-when.is-done { color: var(--text); font-weight: 600; }
.st-when.is-done .st-ic { color: var(--sprout-text); }
/* The blocks: rows set apart by space, no rules. The open one unfolds in place
   (its video, text and problem, each its own card, so the block is never a
   card itself): its title steps up to a heading, which hover never imitates.
   The ones before it fold to a row with their mark; the ones after it wait,
   their titles in text-2. */
.st-flow { list-style: none; margin: 0; padding: 0; }
.st-b { scroll-margin-top: 136px; }   /* the folded row above stays in view */
.st-b + .st-b { margin-top: 2px; }
.st-b.is-open { margin: 14px 0 12px; }
.st-b-h { margin: 0; font: inherit; }
.st-b-t { display: flex; align-items: center; gap: 12px; width: calc(100% + 24px); min-height: 60px; margin: 0 -12px; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; text-align: left; }
button.st-b-t { cursor: pointer; }
@media (hover: hover) { .st-b:not(.is-open) button.st-b-t:not([aria-disabled="true"]):hover { background: var(--cobalt-wash); } .st-b:not(.is-open) button.st-b-t:not([aria-disabled="true"]):hover .st-name { color: var(--cobalt-deep); } }
/* A numbered list (lesson blocks, a subject's lessons): the number is a tile
   that carries the row's state, beside the title and its lines (user 2026-10-11:
   the rounded tiles, with the numbers written by hand). Solved is a green wash,
   tried the panel, now a filled cobalt tile with the numeral in card, waiting a
   dashed outline. Every tile in a list shares one width, from its longest number
   (--st-tile, ems, set by the list; on a lesson by the page, so the PDF's and the
   steps' tiles head the same column); Caveat's digits are narrower than the
   tabular ones --st-tile counts, hence .78. */
.st-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.st-no { flex: none; box-sizing: border-box; min-width: 36px; width: calc(var(--st-tile, 1.24) * .78em + 12px); height: 36px; border-radius: 10px; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--font-script); font-size: 22px; font-weight: 700; line-height: 1; color: var(--text-2);
    /* Caveat's ink stands .12em right of its advance (the slant) and low in its line
       box: uneven padding centres the written numeral, not its glyph box. */
    padding: 0 calc(6px + .123em) .09em calc(6px - .123em); }
.st-no.is-done { background: var(--sprout-wash); border-color: var(--sprout-wash); color: var(--sprout-text); }
.st-no.is-now { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
.st-no.is-tried { background: var(--panel); border-color: var(--panel); }
.st-no.is-off { border-style: dashed; border-color: var(--text-muted); color: var(--text-muted); }
/* Something new behind this tile (user 2026-10-12: a grade not opened yet): a cobalt
   dot on its top-right corner, ringed in the ground. Never red (One Pencil Rule). */
.st-no.has-new { position: relative; }
.st-no.has-new::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 2px var(--ground); }
/* An icon in a tile stays square at the head of the column, so every title in the
   list still starts on one line. */
.st-no:has(> .st-ic) { width: 36px; padding: 0; margin-right: max(0px, calc(var(--st-tile, 1.24) * 17.16px - 24px)); }
.st-no .st-ic { width: 22px; height: 22px; }
.st-probs li::before { font-family: var(--font-script); font-size: 22px; font-weight: 700; line-height: 1; }
.st-name { min-width: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.35; }
.st-cs { flex: none; width: 18px; display: grid; place-items: center; color: var(--text-muted); transition: color 160ms var(--ease); }   /* the chevron's place on a waiting line; a lock on a locked one */
.st-cs svg { width: 18px; height: 18px; }   /* as tall as the chevron it stands in for */
/* A row that cannot be entered: grey under the pointer, never the cobalt wash, and a tap
   answers «no» (.is-nope, 1.2 s from JS): a head-shake that decays, while the reason and
   the lock go to full ink so the reason is what you read. */
.st-r[aria-disabled="true"], .st-b-t[aria-disabled="true"], .st-r[aria-disabled="true"] .st-name, .st-b-t[aria-disabled="true"] .st-name { color: var(--text-2); }
.st-r[aria-disabled="true"], .st-b-t[aria-disabled="true"] { cursor: not-allowed; }
@media (hover: hover) { .st-r[aria-disabled="true"]:hover, .st-b-t[aria-disabled="true"]:hover { background: var(--panel); } }
.is-nope { animation: st-nope 420ms cubic-bezier(.36, .07, .19, .97); }
.is-nope .st-l-s, .is-nope .st-cs { color: var(--text); }
@keyframes st-nope { 0%, 100% { transform: none; } 15% { transform: translateX(-6px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } 90% { transform: translateX(1px); } }
.st-b-t .st-chev { transform: rotate(90deg); transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.st-b.is-open .st-b-t .st-chev { transform: rotate(-90deg); }
.st-b.is-open .st-name { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.st-b-body { display: grid; gap: 20px; padding: 4px 0 28px; min-width: 0; }
.st-b-body[hidden] { display: none; }
/* A block opens and folds in motion from JS (js/cabinet/fold.js, «Шторка»). */
.st-go-row { display: flex; }
.st-go .st-ic { width: 18px; height: 18px; }
.st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A lesson's steps (Онлайн-заняття, Домашнє завдання) are no cards (user 2026-10-11):
   the heading is a block's row, what follows stands on the page as an open block's
   body does, and only the problems take a card, the клітинка (.st-probs). */
.st-steps .st-step { scroll-margin-top: 80px; background: none; border: 0; border-radius: 0; padding: 0; gap: 12px; }
.st-steps .st-step-h { padding: 10px 0; }
/* The lesson page is one system of sections (user 2026-10-12): Матеріали, Ще
   задачі, Домашнє завдання, Далі. Each opens with its title (stepHead, below);
   what it holds stands under it from the title's edge. A hairline across the column
   comes before every section and nowhere else: never between rows. 40px of air
   over a line, 22px under it, so the same rhythm runs down the steps and the side
   alike. The side (Матеріали) stands beside the blocks on a desktop with no line
   over it; on a phone it falls between the blocks and the steps, so a line comes
   over it too (not on a lesson without blocks, where it follows the title). */
.st-side[hidden] { display: none; }
.st-lesson .st-side .st-step { background: none; border: 0; border-radius: 0; padding: 0; gap: 12px; }
.st-lesson :is(.st-steps, .st-side) .st-step-h { padding: 10px 0; }
/* A section stands a level above the blocks (user 2026-10-12), so it does not
   wear their grammar: no tile (the tile is a block's, a row's), the title in the
   display face from the tile's edge, where what it holds starts. Its state is
   said by its status line and its button. */
.st-lesson :is(.st-steps, .st-side) .st-step-h .st-no { display: none; }
.st-lesson :is(.st-steps, .st-side) .st-step-h .st-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.st-lesson :is(.st-steps, .st-side) .st-step-h .st-l-s { margin-top: 4px; }
.st-lesson .st-steps { gap: 40px; margin-top: 16px; }
.st-lesson .st-steps .st-step { border-top: 1px solid var(--line); padding-top: 22px; }
.st-lesson .st-task + .st-task { border-top: 0; padding-top: 0; }
.st-lesson .st-task .st-r-t b { font-weight: 500; }   /* a row's title is the blocks' row weight, under the section's 600 */
/* A narrow row puts its action under its text, its own width from the row's edge
   (user 2026-10-12: a longer text never shares a phone's line with a button): on a
   phone, and in the desktop side, which is a phone's width. */
@media (max-width: 719px) { .st-lesson .st-task { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; } .st-lesson .st-task + .st-task { margin-top: 12px; } }
@media (max-width: 1023px) { .st-lesson:not(.is-bare) .st-side { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 16px; } }
/* «Матеріали» (user 2026-10-12, version 3 of three): a short list close under its
   heading. While the online lesson is ahead it is the first item, a line that
   says when (on air cobalt, with the dot, and «Приєднатися» across the column).
   Every link is a one-line row: a small glyph in text-2, the name, what a tap does
   on the right in cobalt (download, ↗; a muted word while it waits). A hairline
   between items, none over the first or under the last: the section's own lines
   do that. */
.st-lesson .st-side #step-mat .st-step-h { padding-bottom: 0; }   /* the list starts 12px under the heading, not 22 */
.st-mat { list-style: none; margin: 0; padding: 0; }
.st-mat > li + li { border-top: 1px solid var(--line); }
.st-mat-r { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 0; color: var(--text); text-decoration: none; }
.st-mat > li:first-child .st-mat-r { padding-top: 4px; min-height: 40px; }   /* close under the heading */
.st-mat-i { display: grid; flex: none; color: var(--text-2); }
.st-mat-i .st-ic { width: 20px; height: 20px; }
.st-mat-t { min-width: 0; font-weight: 500; }
.st-mat-n { margin-left: auto; font-size: var(--fs-label); color: var(--text-muted); }
.st-mat-go { margin-left: auto; display: grid; flex: none; color: var(--cobalt); }
.st-mat-go .st-ic { width: 18px; height: 18px; }
@media (hover: hover) { a.st-mat-r:hover .st-mat-t, a.st-mat-r:hover .st-mat-go { color: var(--cobalt-deep); } }
.st-mat-now { display: grid; gap: 4px; padding: 0 0 16px; }
.st-mat-now .st-l-s:not(.is-now, .is-wait) { color: var(--text); font-weight: 600; }
.st-mat-now .st-l-s.is-wait { font-weight: 600; }
.st-mat-x { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.cabinet .btn.st-mat-btn { width: 100%; margin-top: 8px; }
/* Near and on air, a phone puts «Матеріали» under the title, over the blocks:
   «Приєднатися» is not a screen of blocks away. A line under it, none over. */
@media (max-width: 1023px) {
    .st-lesson.is-onair .st-main > * { order: 2; }
    .st-lesson.is-onair:not(.is-bare) .st-side { border-top: 0; padding-top: 0; margin-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
}
@media (max-width: 719px) { .st-nm { gap: 10px; } .cabinet .btn.st-go { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .st-b-t .st-chev { transition: none; } }
/* A block (user 2026-10-10): the video, then the problem under it. */
/* Until the video draws: a card-coloured frame, not a dark slab. The hairline is
   drawn over the player, which would otherwise paint over it and leave the edge
   to the video's own pixels. */
.st-video { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((100dvh - 220px) * 16 / 9)); border-radius: var(--radius-md); overflow: hidden; background: var(--card); }   /* the full column, but never taller than the screen below an opened block's row (.st-b scroll-margin 136px + the 60px row) */
.st-video::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.st-video:has(.vp:focus-visible)::after { content: none; }   /* the player's own cobalt ring */
.st-video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Our video player (js/cabinet/player.js, user 2026-10-10): YouTube's controls in
   YouTube's places, so kids find them; the played line in cobalt, the chrome
   white on a dark fade like every video player's. */
.vp { --vp-panel: rgba(28, 28, 28, .92); position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: var(--card); color: #fff; font: 500 13px/1 var(--font-sans); user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; container-type: inline-size; outline: none; }
/* Nothing dark under the video: the GPU clips the video's rounded corners apart
   from what lies beneath, and a dark layer there shows as a thin arc on each
   corner. That includes the <video>'s own background, so there is no letterbox
   black in the page (fullscreen has its own), and the focus ring is drawn over it. */
.vp:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--cobalt); pointer-events: none; }
.vp video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.vp.is-idle { cursor: none; }
.vp button { -webkit-tap-highlight-color: transparent; }
.vp :focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* The bar: the line to seek along, then the buttons. */
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 12px; transition: opacity .25s; }
.vp-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + 48px); background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); pointer-events: none; z-index: -1; }
.vp.is-start .vp-bar { visibility: hidden; opacity: 0; }
.vp.is-idle .vp-bar { opacity: 0; pointer-events: none; }
.vp-prog { position: relative; height: 16px; margin-bottom: -2px; cursor: pointer; touch-action: none; outline-offset: 2px !important; }
.vp-rail { position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: rgba(255, 255, 255, .25); transition: height .1s; }
.vp-rail > div { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; }
.vp-buf { background: rgba(255, 255, 255, .4); }
.vp-hov { background: rgba(255, 255, 255, .5); opacity: 0; }
.vp-fill { background: var(--cobalt); }
.vp-knob { position: absolute; bottom: 1px; left: 0; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--cobalt); transform: scale(0); transition: transform .1s; pointer-events: none; }
.vp-tip { position: absolute; bottom: 22px; left: 0; padding: 5px 8px; border-radius: 4px; background: var(--vp-panel); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.vp-prog:hover .vp-rail, .vp.is-scrub .vp-rail { height: 5px; }
.vp-prog:hover .vp-knob, .vp.is-scrub .vp-knob, .vp-prog:focus-visible .vp-knob { transform: none; }
.vp-prog:hover .vp-hov, .vp-prog:hover .vp-tip, .vp.is-scrub .vp-tip { opacity: 1; }
.vp-row { display: flex; align-items: center; height: 48px; }
.vp-sp { flex: 1; }
.vp-b { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 8px; background: none; color: #fff; opacity: .92; cursor: pointer; }
.vp-b:hover { opacity: 1; }
.vp-b[hidden] { display: none; }
.vp-b svg { width: 26px; height: 26px; }
.vp-play svg { width: 30px; height: 30px; }
.vp-set svg { width: 24px; height: 24px; transition: transform .2s; }
.vp.is-menu .vp-set svg { transform: rotate(30deg); }
.vp-time { padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 0 2px rgba(0, 0, 0, .5); }
.vp-dur, .vp-sep { opacity: .85; }
/* The sound: the slider opens beside the speaker, as on YouTube. */
.vp-vol { display: flex; align-items: center; }
.vp-vslider { --v: 100%; width: 0; height: 24px; margin: 0; padding: 0; opacity: 0; background: none; cursor: pointer; transition: width .2s, opacity .2s, margin .2s; -webkit-appearance: none; appearance: none; }
.vp-vol:hover .vp-vslider, .vp-vol:focus-within .vp-vslider { width: 56px; margin-right: 6px; opacity: 1; }
.vp-vslider::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
.vp-vslider::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #fff; -webkit-appearance: none; appearance: none; }
.vp-vslider::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
.vp-vslider::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.vp-vslider:focus-visible { outline-offset: 2px; }
/* A button's name and key over it, on hover. */
.vp-b[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 6px 9px; border-radius: 4px; background: var(--vp-panel); color: #fff; font: 500 var(--fs-micro)/1.3 var(--font-sans); white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .1s; }
.vp-play[data-tip]::after { left: 0; transform: none; }
.vp-set[data-tip]::after, .vp-fs[data-tip]::after { left: auto; right: 0; transform: none; }
@media (hover: hover) { .vp-b[data-tip]:hover::after { opacity: 1; } }
.vp.is-menu .vp-b::after { display: none; }
/* The middle: the big play at rest, and what a click or a key just did. */
.vp-big { position: absolute; left: 50%; top: 50%; z-index: 2; display: none; place-items: center; width: 68px; height: 48px; padding: 0; border: 0; border-radius: 14px; background: var(--cobalt); color: #fff; transform: translate(-50%, -50%); cursor: pointer; transition: background-color .15s; }
.vp-big:hover { background: var(--cobalt-hover); }
.vp-big svg { width: 30px; height: 30px; }
.vp.is-start .vp-big, .vp.is-ended .vp-big { display: grid; }
.vp-bezel { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; }
.vp-bezel svg { width: 28px; height: 28px; }
.vp-bezel.is-on { animation: vp-bezel .5s linear forwards; }
@keyframes vp-bezel { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.vp-note { position: absolute; top: 10%; left: 50%; z-index: 2; padding: 8px 14px; border-radius: 4px; background: rgba(0, 0, 0, .5); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s; }
.vp-note.is-on { opacity: 1; }
.vp-spin { position: absolute; left: 50%; top: 50%; z-index: 2; display: none; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: vp-spin .9s linear infinite; pointer-events: none; }
.vp.is-wait .vp-spin { display: block; }
.vp.is-wait .vp-big { display: none; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-msg { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; padding: 16px; background: #111; font-size: 15px; text-align: center; }
/* The gear's menu. */
.vp-menu { position: absolute; right: 12px; bottom: 60px; z-index: 4; min-width: 240px; max-height: calc(100% - 72px); overflow-y: auto; padding: 8px 0; border-radius: 12px; background: var(--vp-panel); font-size: 14px; }
.vp-menu[hidden], .vp-mpage[hidden] { display: none; }
.vp-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 16px; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.vp-mi:hover, .vp-mi:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.vp-mv { margin-left: auto; opacity: .8; }
.vp-mic { flex: none; width: 22px; height: 22px; }
.vp-mh { margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .2); font-weight: 600; }
.vp-ck { flex: none; width: 20px; height: 20px; visibility: hidden; }
.vp-mi[aria-checked="true"] .vp-ck { visibility: visible; }
/* A phone: a tap shows the controls over a dimmed picture, play in the middle;
   a double tap at a side jumps. No volume slider (the phone has its buttons). */
.vp-shade { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .25s; }
.vp.is-touch:not(.is-idle):not(.is-start) .vp-shade { opacity: 1; }
.vp.is-touch:not(.is-idle) .vp-big { display: grid; }
.vp.is-touch:not(.is-start):not(.is-ended) .vp-big { width: 60px; height: 60px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.vp.is-touch .vp-knob { transform: none; }
.vp.is-touch .vp-vslider { display: none; }
.vp-tap { position: absolute; top: 0; bottom: 0; z-index: 2; display: grid; place-items: center; width: 38%; background: rgba(255, 255, 255, .14); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .3s; }
.vp-tap-l { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.vp-tap-r { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.vp-tap.is-on { opacity: 1; transition: none; }
.vp:fullscreen { border-radius: 0; background: #000; }
.vp:fullscreen::after { content: none; }
.vp.is-fs .vp-row { height: 56px; }
@container (max-width: 480px) {
    .vp-bar { padding: 0 6px; }
    .vp-row { height: 40px; }
    .vp-b { width: 40px; height: 40px; }
    .vp-b svg { width: 24px; height: 24px; }
    .vp-play svg { width: 26px; height: 26px; }
    .vp-menu { right: 6px; bottom: 48px; min-width: 200px; max-height: calc(100% - 56px); }
    .vp-mi { min-height: 36px; }
}
/* The block's one card: its heading is the problem's name in the heading face
   (.st-pc-h, as the homework's cards; user 2026-10-11). */
/* The block's problem: the statement, then each question with room around it
   (24px between questions, 10px from a question to its answer). */
/* The label belongs to the statement (12px over it), the questions are a block of
   their own (32px under it), the hint hangs off the statement (12px); the card
   has room around all of it. */
#probBox { gap: 12px; padding: 20px clamp(16px, 3vw, 24px) 24px; }
#probBox .st-step-b { gap: 20px; }
#probBox .st-prob { margin-top: 12px; }
#probBox #hintBox { margin-top: -8px; }
/* An open problem is a maths surface: the клітинка, as on the archive's problem
   panel; every control on it keeps a solid card ground. */
#probBox:not(.is-closed), .st-probs { background-image: linear-gradient(rgba(44,70,216,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(44,70,216,.045) 1px, transparent 1px); background-size: 23px 23px; background-position: -1px -1px; }
#probBox .seg { background: var(--card); }
/* «Підказка»: quiet, label-sized, so the header row stays the label's height and
   «ЗАДАЧА» stays 12px over the statement; the 44px target is an unseen margin. */
.st-hintlink { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; color: var(--cobalt-deep); font: 500 var(--fs-label)/1.3 var(--font-sans); cursor: pointer; }
.st-hintlink::after { content: ""; position: absolute; inset: -13px -10px; }
.st-hintlink svg { width: 16px; height: 16px; flex: none; }
.st-hintlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-hintlink:disabled { color: var(--text-muted); cursor: default; }
.st-prob { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: stretch; }   /* minmax(0): a wide display formula scrolls in its own box, never widens the page */
.st-prob .field, .st-q { gap: 10px; }
.st-prob fieldset.field > legend { margin-bottom: 10px; }   /* a legend sits outside the fieldset's grid gap */
.st-q { display: grid; }
.st-prob #checkRow { padding-top: 4px; }
.st-body > * { margin: 0; } .st-body > * + * { margin-top: 10px; }
.seg.is-2 { grid-template-columns: repeat(2, 1fr); max-width: 240px; }
.seg.is-2 span { min-height: 44px; font-size: var(--fs-body); }
.st-opts { display: grid; gap: 8px; }
.st-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
.st-opt input { margin: 3px 0 0; flex: none; }
.st-opt:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-wash); }
#probBox input.st-num { max-width: 200px; }   /* an id: the base input rule's :not() chain outranks any class chain */
/* The problem reads in the mathematics' own size (Math, 20px), its questions
   above label size; a wrong field is ink with ✕, a right one sprout with ✓ —
   red stays the archive's pencil (DESIGN.md › Answer states). */
.st-statement, .st-body { font-size: var(--fs-math); line-height: 1.5; }
.st-prob .field > span, .st-prob .field > legend { font-size: var(--fs-body); line-height: 1.4; color: var(--text); }
.st-fmark { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.st-fmark svg { width: 16px; height: 16px; flex: none; }
.st-fmark.is-ok { color: var(--sprout-text); }
/* The verdict sits in the problem's card, so it is never a card itself: a
   hairline under the form, then the words; «Правильно!» is a sprout bed. */
.st-res { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 10px; }
.st-res p { margin: 0; }
.st-res b svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.st-res.is-ok { border-top: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sprout-wash); }
.st-res.is-ok b svg { color: var(--sprout-text); }
/* Every answer control in the card is drawn alike: hairline, like the fields. */
.st-prob .seg { border-color: var(--line); }
.st-hint { background: var(--cobalt-wash); border-radius: var(--radius-sm); padding: 10px 12px; }   /* no left rule: that belongs to the editorial note */
#res { display: grid; gap: 12px; }
/* Closed until its video is watched: the offered-not-yet look (ground, dashed). */
.st-step.is-closed { background: var(--ground); border-style: dashed; border-color: color-mix(in srgb, var(--text-2) 40%, var(--line)); }
.st-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.st-quote { margin: 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm); }
.st-quote p { margin: 8px 0 0; }
/* In a lesson's step the teacher's comment is not a card (raise once): it is
   a row of the step, a quotation mark in the tile column, the words where the
   titles start. */
.st-steps .st-quote { display: grid; grid-template-columns: max(36px, calc(var(--st-tile, 1.24) * 17.16px + 12px)) minmax(0, 1fr); column-gap: 12px; padding: 0; border: 0; background: none; border-radius: 0; font-size: var(--fs-body); line-height: 1.5; }
.st-steps .st-quote::before { content: "«"; justify-self: center; font: 600 28px/1 var(--font-display); color: var(--text-muted); }

/* Homework problems: ONE maths surface (card, the клітинка), each problem a row under
   a hairline, never a card per problem. Only the mathematics stands on it (user
   2026-10-11): in a lesson's step the heading, the hand-in and the result stand
   outside the card, on the page. */
.st-probs { list-style: none; margin: 0; padding: 4px clamp(16px, 3vw, 20px); counter-reset: p; display: grid; background-color: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.st-probs li { counter-increment: p; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: first baseline; gap: 6px; padding: 14px 0; }
.st-probs li + li { border-top: 1px solid var(--line); }
.st-probs li::before { content: counter(p) "."; font-weight: 600; color: var(--text-2); }
.st-probs .st-prob { display: grid; gap: 8px; min-width: 0; }
/* A figure is drawn on the page: its white ground takes the paper and the grid under it. */
.st-probs img { mix-blend-mode: multiply; }
/* The card's edges stand on the column's, as every surface's on the page (no hang
   into the gutter: a section has no tile to line its numbers up under, 2026-10-12). */
.st-steps .st-probs { padding: 4px 16px; }
/* In a step the numbers stand centred in a tile's width, as the blocks' do. */
.st-steps .st-probs li { grid-template-columns: max(36px, calc(var(--st-tile, 1.24) * 17.16px + 12px)) minmax(0, 1fr); gap: 12px; }
.st-steps .st-probs li::before { text-align: center; }
@media (max-width: 719px) { .st-steps .st-quote { column-gap: 10px; } .st-steps .st-probs li { gap: 10px; } }
.st-steps .st-probs + * { margin-top: 4px; }
/* A problem's number and title, no tile (user 2026-10-11): the heading face, set as the
   archive's problem cards set their titles (.rcard h3). */
/* A problem's heading is written by hand (user 2026-10-11; the page's title stays
   Unbounded): Caveat 700, small on its em, so 1.5× the read step. */
.st-pc-h { margin: 0; font-family: var(--font-script); font-size: calc(var(--fs-read) * 1.5); font-weight: 700; line-height: 1.15; letter-spacing: 0; color: var(--text); text-wrap: pretty; overflow-wrap: anywhere; }   /* pretty, never balance: balance halves a long title and leaves the first line short (user 2026-10-12) */
/* A lesson page's problems (user 2026-10-12): every problem its own card of
   клітинка, headed in the hand «N. Назва» (.st-pc-h), the statement under it.
   The homework's, «Ще задачі»'s extra ones and the archive's olympiad ones look
   alike. An archive card has no number (its code is its reference) and adds its
   competition, grade · topic and code at the foot
   and is a link to its page in a new tab, the glyph in its top-right corner.
   Two to a row from 720px, six columns each on the grid's gutter. A card's edges
   stand on the column's, where the section's title, its labels, the hairline over
   it and the blocks' tiles and videos all start: a card never hangs into the
   gutter (it did by 17px, so the frames stood alone off that edge, user
   2026-10-12). Cards in a row share their height; the foot keeps to the bottom. */
.st-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.st-cards > li:not(.st-card) { display: grid; min-width: 0; }   /* a link card's item: the card fills it */
.st-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 16px 20px; background-color: var(--card); background-image: linear-gradient(rgba(44,70,216,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(44,70,216,.045) 1px, transparent 1px); background-size: 23px 23px; background-position: -1px -1px; border: 1px solid var(--line); border-radius: var(--radius-md); }
/* A figure is drawn on the card: its white ground takes the paper and the grid under it. */
.st-card img { mix-blend-mode: multiply; }
.st-card.is-link { position: relative; color: var(--text); text-decoration: none; transition: border-color .14s; }
.st-card.is-link .st-pc-h { padding-right: 28px; }
.st-card.is-link:hover { border-color: var(--cobalt); }
.st-card.is-link:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.st-card-go { position: absolute; top: 16px; right: 14px; display: grid; color: var(--text-muted); transition: color .14s; }
.st-card.is-link:hover .st-card-go { color: var(--cobalt-deep); }
.st-card-foot { margin-top: auto; display: grid; gap: 2px; font-size: var(--fs-micro); line-height: 1.4; color: var(--text-muted); }
.st-card-comp { color: var(--text-2); }
.st-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.st-card-meta b { font-weight: 600; color: var(--text-2); }
.st-card-id { flex: none; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.st-card.is-skel { min-height: 160px; }
.st-card.is-skel .sk { display: block; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--cobalt-wash) 0%, #FBFBFE 45%, var(--cobalt-wash) 90%); background-size: 220% 100%; animation: fp-shimmer 1.25s linear infinite; }
.st-card.is-skel .sk-title { width: 62%; height: 22px; }
.st-card.is-skel .sk-line { height: 13px; }
.st-card.is-skel .sk-short { width: 58%; }
.st-steps .st-cards + * { margin-top: 4px; }
@media (min-width: 720px) {
    .st-steps .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); }
    .st-steps .st-cards > li:only-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .st-card.is-link, .st-card-go { transition: none; } .st-card.is-skel .sk { animation: none; } }
/* «Ще задачі» (user 2026-10-12): the lesson PDF's problems beyond the homework, the
   step before it. Two parts under Micro labels, «Додаткові завдання» and «Завдання
   з олімпіад», both as the cards above. */
.st-extra-part { display: grid; gap: 12px; min-width: 0; }
.st-extra-part + .st-extra-part { margin-top: 20px; }
.st-extra-part > .st-h2 { margin: 0; }

/* The home board: the предмети as sections (above), then promos in two columns. */
@media (min-width: 1024px) {
    .st-promos { grid-template-columns: 1fr 1fr; column-gap: var(--gut); }
}
@media (min-width: 1024px) {
    .cab-onair { padding: 8px 24px; font-size: var(--fs-body); }
    .st-onair-t { display: flex; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cab-onair .st-live, .st-tag.is-live .st-live { animation: none; } .st-promo-a .st-name, .st-promo-x, .st-pcard-h, .st-pcard-h .st-chev, .st-brief-a, .st-brief-a b { transition: none; } .is-nope { animation: none; } }

/* ── Admin · Перевірка ДЗ (pages/admin.js grading*) ───────────────────────
   The AI's homework checks: the list, one check, the marking schemes. An operator's
   page: dense, calm, no colour for state on its own (each state has a word and a
   glyph). Raise once: a problem is a card, its parts are hairline sections, the
   evidence and the model's own note are panel wells. Never red (the One Pencil Rule).
   Figures (the mark, points) are Unbounded as .kpi / .level-n; never the hand. */

/* The month's line and the counts in the filter chips */
.gr-line { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; margin: 0 0 4px; font-size: var(--fs-label); color: var(--text-2); }
.gr-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.gr-line a { color: var(--cobalt-deep); }
.gr-filters { margin: 12px 0 4px; }
.gr-filters .chipbtn { display: inline-flex; gap: 6px; align-items: center; }
.gr-n { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.chipbtn.is-on .gr-n { color: inherit; opacity: .8; }
.gr-live { min-height: 1.5em; margin: 0 0 8px; }

/* States: a glyph and a word, never colour alone */
.gr-st { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.gr-st svg { flex: none; }
.gr-st.is-queued { color: var(--text-muted); }
.gr-st.is-running { color: var(--cobalt-deep); font-weight: 600; }
.gr-st.is-running svg { animation: gr-spin 1.6s linear infinite; }
.gr-st.is-done { color: var(--sprout-text); }
.gr-st.is-failed { color: var(--text); font-weight: 600; }
@keyframes gr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gr-st.is-running svg { animation: none; } }

/* Flags: the archive's meta chip, smaller (they sit in table cells) */
.gr-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gr-flag { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ground); color: var(--text-2); font-size: var(--fs-micro); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.gr-code, .gr-model { font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }

/* The list: one row per check, the whole row opens it */
.gr-row { position: relative; }
.gr-open { color: var(--text); font-weight: 600; text-decoration: none; }
.gr-open::after { content: ''; position: absolute; inset: 0; }
.gr-open:focus-visible { outline: none; }
.gr-row:has(.gr-open:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.gr-row:hover { border-color: var(--cobalt); }
.gr-row:hover .gr-open { color: var(--cobalt-deep); }
.gr-who { display: block; font-size: var(--fs-micro); color: var(--text-muted); }
.gr-row > span:not(:first-child) { align-items: baseline; }
.gr-row .gr-flags { justify-content: flex-end; }
@media (max-width: 719px) {
    /* A phone keeps what decides whether to open a check; model and cost are inside it. */
    .gr-table .rt-row > span:nth-child(6), .gr-table .rt-row > span:nth-child(7), .gr-table .rt-row > span:has(> .gr-none) { display: none; }
}
.gr-empty { display: grid; gap: 10px; justify-items: start; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.gr-empty p { margin: 0; }
@media (min-width: 720px) {
    .gr-table .rt-head, .gr-table .rt-row {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.7fr) 64px 136px minmax(0, 1.5fr) minmax(0, 1fr) 92px 112px;
    }
    .gr-table .gr-model { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gr-table :is(.rt-head, .rt-row) > span:first-child { grid-column: auto; }
    .gr-row:hover { background: var(--ground); }
    .gr-row .gr-flags { justify-content: flex-start; }
    .gr-table .rt-row > span:nth-child(8) { font-size: var(--fs-micro); color: var(--text-muted); }
}
@media (min-width: 720px) and (max-width: 1023px) {
    /* Model and cost fold away on a tablet; the check itself still shows them. */
    .gr-table .rt-head, .gr-table .rt-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr) 64px 136px minmax(0, 1.4fr) 104px; }
    .gr-table :is(.rt-head, .rt-row) > span:nth-child(6), .gr-table :is(.rt-head, .rt-row) > span:nth-child(7) { display: none; }
}

/* One check: the head */
.gr-review > .cab-crumbs { margin-bottom: 0; }
.gr-head { display: grid; gap: 12px; min-width: 0; }
.gr-head .cab-h1 { margin: 0; }
.gr-ctx { margin: -6px 0 0; color: var(--text-2); font-size: var(--fs-label); }
.gr-score { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.gr-total { display: flex; gap: 14px; align-items: baseline; margin: 0; }
.gr-total b { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gr-err, .gr-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: var(--fs-label); overflow-wrap: anywhere; }
.gr-err svg, .gr-warn svg, .gr-done svg { flex: none; margin-top: 2px; }
.gr-warn { background: transparent; padding: 0; color: var(--text); font-weight: 600; }
.gr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gut); margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gr-facts > div { padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.gr-facts dt { font-size: var(--fs-micro); color: var(--text-muted); }
.gr-facts dd { margin: 2px 0 0; font-size: var(--fs-label); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .gr-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-actions .btn { gap: 8px; }
.gr-actions .btn[aria-expanded="true"] { background: var(--cobalt-wash); border-color: var(--cobalt); color: var(--cobalt-deep); }
.gr-rerun { display: grid; gap: 10px; justify-items: start; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); max-width: 560px; }
.gr-rerun[hidden] { display: none; }
.gr-rerun fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0; width: 100%; }
.gr-rerun legend { padding: 0; margin-bottom: 4px; }
.gr-rerun .opt { font-size: var(--fs-label); min-height: 40px; }
.gr-rerun p { margin: 0; }
/* As specific as the cabinet's input reset (.cabinet input:not(…)×4), so this one wins. */
.cabinet .gr-other input[type=text]:not([type=radio]):not([type=checkbox]) { width: auto; height: 36px; min-height: 0; flex: 1 1 auto; min-width: 0; padding: 4px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: 400 var(--fs-body) var(--font-sans); accent-color: auto; }
.gr-other input[type=text]:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-wash); }
.gr-sum { padding-top: 4px; }

/* One check: the problems, the steps, the history */
.gr-part { display: grid; gap: 12px; min-width: 0; }
.gr-part > .cab-h2 { margin: 8px 0 0; }
.gr-prob { padding: 18px 20px; min-width: 0; }
.gr-prob-h { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.gr-prob-h h3 { margin: 0; font: 600 var(--fs-read)/1.3 var(--font-sans); color: var(--text); min-width: 0; }
.gr-no { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gr-pts { margin: 0; flex: none; font-size: var(--fs-label); color: var(--text-2); font-variant-numeric: tabular-nums; }
.gr-pts b { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; color: var(--text); }
.gr-meta { margin: 4px 0 0; font-size: var(--fs-micro); color: var(--text-muted); }
.gr-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.gr-sec > .card-h { margin-bottom: 8px; }
.gr-fold > summary { min-height: 36px; font-size: var(--fs-label); color: var(--text-2); }
.gr-fold[open] > summary { margin-bottom: 6px; }
.gr-tr { font-size: var(--fs-read); }
.gr-sub { margin: 12px 0 6px; font-size: var(--fs-micro); font-weight: 600; color: var(--text-2); }
.gr-items { list-style: none; margin: 0; padding: 0; display: grid; }
.gr-it { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); gap: 0 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.gr-it:first-child { border-top: 0; padding-top: 2px; }
.gr-items.is-plain .gr-it { grid-template-columns: 40px minmax(0, 1fr); }
.gr-tick { width: 18px; height: 18px; margin-top: 2px; display: grid; place-items: center; border: 1.5px solid var(--stroke); border-radius: 50%; color: var(--sprout-text); }
.gr-it.is-got .gr-tick { border-color: var(--sprout-text); background: var(--sprout-wash); }
.gr-it.is-got.is-ded .gr-tick { border-color: var(--text); background: var(--panel); color: var(--text); }
.gr-it-p { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; font-size: var(--fs-label); line-height: 1.55; color: var(--text); }
.gr-it:not(.is-got) .gr-it-p { color: var(--text-muted); font-weight: 500; }
.gr-items.is-plain .gr-it .gr-it-p { color: var(--text); font-weight: 600; }
.gr-it-t { min-width: 0; font-size: var(--fs-label); }
.gr-it-h { margin: 0 0 2px; }
.gr-grp { font-size: var(--fs-micro); color: var(--text-muted); }
.gr-it:not(.is-got) .gr-it-t .md-text { color: var(--text-2); }
.gr-items.is-plain .gr-it-t .md-text { color: var(--text); }
.gr-ev { margin: 8px 0 2px; padding: 8px 12px; background: var(--panel); border-radius: var(--radius-sm); }
.gr-ev .math-text { font-size: var(--fs-body); }
.gr-ev .math-text::before { content: '«'; } .gr-ev .math-text::after { content: '»'; }
.gr-ev .math-text > p { display: inline; }
.gr-zero, .gr-issues { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-label); }
.gr-notes { font-size: var(--fs-label); color: var(--text-2); }
.gr-calc { margin: 0; font-size: var(--fs-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gr-calc + .gr-warn { margin-top: 8px; }
.gr-well { margin-top: 14px; padding: 12px 14px; border-top: 0; background: var(--panel); border-radius: var(--radius-sm); }
.gr-well .md-text { font-size: var(--fs-label); }
.gr-steps { list-style: none; margin: 0; padding: 4px 16px; display: grid; }
.gr-step { padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.gr-step:first-child { border-top: 0; }
.gr-step-h { margin: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; font-size: var(--fs-label); }
.gr-step-no { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--fs-micro); }
.gr-step-x { grid-column: 2; font-size: var(--fs-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 720px) {
    .gr-step-h { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .gr-step-x { grid-column: 3; text-align: right; }
}
.gr-step.is-err .gr-step-h b::after { content: ' · помилка'; font-weight: 400; color: var(--text-2); }
.gr-step > .gr-err { margin: 8px 0 0 34px; }
.gr-raw { margin: 4px 0 0 34px; }
.gr-raw > summary { min-height: 36px; font-size: var(--fs-label); font-weight: 500; color: var(--cobalt-deep); }
.gr-raw > summary .fine { font-weight: 400; }
.gr-raw-b { position: relative; display: grid; gap: 4px; padding-bottom: 6px; }
.gr-copy { justify-self: end; gap: 6px; }
.gr-pre { margin: 0; padding: 10px 12px; max-height: 420px; overflow: auto; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 400 var(--fs-micro)/1.55 var(--font-mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.gr-raw-b .gr-sub { margin: 6px 0 2px; }
.gr-hist { list-style: none; margin: 0; padding: 4px 16px; }
.gr-hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-label); }
.gr-hist li:first-child { border-top: 0; }
.gr-hist li.is-here .gr-hist-w { font-weight: 600; }
.gr-hist .gr-hist-w { color: var(--text); }
.gr-hist a.gr-hist-w { color: var(--cobalt-deep); }
@media (min-width: 720px) { .gr-hist li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 80px 140px 110px; } }
@media (max-width: 719px) { .gr-hist li > .gr-model, .gr-hist li > .num.fine { display: none; } }

/* One check: the photos — the side column from 1024px, under the head below it */
.gr-review .st-side { align-self: start; gap: 10px; }
.gr-photos > .card-h { margin: 0; }
.gr-pgs { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-pg { min-width: 36px; height: 36px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text-2); font: 600 var(--fs-label) var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.gr-pg:hover { border-color: var(--cobalt); color: var(--cobalt-deep); }
.gr-pg.is-on { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
.gr-page { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); overflow: hidden; cursor: zoom-in; }
.gr-page:hover { border-color: var(--cobalt); }
.gr-page img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.gr-page .fine { display: block; padding: 24px 12px; }
.gr-photos > .fine { margin: 0; }
@media (min-width: 1024px) {
    .gr-page img { max-height: calc(100vh - 93px - 150px); }
}
@media (max-width: 1023px) {
    .gr-review .st-main > * { order: 2; }
    .gr-review .st-side { order: 1; }
}
@media (pointer: coarse) { .gr-pg { min-width: 44px; height: 44px; } }

/* Full screen pages: ← → walk, a click zooms where it lands */
.gr-view { padding: 0; }
.gr-view-b { position: fixed; inset: 0; display: grid; place-items: center; padding: 56px 64px; overflow: hidden; overscroll-behavior: contain; touch-action: none; }   /* still until zoomed: a swipe turns the page */
.gr-view .gr-view-img { max-width: 100%; max-height: calc(100dvh - 112px); object-fit: contain; border-radius: var(--radius-sm); background: var(--card); cursor: zoom-in; }
.gr-view.is-zoomed .gr-view-b { display: block; padding: 16px; overflow: auto; touch-action: pan-x pan-y; }
.gr-view.is-zoomed .gr-view-img { max-width: none; max-height: none; cursor: zoom-out; }
.gr-view-n { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: var(--radius-full); background: var(--card); color: var(--text); font-size: var(--fs-label); font-variant-numeric: tabular-nums; box-shadow: var(--shadow-overlay); }
.gr-view-go { position: fixed; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow-overlay); }
.gr-view-go.is-prev { left: 12px; } .gr-view-go.is-next { right: 12px; }
.gr-view-go:hover, .gr-view .ph-close:hover { color: var(--cobalt-deep); }
@media (max-width: 719px) { .gr-view-b { padding: 56px 8px; } .gr-view-go { top: auto; bottom: 8px; transform: none; } }

/* Schemes */
.gr-toc { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 8px; }
.gr-toc a { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text-2); font-size: var(--fs-micro); text-decoration: none; font-variant-numeric: tabular-nums; }
.gr-toc a:hover { border-color: var(--cobalt); color: var(--cobalt-deep); }
.gr-toc .gr-code { color: var(--text); font-weight: 600; }
@media (pointer: coarse) { .gr-toc a { min-height: 44px; } }
.gr-lesson { display: grid; gap: 12px; margin-top: 28px; scroll-margin-top: 90px; }
.gr-lh { margin: 0; font: 600 var(--fs-lead)/1.25 var(--font-display); color: var(--text); }
.gr-lh .gr-code { margin-right: 6px; font: 600 var(--fs-label) var(--font-sans); color: var(--text-muted); vertical-align: 2px; }
.gr-sch { scroll-margin-top: 90px; }
.gr-badge { flex: none; display: inline-flex; gap: 5px; align-items: center; padding: 2px 9px; border-radius: var(--radius-full); font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; border: 1px solid var(--line); color: var(--text-2); background: var(--ground); }
.gr-badge.is-draft { border-style: dashed; border-color: var(--text-muted); }
.gr-badge.is-approved { border-color: transparent; background: var(--sprout-wash); color: var(--sprout-text); }
.gr-badge.is-changed { border-color: var(--text); color: var(--text); background: var(--card); }
.gr-approve { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.gr-approve .btn { gap: 8px; }
.gr-approve .fine { flex: 1 1 260px; margin: 0; }
.gr-confirm { flex-basis: 100%; margin: 0; font-size: var(--fs-label); font-weight: 600; }
.gr-approve .ans-actions { margin: 0; display: flex; flex-flow: row wrap; gap: 8px; }
.gr-approve .ans-actions .btn { flex: none; width: auto; }
.gr-done { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--sprout-text); font-size: var(--fs-label); font-weight: 600; }
.gr-cap { margin: 0 0 8px; font-size: var(--fs-label); color: var(--text-2); }
.gr-cap b { color: var(--sprout-text); }

/* Held: an AI check that failed its quality gates waits for an admin. A word and the
   person glyph (never red, never colour alone); the block is the head's one panel. */
.gr-st.is-held { color: var(--text); font-weight: 600; white-space: normal; align-items: flex-start; }
.gr-st.is-held svg { margin-top: 2px; }
.gr-held { display: grid; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--text); border-radius: var(--radius-md); background: var(--card); }
.gr-held-h { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-weight: 600; }
.gr-held-h svg { flex: none; margin-top: 2px; }
.gr-held-t { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.gr-why { margin: 2px 0 0; padding: 0 0 0 26px; display: grid; gap: 4px; font-size: var(--fs-label); overflow-wrap: anywhere; }
.gr-why a { color: var(--cobalt-deep); font-weight: 600; }
.gr-why-c { font: 400 var(--fs-micro)/1.4 var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.gr-held .gr-approve { margin-top: 6px; padding-top: 12px; }
.gr-held .gr-approve .gr-warn { flex-basis: 100%; }
.gr-held-was { font-size: var(--fs-label); }
.gr-held-was .gr-why { padding-left: 20px; }
.gr-resolved { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.gr-resolved svg { flex: none; color: var(--sprout-text); }
/* The emails a check sent: what, to whom, and whether it went */
.gr-mails ul { list-style: none; margin: 0; padding: 0; display: grid; }
.gr-mails li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-label); }
.gr-mail-to { color: var(--text-2); overflow-wrap: anywhere; }
.gr-mail-st { display: inline-flex; gap: 5px; align-items: center; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gr-mail-st svg { flex: none; }
.gr-mail-err { font-size: var(--fs-micro); color: var(--text-muted); overflow-wrap: anywhere; }
@media (min-width: 720px) {
    .gr-mails li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
    .gr-mail-err { grid-column: 2 / -1; }
}

/* ── Teacher: one tree, no second header (user 2026-10-12) ─────────────────
   Навчання → предмет → група → заняття, in the student's grammar (.st-*). A
   subject's or a group's side («Що зробити», «Учні») comes first on a phone:
   it holds what to do; the programme and help links come last. */
@media (max-width: 1023px) {
    .st-tsubject .st-side { display: contents; }
    .st-tsubject .st-side > * { grid-column: 1 / -1; }
    .st-tsubject .t-todo { order: 1; }
    .st-tsubject:has(.t-todo) .st-main > .st-stack { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 16px; }   /* «Групи» after «Що зробити» */
    .st-tsubject .st-main > * { order: 2; }
    .st-tsubject .t-roster { order: 3; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 16px; }   /* a section, as the student's «Вчитель» */
}
.tc-due { color: var(--cobalt-deep); font-weight: 600; }
.t-todo .st-mat-r .st-r-t > span { font-size: var(--fs-label); color: var(--text-2); }
/* The lesson's four tabs sit under its title, as the group's tabs did. */
.t-tabs { margin: -8px 0 0; }
/* Each tab its glyph before the word (user 2026-10-14). On a phone the four scroll
   sideways in one line (user 2026-10-14); the page brings the open one into view. */
.t-tabs a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 719px) { .t-tabs { gap: 0; } .t-tabs a { padding-inline: 10px; } }
.t-lesson .st-cols { row-gap: 24px; }
/* «Що бачать учні» (102): the one switch that opens the videos, grades and next homework to the students, over the lesson they get. */
.t-opens { gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.t-links .st-mat { margin-top: 4px; }
.t-links .st-mat:empty { display: none; }
/* «Матеріали»: a link's row edits in place, as «Учні групи» edits a name. Three
   lines: the name, the link (one line, ending in «…»), when the students see it;
   the glyph on the first, as «Що зробити» sets it, the action centred. */
.t-lnk .st-mat-r { min-width: 0; align-items: flex-start; }
.t-lnk .st-mat-i { margin-top: 2px; }
.t-lnk .st-mat-r > .btn { align-self: center; }
.t-lnk .st-r-t { flex: 1 1 auto; min-width: 0; }
.t-lnk .st-r-t > span { font-size: var(--fs-label); color: var(--text-2); }
.t-lnk .st-r-t > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-lnk .st-r-t > span a { color: var(--cobalt-deep); }
.t-lnk .st-r-t > span i { font-style: normal; color: var(--text); font-weight: 500; }
.t-lnk .st-mat-r > .btn { flex: none; margin-left: auto; }
.t-lnk-v[hidden] { display: none; }
.t-lnk .t-lnk-go { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }   /* «Приєднатися» / «Відкрити дошку» · «Змінити» */
.t-lnk .t-lnk-go .btn { gap: 8px; }
.t-lnk-e { padding: 12px 0 12px 32px; }   /* under the name, past the 20px glyph and its 12px gap */
.t-mat .st-steps { max-width: 40rem; }
/* The answers a block's problem checks, under its statement (staff only). */
.t-key { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--cobalt-wash); }
.t-key dt { color: var(--text-2); font-size: var(--fs-label); }
.t-key dd { margin: 0; font-weight: 600; color: var(--cobalt-deep); }
.t-works .st-r.is-off { color: var(--text-2); }
.t-works .st-r.is-off .st-name { color: var(--text-2); font-weight: 400; }
/* «Учні» (20261013190000_student_invitations.sql). The group's side names who has
   not come in yet, a note on each one's letter (in ink when it needs the teacher),
   then «Журнал групи», the list and register below. */
.t-roster .st-mat-r .st-r-t > span { font-size: var(--fs-label); color: var(--text-2); }
.t-roster .st-mat-r .st-r-t > span b { color: var(--text); font-weight: 600; }
.t-roster .st-mat + .t-roster-all { border-top: 1px solid var(--line); }
.t-roster .st-mat + .t-roster-all > li:first-child .st-mat-r { padding-top: 12px; min-height: 48px; }
/* «Журнал групи» (teacher.js groupJournal; mock .impeccable/mocks/journal/): the group's list
   and register as a Ukrainian school's класний журнал. A numbered list, surname first, a
   column a lesson under its month, «н» and the homework's points in one ruled cell (absent
   and a mark: the cell split by a slash, «н» above, the mark below); a late arrival a
   corner. The totals are counts, not marks: regular weight on the page's ground, the cell
   filled left to right: «ДЗ всього» blue to the share earned, «Пропусків» red to the share
   of marked lessons missed, with or without a reason alike (the user's exception to
   red-only-for-corrections, 2026-10-14). Phones keep the surname and scroll the rest sideways.
   The dates stay on screen: under the site's header while the register fits (.is-fit), else
   on top of the register, which then scrolls down inside itself. */
.rg-page > * { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 719px) { .st-page.rg-page { grid-template-columns: minmax(0, 1fr); } }
.rg-page > .st-head + .rg-line, .rg-page > .rg-line + .rg-line, .rg-page > .st-head + .rs-who { margin-top: -18px; }
.rg-line { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.rg-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rg-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: clip; }
.rg-wrap { overflow: auto; max-height: calc(100dvh - var(--rg-top, var(--header-h)) - var(--rg-bot, 0px) - 16px); overscroll-behavior-x: contain; scrollbar-width: thin; }
/* Each head cell pinned at its row's offset (--t, teacher.js): a pinned <thead> lets Chrome paint
   the first scrolled row over its last. --rg-top: the cabinet header's height, staff tabs and all;
   --rg-bot: the staff tab bar's on a phone. */
.rg thead th { position: sticky; top: calc(var(--rg-top0, 0px) + var(--t, 0px)); z-index: 4; background-color: var(--card); }
.rg-wrap.is-fit { overflow: visible; max-height: none; --rg-top0: var(--rg-top, var(--header-h)); }
.rg { --slash: color-mix(in srgb, var(--line), var(--stroke) 30%); }
.rg { border-collapse: collapse; width: 100%; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.rg th, .rg td { height: 40px; padding: 0 8px; border: 1px solid var(--line); text-align: center; white-space: nowrap; }
.rg tr > :first-child { border-left: 0; } .rg tr > :last-child { border-right: 0; }
.rg thead tr:first-child th { border-top: 0; } .rg tfoot tr:last-child td { border-bottom: 0; }
.rg thead th { font: 600 var(--fs-micro)/1.25 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); height: 32px; }
/* The head's bottom rule is a shadow, not a border: a pinned cell leaves its collapsed border behind. */
.rg thead tr:last-child th, .rg thead th[rowspan] { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--stroke); }
.rg thead tr.rg-max th, .rg tbody tr:first-child td { border-top: 0; }
/* «Макс. бал за ДЗ»: a row of its own under the dates, never «22 з 28» under a date (user 2026-10-14). */
.rg thead tr.rg-max th { height: 28px; font: 500 var(--fs-micro) var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.rg thead tr.rg-max th.rg-nm { padding-bottom: 0; vertical-align: middle; }
.rg thead tr.rg-max th.rg-sum { background: var(--ground); }
.rg thead th.rg-mo { text-transform: none; letter-spacing: 0; font: 500 var(--fs-label) var(--font-sans); }
.rg thead th.rg-day { font: 600 var(--fs-label) var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text); height: 40px; padding: 0; }
/* A lesson's column: the register's width shared by its lessons (--n), 42px at least and
   72px at most (user 2026-10-14). With few lessons the name column takes the rest; with
   many the register scrolls sideways on any screen, the names pinned, opened at the latest. */
.rg-box { container-type: inline-size; }
.rg thead th.rg-day, .rg td.rg-v { min-width: 42px; width: clamp(42px, calc((100cqw - 420px) / var(--n, 15)), 72px); }
@media (max-width: 719px) { .rg thead th.rg-day, .rg td.rg-v { min-width: 42px; width: 42px; } }
.rg thead th.rg-day a { color: inherit; text-decoration: none; display: block; line-height: 40px; }
.rg thead th.rg-day a:hover { color: var(--cobalt-deep); background: var(--cobalt-wash); }
.rg thead th.rg-day.is-ahead { color: var(--text-muted); font-weight: 500; }
/* A held lesson whose «Журнал заняття» is not filled in: a cobalt dot under its date, the
   register's one to-do (its cells would otherwise read as «everyone came»). */
.rg thead th.rg-day.is-open::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--cobalt); pointer-events: none; }
.rg .is-edge { border-left: 1px solid var(--stroke); }
.rg thead th.rg-sh { width: 60px; padding: 4px 8px; background: var(--ground); cursor: help; }   /* short, explained on hover (user 2026-10-14) */
.rg thead th.rg-nm { vertical-align: bottom; padding-bottom: 8px; z-index: 5; }
.rg .rg-nm { position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left; min-width: 200px; box-shadow: -2px 0 0 var(--card), 1px 0 0 var(--line); }
.rg-no { display: inline-block; width: 28px; color: var(--text-muted); font-size: var(--fs-label); font-weight: 500; text-transform: none; letter-spacing: 0; }
.rg td.rg-nm a { color: var(--text); text-decoration: none; display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.rg td.rg-nm a:hover { color: var(--cobalt-deep); text-decoration: underline; text-underline-offset: 3px; }
.rg-sur { font-weight: 600; } .rg-in { display: none; }
.rg-out { display: block; padding-left: 28px; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.2; }
.rg-out.is-act { color: var(--text); font-weight: 600; }
.rg td.rg-v { padding: 0 2px; font-size: var(--fs-label); }
.rg td.is-late { background-image: linear-gradient(135deg, var(--stroke) 0 6px, transparent 6px); }
.rg-mk { color: var(--text); font-weight: 500; }
.rg-mk.is-t { color: var(--cobalt-deep); font-weight: 600; }
.rg-n { color: var(--text); font-weight: 700; }
.rg-n.is-ok { color: var(--text-muted); font-weight: 500; }
/* What the teacher scans for reads before who graded: «н/з» in --text-2, a work waiting for a
   grade a cobalt dot (cobalt: the teacher's to-do, as under an unfilled lesson's date). */
.rg-nz { color: var(--text-2); font-weight: 500; }
.rg-wait { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); font-size: 0; vertical-align: middle; }
.rg td.is-split { position: relative; background-image: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--slash) calc(50% - .5px), var(--slash) calc(50% + .5px), transparent calc(50% + .5px)); }
.rg td.is-split.is-late { background-image: linear-gradient(135deg, var(--stroke) 0 6px, transparent 6px), linear-gradient(to bottom right, transparent calc(50% - .5px), var(--slash) calc(50% - .5px), var(--slash) calc(50% + .5px), transparent calc(50% + .5px)); }
.rg td.is-split > * { position: absolute; margin: 0; line-height: 1; font-size: var(--fs-micro); }
.rg td.is-split > .rg-n { top: 4px; left: 5px; }
.rg td.is-split > :is(.rg-mk, .rg-nz, .rg-wait) { bottom: 3px; right: 3px; }
.rg td.is-two > * { display: block; font-size: var(--fs-micro); line-height: 1.15; }
.rg td.rg-v:has(> .rg-go) { position: relative; cursor: pointer; }
.rg td.rg-v > .rg-go { position: absolute; inset: 0; }
.rg td.rg-v > .rg-go:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.rg .rg-first { border-left: 1px solid var(--stroke); }
.rg td.rg-sum { width: 60px; background: var(--ground); font: 400 var(--fs-micro)/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.rg td.rg-sum small { display: block; font-size: var(--fs-micro); color: var(--text-2); }
.rg td.rg-tot { background: linear-gradient(to right, color-mix(in srgb, var(--cobalt) 28%, var(--card)) var(--w, 0%), transparent var(--w, 0%)), var(--ground); }
.rg td.rg-miss { background: linear-gradient(to right, color-mix(in srgb, var(--red) 36%, var(--card)) var(--e, 0%), transparent var(--e, 0%)), var(--ground); }
.rg tbody tr:hover td { background-color: var(--cobalt-wash); }
.rg tfoot td { color: var(--text-2); font-size: var(--fs-label); height: 34px; }
.rg tfoot tr:first-child td { border-top: 1px solid var(--stroke); }
.rg tfoot td.rg-nm { font-weight: 500; }
.rg td[data-k] { cursor: default; }
.rg td[data-k]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.rg td.is-tip, .rg thead tr th.is-tip { box-shadow: inset 0 0 0 1.5px var(--cobalt); }
@media (pointer: coarse) {
  .rg tbody td, .rg thead th.rg-day { height: 44px; }
  .rg thead th.rg-day a { line-height: 44px; }
  .rg td.rg-nm a { padding-block: 12px; margin-block: -12px; }
}
/* Only the management adds a student: the register's last line, then the form. */
.rg tr.rg-add td { height: 44px; }
.rg tr.rg-add:hover td { background-color: transparent; }
.rg-add-b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: 500 var(--fs-body) var(--font-sans); color: var(--cobalt-deep); cursor: pointer; }
.rg-add-b:hover { text-decoration: underline; text-underline-offset: 3px; }
.t-st-e, .t-add-f { display: grid; gap: 12px; max-width: 30rem; }
.t-st-e[hidden], .t-add-f[hidden], .rs-who[hidden] { display: none; }
.t-st-e .field, .t-add-f .field { margin: 0; }
.t-st-b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.t-st-rm { margin-left: auto; }
@media (max-width: 719px) {
  .rg { width: max-content; min-width: 100%; }
  .rg .rg-nm { min-width: 0; padding-left: 6px; }
  .rg thead th.rg-nm { white-space: normal; width: 110px; }
  .rg-no { width: 22px; }
  .rg-fn { display: none; } .rg-in { display: inline; } .rg-out { white-space: normal; max-width: 8rem; padding-left: 22px; }
}
/* The hover card (a tap on a phone): everything the lesson recorded for a student, or the lesson. */
.rtp { position: fixed; z-index: 50; width: 340px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); font-size: var(--fs-label); color: var(--text); pointer-events: none; }
.rtp[hidden] { display: none; }
.rtp p { margin: 0; }
.rtp .rtp-k { font-weight: 600; margin-bottom: 6px; }
.rtp-h { font: 600 var(--fs-micro)/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.rtp .rtp-t { font-weight: 500; margin: 2px 0 8px; }
.rtp dl { margin: 0; border-top: 1px solid var(--line); }
.rtp-r { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.rtp dt { color: var(--text-2); } .rtp dd { margin: 0; font-variant-numeric: tabular-nums; } .rtp dd.is-x { font-weight: 600; }
.rtp .rtp-n { margin-top: 8px; padding: 8px 10px; background: var(--ground); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.rtp-n span { display: block; font: 600 var(--fs-micro)/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 2px; }
.rtp .rtp-go { margin-top: 8px; color: var(--text-2); }
.rtp.is-touch { pointer-events: auto; }
.rtp-a { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: -8px; color: var(--cobalt-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* One student of the register: the letter and «Змінити» under the name, three totals, each lesson. */
.rs-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rs-who-l { margin: 0; font-size: var(--fs-label); color: var(--text-2); overflow-wrap: anywhere; }
.rs-who-l .is-act { color: var(--text); font-weight: 600; }
.rs-who-a { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut, 24px); }
.rs-stat { display: grid; gap: 6px; align-content: start; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.rs-stat .card-h { margin: 0; }
.rs-big { font: 600 var(--fs-title)/1.05 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.rs-big small { font: 500 var(--fs-body) var(--font-sans); color: var(--text-2); margin-left: 6px; }
.rs-stat p { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.rs-stat p b { color: var(--text); font-weight: 600; }
.rs-at { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-at i { width: 14px; height: 14px; border-radius: 3px; background: var(--text-2); box-sizing: border-box; }
.rs-at i.late { background: linear-gradient(135deg, var(--text-2) 50%, transparent 50%); border: 1.5px solid var(--text-2); }
.rs-at i.absent { background: transparent; border: 1.5px solid var(--text); }
.rs-at i.excused { background: transparent; border: 1.5px dashed var(--stroke); }
.rs-hb { display: inline-flex; align-items: flex-end; gap: 4px; height: 30px; padding-bottom: 1px; border-bottom: 1px solid var(--line); max-width: 100%; overflow: hidden; }
.rs-hb span { position: relative; flex: none; width: 10px; height: 100%; }
.rs-hb span i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--cobalt); border-radius: 2px 2px 0 0; }
.rs-hb span.is-miss i { height: 2px !important; background: var(--text); }
.rs-hb span.is-open i { background: transparent; border: 1.5px dashed var(--stroke); border-bottom: 0; height: 100% !important; box-sizing: border-box; }
/* Where the student stands: the group's middle half a band, its median a tick, the student a dot. */
.rs-pos { position: relative; display: inline-block; width: 100%; max-width: 220px; height: 22px; }
.rs-pos::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); border-radius: 1px; }
.rs-pos .band { position: absolute; top: 5px; height: 12px; background: var(--line); border-radius: 3px; }
.rs-pos .med { position: absolute; top: 3px; width: 2px; height: 16px; margin-left: -1px; background: var(--text-2); }
.rs-pos .me { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 2px var(--ground); }
.rs-f .rs-pos { max-width: 120px; }
.rs-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rs-r { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(170px, 1fr) minmax(220px, 1.1fr); gap: 8px 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rs-r.is-ai { grid-template-columns: 40px minmax(0, 1.4fr) minmax(220px, 1.1fr); }
.rs-r .st-no { margin-top: 2px; }
.rs-t { display: grid; gap: 2px; min-width: 0; }
.rs-t b { font-weight: 500; }
.rs-t span { font-size: var(--fs-label); color: var(--text-2); }
.rs-t a, .rs-f a { color: var(--cobalt-deep); text-underline-offset: 3px; }
.rs-f { display: grid; gap: 4px; font-size: var(--fs-label); color: var(--text-2); }
.rs-f .card-h { margin: 0 0 2px; }
.rs-f .is-x { color: var(--text); font-weight: 600; }
.rs-hw { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rs-hw b { font: 600 var(--fs-lead)/1.1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.rs-note { grid-column: 2 / -1; margin: 4px 0 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-label); color: var(--text); overflow-wrap: anywhere; }
.rs-note .card-h { margin: 0 0 4px; }
@media (max-width: 1023px) {
  .rs-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rs-r, .rs-r.is-ai { grid-template-columns: 40px minmax(0, 1fr); }
  .rs-r > .rs-f, .rs-note { grid-column: 2; }
}
/* A lesson's tabs read as the student's lesson does: its sections flat, a hairline
   over each, the title in the display face, no tile. The help («Як вести групу») is
   the same sections on the narrow track. */
:is(.t-lesson, .t-help) :is(.st-steps, .st-side) .st-step-h .st-no { display: none; }
:is(.t-lesson, .t-help) :is(.st-steps, .st-side) .st-step-h .st-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
:is(.t-lesson, .t-help) :is(.st-steps, .st-side) .st-step-h .st-l-s { margin-top: 4px; }
:is(.t-lesson, .t-help) .st-steps { gap: 40px; }
:is(.t-lesson, .t-help) .st-steps .st-step { border-top: 1px solid var(--line); padding-top: 22px; }
.t-help .st-steps { margin-top: 8px; }
/* «Як вести групу» on Навчання: one row over the subjects, its chevron on theirs. */
.t-guide { margin: -4px 0 0; }
.t-help .st-list { gap: 10px; }
.t-lesson .st-steps .st-step.is-cur { border-top-color: var(--text); }
@media (min-width: 1024px) {
    .t-lesson .st-steps { grid-column: 1 / -1; margin-top: 16px; }
    .st-narrow.t-lesson > .t-tabs { grid-column: 1 / -1; }
}
/* «Що зробити»: two lines a row, the glyph on the first. */
.t-todo .st-mat-r { align-items: flex-start; }
.t-todo .st-mat-i { margin-top: 2px; }
.t-todo .st-mat-go { align-self: center; }
/* «Журнал» and «ДЗ» keep the narrow track (eight columns); under the tab line their
   first section needs no hairline of its own. */
@media (min-width: 1024px) { .st-narrow.t-lesson > .st-steps { grid-column: 1 / span 8; } }
.t-lesson > .t-tabs + .st-steps { margin-top: 0; }
.t-lesson > .t-tabs + .st-steps > .st-step:first-child { border-top: 0; padding-top: 4px; }
.t-sts { margin-top: 8px; }
/* «Що бачать учні»: the programme's files (user 2026-10-14) beside the blocks from
   1024px, as the student's lesson has its «Матеріали»; on a phone straight under the
   switch, before the blocks and the sets. Flat, as the lesson's sections. */
.t-lesson .st-side .st-step { background: none; border: 0; border-radius: 0; padding: 0; gap: 12px; }
@media (min-width: 1024px) {
    .t-lesson .st-cols > .st-side { grid-row: 1; position: static; }
    .t-lesson .st-cols > .st-main { grid-row: 1; }
}
@media (max-width: 1023px) {
    .t-lesson .st-main > *, .t-lesson .st-cols > .st-steps { order: 2; }
    .t-lesson .st-cols > .st-side { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
}

/* ── «Журнал» (user 2026-10-12, variant A «Відомість»): one row a student, the
   lesson's facts in columns; everyone starts «На занятті», the exceptions stand
   out in ink. The table takes the frame from 1024px (six columns need it); below,
   a row is two lines: name and presence, then the facts. ─────────────────── */
@media (min-width: 1024px) { .st-page.t-journal > .st-steps { grid-column: 1 / -1; } }
.jl { display: grid; }
.jl-r { --jl-nw: 72px; --jl-nb: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 196px 204px 116px 104px 104px var(--jl-nw); align-items: center; column-gap: 12px; min-height: 52px; padding: 4px 12px; margin: 0 -12px; border-radius: var(--radius-sm); }
.jl-r + .jl-r { box-shadow: 0 -1px 0 var(--line); }
/* 1024–1279px: the facts take their least (the longest value, the header word), so the
   name keeps about 140px beside the note column. */
@media (min-width: 1024px) and (max-width: 1279px) { .jl-r { --jl-nw: 68px; grid-template-columns: minmax(0, 1fr) 194px 210px 108px 100px 96px var(--jl-nw); column-gap: 8px; } }
@media (hover: hover) { .jl-r:not(.jl-hd):hover { background: var(--card); } }
.jl-hd { min-height: 0; padding-bottom: 8px; font: 600 var(--fs-micro) var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); line-height: 1.3; }
.jl-hd > :nth-child(n+3), .jl-c { justify-self: center; text-align: center; }
.jl-facts { display: contents; }
.jl-who { display: grid; gap: 2px; min-width: 0; padding: 6px 0; }
.jl-who .st-name { font-weight: 500; overflow-wrap: anywhere; }  /* a long name wraps, never cut */
.jl-r.is-out .jl-who .st-name { color: var(--text-2); font-weight: 400; }
.jl-facts.is-out .jl-c { color: var(--stroke); }
.jl-lab { display: none; }
/* The journal's select: one drawn box in every row, like the counter and the ticks beside
   it; an exception reads in ink 600, the usual value in --text-2 (user 2026-10-12). */
.t-sel { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.t-sel select { appearance: none; -webkit-appearance: none; max-width: 100%; font: 500 var(--fs-label) var(--font-sans); color: var(--text-2); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 7px 30px 7px 10px; min-height: 36px; cursor: pointer; text-overflow: ellipsis; }
.t-sel svg { position: absolute; right: 9px; pointer-events: none; color: var(--text-2); }
.t-sel select:hover { border-color: var(--cobalt); }
.t-sel select:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.t-sel.is-set select { color: var(--text); font-weight: 600; }
.jl .t-sel select { field-sizing: content; }
@media (min-width: 1024px) { .jl .t-sel, .jl .t-sel select { width: 100%; } }
/* The camera's picker leads with its state as an icon: video, or video-off once off. */
.t-sel.has-lead > svg:first-child { left: 10px; right: auto; }
.t-sel.has-lead select { padding-left: 36px; }
.t-sel.is-set > svg:first-child { color: var(--text); }
@media (min-width: 1024px) { .jl-facts > .jl-c:first-child { justify-self: stretch; } .jl-hd > :nth-child(3) { justify-self: start; text-align: left; } }
/* A yes-or-no fact: a drawn box that fills cobalt with a tick. */
.jl-ck { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--line); border-radius: 7px; background: var(--card); color: transparent; cursor: pointer; }
.jl-ck:hover { border-color: var(--cobalt); }
.jl-ck.is-on { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
/* Board problems, a count: − n +. */
.jl-stp { display: inline-flex; align-items: center; height: 36px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.jl-stp button { display: grid; place-items: center; width: 34px; height: 100%; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.jl-stp button:hover:not(:disabled) { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.jl-stp button:disabled { color: var(--line); cursor: default; }
.jl-stp output { min-width: 26px; text-align: center; font: 600 var(--fs-body) var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text); }
.jl-stp.is-zero output { color: var(--text-muted); font-weight: 500; }
/* The note on a student: a drawn box with the note glyph, cobalt once written; it opens a
   field under the row, from the presence column to the edge (user 2026-10-14). */
.jl-nb { display: inline-grid; place-items: center; width: var(--jl-nb); height: var(--jl-nb); padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text-2); cursor: pointer; }
.jl-nb:hover { border-color: var(--cobalt); color: var(--cobalt-deep); }
.jl-nb.is-on { background: var(--cobalt-wash); border-color: var(--cobalt); color: var(--cobalt-deep); }
/* The open note runs from the presence box's left edge to the note button's right one,
   with room above and below for its focus ring to clear the row's boxes and hairline. */
.jl-note { grid-column: 2 / -1; display: block; margin-inline-end: calc((var(--jl-nw) - var(--jl-nb)) / 2); padding: 8px 0; }
.jl-note[hidden] { display: none; }
.jl-note textarea { display: block; width: 100%; min-height: 40px; field-sizing: content; resize: vertical; font: 400 var(--fs-label)/1.5 var(--font-sans); color: var(--text); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; }
.jl-note textarea:hover { border-color: var(--cobalt); }
.jl-note textarea:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
:is(.jl-ck, .jl-stp button, .jl-nb):focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
@media (pointer: coarse) { .jl-stp { height: 44px; } .jl-stp button { width: 44px; } .jl-ck { width: 32px; height: 32px; } .jl-r { --jl-nb: 44px; } .t-sel select { min-height: 44px; } }
/* Below 1024px a student is a short list, one fact a line: the name, then Присутність,
   Камера, Біля дошки, Гарне просування, Активність, each word left and its control at
   the right edge (user 2026-10-12). */
@media (max-width: 1023px) {
    .jl { max-width: 30rem; }
    .jl-hd { display: none; }
    .jl-r { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 12px 0 14px; border-radius: 0; }
    .jl-who, .jl-facts { display: contents; }
    .jl-who .st-name { padding-bottom: 2px; }
    .jl-facts.is-out { display: none; }
    .jl-note { grid-column: 1; margin-inline-end: 0; padding: 0; }
    :is(.jl-c, .jl-p) { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
    :is(.jl-c, .jl-p) > .jl-lab { order: -1; }
    .jl-lab { display: inline; font-size: var(--fs-label); color: var(--text-2); }
    .jl-save p { font-size: var(--fs-micro); }
}
/* The journal's one action stays in reach while the list scrolls, with the tally. */
.jl-save { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: -16px; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); }
.jl-save p { flex: 1 1 18rem; margin: 0; font-size: var(--fs-label); color: var(--text-2); line-height: 1.5; }
.jl-save b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) { .jl-save .btn { flex: 1 1 100%; } }

/* ── «ДЗ» (user 2026-10-12, variant A «Дві оцінки в рядку»): AI Mind's score and
   the teacher's side by side; who has not handed in is one line under them. ── */
.hw-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-label); color: var(--text-2); }
.hw-sum b { margin-right: 4px; font: 600 var(--fs-body) var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.hwl { list-style: none; margin: 0; padding: 0; }
.hwl-hd, .hwl .st-r { display: grid; grid-template-columns: minmax(0, 1fr) 96px 104px 20px; column-gap: 16px; align-items: center; }
.hwl.is-ai :is(.hwl-hd, .st-r) { grid-template-columns: minmax(0, 1fr) 96px; }
.hwl-hd { padding: 0 0 6px; font: 600 var(--fs-micro) var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.hwl-hd > :nth-child(2), .hwl-hd > :nth-child(3), .hwl-sc { text-align: right; }
.hwl > li + li { margin-top: 0; box-shadow: 0 -1px 0 var(--line); }
.hwl .st-r { min-height: 64px; }
.hwl-sc { font: 500 var(--fs-body) var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.hwl-sc small { font-size: var(--fs-label); font-weight: 400; color: var(--text-muted); }
.hwl-sc.is-none { color: var(--text-muted); font-size: var(--fs-label); }
.hwl-sc.is-mine { color: var(--cobalt-deep); font-weight: 600; }
.hwl-sc.is-part { font-size: var(--fs-label); color: var(--text-2); }
.hw-miss { margin: 4px 0 0; font-size: var(--fs-label); color: var(--text-2); line-height: 1.6; }
.hw-miss b { font-weight: 600; color: var(--text); }
@media (max-width: 719px) {
    .hwl-hd { display: none; }
    .hwl .st-r, .hwl.is-ai .st-r { grid-template-columns: minmax(0, 1fr) auto 20px; row-gap: 2px; }
    .hwl .st-r .st-r-t { grid-row: span 2; }
    .hwl .st-r > .st-chev { grid-row: 1 / span 2; grid-column: 3; }
    .hwl-sc::before { content: attr(data-l) ' '; font: 500 var(--fs-micro) var(--font-sans); color: var(--text-muted); }
}
/* The grading page's integrity mark (Standard §3–4). */
.t-integ { display: grid; gap: 10px; margin-top: 12px; }
.t-integ .fine { margin: -4px 0 0; }

/* ── Grading one work (concept B «Поруч», user 2026-10-12) ─────────────────
   The work on the left, held still and whole on screen, its pages as
   thumbnails under it; the score sheet beside it, ending in the confirm. On a
   phone the work is pinned under the header and the sheet scrolls beneath.
   Flat: hairlines between problems, no boxed bars. --top is the header's
   height, set by the page. */
.gw { gap: 0; }
.gw-head { display: grid; gap: 6px; margin: 4px 0 16px; }
.gw-work { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-width: 0; }
.gw-pg { position: relative; min-height: 0; overflow: hidden; }
.gw-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gw-track::-webkit-scrollbar { display: none; }
.gw-track:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.gw-track figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; display: grid; place-items: center; padding: 12px; box-sizing: border-box; min-height: 0; }
.gw-track img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; border-radius: var(--radius-xs); }
.gw-none { margin: 0; color: var(--text-2); }
.gw-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Full screen: an icon in the page's top-right corner, where viewers keep it, on a
   card square so it reads on any photo; a tap on the page does the same. */
.gw-full { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-xs); background: var(--card); color: var(--text-2); cursor: zoom-in; }
.gw-full:hover { color: var(--cobalt-deep); background: var(--cobalt-wash); }
.gw-full:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.gw-full svg { width: 20px; height: 20px; }
@media (pointer: coarse) { .gw-full { width: 44px; height: 44px; } }
.gw-thumbs { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.gw-thumbs button { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 var(--fs-micro) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.gw-thumbs img { display: block; width: 34px; height: 45px; object-fit: cover; border: 1.5px solid var(--line); border-radius: var(--radius-xs); background: var(--card); }
.gw-thumbs button:hover img { border-color: var(--cobalt); }
.gw-thumbs [aria-current="true"] { color: var(--cobalt-deep); font-weight: 600; }
.gw-thumbs [aria-current="true"] img { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt); }
.gw-thumbs button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: var(--radius-xs); }

.gw-sheet { min-width: 0; }
.gw-list { list-style: none; margin: 0; padding: 0; }
.gw-row { display: grid; gap: 10px; padding: 16px 0 18px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top, 69px) + 16px); }
.gw-row.is-flash { animation: gw-flash 1.2s ease-out; }
@keyframes gw-flash { from { background: var(--cobalt-wash); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .gw-row.is-flash { animation: none; } }
.gw-t { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.gw-t b { font-weight: 600; }
.gw-cond-t { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none; color: var(--cobalt-deep); font: 500 var(--fs-label) var(--font-sans); cursor: pointer; }
.gw-cond-t svg { width: 16px; height: 16px; transition: transform .2s; }
.gw-cond-t[aria-expanded="true"] svg { transform: rotate(180deg); }
.gw-cond { margin: 0; font-size: 18px; }
/* AI Mind's score: a reference, not a mark. Its toggle sits at the row's end; its number on the scale carries a dot. */
.gw-ai-t { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gw-ai-t:disabled { cursor: default; }
.gw-ai { margin: 0; font-size: var(--fs-label); color: var(--text-2); line-height: 1.5; }
.gw-pt.is-ai, .gw-ill.is-ai { position: relative; }
.gw-pt.is-ai::after, .gw-ill.is-ai::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .55; }

/* The score: 0…max, then «Нерозбірливо» (ink when chosen: a state, not a grade) */
.gw-sc { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.gw-pts { flex: 1 1 17rem; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; }
.gw-pt, .gw-ill { min-height: 44px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text); cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.gw-pt { padding: 0; font: 600 17px var(--font-sans); font-variant-numeric: tabular-nums; }
.gw-ill { flex: 0 0 auto; padding: 0 14px; font: 500 var(--fs-label) var(--font-sans); color: var(--text-2); }
.gw-pt:hover:enabled, .gw-ill:hover:enabled { border-color: var(--cobalt); background: var(--cobalt-wash); color: var(--cobalt-deep); }
.gw-pt[aria-pressed="true"], .gw-pt[aria-pressed="true"]:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--card); }
.gw-ill[aria-pressed="true"], .gw-ill[aria-pressed="true"]:hover { background: var(--text); border-color: var(--text); color: var(--card); }
.gw-sc.is-ill .gw-pt { color: var(--text-muted); }
.gw-sc button:disabled { cursor: default; }
.gw-sc button:disabled:not([aria-pressed="true"]) { opacity: .45; }
.gw-sc button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.gw-legend { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }

.gw-notes { display: grid; gap: 24px; margin-top: 20px; }
.gw-notes .t-integ { margin-top: 0; }
.gw-notes textarea:disabled, .gw-notes input:disabled { opacity: .6; }

/* The confirm: the total, what is left, then the one button */
.gw-cf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.gw-sum { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 0; font: 500 var(--fs-label) var(--font-sans); color: var(--text-2); }
.gw-sum b { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.gw-note { grid-column: 1; margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.gw-saved { color: var(--text-muted); white-space: nowrap; }
.gw-saved svg, .gw-ok svg, .gw-go .btn svg { vertical-align: -3px; }
.gw-saved svg { width: 15px; height: 15px; margin-right: 2px; }
.gw-err { grid-column: 1 / -1; margin: 4px 0 0; font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.gw-confirm { grid-column: 2; grid-row: 1 / span 2; }
.gw-cf.is-done { grid-template-columns: 1fr; gap: 12px; }
/* The confirmation and its undo, together: «Змінити оцінку» at the note's end (under it on a phone). */
.gw-ok { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 10px 10px 14px; background: var(--sprout-wash); border-radius: var(--radius-sm); color: var(--text); }
.gw-ok > svg { flex: none; width: 20px; height: 20px; color: var(--sprout-text); align-self: flex-start; margin-top: 2px; }
.gw-ok > p { flex: 1 1 14rem; margin: 0; }
.gw-ok > .btn { flex: none; margin-left: auto; }
@media (max-width: 719px) { .gw-ok > .btn { margin-left: 30px; } }   /* under the text, past the tick */
.gw-go { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gw-go .btn svg { width: 18px; height: 18px; flex: none; margin-left: 4px; }

@media (min-width: 1024px) {
    .gw { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
    .gw > .cab-crumbs { margin-bottom: 16px; }
    .gw-head { grid-column: 7 / -1; grid-row: 2; margin-top: 0; }
    .gw-work { grid-column: 1 / span 6; grid-row: 2 / span 2; align-self: start; position: sticky; top: calc(var(--top, 69px) + 16px); height: calc(100dvh - var(--top, 69px) - 64px); }
    .gw-sheet { grid-column: 7 / -1; grid-row: 3; }
}
@media (max-width: 1023px) {
    .gw { display: block; }
    .gw-work { position: sticky; top: var(--top, 58px); z-index: 5; height: 46dvh; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 10px; background: var(--ground); border-bottom: 1px solid var(--line); }
    .gw-row:first-child { border-top: 0; }   /* the pinned work's own rule is above it */
    .gw-row { scroll-margin-top: calc(var(--top, 58px) + 46dvh + 12px); }   /* lands under the pinned work */
}
@media (max-width: 719px) {
    .gw-pts { flex-basis: 100%; }
    .gw-ill { flex: 1 1 auto; }
    .gw-cf { grid-template-columns: 1fr; }
    .gw-confirm { grid-column: 1; grid-row: auto; width: 100%; margin-top: 6px; }
    .gw-go .btn-primary { width: 100%; justify-content: center; }
}