:root {
  --ink: #1a1a19;
  --paper: #faf9f6;
  --muted: #63625d;
  --rule: #dedcd4;
  --accent: #2f5d50;
  --bad: #8c2f22;
  --good: #2f5d50;

  /* 2026-08-30 visual pass — calm, not clinical; defined, not flat.
     Cards sit a step LIGHTER than the paper and carry a real ink border,
     because for this reader the win is unambiguous chunk boundaries: where
     one thing ends and the next begins. Dilip's instruction, verbatim
     intent: "outline it all in black so the clear distinction between each
     box or portion can be seen cleanly." The border is ink, so it flips to
     near-white in dark mode with no second decision. */
  --card-surface: #fffdf8;
  --card-border: var(--ink);
  --radius-sm: 6px;   /* inputs, buttons, banners */
  --radius-lg: 12px;  /* cards and content surfaces */
  --sans: ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* Track category tints. Category logic, not decoration: the five
     life-skills tracks (01-05) are warm neutrals — hands-on, real-world;
     the four academic tracks (06-09) are cool neutrals. All nine are the
     same family of muted tint on purpose: desaturated colour over
     saturated is a deliberate sensory-load decision for this reader, not
     house taste. Icons and text on these tints are always var(--ink). */
  --tint-t1: #eef3ea;  /* 01 running your own life — sage */
  --tint-t2: #fbeee0;  /* 02 money — amber clay */
  --tint-t3: #f2e4dc;  /* 03 the kitchen — terracotta */
  --tint-t4: #f6efd9;  /* 04 making things — wheat */
  --tint-t5: #f8e6e6;  /* 05 making money — dusty rose */
  --tint-t6: #e8eef5;  /* 06 english — dusty blue */
  --tint-t7: #e8e8f6;  /* 07 math — periwinkle */
  --tint-t8: #e2f0ec;  /* 08 science — teal mint */
  --tint-t9: #f0e7f1;  /* 09 social studies — lavender */
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece9e2;
    --paper: #16171a;
    --muted: #9b9890;
    --rule: #313339;
    --accent: #7fb3a1;
    --bad: #e08b7d;
    --good: #7fb3a1;

    /* Same relationships, remapped: elevation is lightness in dark mode,
       so the card surface steps LIGHTER than the paper, and every tint is
       the same hue, muted, at a lightness where the COLOUR actually reads.
       The first cut of these was too deep — on a real dark screen the nine
       tracks collapsed into one near-black family and the card surface was
       indistinguishable from the page (Dilip, 2026-08-30, on the live
       site). Each tint now sits 1.45–1.7:1 above the paper so the category
       shows, while ink-on-tint stays 8.8–10.2:1 — double AA body text. */
    --card-surface: #23262c;
    --tint-t1: #2b3a2c;
    --tint-t2: #443627;
    --tint-t3: #43302a;
    --tint-t4: #3f3a25;
    --tint-t5: #442f35;
    --tint-t6: #29394d;
    --tint-t7: #333356;
    --tint-t8: #24443c;
    --tint-t9: #3f2f47;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* A faint 20px rule grid, at 5% stroke opacity, behind everything.
     It is deliberately at the edge of perception: the reading column sits on
     top of it, so anything more assertive competes with the prose he is
     supposed to be reading. Tiles seamlessly — the lines are offset 10 into
     the 240 tile, so the gap across a tile boundary is the same 20 as every
     interior gap and no stroke is clipped in half at the seam.

     The colour is written in rather than inherited: a CSS background image is
     an independent document and does NOT resolve currentColor against the
     element, so the dark theme needs its own copy below. The source of record
     is assets/background-texture.svg, which scripts/check-svg-assets.mjs
     scans for anything active and compares against this copy. */
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-serif, Georgia, "Times New Roman", serif;
}
/* Track emblems. They inherit colour from their surroundings, so they are
   muted next to a heading and pick up the accent on a course card without a
   second copy of the file existing anywhere. */
.emblem { vertical-align: -0.15em; margin-right: 0.45rem; color: var(--muted); flex: none; }
.course-emblem { color: var(--accent); }
h1 .emblem, h2 .emblem { color: var(--accent); }
.rule-orn { display: block; width: 100%; max-width: 22rem; height: 1rem; margin: 0.4rem 0 1.1rem; color: var(--rule); }
ul.courses li { display: flex; align-items: baseline; gap: 0.15rem; }
@media (prefers-reduced-motion: no-preference) { .emblem { transition: color 120ms ease; } }

/* A course heading inside the assignments table. The table used to be one
   undifferentiated run of rows across every course. */
tr.group td { padding-top: 1.4rem; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--rule); }
tr.group:first-child td { padding-top: 0.2rem; }

/* Links.
   There was NO rule for these, so every link fell through to the browser
   default: bright blue, purple once visited, underlined without exception.
   On warm paper with a green palette that is badly off-key, and a list where
   every row is a link became a wall of blue. Both are the kind of visual noise
   this site specifically should not produce.
   The underline stays — colour alone must never be the only thing marking a
   link — but it is thin, offset, and drawn in the rule colour so it reads as a
   link without shouting. It darkens on hover and focus. */
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 0.15em; text-decoration-color: var(--rule); }
a:visited { color: var(--accent); }
a:hover, a:focus-visible { text-decoration-color: currentColor; }

/* In dense lists every row is a link, and underlining all of them is the wall.
   Position and weight carry it there; the underline returns on hover. */
ul.courses a, table a { text-decoration: none; }
ul.courses a:hover, ul.courses a:focus-visible,
table a:hover, table a:focus-visible { text-decoration: underline; }

main { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  max-width: 46rem; margin: 0 auto;
}
.brand { font-weight: 600; text-decoration: none; color: var(--ink); letter-spacing: 0.01em; }
.who { display: flex; align-items: center; gap: 0.75rem; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.role {
  font: 600 0.68rem/1 ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.25rem 0.5rem;
}
h1 { font-size: 1.6rem; margin: 1.25rem 0 0.5rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); }
h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
p { margin: 0.6rem 0; }
.lede { color: var(--muted); }
.banner { padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--rule); margin: 1rem 0; }
.banner-error { border-color: var(--bad); color: var(--bad); }
.banner-ok { border-color: var(--good); color: var(--good); }
form { margin: 0; }
label { display: block; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0.85rem 0 0.25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 0.55rem 0.65rem; font: inherit; font-size: 0.95rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
textarea { min-height: 5rem; resize: vertical; }
button {
  font: inherit; font-family: var(--sans); font-size: 0.92rem; cursor: pointer;
  padding: 0.5rem 0.95rem; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: var(--paper);
}
button.secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
button.link {
  background: none; border: none; padding: 0; color: var(--muted);
  text-decoration: underline; font-size: 0.85rem;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; align-items: center; }
/* THE CHUNK BOUNDARY. A real 2px ink border, not a hairline — every card is
   unambiguously a box, which is the whole point of this pass. */
.card {
  border: 2px solid var(--card-border); border-radius: var(--radius-lg);
  background: var(--card-surface); padding: 1rem 1.1rem; margin: 1.25rem 0;
}
.card h3 { font-family: var(--sans); }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.75rem 0; }
th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 600 0.72rem/1.3 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
td.num { text-align: right; white-space: nowrap; }
.pill { font-size: 0.75rem; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--rule); white-space: nowrap; }
.pill-pass { color: var(--good); border-color: var(--good); }
.pill-none { color: var(--muted); }
code, .mono { font: 0.85em ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
footer {
  max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.8rem;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Curriculum prose (the weekly page, tracks, reference pages).
   Phone-first: anything wide scrolls inside its own box; the page itself
   never scrolls sideways. */
.prose { overflow-wrap: break-word; }
.prose pre {
  overflow-x: auto; padding: 0.8rem 0.9rem; border: 1px solid var(--rule);
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--rule) 18%, var(--paper));
  font-size: 0.82rem; line-height: 1.45;
}
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 100%; }
.prose blockquote {
  margin: 0.9rem 0; padding: 0.5rem 0.9rem;
  border-left: 3px solid var(--accent); color: var(--ink);
}
.crumb { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; font-family: var(--sans); }

/* Chunked content pages: each level-2 section of a track, reference page or
   the start letter is its own bordered card, and the intro card carries the
   track's tint (set by .track-tN on the article; neutral where unset). The
   card boundary replaces the source's horizontal rules as the separator. */
.prose .chunk {
  border: 2px solid var(--card-border); border-radius: var(--radius-lg);
  background: var(--card-surface); padding: 1rem 1.15rem; margin: 1.25rem 0;
}
.prose .chunk > h2:first-child { margin-top: 0.25rem; }
.prose .chunk-intro { background: var(--tint, var(--card-surface)); }
.prose .chunk-intro > h1:first-child { margin-top: 0.5rem; }
.source { font-size: 0.8rem; color: var(--muted); margin-top: 2rem; }

/* The weekly worksheet is THE spotlighted chunk — a card like the others,
   holding the rendered WEEKLY.md whole. */
.this-week { margin-top: 1.25rem; }

/* The self-check line. A statement, not a reward: ink, small, sans, no
   icon, no animation, no colour change. Dilip: "He just needs to see he
   can do it on his own once he learns things." */
.selfcheck {
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink);
  border-top: 1px solid var(--rule); padding-top: 0.75rem; margin: 1.25rem 0 0;
}

/* The nine tracks: one bordered, tinted chip each. Warm tints are the
   life-skills family, cool tints the academic family; the icon and the
   title are always ink. */
.tracks { margin-top: 2.5rem; }
.tracks h2 { font-family: var(--sans); }
.track-list {
  list-style: none; padding: 0; margin: 0.75rem 0 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 480px) { .track-list { grid-template-columns: 1fr 1fr; } }
.track-card {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.9rem;
  background: var(--tint, var(--card-surface));
  border: 2px solid var(--card-border); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
}
.track-card:hover, .track-card:focus-visible { text-decoration: underline; }
.track-card:visited { color: var(--ink); }
.track-icon { flex: none; color: var(--ink); }
.track-t1 { --tint: var(--tint-t1); }
.track-t2 { --tint: var(--tint-t2); }
.track-t3 { --tint: var(--tint-t3); }
.track-t4 { --tint: var(--tint-t4); }
.track-t5 { --tint: var(--tint-t5); }
.track-t6 { --tint: var(--tint-t6); }
.track-t7 { --tint: var(--tint-t7); }
.track-t8 { --tint: var(--tint-t8); }
.track-t9 { --tint: var(--tint-t9); }