/* GLOSS — the learning page, in the Anatomy Atelier language:
   warm paper, serif display, pill nav, library | stage | card workspace. */

:root {
  --ink: #2f2a27;
  --muted: #8d847c;
  --canvas: #f7f0e7;
  --paper: rgba(255, 251, 244, 0.82);
  --line: rgba(117, 91, 70, 0.18);
  --coral: #eb7c6b;
  --lavender: #8d6bcc;
  --sage: #769d74;
  --gold: #d9a441;
  --shadow: 0 18px 48px rgba(87, 62, 43, 0.06);
  --body-2: #6e655f;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --hand: "Bradley Hand", "Comic Sans MS", cursive;
}

/* dark mode: same room, lamps off. Warm ink on warm dark, accents lifted
   so they still read against the dark surfaces. */
html[data-theme="dark"] {
  --ink: #efe7dd;
  --muted: #9a9187;
  --canvas: #171513;
  --paper: rgba(38, 34, 31, 0.82);
  --line: rgba(216, 190, 160, 0.16);
  --coral: #f0907e;
  --lavender: #a98ce0;
  --sage: #8fb88c;
  --gold: #e0b45c;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  --body-2: #c8beb2;
}

* { box-sizing: border-box; margin: 0; }
html { background: #e9ddd0; }
html[data-theme="dark"] { background: #100e0d; }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 48% 22%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(135deg, #f7f1e8, #fdf9f2 48%, #f2e9dd);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  min-height: 100vh;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 48% 18%, rgba(120, 96, 74, 0.16), transparent 38%),
    linear-gradient(135deg, #171513, #1d1a17 48%, #141210);
}

/* theme toggle */
.theme-btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.28); color: var(--muted); font-size: 15px;
}
html[data-theme="dark"] .theme-btn { background: rgba(255,255,255,.06); }
.theme-btn:hover { color: var(--ink); border-color: var(--coral); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { cursor: pointer; }

.app-shell { min-height: 100vh; padding: 20px 24px 24px; display: flex; flex-direction: column; }

/* ---------------- topbar ---------------- */
.topbar {
  height: 64px; max-width: 1720px; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(200px, 1fr);
  align-items: center; gap: 22px;
}
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--ink); }
.brand strong { font: 500 34px/1 var(--serif); letter-spacing: -0.03em; }
.brand sup { color: var(--coral); font: 400 13px var(--sans); padding-left: 2px; }
.brand em { color: var(--lavender); font: italic 12px var(--hand); white-space: nowrap; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 2px; }
.main-nav a {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 999px;
  text-decoration: none; color: var(--ink); font-size: 13px;
}
.main-nav a.active { background: rgba(238, 124, 106, .075); box-shadow: inset 0 0 0 1px rgba(215, 112, 91, .12); }
.top-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.search-box {
  width: min(100%, 250px); height: 42px; padding: 0 16px;
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.28); color: var(--muted);
}
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-box input::placeholder { color: #a49b93; }

/* ---------------- workspace ---------------- */
.workspace {
  max-width: 1720px; width: 100%;
  height: max(620px, calc(100vh - 122px));
  margin: 12px auto 0;
  display: grid; grid-template-columns: 285px minmax(520px, 1fr) 340px; gap: 18px;
}
.library, .stage, .unit-card {
  border: 1px solid var(--line); border-radius: 26px; background: var(--paper);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.75);
  min-height: 0;
}

/* ---------------- library ---------------- */
.library { padding: 16px 14px 14px; display: flex; flex-direction: column; }
.panel-heading {
  display: flex; align-items: baseline; justify-content: space-between; padding: 0 5px 12px;
  text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 600;
}
.panel-heading small { color: var(--muted); letter-spacing: .08em; }
.unit-list { display: flex; flex-direction: column; gap: 4px; overflow: auto; scrollbar-width: none; min-height: 0; }
.unit-item {
  width: 100%; min-height: 62px;
  display: grid; grid-template-columns: 46px 1fr 26px; align-items: center; gap: 10px;
  text-align: left; padding: 7px 10px;
  border: 1px solid transparent; border-radius: 15px; background: transparent;
}
.unit-item.active {
  background: rgba(253,234,226,.72);
  border-color: color-mix(in srgb, var(--acc, var(--coral)), transparent 55%);
  box-shadow: 0 8px 20px rgba(195,91,70,.07);
}
.unit-glyph {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #fff, color-mix(in srgb, var(--acc, var(--coral)), white 82%));
  box-shadow: inset 0 0 0 1px rgba(121,86,67,.09);
  font: 500 15px var(--serif); color: color-mix(in srgb, var(--acc, var(--coral)), #5f4034 30%);
}
.unit-item b { display: block; font: 500 15.5px/1.12 var(--serif); }
.unit-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; letter-spacing: .04em; }
.unit-item .u-state { font-size: 12px; text-align: center; }
.u-state.held { color: var(--sage); }
.u-state.ready { color: var(--coral); }
.u-state.fail { color: #c85a4a; }
.u-state.locked { color: #cfc4b8; }

/* ---------------- stage ---------------- */
.stage {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 55% 40%, rgba(255,255,255,.92), rgba(255,250,242,.72) 45%, rgba(246,236,224,.7)),
    var(--paper);
}
.stage:after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(124,82,51,.04); border-radius: 26px; }

.stage-cover {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 56px 90px; position: relative; z-index: 1;
}
.stage-desc { font: 500 clamp(19px, 1.7vw, 25px)/1.5 var(--serif); max-width: 560px; }
.stage-hint { margin-top: 26px; color: var(--muted); font-size: 12px; }
.stage-hint b { color: var(--coral); }

/* the era strip: the axis sits on top, labels hang below it angled down-right
   so several can crowd together without touching the prose above */
.era-strip { position: relative; height: calc(120px + (var(--lanes, 1) - 1) * 26px); margin: 26px 0 0; max-width: 620px; }
.era-seg {
  position: absolute; top: 0; height: 15px;
  border-left: 1px solid rgba(117,91,70,.28); border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 8px; letter-spacing: .14em; color: var(--muted);
  padding-left: 6px; overflow: hidden; white-space: nowrap;
}
.era-mark { position: absolute; top: -3px; }
.era-mark::after {
  content: ''; position: absolute; left: -4px; top: 0;
  width: 7px; height: 7px; background: var(--coral); transform: rotate(45deg); border-radius: 1.5px;
}
.em-label {
  position: absolute; top: 11px; left: 4px;
  transform-origin: left top; transform: rotate(38deg);
  white-space: nowrap; font-family: var(--sans); font-size: 10px; line-height: 1;
  color: var(--muted); letter-spacing: .01em;
}
.em-label b { color: var(--coral); font-weight: 600; margin-right: 4px; }

.stage-caption {
  position: absolute; left: 24px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
}
.stage-caption strong { color: var(--ink); font: 500 15px var(--serif); text-transform: none; letter-spacing: 0; }
.stage-nav { position: absolute; right: 20px; bottom: 16px; z-index: 3; display: flex; gap: 6px; }
.stage-nav a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(255,252,247,.88);
  color: var(--muted); font-size: 16px; text-decoration: none;
  box-shadow: 0 5px 14px rgba(65,45,32,.08);
}
.stage-nav a:hover { color: var(--ink); }
.stage-nav a.off { opacity: .3; pointer-events: none; }

/* chat inside the stage */
.stage-chat { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 58px; position: relative; z-index: 1; min-height: 0; }
.chat-mode { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 9px; }
.chat-mode a { color: var(--coral); text-decoration: none; }
#chat {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px;
  padding: 14px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255,255,255,.45); scrollbar-width: thin;
}
.msg { font-size: 13px; line-height: 1.55; padding: 9px 13px; border-radius: 13px; max-width: 88%; }
.msg.tutor { background: #fffdf8; border: 1px solid var(--line); align-self: flex-start; box-shadow: 0 4px 12px rgba(87,62,43,.05); }
.msg.user { background: linear-gradient(110deg, #ed8a72, #e87868); color: #fff; align-self: flex-end; box-shadow: 0 6px 14px rgba(208,90,70,.18); }
.msg.thinking { color: var(--muted); }
.msg.verdict-msg { align-self: center; font: 600 11px var(--sans); letter-spacing: .1em; color: var(--sage); text-transform: uppercase; }
#chat-input-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
#chat-input {
  flex: 1; font: 13px/1.5 var(--sans); padding: 10px 13px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(255,255,255,.7); resize: vertical; outline: none;
  color: var(--ink);
}
#chat-input::placeholder { color: var(--muted); }
#chat-input:focus { border-color: var(--coral); }
.p-btn {
  min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.5); font-size: 12px;
}
.tutor-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.mode-row { display: flex; gap: 8px; margin-top: 10px; }

/* ---------------- unit card ---------------- */
.unit-card { padding: 21px 20px 17px; overflow: auto; scrollbar-width: none; }
.info-kicker {
  display: flex; align-items: center; gap: 7px; color: #795c55;
  text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 600;
}
.info-kicker i { color: var(--coral); font-style: normal; }
.unit-card h1 { margin-top: 14px; font: 500 clamp(28px, 2.1vw, 38px)/1 var(--serif); letter-spacing: -.02em; }
.unit-card > em { display: block; margin-top: 8px; color: var(--lavender); font: italic 13px var(--hand); }
.unit-desc { margin: 18px 0 14px; font: 500 14.5px/1.45 var(--serif); }
.rule { height: 1px; background: var(--line); }
.unit-card h2 {
  margin: 15px 0 10px; font: italic 500 13px var(--serif);
  text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-family: var(--sans); font-style: normal; font-weight: 600;
}
.key-facts { display: flex; flex-direction: column; gap: 10px; }
.key-facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; }
.key-facts dt { font: 500 13px var(--serif); display: flex; gap: 7px; }
.key-facts dt i { color: var(--coral); font-style: normal; width: 14px; }
.key-facts dd { color: var(--muted); font: 500 12px/1.35 var(--serif); }
.gate-dots { display: flex; gap: 6px; }
.gate-dot {
  font-size: 10.5px; padding: 2.5px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.4);
}
.gate-dot.on { border-color: var(--sage); color: var(--sage); background: rgba(118,157,116,.08); }
.contested-note, .read-note { margin-top: 13px; display: flex; gap: 9px; padding: 11px; border-radius: 12px; }
.contested-note { background: rgba(142,109,197,.065); color: #6d568f; }
.read-note { background: rgba(198,154,94,.09); color: #86663c; }
.contested-note p, .read-note p { font: 500 12px/1.4 var(--serif); }
.contested-note b, .read-note b { display: block; margin-bottom: 2px; color: var(--ink); }
.read-note a { color: inherit; }
.read-note .free-link { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--coral); text-decoration: none; }
.lesson-button {
  width: 100%; min-height: 42px; margin-top: 15px; padding: 0 16px;
  display: flex; justify-content: space-between; align-items: center;
  border: 0; border-radius: 10px;
  background: linear-gradient(110deg, #ed8a72, #e87868); color: white;
  box-shadow: 0 9px 20px rgba(208,90,70,.16); font-size: 12px; font-weight: 600;
}
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.action-grid button {
  min-height: 36px; border: 1px solid #c9b3df; border-radius: 9px;
  background: rgba(255,255,255,.18); color: #8062b6; font-size: 11px;
}
.action-grid button:nth-child(2) { border-color: #bdcfaa; color: #789067; }
.blocked-card {
  margin-top: 15px; padding: 12px 14px; border-radius: 12px;
  background: rgba(200,90,74,.06); color: #9c5344; font: 500 13.5px/1.55 var(--serif);
}
.blocked-card b { display: block; margin-bottom: 3px; color: var(--ink); }
.blocked-card a { color: var(--coral); text-decoration: none; font-weight: 600; }
.blocked-card .blocked-go { display: block; margin-top: 9px; font-size: 12.5px; }

/* the prerequisite chain */
.chain-note { margin: 0 0 9px; color: var(--muted); font: 500 12.5px/1.45 var(--serif); }
.chain-note.soft-note { margin-top: 13px; }
.chain-row { display: flex; gap: 9px; align-items: baseline; padding: 6px 0; }
.chain-tick {
  flex: none; width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; font-size: 9.5px; font-weight: 700;
  background: rgba(117,91,70,.08); color: var(--muted);
}
.chain-row.done .chain-tick { background: rgba(118,157,116,.16); color: var(--sage); }
.chain-row.open .chain-tick { background: rgba(235,124,107,.13); color: var(--coral); }
.chain-row a { font: 600 13.5px var(--serif); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.chain-row a:hover { color: var(--coral); border-color: var(--coral); }
.chain-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.4; }
html[data-theme="dark"] .chain-tick { background: rgba(255,255,255,.06); }

/* source alignment */
.align-chip {
  display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 7px;
  border-radius: 999px; font: 600 10.5px var(--sans); vertical-align: 1px; margin-right: 6px;
}
.align-chip.a-high { background: rgba(118,157,116,.14); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(118,157,116,.35); }
.align-chip.a-mid { background: rgba(217,164,65,.13); color: #a87c22; box-shadow: inset 0 0 0 1px rgba(217,164,65,.35); }
.align-chip.a-low { background: rgba(235,124,107,.12); color: #c26250; box-shadow: inset 0 0 0 1px rgba(235,124,107,.35); }
.align-chip.a-far { background: rgba(200,90,74,.14); color: #a8402f; box-shadow: inset 0 0 0 1px rgba(200,90,74,.4); }
.align-chip.a-none { background: rgba(117,91,70,.07); color: var(--muted); }
details.align-list { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 11px; }
details.align-list summary {
  cursor: pointer; text-transform: uppercase; letter-spacing: .13em;
  font-size: 10px; font-weight: 600; color: #795c55;
}
.align-note { margin: 9px 0 4px; color: var(--muted); font: italic 500 12px/1.45 var(--serif); }
.align-row { padding: 9px 0 8px; border-bottom: 1px solid var(--line); }
.align-row:last-child { border-bottom: 0; }
.align-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.align-head b { font: 600 13.5px var(--serif); }
.align-head a.align-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.align-head a.align-link:hover { color: var(--coral); border-color: var(--coral); }
.align-head em { color: var(--muted); font: italic 11px var(--sans); margin-left: 2px; }
.align-detail { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.45; }
.align-detail .agree { color: #6a8b68; }
.align-detail .differ { color: #b06a53; }

/* history inside the card */
details.hist {
  border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.35);
  padding: 9px 12px; margin-bottom: 7px; font-size: 12px;
}
details.hist summary {
  cursor: pointer; color: var(--muted); list-style: none;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
details.hist summary::-webkit-details-marker { display: none; }
details.hist[open] summary { margin-bottom: 8px; }
.s-mode {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2.5px 9px; border-radius: 999px;
}
.s-mode.learn { background: rgba(118,157,116,.13); color: var(--sage); }
.s-mode.exam { background: rgba(235,124,107,.13); color: #c26250; }
.s-when { font-weight: 600; color: var(--ink); font-size: 11.5px; }
.s-turns { color: var(--muted); font-size: 10.5px; }
.s-resume {
  margin-left: auto; min-height: 26px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.55);
  font-size: 10.5px; font-weight: 600; color: var(--ink);
}
.s-resume:hover { border-color: var(--coral); color: var(--coral); }
.vbadge { font-size: 9.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; letter-spacing: .05em; }
.vbadge.pass { background: rgba(118,157,116,.14); color: var(--sage); }
.vbadge.fail { background: rgba(200,90,74,.12); color: #c85a4a; }
.vbadge.none { background: rgba(117,91,70,.08); color: var(--muted); font-weight: 500; }
.score { font-weight: 700; margin-left: 4px; }
.rep { margin-top: 7px; line-height: 1.5; color: var(--body-2); }
.rep b { color: var(--ink); }
.hist-chat { margin-top: 8px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: rgba(255,255,255,.5); border-radius: 10px; border: 1px solid var(--line); }
.ev { padding-left: 16px; font: 500 12.5px/1.55 var(--serif); color: var(--body-2); }

/* ---------------- the map view, in daylight ---------------- */
#graph-wrap { position: relative; }
#graph { width: 100%; height: 100%; display: block; cursor: grab; }
.subject-label { font: 600 13px var(--sans); letter-spacing: .2em; fill: #c4b5a3; }
.link { stroke: #75513f; stroke-opacity: .12; stroke-width: 1px; fill: none; }
.link.soft { stroke-dasharray: 4 4; stroke-opacity: .08; }
.link.dim { stroke-opacity: .04; }
.link.hi { stroke: var(--coral); stroke-opacity: .7; stroke-width: 1.6px; }
.link.done { stroke: var(--gold); stroke-opacity: .5; stroke-width: 1.5px; }
.node circle.core { stroke-width: 1.2px; }
.node.m0 circle.core { fill: #efe6d9; stroke: #d3c4b1; }
.node.m1 circle.core { fill: var(--gold); stroke: var(--gold); }
.node.m2 circle.core { fill: var(--coral); stroke: var(--coral); }
.node.m3 circle.core { fill: var(--lavender); stroke: var(--lavender); }
.node circle.frontier-ring { fill: none; stroke: var(--sage); stroke-width: 1.8px; }
.node circle.contested-ring { fill: none; stroke: var(--lavender); stroke-width: 1.2px; stroke-dasharray: 3 3; }
.node circle.fail-dot { fill: #c85a4a; stroke: #fdf7ee; stroke-width: 1.5px; }
.node text { font: 10.5px var(--sans); fill: #7c7267; }
.node.dim { opacity: .16; }
.node.selected circle.core { stroke: var(--ink); stroke-width: 2px; }
.node.next circle.frontier-ring { animation: next-pulse 1.8s ease-in-out infinite; stroke-width: 2.6px; }
.node.next text { fill: var(--ink); font-weight: 700; }
@keyframes next-pulse { 0%,100% { stroke-opacity: .95; } 50% { stroke-opacity: .3; } }
#legend {
  position: absolute; left: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 10px; letter-spacing: .06em; color: var(--muted);
  background: rgba(255,252,247,.85); padding: 8px 12px; border-radius: 11px; border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.dot.m0 { background: #efe6d9; border: 1px solid #d3c4b1; }
.dot.m1 { background: var(--gold); } .dot.m2 { background: var(--coral); } .dot.m3 { background: var(--lavender); }
.dot.ring-ready { background: none; border: 2px solid var(--sage); }
.dot.ring-contested { background: none; border: 1.5px dashed var(--lavender); }
.dot.dot-fail { background: #c85a4a; }
#tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: rgba(255,252,247,.96); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 12px; font-size: 12px; max-width: 260px; box-shadow: 0 12px 28px rgba(83,59,42,.14);
}
#tooltip .t-name { font: 600 14px var(--serif); }
#tooltip .t-sub { font-size: 9px; letter-spacing: .1em; color: var(--muted); margin-top: 2px; text-transform: uppercase; }
#tooltip .t-mastery { margin-top: 4px; color: var(--body-2); font-size: 11px; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 240px 1fr; }
  .unit-card { display: none; }
}
@media (max-width: 780px) {
  .workspace { display: flex; flex-direction: column; height: auto; }
  .library { max-height: 300px; }
  .stage { min-height: 480px; }
  .unit-card { display: block; }
}

/* ---------------- dark mode overrides ----------------
   Only the surfaces that hard-code a light value; everything else
   already rides on the tokens above. */
html[data-theme="dark"] {
  .library, .stage, .unit-card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); }
  .search-box { background: rgba(255,255,255,.05); }
  .search-box input::placeholder { color: #6d655d; }
  .main-nav a.active { background: rgba(240,144,126,.12); box-shadow: inset 0 0 0 1px rgba(240,144,126,.22); }

  .unit-item.active { background: rgba(240,144,126,.11); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
  .unit-glyph {
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.10), color-mix(in srgb, var(--acc, var(--coral)), transparent 78%));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    color: color-mix(in srgb, var(--acc, var(--coral)), white 22%);
  }
  .u-state.locked { color: #4e463f; }

  .stage {
    background:
      radial-gradient(circle at 55% 40%, rgba(255,255,255,.045), rgba(255,255,255,.015) 45%, transparent),
      var(--paper);
  }
  .stage:after { box-shadow: inset 0 0 90px rgba(0,0,0,.28); }
  .stage-nav a { background: rgba(255,255,255,.05); box-shadow: none; }

  #chat { background: rgba(0,0,0,.18); }
  .msg.tutor { background: rgba(255,255,255,.05); box-shadow: none; }
  #chat-input { background: rgba(0,0,0,.22); }
  .p-btn, .s-resume { background: rgba(255,255,255,.06); }
  .gate-dot { background: rgba(255,255,255,.04); }
  .gate-dot.on { background: rgba(143,184,140,.13); }
  .contested-note { background: rgba(169,140,224,.10); color: #c3aef0; }
  .contested-note b, .read-note b { color: var(--ink); }
  .read-note { background: rgba(224,180,92,.10); color: #d8bb84; }
  .blocked-card { background: rgba(240,144,126,.10); color: #eaa08e; }
  .action-grid button { background: rgba(255,255,255,.04); border-color: rgba(169,140,224,.35); color: #b79ce8; }
  .action-grid button:nth-child(2) { border-color: rgba(143,184,140,.35); color: #9cc199; }

  details.hist { background: rgba(255,255,255,.035); }
  .hist-chat { background: rgba(0,0,0,.2); }
  .s-mode.learn { background: rgba(143,184,140,.14); }
  .s-mode.exam { background: rgba(240,144,126,.14); }
  .align-chip.a-high { background: rgba(143,184,140,.14); color: #9cc199; }
  .align-chip.a-mid { background: rgba(224,180,92,.14); color: #dcb96a; }
  .align-chip.a-low { background: rgba(240,144,126,.14); color: #f0a291; }
  .align-chip.a-far { background: rgba(219,106,86,.18); color: #ec9280; }
  .align-chip.a-none { background: rgba(255,255,255,.05); }
  .align-detail .agree { color: #90b98d; }
  .align-detail .differ { color: #e0a08c; }

  /* the graph, at night */
  .subject-label { fill: #4f463d; }
  .link { stroke: #d8bea0; stroke-opacity: .13; }
  .node.m0 circle.core { fill: #2c2723; stroke: #4a423a; }
  .node text { fill: #948a7f; }
  .node.selected circle.core { stroke: #fff; }
  #legend { background: rgba(28,25,22,.88); }
  .dot.m0 { background: #2c2723; border-color: #4a423a; }
  #tooltip { background: rgba(32,28,25,.96); box-shadow: 0 12px 28px rgba(0,0,0,.5); }
  .node circle.fail-dot { stroke: #1b1815; }
}

/* ---------------- the whole-map modal ---------------- */
.graph-modal[hidden] { display: none !important; }
.graph-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 26px; }
.graph-backdrop { position: absolute; inset: 0; background: rgba(52,39,30,.30); backdrop-filter: blur(7px); }
html[data-theme="dark"] .graph-backdrop { background: rgba(0,0,0,.55); }
.graph-panel {
  position: relative; width: min(1500px, 100%); height: min(900px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 26px; background: var(--paper);
  box-shadow: 0 30px 90px rgba(63,42,28,.28), inset 0 1px 0 rgba(255,255,255,.4);
  animation: gm-in .28s cubic-bezier(.2,.85,.3,1);
}
html[data-theme="dark"] .graph-panel { background: #201d1a; }
@keyframes gm-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.graph-head {
  flex: none; display: flex; align-items: center; gap: 20px;
  padding: 17px 22px 15px; border-bottom: 1px solid var(--line);
}
.graph-head h2 { font: 500 22px var(--serif); margin-top: 3px; }
.graph-stats { margin-left: auto; display: flex; gap: 20px; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.graph-stats b { font: 600 19px var(--serif); color: var(--ink); margin-right: 5px; }
.graph-stats .gs-weak b { color: #c85a4a; }
.graph-close {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted);
}
.graph-close:hover { color: var(--ink); border-color: var(--coral); }
.graph-stage {
  flex: 1; position: relative; min-height: 0;
  background: radial-gradient(circle at 52% 45%, rgba(255,255,255,.55), transparent 60%);
}
html[data-theme="dark"] .graph-stage { background: radial-gradient(circle at 52% 45%, rgba(255,255,255,.035), transparent 60%); }
.graph-hint {
  position: absolute; right: 16px; bottom: 14px;
  font-size: 10px; letter-spacing: .08em; color: var(--muted);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line);
}

/* ---------------- locked units ---------------- */
.unit-item.is-locked { opacity: .42; }
.unit-item.is-locked:hover { opacity: .62; }
.unit-item.is-locked .unit-glyph { background: rgba(117,91,70,.07); color: var(--muted); box-shadow: none; }
html[data-theme="dark"] .unit-item.is-locked .unit-glyph { background: rgba(255,255,255,.04); }
.unit-item.is-locked b { font-weight: 400; }
.u-state.locked { font-size: 10px; opacity: .8; }

.stage-locked { color: #b06a53; }
.stage-locked a { color: var(--coral); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--coral); }

.locked-actions { opacity: .45; margin-top: 15px; }
.locked-actions button[disabled] { cursor: not-allowed; filter: grayscale(1); }
.locked-actions .action-grid button:last-child { opacity: 1; filter: none; cursor: pointer; }
.blocked-go {
  display: block; margin-top: 13px; padding: 10px 14px; border-radius: 10px;
  background: rgba(235,124,107,.08); border: 1px solid rgba(235,124,107,.25);
  color: var(--coral); text-decoration: none; font-size: 12.5px; font-weight: 600; text-align: center;
}
.blocked-go:hover { background: rgba(235,124,107,.14); }

/* ---------------- unit card, minimal ---------------- */
.unit-card { padding: 24px 22px 26px; }
.uc-meta { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.unit-card h1 { margin: 9px 0 5px; font: 500 30px/1.05 var(--serif); letter-spacing: -.02em; }
.uc-sub { font: italic 12.5px var(--serif); color: var(--muted); margin-bottom: 18px; }
.uc-contested { color: var(--lavender); font-style: normal; font-weight: 600; }
.unit-card .gate-dots { margin: 0 0 18px; }

.uc-locked {
  padding: 12px 14px; border-radius: 11px; margin-bottom: 10px;
  background: rgba(200,90,74,.06); font: 500 13px/1.5 var(--serif); color: #9c5344;
}
html[data-theme="dark"] .uc-locked { background: rgba(240,144,126,.09); color: #e0a08c; }
.uc-locked b { display: block; margin-bottom: 3px; color: var(--ink); font-family: var(--sans); font-size: 11px; letter-spacing: .1em; }
.uc-locked a { color: var(--coral); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--coral); }

.unit-card .lesson-button { margin-top: 0; }
.uc-read {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6;
}
.uc-read > span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 9px; }
.uc-read a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.uc-read a:hover { color: var(--coral); border-color: var(--coral); }
.uc-read .free-link { border: 0; color: var(--muted) !important; font-size: 11px; margin-left: 7px; }

.uc-fold { border-top: 1px solid var(--line); }
.uc-fold summary {
  cursor: pointer; list-style: none; padding: 12px 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.uc-fold summary::-webkit-details-marker { display: none; }
.uc-fold summary::before { content: '+'; color: var(--coral); font-size: 13px; width: 10px; }
.uc-fold[open] summary::before { content: '−'; }
.uc-fold summary:hover { color: var(--ink); }
.uc-fold summary i { margin-left: auto; font-style: normal; opacity: .7; letter-spacing: 0; }
.uc-fold > *:not(summary) { margin-bottom: 12px; }
.uc-fold .ev { margin-bottom: 12px; }
.unit-card h2, .unit-card .rule, .unit-card .key-facts,
.unit-card .info-kicker, .unit-card .unit-desc,
.unit-card .contested-note, .unit-card .read-note { display: none; }

/* breathing room between the reading line and the folds */
.uc-read { margin-bottom: 26px; padding-bottom: 4px; }
.uc-read + .uc-fold { border-top-width: 1px; }
.uc-fold .ev li { margin-bottom: 5px; }

/* ---------------- library toggle + custom units ---------------- */
.lib-toggle { display: flex; gap: 3px; padding: 2px; margin-bottom: 12px; background: rgba(117,91,70,.07); border-radius: 999px; }
html[data-theme="dark"] .lib-toggle { background: rgba(255,255,255,.05); }
.lib-toggle button {
  flex: 1; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent;
  font-size: 11.5px; color: var(--muted); letter-spacing: .02em;
}
.lib-toggle button.active { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(87,62,43,.08); }
html[data-theme="dark"] .lib-toggle button.active { background: rgba(255,255,255,.09); }
.new-unit-btn {
  margin-top: 10px; min-height: 40px; border: 1px dashed var(--line2); border-radius: 13px;
  background: transparent; color: var(--coral); font-size: 12.5px; font-weight: 600;
}
.new-unit-btn:hover { background: rgba(235,124,107,.07); border-style: solid; }
.lib-empty { padding: 22px 8px; color: var(--muted); font: 500 12.5px/1.6 var(--serif); }
.glyph-custom { font-size: 16px !important; }
.uc-body { font: 500 13.5px/1.6 var(--serif); color: var(--body-2); }
.src-why { margin-top: 3px; font: 500 12px/1.45 var(--serif); color: var(--body-2); }
.align-row .free-link { display: inline-block; margin-top: 5px; font-size: 11px; color: var(--coral); text-decoration: none; }

/* the builder */
.builder-panel { width: min(760px, 100%); height: auto; max-height: min(680px, 100%); }
.builder-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.kind-row { display: flex; gap: 7px; flex-wrap: wrap; }
.kind-btn {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; font-size: 12px; color: var(--muted);
}
.kind-btn.active { border-color: var(--coral); color: var(--coral); background: rgba(235,124,107,.07); }
#builder-input {
  min-height: 220px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.5); resize: vertical; font: 13.5px/1.6 var(--sans); outline: none;
}
html[data-theme="dark"] #builder-input { background: rgba(0,0,0,.22); }
#builder-input:focus { border-color: var(--coral); }
.builder-foot { display: flex; align-items: center; gap: 18px; }
.builder-note { flex: 1; font: italic 500 12px/1.5 var(--serif); color: var(--muted); }
.builder-foot .lesson-button { width: auto; padding: 0 26px; margin: 0; }
.builder-working { padding: 40px 10px; text-align: center; }
.builder-working b { display: block; font: 500 22px var(--serif); margin-bottom: 8px; }
.builder-working p { color: var(--muted); font-size: 13px; min-height: 20px; }
.builder-working small { display: block; margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bw-spin {
  width: 42px; height: 42px; margin: 0 auto 18px; border-radius: 50%;
  border: 1px dashed var(--coral); animation: bw-orbit 2.4s linear infinite;
}
@keyframes bw-orbit { to { transform: rotate(360deg); } }
.kind-hint { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: -4px; }

/* ---------------- build job tray ---------------- */
#job-tray { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 320px; display: flex; flex-direction: column; gap: 10px; }
.job {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  background: var(--paper); backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(63,42,28,.18);
}
html[data-theme="dark"] .job { background: #232019; }
.job-head { display: flex; align-items: baseline; gap: 8px; }
.job-head b { font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.job.is-done .job-head b { color: var(--sage); }
.job.is-error .job-head b { color: #c85a4a; }
.job-label { flex: 1; font: 500 13px var(--serif); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-clock { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.job-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.job-steps li { font-size: 11.5px; color: var(--muted); }
.job-steps li.done { color: var(--sage); }
.job-steps li.now { color: var(--ink); font-weight: 600; }
.job-note { margin-top: 9px; font: italic 11.5px var(--serif); color: var(--muted); }
.job-actions { display: flex; gap: 7px; margin-top: 11px; }
.p-btn.ghost { background: transparent; color: var(--muted); }


/* the steelman task — same weight as the other notes on the card */
.steelman {
  margin-top: 10px; padding: 12px 14px; border-radius: 11px;
  background: rgba(141,107,204,.07); border-left: 3px solid var(--lavender);
  font: 500 12.5px/1.55 var(--serif); color: var(--body-2);
}
html[data-theme="dark"] .steelman { background: rgba(169,140,224,.09); }
.steelman::before {
  content: 'THE STEELMAN'; display: block; margin-bottom: 5px;
  font: 600 9.5px var(--sans); letter-spacing: .13em; color: var(--lavender);
}
.uc-fold .ev li { margin-bottom: 6px; }
.danger-btn.armed {
  border-color: #c85a4a !important; color: #c85a4a !important;
  background: rgba(200,90,74,.09) !important; font-weight: 600;
}

/* ---------------- sign in ---------------- */
.signin-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin {
  width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px;
  padding: 34px 30px 30px; border: 1px solid var(--line); border-radius: 26px;
  background: var(--paper); box-shadow: var(--shadow);
}
.signin .brand strong { font: 500 40px/1 var(--serif); }
.signin .brand sup { color: var(--coral); font: 400 14px var(--sans); }
.signin-tag { text-align: center; color: var(--lavender); font: italic 12.5px var(--hand); margin-bottom: 8px; }
.signin label { display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.signin input {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255,255,255,.55); color: var(--ink); font-size: 14px; outline: none;
  letter-spacing: 0; text-transform: none;
}
html[data-theme="dark"] .signin input { background: rgba(0,0,0,.25); }
.signin input:focus { border-color: var(--coral); }
.signin .lesson-button { margin-top: 6px; }
.signin-err { min-height: 16px; text-align: center; font-size: 12px; color: #c85a4a; }
.who-btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(82,64,50,.4); border-radius: 50%;
  background: linear-gradient(140deg, #c46854, #efb59c); color: #fff;
  font: 600 13px var(--serif); box-shadow: inset 0 0 0 3px var(--paper);
}
.who-btn:hover { filter: brightness(1.08); }
.empty-cover { padding: 40px 56px; }
.empty-cta { width: auto; padding: 0 26px; margin-top: 26px; }
.signin-alt { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.signin-alt a { color: var(--coral); text-decoration: none; font-weight: 600; margin-left: 5px; }
.signin-alt a:hover { text-decoration: underline; }
.signin label[hidden] { display: none !important; }

/* a dropped label keeps a hairline back to its diamond */
.em-stem {
  position: absolute; left: 0; top: 6px; width: 1px;
  background: linear-gradient(var(--coral), transparent); opacity: .5;
}

/* ---------------- the dove: shown while the tutor is thinking ---------------- */
.scribe-wrap { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; }
.dove { width: 60px; height: 38px; flex: none; overflow: visible; }
.dv-body { fill: #fbf4ea; }
html[data-theme="dark"] .dv-body { fill: #efe4d6; }
.dv-tail { fill: #eadfd0; }
html[data-theme="dark"] .dv-tail { fill: #d6c9b8; }
.dv-beak { fill: var(--coral); }
.dv-eye { fill: #3b332c; }
.dv-wing { fill: #fff9f0; }
html[data-theme="dark"] .dv-wing { fill: #f6ece0; }
.dv-wing-far { fill: #e3d7c7; }
html[data-theme="dark"] .dv-wing-far { fill: #c7b9a7; }
.dv-shadow { fill: #6b4f38; opacity: .10; animation: dv-shadow 1.1s ease-in-out infinite; }

.dv-float { animation: dv-float 1.1s ease-in-out infinite; transform-origin: 34px 24px; }
@keyframes dv-float {
  0%, 100% { transform: translateY(1.5px); }
  50%      { transform: translateY(-2.5px); }
}
.dv-wing-near { animation: dv-flap 1.1s ease-in-out infinite; transform-origin: 33px 23px; }
.dv-wing-far  { animation: dv-flap 1.1s ease-in-out infinite reverse; transform-origin: 33px 23px; opacity: .95; }
@keyframes dv-flap {
  0%, 100% { transform: rotate(16deg) scaleY(.94); }
  50%      { transform: rotate(-26deg) scaleY(1); }
}
@keyframes dv-shadow {
  0%, 100% { opacity: .13; transform: scaleX(1); }
  50%      { opacity: .07; transform: scaleX(.86); }
}
@media (prefers-reduced-motion: reduce) {
  .dv-float, .dv-wing, .dv-shadow, .scribe-say i { animation: none; }
}
.scribe-say { font: italic 500 13px var(--serif); color: var(--muted); }
.scribe-say i { font-style: normal; opacity: 0; animation: sc-dot 1.4s infinite; }
.scribe-say i:nth-child(2) { animation-delay: .2s; }
.scribe-say i:nth-child(3) { animation-delay: .4s; }
@keyframes sc-dot { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sc-monk, .sc-arm, .sc-ink rect, .scribe-say i { animation: none; }
  .sc-ink rect { opacity: .5; }
}
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 58px; }
.pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 6px;
}
.pw-eye:hover { color: var(--coral); }

/* ---------------- gate meter in the library ---------------- */
.pips { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-self: center; }
.pips i {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--line2); background: transparent;
  transition: background .2s ease;
}
.pips i.on.l1 { background: var(--gold); border-color: var(--gold); }
.pips i.on.l2 { background: var(--coral); border-color: var(--coral); }
.pips i.on.l3 { background: var(--lavender); border-color: var(--lavender); }
/* untouched: barely there, so a started unit reads instantly against them */
.pips.is-fresh i { border-color: color-mix(in srgb, var(--line2) 55%, transparent); }
/* held: a quiet green rail beside the pips */
.pips.is-held { box-shadow: -7px 0 0 -5px var(--sage); }
/* an exam that went badly is the one thing worth a colour of its own */
.pips.is-failed i:first-child { border-color: #c85a4a; background: rgba(200,90,74,.35); }
.pips.is-locked { opacity: .35; }
.pips.is-locked i { border-style: dashed; }