/* twocents design system: the bridge for pages written before it.
 *
 * The labs, build plans and explainers under /p/ (and the two course apps under
 * /paths/) were each written with their own <style> block. They share two small
 * vocabularies of custom properties, so instead of rewriting ~90 files this file
 * points those properties at the system tokens in tc.css and restyles the
 * handful of shared classes (kicker, crumbs, footer, related links...).
 *
 * Loaded after tc.css and after each page's own styles (hub-design.mjs injects
 * both links just before </head>). A page built on the system from scratch does
 * not need this file. When a page is rewritten, drop it from that page.
 *
 * The explainer pages pin <html data-theme="light">: their canvases and charts
 * hard-code light colours. The courses follow the OS theme like the hub does.
 */

/* Variables. :not(#tc) lifts specificity to (1,1,0) so this beats the pages'
   own :root blocks, including the courses' dark-mode `:root:not([data-theme])`. */
:root:not(#tc) {
  /* the explainers' names */
  --plane: var(--tc-bg);
  --surface: var(--tc-card);
  --ink: var(--tc-ink);
  --ink-2: var(--tc-ink-2);
  --muted: var(--tc-muted);
  --hairline: var(--tc-rule);
  --accent: var(--tc-red);
  --code: var(--tc-soft);
  /* the courses' names (--ink, --ink-2 and --accent are shared, above) */
  --paper: var(--tc-bg);
  --sheet: var(--tc-card);
  --rule: var(--tc-rule);
  --accent-ink: var(--tc-on-red);
  --accent-soft: var(--tc-soft);
  --display: var(--tc-sans);
  --body: var(--tc-sans);
  --mono: var(--tc-mono);
  --r: var(--tc-r-sm);
}

/* Type: Geist everywhere the pages asked for Georgia or system-ui. */
body { font-family: var(--tc-sans) }
code, pre, kbd, samp { font-family: var(--tc-mono) }
h1, h2, h3, h4, .sub, .thesis, .q, .num, .stat b, .rec b, .detail h4, .card h3,
.stage .t, .lv .num, .mock .hero b, .report .rhead b, h2.series, .lede, .card b, .panel .q,
.step b.n { font-family: var(--tc-sans) !important }

/* ---- explainers, build plans, labs (the pages under /p/) ---------------------- */
main > h1, main > .wrap > h1, main h1.p-name { font: var(--tc-t-h1); font-size: clamp(34px, 5vw, 50px); letter-spacing: -.04em; color: var(--tc-ink); text-wrap: balance; margin-bottom: 10px }
main .sub { font: var(--tc-t-lede); color: var(--tc-muted) }
main h2 { font-weight: 600; letter-spacing: -.025em; color: var(--tc-ink) }
main h3, main h4 { letter-spacing: -.01em; color: var(--tc-ink) }
.kicker { font: var(--tc-t-label) !important; letter-spacing: var(--tc-track-label) !important; text-transform: uppercase; color: var(--tc-muted) }
input[type=range] { accent-color: var(--tc-red) }
/* A status pill written into the page itself (the labs with their own folders). */
main .kicker .pill { font: var(--tc-t-label) !important; letter-spacing: .06em !important; text-transform: uppercase; background: transparent !important; color: var(--tc-red) !important; border: 1px solid var(--tc-red); padding: 3px 8px !important }

/* Links inside running text: ink, underlined in red. Buttons and cards keep their own look. */
main p a:not([class]), main li a:not([class]), main td a:not([class]) { color: var(--tc-ink); text-decoration: underline; text-decoration-color: var(--tc-red); text-decoration-thickness: 1px; text-underline-offset: 3px }
main p a:not([class]):hover, main li a:not([class]):hover { color: var(--tc-red) }

/* The site's top bar sits above <main>; <main> no longer needs its own top air. */
body > .tc-top + main { padding-top: var(--tc-s4) }
body > .tc-top { padding-bottom: 0 }

/* Breadcrumb and the blocks publish-pages.mjs adds to every page. */
nav.crumbs { font: var(--tc-t-meta) !important; color: var(--tc-muted) !important; margin: 0 0 14px !important }
nav.crumbs a { color: var(--tc-muted) !important }
nav.crumbs a:hover { color: var(--tc-red) !important; text-decoration: none !important }
nav.related, section.conn { border-top-color: var(--tc-rule) !important; color: var(--tc-ink-2) !important }
nav.related b, section.conn b { color: var(--tc-ink) !important }
nav.related a, section.conn a, footer a { color: var(--tc-ink) !important; text-decoration: underline !important; text-decoration-color: var(--tc-rule) !important; text-underline-offset: 3px }
nav.related a:hover, section.conn a:hover, footer a:hover { color: var(--tc-red) !important; text-decoration-color: var(--tc-red) !important }
section.conn .k { font: var(--tc-t-label) !important; background: var(--tc-soft) !important; color: var(--tc-muted) !important }
main footer { border-top-color: var(--tc-rule); color: var(--tc-muted); font-size: 14px }
main footer strong { color: var(--tc-ink) }

/* "Run this loop from your own agent". */
aside.agentcta { background: var(--tc-card) !important; border-color: var(--tc-rule) !important; border-radius: var(--tc-r) !important; color: var(--tc-ink-2) !important }
aside.agentcta b { color: var(--tc-ink) !important; font-weight: 600 }
aside.agentcta pre { background: var(--tc-soft) !important; border-color: var(--tc-rule) !important }
aside.agentcta button { font: 500 12px var(--tc-sans) !important; background: var(--tc-card) !important; border-color: var(--tc-rule) !important; color: var(--tc-ink) !important; border-radius: var(--tc-r-pill) !important }
aside.agentcta a { color: var(--tc-ink) !important; text-decoration: underline !important; text-decoration-color: var(--tc-red) !important }

/* Copy buttons on code blocks (the build plans). */
pre + .copy, .copy, button.cp { font-family: var(--tc-sans) }

/* The pin-a-note chip: smaller on phones so it covers less of the page. */
@media (max-width: 600px) { .tc-chip { right: var(--tc-s3); bottom: var(--tc-s3); padding: 8px 12px; font-size: 12px } }

/* ---- the course apps (/paths/<course>/) -------------------------------------- */
/* The course is a full-width app with a left rail, so the top bar spans the window
   and its wordmark lines up with the rail's title. */
body:has(> .shell) > .tc-top { max-width: none; padding: var(--tc-s4) clamp(16px, 4vw, 56px) var(--tc-s4) 22px; border-bottom: 1px solid var(--tc-rule) }
@media (max-width: 860px) { body:has(> .shell) > .tc-top { padding-left: var(--tc-gutter); border-bottom: 0 } }
.shell h1, .shell h2, .shell h3, .brand b, .mtop b { font-weight: 600; letter-spacing: -.03em }
.shell h1 { letter-spacing: -.04em }
.titleblock { border-top-color: var(--tc-ink) }
.shell .label { font-family: var(--tc-mono); letter-spacing: var(--tc-track-label) }
.shell .rail { top: 0 }
/* Export / import bar, bottom right. */
#tcbar { font: 500 12.5px var(--tc-sans) !important; background: var(--tc-card) !important; color: var(--tc-muted) !important; border-color: var(--tc-rule) !important; box-shadow: var(--tc-lift) !important }
#tcbar a, #tcbar button { color: var(--tc-ink) !important }
#tcbar a:hover, #tcbar button:hover { color: var(--tc-red) !important; text-decoration: none !important }
#tcbar .ok { color: var(--tc-ink) !important }