/* Classroom tools (/teach, /teach/classrooms/{id}, /join). Colours come from the site.css tokens so both
   themes work; button fills follow the site's solid button classes.
   Status colours: green = done / on, amber = attention / in progress, red = danger only. */
.teach{display:grid;gap:24px;margin-top:8px}
.teach-card{background:var(--surface,var(--panel));border:1px solid var(--line);border-radius:var(--radius,14px);padding:24px 26px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 32px -18px rgba(0,0,0,.3)}
.teach-card h2{margin:0 0 16px;font-size:22px}
.teach-back{margin:0 0 6px;font-size:14px}
.teach-inline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.teach-stack{display:grid;gap:12px}
.teach .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.teach input[type=text],.teach input[type=number],.teach select,.teach textarea{background:var(--surface-2,var(--field-bg));color:var(--ink);
  border:1px solid var(--field-line,var(--line));border-radius:var(--radius-sm,10px);padding:8px 12px;font:inherit}
.teach input:focus-visible,.teach select:focus-visible,.teach textarea:focus-visible,.students-toolbar input[type=search]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.teach a:focus-visible,.teach summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.teach input[type=text]{min-width:220px}
.teach input.seat-count{width:7rem;font-size:18px;font-variant-numeric:tabular-nums}
.teach textarea{width:100%;max-width:520px;resize:vertical}
.teach-error{padding-left:0;font-weight:600}
.teach-table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.teach-table th,.teach-table td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.teach-table th{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.teach-table tbody tr:last-child td,.teach-table tbody tr:last-child th{border-bottom:0}
.teach-table tbody tr:hover{background:var(--surface-2,var(--hover-bg))}
.teach-table td.row-actions > form{margin:3px 8px 3px 0}
/* Students tab (owner 2026-11-09): one column per action, rows never wrap (the table scrolls sideways on
   small screens instead), long headers wrap onto two lines, and the page drops its 1240 px column limit so a
   wide table uses the room the screen has */
body.page:has(table#students) main.main{max-width:none}
#students td{white-space:nowrap}
#students th{white-space:nowrap;vertical-align:bottom;line-height:1.25}   /* two-line headers use <br>, so the sort arrow stays on the last line */
#students td.act form{display:flex;align-items:center;gap:8px;margin:0}
#students td.rename input[type=text]{min-width:0;width:11rem}
.teach-table td.row-actions input[type=text]{min-width:140px;width:160px}
.teach code,.join-done code{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace)}
.join-code{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);letter-spacing:.12em;color:var(--ink)}
.big-code{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:30px;font-weight:700;letter-spacing:.14em;color:var(--ink);user-select:all}
.join-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.join-row input[type=text]{flex:1;min-width:260px;max-width:520px}
.pill{display:inline-block;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600}
.pill.on{background:var(--pill-good-bg);color:var(--pill-good-ink)}
.pill.off{background:var(--pill-none-bg);color:var(--pill-none-ink)}
.warn-note{background:var(--pick-bg);color:var(--pick-ink);border-radius:var(--radius-sm,10px);padding:12px 16px;margin:0 0 14px}
.creds{border-color:var(--accent)}
/* small buttons and small link-buttons share one size so rows that mix them line up (owner 2026-11-09) */
button.small,a.btn.small-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  font-size:14px;line-height:1.2;padding:8px 12px;min-height:36px}
button.danger{background:var(--btn-danger)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* dashboard, class tabs, student page, login slips, show on screen (tablet friendly: 44 px targets) */
.teach-hero h1{margin-bottom:4px}
.teach-hero{padding-bottom:4px}
.teach{min-width:0;grid-template-columns:minmax(0,1fr)}   /* wide tables scroll inside, the page never does */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
a.tile,div.tile{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--radius,14px);background:var(--surface,var(--panel));
  border:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:96px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 32px -18px rgba(0,0,0,.3);transition:border-color .15s ease,background-color .15s ease}
a.tile:hover{border-color:var(--accent);background:var(--surface-2,var(--hover-bg))}
a.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile-num{font-family:var(--font-display,Georgia,serif);font-size:34px;font-weight:500;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.tile-num small{font-family:var(--font-text,system-ui,sans-serif);font-size:16px;font-weight:500;color:var(--muted)}
/* sentence case: some labels are whole phrases ("Free classroom: 3 students locked") */
.tile-label{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em}
/* a tile that wants a look: amber = attention */
a.tile.tile-hot{border-color:var(--amber,#f59e0b)}
a.tile.tile-warn .tile-num{color:var(--warn-ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.step{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--field-line,var(--line));
  font-weight:700;font-size:14px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.step.done .step-mark{background:var(--pill-good-bg);color:var(--pill-good-ink);border-color:transparent}
.step.done .step-text{color:var(--muted);text-decoration:line-through}
.step .step-text{flex:1;min-width:180px}
.attention-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:12px}
.attention-item{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;justify-content:space-between;padding:14px 16px;
  border:1px solid var(--line);border-left:4px solid var(--amber,#f59e0b);border-radius:var(--radius-sm,10px);background:var(--surface-2,var(--bg))}
/* a request waiting for an answer is informational, not a warning: the accent, not amber */
.attention-item.access-request{border-left-color:var(--accent)}
.att-main{display:grid;gap:4px;flex:1;min-width:240px}
.att-when{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.att-detail{color:var(--muted)}
.att-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.strays{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.strays li{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface,var(--panel))}
.caught-up{font-size:17px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.class-card{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius,14px);background:var(--surface-2,var(--bg))}
.class-card.archived{opacity:.85}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card-head h3{margin:0;font-size:19px;flex:1;min-width:0;overflow-wrap:anywhere}
.card-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px 14px;margin:0}
.card-stats dt{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.card-stats dd{margin:2px 0 0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
/* unread count: amber = attention. The ink is fixed dark because amber is the same in both themes (8.7:1). */
.unread-badge{display:inline-block;margin-left:6px;min-width:20px;padding:0 6px;border-radius:999px;background:var(--amber,#f59e0b);color:#1a1204;
  font-size:12px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.archived-toggle{margin-top:16px}
.archived-toggle summary{cursor:pointer;font-weight:600;padding:8px 0}
.class-sub{margin:0 0 8px}
.join-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:6px 0 4px}
.join-label{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.class-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 4px}
.class-tabs a{padding:12px 18px;border-radius:var(--radius-sm,10px) var(--radius-sm,10px) 0 0;color:var(--muted);font-weight:600;text-decoration:none;
  margin-bottom:-1px;border-bottom:2px solid transparent;transition:color .15s ease,background-color .15s ease}
.class-tabs a:hover{color:var(--ink);background:var(--surface-2,var(--hover-bg))}
.class-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.class-tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.tab-count{display:inline-block;margin-left:4px;padding:0 8px;border-radius:999px;background:var(--pill-none-bg);color:var(--pill-none-ink);font-size:12px;font-variant-numeric:tabular-nums}
.lesson-bar{margin:0 0 18px}
.lb-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-bottom:8px}
.lb-counts{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.lb-counts .done{color:var(--ok)}
.bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--pill-none-bg)}
.bar .seg.done{background:var(--ok)}
.bar .seg.partial{background:var(--amber,#f59e0b)}   /* in progress */
.activity{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.activity .when{display:inline-block;min-width:92px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.students-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.students-toolbar input[type=search]{background:var(--surface-2,var(--field-bg));color:var(--ink);border:1px solid var(--field-line,var(--line));
  border-radius:var(--radius-sm,10px);padding:10px 14px;font:inherit;min-width:240px;flex:1;max-width:420px}
.bulk-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm,10px);
  margin-bottom:12px;background:var(--surface-2,transparent)}
.bulk-bar .select-all{display:inline-flex;gap:6px;align-items:center;font-weight:600}
#bulkCount{color:var(--muted);margin-right:6px;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;max-width:100%}
.teach-table input[type=checkbox],.bulk-bar input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.seat-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.seat-state{font-weight:600}
.seat-note{margin:0 0 10px}
.student-link{font-weight:600}
.settings-code{font-size:40px}
/* Show on screen: FloatingPanel owns display (hidden attribute), so no display rule here */
#codeScreen{position:fixed !important;inset:0 !important;left:0 !important;top:0 !important;width:100vw !important;height:100vh !important;max-width:none !important;max-height:none !important;
  margin:0;padding:6vh 4vw;box-sizing:border-box;background:var(--bg);color:var(--ink);text-align:center;overflow:auto;z-index:1000}
#codeScreen .screen-hint{font-size:clamp(20px,3vw,40px);color:var(--muted);margin:1vh 0}
#codeScreen .screen-url{font-family:var(--font-display,Georgia,serif);font-size:clamp(32px,6vw,90px);font-weight:500;letter-spacing:-.01em;margin:1vh 0;overflow-wrap:anywhere}
#codeScreen .screen-code{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:clamp(56px,14vw,240px);font-weight:700;letter-spacing:.12em;margin:3vh 0;color:var(--accent-ink)}
/* login slips: 8 per page (2 x 4), dashed cut lines; printing shows only the slips */
.slips{display:grid;gap:18px}
.slip-page{display:grid;grid-template-columns:1fr 1fr;border:1px dashed var(--line)}
.slip{border:1px dashed var(--muted);padding:14px 18px;min-height:150px;box-sizing:border-box;background:var(--surface,var(--panel))}
.slip p{margin:0 0 4px}
.slip-class{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.slip-name{font-size:18px;font-weight:700;color:var(--ink)}
.slip dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0}
.slip dt{color:var(--muted);font-size:13px}
.slip dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.slip code{font-size:16px}
/* paper is white and ink is black whatever the theme: these print colours are fixed on purpose */
@media print{
  @page{margin:10mm}
  body *{visibility:hidden}
  #slips,#slips *{visibility:visible}
  #slips{position:absolute;left:0;top:0;width:100%;gap:0}
  .slip-page{break-after:page;border:0;grid-template-columns:1fr 1fr}
  .slip-page:last-child{break-after:auto}
  .slip{height:62mm;min-height:0;background:#fff;color:#000;border:1px dashed #000;break-inside:avoid}
  .slip-name,.slip dd,.slip dt,.slip-class{color:#000}
}
@media (max-width:700px){.class-tabs a{padding:10px 12px}.tile-num{font-size:26px}}
@media (prefers-reduced-motion:reduce){a.tile,.class-tabs a{transition:none}}