/* TechnoTutor — THE ONE DESIGN LANGUAGE (v0.80.49). "Manila paper & chalkboard."

   Every page used to declare its own :root and its own buttons, pills, cards
   and sheets — 28 pages, 6 to 33 hand-typed colours each, four of them
   spelling the same amber three ways. The owner: "there's no consistent
   design language, it needs a good one." This file is it, on top of the
   COLOUR TOKENS in themes.css (which is why a theme reaches every page).

   Rules for a page:
   - colours come from var(--…), never a hex; if a token is missing, add it to
     EVERY theme in themes.css (tests/test_themes.py asserts the sets match);
   - buttons are .btn, pills are .pill, cards are .card, the modal is .sheet,
     inputs sit in .field — a page may EXTEND these with its own class, never
     redefine them;
   - every rule here is wrapped in :where(), which has ZERO specificity, so a
     page's own rule — even a bare `button{}` — always wins; migrating a page
     is removing rules, never fighting them;
   - nothing here is smaller than a thumb (44px) on anything a teacher taps:
     the panel is 65" and the clicker is a phone;
   - system fonts only (CLAUDE.md #1: no webfonts). */

:root{
  /* type and shape tokens (--body, --display, --mono, --r*, --shadow-2, --border)
     come from the LOOK in themes.css (v0.80.51) — every look defines them all */
  --tap: 44px;
}

/* ---- ground ------------------------------------------------------------ */
/* color-scheme comes from the theme (themes.css), so native controls follow it */
:where(body){
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  line-height:1.4; -webkit-font-smoothing:antialiased;
}
:where(a){ color:var(--accent); text-decoration:none; }
:where(a:hover){ text-decoration:underline; }
:where(:focus-visible){ outline:3px solid var(--sun); outline-offset:2px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion: reduce){ :where(*){ transition:none !important; animation:none !important; } }

/* ---- page head: what is this page FOR, and the one thing to do here ----- */
:where(.page-head){ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.8rem 1.4rem;
  margin:1.4rem 0 1rem; }
:where(.page-head h1){ margin:0; font-size:1.9rem; letter-spacing:-.01em; font-weight:800; }
:where(.page-head .purpose){ margin:0; color:var(--muted); font-size:1.02rem; max-width:60ch; }
:where(.kicker){ text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:800;
  color:var(--muted); }

/* ---- buttons ----------------------------------------------------------- */
:where(.btn){
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:var(--tap); padding:.6rem 1.15rem; border-radius:var(--r);
  font:inherit; font-weight:800; font-size:1rem; line-height:1.15; cursor:pointer;
  border:2px solid var(--line); background:var(--card); color:var(--ink);
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
}
:where(.btn:hover){ border-color:var(--accent); }
:where(.btn:active){ transform:translateY(1px); }
:where(.btn:disabled){ opacity:.55; cursor:default; transform:none; }
:where(.btn.primary){ background:var(--board); border-color:var(--board); color:var(--chalk); }
:where(.btn.primary:hover){ background:var(--board-deep); border-color:var(--board-deep); }
:where(.btn.sun){ background:var(--sun); border-color:var(--sun); color:var(--sun-ink); }
:where(.btn.ghost){ background:transparent; }
:where(.btn.danger){ border-color:var(--bad); color:var(--bad); }
:where(.btn.danger:hover){ background:var(--bad); color:var(--card); }
:where(.btn.small){ min-height:36px; padding:.35rem .8rem; font-size:.9rem; }
:where(.btn.big){ font-size:1.25rem; padding:.9rem 1.6rem; border-radius:var(--r-lg); }

/* ---- pills: one word of state ------------------------------------------ */
:where(.pill){
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.78rem; font-weight:800; line-height:1; border-radius:var(--r-pill);
  padding:.36rem .72rem; background:var(--band); color:var(--muted); white-space:nowrap;
}
:where(.pill.ok), :where(.pill.ready){ background:color-mix(in srgb, var(--ready) 16%, var(--card)); color:var(--ready); }
:where(.pill.warn){ background:color-mix(in srgb, var(--sun) 24%, var(--card)); color:var(--sun-ink); }
:where(.pill.bad){  background:color-mix(in srgb, var(--bad) 16%, var(--card)); color:var(--gone); }
:where(.pill.info), :where(.pill.who){ background:var(--board); color:var(--chalk); }
:where(.pill.quiet){ background:transparent; border:1px solid var(--line); }

/* ---- cards ------------------------------------------------------------- */
:where(.card){
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:1rem 1.1rem;
}
:where(.card.tap){ cursor:pointer; transition:transform .08s ease, box-shadow .15s ease; }
:where(.card.tap:hover){ transform:translateY(-2px); box-shadow:var(--shadow-2); }
:where(.card .course){ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:800; }
:where(.card .topic){ font-size:1.25rem; font-weight:800; margin:.2rem 0 .1rem; line-height:1.2; }
:where(.card .meta){ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }

/* ---- the sheet (modal) ------------------------------------------------- */
:where(.sheet-bg){ position:fixed; inset:0; background:rgba(12,58,68,.55); display:none;
  align-items:center; justify-content:center; padding:1rem; z-index:50; }
:where(.sheet-bg.on){ display:flex; }
:where(.sheet){ background:var(--paper); color:var(--ink); border-radius:var(--r-lg);
  padding:1.4rem 1.6rem; width:min(820px, 100%); max-height:92vh; overflow:auto;
  box-shadow:var(--shadow-2); }
:where(.sheet h3){ margin:.1rem 0 .3rem; font-size:1.8rem; line-height:1.15; }
:where(.sheet .sub){ color:var(--muted); margin-bottom:.9rem; }
:where(.sheet .row){ display:flex; flex-wrap:wrap; gap:.7rem; margin:.8rem 0; }

/* ---- forms ------------------------------------------------------------- */
:where(.field){ display:flex; flex-direction:column; gap:.3rem; }
:where(.field label){ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); }
:where(input:not([type=checkbox]):not([type=radio])), :where(select), :where(textarea){
  font:inherit; color:var(--ink); background:var(--card); border:2px solid var(--line);
  border-radius:var(--r); padding:.6rem .8rem; min-height:var(--tap);
}
:where(input:focus), :where(select:focus), :where(textarea:focus){ border-color:var(--accent); outline:none; }

/* ---- lines of state: the sentence under a heading -------------------- */
:where(.status){ padding:.6rem .9rem; border-radius:var(--r); font-weight:600;
  background:var(--band); color:var(--ink); }
:where(.status.ok){ background:color-mix(in srgb, var(--ready) 14%, var(--card)); color:var(--ready); }
:where(.status.warn){ background:color-mix(in srgb, var(--sun) 22%, var(--card)); color:var(--sun-ink); }
:where(.status.bad){ background:color-mix(in srgb, var(--bad) 14%, var(--card)); color:var(--gone); font-weight:700; }
:where(.note){ color:var(--muted); font-size:.95rem; line-height:1.45; }
:where(.hint){ color:var(--muted); font-size:.88rem; }
:where(.err){ color:var(--bad); font-weight:700; min-height:1.2em; }

/* ---- progress ---------------------------------------------------------- */
:where(.progress){ height:8px; border-radius:var(--r-pill); background:var(--band); overflow:hidden; }
:where(.progress > i){ display:block; height:100%; background:var(--board); border-radius:var(--r-pill);
  transition:width .6s ease; }

/* ---- small utilities (no layout: a page owns its own grid and rows) ----- */
:where(.muted){ color:var(--muted); }
:where(.mono){ font-family:var(--mono); }

/* Rule for names in this file: a COMPONENT (btn, pill, card, sheet, field,
   status, progress, page-head, kicker) or a text utility — never a layout
   word a page would naturally use for itself. `.bar` was the progress bar for
   one release and the planner's toolbar collapsed to 8px (v0.80.49). */

@media print{ :where(.btn), :where(.sheet-bg), .tt-nav{ display:none !important; } }