/* The teacher cabinet, the join pages and the teacher pages (programme 2026-10
   F15). Loaded only on /teachers/* and /join/*, so site.css keeps its size cap.
   Every state is said in text, never by colour alone. */

/* --------------------------------------------------- the pupil's shell */
.pupil-header { display: flex; align-items: center; gap: .6rem; padding: .9rem clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--line); padding-top: max(.9rem, env(safe-area-inset-top)); }
.pupil-header .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.pupil-main { padding-left: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-left)); padding-right: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right)); }
.pupil-footer { margin-top: 3rem; padding: 1.25rem clamp(1rem, 4vw, 2rem) max(1.25rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
[data-class-run] [data-test-root]:not([data-class-gate="open"]) [data-start],
[data-class-run] [data-test-root]:not([data-class-gate="open"]) .start-line { display: none; }
.class-pupil, .class-send, .join-form { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.class-pupil h2, .class-send h2 { margin-top: 0; }
/* At 360 px the form, its fields and its button stay inside the panel: full
   width, padding and border included (W4 review). */
.pupil-pin, .join-form { display: grid; gap: .5rem; max-width: 100%; box-sizing: border-box; }
.class-pupil, .class-send, .join-form { max-width: 100%; box-sizing: border-box; }
.pupil-pin input, .pupil-pin button, .join-form input, .join-form button { width: 100%; max-width: 26rem; box-sizing: border-box; }
.class-pupil-title { margin: 0 0 .35rem; font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.pupil-pin input, .join-form input { min-height: 48px; font-size: 1.35rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; padding: .35rem .6rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); }
.pupil-pin button, .join-form button { min-height: 48px; }
.join-tests { display: grid; gap: .6rem; margin: 1rem 0; padding: 0; list-style: none; }
.join-tests a { display: block; min-height: 48px; text-align: left; }

/* -------------------------------------------------------- the cabinet */
.cabinet { margin: 1.5rem 0; }
.cabinet-classes { display: grid; gap: .6rem; margin: .75rem 0 1.5rem; padding: 0; list-style: none; }
.cabinet-classes li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; }
.cabinet-create { display: grid; gap: .45rem; max-width: 26rem; margin: 1rem 0; }
.cabinet-create input, .cabinet-section select, .cabinet-section input[type="number"], .cabinet-section input:not([type]) { min-height: 44px; padding: .3rem .5rem; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; }
.cabinet-section { margin: 1.75rem 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.cabinet-section h3 { margin-top: 0; }
.cabinet-code { font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.cabinet-assignments { padding-left: 1.2rem; }
.cabinet-assignments li { margin: .35rem 0; }
.cabinet-prompt { margin: .75rem 0; padding: .75rem 1rem; border-left: 4px solid var(--accent); background: var(--surface); }
.cabinet-joining { font-weight: 700; }
/* Above the board: joining paused or the window ended, with one-click reopen. */
.cabinet-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .75rem 0; padding: .75rem 1rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); }
.cabinet-banner p { margin: 0; flex: 1 1 16rem; font-weight: 700; }
.cabinet-legend { font-size: .9rem; color: var(--muted); }

/* The board: a seat grid that is safe to project (numbers and "sent" / "not
   yet" only), five columns of 44 px tiles on a phone, ten on a desk. */
.seat-grid { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: .4rem; margin: .75rem 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .seat-grid { grid-template-columns: repeat(10, minmax(44px, 1fr)); } }
.seat { display: grid; place-items: center; min-height: 52px; padding: .25rem; border: 2px dashed var(--line); border-radius: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.seat-number { font-weight: 800; font-size: 1.1rem; }
.seat-state { font-size: .8rem; color: var(--muted); }
.seat[data-state="sent"] { border-style: solid; border-color: var(--ink); background: var(--lime); }
.seat[data-state="sent"] .seat-state { color: var(--ink); font-weight: 700; }
.seat[data-state="sent"] .seat-state::before { content: "\2713\00a0"; }

/* Join cards. On screen, one grid; the sheets of eight are only a print
   grouping (display: contents). Printed: A4, 10 mm margins, two columns by four
   rows of 68 mm cards on every sheet, each sheet ending its page, so 30 seats
   print on exactly four pages and no card is ever split. */
.join-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.join-sheet-page { display: contents; }
.join-card { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; align-items: center; padding: .75rem; border: 1px dashed var(--ink); border-radius: 8px; background: #fff; color: #000; break-inside: avoid; overflow: hidden; }
.join-card svg { display: block; width: 8.5rem; height: 8.5rem; grid-row: span 5; }
.join-card p { margin: 0; }
.join-card-seat { font-weight: 800; }
.join-card-code { font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.join-card-pin { font-size: 1.4rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.join-card-note, .join-card-link { font-size: .85rem; }
@page { size: A4; margin: 10mm; }
@media print {
  body.cabinet-printing .skip-link, body.cabinet-printing .site-header, body.cabinet-printing footer, body.cabinet-printing .crumb, body.cabinet-printing .category-strip, body.cabinet-printing .content-page > :not(.cabinet), body.cabinet-printing .cabinet > :not([data-cabinet-view]), body.cabinet-printing [data-cabinet-view] > :not(.cabinet-section), body.cabinet-printing .cabinet-section:not(:has([data-cabinet-cards])) { display: none !important; }
  body.cabinet-printing .cabinet-section:has([data-cabinet-cards]) > :not([data-cabinet-cards]) { display: none !important; }
  body.cabinet-printing, body.cabinet-printing main, body.cabinet-printing .content-page, body.cabinet-printing .cabinet, body.cabinet-printing .cabinet-section { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }
  body.cabinet-printing .join-sheet { display: block; margin: 0; }
  body.cabinet-printing .join-sheet-page { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 68mm; gap: 0; break-after: page; page-break-after: always; }
  body.cabinet-printing .join-sheet-page:last-child { break-after: auto; page-break-after: auto; }
  body.cabinet-printing .join-card { height: 68mm; box-sizing: border-box; padding: 4mm; border-radius: 0; break-inside: avoid; page-break-inside: avoid; grid-template-columns: 34mm 1fr; gap: 1mm 4mm; }
  body.cabinet-printing .join-card svg { width: 34mm; height: 34mm; }
  body.cabinet-printing .join-card-code { font-size: 15pt; font-weight: 800; }
  body.cabinet-printing .join-card-pin { font-size: 18pt; }
  body.cabinet-printing .join-card-seat { font-size: 12pt; }
  body.cabinet-printing .join-card-note, body.cabinet-printing .join-card-link { font-size: 9pt; }
}

/* ----------------------------------------------------- teacher pages */
.teacher-steps { counter-reset: step; padding-left: 0; list-style: none; }
.teacher-steps li { position: relative; padding-left: 2.4rem; margin: .8rem 0; }
.teacher-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 800; }
.teacher-tests { columns: 2 14rem; padding-left: 1.2rem; }