/* Teacher switching (21 October 2026): the class import (assets/learning/class-import.js), login cards on screen and on
   paper, and the pupil's login-card sign-in (assets/learning/pupil-entry.js). Studio tokens from design.css; the
   teacher workspace (assets/teaching.css) is the reference: white cards on the canvas, cobalt actions, lilac notes. */

/* ---------- the import wizard ---------- */
.ci-page .tw-title p{max-width:720px}
.ci-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 18px}
.ci-box h2{font-size:20px;font-weight:500;letter-spacing:-.025em;margin:0 0 8px}
.ci-box p{color:var(--mut);line-height:1.6;margin:0 0 14px;max-width:760px}
.ci-class-form{display:grid;gap:8px;max-width:520px}
.ci-class-form label{font-weight:600;font-size:14px;margin-top:6px}
.ci-class-form select{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.ci-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.ci-chips{display:flex;flex-wrap:wrap;gap:8px}
.ci-ways{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0 0 18px}
.ci-way{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.ci-way h2{font-size:19px;font-weight:500;letter-spacing:-.02em;margin:0}
.ci-way p{color:var(--mut);font-size:14px;line-height:1.55;margin:0}
.ci-way .btn{align-self:flex-start}
.ci-ways.is-off .ci-way{opacity:.7}
.ci-paste{min-height:132px;resize:vertical;font-family:inherit;line-height:1.5}
.ci-file{position:relative;overflow:hidden;cursor:pointer}
.ci-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ci-file.is-disabled{opacity:.55;pointer-events:none}
.ci-file:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.ci-hint{color:var(--mut);font-size:12.5px}
@media (hover:none) and (pointer:coarse){.ci-hint{display:none}}   /* phones and tablets have no Ctrl and V */
.ci-off{color:var(--mut);font-size:13px;font-weight:600}
.ci-join{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ci-join > div:first-child{flex:1 1 320px;min-width:0}
.ci-code{font-size:18px;letter-spacing:.08em;color:var(--ink)}
.ci-join-qr .ci-qr-svg{width:132px;height:132px;display:block;border-radius:10px}
.ci-gc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:10px}
.ci-gc{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font:inherit;color:var(--ink);cursor:pointer}
.ci-gc:hover,.ci-gc:focus-visible{border-color:var(--blue)}
.ci-gc small{color:var(--mut)}
.ci-tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ci-emails{display:flex;gap:10px;align-items:flex-start;background:var(--card2);border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:14px;line-height:1.5}
.ci-table td{vertical-align:middle}
.ci-table td .tin{margin:0;min-width:120px;padding:9px 12px}
.ci-table tr.is-out td{opacity:.55}
.ci-table tr.is-twice .ci-status,.ci-table tr.is-member .ci-status{color:#7a5a12}
.ci-table tr.is-mine .ci-status{color:#3b35c9}
.ci-status{font-size:13px;font-weight:600;display:block}
.ci-mine{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--mut);margin-top:4px}
.ci-email{display:block;color:var(--mut);font-size:12px;overflow-wrap:anywhere}
.ci-sticky{position:sticky;bottom:12px;z-index:3;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px #2526371a}
.ci-count{color:var(--mut);font-size:13px}
.ci-meter{height:12px;max-width:620px}
.ci-print{border-color:#c9c6f6;background:linear-gradient(180deg,var(--paper),#f6f5ff)}
.lgc-code{font-variant-numeric:tabular-nums;letter-spacing:.06em;white-space:nowrap}

/* ---------- the pupil's side ---------- */
.pe-entry{display:grid;gap:8px;margin:18px 0 6px;padding:16px;border:1px dashed var(--line);border-radius:14px;text-align:center}
.pe-entry p{margin:0;color:var(--mut);font-size:14px}
.pe-entry .btn{justify-self:center}
.pe-code{letter-spacing:.12em;font-variant-numeric:tabular-nums}
.pe-actions{margin-top:16px}
.pe-fixed{display:grid;gap:4px}
.pe-label{font-weight:600;font-size:14px;margin:0}
.pe-value{font-size:20px;font-weight:600;margin:0;overflow-wrap:anywhere}
.pe-join .btnrow{margin-top:8px}

@media (max-width:640px){
  .ci-box,.ci-way{padding:18px}
  .ci-table thead{display:none}
  .ci-table tr{display:grid;grid-template-columns:28px 1fr 1fr 34px;gap:6px 8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
  .ci-table td{padding:0;border:0}
  .ci-table td:nth-child(4){grid-column:2 / 5;grid-row:2}
  .ci-table td .tin{min-width:0;width:100%}
  .ci-join-qr .ci-qr-svg{width:112px;height:112px}
}

/* ---------- login cards on paper: A4, ten cards a sheet (two across, five down) ---------- */
.lgc-print{display:none}
@media print{
  @page{size:A4;margin:10mm}
  body.lgc-printing > *:not(#lgc-print){display:none !important}
  body.lgc-printing{background:#fff !important}
  body.lgc-printing #lgc-print{display:block !important;color:#191a20;font:9pt/1.35 'DM Sans',Arial,sans-serif}
  .lgc-sheet{display:grid;grid-template-columns:93mm 93mm;grid-auto-rows:53mm;gap:3mm 4mm}
  .lgc-card{box-sizing:border-box;border:0.3mm dashed #9aa0aa;border-radius:3mm;padding:3mm 4mm;overflow:hidden;break-inside:avoid;page-break-inside:avoid;display:flex;flex-direction:column;gap:1.2mm}
  .lgc-card header{display:flex;justify-content:space-between;gap:3mm;font-size:7.5pt;color:#4a4d57}
  .lgc-brand{font-weight:700;color:#4540EB;font-size:9pt}
  .lgc-brand i{font-style:normal;color:#191a20}
  .lgc-class{text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .lgc-card h3{margin:0;font-size:12pt;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lgc-body{display:flex;gap:4mm;align-items:center}
  .lgc-qr .lgc-qr-svg{width:25mm;height:25mm;display:block}
  .lgc-card dl{display:grid;grid-template-columns:auto 1fr;gap:1mm 3mm;margin:0;align-items:baseline}
  .lgc-card dt{font-size:7.5pt;color:#4a4d57}
  .lgc-card dd{margin:0;font-size:11.5pt;font-weight:700;overflow-wrap:anywhere}
  .lgc-card dd.lgc-code{font-size:13pt;letter-spacing:.08em}
  .lgc-card p{margin:0;font-size:7pt;color:#4a4d57;line-height:1.3}
  .lgc-list h2{font-size:15pt;margin:0 0 3mm}
  .lgc-list p{font-size:9pt;margin:0 0 4mm;color:#4a4d57}
  .lgc-list table{width:100%;border-collapse:collapse}
  .lgc-list th,.lgc-list td{border-bottom:0.3mm solid #d5d7dd;padding:2mm 2.5mm;text-align:left;font-size:10pt}
  .lgc-list tr{break-inside:avoid;page-break-inside:avoid}
}

/* ---------- the teacher's one-screen class page (assets/learning/teachers.js, 21 October 2026) ---------- */
.tw-user{font-weight:400;color:var(--mut);font-size:12px;margin-left:4px}
.tw-quick-set{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.tw-quick-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tw-quick-pick{flex:1 1 320px;min-width:0}
.tw-quick-pick select{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.tw-quick-kinds{display:flex;flex-wrap:wrap;gap:8px}
.tw-quick-kinds .btn{gap:8px}
.tw-quick-due{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.tw-quick-label{font-size:13px;font-weight:600;color:var(--mut);margin:0 4px 0 8px}
.tw-quick-label:first-child{margin-left:0}
.tw-insight{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:0 0 26px}
.tw-insight .tw-section{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0}
.tw-section-head h2 .tw-ic{margin-right:6px;vertical-align:-3px}
.tw-flag-list,.tw-weak-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tw-flag-list li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}
.tw-flag-list li span{color:#9a2f2f;font-size:13px}
.tw-weak-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;border-bottom:1px solid var(--line);padding:6px 0}
.tw-weak-list li b{font-size:18px}
.tw-weak-list li small{grid-column:1 / 3;color:var(--mut);font-size:12px}
.tw-weak-list li.is-low b{color:#9a2f2f}
.tw-none{color:var(--mut);font-size:14px;margin:0}
.tw-cards,.tw-account{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.tw-account p{margin:0 0 12px;line-height:1.6}
.tw-account{margin-top:20px}   /* a gap below the assignments table on the student page */
.tw-name-form{display:grid;gap:6px;max-width:560px;margin:18px 0 0}
.tw-name-form label{font-weight:600;font-size:14px}
.tw-name-form small{color:var(--mut)}
.tw-danger{color:#9a2f2f}

/* ---------- school settings and account activity on the class page (2026-10-21-school-controls.sql) ---------- */
.tw-controls,.tw-activity{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.tw-controls{margin-top:20px}
.tw-switches{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:4px}
.tw-switches li{border-bottom:1px solid var(--line)}
.tw-switches li:last-child{border-bottom:0}
.tw-switch{display:flex;gap:14px;align-items:flex-start;padding:12px 0;cursor:pointer}
.tw-switch input[role=switch]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:44px;height:26px;margin:2px 0 0;border-radius:999px;background:#c9cad3;position:relative;cursor:pointer;transition:background .15s}
.tw-switch input[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #25263740;transition:transform .15s}
.tw-switch input[role=switch]:checked{background:var(--blue)}
.tw-switch input[role=switch]:checked::after{transform:translateX(18px)}
.tw-switch input[role=switch]:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tw-switch input[role=switch]:disabled{opacity:.6;cursor:wait}
.tw-switch-text{display:grid;gap:3px;min-width:0}
.tw-switch-text b{font-size:15px;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tw-switch-text small{color:var(--mut);font-size:13px;line-height:1.5}
.tw-switch-state{font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:#e8e7fd;color:#3b35c9}
.tw-switch-state.is-off{background:#f3f3f7;color:var(--mut)}
.tw-controls .tw-note{margin:0}
.tw-activity{margin-top:20px}
.tw-activity-wrap{margin:0 0 12px}
.tw-activity-table tbody th{font-weight:500;white-space:nowrap}
.tw-activity .btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:760px){   /* on a phone each entry is a short card: when, what, who it was about (and who did it, unless you) */
  .tw-controls,.tw-activity{padding:16px}
  .tw-activity-table tr{padding:10px 14px;margin:0 0 8px;border-radius:14px}
  .tw-activity-table tbody th{border-bottom:0;padding:0 0 3px;font-size:12px;font-weight:500;color:var(--mut);white-space:normal}
  .tw-activity-table td{display:block;border-bottom:0;padding:0;font-size:14px;line-height:1.45}
  .tw-activity-table td::before{content:none}
  .tw-activity-table td[data-label="What"]{font-weight:600}
  .tw-activity-table td[data-label="By"]{font-size:12px;color:var(--mut)}
  .tw-activity-table td[data-label="By"]::before{content:"By ";display:inline;font-size:12px;font-weight:400;color:var(--mut)}
  .tw-activity-table td.is-me{display:none}
}

/* ---------- the pupil's screens when the teacher switched something off ---------- */
.pe-off{margin:0;padding:12px 16px;border-radius:12px;background:var(--card2);color:var(--ink);font-size:14px;line-height:1.55}