/* eaglenest.css — GENERATED by build/bundle.py from assets/css/parts/*.css; edit the parts, not this file. */

/* ---- 00-tokens.css ---- */
/* ===== Eagle Nest — design system =====
   Ported from Heidi's study hub, which is the look Brian asked for: a companion, not a filing
   cabinet. One difference: Heidi is one person with one teal brand, while Eagle Nest is many classes,
   so the teal is a DEFAULT and each course paints over it. Setting --accent on .app is all it
   takes — every button, ring, pill and highlight follows.                                       */
:root{
  /* the default brand (a class with no colour of its own) */
  --accent:#0f766e; --accent-600:#0d9488; --accent-500:#14b8a6; --accent-050:#effcf9;

  --indigo:#4f46e5; --indigo-500:#6366f1;
  --coral:#f97362; --amber:#f59e0b; --green:#16a34a; --red:#dc2626;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --bg:#f6f8fb; --panel:#ffffff; --panel-2:#f1f5f9; --line:#e5eaf1;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 12px 40px rgba(16,24,40,.14);
  --radius:16px; --radius-sm:11px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sidebar-w:280px;
}
html[data-theme="dark"]{
  --ink:#e9eef6; --ink-2:#c3cddb; --muted:#93a1b5; --faint:#6b7a90;
  --bg:#0b1220; --panel:#111a2b; --panel-2:#0e1626; --line:#22304a;
  --accent-050:#0e2b28;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 16px 50px rgba(0,0,0,.5);
}
/* A course's own colour. app.js sets --accent from course.color and derives the rest, so a
   4th-grade room can be orange and a chemistry course purple without a second stylesheet. */
.app[data-course]{ --accent-050:color-mix(in srgb,var(--accent) 8%,var(--panel)); }
html[data-theme="dark"] .app[data-course]{ --accent-050:color-mix(in srgb,var(--accent) 22%,#0b1220); }

/* ---- names the kept stylesheets still use --------------------------------------------------
   35-content.css and 40-quiz.css came over from v1/v2 unchanged, together with the quiz engine
   they style, and they speak the old vocabulary. Aliasing is a few lines; retyping ~500 lines of
   working CSS to rename a variable is how you break a question type nobody noticed was styled. */
:root{
  --brand:var(--accent); --brand-700:var(--accent); --brand-050:var(--accent-050); --brand-100:var(--accent-050);
  --success:var(--green); --success-100:color-mix(in srgb,var(--green) 14%,transparent);
  --danger:var(--red);   --danger-100:color-mix(in srgb,var(--red) 12%,transparent);
  --warning:var(--amber);--warning-100:color-mix(in srgb,var(--amber) 18%,transparent);
  --info:var(--indigo-500); --info-100:color-mix(in srgb,var(--indigo-500) 12%,transparent);
  --purple:var(--indigo); --purple-100:color-mix(in srgb,var(--indigo) 12%,transparent);
  --teal:var(--accent-600); --teal-100:var(--accent-050);
  --line-2:var(--line); --panel-3:var(--panel-2);
  --display:var(--serif); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius-lg:22px; --on-accent:#fff; --focus:var(--accent-500); --topbar-h:56px;
  --course-color:var(--accent);
}

/* ---- 10-base.css ---- */
*{box-sizing:border-box}
/* [hidden] is display:none in the UA sheet, which ANY author display rule beats — and .ghost-btn
   is display:flex. Without this the teacher's Control button shows up in every student's sidebar. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{line-height:1.2}
:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.tiny{font-size:.76rem}
.right{text-align:right}
.grow{flex:1;min-width:0}
.mt{margin-top:14px}
.flex{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.grid{display:grid;gap:18px}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent-500);border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- 20-shell.css ---- */
/* ===== Layout: sidebar + main, Heidi's shape ===== */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40}
.main{min-width:0;display:flex;flex-direction:column}
.view{flex:1;padding:26px clamp(16px,4vw,44px) 40px;max-width:1120px;width:100%;margin:0 auto}
.app-foot{padding:18px clamp(16px,4vw,44px) 26px;color:var(--faint);font-size:.8rem;border-top:1px solid var(--line)}

/* ===== Sidebar: who you are, what you can do, then what there is ===== */
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 12px}
.brand-link{display:flex;align-items:center;gap:11px;color:var(--ink);flex:1;min-width:0}
.brand-link:hover{text-decoration:none}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.3rem;
  background:linear-gradient(135deg,var(--accent-500),var(--accent));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent);flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{font-family:var(--serif);font-size:1.12rem;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-text small{color:var(--muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-close{display:none;background:none;border:none;font-size:1.7rem;color:var(--muted);line-height:1}
.side-search{padding:4px 14px 10px}
.side-search input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--ink);font-size:.9rem}
.nav{flex:1;overflow-y:auto;padding:6px 10px 14px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:.92rem}
.nav-item:hover{background:var(--panel-2);text-decoration:none;color:var(--ink)}
.nav-item.active{background:var(--accent-050);color:var(--accent);font-weight:600}
.nav-item .ni-ico{width:22px;text-align:center;flex:none}
.nav-item .ni-tail{margin-left:auto;font-size:.7rem;font-weight:800;padding:2px 7px;border-radius:20px;background:var(--coral);color:#fff;line-height:1.5}
/* the verbs Brian's students act on — amber like Heidi's, so they read as "do this" not "browse this" */
.nav-featured{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e!important;font-weight:700;border:1px solid #fcd34d;margin-top:4px}
html[data-theme="dark"] .nav-featured{background:linear-gradient(135deg,#78350f,#92400e);color:#fde68a!important;border-color:#b45309}
.nav-featured:hover{filter:brightness(1.03)}
.nav-featured.active{background:linear-gradient(135deg,#fde68a,#fcd34d);color:#78350f!important}
.nav-group{margin-top:14px}
/* By topic / By date — Heidi's pill toggle, and the two shapes the tree can take under it */
.nav-mode{display:flex;gap:4px;margin:14px 2px 6px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.nav-mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;border:0;border-radius:9px;background:none;color:var(--muted);font-weight:600;font-size:.8rem}
.nav-mode-btn.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.nav-course{margin-top:10px}
.nav-course-head{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:8px 10px;border-radius:10px;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:.96rem;text-align:left}
.nav-course-head:hover{background:var(--panel-2);text-decoration:none}
.nav-course-head .nc-ico{font-size:1.05rem;flex:none}
.nav-course-head .nc-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-course-head .nc-chev{color:var(--faint);transition:transform .18s;font-size:.8rem;padding:2px 6px;border-radius:6px;background:none;border:0;font:inherit;line-height:1;cursor:pointer}
.nav-course-head .nc-chev:hover{background:var(--line)}
.nav-course.collapsed .nc-chev{transform:rotate(-90deg)}
.nav-course.collapsed>.nav-course-body{display:none}
.nav-course.current .nav-course-head{color:var(--accent)}
.nav-course-body{padding-left:4px}
.nav-date{margin:2px 0}
.nav-date-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:7px 10px;border-radius:9px;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:.92rem;text-align:left}
.nav-date-head:hover{background:var(--panel-2)}
.nav-date-head .nd-title{flex:1;min-width:0}
.nav-date-head .nc-chev{color:var(--faint);transition:transform .18s;font-size:.75rem}
.nav-date.collapsed .nc-chev{transform:rotate(-90deg)}
.nav-date.collapsed>.nav-date-body{display:none}
.nav-date-body{padding-left:3px;border-left:2px solid var(--line);margin-left:11px}
.nav-date-course{display:flex;align-items:center;gap:6px;padding:6px 12px 2px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.nm-new{font-size:.58rem;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--coral);padding:2px 6px;border-radius:20px;line-height:1;flex:none}
.nav-topic .nt-when{font-size:.72rem;color:var(--faint);flex:none}
.nav.searching .nav-course.collapsed>.nav-course-body,.nav.searching .nav-date.collapsed>.nav-date-body{display:block}
.nav-group-title{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}

/* the content tree: unit → item, collapsible, exactly Heidi's accordion */
.nav-unit{margin:2px 0}
.nav-unit-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:7px 10px;border-radius:9px;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:.92rem;text-align:left}
.nav-unit-head:hover{background:var(--panel-2)}
.nav-unit-head .nu-ico{font-size:.95rem;flex:none}
.nav-unit-head .nu-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-unit-head .nu-chev{color:var(--faint);transition:transform .18s;font-size:.75rem;flex:none}
.nav-unit.collapsed .nu-chev{transform:rotate(-90deg)}
.nav-unit.collapsed>.nav-unit-body{display:none}
.nav-unit-body{padding-left:3px;border-left:2px solid var(--line);margin-left:11px}
.nav-topic{display:flex;align-items:center;gap:9px;padding:7px 12px 7px 12px;border-radius:0 8px 8px 0;color:var(--ink-2);font-size:.87rem}
.nav-topic:hover{background:var(--panel-2);text-decoration:none;color:var(--ink)}
.nav-topic.active{background:var(--accent-050);color:var(--accent);font-weight:600}
.nav-topic .dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.nav-topic.done .dot{background:var(--green)}
.nav-topic.due .dot{background:var(--amber)}
.nav-topic.late .dot{background:var(--red)}
.nav-topic .nt-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav.searching .nav-unit.collapsed>.nav-unit-body{display:block}
.nav-empty{padding:10px 14px;color:var(--faint);font-size:.84rem}

.side-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ghost-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;color:var(--ink-2);font-size:.82rem}
.ghost-btn:hover{background:var(--line);text-decoration:none}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:inline}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px clamp(16px,4vw,44px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:9px;padding:6px;color:var(--ink)}
.crumbs{flex:1;font-size:.9rem;color:var(--muted);display:flex;gap:7px;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crumbs a{color:var(--muted)}
.crumbs b{color:var(--ink)}
.topbar-right{display:flex;align-items:center;gap:10px;flex:none}
.streak{font-size:.85rem;font-weight:600;color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent);padding:5px 11px;border-radius:20px;white-space:nowrap}
.whoami{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff;background:var(--accent-600);flex:none}

/* ===== Phone ===== */
.scrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:39}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:min(86vw,var(--sidebar-w));transform:translateX(-100%);transition:transform .2s}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block}
  .sidebar-close,.menu-btn{display:block}
  .view{padding:18px 16px 32px}
}

/* ===== The sign-in gate ===== */
.gate{min-height:100vh;display:grid;place-items:center;padding:22px;
  background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--accent-500) 18%,var(--bg)) 0%,var(--bg) 60%)}
.gate-card{width:min(420px,100%)}
.gate-card h1{font-size:1.5rem;margin:0 0 4px}
.gate-card .btn{margin-top:6px}

/* ---- 30-components.css ---- */
/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:11px;border:1px solid transparent;
  font-weight:600;font-size:.94rem;color:var(--ink);background:var(--panel);transition:transform .05s,box-shadow .15s,background .15s}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent-500),var(--accent));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn-primary:hover{box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 50%,transparent)}
.btn-ghost,.btn-plain{background:var(--panel);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover,.btn-plain:hover{background:var(--panel-2)}
.btn-soft{background:var(--accent-050);color:var(--accent)}
.btn-white{background:#fff;color:var(--accent)}
.btn-danger{background:var(--red);color:#fff}
.btn-lg{padding:14px 24px;font-size:1rem}
.btn-sm{padding:7px 12px;font-size:.84rem;border-radius:9px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}

/* ===== Cards & primitives ===== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:clamp(16px,3vw,26px)}
.section-title{font-family:var(--serif);font-weight:600;margin:0 0 2px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:.76rem;font-weight:600;background:var(--panel-2);color:var(--muted)}
.pill.accent{background:var(--accent-050);color:var(--accent)}
.pill.success{background:color-mix(in srgb,var(--green) 14%,transparent);color:#15803d}
.pill.warning{background:color-mix(in srgb,var(--amber) 18%,transparent);color:#b45309}
.pill.danger{background:color-mix(in srgb,var(--red) 12%,transparent);color:#b91c1c}
.pill.info{background:color-mix(in srgb,var(--indigo-500) 12%,transparent);color:var(--indigo-500)}
.chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:.75rem;padding:4px 9px;border-radius:8px;background:var(--panel-2);color:var(--ink-2)}
/* A chip's remove button is a plain × the size of the text, not a button-shaped box that lands on
   top of the file name — which is what an unstyled <button> inside a chip looks like. */
.chip>button{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;padding:0;border:0;border-radius:50%;
  background:none;color:var(--muted);font:inherit;line-height:1;cursor:pointer}
.chip>button:hover{background:var(--line);color:var(--red)}
.chip>button svg,.chip>button .ico{width:12px;height:12px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
/* drop zone — the student's turn-in box (student.js turnInBox); .over while a file is dragged across it */
.drop{padding:18px;border:2px dashed var(--line);border-radius:14px;background:var(--panel-2);color:var(--muted);font-size:.9rem;text-align:center;cursor:pointer;transition:.15s}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--accent-500);background:var(--accent-050);color:var(--ink)}
.drop>svg{width:22px;height:22px;display:block;margin:0 auto 6px}

/* rows (lists of items) */
.rows{overflow:hidden}
.row-item{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);color:inherit}
.row-item:last-child{border-bottom:0}
a.row-item:hover{background:var(--panel-2);text-decoration:none}
.row-item .title{font-weight:600}
.row-item .meta{font-size:.82rem;color:var(--muted)}
.row-item .trail{display:flex;align-items:center;gap:8px;flex:none}

/* progress ring + bar */
.ring{--p:0;--sz:96px;position:relative;width:var(--sz);height:var(--sz);border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--accent-500) calc(var(--p)*1%),var(--panel-2) 0)}
.ring::before{content:"";position:absolute;width:calc(var(--sz) - 20px);height:calc(var(--sz) - 20px);border-radius:50%;background:var(--panel)}
.ring b{position:relative;font-family:var(--serif);font-size:1.4rem}
.ring-wrap{display:flex;align-items:center;gap:16px}
.progress-track{height:9px;border-radius:6px;background:var(--panel-2);overflow:hidden}
.progress-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-500),var(--accent));transition:width .5s}

/* alerts & the step banner that tells you what a page is FOR */
.alert{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);margin:14px 0;font-size:.92rem}
.alert.warning{background:color-mix(in srgb,var(--amber) 10%,var(--panel));border-color:color-mix(in srgb,var(--amber) 35%,var(--line))}
.alert.danger{background:color-mix(in srgb,var(--red) 8%,var(--panel));border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
.alert.success{background:color-mix(in srgb,var(--green) 9%,var(--panel));border-color:color-mix(in srgb,var(--green) 30%,var(--line))}
.study-purpose{margin:14px 0;padding:11px 16px;border-left:3px solid var(--accent-500);background:var(--accent-050);border-radius:0 10px 10px 0;font-size:.93rem;color:var(--ink-2)}
.study-purpose b{color:var(--ink)}

/* the page head every screen starts with: where you are, what it is, in one sentence */
.study-head{margin-bottom:6px}
.study-head .kicker{color:var(--accent);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.study-head h1{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.3rem);margin:.15em 0 .1em}
.study-head .tagline{font-size:1.05rem;color:var(--muted);margin:0;max-width:66ch}
.study-head .head-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.field label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.input{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);width:100%}
.input:focus{outline:2px solid var(--accent-500);outline-offset:0}
textarea.input{resize:vertical;min-height:90px}
.help{font-size:.8rem;color:var(--muted)}
.field-err{color:var(--red);font-size:.86rem;margin:6px 0 0;min-height:1px}

/* toasts & modal (kept from v2 — they work) */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:90}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;font-size:.9rem}
.toast.show{opacity:1;transform:none}
.toast-success{background:#15803d}.toast-error,.toast-danger{background:var(--red)}
.toast-act{background:none;border:0;color:#fff;text-decoration:underline;font-weight:600}
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:80;padding:18px}
.modal{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:560px;width:100%;max-height:86vh;overflow:auto}
.modal.sm{max-width:420px}
.modal-head{padding:18px 22px 0}
.modal-head h2{font-family:var(--serif);margin:0;font-size:1.25rem}
.modal-body{padding:12px 22px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 20px}

/* empty state */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty .empty-ico{font-size:2.4rem}
.empty h3{font-family:var(--serif);color:var(--ink);margin:10px 0 4px}
.code-block{margin:6px 0 10px;padding:10px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:.85rem;color:var(--ink);overflow-x:auto;white-space:pre}

/* ---- 35-content.css ---- */
/* ===== 35 content — dashboard · modules · pages editor · announcements · calendar · inbox (tokens only, from 00-tokens) ===== */
.mt-sm{margin-top:6px}
/* dashboard */
.course-card .cc-role{margin-top:8px}
.course-card .cc-foot a{position:relative}
.course-card .cc-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--panel)}
.course-card .cc-control{margin-left:auto}
.side .todo-day{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:10px 0 2px}
.side .todo-day:first-child{margin-top:0}
.side .todo-day.over{color:var(--danger)}
.course-cell{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.course-swatch{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:1rem;color:#fff;flex:none}
.courses-table td.actions .btn{margin-left:4px}
/* shared pickers (add item · compose) */
.pick-list{border:1px solid var(--line);border-radius:var(--radius);max-height:280px;overflow:auto;background:var(--panel)}
.pick-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border-top:1px solid var(--line);cursor:pointer;font-size:.92rem;color:var(--ink)}
.pick-list>.pick-row:first-child{border-top:0}
.pick-row:hover{background:var(--panel-2)}
.pick-row input[type=radio]{accent-color:var(--brand);width:16px;height:16px;flex:none}
.pick-row .title{font-weight:600}
.pick-list .pad{padding:12px 14px;margin:0}
.add-item .seg{flex-wrap:wrap}
/* modules */
.home-desc{margin:-6px 0 18px;max-width:76ch}
.mod-list{display:flex;flex-direction:column;gap:14px}
.mod{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.mod.unpublished{border-style:dashed}
.mod.dragging{opacity:.5}
.mod.drop-before{box-shadow:0 -3px 0 0 var(--brand)}
.mod.drop-after{box-shadow:0 3px 0 0 var(--brand)}
.mod-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);min-height:52px}
.mod.collapsed .mod-head{border-bottom:0}
.mod-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--ink-2);flex:none}
.mod-toggle:hover{background:var(--panel-3)}
.mod-toggle .ico{transition:transform .18s;transform:rotate(90deg)}
.mod.collapsed .mod-toggle .ico{transform:none}
.mod-title-wrap{min-width:0}
.mod-title{font-size:1.02rem;margin:0;line-height:1.3;overflow-wrap:anywhere}
.mod.unpublished .mod-title{color:var(--muted)}
.mod-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.mod-progress{display:inline-flex;align-items:center;gap:8px}
.mod-progress .progress{width:90px;display:inline-block}
.mod-actions{display:flex;align-items:center;gap:2px;flex:none}
.mod-items{list-style:none;margin:0;padding:0}
.mod.collapsed .mod-items{display:none}
.mod-item{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 14px;border-top:1px solid var(--line);position:relative;background:var(--panel)}
.mod-items>.mod-item:first-child{border-top:0}
.mod-item:hover{background:var(--panel-2)}
.mod-item.ind-1{padding-left:38px}.mod-item.ind-2{padding-left:62px}.mod-item.ind-3{padding-left:86px}
.mod-item .ico-tile{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--brand-050);color:var(--brand);flex:none}
.mod-item .ico-tile .ico{width:18px;height:18px}
.mod-item .ico-tile.quiz{background:var(--purple-100);color:var(--purple)}
.mod-item .ico-tile.discussion{background:var(--teal-100);color:var(--teal)}
.mod-item .ico-tile.file,.mod-item .ico-tile.link{background:var(--panel-3);color:var(--ink-2)}
.mod-item-main{min-width:0}
.mod-item .title{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.mod-item .title .ico-ext{width:13px;height:13px;vertical-align:-1px;opacity:.6}
.mod-item .meta{font-size:.8rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:1px}
.mod-item .meta .ico{width:13px;height:13px;vertical-align:-2px}
.mod-item .mod-url{max-width:260px}
.mod-item .trail{margin-left:auto;display:flex;align-items:center;gap:2px;flex:none}
.mod-item.unpublished .title,.mod-item.unpublished .ico-tile{opacity:.55}
.mod-item.is-header{background:var(--panel-2);padding-top:6px;padding-bottom:6px}
.mod-header-text{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);flex:1}
.mod-item.missing{background:color-mix(in srgb,var(--danger) 6%,var(--panel))}
.mod-item.missing .title{color:var(--danger);text-decoration:line-through}
.mod.locked .mod-item .title{color:var(--muted)}
.mod.locked .mod-item .ico-tile{opacity:.6}
.mod-item.dragging{opacity:.45}
.mod-item.drop-before::before,.mod-item.drop-after::after{content:"";position:absolute;left:12px;right:12px;height:3px;border-radius:2px;background:var(--brand)}
.mod-item.drop-before::before{top:-2px}.mod-item.drop-after::after{bottom:-2px}
.mod-items.drop-end{box-shadow:inset 0 -3px 0 0 var(--brand)}
.mod-empty{padding:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.drag-handle{display:inline-flex;color:var(--faint);cursor:grab;flex:none;padding:2px}
.drag-handle:active{cursor:grabbing}
.drag-handle .ico{width:16px;height:16px}
.done-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);color:transparent;transition:.12s}
.done-btn:hover{border-color:var(--success);color:var(--success)}
.done-btn.on{background:var(--success);border-color:var(--success);color:var(--on-accent);cursor:default}
.done-btn .ico{width:16px;height:16px}
.mod-item.done .title{color:var(--muted)}
/* prev / next */
.prev-next{align-items:stretch}
.prev-next .btn{max-width:46%;text-align:left;padding:8px 12px}
.prev-next .pn-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.prev-next .pn-text small{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.prev-next .pn-text .ellipsis{max-width:220px}
.prev-next .pn-next{margin-left:auto;text-align:right}
.prev-next .pn-next .pn-text{align-items:flex-end}
.prev-next .pn-mid .ico{width:16px;height:16px}
/* page editor */
.pg-editor .editor-tabs{margin-bottom:8px}
.pg-editor .editor-tab-preview{display:none}
.pg-editor .editor-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.pg-editor textarea{min-height:320px;font-family:var(--sans);font-size:.95rem;line-height:1.55;resize:vertical}
.pg-editor textarea.is-html{font-family:var(--mono);font-size:.86rem}
.pg-editor.compact textarea{min-height:180px}
.pg-editor .preview{border:1px dashed var(--line-2);border-radius:var(--radius);padding:12px 16px;min-height:120px;max-height:70dvh;overflow:auto;background:var(--panel)}
.pg-editor .editor-note{margin:0 0 8px}
.pg-editor .editor-actions{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.pg-editor .editor-tools .btn{min-width:32px}
.pg-editor .editor-tools .ico{width:15px;height:15px}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:12px;max-height:260px;overflow:auto}
.img-pick{display:flex;flex-direction:column;gap:4px;border:2px solid var(--line);border-radius:var(--radius);padding:4px;font-size:.72rem;color:var(--muted);text-align:left}
.img-pick img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--panel-2)}
.img-pick.on{border-color:var(--brand);background:var(--brand-050)}
.page-body{max-width:76ch}
.summary-table td,.summary-table th{vertical-align:top}
.summary-table tr.unpublished td{color:var(--muted)}
.summary-table .flex .ico{width:16px;height:16px;color:var(--muted);flex:none}
.summary-table tfoot td{background:var(--panel-2);border-top:2px solid var(--line-2)}
/* announcements + activity */
.ann-row .avatar{align-self:flex-start;margin-top:2px}
.ann-snippet{margin-top:2px;max-width:76ch}
.activity{display:flex;flex-direction:column;gap:8px}
.activity-day{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:12px 0 2px}
.activity-item{display:flex;gap:12px;padding:12px 14px;align-items:flex-start}
.activity-item .ico-tile{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--brand-050);color:var(--brand);flex:none}
.activity-item .title{font-weight:600;color:var(--ink)}
.activity-snippet{margin:4px 0 0;color:var(--ink-2)}
/* calendar */
.cal-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cal-title{margin:0;font-size:1.35rem;flex:1;min-width:160px}
.cal-bar .actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.cal-legend{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cal-chip.off{opacity:.45;text-decoration:line-through}
.cal-grid{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.cal-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-head{background:var(--panel-2);border-bottom:1px solid var(--line)}
.cal-dow{padding:6px 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;text-align:center}
.cal-cell{min-height:104px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px;position:relative;display:flex;flex-direction:column;gap:3px}
.cal-row .cal-cell:last-child{border-right:0}
.cal-row:last-child .cal-cell{border-bottom:0}
.cal-cell.other{background:var(--panel-2)}
.cal-cell.other .cal-num{color:var(--faint)}
.cal-cell.weekend:not(.other){background:color-mix(in srgb,var(--panel-2) 50%,var(--panel))}
.cal-num{width:28px;height:28px;border-radius:50%;font-size:.82rem;font-weight:600;color:var(--ink-2);display:grid;place-items:center;align-self:flex-start}
.cal-num:hover{background:var(--panel-3)}
.cal-cell.today .cal-num{background:var(--brand);color:var(--on-accent)}
.cal-add{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--muted);opacity:0}
.cal-add .ico{width:14px;height:14px}
.cal-cell:hover .cal-add,.cal-add:focus-visible{opacity:1;background:var(--panel-3)}
.cal-evs{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-ev{display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:5px;font-size:.74rem;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--c,var(--brand)) 14%,var(--panel));border-left:3px solid var(--c,var(--brand));text-decoration:none;min-width:0;width:100%;text-align:left}
.cal-ev:hover{background:color-mix(in srgb,var(--c,var(--brand)) 24%,var(--panel));text-decoration:none}
.cal-ev .ico{width:12px;height:12px;flex:none;color:var(--c,var(--brand))}
.cal-ev-title{flex:1;min-width:0}
.cal-ev-time{color:var(--muted);font-weight:500;flex:none}
.cal-more{font-size:.72rem;color:var(--brand);font-weight:600;text-align:left;padding:1px 6px}
.cal-agenda{display:flex;flex-direction:column;gap:14px;max-width:820px}
.cal-day-head{display:flex;align-items:center;gap:10px;font-size:.95rem;margin:0 0 6px;color:var(--ink-2)}
.cal-day-num{width:34px;height:34px;border-radius:50%;background:var(--panel-3);display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums}
.cal-day.today .cal-day-num{background:var(--brand);color:var(--on-accent)}
.cal-day.today .cal-day-head{color:var(--brand-700)}
html[data-theme="dark"] .cal-day.today .cal-day-head{color:var(--brand)}
.cal-day.past{opacity:.75}
.cal-agenda-item{border-left:4px solid var(--c,var(--brand))}
.cal-agenda-item .ico-tile{background:color-mix(in srgb,var(--c,var(--brand)) 14%,var(--panel));color:var(--c,var(--brand))}
.cal-agenda-item .title{background:none;text-align:left;font-weight:600;color:var(--ink)}
.cal-course{color:var(--ink-2)}
/* inbox */
.inbox{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:16px;align-items:start}
.inbox-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.inbox-search{border:0;border-bottom:1px solid var(--line);border-radius:0}
.thread-list{max-height:70dvh;overflow:auto}
.thread-row{display:flex;gap:10px;padding:10px 12px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;align-items:flex-start}
.thread-list>.thread-row:first-child{border-top:0}
.thread-row:hover{background:var(--panel-2);text-decoration:none}
.thread-row.active{background:var(--brand-050);box-shadow:inset 3px 0 0 var(--brand)}
.thread-row b{font-weight:600}
.thread-row.unread b,.thread-row.unread .small{font-weight:700;color:var(--ink)}
.thread-row .small{color:var(--muted)}
.inbox-thread{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-height:360px;display:flex;flex-direction:column}
.inbox-back{align-self:flex-start;display:none;margin-bottom:6px}
.thread-head{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.thread-head h2{margin:0;font-size:1.1rem}
.msgs{flex:1;overflow:auto;max-height:60dvh;padding-right:4px}
.msg.mine{flex-direction:row-reverse}
.msg .bubble .rte{max-width:none}
.reply-box{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.reply-box textarea{min-height:70px}
.inbox-blank{margin:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;min-height:0}
.chip.brand{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-700)}
.compose-sugg{max-height:200px;margin-top:6px}
.compose-sugg[hidden]{display:none}
.compose-sugg .pick-row .avatar{flex:none}
/* phones */
@media (max-width:900px){
  .pg-editor .editor-tab-preview{display:inline-flex}
  .pg-editor .editor-split{grid-template-columns:1fr}
  .pg-editor .preview{display:none}
  .pg-editor.show-preview .preview{display:block}
  .pg-editor.show-preview textarea{display:none}
  .inbox{grid-template-columns:1fr}
  .inbox.has-thread .inbox-list{display:none}
  .inbox:not(.has-thread) .inbox-thread{display:none}
  .inbox-back{display:inline-flex}
  .msgs{max-height:none}
}
@media (max-width:700px){
  .cal-cell{min-height:58px;padding:2px}
  .cal-num{width:24px;height:24px;font-size:.76rem}
  .cal-ev{padding:0;height:6px;border-left:0;border-radius:3px;background:var(--c,var(--brand))}
  .cal-ev .ico,.cal-ev-title,.cal-ev-time{display:none}
  .cal-evs{flex-direction:row;flex-wrap:wrap;gap:2px}
  .cal-ev{width:auto;flex:1 1 30%;max-width:40%}
  .cal-more{font-size:.62rem;padding:0 2px}
  .cal-add{opacity:1;width:20px;height:20px;top:2px;right:2px}
  .cal-title{font-size:1.1rem}
  .prev-next{flex-wrap:wrap}
  .prev-next .btn{max-width:100%;flex:1 1 100%}
  .prev-next .pn-text .ellipsis{max-width:none}
  .prev-next .pn-mid{order:3;flex-basis:100%}
  .prev-next .pn-next{margin-left:0}
  .mod-head{flex-wrap:wrap}
  .mod-item .mod-url{max-width:140px}
  .mod-item.ind-1{padding-left:24px}.mod-item.ind-2{padding-left:34px}.mod-item.ind-3{padding-left:44px}
}

/* ---- 40-quiz.css ---- */
/* ===== 40 quiz — player · question cards · every answer type · palette/timer · results · editors ===== */
/* Mobile-first: everything works at 380px; wider screens only add columns. Tokens from 00-tokens. */

/* ---- player frame */
.quiz{max-width:860px;min-width:0}
.quiz-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.quiz-titles{flex:1;min-width:0}
.quiz-title{margin:0;font-size:1.35rem}
.quiz-sub{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.quiz-bar{position:sticky;top:var(--topbar-h);z-index:5;display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -2px 10px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:var(--radius)}
@supports not (background:color-mix(in srgb,red,blue)){.quiz-bar{background:var(--bg)}}
.quiz-progress{flex:1;min-width:60px}
.quiz-count{font-size:.8rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.quiz-timer{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-weight:700;font-size:.95rem;padding:3px 9px;border-radius:999px;background:var(--panel-2);color:var(--ink-2)}
.quiz-timer.warn{background:var(--warning-100);color:var(--warning)}
.quiz-timer.danger{background:var(--danger-100);color:var(--danger);animation:pulse 1.2s infinite}
@media (max-width:480px){.quiz-count{display:none}.quiz-bar{gap:8px}}
.qpalette{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px}
.pal-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel);font-size:.8rem;font-weight:700;color:var(--muted);position:relative;font-variant-numeric:tabular-nums}
.pal-btn:hover{border-color:var(--brand)}
.pal-btn.answered{background:var(--brand-050);border-color:var(--brand);color:var(--brand-700)}
html[data-theme="dark"] .pal-btn.answered{color:var(--brand)}
.pal-btn.current{box-shadow:0 0 0 2px var(--brand)}
.pal-btn.flagged::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--warning);border:2px solid var(--panel)}
.pal-btn.ok{background:var(--success-100);border-color:var(--success);color:var(--success)}
.pal-btn.no{background:var(--danger-100);border-color:var(--danger);color:var(--danger)}
.pal-btn.part{background:var(--warning-100);border-color:var(--warning);color:var(--warning)}
.pal-btn.wait{background:var(--info-100);border-color:var(--info);color:var(--info)}
.quiz-body{display:flex;flex-direction:column;gap:14px}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.quiz-foot .btn-lg{margin:0 auto}
.quiz-nav-count{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.quiz-submitting{margin:0 auto;color:var(--muted);font-weight:600}
.quiz.is-submitting .quiz-body{opacity:.6;pointer-events:none}

/* ---- question card */
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(14px,3vw,24px);scroll-margin-top:calc(var(--topbar-h) + 64px);position:relative}
.qcard:focus-visible{box-shadow:var(--focus),var(--shadow)}
.qcard.is-flagged{border-color:var(--warning)}
.qcard.is-ok{border-left:4px solid var(--success)}
.qcard.is-no{border-left:4px solid var(--danger)}
.qcard.is-part{border-left:4px solid var(--warning)}
.qcard.is-wait{border-left:4px solid var(--info)}
.qcard-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:6px}
.qnum{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.qtype{font-size:.76rem;color:var(--muted)}
.qpts{font-size:.76rem;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.flag-btn{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:600;color:var(--muted);padding:3px 8px;border-radius:999px;border:1px solid transparent}
.flag-btn .ico{width:14px;height:14px}
.flag-btn:hover{background:var(--panel-2);border-color:var(--line)}
.flag-btn.on{background:var(--warning-100);color:var(--warning)}
.qtext{font-size:1.12rem;font-weight:600;line-height:1.45;margin:4px 0 16px;overflow-wrap:anywhere}
.qtext code{font-weight:500}
.blank{display:inline-block;min-width:5em;border-bottom:2px solid var(--ink-2);height:1.1em;vertical-align:-.15em;margin:0 3px}
.q-image-wrap{margin:4px 0 14px}
.q-image{max-height:340px;width:auto;max-width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-2)}
.qbody{min-width:0}
.qhint{font-size:.83rem;color:var(--muted);margin:10px 0 0}
.q-key{font-size:.88rem;color:var(--success);font-weight:600;margin:10px 0 0;overflow-wrap:anywhere}
.check-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.check-row .qhint{margin:0}

/* ---- choices (mcq / multi / tf) */
.choices{display:flex;flex-direction:column;gap:9px}
.choice{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink);text-align:left;font-size:.98rem;line-height:1.4;transition:border-color .12s,background .12s}
.choice:hover:not(:disabled){border-color:var(--brand);background:var(--brand-050)}
.choice:focus-visible{border-color:var(--brand)}
.choice .key{width:28px;height:28px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;font-weight:800;font-size:.82rem;color:var(--muted);flex:none}
.choice[role="checkbox"] .key{border-radius:6px}
.choice-text{flex:1;min-width:0;overflow-wrap:anywhere}
.choice.sel{border-color:var(--brand);background:var(--brand-050)}
.choice.sel .key{background:var(--brand);color:var(--on-accent)}
.choice.correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 12%,var(--panel))}
.choice.correct .key{background:var(--success);color:var(--on-accent)}
.choice.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--panel))}
.choice.wrong .key{background:var(--danger);color:var(--on-accent)}
.choice.missed{border-style:dashed;border-color:var(--success)}
.choice:disabled{cursor:default;opacity:1}
.choice:disabled:not(.sel):not(.correct):not(.wrong):not(.missed){opacity:.65}
.tf-row{flex-direction:row}
.tf-row .choice{flex:1;justify-content:center;font-weight:700}
.tf-row .choice .key{position:absolute;opacity:0;width:0;height:0}
.tf-row .choice{position:relative}

/* ---- text answers (fill / numeric / short / essay) */
.fill-inline{display:block;line-height:2.2}
.fill-input{padding:9px 12px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font-size:1rem;min-width:0;max-width:100%}
.fill-inline .fill-input{display:inline-block;width:auto;margin:0 4px;padding:5px 10px;font-weight:500;font-size:1rem;vertical-align:baseline}
.fill-input:focus-visible{border-color:var(--brand);box-shadow:var(--focus)}
.fill-input.correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 10%,var(--panel))}
.fill-input.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--panel))}
.fill-list{display:flex;flex-direction:column;gap:8px}
.fill-row{display:flex;align-items:center;gap:8px}
.fill-row .fill-input{flex:1}
.fill-num,.lbl-num{width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--on-accent);font-weight:800;font-size:.78rem;display:grid;place-items:center;flex:none}
.lbl-num.ok{background:var(--success)}.lbl-num.no{background:var(--danger)}
.num-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.num-input{width:min(100%,220px);font-variant-numeric:tabular-nums}
.unit{font-weight:700;color:var(--ink-2)}
.short-input,.essay-input{width:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font-size:1rem;line-height:1.5;resize:vertical;min-height:2.6em}
.essay-input{min-height:160px}
.short-input:focus-visible,.essay-input:focus-visible{border-color:var(--brand);box-shadow:var(--focus)}
.short-input.correct{border-color:var(--success)}.short-input.wrong{border-color:var(--danger)}
.counter{font-size:.78rem;color:var(--muted);margin-top:4px;text-align:right}
.counter.short{color:var(--warning);font-weight:600}
.qbody .rubric{margin-bottom:12px}

/* ---- match */
.match-grid{display:flex;flex-direction:column;gap:8px}
.match-row{display:grid;grid-template-columns:1fr;gap:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}
.match-row.picked{border-color:var(--brand-100)}
.match-row.ok{border-color:var(--success);background:color-mix(in srgb,var(--success) 9%,var(--panel))}
.match-row.no{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--panel))}
.match-left{font-weight:600;overflow-wrap:anywhere}
.match-select{width:100%;padding:9px 11px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font-size:.95rem}
.match-select:focus-visible{border-color:var(--brand);box-shadow:var(--focus)}
.match-key{font-size:.85rem;color:var(--success);font-weight:600}
@media (min-width:600px){.match-row{grid-template-columns:1fr 1fr;align-items:center}.match-key{grid-column:2}}

/* ---- order */
.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.order-item{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 8px;border:1.5px solid var(--line-2);border-radius:var(--radius);background:var(--panel);cursor:grab;transition:border-color .12s,transform .12s}
.order-item:focus-visible{border-color:var(--brand)}
.order-item.dragging{opacity:.5;cursor:grabbing}
.order-item.over{border-color:var(--brand);border-style:dashed;transform:translateY(2px)}
.order-item.ok{border-color:var(--success);background:color-mix(in srgb,var(--success) 9%,var(--panel))}
.order-item.no{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--panel))}
.order-item .handle{color:var(--faint);display:inline-flex;flex:none}
.order-num{width:24px;height:24px;border-radius:50%;background:var(--panel-3);color:var(--ink-2);font-weight:800;font-size:.76rem;display:grid;place-items:center;flex:none;font-variant-numeric:tabular-nums}
.order-text{flex:1;min-width:0;overflow-wrap:anywhere}
.order-btns{display:flex;gap:2px;flex:none}
.order-btns .icon-btn,.qed-item .icon-btn{width:32px;height:32px}
.icon-btn.up .ico{transform:rotate(180deg)}

/* ---- label the picture */
.lbl-wrap,.hs-wrap{position:relative;display:block;width:100%;max-width:760px;margin:4px 0 12px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel-2);line-height:0}
.lbl-img,.hs-img{width:100%;height:auto;display:block;object-fit:contain;background:var(--panel-2);-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.lbl-wrap-overlay,.hs-wrap-overlay{position:absolute;inset:0;pointer-events:none}
.lbl-wrap-overlay .lbl-pin{pointer-events:auto}
.lbl-pin{position:absolute;transform:translate(-50%,-50%);min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:var(--brand);color:var(--on-accent);font-size:.8rem;font-weight:800;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.45);line-height:1;cursor:pointer}
.lbl-pin.ok{background:var(--success)}.lbl-pin.no{background:var(--danger)}
.lbl-pin:focus-visible{box-shadow:var(--focus),0 1px 6px rgba(0,0,0,.45)}
.lbl-inputs{display:grid;grid-template-columns:1fr;gap:8px 16px}
@media (min-width:640px){.lbl-inputs{grid-template-columns:1fr 1fr}}
.lbl-row{display:flex;align-items:center;gap:8px;min-width:0}
.lbl-row .fill-input{flex:1;min-width:0}
.lbl-key{font-size:.82rem;color:var(--success);font-weight:700;white-space:nowrap}
.lbl-row .tag-input{flex:1;min-width:0}

/* ---- tap the picture (hotspot) */
.hs-wrap{cursor:crosshair}
.hs-wrap:focus-visible{box-shadow:var(--focus)}
.hs-target{position:absolute;border:3px dashed var(--success);border-radius:8px;background:color-mix(in srgb,var(--success) 18%,transparent);animation:hspulse 1.1s ease-in-out infinite}
.hs-target.editing{animation:none;border-color:var(--brand);background:color-mix(in srgb,var(--brand) 18%,transparent)}
.hs-target.drawing{animation:none;border-color:var(--warning);background:color-mix(in srgb,var(--warning) 18%,transparent)}
.hs-target .hs-n{position:absolute;top:-2px;left:-2px;background:var(--brand);color:var(--on-accent);font-size:.7rem;font-weight:800;padding:1px 6px;border-radius:0 0 6px 0;line-height:1.4}
@keyframes hspulse{0%,100%{opacity:1}50%{opacity:.55}}
.hs-pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent);font-weight:800;font-size:.95rem;border:3px solid #fff;background:var(--brand);box-shadow:0 3px 12px rgba(0,0,0,.5);z-index:2;line-height:1}
.hs-pin.ok{background:var(--success)}.hs-pin.no{background:var(--danger)}
.review-img{max-width:520px;margin:0 0 10px}

/* ---- upload */
.up-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.up-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2)}
.file-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.file-link .ico{width:16px;height:16px;flex:none}
.up-item .icon-btn{margin-left:auto}
.up-progress{margin-top:8px}

/* ---- feedback box (practice / review) */
.explain{margin-top:16px;padding:12px 14px;border-radius:var(--radius);font-size:.92rem;border-left:4px solid var(--brand);background:var(--panel-2);line-height:1.5}
.explain.ok{border-left-color:var(--success)}
.explain.no{border-left-color:var(--danger)}
.explain.part{border-left-color:var(--warning)}
.explain.wait{border-left-color:var(--info)}
.explain b{display:block;margin-bottom:2px}
.explain-text{color:var(--ink-2);overflow-wrap:anywhere}

/* ---- results */
.result{text-align:center;padding:22px 10px 10px}
.result .score-ring{margin:0 auto 14px;--sz:128px}
.result .score-ring b{font-size:1.5rem}
.result .score-ring.waiting{background:conic-gradient(var(--info) 25%,var(--panel-3) 0)}
.result h2{font-size:1.6rem;margin:.1em 0 .2em}
.result .verdict{font-size:1.02rem;color:var(--muted)}
.result-wait{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0}
.result-wait p{margin:0;max-width:44ch}
.result-meta{margin:6px 0 0}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.review-summary{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.review-list{display:flex;flex-direction:column;gap:12px}
.review-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(12px,2.5vw,20px);border-left-width:4px}
.review-item.ok{border-left-color:var(--success)}
.review-item.no{border-left-color:var(--danger)}
.review-item.part{border-left-color:var(--warning)}
.review-item.wait{border-left-color:var(--info)}
.review-item.skip{border-left-color:var(--faint)}
.review-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:4px}
.review-stem{font-size:1.02rem;margin:4px 0 10px}
.review-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line);font-size:.92rem}
.review-line:first-child{border-top:0}
.review-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--muted);min-width:110px}
.review-value{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}
.review-line.ok .review-value{color:var(--success)}
.review-line.no .review-value{color:var(--danger)}
.review-line.part .review-value{color:var(--warning)}
.review-table{width:100%;font-size:.9rem;border-collapse:collapse}
.review-table td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.review-table tr:first-child td{border-top:0}
.review-table tr.ok td:nth-child(2){color:var(--success);font-weight:600}
.review-table tr.no td:nth-child(2){color:var(--danger);font-weight:600}
.review-table .review-key{color:var(--success);font-weight:600;white-space:nowrap}
.review-order{margin:0;padding-left:1.4em;font-weight:500}
.review-order li.ok{color:var(--success)}
.review-order li.no{color:var(--danger)}
.review-essay{background:var(--panel-2);border-radius:var(--radius);padding:10px 14px;margin-bottom:4px}
.pre-wrap{white-space:pre-wrap;overflow-wrap:anywhere}
.review-explain{margin-top:10px;padding:10px 12px;border-radius:var(--radius);background:var(--brand-050);font-size:.9rem;overflow-wrap:anywhere}
html[data-theme="dark"] .review-explain{background:var(--brand-100)}
.review-comment{display:flex;gap:8px;margin-top:10px;padding:10px 12px;border-radius:var(--radius);background:var(--panel-2);font-size:.9rem}
.review-comment .ico{color:var(--brand);flex:none;margin-top:2px}
.review-tele{margin-top:6px}
.grade-row{display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)}
.grade-row .field{margin:0}
.grade-row.needs{background:var(--info-100);margin:12px -8px 0;padding:10px 8px;border-radius:var(--radius);border-top:0}
@media (max-width:480px){.grade-row{grid-template-columns:1fr}}
.grade-foot{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.grade-foot .field{width:100%;margin:0}

/* ---- editors (teacher builder) */
.qed{display:flex;flex-direction:column;gap:4px}
.qed .field{margin-bottom:10px}
.qed input[type=text],.qed input[type=number],.qed select,.qed textarea{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font-size:.95rem}
.qed input:focus-visible,.qed select:focus-visible,.qed textarea:focus-visible{border-color:var(--brand);box-shadow:var(--focus)}
.qed .tag-input input{width:auto;border:0;background:transparent;padding:4px 2px}
.qed .tag-input input:focus-visible{box-shadow:none}
.qed textarea{min-height:2.6em;line-height:1.5}
.qed-type{padding:12px;border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--panel-2);margin-bottom:12px}
.qed-type .field:last-child{margin-bottom:0}
.qed-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.qed-foot .help{font-size:.8rem;color:var(--muted)}
.qed-x{color:var(--muted)}
.qed-x:hover{color:var(--danger)}
.qed-choices{display:flex;flex-direction:column;gap:6px}
.qed-choice{display:flex;align-items:center;gap:8px}
.qed-choice .key{width:24px;height:24px;border-radius:6px;background:var(--panel-3);display:grid;place-items:center;font-weight:800;font-size:.76rem;color:var(--muted);flex:none}
.qed-choice input[type=text]{flex:1;min-width:0}
.qed-mark{width:20px;height:20px;accent-color:var(--success);flex:none;margin:0}
.qed-pairs{display:flex;flex-direction:column;gap:6px}
.qed-pair{display:grid;grid-template-columns:1fr 1fr 36px;gap:6px;align-items:center}
.qed-pair-head .label{font-size:.72rem}
.qed-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.qed-item{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);cursor:grab}
.qed-item.dragging{opacity:.5}
.qed-item.over{border-color:var(--brand);border-style:dashed}
.qed-item input[type=text]{flex:1;min-width:0}
.qed-item .handle{color:var(--faint);display:inline-flex}
.qed-rubric{display:flex;flex-direction:column;gap:6px}
.qed-rubric-row{display:grid;grid-template-columns:1fr 84px 36px;gap:6px;align-items:center}
.qed-image .grow{flex:1 1 200px;min-width:0}
.qed-preview img{max-height:160px;max-width:100%;border-radius:var(--radius-sm);border:1px solid var(--line);margin-top:8px}
.qed-errors{margin:4px 0 0;padding:10px 12px 10px 28px;border-radius:var(--radius);background:var(--danger-100);color:var(--danger);font-size:.86rem}
.qed-errors li{margin:2px 0}
.pin-editor{cursor:crosshair}
.hs-editor{cursor:crosshair}
.region-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.region-row{display:grid;grid-template-columns:26px repeat(4,minmax(0,1fr)) 36px;gap:6px;align-items:end}
.region-row .field{margin:0}
.region-row .field label{font-size:.66rem}
@media (max-width:560px){.region-row{grid-template-columns:26px 1fr 1fr 36px}.region-row .field:nth-of-type(3),.region-row .field:nth-of-type(4){grid-column:span 1}}
.tag-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);cursor:text;min-height:42px}
.tag-input:focus-within{border-color:var(--brand);box-shadow:var(--focus)}
.tag-chips{display:contents}
.tag-input input{flex:1;min-width:120px;border:0;background:transparent;padding:4px 2px;font-size:.92rem}
.tag-input input:focus-visible{box-shadow:none}
.chip-x{display:inline-flex;color:var(--muted);border-radius:50%}
.chip-x .ico{width:14px;height:14px}
.chip-x:hover{color:var(--danger)}
.btn.is-busy{opacity:.6;pointer-events:none}

/* ---- modes */
html[data-mode="elementary"] .choice{padding:15px 16px;font-size:1.08rem;border-radius:var(--radius-lg)}
html[data-mode="elementary"] .choice .key{width:34px;height:34px;font-size:.95rem}
html[data-mode="elementary"] .qtext{font-size:1.28rem;font-family:var(--display)}
html[data-mode="elementary"] .pal-btn{width:38px;height:38px;font-size:.95rem}
html[data-mode="elementary"] .fill-input,html[data-mode="elementary"] .match-select{font-size:1.08rem;padding:12px 14px}
html[data-mode="elementary"] .lbl-pin{min-width:32px;height:32px;font-size:.95rem}
html[data-mode="elementary"] .hs-pin{width:38px;height:38px}
html[data-mode="college"] .qtext{font-size:1.04rem}
html[data-mode="college"] .choice{padding:10px 12px;font-size:.94rem}

/* ---- print: the review prints cleanly, the player never does */
@media print{.quiz-bar,.qpalette,.quiz-foot,.flag-btn,.result-actions,.grade-foot{display:none!important}.qcard,.review-item{box-shadow:none;break-inside:avoid}}

/* ---- 50-home.css ---- */
/* ===== The home page: a greeting, where you stand, and what to do next ===== */
.hero{position:relative;overflow:hidden;border-radius:22px;padding:clamp(22px,4vw,38px);color:#fff;box-shadow:var(--shadow-lg);
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent-500) 75%,#fff) 0%,var(--accent-600) 42%,color-mix(in srgb,var(--accent) 70%,#000) 100%)}
.hero h1{font-family:var(--serif);font-size:clamp(1.7rem,4.4vw,2.5rem);margin:.1em 0 .2em;line-height:1.1}
.hero p{margin:0;max-width:60ch;opacity:.95}
.hero .wave{font-size:1.6rem}
.hero .pill{background:rgba(255,255,255,.2);color:#fff}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hstat{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:13px;padding:10px 15px;backdrop-filter:blur(4px)}
.hstat b{display:block;font-size:1.5rem;font-family:var(--serif);line-height:1}
.hstat span{font-size:.76rem;opacity:.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hero .btn-ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.26)}

/* the Daily Check panel — the single most important thing on Heidi's page */
.daily-panel{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,var(--accent-050),var(--panel));
  border:1px solid var(--accent-500);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;margin:18px 0}
.dp-ring{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.dp-ring-cap{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.dp-mid{flex:1;min-width:0}
.dp-kicker{font-size:.72rem;font-weight:800;letter-spacing:.05em;color:var(--accent);text-transform:uppercase}
.dp-mid h3{font-family:var(--serif);font-size:1.3rem;margin:.15em 0 .1em;color:var(--ink)}
.dp-sub{color:var(--muted);margin:0;font-size:.95rem;max-width:60ch}
.dp-sub b{color:var(--ink-2)}
.dp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dp-chip{font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--panel-2);color:var(--ink-2)}
.dp-chip.warn{background:#fef3c7;color:#92400e}
html[data-theme="dark"] .dp-chip.warn{background:#78350f;color:#fde68a}
.dp-cta{flex:none}
@media(max-width:760px){.daily-panel{flex-direction:column;text-align:center}.dp-sub{max-width:none}.dp-chips{justify-content:center}.dp-cta{width:100%}.dp-cta .btn{width:100%}}

/* "How this works — 4 steps": what each part of the site is FOR */
.study-path{margin:22px 0}
.sp-head h2{margin:0 0 2px}
.sp-head p{margin:0 0 14px;font-size:.92rem}
.sp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.sp-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sp-steps{grid-template-columns:1fr}}
.sp-step{position:relative;display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  box-shadow:var(--shadow);transition:transform .12s,border-color .12s;color:var(--ink)}
.sp-step:hover{transform:translateY(-2px);border-color:var(--accent-500);text-decoration:none}
.sp-num{position:absolute;top:10px;right:14px;font-family:var(--serif);font-weight:700;font-size:1.6rem;color:var(--accent-050);-webkit-text-stroke:1.2px var(--accent-500)}
html[data-theme="dark"] .sp-num{color:transparent}
.sp-ico{font-size:1.6rem;display:block;margin-bottom:6px}
.sp-txt h4{margin:0 0 4px;font-size:1.02rem}
.sp-what{margin:0 0 6px;font-size:.86rem;color:var(--ink-2)}
.sp-goal{margin:0;font-size:.8rem;font-weight:600;color:var(--accent)}

/* the unit cards on the home page */
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:22px}
@media(max-width:1000px){.dash-grid{grid-template-columns:1fr}}
.unit-card{display:block;color:inherit;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .15s}
.unit-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.unit-card .uc-top{padding:16px 20px;color:#fff;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--accent-500),var(--accent))}
.unit-card .uc-ico{font-size:1.6rem;flex:none}
.unit-card .uc-top h3{margin:0;font-family:var(--serif);font-size:1.15rem}
.unit-card .uc-top p{margin:2px 0 0;font-size:.82rem;opacity:.92}
.unit-card .uc-head-txt{flex:1;min-width:0}
.unit-card .uc-badge{flex:none;text-align:right;font-size:.7rem;font-weight:700;background:rgba(255,255,255,.9);color:var(--accent);padding:3px 9px;border-radius:20px}
.unit-card .uc-body{padding:14px 20px 18px}
.uc-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:9px}

/* a "next thing to do" list */
.panel-list{display:flex;flex-direction:column;gap:8px}
.mini-action{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:inherit}
.mini-action:hover{background:var(--panel-2);text-decoration:none;border-color:var(--accent-500)}
.mini-action .ma-ico{font-size:1.2rem;flex:none}
.mini-action .ma-txt{flex:1;min-width:0}
.mini-action .ma-txt b{display:block;font-size:.93rem}
.mini-action .ma-txt span{font-size:.79rem;color:var(--muted)}

/* the class picker, when someone is in more than one */
.class-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:18px}
.class-card{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);color:inherit;transition:transform .12s,box-shadow .15s}
.class-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.class-card .cc-top{height:76px;display:flex;align-items:center;gap:12px;padding:0 18px;color:#fff;font-size:1.8rem}
.class-card .cc-body{padding:13px 18px 16px}
.class-card h3{font-family:var(--serif);margin:0 0 2px;font-size:1.08rem}

/* ---- 60-companion.css ---- */
/* ===== The four companion screens: Daily Check, What to fix, Cards, Activity ===== */

/* Daily Check */
.daily-status{display:flex;flex-wrap:wrap;align-items:center;gap:24px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:16px 20px;margin:14px 0}
.ds-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.ds-cap{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.ds-stats{display:flex;gap:22px;flex-wrap:wrap}
.ds-stat{display:flex;flex-direction:column}
.ds-stat b{font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.ds-stat span{font-size:.78rem;color:var(--muted)}
.week-dots{display:flex;gap:6px}
.week-dot{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:.66rem;font-weight:700;
  background:var(--panel-2);color:var(--faint);border:1px solid var(--line)}
.week-dot.hit{background:var(--accent-050);color:var(--accent);border-color:var(--accent-500)}
.week-dot.today{outline:2px solid var(--accent-500);outline-offset:1px}

/* What to fix — the coach */
.fix-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.fix-card{display:flex;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
  border-left:4px solid var(--amber)}
.fix-card.good{border-left-color:var(--green)}
.fix-card.bad{border-left-color:var(--red)}
.fix-rank{font-family:var(--serif);font-size:1.5rem;color:var(--faint);flex:none;width:26px;text-align:center}
.fix-body{flex:1;min-width:0}
.fix-body h3{margin:0 0 3px;font-size:1.05rem}
.fix-why{margin:0 0 8px;color:var(--ink-2);font-size:.92rem}
.fix-do{margin:0;font-size:.88rem;font-weight:600;color:var(--accent)}
.fix-evidence{margin-top:8px;font-size:.8rem;color:var(--muted)}

/* Flashcards */
.deck-wrap{display:grid;place-items:center;margin:22px 0}
.flashcard{width:min(560px,100%);min-height:260px;perspective:1200px;cursor:pointer}
.fc-inner{position:relative;width:100%;min-height:260px;transition:transform .5s;transform-style:preserve-3d}
.flashcard.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;border-radius:18px;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-lg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fc-face .fc-label{position:absolute;top:14px;left:18px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fc-face p{margin:0;font-size:1.25rem;font-family:var(--serif);line-height:1.35}
.fc-back{transform:rotateY(180deg);background:var(--accent-050)}
.fc-back p{font-family:var(--sans);font-size:1.05rem}
.fc-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.fc-count{text-align:center;color:var(--muted);font-size:.86rem;margin-top:10px}

/* Activity */
.act-bars{display:flex;align-items:flex-end;gap:6px;height:130px;margin:16px 0 6px}
.act-bar{flex:1;background:var(--accent-050);border:1px solid var(--accent-500);border-bottom:0;border-radius:7px 7px 0 0;min-height:3px;position:relative}
.act-bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:.66rem;color:var(--muted)}
.act-bar b{position:absolute;top:-19px;left:0;right:0;text-align:center;font-size:.68rem;color:var(--ink-2)}
.act-legend{margin-top:26px;color:var(--muted);font-size:.84rem}
.act-log{margin-top:16px}
.act-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.act-row:last-child{border-bottom:0}
.act-when{color:var(--faint);font-size:.78rem;width:110px;flex:none}
.act-what{flex:1;min-width:0}
.act-secs{color:var(--muted);font-size:.8rem;flex:none}

/* the little table the grades page draws */
.score-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.92rem}
.score-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.score-table td{padding:10px;border-bottom:1px solid var(--line)}
.score-table tr:last-child td{border-bottom:0}
.score-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- 65-control.css ---- */
/* ===== The teacher's control panel (control.html) =====
   A separate page, like Heidi's: the class site stays exactly the same for everyone, and the
   teacher's machinery lives behind one button in the sidebar footer. */
.cp-body{background:var(--bg);min-height:100vh}
.cp-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:13px clamp(16px,4vw,36px);
  background:var(--panel);border-bottom:1px solid var(--line)}
.cp-bar h1{font-family:var(--serif);font-size:1.15rem;margin:0;flex:none}
.cp-bar .cp-sub{color:var(--muted);font-size:.85rem;flex:1;min-width:0}
.cp-wrap{max-width:1180px;margin:0 auto;padding:22px clamp(16px,4vw,36px) 60px}
.cp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;border-bottom:1px solid var(--line)}
.cp-tab{padding:10px 16px;border:0;background:none;color:var(--muted);font-weight:600;font-size:.94rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.cp-tab:hover{color:var(--ink)}
.cp-tab.active{color:var(--accent);border-bottom-color:var(--accent-500)}

/* the ask box — the thing Heidi's control panel is built around */
.ask-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,3vw,26px)}
.ask-box h2{font-family:var(--serif);margin:0 0 4px;font-size:1.3rem}
.ask-box .ask-hint{color:var(--muted);margin:0 0 14px;font-size:.93rem}
.ask-examples{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.ask-eg{font-size:.82rem;padding:7px 12px;border-radius:20px;border:1px dashed var(--line);background:var(--panel-2);color:var(--ink-2);text-align:left}
.ask-eg:hover{border-color:var(--accent-500);color:var(--accent)}
.ask-drop{border:2px dashed var(--line);border-radius:14px;padding:18px;text-align:center;color:var(--muted);margin-top:14px;background:var(--panel-2)}
.ask-drop.over{border-color:var(--accent-500);background:var(--accent-050);color:var(--accent)}

/* request feed */
.req{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.req:last-child{border-bottom:0}
.req-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--panel-2);flex:none;font-size:1.1rem}
.req-main{flex:1;min-width:0}
.req-main .req-text{margin:0 0 4px;font-weight:600}
.req-meta{font-size:.8rem;color:var(--muted)}
.req-note{margin:8px 0 0;padding:10px 13px;border-radius:10px;background:var(--panel-2);font-size:.89rem}
.req-result{margin:8px 0 0;padding:12px 14px;border-radius:10px;background:var(--accent-050);font-size:.92rem}

/* the gradebook grid — carried over from the Canvas build, which got this part right */
.gb-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
.gb{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem}
.gb th,.gb td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.gb thead th{position:sticky;top:0;z-index:2;background:var(--panel);text-align:left;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line)}
.gb thead th small{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:var(--faint);font-size:.72rem}
.gb .gb-name{position:sticky;left:0;z-index:1;background:var(--panel);min-width:190px}
.gb thead .gb-name{z-index:3}
.gb tbody tr:hover td{background:var(--panel-2)}
.gb tbody tr:hover .gb-name{background:var(--panel-2)}
.gb-cell{text-align:right;font-variant-numeric:tabular-nums;cursor:text;min-width:92px}
.gb-cell:focus-within,.gb-cell.editing{outline:2px solid var(--accent-500);outline-offset:-2px}
.gb-cell input{width:100%;border:0;background:none;text-align:right;font:inherit;color:inherit;padding:0}
.gb-missing{color:var(--red);font-weight:700;font-size:.7rem;letter-spacing:.04em}
.gb-todo{color:var(--amber);font-size:1.1rem;line-height:1}
.gb-total{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;background:var(--panel-2)}
.gb-letter{font-weight:700;color:var(--accent)}
.gb-person{display:flex;align-items:center;gap:9px}
.gb-person .avatar{width:28px;height:28px;font-size:.68rem}
.gb-person small{display:block;color:var(--muted);font-weight:400;font-size:.76rem}
.gb-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.gb-hint{color:var(--muted);font-size:.84rem;margin:10px 0 14px}
.gb-hint kbd{font-family:var(--mono);font-size:.78rem;background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px}

/* the one-time code card */
.code-card{margin-top:14px;padding:18px;border-radius:14px;border:1px dashed var(--accent-500);background:var(--accent-050);text-align:center}
.code-card .the-code{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--accent);letter-spacing:.02em;margin:8px 0}
.code-card p{margin:0;color:var(--ink-2);font-size:.9rem}

/* ===== On a phone =====
   The bar is a title, a subtitle and three buttons; below ~430px that cannot sit on one line, and
   forcing it pushes the whole page sideways. The tabs scroll instead of wrapping so the row stays
   one line and the page never does. */
.cp-bar{flex-wrap:wrap;row-gap:8px}
.cp-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cp-tab{white-space:nowrap;flex:none}
@media(max-width:560px){
  .cp-bar{padding:10px 14px}
  .cp-bar h1{font-size:1.02rem;flex:1 1 100%}
  .cp-bar .cp-sub{flex:1 1 100%;order:5;font-size:.8rem}
  .cp-wrap{padding:16px 14px 48px}
  .gb-tools{gap:8px}
  .gb-tools .btn{flex:1 1 auto}
}

/* ===== The "All classes" inbox ===== */
.inbox-sec{margin-top:22px}
.inbox-sec h2{margin:0 0 2px}
.inbox-sec>.muted{margin:0 0 10px}
.inbox-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.inbox-row:last-child{border-bottom:0}
.inbox-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);flex:none}
.inbox-dot.red{background:var(--red)}
.inbox-dot.grey{background:var(--line)}
.inbox-dot.green{background:var(--green)}
.inbox-mid{flex:1;min-width:0}
.inbox-mid b{display:block;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-mid span{font-size:.8rem;color:var(--muted)}
.class-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;font-size:.74rem;font-weight:700;color:#fff;background:var(--chip,var(--accent-600));flex:none;white-space:nowrap}
.inbox-act{flex:none}
.class-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
.class-tile{display:block;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);color:inherit;border-left:5px solid var(--chip,var(--accent))}
.class-tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.class-tile h3{margin:0 0 6px;font-family:var(--serif);font-size:1.05rem}
.ct-nums{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.84rem;color:var(--muted)}
.ct-nums b{color:var(--ink)}
.ct-nums .hot{color:var(--red);font-weight:700}

/* ---- 66-teacher.css ---- */
/* ===== The teacher's machinery (teacher.js) =====
   Restored unchanged from the Canvas build, because it styles code that came across unchanged:
   the gradebook grid, the ask box, the request feed and the printable code cards. It speaks the
   old token vocabulary, which 00-tokens.css aliases onto the new one, so a course's colour reaches
   it without a single edit here. Loaded only by control.html.
*/
/* ===== 55 teacher — the ask box (.tc-ask*, .tc-req*) · the class table (.tc-grid, .tc-cell)
   · one student's work (.tc-item, .tc-mark) · the in-page item tools (.tc-tools)
   · sign-in codes and the cards you print (.tc-code, .tc-print). Everything is teacher-only. ===== */

/* ---------- the "Ask Eagle Nest" button in the top bar ---------- */
.tc-askbtn{text-decoration:none}
.tc-askbtn:hover{text-decoration:none}
.tc-askbtn.tc-offline{background:var(--panel);border-color:var(--line-2);color:var(--muted)}
.tc-askbtn-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(255,255,255,.28);font-size:.7rem;font-weight:800}
.tc-askbtn.tc-offline .tc-askbtn-n{background:var(--panel-3)}
@media (max-width:560px){.tc-askbtn-label{display:none}}

/* ---------- the ask box ---------- */
.tc-agent .alert{margin-bottom:14px}
.tc-askbox{display:flex;flex-direction:column;gap:10px}
textarea.tc-ask-text{min-height:96px;font-size:1rem;line-height:1.5;resize:vertical}
.tc-chips{display:flex;flex-wrap:wrap;gap:6px}
.tc-example{cursor:pointer;text-align:left;color:var(--ink-2);max-width:100%;white-space:normal}
.tc-example:hover{border-color:var(--brand);color:var(--brand-700)}
html[data-theme="dark"] .tc-example:hover{color:var(--brand)}
.tc-files{display:flex;flex-wrap:wrap;gap:6px}
.tc-files:empty{display:none}
.tc-file{max-width:100%;overflow-wrap:anywhere}
.tc-file.tc-uploading{opacity:.6}
.tc-ask-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tc-ask-hint{margin-left:auto}
.tc-send{flex:none}
@media (max-width:560px){.tc-ask-hint{display:none}.tc-send{margin-left:auto}}
/* the drop zone — Heidi's: big, dashed, says what it takes; .over while a file is dragged across it */
.tc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:120px;margin-top:12px;padding:26px 20px;
  border:2px dashed var(--line);border-radius:14px;background:var(--panel-2);color:var(--muted);text-align:center;cursor:pointer;transition:.15s}
.tc-drop:hover,.tc-drop:focus-visible,.tc-drop.over{border-color:var(--accent-500);background:var(--accent-050);color:var(--ink)}
.tc-drop-ico{font-size:1.8rem;line-height:1}
.tc-drop-main{font-size:1.02rem;color:var(--ink)}
.tc-drop-sub{font-size:.85rem}
.tc-drop-why{font-size:.82rem;color:var(--muted);max-width:60ch;margin:6px auto 0}
@media (max-width:560px){.tc-drop{padding:18px 14px;min-height:0}}

/* ---------- the request feed ---------- */
.tc-draft{align-items:flex-start}
.tc-draft .rte{max-width:none;margin-top:4px}

/* ---------- the item tools student.js drops on a row ---------- */
.tc-tools{display:inline-flex;align-items:center;gap:2px;flex:none}
.tc-tools.busy{opacity:.5;pointer-events:none}
.tc-tool{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 8px;border-radius:var(--radius-sm);color:var(--muted);border:1px solid transparent;font-size:.8rem;font-weight:600}
.tc-tool:hover{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
.tc-tool .ico{width:17px;height:17px}
.tc-tool.on{color:var(--success)}
.tc-tool.off{color:var(--faint)}
.tc-due-text{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-tools-sm .tc-tool{height:26px;padding:0 5px}
.tc-tools-sm .tc-due-text{display:none}
@media (max-width:560px){.tc-due-text{display:none}}

/* ---------- toolbar above the class table ---------- */
.tc-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.tc-bar .input{width:auto;min-width:150px;padding:7px 10px;font-size:.9rem}
.tc-bar .tc-search{flex:1 1 200px;max-width:340px}
.tc-keys{margin:0 0 8px}
.tc-keys kbd{font-size:.72rem;padding:0 5px}

/* ---------- the class table ---------- */
.tc-wrap{position:relative;overflow:auto;max-height:calc(100dvh - 260px);min-height:240px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overscroll-behavior:contain}
.tc-grid{border-collapse:separate;border-spacing:0;font-size:.88rem;min-width:100%}
.tc-grid th,.tc-grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;padding:0}
.tc-grid thead th{position:sticky;top:0;z-index:3;background:var(--panel-2);vertical-align:bottom;text-align:left;font-weight:600;min-width:104px;max-width:160px;padding:8px 8px 6px;font-size:.8rem;line-height:1.3}
.tc-grid th.tc-stu,.tc-grid td.tc-stu{position:sticky;left:0;z-index:2;background:var(--panel);min-width:184px;max-width:240px;padding:5px 8px 5px 10px;text-align:left}
.tc-grid thead th.tc-stu{z-index:4;background:var(--panel-2)}
.tc-grid tbody tr:hover td,.tc-grid tbody tr:hover td.tc-stu{background:color-mix(in srgb,var(--brand-050) 60%,var(--panel))}
.tc-col{position:relative}
.tc-col-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;padding-right:22px}
.tc-col-title a,.tc-col-title span{color:var(--ink);font-weight:700}
.tc-col-title a:hover{color:var(--brand)}
.tc-unpub .tc-col-title a,.tc-unpub .tc-col-title span{color:var(--muted);font-weight:600}
.tc-unpub-ico{color:var(--faint);vertical-align:middle;margin-left:3px;line-height:0}
.tc-unpub-ico .ico{width:13px;height:13px}
.tc-col-meta{font-size:.7rem;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.tc-col-menu{position:absolute;top:4px;right:3px;width:22px;height:22px;border-radius:6px;color:var(--muted);opacity:.55;display:inline-grid;place-items:center}
.tc-col-menu .ico{width:14px;height:14px}
.tc-col:hover .tc-col-menu,.tc-col:focus-within .tc-col-menu,.tc-col-menu:focus-visible{opacity:1}
.tc-stu-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:2px 4px;border-radius:6px;font:inherit;color:var(--ink);min-width:0}
.tc-stu-btn:hover{background:var(--panel-2)}
.tc-stu-name{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tc-stu-n{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tc-stu-meta{font-size:.7rem;color:var(--muted)}
.tc-expand{display:none;width:30px;height:30px;border-radius:6px;color:var(--muted);place-items:center}
/* cells */
.tc-grid td.tc-cell{position:relative;min-width:104px;height:42px;text-align:right;padding:0 10px 0 24px;cursor:cell;font-variant-numeric:tabular-nums;color:var(--ink);transition:background .1s}
.tc-grid td.tc-cell:focus{outline:none;box-shadow:inset 0 0 0 2px var(--brand);background:var(--brand-050);z-index:1}
.tc-grid td.tc-cell.editing{padding:0;box-shadow:inset 0 0 0 2px var(--brand);background:var(--panel)}
.tc-input{width:100%;height:42px;border:0;background:transparent;text-align:right;padding:0 10px;font:inherit;font-variant-numeric:tabular-nums;color:var(--ink)}
.tc-input:focus-visible{box-shadow:none}
.tc-val{display:inline-block;min-width:1.5em}
.tc-missing .tc-val{color:var(--danger);font-weight:700}
.tc-excused .tc-val{color:var(--muted);font-style:italic;letter-spacing:.04em}
.tc-needs .tc-val{color:var(--warning);font-size:1.3rem;line-height:1}
.tc-none .tc-val{color:var(--faint)}
.tc-cell.unpub{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--panel-3) 70%,transparent) 6px 8px)}
.tc-cell.saving{opacity:.5}
.tc-tag{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--danger)}
.tc-corner{position:absolute;top:0;right:0;border-style:solid;border-width:0 11px 11px 0;border-color:transparent var(--warning) transparent transparent;pointer-events:none}
.tc-grid th.tc-total,.tc-grid td.tc-total{position:sticky;right:0;z-index:2;background:var(--panel-2);min-width:104px;font-weight:700;text-align:right;padding:0 10px;font-variant-numeric:tabular-nums}
.tc-grid thead th.tc-total{z-index:4;background:var(--panel-3)}
.tc-total-letter{margin-left:6px;color:var(--brand)}

/* ---------- one student's work ---------- */
.tc-item{margin-bottom:14px}
.tc-item .card-head{flex-wrap:wrap;gap:6px 10px}
.tc-item .card-head h3{margin:0;font-size:1rem}
.tc-turnin{background:var(--panel-2);border-radius:var(--radius);padding:10px 14px;margin:8px 0;max-width:none}
.tc-mark{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;margin-top:14px}
.tc-mark .field{margin-bottom:0}
input.tc-score{font-size:1.15rem;font-variant-numeric:tabular-nums;text-align:right}
textarea.tc-fb{min-height:72px}
.tc-ai-host:empty{display:none}
.tc-ai-host{margin-top:12px}
@media (max-width:640px){.tc-mark{grid-template-columns:1fr}}

/* ---------- sign-in codes ---------- */
.tc-code{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:12px;background:var(--panel-2);text-align:center}
.tc-code-name{font-weight:700;margin-bottom:8px}
.tc-code-val{display:block;font-size:clamp(1.15rem,5vw,1.7rem);font-weight:700;letter-spacing:.02em;padding:10px 12px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);user-select:all;overflow-wrap:anywhere}
.tc-code-inline{user-select:all;font-size:.92rem}

/* ---------- cards to cut out and hand over ---------- */
.tc-print{position:fixed;left:-10000px;top:0;width:190mm;background:#fff;color:#000}
.tc-print-title{font-size:1.2rem;margin:0 0 8px}
.tc-print-grid{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.tc-print-card{border:1.5px dashed #888;border-radius:4mm;padding:7mm 6mm;text-align:center;break-inside:avoid;page-break-inside:avoid}
.tc-print-hello{font-size:9pt;letter-spacing:.14em;text-transform:uppercase;color:#555}
.tc-print-name{font-size:15pt;font-weight:700;margin:2mm 0 4mm}
.tc-print-label{font-size:8.5pt;letter-spacing:.1em;text-transform:uppercase;color:#555}
.tc-print-code{display:block;font-family:var(--mono);font-size:15pt;font-weight:700;margin:1mm 0 4mm;word-break:break-word}
.tc-print-how{font-size:8.5pt;color:#333;line-height:1.35}
@media print{
  html.tc-printing body>*{display:none!important}
  html.tc-printing .tc-print{display:block!important;position:static;left:auto;width:auto}
  .tc-wrap{max-height:none;overflow:visible;border:0}
  .tc-bar,.tc-keys,.tc-col-menu,.tc-expand,.tc-tools,.tc-askbox,.tc-askbtn{display:none!important}
  .tc-grid thead th,.tc-grid td.tc-stu,.tc-grid td.tc-total{position:static}
}

/* ---------- narrow screens: the grid becomes one card per student ---------- */
@media (max-width:700px){
  .tc-wrap{max-height:none;overflow:visible;border:0;background:transparent;min-height:0}
  .tc-grid,.tc-grid tbody,.tc-grid tr,.tc-grid td{display:block;width:100%;max-width:none;min-width:0}
  .tc-grid thead{display:none}
  .tc-grid tbody tr{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
  .tc-grid tbody tr:hover td,.tc-grid tbody tr:hover td.tc-stu{background:var(--panel)}
  .tc-grid td{border-right:0;white-space:normal}
  .tc-grid th.tc-stu,.tc-grid td.tc-stu{position:static;display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);max-width:none}
  .tc-grid td.tc-stu .tc-stu-btn{flex:1}
  .tc-expand{display:inline-grid;transition:transform .15s}
  .tc-grid tr.open .tc-expand{transform:rotate(180deg)}
  .tc-grid td.tc-cell{display:none;height:auto;min-height:46px;padding:11px 12px 11px 14px;text-align:right;border-bottom:1px solid var(--line)}
  .tc-grid tr.open td.tc-cell{display:flow-root}
  .tc-grid td.tc-cell::before,.tc-grid td.tc-total::before{content:attr(data-label);float:left;max-width:58%;text-align:left;color:var(--muted);font-weight:500;white-space:normal}
  .tc-grid td.tc-cell.editing{padding:0 0 0 14px;display:flex;align-items:center}
  .tc-grid tr:not(.open) td.tc-cell.editing{display:none}
  .tc-grid td.tc-cell.editing::before{flex:none;max-width:50%}
  .tc-grid td.tc-cell.editing .tc-input{flex:1;height:46px}
  .tc-tag{position:static;transform:none;margin-right:6px}
  .tc-grid td.tc-total{position:static;display:flow-root;background:var(--panel-2);padding:11px 12px;text-align:right;font-size:.95rem}
  .tc-print-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .tc-bar .input{min-width:0;width:100%}
  .tc-bar .tc-search{max-width:none}
  .tc-code-val{font-size:1.1rem}
}

/* ---------- elementary mode ---------- */
html[data-mode="elementary"] .tc-grid{font-size:.95rem}
html[data-mode="elementary"] textarea.tc-ask-text{font-size:1.05rem}

/* ===== The request feed: piles of one-line rows that open ===== */
.tc-feed{display:flex;flex-direction:column;gap:22px;margin-top:22px}
.tc-pile-head{margin:0 0 8px}
.tc-pile-head h3{margin:0}
.tc-pile-head p{margin:2px 0 0}
.tc-feed-card{overflow:hidden}
.tc-req{border-bottom:1px solid var(--line)}
.tc-req:last-child{border-bottom:0}
.tc-req-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:0;text-align:left;color:var(--ink);font:inherit}
.tc-req-row:hover{background:var(--panel-2)}
.tc-req-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--panel-2);flex:none;font-size:.95rem}
.tc-req.open .tc-req-ico{background:var(--accent-050)}
.tc-req-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tc-req-line{font-weight:600;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-req-meta{display:flex;flex-wrap:wrap;gap:5px;font-size:.78rem;color:var(--muted)}
.tc-req-chev{color:var(--faint);transition:transform .18s;flex:none}
.tc-req.open .tc-req-chev{transform:rotate(180deg)}
.tc-req-working .tc-req-row{background:color-mix(in srgb,var(--warning) 7%,var(--panel))}
.tc-req-body{padding:4px 16px 16px 58px;border-top:1px dashed var(--line)}
.tc-req-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 12px;font-size:.95rem;color:var(--ink-2)}
.tc-notes{list-style:none;margin:0 0 12px;padding:0;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:5px}
.tc-notes li{display:flex;gap:10px;padding-left:12px;font-size:.86rem;color:var(--ink-2)}
.tc-note-at{color:var(--faint);font-variant-numeric:tabular-nums;flex:none;min-width:62px}
.tc-result{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--accent-050);max-width:none;font-size:.95rem}
.tc-result>:first-child{margin-top:0}
.tc-result>:last-child{margin-bottom:0}
.tc-req-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media(max-width:600px){.tc-req-body{padding-left:16px}.tc-req-line{white-space:normal}}

/* earlier versions of a turn-in, kept */
.tc-history{margin-top:10px}
.tc-history summary{cursor:pointer;color:var(--muted)}
.tc-history-row{margin:10px 0 0 4px;padding-left:12px;border-left:2px solid var(--line)}
.tc-history-row .kicker{font-size:.72rem;color:var(--faint);font-weight:700;letter-spacing:.05em;text-transform:uppercase}

/* ---- 70-modes.css ---- */
/* ===== Reading level: the same site, pitched at the person reading it =====
   A course declares mode: elementary | secondary | college. It changes size and density, never
   layout — a 4th grader and a chemistry undergraduate should still recognise the same page. */
html[data-mode="elementary"]{font-size:17px;--radius:14px;--radius-sm:10px}
html[data-mode="elementary"] .nav-item{font-size:.98rem;padding:11px 12px}
html[data-mode="elementary"] .nav-topic{font-size:.93rem;padding:9px 12px}
html[data-mode="elementary"] .btn{padding:12px 20px;font-size:1rem}
html[data-mode="elementary"] .btn-lg{padding:16px 26px;font-size:1.08rem}
html[data-mode="elementary"] .row-item{padding:15px 18px}
html[data-mode="elementary"] .study-head h1{font-size:clamp(1.7rem,4.4vw,2.4rem)}
html[data-mode="elementary"] .study-head .tagline{font-size:1.1rem}
html[data-mode="elementary"] .study-purpose{font-size:1rem}
html[data-mode="elementary"] .rich{font-size:1.06rem;line-height:1.75}
html[data-mode="elementary"] .sp-txt h4{font-size:1.08rem}

html[data-mode="college"]{font-size:15.5px}
html[data-mode="college"] .row-item{padding:10px 16px}
html[data-mode="college"] .nav-topic{padding:6px 12px;font-size:.85rem}
html[data-mode="college"] .view{max-width:1180px}

/* ---- 80-print.css ---- */
/* ===== 80 print — gradebook, assignment sheets, syllabus, quiz results ===== */
@media print{
  @page{margin:14mm}
  html{font-size:12pt}
  .table-wrap{overflow:visible;border:0}
  .table th{position:static}
  .gb-grid{overflow:visible}
  a{color:#000;text-decoration:none}
  .rte a::after,.prose a::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  .page-head .actions,.tabs,.cmd-bar,.pub-toggle,.menu,.modal-back,.prev-next,.drop,.icon-btn,.menu-btn,.pill.ai{display:none!important}
  .card{page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
}