/* color.css: hue = meaning. Load AFTER style.css. See color.md.
   accent next step | learn classes, lessons, examples | play games, hands-on pieces | pace time
   coach coach notes | good/bad right, wrong | warn traps. Roles (--r-*) keep one hue family in every palette. */

/* ---------- tokens: type scale, spacing, light default hues ---------- */
:root {
  --fs-page: 1.75rem; --fs-sec: 1.2rem; --fs-lead: 1.04rem; --fs-expl: .9rem; --fs-meta: .74rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --learn: #06489c; --play: #762575; --pace: #015766; --coach: #7449a9; --on-tone: #fff;
  --r-concl: #7a5604; --r-ev: #006d61; --r-opp: #6549a3; --r-trig: #973069; --r-qual: #376e00;
  --learn-soft: color-mix(in srgb, var(--learn) 14%, var(--surface));
  --play-soft: color-mix(in srgb, var(--play) 14%, var(--surface));
}
@media (max-width: 720px) { :root { --fs-page: 1.45rem; --fs-sec: 1.12rem; } }
/* dark palettes: default dark hues, dark role set, dark ink on filled hues */
:root:is([data-theme="goth"], [data-theme="crimson"], [data-theme="violet"], [data-theme="emerald"], [data-theme="ocean"],
  [data-theme="gold"], [data-theme="midnight"], [data-theme="ember"], [data-theme="absinthe"], [data-theme="rosegold"], [data-theme="graphite"]) {
  --learn: #abcdfe; --play: #ffa6fc; --pace: #03c6e6; --coach: #c399ff; --on-tone: var(--bg);
  --r-concl: #ffcb70; --r-ev: #50d7c3; --r-opp: #c3affe; --r-trig: #ff98ca; --r-qual: #ace989;
}
/* classic: its accent is blue, so learn moves to violet */
:root:not([data-theme]), :root[data-theme="classic"] { --learn: #5d318f; --play: #8f3d8e; --coach: #851b55; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="classic"] {
    --learn: #c399ff; --play: #ffa6fc; --pace: #03c6e6; --coach: #bec6ff; --on-tone: var(--bg);
    --r-concl: #ffcb70; --r-ev: #50d7c3; --r-opp: #c3affe; --r-trig: #ff98ca; --r-qual: #ace989;
  }
}
/* per palette, only what differs; the comment says which old color collided */
:root:is([data-theme="goth"], [data-theme="crimson"]) { --learn: #80b3fe; --play: #e48de1; --pace: #4edffe; --coach: #d6bcfe; }
:root[data-theme="goth"] { --bad: #ff9277; --bad-soft: #40272b; } /* bad was rose: too near the accent */
:root[data-theme="violet"] { --learn: #80b3fe; --play: #f79643; --pace: #4edffe; --coach: #d6bcfe; }
:root[data-theme="emerald"] { --learn: #9fa9ff; --coach: var(--accent-2);
  --good: #c0e160; --good-soft: #2a3620; --warn: #fbb360; --warn-soft: #373222; } /* good was the accent */
:root[data-theme="ocean"] { --learn: #bec6ff; --pace: #f79643; --coach: var(--accent-2); }
:root[data-theme="gold"] { --warn: #efe670; --warn-soft: #38331d; } /* warn was the accent */
:root[data-theme="midnight"] { --learn: #03c6e6; --play: #e48de1; --pace: #f79643; --coach: var(--accent-2); }
:root[data-theme="absinthe"] { --play: #f79643; }
:root[data-theme="rosegold"] { --bad: #ed68ae; --bad-soft: #3e222f; } /* bad was too near the salmon accent */
:root[data-theme="graphite"] { --learn: #80b3fe; --pace: #4edffe; }
:root:is([data-theme="goth-light"], [data-theme="mint"], [data-theme="peach"]) { --coach: var(--accent-2); }
:root[data-theme="goth-light"] { --bad: #861118; --bad-soft: #f3e3e6; } /* bad was too near the accent */
:root[data-theme="mint"] { --good: #1d5002; --good-soft: #e5ede3; } /* good was the accent */
:root[data-theme="lavender"] { --learn: #2460b7; --coach: #3e3d9c; }
:root[data-theme="sky"] { --learn: #7449a9; --coach: #3e3d9c; }
:root[data-theme="bone"] { --play: #8f3d8e; --coach: #5d318f;
  --bad: #841660; --bad-soft: #f3e5e7; --warn: #816501; --warn-soft: #f4eedd; } /* bad and warn were near the rust accent */

/* ---------- type hierarchy: page title, section, bold lead, small explanation, tiny meta ---------- */
h1 { font-size: var(--fs-page); font-weight: 800; }
h2 { font-size: var(--fs-sec); font-weight: 750; }
.eyebrow { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .1em; color: var(--tone, var(--muted)); }
.why-label { font-size: var(--fs-meta); letter-spacing: .08em; color: var(--tone, var(--muted)); }
.why-label::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.screen-head { font-size: 1.45rem; font-weight: 800; margin-bottom: var(--sp-2); }
.screen-head::before { content: ""; display: block; width: 32px; height: 3px; border-radius: 3px; margin-bottom: var(--sp-3);
  background: var(--tone, var(--learn)); }
.screen-body { font-size: .98rem; max-width: 62ch; color: color-mix(in srgb, var(--ink) 72%, var(--muted)); }
@media (max-width: 420px) { .screen-head { font-size: 1.25rem; } }
ul.points { display: grid; gap: var(--sp-2); }
ul.points li { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--tone, var(--learn)); border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--tone, var(--learn)) 6%, transparent); }
ul.points li strong, .cq-list li strong, .lesson ol.method li strong { font-size: var(--fs-lead); font-weight: 750; line-height: 1.3; color: var(--ink); }
ul.points li span { font-size: var(--fs-expl); line-height: 1.45; color: var(--muted); }
.cq-list { list-style: none; padding: 0; counter-reset: cq; display: grid; gap: var(--sp-3); }
.cq-list li { margin: 0; counter-increment: cq; display: grid; grid-template-columns: 26px 1fr; column-gap: var(--sp-2); }
.cq-list li > * { grid-column: 2; }
.cq-list li::before { content: counter(cq); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; color: var(--learn); background: var(--learn-soft); }

/* ---------- card tones: one hue per card type, shown as a left edge and a faint wash ---------- */
.next-card { --tone: var(--accent); }
.learn-card, .class-card, .lesson, .card:has(> .skill-map), .card:has(> .lesson-list a[href^="#/class/"]),
.card.fold:has(a[href^="#/lesson/"]), .ex-box, .irl, .tip-box, .example { --tone: var(--learn); }
.game-card, .card:has(a[href^="#/game"]), .try-box { --tone: var(--play); }
.time-card, .card:has(> .time-row > .btn) { --tone: var(--pace); }
.coach-card, .notes-list { --tone: var(--coach); }
.then-now, .moment { --tone: var(--good); }
.card { box-shadow: inset 3px 0 0 var(--tone, transparent), var(--shadow);
  background: linear-gradient(165deg, color-mix(in srgb, var(--tone, var(--surface)) 9%, var(--surface)), var(--surface) 58%); }
:root[data-theme]:not([data-theme="classic"]) .card { border-top-color: color-mix(in srgb, var(--tone, var(--line)) 45%, var(--line)); }
:where(.card) .btn:where(:not(.primary)) { border-color: color-mix(in srgb, var(--tone, var(--line)) 45%, var(--line)); color: var(--tone, var(--ink)); }
.card .bar.neutral > i { background: color-mix(in srgb, var(--tone, var(--accent)) 70%, var(--line)); }
/* up next: the one loud card */
.next-card { border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), var(--shadow);
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface) 70%); }
.next-card h2 { font-size: calc(var(--fs-sec) + .22rem); font-weight: 800; }
/* in games the main button wears play, so accent stays "next step" */
:root[data-theme] .card:has(a[href^="#/game"]) .btn.primary { background: var(--play); border-color: var(--play); color: var(--on-tone); box-shadow: none; }
/* coach notes */
.notes-list { border-left: 3px solid var(--coach); border-radius: 0 10px 10px 0; padding: var(--sp-1) var(--sp-3);
  background: color-mix(in srgb, var(--coach) 8%, transparent); }
.notes-list .avatar { background: var(--coach); color: var(--on-tone); }
.eyebrow:has(+ .notes-list) { color: var(--coach); }
/* feedback and learning panels */
.feedback.ok { background: color-mix(in srgb, var(--good) 8%, var(--surface-2)); }
.feedback.no { background: color-mix(in srgb, var(--bad) 8%, var(--surface-2)); }
.irl { border-left-color: var(--learn); background: color-mix(in srgb, var(--learn) 9%, var(--surface)); }
.irl .eyebrow { color: var(--learn); }
.tip-box { background: var(--learn-soft); }
.example { border-left: 3px solid var(--learn); }
.class-link { color: var(--learn); }
.flow-n { background: var(--learn-soft); color: var(--learn); }
/* section color in the nav: Lessons wear learn, Games wear play */
.nav a.on[data-tab="lessons"], .tabbar a.on[data-tab="lessons"] { color: var(--learn); background: color-mix(in srgb, var(--learn) 16%, transparent); }
.nav a.on[data-tab="games"], .tabbar a.on[data-tab="games"] { color: var(--play); background: color-mix(in srgb, var(--play) 16%, transparent); }
.tabbar a.on { border-radius: 10px; }
:root[data-deco]:not([data-deco="off"]) :is(.nav, .tabbar) a.on { text-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent); }
/* chips the app can use by meaning */
.chip.learn { --c: var(--learn); } .chip.play { --c: var(--play); } .chip.pace { --c: var(--pace); } .chip.coach { --c: var(--coach); }
.chip:is(.learn, .play, .pace, .coach) { color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-color: transparent; }
/* pace and play details */
.timer, button.timer { color: var(--pace); border-color: color-mix(in srgb, var(--pace) 50%, var(--line)); }
.time-bar > span { background: var(--pace); }
#game-time { color: var(--pace); }
.sig-target { background: var(--play-soft); color: var(--play); }

/* ---------- class player: interactive pieces (play) vs examples (learn) ---------- */
.try-box { border: 1.5px solid color-mix(in srgb, var(--play) 55%, var(--line)); background: color-mix(in srgb, var(--play) 8%, var(--surface)); }
.ex-box { border-left: 3px solid var(--learn); }
.tap { background: color-mix(in srgb, var(--play) 10%, transparent); box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--play) 60%, transparent); }
.tap:not(.role):hover { background: color-mix(in srgb, var(--play) 22%, transparent); }
.tap:focus-visible { outline: 2px solid var(--play); outline-offset: 1px; }
.tap.missed { background: color-mix(in srgb, var(--bad) 16%, transparent); box-shadow: inset 0 -1.5px 0 var(--bad); }
.bm-row.ok, .bm-row.no { padding-left: 10px; box-shadow: inset 3px 0 0 var(--k); background: color-mix(in srgb, var(--k) 8%, transparent); }
.bm-row.ok { --k: var(--good); } .bm-row.no { --k: var(--bad); }
.pill { border-color: color-mix(in srgb, var(--tone, var(--learn)) 55%, var(--line)); background: var(--surface-2); font-weight: 600; }
.arr { color: var(--tone, var(--learn)); }

/* ---------- argument roles: hue and line style both differ ---------- */
.role { -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: none; color: inherit; background: none;
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.role-conclusion { --r: var(--r-concl); background: color-mix(in srgb, var(--r) 22%, transparent); text-decoration-line: underline;
  text-decoration-style: solid; text-decoration-thickness: 3px; font-weight: 700; }
.role-evidence { --r: var(--r-ev); background: color-mix(in srgb, var(--r) 16%, transparent); text-decoration-line: underline; text-decoration-style: solid; }
.role-context { --r: var(--muted); color: var(--muted); text-decoration-line: underline; text-decoration-style: dotted; }
.role-opposing { --r: var(--r-opp); background: color-mix(in srgb, var(--r) 16%, transparent); text-decoration-line: underline; text-decoration-style: dashed; }
.role-trigger { --r: var(--r-trig); box-shadow: inset 0 0 0 1.5px var(--r); font-weight: 700; padding: 0 3px; }
.role-qualifier { --r: var(--r-qual); text-decoration-line: underline; text-decoration-style: wavy; font-weight: 600; }
.role { text-decoration-color: var(--r); }
.role-legend .role { padding: 1px 6px; }
/* reading help speaks the same color language */
.sig-c { text-decoration-color: var(--r-concl); }
.sig-p { text-decoration-color: var(--r-ev); }
.sig-t { color: inherit; background: color-mix(in srgb, var(--r-opp) 18%, transparent); }
/* the map: color only, layout stays in style.css */
.am-box, .am-gap { --r: var(--muted); border-color: var(--r); background: color-mix(in srgb, var(--r) 12%, var(--surface)); }
.am-box .am-label, .am-gap .am-label { color: var(--r); }
.am-concl { --r: var(--r-concl); border-width: 2px; font-weight: 650; }
.am-ev { --r: var(--r-ev); }
.am-ctx { background: transparent; }
.am-opp { --r: var(--r-opp); border-style: dashed; }
.am-gap { --r: var(--ink); border-color: color-mix(in srgb, var(--ink) 55%, transparent); background: transparent; font-style: italic; }

/* ---------- skill map (svg) ---------- */
.sm-node .sm-fill { fill: var(--learn); }
.sm-node.read rect:first-child { stroke: color-mix(in srgb, var(--learn) 65%, var(--line)); }
.sm-node.tested rect:first-child { stroke: var(--warn); }
.sm-node.next rect:first-child { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.sm-node.passed .sm-fill { fill: var(--good); }
.sm-node:hover rect:first-child { fill: var(--learn-soft); }

/* ---------- contrast vs --surface (WCAG; text needs 4.5, edges and icons 3) ----------
   palette      learn play pace coach | roles concl ev opp trig qual | changed
   goth         8.5 7.9 11.5 10.8 | 12.1 10.2 9.4 9.1 12.7 | bad 8.3
   crimson      8.6 8.0 11.6 10.9 | 12.3 10.4 9.5 9.3 12.9
   violet       8.5 8.2 11.6 10.8 | 12.2 10.3 9.4 9.2 12.8
   emerald      8.1 10.2 8.6 12.9 | 11.8 10.0 9.2 8.9 12.5 | good 12.0 warn 9.9
   ocean        10.7 10.2 7.9 7.7 | 11.8 9.9 9.1 8.9 12.4
   gold         11.1 10.4 8.8 8.0 | 12.0 10.2 9.3 9.1 12.7 | warn 13.9
   midnight     8.5 7.6 7.8 10.8  | 11.6 9.8 9.0 8.8 12.2
   ember        11.1 10.5 8.8 8.0 | 12.1 10.2 9.4 9.1 12.7
   absinthe     10.7 7.8 8.5 7.7  | 11.6 9.8 9.0 8.8 12.2
   rosegold     11.0 10.3 8.7 8.0 | 12.0 10.1 9.3 9.0 12.6 | bad 6.1
   graphite     8.0 9.9 10.9 7.6  | 11.5 9.7 8.9 8.7 12.1
   classic dark 7.3 9.5 8.0 10.0  | 11.0 9.3 8.6 8.3 11.6
   goth-light   8.4 8.9 8.0 7.1   | 6.4 6.1 6.7 6.9 6.0 | bad 9.7
   lavender     5.9 8.9 8.0 8.7   | 6.5 6.1 6.7 6.9 6.0
   mint         8.6 9.0 8.1 5.3   | 6.5 6.2 6.8 7.0 6.1 | good 9.4
   bone         8.5 6.4 8.0 8.9   | 6.5 6.1 6.8 7.0 6.0 | bad 9.1 warn 5.4
   sky          6.3 9.0 8.1 8.8   | 6.5 6.1 6.8 7.0 6.1
   peach        8.4 8.8 7.9 7.1   | 6.4 6.0 6.7 6.9 6.0
   classic      9.1 6.5 8.2 9.2   | 6.6 6.2 6.9 7.1 6.2
   Worst on tinted fills: hue text on its own 10% wash 4.7 (mint coach, bone play); --muted on a 16% wash 4.7 (mint);
   role label on a 12% map box 5.0; --on-tone on a filled hue 5.4 (mint). All pass 4.5. */