/* Terminal Velocity — design tokens & components.
   True-black terminal base, ANSI-family accents, mono display type.
   Signature: progress rendered as file permissions. */

:root {
  /* surfaces — true black with barely lifted controls */
  --bg: #000000;
  --bg-deep: #000000;
  --panel: #0a0c10;
  --panel-2: #11151c;
  --line: #242a34;
  --line-strong: #384253;
  /* Borders that make a CONTROL findable. --line is 1.36:1 against --panel,
     which is fine for a decorative divider (1.4.11 covers components, not
     separators) but not for the only thing distinguishing a quiz answer or a
     ghost button from a paragraph of prose — a low-vision learner saw four
     lines of text where four buttons were. 4.30:1 on --panel, 4.62:1 on --bg. */
  --line-control: #69778c;

  /* ink */
  --fg: #e5e9f0;
  --fg-dim: #aab2c0;
  --fg-faint: #8f98a8;  /* AA on --bg-deep — the faint tier must still be READABLE */

  /* the ANSI family, recalibrated for cool dark */
  --ansi-green: #8fcf78;
  --ansi-green-dim: #476b42;
  --ansi-yellow: #e7bd73;
  --ansi-red: #ed7b72;
  --ansi-blue: #82aaff;
  --ansi-magenta: #c99bea;
  --ansi-cyan: #78c6d0;

  --accent: var(--ansi-blue);
  --xp: var(--ansi-yellow);

  --font-mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Code', Menlo, monospace;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, .45);
  --maxw: 1080px;
  --prose: 46rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
    /* speeding up an INFINITE animation does not stop it — it runs it 1000x
       faster. The blink went to ~20 flashes a second, which is worse than
       leaving it alone and is a seizure risk. Stop them outright. */
    animation-iteration-count: 1 !important;
  }
  .cursor-blink, .perm-dot { animation: none !important; opacity: 1 !important; }
}

/* Visible only to screen readers — used for the Tab-escape hint. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A2: these controls are deliberately borderless, but "no outline, ever" means
   a keyboard user cannot see where they are. Restore it for keyboard focus
   only, so mouse users see nothing change. */
.term-input:focus-visible,
.pypad-code:focus-visible,
.codex-filter:focus-visible {
  outline: 2px solid var(--ansi-cyan);
  outline-offset: -2px;
  border-radius: 4px;
}

/* A4: quiz results were conveyed by colour alone — a red/green colour-blind
   learner could not tell which answer was right. The site already uses ✓/✗
   everywhere else; use them here too. */
.quiz-choice.correct::after { content: ' ✓'; font-weight: 700; }
.quiz-choice.wrong::after { content: ' ✗'; font-weight: 700; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* faint phosphor grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app { position: relative; z-index: 1; }

a { color: var(--ansi-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--font-mono); }
code {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .88em;
  color: var(--ansi-yellow);
  white-space: nowrap;
}
pre code { background: none; border: none; padding: 0; color: inherit; white-space: pre; }
kbd {
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: .08em .45em;
  font-size: .82em;
}

::selection { background: rgba(130, 170, 255, .25); }

:focus-visible { outline: 2px solid var(--ansi-cyan); outline-offset: 2px; border-radius: 3px; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .65rem 1.25rem;
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .95rem;
  color: var(--fg);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand .caret { color: var(--accent); }
.brand .tld { color: var(--fg-faint); font-weight: 400; }
.topbar nav { display: flex; gap: .25rem; margin-left: .5rem; }
.topbar nav a {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--fg-dim);
  padding: .35rem .7rem;
  border-radius: 6px;
}
.topbar nav a:hover { color: var(--fg); background: var(--panel); text-decoration: none; }
.topbar nav a.active { color: var(--accent); background: var(--panel); }
.topbar nav a .slash { color: var(--fg-faint); }

/* ---------- nav dropdowns (fifteen flat links was a wall) ---------- */
.navgroup { position: relative; }
.navgroup-btn {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--fg-dim);
  background: none;
  border: 0;
  padding: .35rem .7rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.navgroup-btn:hover { color: var(--fg); background: var(--panel); }
.navgroup-btn.active { color: var(--accent); background: var(--panel); }
.navgroup-btn .chev { font-size: .6rem; color: var(--fg-faint); transition: transform .15s ease; }
.navgroup.open .navgroup-btn { color: var(--fg); background: var(--panel); }
.navgroup.open .navgroup-btn .chev { transform: rotate(180deg); }
.navgroup-panel {
  display: none;
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  min-width: 15rem;
  padding: .5rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 60;
}
.navgroup.open .navgroup-panel { display: block; }
/* the right-hand group opens leftwards so it never runs off the viewport */
.navgroup:last-child .navgroup-panel { left: auto; right: 0; }
@media (max-width: 720px) {
  .navgroup-panel { min-width: 0; width: max-content; max-width: calc(100vw - 1.6rem); }
  .navgroup-panel .ng-hint { display: none; }
}
.navgroup-sec + .navgroup-sec { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.navgroup-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--fg-faint);
  padding: .15rem .5rem .3rem;
}
.navgroup-panel a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .32rem .5rem;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--fg-dim);
}
.navgroup-panel a:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.navgroup-panel a.active { color: var(--accent); background: var(--panel-2); }
.navgroup-panel .ng-name { flex: 1; }
.navgroup-panel .ng-pct { font-size: .7rem; color: var(--fg-faint); }
.navgroup-panel .ng-pct.done { color: var(--accent); }
.navgroup-panel .ng-hint { font-size: .68rem; color: var(--fg-faint); max-width: 9rem; text-align: right; }

.topbar .stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .8rem;
}
.stat-xp { color: var(--xp); }
.stat-streak { color: var(--ansi-red); }
.stat-level { color: var(--fg-dim); }
.stat-level b { color: var(--fg); font-weight: 600; }

/* xp pop animation in topbar */
@keyframes xp-pop {
  0% { transform: translateY(0); opacity: 0; }
  20% { transform: translateY(-4px); opacity: 1; }
  80% { transform: translateY(-14px); opacity: 1; }
  100% { transform: translateY(-22px); opacity: 0; }
}
.xp-float {
  position: absolute;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--xp);
  pointer-events: none;
  animation: xp-pop 1.1s ease-out forwards;
  z-index: 90;
}

/* ---------- layout ---------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.25rem 6rem; }
.page-narrow { max-width: var(--prose); margin: 0 auto; padding: 2.5rem 1.25rem 6rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 .6rem;
}
.eyebrow .num { color: var(--accent); text-transform: none; letter-spacing: .04em; }

h1, h2, h3 { font-family: var(--font-mono); letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 2.8rem 0 .8rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 2rem 0 .6rem; }

.lede { font-size: 1.1rem; color: var(--fg-dim); max-width: 38rem; }

/* ---------- hero terminal ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0 3rem;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 1.5rem; } }

.hero h1 .accent { color: var(--accent); }
.hero h1 .cursor-blink {
  display: inline-block;
  width: .55em; height: 1.05em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: .08em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 600;
  padding: .7rem 1.3rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: #0f1724;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(130, 170, 255, .25); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--line-control);
}
.btn-ghost:hover { color: var(--fg); box-shadow: none; }

/* ---------- terminal component ---------- */
.term {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.5;
}
.term-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.term-dots { display: flex; gap: .38rem; }
.term-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.term-dots span:nth-child(1) { background: #b3564c; }
.term-dots span:nth-child(2) { background: #b99b4e; }
.term-dots span:nth-child(3) { background: #6f8f47; }
.term-title {
  flex: 1;
  text-align: center;
  font-size: .72rem;
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term-actions { display: flex; gap: .35rem; }
.term-actions button {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--fg-faint);
  padding: .15rem .55rem;
  border: 1px solid var(--line-control);
  border-radius: 5px;
}
.term-actions button:hover { color: var(--fg); border-color: var(--line-strong); }

.term-screen {
  padding: .85rem 1rem;
  height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.term-screen .line { white-space: pre-wrap; word-break: break-word; min-height: 1.28em; }

.term-input-row { display: flex; align-items: baseline; }
.term-prompt { white-space: pre; }
.term-prompt .u { color: var(--ansi-green); }
.term-prompt .p { color: var(--ansi-blue); }
.term-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
  padding: 0;
  margin: 0;
  caret-color: var(--accent);
  min-width: 2ch;
}

/* ANSI color spans */
.a-red { color: var(--ansi-red); } .a-green { color: var(--ansi-green); }
.a-yellow { color: var(--ansi-yellow); } .a-blue { color: var(--ansi-blue); }
.a-magenta { color: var(--ansi-magenta); } .a-cyan { color: var(--ansi-cyan); }
.a-bold { font-weight: 700; } .a-dim { color: var(--fg-faint); }

/* ---------- course map: ls -l listing ---------- */
.arc {
  margin: 2.5rem 0 0;
}
.arc-head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--line);
  padding-bottom: .55rem;
  margin-bottom: .4rem;
}
.arc-head .triad { color: var(--fg-faint); font-size: .78rem; letter-spacing: .1em; }
.arc-head h2 { margin: 0; font-size: 1.05rem; }
.arc-head .arc-desc { color: var(--fg-dim); font-size: .8rem; margin-left: auto; font-family: var(--font-sans); }

.mod-row {
  display: grid;
  grid-template-columns: 11ch 3.2rem minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  padding: .72rem .8rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  color: inherit;
  transition: background .12s ease;
}
a.mod-row:hover { background: var(--panel); text-decoration: none; }
.mod-perms {
  font-size: .82rem;
  letter-spacing: 0;       /* real ls -l density — the signature must read as a mode string */
  color: var(--fg-dim);
  white-space: pre;
}
.mod-perms .on { color: var(--ansi-green); }
.mod-perms .partial { color: var(--ansi-yellow); }
.mod-num {
  font-size: .78rem;
  color: var(--fg-faint);
  text-align: right;
}
.mod-name { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mod-name .t { font-weight: 600; font-size: .95rem; }
.mod-name .s { font-family: var(--font-sans); font-size: .8rem; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-meta { font-size: .75rem; color: var(--fg-faint); display: flex; align-items: center; gap: .8rem; }
.mod-meta .done { color: var(--ansi-green); }
.mod-row.locked { opacity: .55; }
.mod-row.locked .t::after { content: '  🔒'; font-size: .8em; }
@media (max-width: 720px) {
  .mod-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'perms name' 'perms meta'; row-gap: .15rem; }
  .mod-perms { grid-area: perms; font-size: .7rem; align-self: center; }
  .mod-num { display: none; }
  .mod-name { grid-area: name; }
  .mod-name .s { white-space: normal; }
  .mod-meta { grid-area: meta; }
}

/* progress ring (course card) */
.ring { transform: rotate(-90deg); }
.ring .track { stroke: var(--line); }
.ring .fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }

/* ---------- course cards on dashboard ---------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  color: inherit;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
a.course-card:hover { border-color: var(--line-strong); transform: translateY(-2px); text-decoration: none; }
.course-card .cmd { font-family: var(--font-mono); font-size: .78rem; color: var(--fg-faint); }
.course-card .cmd b { color: var(--accent); font-weight: 500; }
.course-card h3 { margin: 0; font-size: 1.25rem; }
.course-card p { margin: 0; color: var(--fg-dim); font-size: .9rem; }
.course-card .foot {
  margin-top: auto;
  padding-top: .8rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--fg-faint);
}
.course-card.soon { opacity: .6; }
.course-card.soon .badge-soon {
  font-family: var(--font-mono); font-size: .68rem; color: var(--ansi-yellow);
  border: 1px solid color-mix(in srgb, var(--ansi-yellow) 40%, transparent);
  padding: .1rem .5rem; border-radius: 99px;
}

/* ---------- lesson page ---------- */
.lesson-head { margin-bottom: 2rem; }
.crumbs {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--fg-faint);
  margin-bottom: 1.2rem;
}
.crumbs a { color: var(--fg-dim); }
.crumbs .sep { margin: 0 .4rem; color: var(--fg-faint); }

.lesson-body h2 {
  font-size: 1.25rem;
  padding-top: 1rem;
}
.lesson-body h2::before { content: '## '; color: var(--fg-faint); font-weight: 400; }
.lesson-body p { max-width: var(--prose); }
.lesson-body ul, .lesson-body ol { max-width: var(--prose); padding-left: 1.4rem; }
.lesson-body li { margin: .3rem 0; }

pre.shell {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  overflow-x: auto;
  font-size: .84rem;
  line-height: 1.55;
  max-width: var(--prose);
}
pre.shell .p { color: var(--ansi-green); user-select: none; }
pre.shell .o { color: var(--fg-dim); }
pre.shell .c { color: var(--fg-faint); font-style: italic; }

/* callouts */
.callout {
  max-width: var(--prose);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ansi-cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  padding: .9rem 1.1rem;
  margin: 1.4rem 0;
  font-size: .92rem;
}
.callout .co-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .35rem;
}
.callout-tip { border-left-color: var(--ansi-cyan); }
.callout-tip .co-label { color: var(--ansi-cyan); }
.callout-warn { border-left-color: var(--ansi-red); }
.callout-warn .co-label { color: var(--ansi-red); }
.callout-deep { border-left-color: var(--ansi-magenta); }
.callout-deep .co-label { color: var(--ansi-magenta); }
.callout p { margin: .3rem 0; }
.callout :last-child { margin-bottom: 0; }

/* exercise card */
.exercise {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  margin: 2.2rem 0;
  overflow: hidden;
}
.exercise.done { border-color: color-mix(in srgb, var(--ansi-green) 45%, var(--line-strong)); }
.ex-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.ex-badge {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--bg-deep);
  background: var(--ansi-yellow);
  padding: .18rem .55rem;
  border-radius: 4px;
  font-weight: 700;
}
.exercise.done .ex-badge { background: var(--ansi-green); }
.ex-head h3 { margin: 0; font-size: .98rem; flex: 1; }
.ex-xp { font-family: var(--font-mono); font-size: .78rem; color: var(--xp); }
.exercise.done .ex-xp { color: var(--ansi-green); }
.ex-task pre.shell { margin: .4rem 0 .9rem; } /* transcript blocks embedded in task text */
.ex-task { padding: 1rem 1.2rem .4rem; font-size: .95rem; }
.ex-task p { margin: .3rem 0 .8rem; }
.ex-body { padding: 0 1.2rem 1.2rem; }
.ex-foot {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
}
.ex-foot .hint-btn, .ex-foot .solution-btn {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  padding: .3rem .7rem;
  border-radius: 6px;
}
.ex-foot .hint-btn:hover, .ex-foot .solution-btn:hover { color: var(--fg); border-color: var(--line-strong); }
.ex-status { margin-left: auto; font-family: var(--font-mono); font-size: .78rem; color: var(--fg-faint); }
.exercise.done .ex-status { color: var(--ansi-green); }
.ex-hint {
  margin: .6rem 1.2rem 1rem;
  padding: .7rem 1rem;
  background: var(--bg-deep);
  border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  font-size: .88rem;
  color: var(--fg-dim);
}
.ex-hint code { white-space: pre-wrap; }

@keyframes ex-success-flash {
  0% { box-shadow: 0 0 0 0 rgba(130, 170, 255, 0); }
  30% { box-shadow: 0 0 0 4px rgba(130, 170, 255, .35); }
  100% { box-shadow: 0 0 0 0 rgba(130, 170, 255, 0); }
}
.exercise.flash { animation: ex-success-flash .9s ease-out; }

/* quiz */
.quiz {
  max-width: var(--prose);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 1.2rem 1.4rem;
  margin: 2.2rem 0;
}
.quiz .q { font-weight: 600; margin: 0 0 .9rem; }
.quiz .q::before {
  content: '?';
  font-family: var(--font-mono);
  color: var(--ansi-magenta);
  font-weight: 700;
  margin-right: .6rem;
}
.quiz-choice {
  display: block;
  width: 100%;
  text-align: left;
  font-size: .92rem;
  padding: .55rem .9rem;
  margin: .35rem 0;
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  transition: border-color .12s ease, background .12s ease;
}
.quiz-choice:hover { border-color: var(--line-strong); background: var(--panel-2); }
.quiz-choice.correct { border-color: var(--ansi-green); color: var(--ansi-green); background: color-mix(in srgb, var(--ansi-green) 8%, transparent); }
.quiz-choice.wrong { border-color: var(--ansi-red); color: var(--ansi-red); }
.quiz-choice:disabled { cursor: default; }
.quiz-explain {
  margin-top: .8rem;
  font-size: .88rem;
  color: var(--fg-dim);
  border-top: 1px dashed var(--line);
  padding-top: .8rem;
}
.quiz-explain::before { content: '→ '; color: var(--ansi-green); }

/* lesson nav */
.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.lesson-nav a {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--fg-dim);
  max-width: 45%;
}
.lesson-nav a:hover { color: var(--fg); }
.lesson-nav .next { margin-left: auto; text-align: right; color: var(--accent); }

/* lesson list inside module page */
.lesson-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .65rem .8rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .9rem;
  color: inherit;
}
a.lesson-row:hover { background: var(--panel); text-decoration: none; }
.lesson-row .st { width: 1.2rem; color: var(--fg-faint); }
.lesson-row .st.done { color: var(--ansi-green); }
.lesson-row .xp-tag { margin-left: auto; font-size: .72rem; color: var(--fg-faint); }

/* ---------- badges ---------- */
.badge-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.badge {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: .8rem;
  text-align: center;
  font-size: .78rem;
  color: var(--fg-dim);
}
.badge .icon { font-size: 1.6rem; display: block; margin-bottom: .3rem; }

/* Locked badges were opacity:.35 on the whole card, which put their text at
   1.7:1 — and on a brand-new profile EVERY badge is locked, so the entire
   "your record" shelf was unreadable to exactly the visitor most in need of
   knowing what the shelf is for. Opacity now applies only to the emoji, which
   is decorative and exempt; the words stay at full strength in --fg-faint
   (4.8:1) and grayscale still carries "not yours yet". */
.badge.locked { filter: grayscale(1); }
.badge.locked .icon { opacity: .4; }
.badge.locked, .badge.locked .bt { color: var(--fg-faint); }
.badge .bt { font-family: var(--font-mono); font-weight: 600; color: var(--fg); display: block; font-size: .78rem; }

/* ---------- confetti ---------- */
.confetti-piece {
  position: fixed;
  font-family: var(--font-mono);
  font-size: 14px;
  pointer-events: none;
  z-index: 100;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .1; }
}

/* ---------- toast ---------- */
/* Purely informational and there are no controls inside it, but it is a fixed
   195x114 px slab across the bottom of a phone screen for 4.2 s — long enough
   to eat the hero terminal's input on a first visit (the demo fires the toast
   by itself) and the drill's "can't recall" button, which is the only way out
   of a rep. The other decorative layers already opt out; these two were missed.
   A dead click with no visible cause is the worst kind. */
.toast, .toast-region { pointer-events: none; }
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .7rem 1.2rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  z-index: 95;
  box-shadow: var(--shadow);
  animation: toast-in .25s ease-out;
}
@keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } }
.toast .icon { margin-right: .5rem; }

/* ---------- reference page ---------- */
.ref-grid { columns: 3 240px; column-gap: 1.5rem; margin-top: 1.5rem; }
.ref-cat { break-inside: avoid; margin-bottom: 1.6rem; }
/* category titles are h2: they sit directly under the page h1, so an h3 here
   made the whole page read h1 → h3 → h3 … with no second level at all */
.ref-cat h2 { margin: 0 0 .5rem; font-size: .85rem; color: var(--ansi-yellow); }
.ref-cat a {
  display: flex;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  padding: .18rem .4rem;
  border-radius: 5px;
  color: var(--fg);
}
.ref-cat a:hover { background: var(--panel); text-decoration: none; }
.ref-cat a .sum { color: var(--fg-faint); font-family: var(--font-sans); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* man page view */
.man-view {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.8rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  margin-top: 1.5rem;
}

/* ---------- footer ---------- */
.foot-note {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--fg-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}

/* level-up modal */
.levelup-overlay {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(13, 11, 10, .8);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  animation: toast-in .3s ease-out;
}
.levelup {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 2.2rem 3rem;
  text-align: center;
  font-family: var(--font-mono);
  box-shadow: var(--shadow);
}
.levelup .lvl-num { font-size: .8rem; color: var(--fg-faint); letter-spacing: .15em; }
.levelup .lvl-name { font-size: 1.8rem; font-weight: 700; color: var(--accent); margin: .5rem 0 1rem; }
.levelup button { margin-top: .5rem; }

/* ---------- PyPad (python editor) ---------- */
.pypad {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: .86rem;
}
.pypad-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.pypad-title {
  flex: 1;
  text-align: center;
  font-size: .72rem;
  color: var(--fg-faint);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pypad-actions { display: flex; gap: .35rem; }
.pypad-actions button {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--fg-faint);
  padding: .15rem .55rem;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.pypad-actions button:hover { color: var(--fg); border-color: var(--line-strong); }
.pypad-actions .pypad-run {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.pypad-actions .pypad-run:hover { color: var(--bg-deep); filter: brightness(1.1); }
.pypad-actions .pypad-run:disabled { opacity: .5; cursor: wait; }
.pypad-editor { padding: .4rem 0; }
.pypad-code {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  line-height: 1.55;
  padding: .5rem 1rem;
  min-height: 80px;
  caret-color: var(--ansi-blue);
  tab-size: 4;
}
.pypad-output {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 55%, var(--bg-deep));
  padding: .7rem 1rem;
  min-height: 2.4rem;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.pypad-placeholder { color: var(--fg-faint); font-style: italic; }
.pypad-loading { color: var(--ansi-yellow); }
.pypad-err { color: var(--ansi-red); }

/* ---------- codex ---------- */
.codex-tabs {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 1.5rem 0 1.2rem;
  flex-wrap: wrap;
}
.codex-tabs a {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--fg-dim);
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 99px;
}
.codex-tabs a:hover { color: var(--fg); text-decoration: none; border-color: var(--line-strong); }
.codex-tabs a.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--panel); }
.codex-filter {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  padding: .4rem .8rem;
  min-width: 240px;
  outline: none;
}
.codex-filter:focus { border-color: var(--ansi-cyan); }
.codex-grid { columns: 2 460px; column-gap: 1.6rem; }
.codex-sec {
  break-inside: avoid;
  margin-bottom: 1.6rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
}
/* h2 for the same reason as .ref-cat: these are the book's second level, and
   an h3 under the book title left the page with no h2 anywhere */
.codex-sec h2 {
  margin: 0 0 .6rem;
  font-size: .82rem;
  color: var(--ansi-yellow);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.codex-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: .8rem;
  padding: .3rem .2rem;
  border-radius: 5px;
  align-items: baseline;
}
.codex-entry:hover { background: var(--panel-2); }
.codex-entry code {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg);
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.codex-entry span {
  font-size: .78rem;
  color: var(--fg-dim);
  font-family: var(--font-sans);
}

/* ---------- daily drill ---------- */
.nav-due {
  display: inline-block;
  min-width: 1.15em;
  padding: 0 .3em;
  margin-left: .15em;
  text-align: center;
  border-radius: 99px;
  background: var(--ansi-yellow);
  color: var(--bg-deep);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.5;
}

.drill-strip { margin-top: 2.2rem; }
.drill-strip.clear p {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--fg-dim);
  margin: 0;
}
.drill-strip.clear a { color: var(--accent); }
.drill-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.3rem;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--ansi-yellow) 35%, var(--line-strong));
  border-radius: var(--radius-lg);
  color: var(--fg);
}
.drill-card:hover { text-decoration: none; border-color: var(--ansi-yellow); background: var(--panel-2); }
.drill-glyph { font-size: 1.5rem; }
.drill-copy { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.drill-copy b { font-family: var(--font-mono); font-size: .95rem; }
.drill-copy span { font-size: .84rem; color: var(--fg-dim); }

.drill-page .drill-head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.drill-bar {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: .2em;
  color: var(--fg-faint);
}
.drill-bar .hit { color: var(--ansi-green); }
.drill-bar .cur { color: var(--ansi-yellow); }
.drill-bar .miss { color: var(--ansi-red); }

/* ---------- the permission prompt: the house game ---------- */
.perm-strip { margin-top: 2.5rem; }
.permcard {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ansi-yellow);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1rem 1.1rem;
  max-width: 44rem;
}
.permcard.right { border-left-color: var(--ansi-green); }
.permcard.wrong { border-left-color: var(--ansi-red); }
.perm-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--fg-dim);
}
.perm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ansi-yellow);
  animation: perm-pulse 1.8s ease-in-out infinite;
}
.permcard.settled .perm-dot { animation: none; }
.permcard.right .perm-dot { background: var(--ansi-green); }
.permcard.wrong .perm-dot { background: var(--ansi-red); }
@keyframes perm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.perm-tag {
  margin-left: auto;
  font-size: .68rem;
  color: var(--fg-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .05rem .5rem;
}
.perm-intent {
  font-style: italic;
  color: var(--fg-dim);
  margin: .7rem 0 .6rem;
  font-size: .92rem;
}
.perm-cmd {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .7rem .8rem;
  margin: 0 0 .9rem;
  overflow-x: auto;
  font-size: .92rem;
}
.perm-cmd code { font-family: var(--font-mono); color: var(--fg); white-space: pre; }
.perm-cmd .p { color: var(--accent); }
.perm-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.perm-btn {
  font-family: var(--font-mono);
  font-size: .85rem;
  padding: .45rem .9rem;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.perm-btn b {
  font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0 .3rem;
  font-size: .78rem;
}
.perm-btn.allow:hover { color: var(--ansi-green); border-color: var(--ansi-green); }
.perm-btn.deny:hover { color: var(--ansi-red); border-color: var(--ansi-red); }
.perm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.perm-chose { font-family: var(--font-mono); font-size: .8rem; color: var(--fg-faint); }
.perm-chose b { color: var(--fg-dim); }
.perm-keys { font-family: var(--font-mono); font-size: .72rem; color: var(--fg-faint); margin: .7rem 0 0; }
.perm-keys kbd {
  font-family: var(--font-mono);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 .28rem;
  color: var(--fg-dim);
}
.perm-reveal { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.perm-verdict { font-family: var(--font-mono); font-size: .85rem; margin: 0 0 .5rem; color: var(--fg-dim); }
.permcard.right .perm-verdict { color: var(--ansi-green); }
.permcard.wrong .perm-verdict { color: var(--ansi-red); }
.perm-verdict b { color: var(--fg); }
.perm-why { margin: 0 0 .6rem; font-size: .93rem; color: var(--fg); }
.perm-tell {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--fg-dim);
  background: var(--panel-2);
  border-radius: 6px;
  padding: .45rem .6rem;
  margin: 0 0 .6rem;
}
.perm-tell span {
  color: var(--ansi-yellow);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  margin-right: .5rem;
}
.perm-learn { font-family: var(--font-mono); font-size: .76rem; color: var(--fg-faint); margin: 0 0 .9rem; }
.perm-warn {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--fg-dim);
  border-left: 2px solid var(--ansi-yellow);
  padding-left: .8rem;
  margin: 1.2rem 0 0;
  max-width: var(--prose);
}
.drill-context {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--fg-faint);
  margin: .2rem 0 1.2rem;
}
.drill-context a { color: var(--fg-dim); }
.drill-foot { margin-top: 1rem; }
.drill-foot .btn { font-size: .78rem; }

.exercise.review .ex-badge { background: var(--ansi-yellow); color: var(--bg-deep); }
.exercise.review.done .ex-badge { background: var(--ansi-green); }

/* ---------- JsPad live preview ---------- */
.jspad-preview {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  padding: .6rem .9rem .8rem;
}
.jspad-preview-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: .45rem;
}
.jspad-frame {
  width: 100%;
  height: 150px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--bg);
}

/* ---------- responsive topbar (the 984px hard floor, removed) ---------- */
@media (max-width: 1024px) {
  .topbar { flex-wrap: wrap; gap: .4rem .8rem; padding: .5rem .8rem; }
  /* five items fit now that courses and tools are grouped — wrap instead of
     scrolling, because an overflow container would clip the dropdown panels */
  .topbar nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }
  .topbar nav a, .navgroup-btn { flex-shrink: 0; padding: .3rem .55rem; }
  .topbar .stats { gap: .6rem; font-size: .72rem; }
  .topbar .stats { gap: .6rem; font-size: .72rem; }
}
@media (max-width: 720px) {
  /* 16px floor stops iOS zoom-on-focus; code blocks scroll instead of clip */
  .term-input, .pypad-code { font-size: 16px; }
  pre.shell { overflow-x: auto; }
  .lesson-nav { flex-direction: column; gap: .6rem; align-items: stretch; }
  .lesson-nav a { text-align: center; }
}

/* grid/flex children may not force the page wider than the viewport:
   terminals shrink to their cell and scroll their content instead */
.hero > * { min-width: 0; }
.term { min-width: 0; max-width: 100%; }
.term-screen { overflow-x: auto; }
.ex-body { min-width: 0; }

/* ---------- wave-5 polish ---------- */
/* quizzes are peers of exercises, not trivia footnotes */
.quiz-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.quiz-badge {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .18rem .5rem;
  border-radius: 5px;
  background: var(--ansi-cyan);
  color: var(--bg-deep);
}
.quiz-xp { margin-left: auto; font-family: var(--font-mono); font-size: .78rem; color: var(--xp); }
.quiz-choice .ql { color: var(--fg-faint); font-family: var(--font-mono); margin-right: .35rem; }

/* the next lesson is the page's primary action — dress it like one */
.lesson-nav a.next {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .6rem 1.1rem;
  font-weight: 600;
}
.lesson-nav a.next:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* reference descriptions wrap instead of self-truncating */
.ref-cat a .sum { white-space: normal; }

/* consistent air between dashboard sections */
.page > section + section { margin-top: 2.8rem; }

/* codex empty state */
.codex-empty { font-family: var(--font-mono); font-size: .85rem; color: var(--fg-dim); margin-top: 2rem; }

/* lesson breadcrumb escape hatch to the codex */
.crumb-codex { float: right; font-size: .78rem; color: var(--fg-dim); }
.crumb-codex:hover { color: var(--accent); }

.badge-more { justify-content: center; }