/* TechnoTutor LOOKS (v0.80.51) — pure CSS-variable overrides, plus the few
   global rules that let a look change TYPE and SHAPE, not only colour.

   "UI themes just change colour... fonts and looks really differ?" Right: a
   palette swap is not a different look. A look is type + shape + texture +
   density + colour, so every look defines the same set of tokens in five
   groups, and the rules at the bottom apply them to the parts every page
   shares (body, headings, labels, buttons, fields, cards, pills, the nav):

     colour   --paper --card --band --line --rule --shadow --ink --muted
              --faint --board --board-deep --accent --board-2 --chalk
              --chalk-dim --sun --sun-ink --leaf --ready --warn --bad --gone
     type     --body --display --mono --base
     headings --h-weight --h-tracking --h-case
     labels   --label-case --label-tracking      (kickers, field labels, th)
     shape    --r-sm --r --r-lg --r-pill --border --shadow-2 --texture

   FONTS ARE BUNDLED, NOT FETCHED. The box is offline (CLAUDE.md #1), so the
   six families below live in static/fonts/ as latin woff2 — every one is
   SIL Open Font Licence, with its OFL text beside it. The default look uses
   the system stacks and downloads nothing; a page that never sets a look
   never even requests a font file.

   Selector shape, and why there are two per look:
   - html[data-theme="x"]  (0,1,1) outranks any page's inline :root (0,1,0)
     regardless of <link> vs <style> order, so a set look always wins;
   - bare [data-theme="x"] (0,1,0) lets a scoped wrapper preview a look on
     one element (see themes.html) without touching <html>.

   EVERY look defines EVERY name (tests/test_themes.py). The legacy palette
   names — midnight, sunrise, blueprint — are aliased to studio, storybook and
   swiss by nav.js and the pages' one-liner, so a device that stored one keeps
   a look instead of falling back to the default. */

@font-face{font-family:"Nunito";src:url(/static/fonts/Nunito.woff2) format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/static/fonts/Fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/static/fonts/Literata.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/static/fonts/SpaceGrotesk.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/fonts/JetBrainsMono.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/static/fonts/Inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* chalkboard — THE DEFAULT. Manila paper & chalkboard: warm paper, deep teal board, PH-sun amber, the system sans. Shared with :root so a page that links this file gets it with no data-theme set at all. */
:root,
html[data-theme="chalkboard"],
[data-theme="chalkboard"]{
  color-scheme:light;   /* native selects, scrollbars, form controls */
  --paper:#F6F1E3;
  --card:#FFFFFF;
  --band:#EFE8D6;
  --line:#DCD3BC;
  --rule:#DCD2BA;
  --shadow:0 1px 2px rgba(27,42,46,.07),0 4px 14px rgba(27,42,46,.05);
  --ink:#23303A;
  --muted:#5A7278;
  --faint:#93A6AB;
  --board:#12505C;
  --board-deep:#0C3A44;
  --accent:#12505C;
  --board-2:#0D3D47;
  --chalk:#F2F7F7;
  --chalk-dim:#9DC0C6;
  --sun:#F2A93B;
  --sun-ink:#7A4F06;
  --leaf:#3F9D63;
  --ready:#2F7D52;
  --warn:#B77714;
  --bad:#C4553D;
  --gone:#A63D36;
  --body:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --display:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --base:16px;
  --h-weight:800;
  --h-tracking:-.01em;
  --h-case:none;
  --label-case:uppercase;
  --label-tracking:.14em;
  --r-sm:.5rem;
  --r:.85rem;
  --r-lg:1.25rem;
  --r-pill:999px;
  --border:2px;
  --shadow-2:0 10px 40px rgba(0,0,0,.18);
  --texture:none;
}

/* storybook — K-3. Nunito (rounded, OFL), bigger type, fat rounded corners, 3px outlines, coral in amber's slot, polka-dot paper. Reads like a picture book, not a form. */
html[data-theme="storybook"],
[data-theme="storybook"]{
  color-scheme:light;   /* native selects, scrollbars, form controls */
  --paper:#FFF8EE;
  --card:#FFFFFF;
  --band:#FFE9CF;
  --line:#EBC79A;
  --rule:#F0D9BE;
  --shadow:0 2px 0 rgba(84,48,32,.08);
  --ink:#2B2A33;
  --muted:#6B6570;
  --faint:#A39DA6;
  --board:#2E8598;
  --board-deep:#1D6273;
  --accent:#1D6273;
  --board-2:#226879;
  --chalk:#F6FCFC;
  --chalk-dim:#B4DDE3;
  --sun:#F26B4E;
  --sun-ink:#7E2712;
  --leaf:#3AA968;
  --ready:#2E9457;
  --warn:#DB8A1E;
  --bad:#D95746;
  --gone:#BD4A3B;
  --body:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --display:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --base:17px;
  --h-weight:900;
  --h-tracking:-.005em;
  --h-case:none;
  --label-case:none;
  --label-tracking:.02em;
  --r-sm:.75rem;
  --r:1.1rem;
  --r-lg:1.6rem;
  --r-pill:999px;
  --border:3px;
  --shadow-2:0 14px 40px rgba(84,48,32,.16);
  --texture:radial-gradient(circle at 1px 1px, rgba(46,133,152,.13) 1.3px, transparent 1.8px) 0 0/22px 22px;
}

/* notebook — the printed lesson plan. Fraunces headlines over Literata text (both OFL serifs), near-black ink, square corners, hairlines, no shadows, faint ruled paper. Reads like a good textbook. */
html[data-theme="notebook"],
[data-theme="notebook"]{
  color-scheme:light;   /* native selects, scrollbars, form controls */
  --paper:#F7F3EA;
  --card:#FFFDF8;
  --band:#EFE9DB;
  --line:#CFC6B4;
  --rule:#DAD2C0;
  --shadow:none;
  --ink:#1E1B18;
  --muted:#5D564E;
  --faint:#9A928A;
  --board:#1F3D33;
  --board-deep:#142A23;
  --accent:#234C40;
  --board-2:#183329;
  --chalk:#F5F1E6;
  --chalk-dim:#B9C9C0;
  --sun:#D9A441;
  --sun-ink:#5A3E07;
  --leaf:#3E7D5A;
  --ready:#2F6E4C;
  --warn:#A86F1B;
  --bad:#A6423A;
  --gone:#8E3A33;
  --body:"Literata", Georgia, "Times New Roman", serif;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --base:17px;
  --h-weight:700;
  --h-tracking:-.02em;
  --h-case:none;
  --label-case:uppercase;
  --label-tracking:.18em;
  --r-sm:2px;
  --r:3px;
  --r-lg:4px;
  --r-pill:4px;
  --border:1px;
  --shadow-2:0 0 0 1px var(--line);
  --texture:repeating-linear-gradient(0deg, transparent 0 27px, rgba(31,61,51,.055) 27px 28px);
}

/* studio — dark tech, for the senior band and robotics rooms. Space Grotesk with JetBrains Mono labels (OFL), near-black navy, a faint grid, sharp corners, cyan accents. The midnight palette grew a face. */
html[data-theme="studio"],
[data-theme="studio"]{
  color-scheme:dark;   /* native selects, scrollbars, form controls */
  --paper:#0B1220;
  --card:#111B2C;
  --band:#16233A;
  --line:#243352;
  --rule:#1F2C46;
  --shadow:0 1px 2px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.4);
  --ink:#E6EFF4;
  --muted:#9FB4C6;
  --faint:#647A90;
  --board:#1E7D8F;
  --board-deep:#0E3D49;
  --accent:#7FCFDD;
  --board-2:#11485A;
  --chalk:#EAF7F9;
  --chalk-dim:#79C6D1;
  --sun:#F2A93B;
  --sun-ink:#5C3F05;
  --leaf:#4EC584;
  --ready:#43B87A;
  --warn:#E5A83C;
  --bad:#E4715A;
  --gone:#D9695F;
  --body:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --base:15.5px;
  --h-weight:700;
  --h-tracking:-.02em;
  --h-case:none;
  --label-case:uppercase;
  --label-tracking:.16em;
  --r-sm:.25rem;
  --r:.4rem;
  --r-lg:.6rem;
  --r-pill:.4rem;
  --border:1px;
  --shadow-2:0 0 0 1px rgba(127,207,221,.25), 0 16px 40px rgba(0,0,0,.5);
  --texture:linear-gradient(rgba(127,207,221,.06) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(127,207,221,.06) 1px, transparent 1px) 0 0/28px 28px;
}

/* swiss — minimal. Inter (OFL), pure white, black ink, one blue accent, square corners, no borders — whitespace does the work. For an admin desk or a school that finds the paper look busy. */
html[data-theme="swiss"],
[data-theme="swiss"]{
  color-scheme:light;   /* native selects, scrollbars, form controls */
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --band:#F2F2F2;
  --line:#E2E2E2;
  --rule:#D9D9D9;
  --shadow:0 0 0 1px #E2E2E2;
  --ink:#111111;
  --muted:#5B5B5B;
  --faint:#9A9A9A;
  --board:#111111;
  --board-deep:#000000;
  --accent:#1F4FD8;
  --board-2:#1A1A1A;
  --chalk:#FFFFFF;
  --chalk-dim:#BDBDBD;
  --sun:#F5C400;
  --sun-ink:#3D3000;
  --leaf:#1F8A4C;
  --ready:#1B7A43;
  --warn:#B07A00;
  --bad:#D6382D;
  --gone:#B22F26;
  --body:"Inter", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --display:"Inter", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --base:16px;
  --h-weight:800;
  --h-tracking:-.035em;
  --h-case:none;
  --label-case:uppercase;
  --label-tracking:.2em;
  --r-sm:0;
  --r:.2rem;
  --r-lg:.3rem;
  --r-pill:.2rem;
  --border:1.5px;
  --shadow-2:0 24px 60px rgba(0,0,0,.14);
  --texture:none;
}

/* ---- a look reaches type and shape through these, on every page ----------
   Only when a look is SET (the attribute is absent on the default), so the
   chalkboard look is byte-for-byte what it was. Specificity (0,2,1) beats a
   page's own `.card{}` / `h1{}` / `button{}`; a page that must keep its own
   geometry (the board sizes in vh) is unaffected because these touch family,
   weight, tracking, case, radius, border width and shadow — never size or
   layout. */
html[data-theme] body, [data-theme]{
  font-family:var(--body); background-image:var(--texture);
}
html[data-theme] body{ font-size:var(--base); }
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4,
[data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] h4{
  font-family:var(--display); font-weight:var(--h-weight); letter-spacing:var(--h-tracking);
  text-transform:var(--h-case);
}
html[data-theme] .kicker, html[data-theme] .card .course, html[data-theme] .field label, html[data-theme] th,
[data-theme] .kicker, [data-theme] .card .course, [data-theme] .field label, [data-theme] th{
  text-transform:var(--label-case); letter-spacing:var(--label-tracking);
}
html[data-theme] code, html[data-theme] pre, html[data-theme] kbd, html[data-theme] .mono,
[data-theme] code, [data-theme] pre, [data-theme] kbd, [data-theme] .mono{ font-family:var(--mono); }
html[data-theme] button, html[data-theme] .btn, html[data-theme] select, html[data-theme] textarea,
html[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[data-theme] button, [data-theme] .btn, [data-theme] select, [data-theme] textarea,
[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=range]){
  font-family:inherit; border-radius:var(--r); border-width:var(--border);
}
html[data-theme] .btn.big, [data-theme] .btn.big{ border-radius:var(--r-lg); }
html[data-theme] .card, html[data-theme] .sheet, html[data-theme] .sec, html[data-theme] .tile,
html[data-theme] .box, html[data-theme] .panel, html[data-theme] .today, html[data-theme] .state,
[data-theme] .card, [data-theme] .sheet, [data-theme] .sec, [data-theme] .tile,
[data-theme] .box, [data-theme] .panel, [data-theme] .today, [data-theme] .state{
  border-radius:var(--r-lg); border-width:var(--border);
}
html[data-theme] .card, [data-theme] .card{ box-shadow:var(--shadow); }
html[data-theme] .pill, html[data-theme] .progress, html[data-theme] .progress > i,
[data-theme] .pill, [data-theme] .progress, [data-theme] .progress > i{ border-radius:var(--r-pill); }
html[data-theme] .tt-nav{ font-family:var(--body); }
html[data-theme] .tt-nav a, html[data-theme] .tt-nav button.tt-more{ border-radius:var(--r-pill); }

/* ---- each look's own signature, beyond the tokens ------------------------- */
/* storybook: buttons you can press — a solid shadow that the tap pushes in */
html[data-theme="storybook"] .btn.primary, html[data-theme="storybook"] button.primary,
[data-theme="storybook"] .btn.primary, [data-theme="storybook"] button.primary{
  box-shadow:0 4px 0 var(--board-deep); }
html[data-theme="storybook"] .btn.primary:active, [data-theme="storybook"] .btn.primary:active{
  transform:translateY(3px); box-shadow:0 1px 0 var(--board-deep); }
/* notebook: printed — underlined links, inky primary buttons, nav as a text index */
html[data-theme="notebook"] :is(p, li, td, .note, .hint, .purpose, .sub) a:not(.btn),
[data-theme="notebook"] :is(p, li, td, .note, .hint, .purpose, .sub) a:not(.btn){
  text-decoration:underline; text-underline-offset:.16em; text-decoration-thickness:1px; }
html[data-theme="notebook"] .tt-nav a.on, [data-theme="notebook"] .tt-nav a.on{ background:transparent; color:var(--ink);
  box-shadow:inset 0 -3px 0 var(--sun); border-radius:0; }
html[data-theme="notebook"] .tt-nav, [data-theme="notebook"] .tt-nav{ border-bottom:1px solid var(--ink); }
/* studio: labels in mono, cards outlined in the accent's ghost */
html[data-theme="studio"] .kicker, html[data-theme="studio"] .card .course, html[data-theme="studio"] th,
[data-theme="studio"] .kicker, [data-theme="studio"] .card .course, [data-theme="studio"] th{
  font-family:var(--mono); font-weight:700; font-size:.72em; }
html[data-theme="studio"] .card, [data-theme="studio"] .card{
  border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-theme="studio"] .tt-nav a.on, [data-theme="studio"] .tt-nav a.on{ background:var(--accent); color:var(--paper); }
/* swiss: whitespace and one rule — no card borders, black active pill, underlined links */
html[data-theme="swiss"] .card, [data-theme="swiss"] .card{ border-color:transparent; box-shadow:0 0 0 1px var(--line); }
html[data-theme="swiss"] .page-head h1, [data-theme="swiss"] .page-head h1{ font-size:2.4rem; }
html[data-theme="swiss"] :is(p, li, td, .note, .hint, .purpose, .sub) a:not(.btn),
[data-theme="swiss"] :is(p, li, td, .note, .hint, .purpose, .sub) a:not(.btn){
  text-decoration:underline; text-underline-offset:.14em; }
html[data-theme="swiss"] .tt-nav a.on, [data-theme="swiss"] .tt-nav a.on{ background:var(--ink); color:var(--paper); }