/* ==========================================================================
   Hotbox University — Course app (app/index.html)
   Shell: slim header, left sidebar, reading column. Depends on tokens, base, components.
   ========================================================================== */

html, body { height: 100%; }
body { overflow: hidden; }

/* ---- The living background (lib/field.js draws into .dotfield) ----
   A dot-matrix field behind the whole shell: the machine's own display between
   messages. One soft volt bloom in the corner gives the graphite a light source.
   The shell sits above both; panels are opaque, so the field shows only in the
   open space around the content. */
.dotfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bloom { position: fixed; z-index: 0; pointer-events: none; width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--area-rgb), 0.085), rgba(var(--area-rgb), 0.03) 45%, transparent 72%); transition: background 900ms var(--ease); }
/* The area's light: one variable the bloom, the field and the rail read. */
body { --area-rgb: var(--neon-rgb); }
body[data-area="tools"] { --area-rgb: var(--money-rgb); }
body[data-area="vault"] { --area-rgb: 255, 255, 255; }
body[data-area="messages"] { --area-rgb: var(--neon-rgb); }   /* the team line is blue like the rest (rule 5: blue and white) */
body[data-area="extras"] { --area-rgb: var(--money-rgb); }
/* On a lesson, the field fades out under the reading column so the text sits on calm graphite. */
.main.is-reading .main__inner { background: linear-gradient(90deg, transparent, var(--bg-0) 9%, var(--bg-0) 91%, transparent); }
body.is-reading .dotfield { opacity: 0.7; }

/* ---- Shell ---- */
.shell { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 276px minmax(0, 1fr); grid-template-areas: "head head" "side main"; height: 100%; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main"; }
  .side { position: fixed; inset: calc(60px + env(safe-area-inset-top, 0px)) auto 0 0; width: min(320px, 86vw); z-index: 30; transform: translateX(-105%); transition: transform var(--dur-med) var(--ease-out); box-shadow: var(--shadow-float); }
  .side.is-open { transform: none; }
}

/* ---- Header ---- */
.head { grid-area: head; min-width: 0; display: flex; align-items: center; gap: var(--s-4); min-height: 60px; padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) var(--gutter) 0.5rem; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); z-index: 6; }
.head__menu { display: none; }
@media (max-width: 900px) { .head__menu { display: inline-flex; } }
.head__progress { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); font-weight: 500; color: var(--fg-faint); }
.head__progress .bar { width: 140px; }
.head__progress .ring { width: 34px; height: 34px; }
.head__progress .ring__label { font-size: 0.6rem; }
@media (max-width: 640px) { .head__progress .bar, .head__progress .hide-phone { display: none; } }
/* The streak chip: seven LEDs, the count, lit once today counts. */
.streak { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.3rem 0.7rem 0.3rem 0.6rem; margin-right: var(--s-2); border: 1px solid var(--glass-edge); border-top-color: var(--glass-top); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); box-shadow: var(--keycap); color: var(--fg-faint); }
.streak__n { font-size: var(--t-md); line-height: 1; color: var(--fg-dim); min-width: 1.4ch; text-align: right; }
.streak__l { font-size: 0.56rem; line-height: 1.05; letter-spacing: 0.08em; }
.streak.is-lit .streak__n { color: var(--neon); text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.6); }
@media (max-width: 640px) { .streak__l, .streak .streak__week { display: none; } }

/* ---- Sidebar ---- */
.side { grid-area: side; overflow-y: auto; padding: var(--s-4); border-right: 1px solid var(--line); background: var(--bg-1); display: grid; gap: var(--s-5); align-content: start; }
@media (max-width: 900px) { .side { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } }
.side__group { display: grid; gap: 2px; }
.side__group > .label { padding: 0 var(--s-2) var(--s-2); }
.side a { display: grid; grid-template-columns: 1.9rem 1fr auto; gap: var(--s-2); align-items: center; padding: 0.55rem var(--s-3); color: var(--fg-dim); text-decoration: none; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 500; transition: background var(--dur-fast), color var(--dur-fast); }
.side a:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg); text-decoration: none; }
.side a.is-active { background: var(--bg-2); color: var(--fg); box-shadow: inset 2px 0 0 rgb(var(--area-rgb)), -6px 0 12px -6px rgb(var(--area-rgb)), var(--shadow-sm); }
.side__n { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-xs); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.side a.is-active .side__n { color: rgb(var(--area-rgb)); }
.side__pct { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); }
.side a.is-done .side__pct { color: var(--ok); }
.side a.is-locked { color: var(--fg-faint); }
/* Unread count on Messages: a lit counter, the machine's own numerals. */
.side__badge { justify-self: end; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; font-family: var(--font-dot); font-weight: 700; font-size: var(--t-xs); line-height: 1; color: var(--on-accent); background: var(--neon); border-radius: var(--r-pill); box-shadow: 0 0 12px rgba(var(--neon-rgb), 0.55), var(--shadow-sm); }
.side__foot { padding: var(--s-3) var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.5; }

/* ---- Main ---- */
.main { grid-area: main; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; transition: background var(--dur-med) var(--ease); }
.main__inner { max-width: 880px; margin-inline: auto; padding: var(--s-6) var(--gutter) calc(var(--s-9) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s-5); }
.main__inner > * { min-width: 0; }
.view-head { display: grid; gap: var(--s-3); }
.view-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); max-width: 18ch; }
.view-head p { color: var(--fg-dim); max-width: var(--measure); font-size: var(--t-lg); line-height: 1.5; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-xs); font-weight: 500; color: var(--fg-faint); }
.crumbs a { color: var(--fg-dim); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }

/* Reading progress for the current lesson: a 2px line at the top of the main column. */
.read-bar { position: sticky; top: 0; z-index: 5; height: 2px; margin: 0 calc(-1 * var(--gutter)); background: transparent; }
.read-bar__fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--r-pill); transition: width 120ms linear; }

/* ---- Home ---- */
.next { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; padding: var(--s-6); background: radial-gradient(90% 120% at 100% 0%, rgba(var(--neon-rgb), 0.18), transparent 60%), var(--bg-1); overflow: hidden; }
@media (max-width: 600px) { .next { grid-template-columns: 1fr; padding: var(--s-5); } }
.next .ring { width: 88px; height: 88px; }
.next .ring__label { font-size: var(--t-sm); }
.next__body { display: grid; gap: var(--s-3); min-width: 0; }
.next__body h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.next__title { font-size: var(--t-lg); font-weight: 500; color: var(--fg-dim); }
.next__goal { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neon-hot); }
.next__goal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.9); }
.dash { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { display: grid; gap: var(--s-2); padding-left: calc(var(--s-5) + 4px); }
.stat__value { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .bar__fill { background: var(--edge-color, var(--neon)); box-shadow: 0 0 10px color-mix(in srgb, var(--edge-color, var(--neon)) 60%, transparent); }
.stat small { font-size: var(--t-xs); }
.missions { display: grid; gap: var(--s-2); }
.mission { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid transparent; border-radius: var(--r-md); background: var(--bg-1); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.mission:hover { background: var(--bg-3); }
.mission.is-done { opacity: 0.6; }
.mission__check { width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #ffffff; background: var(--bg-2); transition: background var(--dur-fast), border-color var(--dur-fast); }
.mission.is-done .mission__check { border-color: var(--ok); background: var(--ok); }
.mission__pts { font-size: var(--t-2xs); font-weight: 600; color: var(--fg-faint); }
.roadmap { display: grid; gap: 0; }
.roadmap__week { display: grid; grid-template-columns: 7ch 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--fg-dim); }
.roadmap__week > span:first-child { font-stretch: var(--display-stretch); font-weight: 800; text-transform: uppercase; font-size: var(--t-sm); color: var(--fg-faint); padding-top: 0.15em; }
.checklist { display: grid; gap: var(--s-2); }
.checklist a, .checklist button { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid transparent; border-radius: var(--r-md); background: var(--bg-1); color: var(--fg); text-decoration: none; font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.checklist a:hover, .checklist button:hover { background: var(--bg-3); text-decoration: none; }
.checklist .is-done { color: var(--fg-faint); }
.checklist .mission__check { flex: none; }

/* ---- Phase cards (course overview) ---- */
.phases { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .phases { grid-template-columns: 1fr; } }
.phase { display: grid; gap: var(--s-3); grid-template-rows: auto auto 1fr auto; overflow: hidden; }
.phase__img { width: calc(100% + 2 * var(--s-5)); margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; max-width: none; aspect-ratio: 21 / 9; object-fit: cover; display: block; filter: saturate(0.9); transition: transform 600ms var(--ease-out), filter 300ms; }
.phase:hover .phase__img { transform: scale(1.03); filter: saturate(1.05); }
.phase.is-locked .phase__img { filter: grayscale(0.8) brightness(0.5); }
.level-plate { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); margin-bottom: var(--s-5); }
.phase__meta { display: flex; justify-content: space-between; gap: var(--s-3); }
.phase__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; }
.phase__sub { color: var(--fg-dim); font-size: var(--t-sm); line-height: 1.5; margin-top: var(--s-1); }
.phase__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; font-size: var(--t-2xs); font-weight: 600; color: var(--fg-faint); }
.phase.is-done .phase__foot { color: var(--ok); }
.phase.is-locked { opacity: 0.72; }
.phase.is-locked .phase__foot { color: var(--fg-faint); }

/* ---- Lesson lists ---- */
.lesson-list { display: grid; gap: var(--s-2); }
.lesson-row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid transparent; border-radius: var(--r-md); background: var(--bg-1); color: var(--fg); text-decoration: none; transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.lesson-row:hover { background: var(--bg-2); box-shadow: var(--shadow-card); text-decoration: none; }
.lesson-row__id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); }
.lesson-row__title { font-weight: 500; }
.lesson-row__meta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 4px; }
.lesson-row__state { font-size: var(--t-xs); font-weight: 600; color: var(--fg-faint); white-space: nowrap; }
.lesson-row.is-done .lesson-row__state { color: var(--ok); }
.lesson-row.is-done .lesson-row__id { color: var(--ok); }
.lesson-list h3 { margin-top: var(--s-4); font-size: var(--t-md); color: var(--fg-dim); }

/* ---- The level HUD (top of every lesson): numeral, title, one segment per lesson ---- */
.hud { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-3) var(--s-4); --surface: var(--bg-1); border: 1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--edge); background-origin: border-box; background-clip: padding-box, border-box; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.hud__lvl { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.hud__lvl b { font-size: var(--t-xl); line-height: 1; min-width: 2.2ch; padding: 2px 6px; text-align: center; border-radius: 4px; background: var(--bg-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--neon-rgb), 0.25); }
/* The launch: one band of light crosses the HUD when a lesson lands. */
.hud.is-launch::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(var(--neon-rgb), 0.35) 50%, transparent 70%); animation: launch 700ms var(--ease-out) both; pointer-events: none; }
@keyframes launch { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.hud__title { font-weight: 600; font-size: var(--t-sm); }
.hud__segs { display: inline-flex; gap: 3px; flex: 1 1 120px; min-width: 120px; }
.hud__segs i { flex: 1; height: 8px; border-radius: 2px; background: var(--bg-3); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.hud__segs i.is-on { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.6); }
.hud__segs i.is-on:last-child { background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
.hud__segs i.is-now { background: rgba(var(--neon-rgb), 0.35); animation: seg-now 1.6s ease-in-out infinite alternate; }
.hud__segs i.is-new { animation: seg-new 600ms var(--ease-out) both; }
@keyframes seg-now { to { background: rgba(var(--neon-rgb), 0.75); box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.5); } }
@keyframes seg-new { from { transform: scaleY(0.2); background: #ffffff; box-shadow: 0 0 18px rgba(var(--neon-rgb), 1); } }
.hud__count { font-size: var(--t-sm); color: var(--fg-dim); }

/* ---- End of a lesson: the reward, the level it moved, the streak, the next step ---- */
.lesson__outcome:empty { display: none; }
.done { display: grid; gap: var(--s-4); --surface: var(--bg-2); box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--neon-rgb), 0.35), 0 0 48px -12px rgba(var(--neon-rgb), 0.45); animation: done-in var(--dur-med) var(--ease-out) both; }
@keyframes done-in { from { opacity: 0; transform: translateY(8px); } }
.done__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.done__reward { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.done__pts { font-size: var(--t-2xl); line-height: 1; }
.done__level { display: grid; gap: var(--s-2); }
.done__left { font-size: var(--t-sm); color: var(--fg-dim); }
.done__streak { display: inline-flex; align-items: center; gap: var(--s-2); }
.done__streak b { font-size: var(--t-lg); line-height: 1; color: var(--fg-dim); }
.done__streak b.lit { color: var(--neon); }

/* ---- Level complete: the volt scene over everything ---- */
.levelup { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--gutter); animation: levelup-in 420ms var(--ease-out) both; }
.levelup.is-leaving { animation: levelup-out 300ms var(--ease) both; }
@keyframes levelup-in { from { opacity: 0; } }
@keyframes levelup-out { to { opacity: 0; } }
.levelup::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(11, 11, 14, 0.22) 1px, transparent 1.5px); background-size: 16px 16px; opacity: 0.6; pointer-events: none; }
.levelup::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: -2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: levelup-scan 2.4s linear infinite; pointer-events: none; }
@keyframes levelup-scan { to { top: 100%; } }
.levelup__inner { position: relative; display: grid; gap: var(--s-4); max-width: 640px; text-align: center; justify-items: center; animation: levelup-rise 600ms var(--ease-out) both; }
@keyframes levelup-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.levelup__n { font-size: clamp(6rem, 22vw, 13rem); line-height: 0.9; letter-spacing: 0.02em; animation: levelup-pop 700ms var(--ease-out) both; }
@keyframes levelup-pop { from { opacity: 0; transform: scale(0.8); } 60% { transform: scale(1.04); } }
.levelup h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.levelup p { max-width: 48ch; color: var(--fg-dim); font-size: var(--t-md); }
@media (prefers-reduced-motion: reduce) { .levelup, .levelup__inner, .levelup__n, .done, .hud__segs i { animation: none; } .levelup::after { display: none; } }

/* ---- Lesson view ----
   The reading column: 18px type on a 64-character measure, generous leading,
   headings that announce a new idea with air above them. Nothing moves here. */
.lesson__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lesson__body { max-width: 64ch; font-size: 1.125rem; line-height: 1.75; color: var(--fg); letter-spacing: 0.002em; }
.lesson__body > * + * { margin-top: var(--s-4); }
.lesson__body h2, .lesson__body h3 { margin-top: var(--s-6); font-stretch: normal; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.lesson__body h2 { font-size: var(--t-xl); padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px); background-size: 40px 8px, 8px 4px; background-repeat: repeat-x; background-position: 0 0, 0 4px; }
.view-head h1 { position: relative; }
.lesson__body h3 { font-size: var(--t-lg); }
.lesson__body h2 + *, .lesson__body h3 + * { margin-top: var(--s-3); }
.lesson__body p { text-wrap: pretty; }
.lesson__body ul, .lesson__body ol { padding-left: 1.4rem; }
.lesson__body li + li { margin-top: var(--s-2); }
.lesson__body li::marker { color: var(--neon-hot); font-family: var(--font-mono); font-weight: 700; }
.lesson__body table { font-size: var(--t-sm); line-height: 1.5; }
.lesson__body td { color: var(--fg); }
.lesson__body strong { color: var(--instrument); }
.lesson__body blockquote { padding: var(--s-3) var(--s-5); border-left: 2px solid var(--neon); color: var(--fg-dim); font-size: var(--t-md); }
.lesson__body code { padding: 0.1em 0.4em; background: var(--bg-2); border-radius: 4px; font-size: 0.9em; }
.lesson__body hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-5); }
.video-slot { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--bg-1); border: 1px dashed var(--line-strong); }
.video-slot__frame { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border: 0; border-radius: var(--r-sm); background: var(--bg-0); }
.lesson__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.lesson__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); }
@media (max-width: 600px) { .lesson__nav { grid-template-columns: 1fr; } }
.lesson__nav a { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border: 1px solid transparent; border-radius: var(--r-lg); background: var(--bg-1); color: var(--fg); text-decoration: none; min-width: 0; transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.lesson__nav a:hover { background: var(--bg-2); box-shadow: var(--shadow-card); text-decoration: none; }
.lesson__nav a.is-next { text-align: right; }
.lesson__nav .label { font-size: var(--t-2xs); }
.lesson__nav strong { font-weight: 500; overflow-wrap: anywhere; }

/* ---- Quiz ---- */
.quiz { display: grid; gap: var(--s-5); }
.quiz__q { display: grid; gap: var(--s-3); }
.quiz__prompt { font-weight: 500; }
.quiz__options { display: grid; gap: var(--s-2); }
.quiz__opt { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); text-align: left; background: var(--bg-1); border: 1px solid transparent; border-radius: var(--r-md); color: var(--fg); font: inherit; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.quiz__opt:hover { background: var(--bg-3); }
.quiz__opt.is-correct { border-color: var(--money); background: rgba(var(--money-rgb), 0.10); box-shadow: 0 0 16px -4px rgba(var(--money-rgb), 0.5); }
.quiz__opt.is-correct .quiz__key { color: var(--money); }
.quiz__opt.is-wrong { border-color: var(--red); background: rgba(var(--red-rgb), 0.08); }
.quiz__opt.is-wrong .quiz__key { color: var(--red); }
.quiz__opt[disabled] { cursor: default; }
.quiz__key { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); padding-top: 0.2em; }
.quiz__result { font-size: var(--t-xs); font-weight: 600; color: var(--fg-dim); }
.reflect { display: grid; gap: var(--s-2); }
.reflect details { border: 1px solid transparent; border-radius: var(--r-md); background: var(--bg-1); }
.reflect summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 500; list-style: none; }
.reflect summary::-webkit-details-marker { display: none; }
.reflect .reflect__body { padding: 0 var(--s-4) var(--s-3); color: var(--fg-dim); font-size: var(--t-sm); }

/* ---- Tools ---- */
.tool-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.tool-card { display: grid; gap: var(--s-2); color: var(--fg); text-decoration: none; }
.tool-card:hover { border-color: var(--line-strong); background: var(--bg-2); text-decoration: none; }
.tool-layout { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .tool-layout { grid-template-columns: 1fr; } }
.tool-form { display: grid; gap: var(--s-3); }
.tool-form .field--inline .input { width: 9ch; text-align: right; }
/* The statement waterfall: labels in steel, every figure an instrument. Money out reads red, the answer reads green (or red when it is a loss). */
.waterfall { display: grid; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.waterfall__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--line); color: var(--fg-dim); }
.waterfall__row > span:last-child { font-family: var(--font-mono); font-size: var(--t-md); font-weight: 700; color: var(--instrument); text-shadow: var(--instrument-glow); }
.waterfall__row:last-child { border-bottom: 0; }
.waterfall__row--neg > span:last-child { color: var(--red); text-shadow: 0 0 10px rgba(var(--red-rgb), 0.3); }
.waterfall__row--total { color: var(--fg); font-weight: 500; }
.waterfall__row--hero { color: var(--fg); font-weight: 600; font-size: var(--t-md); padding-block: 0.8rem; margin-top: var(--s-2); border-top: 1px solid var(--line-strong); border-bottom: 0; }
.waterfall__row--hero > span:last-child { font-size: clamp(1.4rem, 2.4vw, 2.4rem); letter-spacing: -0.03em; white-space: nowrap; color: var(--money); text-shadow: 0 0 16px rgba(var(--money-rgb), 0.45); }
.waterfall__row--hero.is-out > span:last-child { color: var(--red); text-shadow: 0 0 16px rgba(var(--red-rgb), 0.45); }
.rating { display: grid; place-items: center; gap: var(--s-2); padding: var(--s-5); }
.rating__num { font-size: 4.5rem; font-weight: 700; font-stretch: var(--display-stretch); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
/* The underwriting report is paper: the one white object in the course, the thing you hand the owner. */
.report { font-family: var(--font-mono); font-size: var(--t-xs); white-space: pre-wrap; line-height: 1.6; color: var(--paper-ink); background: var(--paper); padding: var(--s-5) var(--s-5) var(--s-6); border-radius: 3px; box-shadow: var(--shadow-paper); background-image: repeating-linear-gradient(0deg, transparent 0 1.55em, rgba(0, 0, 0, 0.04) 1.55em calc(1.55em + 1px)); margin-top: var(--s-3); }
.report::selection { background: rgba(var(--neon-rgb), 0.5); }

/* ---- Vault ---- */
.vault-group details { border: 1px solid transparent; border-radius: var(--r-lg); background: var(--bg-1); margin-bottom: var(--s-2); }
.vault-group summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--s-3); }
.vault-group summary::-webkit-details-marker { display: none; }
.vault-group summary .pill { font-weight: 400; }
.vault-group .lesson-list { padding: 0 var(--s-3) var(--s-3); }

/* ---- Pipeline (tools/pipeline.js) ---- */
.pipeline { display: grid; gap: var(--s-4); min-width: 0; }
.pipeline > * { min-width: 0; }
.pipeline__bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.pipeline__bar .input { flex: 1 1 200px; max-width: 360px; }
.week { display: grid; gap: var(--s-3); }
.week__head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; justify-content: space-between; }
.week__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--s-3) var(--s-4); }
.week__kpi { display: grid; gap: 2px; min-width: 0; }
.week__v { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 700; line-height: 1.05; }
.week__v small { font-size: var(--t-sm); font-weight: 400; color: var(--fg-faint); text-shadow: none; }
.week__kpi.is-hit .week__v { color: var(--money); text-shadow: 0 0 12px rgba(var(--money-rgb), 0.4); }
.week__kpi.is-under .week__v { color: var(--fg); } /* under target is where every week starts, not an error: white, not red */
.week__note { color: var(--red-hot); }
.week__l { font-size: var(--t-2xs); font-weight: 600; font-stretch: var(--wide-stretch); color: var(--fg-dim); }
.week__note { font-size: var(--t-sm); color: var(--warn); font-weight: 500; }
.pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(224px, 1fr); gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pipe__col { display: grid; grid-template-rows: auto 1fr; gap: var(--s-2); min-height: 240px; scroll-snap-align: start; padding: var(--s-3); background: var(--bg-1); border-radius: var(--r-lg); }
.pipe__col--slim { opacity: 0.75; }
.pipe__head { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-xs); font-weight: 600; font-stretch: var(--wide-stretch); color: var(--fg-dim); padding: 0 var(--s-1) var(--s-2); border-bottom: 2px solid var(--stage-color, var(--line-strong)); box-shadow: 0 2px 12px -4px var(--stage-color, transparent); }
.pipe__col--won { --stage-color: var(--money); } .pipe__col--won .pipe__head { color: var(--money-hot); }
.pipe__col--lost { --stage-color: var(--red); } .pipe__col--lost .pipe__head { color: var(--red-hot); }
.pipe__col--parked { --stage-color: var(--fg-faint); }
.pipe__col--active { --stage-color: var(--instrument); }
.pipe__col--active .pipe__head { color: var(--fg); }
.pipe__cards { display: grid; gap: var(--s-2); align-content: start; }
.pipe__empty { font-size: var(--t-xs); color: var(--fg-faint); padding: var(--s-2) 2px; line-height: 1.5; }
.lead { display: grid; gap: 4px; text-align: left; padding: var(--s-3) var(--s-4); --surface: var(--bg-2); border-radius: var(--r-md); color: var(--fg); font: inherit; cursor: pointer; min-width: 0; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
@media (hover: hover) { .lead:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); } }
.lead.is-open { box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.7), 0 0 18px rgba(var(--neon-rgb), 0.25); }
.lead__name { font-weight: 600; font-size: var(--t-sm); overflow-wrap: anywhere; }
.lead__meta { font-size: var(--t-2xs); color: var(--fg-faint); }
.lead__foot { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.lead__touch { font-size: var(--t-2xs); color: var(--fg-faint); font-family: var(--font-mono); }
.pipe-table tbody tr { cursor: pointer; }
@media (hover: hover) { .pipe-table tbody tr:hover td { background: var(--bg-2); } }
.pipe-table tr.is-open td { background: rgba(var(--neon-rgb), 0.08); }
.pipe-empty { display: grid; gap: var(--s-3); }
.pipe-add { display: grid; gap: var(--s-4); }
.pipe-add__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); }
.pipe-backup { display: grid; gap: var(--s-3); }
.pipe-backup summary, .finder__how summary, .drawer__more summary { cursor: pointer; font-weight: 500; list-style: none; }
.pipe-backup summary::-webkit-details-marker, .finder__how summary::-webkit-details-marker, .drawer__more summary::-webkit-details-marker { display: none; }
.pipe-backup summary::before, .finder__how summary::before, .drawer__more summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--fg-faint); font-family: var(--font-mono); }
.pipe-backup[open] summary::before, .finder__how[open] summary::before, .drawer__more[open] summary::before { content: '–'; }

/* The drawer: a lead's record, beside the board on wide screens, over it on phones. */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); padding: calc(env(safe-area-inset-top, 0px) + var(--s-5)) var(--s-5) calc(env(safe-area-inset-bottom, 0px) + var(--s-5)); --surface: var(--bg-2); border-radius: 0; box-shadow: var(--shadow-float); overflow-y: auto; transform: translateX(104%); transition: transform 420ms var(--ease-drawer); z-index: 40; display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); align-content: start; }
.drawer.is-open { transform: none; }
@media (min-width: 1180px) { .main.has-drawer .main__inner { max-width: none; margin-right: 456px; } }
.drawer__head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: start; }
.drawer__title { display: grid; gap: 2px; min-width: 0; }
.drawer__title h3 { font-size: var(--t-lg); overflow-wrap: anywhere; }
.drawer__body { align-content: start; }
.drawer__next { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: rgba(var(--neon-rgb), 0.07); }
.drawer__next input[type="date"] { width: auto; }
.drawer__touch { display: grid; gap: var(--s-2); }
.drawer__dm { display: grid; grid-template-columns: 1fr 120px; gap: var(--s-3); }
.drawer__more { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.drawer__more > .stack { padding-top: var(--s-3); }
.drawer__history { display: grid; gap: var(--s-2); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-xs); color: var(--fg-dim); }
.history li { display: grid; grid-template-columns: 4.5em 1fr; gap: var(--s-2); }
.history__at { font-family: var(--font-mono); color: var(--fg-faint); white-space: nowrap; }
.select--stage { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

/* ---- Script Library (tools/scripts.js) ---- */
.scripts { display: grid; gap: var(--s-4); min-width: 0; }
.scripts > * { min-width: 0; }
.scripts__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-3); }
.scripts__lead { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3); font-size: var(--t-sm); }
.scripts__bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.scripts__bar .select { width: auto; min-width: 160px; }
.scripts__list { display: grid; gap: var(--s-3); }
.scripts__count { font-size: var(--t-sm); }
.scripts__search { flex: 1 1 220px; min-width: 0; }
/* Index on the left, one script on the right; the index scrolls on its own so the reader stays put. */
.scripts__browser { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.scripts__index { position: sticky; top: 0; display: grid; gap: var(--s-4); max-height: 70vh; overflow-y: auto; padding: var(--s-3); border-radius: 16px; background: rgba(9, 22, 52, 0.6); border: 1px solid rgba(144, 195, 255, 0.2); }
.scripts__group { display: grid; gap: 4px; }
.scripts__group .label { padding: 0 8px 4px; }
.scripts__item { display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: inherit; font-size: var(--t-sm); line-height: 1.3; text-align: left; cursor: pointer; }
.scripts__item:hover { background: rgba(255, 255, 255, 0.06); }
.scripts__item.is-on { background: rgba(20, 103, 239, 0.28); box-shadow: inset 3px 0 0 var(--neon); }
.scripts__ch { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt-hot); }
.script__practice { display: grid; gap: var(--s-3); }
.script__hidden { padding: var(--s-4) var(--s-5); border-radius: 2px; border: 1px dashed rgba(144, 195, 255, 0.35); color: var(--fg-dim); font-family: var(--font-mono); font-size: var(--t-sm); max-width: 72ch; }
@media (max-width: 900px) { .scripts__browser { grid-template-columns: minmax(0, 1fr); } .scripts__index { position: static; max-height: 40vh; } }
.scripts__offer { display: grid; gap: var(--s-3); border-color: rgba(var(--neon-rgb), 0.35); }
.script { display: grid; gap: var(--s-3); }
.script__head { display: grid; gap: var(--s-2); }
.script__head h3 { font-size: var(--t-md); }
.script__pills { display: flex; flex-wrap: wrap; gap: 4px; }
.script__body { margin: 0; padding: var(--s-4) var(--s-5); background: var(--paper); color: var(--paper-ink); border-radius: 2px; font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; box-shadow: 0 1px 1px rgba(16, 24, 40, 0.08), 0 12px 28px -12px rgba(16, 24, 40, 0.25); }
.merge { padding: 0 0.15em; border-bottom: 1.5px dashed rgba(29, 31, 34, 0.45); color: rgba(29, 31, 34, 0.7); }
.merge.is-filled { border-bottom-color: var(--neon); color: var(--paper-ink); font-weight: 700; }

/* ---- Lead Finder (tools/finder.js) ---- */
.finder { display: grid; gap: var(--s-4); min-width: 0; }
.finder > * { min-width: 0; }
.finder__form { display: grid; gap: var(--s-4); }
.finder__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: var(--s-3); align-items: stretch; }
.finder__go { align-self: stretch; height: auto; min-height: 52px; padding-inline: 28px; }
@media (max-width: 640px) { .finder__row { grid-template-columns: 1fr; } }
.finder__status { font-size: var(--t-sm); min-height: 1.4em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: var(--t-xs); font-weight: 500; padding: 0.4rem 0.8rem; background: var(--bg-1); color: var(--fg-dim); border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); }
@media (hover: hover) { .chip:hover { background: var(--bg-3); color: var(--fg); } }
.chip.is-on { background: var(--accent-soft); color: var(--neon-hot); }
.finder__results { display: grid; gap: var(--s-3); }
.finder__head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; font-size: var(--t-sm); color: var(--fg-dim); }
.finder__reads summary { cursor: pointer; font-size: var(--t-sm); color: var(--fg-dim); list-style: none; }
.finder__reads summary::-webkit-details-marker { display: none; }
.finder__reads summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--fg-faint); font-family: var(--font-mono); }
.finder__reads[open] summary::before { content: '–'; }
.finder__reads ul { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--t-xs); color: var(--fg-dim); }
.finder__reads strong { color: var(--fg); font-weight: 600; }
.venues { display: grid; --surface: var(--bg-1); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.venue { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--s-5); align-items: start; }
.venue + .venue { border-top: 1px solid var(--rule); }
.venue__main { display: grid; gap: 4px; min-width: 0; }
.venue__title { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.venue__title strong { font-weight: 600; overflow-wrap: anywhere; }
.venue__facts { font-size: var(--t-sm); color: var(--fg-dim); overflow-wrap: anywhere; }
.venue__owner { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-xs); }
.venue__side { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: flex-end; }
.venue__dist { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); white-space: nowrap; margin-right: var(--s-2); }
@media (max-width: 640px) { .venue { grid-template-columns: 1fr; } .venue__side { justify-content: flex-start; } }
.finder__foot { justify-content: space-between; }
.finder__credit { font-size: var(--t-2xs); max-width: 60ch; }
.finder__how { display: grid; gap: var(--s-3); }
.finder__steps { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.55; }
.finder__steps strong { color: var(--fg); }

/* ---- Extras (views/extras.js) ---- */
.extras { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.extras__card { display: grid; gap: var(--s-4); }
.extras__card--support { grid-column: 1 / -1; box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--neon-rgb), 0.35), 0 0 40px -10px rgba(var(--neon-rgb), 0.35); }
.extras__top { display: flex; justify-content: space-between; gap: var(--s-4); align-items: start; }
.extras__top h2 { font-size: var(--t-xl); margin-top: var(--s-2); }
.extras__price { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 700; white-space: nowrap; }
.extras__price small { font-size: var(--t-xs); font-weight: 400; color: var(--fg-faint); }
.extras__list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); color: var(--fg-dim); font-size: var(--t-sm); }
.extras__request { display: grid; gap: var(--s-2); }

/* ---- Messages (views/messages.js) and the chat (lib/chat.js) ----
   One thread per student. Bubbles the way every phone draws them: the student
   on the right in volt, the team on the left on graphite, each reply signed.
   The same `.chat` block is mounted inside the teacher console. ---- */
.messages { display: grid; gap: var(--s-4); }
.messages__name { display: grid; gap: var(--s-3); max-width: 520px; }
.messages__name .cluster { margin-top: var(--s-2); }
.messages__name .input { flex: 1 1 200px; }
.signin__form { max-width: 420px; }   /* lib/signin.js, in the course and the console */
.messages__team { display: flex; align-items: center; gap: var(--s-4); }
.messages__avatars { display: flex; }
.messages__avatars .msg__avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg-0); }
.messages__avatars .msg__avatar:first-child { margin-left: 0; }
.messages__card { height: clamp(420px, calc(100vh - 430px), 720px); display: grid; }

.chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.chat__list { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.chat__day { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.chat__day::before, .chat__day::after { content: ""; height: 1px; background: var(--rule); }
.chat__empty { align-self: center; justify-self: center; text-align: center; max-width: 42ch; display: grid; gap: var(--s-2); padding: var(--s-6) var(--s-4); color: var(--fg-dim); }
.chat__composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--rule); background: var(--bg-1); }
textarea.chat__input { min-height: 46px; max-height: 160px; resize: none; font-family: var(--font-sans); font-size: var(--t-md); line-height: 1.45; }
.chat__composer .btn { min-height: 46px; }

.msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; max-width: min(100%, 560px); animation: msg-in var(--dur-med) var(--ease-out) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg--mine { grid-template-columns: minmax(0, 1fr) auto; justify-self: end; }
.msg--mine .msg__avatar { order: 2; }
.msg__avatar { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; color: var(--fg-dim); background: var(--bg-3); border-radius: 50%; box-shadow: var(--keycap); }
.msg--staff .msg__avatar { color: var(--on-accent); background: var(--neon); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.6), 0 0 14px rgba(var(--neon-rgb), 0.35); }
.msg__body { display: grid; gap: 4px; min-width: 0; padding: var(--s-3) var(--s-4); border-radius: 16px 16px 16px 4px; --surface: var(--bg-2); border: 1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--edge); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--shadow-sm); }
.msg--mine .msg__body { border-radius: 16px 16px 4px 16px; --surface: color-mix(in srgb, var(--neon) 22%, var(--bg-2)); --edge: linear-gradient(180deg, rgba(var(--neon-rgb), 0.5), rgba(var(--neon-rgb), 0.12) 40%, rgba(255, 255, 255, 0.03)); }
.msg--mine .msg__meta strong { color: var(--neon-hot); }
.msg__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); font-size: var(--t-xs); }
.msg__meta strong { font-weight: 600; color: var(--fg); }
.msg--staff .msg__meta strong { color: var(--neon-hot); }
.msg__time { margin-left: auto; font-family: var(--font-mono); color: var(--fg-faint); font-size: var(--t-2xs); }
.msg__text { font-size: var(--t-md); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
@media (max-width: 640px) { .chat__list { padding: var(--s-4); } .msg { max-width: 92%; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }

/* ---- Home: the member's card beside the next step (views/home.js, lib/card.js) ---- */
.home-top { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.home-top__main { display: grid; gap: var(--s-4); min-width: 0; }
.home-top__main .dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-top__main .stat { padding: var(--s-4); }
.home-top__main .stat__value { font-size: var(--t-xl); }
.home-top__main .stat small { display: none; }
@media (max-width: 1100px) { .home-top__main .dash { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } }
.home-card { display: grid; animation: card-in 700ms var(--ease-out) both; }
.home-card .opcard__name { overflow-wrap: anywhere; }
@keyframes card-in { from { opacity: 0; transform: translateY(-10px) rotateX(6deg); } }
@media (max-width: 1100px) { .home-top { grid-template-columns: 330px minmax(0, 1fr); } }
@media (max-width: 860px) { .home-top { grid-template-columns: 1fr; } .home-card { max-width: 380px; width: 100%; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .home-card { animation: none; } }

/* ---- The paywall (views/unlock.js): the unissued card beside the one price ---- */
.unlock__card .opcard__serial { color: var(--fg-faint); }
.unlock__offer h2 { font-size: clamp(2.6rem, 6vw, 4rem); }
.unlock__door { display: grid; gap: var(--s-3); }
.signin__form--magic { display: grid; gap: var(--s-3); max-width: 420px; }
.signin__sent { display: grid; gap: var(--s-2); }
/* Non-members see the map, not the course: the phase list stays, the member links dim. */
body.is-locked .side a[data-route="#/vault"], body.is-locked .side a[data-route="#/messages"], body.is-locked .side a[data-route="#/extras"] { color: var(--fg-faint); }

/* ---- The tour (app/tour.js): a spotlight and a card, eight stops ---- */
.tour { position: fixed; inset: 0; z-index: 60; }
.tour__spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(11, 11, 14, 0.72), 0 0 0 1px rgba(var(--volt-rgb), 0.55), 0 0 24px rgba(var(--volt-rgb), 0.25);
  transition: left 280ms var(--ease-out), top 280ms var(--ease-out), width 280ms var(--ease-out), height 280ms var(--ease-out), opacity 200ms;
}
.tour__card { position: fixed; z-index: 61; padding: var(--s-5); max-width: calc(100vw - 32px); animation: tour-in 240ms var(--ease-out) both; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } }
.tour__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); }
.tour__skip { background: none; border: 0; color: var(--fg-faint); font: inherit; font-size: var(--t-xs); cursor: pointer; }
.tour__skip:hover { color: var(--fg); }
.tour__title { font-size: var(--t-lg); margin: 0 0 var(--s-2); text-wrap: balance; }
.tour__body { color: var(--fg-dim); font-size: var(--t-sm); margin: 0 0 var(--s-4); }
.tour__nav { display: flex; justify-content: space-between; gap: var(--s-2); }
body.is-touring .side { z-index: 62; }      /* above the shade while a sidebar stop is lit */
body.is-touring .side a { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tour__spot, .tour__card { transition: none; animation: none; } }

/* ---- The guide (app/guide/): the button in the corner and the panel ---- */
.guide__toggle { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); background: rgba(13, 18, 33, 0.85); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font: inherit; font-weight: 700; cursor: pointer; backdrop-filter: blur(12px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(var(--neon-rgb), 0.25); transition: transform 160ms var(--ease-out), box-shadow 160ms; }
.guide__toggle img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--volt-deep); box-shadow: 0 0 0 2px rgba(var(--neon-rgb), 0.8); }
.guide__toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(var(--neon-rgb), 0.7), 0 0 30px -6px rgba(var(--neon-rgb), 0.7); }
.guide__face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--volt-deep); box-shadow: 0 0 0 2px rgba(var(--neon-rgb), 0.8); }
.guide__eye { display: inline-flex; align-items: center; gap: 10px; }
.guide__eye > span { display: grid; line-height: 1.1; }
.guide__name { font-size: var(--t-md); color: #fff; }
.guide__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px rgba(var(--volt-rgb), 0.8); animation: guide-breathe 2.6s ease-in-out infinite; }
@keyframes guide-breathe { 50% { box-shadow: 0 0 3px rgba(var(--volt-rgb), 0.4); opacity: 0.75; } }
.guide {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 52px); z-index: 50;
  width: min(380px, calc(100vw - 32px)); height: min(520px, calc(100vh - 120px));
  display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-1); border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); animation: tour-in 200ms var(--ease-out) both;
}
.guide__head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.guide__eye { display: inline-flex; align-items: center; gap: var(--s-2); }
.guide__log { overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-height: 0; }
.guide__msg { max-width: 88%; padding: 0.6rem 0.8rem; font-size: var(--t-sm); line-height: 1.45; border-radius: 10px; overflow-wrap: anywhere; }
.guide__msg--user { align-self: flex-end; background: var(--volt); color: var(--on-volt); border-bottom-right-radius: 3px; }
.guide__msg--guide { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.guide__msg--thinking { display: inline-flex; gap: 4px; padding: 0.7rem 0.8rem; }
.guide__msg--thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-faint); animation: guide-think 1s infinite; }
.guide__msg--thinking i:nth-child(2) { animation-delay: 150ms; } .guide__msg--thinking i:nth-child(3) { animation-delay: 300ms; }
@keyframes guide-think { 50% { opacity: 0.25; transform: translateY(-2px); } }
.guide__openers { display: grid; gap: var(--s-2); }
.guide__hint { color: var(--fg-dim); font-size: var(--t-sm); margin: 0 0 var(--s-2); }
.guide__opener { text-align: left; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); padding: 0.55rem 0.75rem; font: inherit; font-size: var(--t-sm); cursor: pointer; border-radius: 8px; }
.guide__opener:hover { border-color: rgba(var(--volt-rgb), 0.5); }
.guide__form { display: flex; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--line); }
.guide__input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); padding: 0.55rem 0.7rem; font: inherit; font-size: var(--t-sm); border-radius: 8px; }
.guide__input:focus { outline: none; border-color: rgba(var(--volt-rgb), 0.6); }
@media (max-width: 640px) { .guide { width: calc(100vw - 32px); height: min(70vh, 520px); } }
@media (prefers-reduced-motion: reduce) { .guide__dot, .guide__msg--thinking i { animation: none; } .guide { animation: none; } }

/* The Hotbox Rating: the number wears its verdict. */
.rating.is-money .rating__num { color: var(--money); text-shadow: 0 0 18px rgba(var(--money-rgb), 0.5); }
.rating.is-red .rating__num { color: var(--red); text-shadow: 0 0 18px rgba(var(--red-rgb), 0.5); }

/* ---- The readout (tools/form.js): the one number, big, with what to do about it ---- */
.readout { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); border-radius: var(--r-md); background: var(--bg-2); position: relative; overflow: hidden; }
.readout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--instrument)); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--tone, var(--instrument)) 60%, transparent); }
.readout::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--tone, var(--instrument)) 10%, transparent), transparent 70%); pointer-events: none; }
.readout__value { font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--tone, var(--instrument)); text-shadow: 0 0 18px color-mix(in srgb, var(--tone, var(--instrument)) 45%, transparent); overflow-wrap: anywhere; }
.readout__note { font-size: var(--t-sm); color: var(--fg-dim); max-width: 48ch; line-height: 1.45; }
.readout--in { --tone: var(--money); }
.readout--out { --tone: var(--red); }
.readout--verdict { --tone: var(--neon); }
.readout--fact { --tone: var(--instrument); }
.rating__note { text-align: center; margin-top: var(--s-2); }

/* ---- The instrument deck (views/home.js deck()): five gauges in one strip ---- */
.deck { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.gauge { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 6px); min-width: 0; --surface: var(--bg-1); border-radius: var(--r-md); box-shadow: var(--shadow-card); color: var(--fg); text-decoration: none; overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.gauge:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); text-decoration: none; }
.gauge::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px; border-radius: 2px; background: var(--tone); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--tone) 60%, transparent); }
.gauge::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--tone) 9%, transparent), transparent 70%); pointer-events: none; }
.gauge__value { font-family: var(--font-mono); font-size: var(--t-2xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--tone); text-shadow: 0 0 16px color-mix(in srgb, var(--tone) 45%, transparent); }
.gauge__sub { font-size: var(--t-xs); color: var(--fg-dim); line-height: 1.35; }
.gauge .bar { height: 3px; } .gauge .bar__fill { background: var(--tone); box-shadow: 0 0 8px color-mix(in srgb, var(--tone) 70%, transparent); }
.gauge__leds { display: inline-flex; gap: 5px; }
.gauge__leds i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-3); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.gauge__leds i.is-on { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.8); }
.gauge__leds i.is-today:not(.is-on) { box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.6); }
.gauge--volt { --tone: var(--neon-hot); } .gauge--money { --tone: var(--money); } .gauge--red { --tone: var(--red); } .gauge--white { --tone: var(--instrument); }
.gauge--volt .gauge__leds i.is-on { background: var(--neon); }
@media (max-width: 1100px) { .deck { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gauge__value { font-size: var(--t-xl); } }

/* ---- The spectrum hairline: one thread of all four lights along the top of the shell, slowly moving. Simple from across the room, intricate up close. ---- */
.head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon) 18%, var(--money) 38%, var(--instrument) 50%, var(--red) 62%, var(--neon) 82%, transparent); background-size: 200% 100%; opacity: 0.55; animation: spectrum 26s linear infinite; pointer-events: none; }
.head { position: relative; }
@keyframes spectrum { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .head::after { animation: none; } }

/* ---- The Tool Deck in the operator's order (views/tools.js STEPS) ---- */
.steps { display: grid; gap: var(--s-6); }
.step { display: grid; gap: var(--s-4); }
.step__head { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; padding-left: var(--s-2); border-left: 2px solid var(--tone, var(--line-strong)); box-shadow: -6px 0 18px -10px var(--tone, transparent); }
.step__n { font-size: var(--t-xl); color: var(--tone, var(--fg)); text-shadow: 0 0 12px color-mix(in srgb, var(--tone, var(--fg)) 50%, transparent); line-height: 1; padding-top: 2px; }
.step__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.step__line { color: var(--fg-dim); font-size: var(--t-sm); margin: 2px 0 0; max-width: 60ch; }
.step--volt { --tone: var(--neon-hot); } .step--money { --tone: var(--money); } .step--red { --tone: var(--red); } .step--white { --tone: var(--instrument); }
.step .tool-card { --edge-color: var(--tone); }
.step .tool-card::before { opacity: 0.55; transition: opacity var(--dur-fast); }
.step .tool-card:hover::before { opacity: 1; }

/* The hand-off at the bottom of every tool: the lesson behind it, and the next tool in the job. */
.handoff { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; margin-top: var(--s-5); }
.handoff__next { display: grid; gap: 2px; padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 4px); min-width: 260px; color: var(--fg); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.handoff__next:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); text-decoration: none; }
.handoff__title { font-size: var(--t-lg); font-weight: 600; }
@media (max-width: 640px) { .handoff { grid-template-columns: 1fr; } .handoff__next { min-width: 0; } }

/* ---- Motion: every view arrives the same way; the shell powers up once per session (main.js ignition()) ---- */
.main__inner.is-entering { animation: view-in 360ms var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
.deck .gauge { animation: gauge-in 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
@keyframes gauge-in { from { opacity: 0; transform: translateY(12px); } }
.deck .gauge::before { animation: edge-strike 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 260ms); }
@keyframes edge-strike { 0% { opacity: 0; transform: scaleY(0.2); } 60% { opacity: 1; transform: scaleY(1.15); } 100% { transform: scaleY(1); } }
body.is-booting .head > * { animation: boot-in 220ms var(--ease-out) both; }
body.is-booting .head .wordmark { animation-delay: 0ms; }
body.is-booting .head .head__progress { animation-delay: 60ms; }
body.is-booting .side a { animation: boot-in 200ms var(--ease-out) both; }
body.is-booting .side .side__group:first-child a:nth-child(1) { animation-delay: 60ms; }
body.is-booting .side .side__group:first-child a:nth-child(2) { animation-delay: 80ms; }
body.is-booting .side .side__group:first-child a:nth-child(3) { animation-delay: 100ms; }
body.is-booting .side .side__group:first-child a:nth-child(4) { animation-delay: 120ms; }
body.is-booting .side .side__group:first-child a:nth-child(5) { animation-delay: 140ms; }
body.is-booting .side .side__group:first-child a:nth-child(6) { animation-delay: 160ms; }
body.is-booting .side .side__group:nth-child(2) a { animation-delay: 160ms; }
body.is-booting .main__inner.is-entering { animation-delay: 80ms; }
body.is-booting .head::after { animation: spectrum 26s linear infinite, boot-line 500ms var(--ease-out) both; }
@keyframes boot-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes boot-line { from { opacity: 0; transform: scaleX(0); } 70% { opacity: 1; } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .main__inner.is-entering, .deck .gauge, .deck .gauge::before, body.is-booting .head > *, body.is-booting .side a { animation: none; } }

/* ---- The commitment and the 90-day clock (views/home.js) ---- */
.commit { display: grid; gap: var(--s-3); padding-left: calc(var(--s-5) + 6px); }
.commit__title { font-size: var(--t-xl); margin: 0; }
.commit__form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; margin-top: var(--s-2); }
.commit__form .field { margin: 0; }
@media (max-width: 760px) { .commit__form { grid-template-columns: 1fr; } }
.clock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-5); align-items: center; padding: var(--s-4) var(--s-5); --surface: var(--bg-1); border-radius: var(--r-md); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.clock::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--neon); box-shadow: 0 0 14px 1px rgba(var(--neon-rgb), 0.6); }
.clock.is-late::before { background: var(--red); box-shadow: 0 0 14px 1px rgba(var(--red-rgb), 0.6); }
.clock__cell { display: grid; gap: 2px; min-width: 0; }
.clock__v { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.clock__v small { font-size: var(--t-sm); font-weight: 400; color: var(--fg-faint); text-shadow: none; }
.clock.is-late .clock__cell:nth-child(3) .clock__v { color: var(--red); text-shadow: 0 0 12px rgba(var(--red-rgb), 0.4); }
.clock__job { font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.4; }
.clock__city { font-weight: 600; }
@media (max-width: 860px) { .clock { grid-template-columns: auto minmax(0, 1fr); } .clock__cell--wide { grid-column: 1 / -1; } }

/* ---- Press and hover, held to the rules (research v5): press 0.97 in 150ms, hover only where there is a pointer ---- */
.btn, .gauge, .tool-card, .handoff__next, .mission, .guide__opener { transition-property: transform, box-shadow, background, border-color, color; transition-duration: 150ms; transition-timing-function: var(--ease-out); }
.btn:active, .gauge:active, .tool-card:active, .handoff__next:active, .mission:active { transform: scale(0.97); }
@media (hover: none) { .gauge:hover, .tool-card:hover, .handoff__next:hover { transform: none; box-shadow: var(--shadow-card); } }

/* ==========================================================================
   The Arsenal (views/tools.js): weapons on racks
   --------------------------------------------------------------------------
   A weapon is a plate: machined edges (.cut), a carbon face, the rack's light
   on one edge and in the glyph, a serial, a readiness LED. It leans toward the
   hand like the card. Racks are the steps of the job, in order.
   ========================================================================== */
.arsenal { display: grid; gap: var(--s-7); }
.rack { display: grid; gap: var(--s-4); }
.rack__head { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--s-3) var(--s-4); align-items: center; }
.rack__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); font-size: var(--t-md); color: var(--tone, var(--fg)); background: var(--bg-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--fg)) 45%, transparent), 0 0 16px -4px color-mix(in srgb, var(--tone, var(--fg)) 50%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--tone, var(--fg)) 60%, transparent); line-height: 1; }
.rack__head::after { content: ""; grid-column: 3; grid-row: 1; align-self: center; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--fg)) 45%, transparent), transparent); }
.rack__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.rack__line { color: var(--fg-dim); font-size: var(--t-sm); margin: 2px 0 0; max-width: 60ch; }
.rack__count { color: var(--fg-faint); grid-column: 4; grid-row: 1; }
.rack__head > .rack__n { grid-row: 1; } .rack__head > div { grid-row: 1; }
@media (max-width: 640px) { .rack__head { grid-template-columns: auto 1fr auto; } .rack__head::after { display: none; } }
.rack--volt { --tone: var(--neon-hot); --tone-rgb: var(--neon-rgb); } .rack--money { --tone: var(--money); --tone-rgb: var(--money-rgb); } .rack--red { --tone: var(--red); --tone-rgb: var(--red-rgb); } .rack--white { --tone: var(--instrument); --tone-rgb: 255, 255, 255; }
.rack__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: var(--s-4); perspective: 1200px; }

.weapon {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s-3); min-height: 250px; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 4px);
  color: var(--fg); text-decoration: none; overflow: hidden;
  background:
    radial-gradient(120% 90% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.07), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px),
    linear-gradient(165deg, #22222a 0%, #141418 55%, #1a1a20 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), var(--shadow-md);
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateZ(0);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  animation: weapon-in 480ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes weapon-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.weapon::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px; border-radius: 2px; background: var(--tone); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--tone) 55%, transparent); opacity: 0.6; transition: opacity 160ms; }
.weapon:hover { text-decoration: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent), 0 0 32px -8px color-mix(in srgb, var(--tone) 45%, transparent), var(--shadow-lg); }
.weapon:hover::before { opacity: 1; }
.weapon:active { transform: scale(0.97); }
.weapon__top { display: flex; justify-content: space-between; align-items: center; }
.weapon__serial { font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.08em; }
.weapon__led { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.weapon__led i { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-3); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); }
.weapon.is-live .weapon__led, .weapon__led.is-on { color: var(--money-hot); }
.weapon.is-live .weapon__led i, .weapon__led.is-on i { background: var(--money); box-shadow: 0 0 8px rgba(var(--money-rgb), 0.9); animation: guide-breathe 3s ease-in-out infinite; }
.weapon__glyph { color: var(--tone); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tone) 55%, transparent)); line-height: 0; margin-top: var(--s-1); transition: transform 200ms var(--ease-out); }
.weapon:hover .weapon__glyph { transform: translateY(-2px) scale(1.04); }
.weapon__glyph svg { width: 44px; height: 44px; }
.weapon__name { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; margin: 0; line-height: 1.15; }
.weapon__read { color: var(--fg-dim); font-size: var(--t-sm); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.weapon__foot { display: flex; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.weapon__foot .label { color: var(--fg-faint); }
.weapon--distro { --tone: var(--neon-hot); }
@media (prefers-reduced-motion: reduce) { .weapon { animation: none; transform: none; } .weapon.is-live .weapon__led i { animation: none; } }
.weapon--empty { grid-template-rows: auto 1fr auto; place-items: start; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 8px), var(--bg-0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); animation: none; pointer-events: none; }
.weapon--empty::before { display: none; }
.weapon--empty .weapon__empty { align-self: center; font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-faint); }
.weapon--empty .label { color: var(--fg-faint); opacity: 0.7; }

/* ---- The Vault as a cabinet (views/vault.js): drawers with a pull ---- */
.cabinet { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.cabinet__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.cabinet__head h3 { font-size: var(--t-lg); margin: 0; }
.cabinet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); }
.tray { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-3); min-height: 170px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px), linear-gradient(165deg, #22222a00, #141418), var(--bg-1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), var(--shadow-sm); color: var(--fg); transition: transform 160ms var(--ease-out), box-shadow 160ms; animation: weapon-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.tray:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), var(--shadow-md); }
.tray__top { display: flex; justify-content: space-between; align-items: center; }
.tray__n { font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.08em; }
.tray__tag { font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--instrument); }
.tray--data .tray__tag { color: var(--money-hot); }
.tray__name { font-size: var(--t-md); font-weight: 600; margin: 0; line-height: 1.25; }
.tray__note { color: var(--fg-dim); font-size: var(--t-xs); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tray__pull { display: block; justify-self: center; width: 44px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #3a3a44, #1e1e25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.6); margin-top: var(--s-2); }
.tray--data .tray__pull { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px -2px rgba(var(--money-rgb), 0.6); }
.vault-group details { animation: none; }

/* ---- Upgrades (views/extras.js): modules ---- */
.extras__card { animation: weapon-in 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.extras__slot { display: block; font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.08em; margin-bottom: 4px; }

/* Arsenal and Vault, finish: the glyph sits in its own lit well; trays carry a file glyph. */
.weapon__glyph { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent); }
.weapon__glyph svg { width: 36px; height: 36px; }
.weapon:hover .weapon__glyph { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent), 0 0 18px -4px color-mix(in srgb, var(--tone) 60%, transparent); }
.weapon { background-image: radial-gradient(120% 90% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.07), transparent 55%), linear-gradient(180deg, transparent 0 calc(100% - 3px), color-mix(in srgb, var(--tone) 35%, transparent) calc(100% - 3px)), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px), linear-gradient(165deg, #22222a 0%, #141418 55%, #1a1a20 100%); }
.tray__top::before { content: ""; width: 14px; height: 18px; border-radius: 2px 5px 2px 2px; background: linear-gradient(135deg, var(--instrument) 0 60%, rgba(255, 255, 255, 0.55) 60%); opacity: 0.55; margin-right: 8px; }
.tray__top { justify-content: flex-start; gap: 0; }
.tray__top .tray__tag { margin-left: auto; }
.tray--data .tray__top::before { background: linear-gradient(135deg, var(--money) 0 60%, rgba(61, 220, 132, 0.5) 60%); }

/* ==========================================================================
   The spine (views/route.js shipMap): the course on one line
   ========================================================================== */
.ship { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); --surface: var(--bg-1); border-radius: var(--r-lg); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.ship::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 120%, rgba(var(--neon-rgb), 0.06), transparent 70%); pointer-events: none; }
.ship__head { display: flex; justify-content: space-between; align-items: baseline; }
.ship__head a { color: var(--fg-dim); text-decoration: none; } .ship__head a:hover { color: var(--fg); }
.route { position: relative; padding: 14px 0 0; }
.route__line { position: absolute; left: calc(5% + 0px); right: 5%; top: 28px; height: 2px; background: var(--bg-3); border-radius: 2px; }
.route__line i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--lit, 0%); border-radius: 2px; background: linear-gradient(90deg, var(--neon), var(--neon-hot)); box-shadow: 0 0 12px rgba(var(--neon-rgb), 0.7); transition: width 900ms var(--ease-out); }
.route__stations { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.station { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--fg-dim); min-width: 0; padding: 0 2px; animation: boot-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.station:hover { text-decoration: none; color: var(--fg); }
.station__dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-0); box-shadow: inset 0 0 0 2px var(--bg-3); transition: box-shadow 160ms, transform 160ms var(--ease-out); }
.station__dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-3); }
.station:hover .station__dot { transform: scale(1.08); }
.station__n { font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--fg-faint); }
.station__t { font-size: var(--t-2xs); text-align: center; line-height: 1.25; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.station__s { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.station--done .station__dot { box-shadow: inset 0 0 0 2px var(--neon); } .station--done .station__dot i { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.8); }
.station--done .station__n, .station--done .station__s { color: var(--neon-hot); }
.station--now .station__dot { box-shadow: inset 0 0 0 2px var(--neon), 0 0 0 5px rgba(var(--neon-rgb), 0.18), 0 0 18px rgba(var(--neon-rgb), 0.55); animation: station-pulse 2.2s ease-in-out infinite; } .station--now .station__dot i { background: var(--neon); }
.station--now { color: var(--fg); } .station--now .station__n { color: var(--neon-hot); } .station--now .station__s { color: var(--neon-hot); }
@keyframes station-pulse { 50% { box-shadow: inset 0 0 0 2px var(--neon), 0 0 0 9px rgba(var(--neon-rgb), 0.08), 0 0 26px rgba(var(--neon-rgb), 0.7); } }
.station--open .station__dot { box-shadow: inset 0 0 0 2px var(--instrument); } .station--open .station__dot i { background: var(--instrument); }
.station--ready .station__dot { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.station--locked { opacity: 0.45; }
.station--locked .station__dot i { background: transparent; box-shadow: inset 0 0 0 1px var(--fg-faint); }
/* The current level's panel hangs from the lit station. */
.hangs { position: relative; margin-top: calc(-1 * var(--s-2)); }
.hangs::before { content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.7); }
@media (max-width: 760px) { .route__stations { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--s-4); } .route__line { display: none; } .station__t { display: none; } }
@media (prefers-reduced-motion: reduce) { .station { animation: none; } .station--now .station__dot { animation: none; } .route__line i { transition: none; } }

/* ---- Foil on the plates (Arsenal weapons, Vault trays): the card's holographic shine, following the pointer ---- */
.weapon, .tray { position: relative; transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateZ(0); }
.foil { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(110deg, #ff5acd 0%, #ffd166 5%, #c8ff4a 10%, #7df9ff 15%, #b48cff 20%, #ff5acd 25%); background-size: 400% 400%; background-position: var(--gx, 50%) var(--gy, 50%); mix-blend-mode: color-dodge; filter: brightness(0.5) contrast(1.4) saturate(0.8); opacity: 0; transition: opacity 260ms var(--ease); }
.weapon.is-live .foil, .tray.is-live .foil { opacity: 0.35; }
.weapon.is-live, .tray.is-live { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 28px -6px rgba(255, 255, 255, 0.25), var(--shadow-lg); }
.cabinet__grid { perspective: 1200px; }
.tray { transition: transform 160ms var(--ease-out), box-shadow 160ms; }

/* ==========================================================================
   The game layer (app/game.js): rank, patches, the boot, the award, the seal.
   ========================================================================== */

/* Rank chip in the header: five bars (one per rank), the name, and the bar to the next. */
.rank { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: var(--s-2); align-items: center; padding: 0.3rem 0.7rem; margin-right: var(--s-2); border: 1px solid var(--glass-edge); border-top-color: var(--glass-top); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); box-shadow: var(--keycap); }
.rank__bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.rank__bars i { width: 4px; height: 10px; border-radius: 1px; background: var(--bg-3); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.rank__bars i:nth-child(2) { height: 12px; } .rank__bars i:nth-child(3) { height: 14px; } .rank__bars i:nth-child(4) { height: 16px; } .rank__bars i:nth-child(5) { height: 18px; }
.rank__bars i.is-on { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.6); }
.rank__text { display: grid; line-height: 1.05; }
.rank__text b { font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); }
.rank__text small { font-size: 0.6rem; letter-spacing: 0.06em; color: var(--fg-faint); font-family: var(--font-mono); }
.rank__bar { grid-column: 1 / -1; height: 2px; margin-top: 4px; border-radius: 1px; background: var(--bg-3); overflow: hidden; }
.rank__bar i { display: block; height: 100%; background: var(--neon); box-shadow: 0 0 6px rgba(var(--neon-rgb), 0.7); transition: width 600ms var(--ease-out); }
.rank__bar--wide { height: 4px; margin: var(--s-2) 0; }

/* Patches: round plates. Earned ones are lit and carry the card's foil; sealed ones are dark glass with the mark barely there. */
.patch { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.patch__ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-strong); box-shadow: var(--keycap), inset 0 0 0 5px var(--bg-1), inset 0 0 0 6px var(--line); color: var(--fg-faint); overflow: hidden; transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.patch__mark { display: grid; width: 26px; height: 26px; opacity: 0.35; }
.patch__mark svg { width: 100%; height: 100%; }
.patch__name { font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.patch.is-earned .patch__ring { color: var(--neon); border-color: rgba(var(--neon-rgb), 0.6); box-shadow: var(--keycap), inset 0 0 0 5px var(--bg-1), inset 0 0 0 6px rgba(var(--neon-rgb), 0.5), 0 0 24px -6px rgba(var(--neon-rgb), 0.6); }
.patch.is-earned .patch__mark { opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--neon-rgb), 0.7)); }
.patch.is-earned .patch__name { color: var(--fg); }
.patch.is-earned .foil { opacity: 0.28; animation: foil-drift 6s ease-in-out infinite alternate; }
.patch:hover .patch__ring { transform: translateY(-2px); }
.patch--lg .patch__ring { width: 128px; height: 128px; } .patch--lg .patch__mark { width: 52px; height: 52px; }
@keyframes foil-drift { from { background-position: 20% 30%; } to { background-position: 80% 70%; } }

/* Mission Control on Home. */
.lab { display: grid; gap: var(--s-4); }
.lab__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-3); }
.lab__cell { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--inner-light); }
.lab__big { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.01em; }
.lab__check { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fg-faint); box-sizing: border-box; }
.lab__objective.is-done { border-color: rgba(var(--money-rgb), 0.5); box-shadow: var(--inner-light), 0 0 30px -10px rgba(var(--money-rgb), 0.6); }
.lab__objective.is-done .lab__check { border-color: var(--money); background: var(--money); box-shadow: 0 0 10px rgba(var(--money-rgb), 0.8); }
.lab__patches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); padding-top: var(--s-2); }
@media (max-width: 720px) { .lab__grid { grid-template-columns: 1fr; } .lab__patches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The boot: the lab powering up. Six readouts arrive in order over the shell, then it lifts. */
.boot { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--bg-0); pointer-events: none; animation: boot-fade 1500ms steps(1) both; }
.boot.is-leaving { animation: levelup-out 380ms var(--ease) both; }
.boot__inner { display: grid; gap: 6px; font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.boot__row { display: grid; grid-template-columns: 7ch 1fr auto; gap: var(--s-3); align-items: center; opacity: 0; animation: boot-row 240ms var(--ease-out) both; animation-delay: calc(var(--i) * 180ms + 80ms); }
.boot__k { color: var(--fg-faint); }
.boot__v { color: var(--fg); min-width: 22ch; }
.boot__row i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.8); animation: boot-led 240ms var(--ease-out) both; animation-delay: calc(var(--i) * 180ms + 200ms); }
.boot__row:last-child .boot__k { color: var(--neon); }
@keyframes boot-fade { to { opacity: 1; } }
@keyframes boot-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes boot-led { from { transform: scale(0); } to { transform: scale(1); } }


/* The seal: a level not yet opened. Stamp in the corner, dark glass, and a break when it opens. */
.sealed { position: relative; display: grid; gap: var(--s-4); overflow: hidden; }
.sealed::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, 0.025) 14px 16px); pointer-events: none; }
.sealed__stamp { position: absolute; top: var(--s-4); right: var(--s-4); display: grid; justify-items: end; gap: 2px; padding: 0.35rem 0.6rem; border: 1.5px solid var(--red); border-radius: var(--r-sm); color: var(--red); font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(6deg); opacity: 0.85; box-shadow: 0 0 18px -6px rgba(var(--red-rgb), 0.6); }
.sealed__stamp .dot-num { font-size: var(--t-sm); letter-spacing: 0.08em; }
.sealed.is-opening { animation: seal-open 650ms var(--ease-out) both; }
.sealed.is-opening .sealed__stamp { animation: seal-break 500ms var(--ease-out) both; }
@keyframes seal-open { 0% { box-shadow: var(--shadow-card); } 40% { box-shadow: var(--shadow-card), 0 0 0 2px rgba(var(--neon-rgb), 0.9), 0 0 60px -8px rgba(var(--neon-rgb), 0.8); } 100% { box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--neon-rgb), 0.4); opacity: 0.4; } }
@keyframes seal-break { to { transform: rotate(-14deg) scale(1.3); opacity: 0; } }
.side a.is-locked .side__pct::before { content: "sealed"; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(234, 245, 255, 0.5); }

@media (prefers-reduced-motion: reduce) { .boot, .patch.is-earned .foil, .sealed.is-opening, .sealed.is-opening .sealed__stamp { animation: none; } }

/* ==========================================================================
   Two foundations the best current sites share (research, round 14):
   surfaces that notice the hand, and content that arrives as you reach it.
   ========================================================================== */

/* Attentive surfaces: every card carries a faint light where the pointer is (main.js sets --mx/--my on the body). Fine pointers only. */
@media (hover: hover) and (pointer: fine) {
  .card { position: relative; }
  .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.06), transparent 60%); transition: opacity 280ms var(--ease-out); }
  .card:hover::after { opacity: 1; }
}

/* Arriving content: lesson blocks and lower cards rise as they enter the viewport. Scroll-driven where supported; a plain fade elsewhere. */
@supports (animation-timeline: view()) {
  .lesson__body > *, .callout, .roadmap, .hangs { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  @keyframes arrive { from { opacity: 0.15; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .lesson__body > *, .callout, .roadmap, .hangs { animation: none; } }
}

/* The sound switch: four bars, a meter that only moves when sound is on. */
.sound { display: inline-flex; align-items: flex-end; gap: 2px; height: 30px; padding: 0 10px; margin-right: var(--s-2); border: 1px solid var(--glass-edge); border-top-color: var(--glass-top); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); box-shadow: var(--keycap); cursor: pointer; }
.sound { align-items: center; gap: 3px; color: var(--fg-faint); }
.sound__glyph { margin-right: 4px; color: var(--fg-dim, rgba(234, 245, 255, 0.72)); }
.sound__wave { opacity: 0; transition: opacity 160ms; }
.sound.is-on .sound__wave { opacity: 1; } .sound.is-on .sound__slash { display: none; }
.sound i { width: 3px; height: 6px; border-radius: 1px; background: var(--fg-faint); transition: background 160ms; align-self: flex-end; margin-bottom: 8px; }
.sound.is-on i { background: var(--scan); box-shadow: 0 0 6px rgba(var(--scan-rgb), 0.7); animation: sound-bar 900ms ease-in-out infinite alternate; }
.sound.is-on i:nth-child(3) { animation-delay: 150ms; } .sound.is-on i:nth-child(4) { animation-delay: 300ms; } .sound.is-on i:nth-child(5) { animation-delay: 450ms; }
@keyframes sound-bar { from { height: 5px; } to { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .sound.is-on i { animation: none; height: 10px; } }

/* Tactile: a fine grain over every panel, so the surfaces read as material, not flat fills. */
.card:not(.sealed):not(.is-scanning)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.045; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.card { position: relative; }

/* Reading is the progress input: the finish waits, then lights when the reader reaches it. */
.lesson__actions .btn.is-ahead { opacity: 0.55; filter: saturate(0.4); transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.lesson__actions .btn.is-reached { opacity: 1; filter: none; animation: reached 900ms var(--ease-out) both; }
@keyframes reached { 0% { box-shadow: 0 0 0 0 rgba(var(--neon-rgb), 0.7); } 100% { box-shadow: 0 0 0 18px rgba(var(--neon-rgb), 0); } }
/* A frozen day in the streak: covered by a freeze, lit scan-blue instead of volt. */
.streak__week i.is-frozen, .gauge__leds i.is-frozen { background: var(--scan); box-shadow: 0 0 6px rgba(var(--scan-rgb), 0.7); }

/* ==========================================================================
   Round 19: the point, lit numbers, slots everywhere, the rooms have light.
   ========================================================================== */

/* The point: one sentence under the lesson title, set apart, so the 80 and the 130 both leave with it. */
.point { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: baseline; max-width: var(--measure); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-left: 2px solid var(--neon); background: linear-gradient(90deg, rgba(var(--neon-rgb), 0.08), transparent 70%); border-radius: 0 var(--r-md) var(--r-md) 0; }
.point__k { color: var(--neon-hot); white-space: nowrap; }
.point__t { font-size: var(--t-md); font-weight: 500; color: var(--fg); line-height: 1.45; }
@media (max-width: 560px) { .point { grid-template-columns: 1fr; gap: var(--s-1); } }

/* The numbers section reads as an instrument: every figure lit in its meaning. */
.callout--note .lesson__body .num { font-family: var(--font-mono); font-weight: 700; padding: 0 0.15em; border-radius: 3px; font-variant-numeric: tabular-nums; }
.callout--note .lesson__body .num--in { color: var(--money); text-shadow: 0 0 10px rgba(var(--money-rgb), 0.35); }
.callout--note .lesson__body .num--verdict { color: var(--neon-hot); text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.35); }
.callout--note .lesson__body .num--fact { color: var(--instrument); text-shadow: var(--instrument-glow); }

/* Slots everywhere: every plain field in a tool takes the console look (label inside, recessed, scan-blue on focus), so the Pipeline, the Finder and the Scripts match the Scorecard. */
.tool-form .field:not(.field--inline), .pipeline .field:not(.field--inline), .finder .field:not(.field--inline), .scripts .field:not(.field--inline), .drawer .field:not(.field--inline) { position: relative; gap: 2px; min-height: 58px; padding: 9px 12px 8px; border-radius: var(--r-sm); background: var(--bg-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 160ms var(--ease-out); }
.tool-form .field:not(.field--inline) > label, .pipeline .field:not(.field--inline) > label, .finder .field:not(.field--inline) > label, .scripts .field:not(.field--inline) > label, .drawer .field:not(.field--inline) > label { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); font-family: var(--font-mono); font-weight: 400; }
.tool-form .field:not(.field--inline) > label .field__hint, .pipeline .field:not(.field--inline) > label .field__hint { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: var(--t-xs); }
.tool-form .field:not(.field--inline) .input, .tool-form .field:not(.field--inline) .select, .pipeline .field:not(.field--inline) .input, .pipeline .field:not(.field--inline) .select, .finder .field:not(.field--inline) .input, .finder .field:not(.field--inline) .select, .scripts .field:not(.field--inline) .input, .scripts .field:not(.field--inline) .select, .drawer .field:not(.field--inline) .input, .drawer .field:not(.field--inline) .select { border: 0; padding: 0; background-color: transparent; box-shadow: none; font-size: var(--t-md); min-height: 0; }
.tool-form .field:not(.field--inline) .select, .pipeline .field:not(.field--inline) .select, .finder .field:not(.field--inline) .select, .scripts .field:not(.field--inline) .select, .drawer .field:not(.field--inline) .select { padding-right: 1.6rem; background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; }
.tool-form .field:not(.field--inline):focus-within, .pipeline .field:not(.field--inline):focus-within, .finder .field:not(.field--inline):focus-within, .scripts .field:not(.field--inline):focus-within, .drawer .field:not(.field--inline):focus-within { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--scan-rgb), 0.7), 0 0 0 3px rgba(var(--scan-rgb), 0.14), 0 0 24px -8px rgba(var(--scan-rgb), 0.6); }
.tool-form .field:not(.field--inline):focus-within > label, .pipeline .field:not(.field--inline):focus-within > label, .finder .field:not(.field--inline):focus-within > label, .scripts .field:not(.field--inline):focus-within > label, .drawer .field:not(.field--inline):focus-within > label { color: var(--scan); }
.tool-form .field:not(.field--inline) .input:focus, .pipeline .field:not(.field--inline) .input:focus, .finder .field:not(.field--inline) .input:focus, .scripts .field:not(.field--inline) .input:focus, .drawer .field:not(.field--inline) .input:focus, .tool-form .field:not(.field--inline) .select:focus, .pipeline .field:not(.field--inline) .select:focus, .finder .field:not(.field--inline) .select:focus, .scripts .field:not(.field--inline) .select:focus, .drawer .field:not(.field--inline) .select:focus { box-shadow: none; border: 0; }

/* The rooms have light. Each area's color now reaches the whole room: a stronger bloom, a second bloom from the far corner, a tinted hairline under the header, and the view's edge. Volt for the course, green in the Arsenal, white in the Vault, red on the hotline, scan blue in the Garage. */
body[data-area="extras"] { --area-rgb: var(--scan-rgb); }
.bloom { background: radial-gradient(closest-side, rgba(var(--area-rgb), 0.16), rgba(var(--area-rgb), 0.05) 45%, transparent 72%); }
.bloom::after { content: ""; position: fixed; right: -30vmax; bottom: -34vmax; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--area-rgb), 0.10), rgba(var(--area-rgb), 0.03) 45%, transparent 72%); transition: background 900ms var(--ease); }
.head::after { background: linear-gradient(90deg, transparent, rgba(var(--area-rgb), 0.9) 30%, rgba(var(--area-rgb), 0.9) 70%, transparent); background-size: 100% 100%; animation: none; opacity: 0.6; transition: background 900ms var(--ease); }
.main { box-shadow: inset 1px 0 0 rgba(var(--area-rgb), 0.12); transition: box-shadow 900ms var(--ease); }
.view-head .eyebrow, .label--accent { color: rgb(var(--area-rgb)); }

/* The reading level (lesson.js levelControl): Plain hides the lesson and the numbers; only Deep shows "Go deeper". */
body[data-level="plain"] .lvl-full { display: none; }
body:not([data-level="deep"]) .lvl-deep { display: none; }
.level { display: inline-flex; align-items: center; gap: var(--s-2); }
.level__k { color: var(--fg-faint); }
.segmented--sm button { padding: 0.25rem 0.65rem; font-size: var(--t-xs); }
.callout--plain { --edge: var(--scan); }
.callout--plain .callout__title { color: var(--scan-hot); }
.callout--plain .lesson__body { font-size: var(--t-md); }
.callout--deeper { --edge: var(--instrument); background: var(--bg-0); }
.callout--deeper .callout__title { color: var(--fg); }

/* ==========================================================================
   The fleet readout (views/fleet.js): real machines, ranked, as readings.
   ========================================================================== */
.deck--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.deck--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 760px) { .deck--2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .deck--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fleet__section { display: grid; gap: var(--s-4); }
.fleet__section h3 { font-size: var(--t-lg); }
.fleet__list { display: grid; gap: 6px; }
.fleet__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: var(--s-3); align-items: center; animation: gauge-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.fleet__label { display: grid; line-height: 1.2; min-width: 0; }
.fleet__label span { font-size: var(--t-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet__label small { font-size: var(--t-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet__bar { height: 10px; border-radius: 3px; background: var(--bg-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; }
.fleet__bar i { display: block; height: 100%; border-radius: 3px; background: var(--instrument); box-shadow: 0 0 10px rgba(255, 255, 255, 0.35); transition: width 700ms var(--ease-out); }
.fleet__row--money .fleet__bar i { background: var(--money); box-shadow: 0 0 10px rgba(var(--money-rgb), 0.6); }
.fleet__row--red .fleet__bar i { background: var(--red); box-shadow: 0 0 10px rgba(var(--red-rgb), 0.6); }
.fleet__v { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-sm); color: var(--instrument); text-shadow: var(--instrument-glow); white-space: nowrap; min-width: 7ch; text-align: right; }
.fleet__row--money .fleet__v { color: var(--money); } .fleet__row--red .fleet__v { color: var(--red); }
.fleet__timing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-5); align-items: start; }
@media (max-width: 800px) { .fleet__timing { grid-template-columns: 1fr; } .fleet__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; } }
/* Phones: the label gets the full width and wraps (no four identical "Conveni…" rows); the bar and figure sit under it.
   The section's date label drops under its heading instead of standing in a one-word column. */
@media (max-width: 560px) {
  .fleet__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .fleet__label { grid-column: 1 / -1; }
  .fleet__label span, .fleet__label small { white-space: normal; overflow: visible; }
  .fleet__section .card__head { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}
.fleet__hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 150px; padding-bottom: 18px; position: relative; }
.fleet__hour { position: relative; display: grid; align-items: end; height: 100%; }
.fleet__hour i { display: block; border-radius: 2px 2px 0 0; background: var(--bg-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: height 700ms var(--ease-out); }
.fleet__hour.is-peak i { background: var(--money); box-shadow: 0 0 12px rgba(var(--money-rgb), 0.6); }
.fleet__hour span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 0.52rem; color: var(--fg-faint); }
.fleet__hour:nth-child(odd) span { visibility: hidden; }
.fleet__hour.is-peak span { visibility: visible; color: var(--money); }
.tray--open { box-shadow: 0 0 0 1px rgba(var(--money-rgb), 0.5), 0 0 28px -8px rgba(var(--money-rgb), 0.5), var(--shadow-sm); }
.tray--open .tray__tag { color: var(--money); }
.vault__find { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.vault__search { width: 100%; padding: 0.8rem 1rem; border: 0; border-radius: var(--r-md); background: var(--bg-0); color: var(--fg); font: inherit; font-size: var(--t-md); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.vault__search:focus { outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--scan-rgb), 0.7), 0 0 0 3px rgba(var(--scan-rgb), 0.14); }

/* ==========================================================================
   The tactical plot (lib/tactical.js): the Lead Finder's map.
   ========================================================================== */
.tac { position: relative; height: clamp(360px, 52vh, 560px); padding: 0; overflow: hidden; --surface: #0c0c10; box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 80px rgba(0, 0, 0, 0.6); }
.tac::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%); }
.tac__canvas { display: block; width: 100%; height: 100%; }
.tac__tip { position: absolute; z-index: 2; padding: 4px 8px; border-radius: var(--r-sm); background: rgba(11, 11, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--fg); font-size: var(--t-xs); font-family: var(--font-mono); pointer-events: none; white-space: nowrap; transform: translateY(-100%); }
.tac__legend { position: absolute; z-index: 2; left: var(--s-3); bottom: var(--s-3); display: flex; flex-wrap: wrap; gap: 4px var(--s-3); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); font-family: var(--font-mono); max-width: 70%; }
.tac__legend span { display: inline-flex; align-items: center; gap: 5px; }
.tac__legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tac__legend-pipe { background: transparent !important; box-shadow: 0 0 0 1.5px var(--neon) !important; }
.tac__corner { position: absolute; z-index: 2; top: var(--s-3); left: var(--s-3); display: grid; gap: 1px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.tac__corner b { color: var(--fg); font-weight: 600; }
.tac__corner span::before { content: "● "; color: var(--neon); }
.venue.is-selected { box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.6), 0 0 24px -8px rgba(var(--neon-rgb), 0.5); }
@media (max-width: 640px) { .tac { height: 340px; } .tac__legend { max-width: 100%; } }

/* ==========================================================================
   The campus (views/campus.js): the University as a floor plan.
   ========================================================================== */
a.room:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--l), 0.7), 0 0 36px -8px rgba(var(--l), 0.6); }
@media (max-width: 720px) { .campus__plan { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 72px; } .room { grid-column: calc((var(--x) / 2) + 1) / span max(2, calc(var(--w) / 2)); grid-row: auto; } }

/* ==========================================================================
   The lobby (views/lobby.js): the room you stand in. Full-bleed campus loop,
   your operator, name and rank, the HUD on the left, the rail of doors along
   the bottom. Panels open in place over the rail.
   ========================================================================== */
.lob { position: relative; min-height: min(84vh, 880px); margin: calc(-1 * var(--s-5)) calc(-1 * var(--gutter)) var(--s-5); border-radius: 0 0 28px 28px; overflow: hidden; background: #0a1430; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
.lob__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: 0; }
.lob__bg--scene { object-position: 60% 50%; }
.lob__stage--scene { min-height: min(60vh, 600px); }
.lob__stage--scene .lob__equipped { right: 12%; bottom: 18%; }
.lob__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 6, 13, 0.4), transparent 22%, transparent 58%, rgba(4, 6, 13, 0.85) 100%), linear-gradient(90deg, rgba(4, 6, 13, 0.5), rgba(4, 6, 13, 0.1) 38%, transparent 52%); pointer-events: none; }
.lob__top { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--gutter) 0; }
.lob__name { display: grid; gap: 4px; justify-items: start; background: rgba(4, 6, 13, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; padding: 10px 16px; color: #fff; font: inherit; cursor: pointer; backdrop-filter: blur(10px); text-align: left; }
.lob__name:hover { border-color: rgba(var(--neon-rgb), 0.8); box-shadow: 0 0 24px -6px rgba(var(--neon-rgb), 0.7); }
.lob__name.is-unnamed .lob__name-text { color: var(--volt-hot); }
.lob__name-text { font-stretch: var(--signage-stretch); font-weight: 800; font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.lob__rank { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
.lob__sex { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: rgba(4, 6, 13, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); align-self: flex-start; }
.lob__sex button { font: inherit; font-size: var(--t-xs); font-weight: 700; color: rgba(255, 255, 255, 0.7); background: none; border: 0; padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer; }
.lob__sex button[aria-pressed="true"] { background: var(--neon); color: #fff; box-shadow: 0 0 14px rgba(var(--neon-rgb), 0.6); }
.lob__stage { position: relative; z-index: 2; display: grid; justify-items: center; align-items: end; min-height: 0; }
.lob__ground { position: absolute; left: 50%; bottom: 6%; width: 36%; max-width: 420px; height: 8%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--neon-rgb), 0.5), rgba(var(--neon-rgb), 0.1) 50%, transparent 72%); filter: blur(3px); }
.lob__op { position: relative; height: min(62vh, 640px); width: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.7)); transform-origin: 50% 100%; animation: lob-breathe 4.6s ease-in-out infinite; }
@keyframes lob-breathe { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(0.4deg); } }
.lob__equipped { position: absolute; right: calc(50% - min(31vh, 320px) - 70px); bottom: 14%; display: grid; gap: 8px; }
.lob__equipped img { width: 48px; height: 48px; padding: 5px; border-radius: 12px; background: rgba(4, 6, 13, 0.55); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.7), 0 0 16px rgba(var(--neon-rgb), 0.45); backdrop-filter: blur(6px); animation: lob-pop 400ms var(--ease-out) both; }
@keyframes lob-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.lob__hud { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: var(--s-3); max-width: 34ch; }
.lob__title { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 12px 40px rgba(0, 0, 0, 0.8); text-wrap: balance; }
.lob__go { justify-self: start; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 44px -6px rgba(var(--neon-rgb), 0.9), 0 14px 34px -12px rgba(0, 0, 0, 0.9); }
.lob__stats { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lob__stats li { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(4, 6, 13, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); }
.lob__stats img { grid-row: 1 / 3; width: 36px; height: 36px; object-fit: contain; }
.lob__stats b { font-size: 1.3rem; line-height: 1; color: #fff; font-weight: 800; }
.lob__stats span { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); }
.lob__rail { position: relative; z-index: 4; display: flex; gap: 8px; padding: var(--s-3) var(--gutter) var(--s-4); overflow-x: auto; scrollbar-width: none; }
.lob__rail::-webkit-scrollbar { display: none; }
.lob__door { position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; min-width: 104px; padding: 10px 10px 8px; border-radius: 16px; background: rgba(4, 6, 13, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font: inherit; text-decoration: none; cursor: pointer; backdrop-filter: blur(10px); transition: transform 160ms var(--ease-out), border-color 160ms, box-shadow 160ms; }
.lob__door img { width: 56px; height: 56px; object-fit: contain; transition: transform 200ms var(--ease-out), filter 200ms; }
.lob__door:hover, .lob__door:focus-visible { transform: translateY(-4px); border-color: rgba(var(--neon-rgb), 0.9); box-shadow: 0 0 30px -4px rgba(var(--neon-rgb), 0.7); outline: none; }
.lob__door:hover img { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(var(--neon-rgb), 0.9)); }
.lob__door-name { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em; }
.lob__door.is-soon img { filter: grayscale(0.6) brightness(0.7); }
.lob__soon { position: absolute; top: -8px; right: -4px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); background: var(--neon); color: #fff; }
.lob__panel { position: relative; z-index: 4; padding: 0 var(--gutter); }
.lob__panel[hidden] { display: none; }
.lpanel { background: rgba(4, 6, 13, 0.78); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; padding: var(--s-4) var(--s-5); backdrop-filter: blur(14px); animation: lpanel-in 260ms var(--ease-out) both; }
@keyframes lpanel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lpanel__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.lpanel__head > :nth-child(2) { margin-left: auto; }
.lpanel__close { background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lpanel__p { margin: 0; color: var(--fg-dim); max-width: 60ch; }
.inv__grid--wide { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.inv__slot:disabled { cursor: default; }
.inv__slot.is-worn { box-shadow: inset 0 0 0 2px #fff, 0 0 22px -2px rgba(var(--neon-rgb), 0.9); }
.inv__worn { position: absolute; left: 5px; top: 4px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-pill); background: #fff; color: var(--volt-deep); }
.friends .input { min-width: min(100%, 360px); }
@media (max-width: 860px) {
  .lob { min-height: 0; margin-inline: calc(-1 * var(--gutter)); border-radius: 0 0 20px 20px; }
  .lob__hud { position: relative; left: auto; top: auto; transform: none; padding: var(--s-4) var(--gutter) 0; max-width: none; order: 2; }
  .lob__stage { order: 1; padding-top: var(--s-3); }
  .lob__op { height: min(52vh, 440px); animation: none; }
  .lob__equipped { right: var(--gutter); bottom: auto; top: 0; grid-auto-flow: row; }
  .lob__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lob__stats li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .lob__stats img { grid-row: auto; }
  .lob__name-text { font-size: 1.3rem; }
}

/* ---- Name your operator ---- */
.namebox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--gutter); background: rgba(4, 6, 13, 0.7); backdrop-filter: blur(10px); animation: lpanel-in 240ms var(--ease-out) both; }
.namebox__inner { width: min(100%, 440px); display: grid; gap: var(--s-3); justify-items: center; text-align: center; padding: var(--s-6) var(--s-5); border-radius: 22px; background: var(--bg-1); box-shadow: 0 0 0 1px var(--line-strong), 0 0 80px -20px rgba(var(--neon-rgb), 0.6), var(--shadow-lg); }
.namebox__inner h2 { margin: 0; font-size: var(--t-2xl); }
.namebox__input { width: 100%; font-size: 1.4rem; font-weight: 700; text-align: center; letter-spacing: 0.04em; }
.namebox__note { margin: 0; font-size: var(--t-sm); color: var(--fg-dim); min-height: 1.4em; }
.namebox__note.is-bad { color: var(--red-hot); }

/* ---- Notes from Akash (app/notes.js) ----
   A letter in two columns: the words on the left, Akash's cut-out portrait in its own column on the right, anchored to the
   bottom edge. The portrait never sits over the text. Phones drop the portrait and show his face beside the "from" line. */
.note { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--gutter); background: rgba(4, 8, 20, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lpanel-in 240ms var(--ease-out) both; overflow-y: auto; }
.note__inner { position: relative; width: min(100%, 720px); display: grid; grid-template-columns: minmax(0, 1fr) 260px; overflow: hidden; border-radius: 22px; background: linear-gradient(160deg, #0d1d40, #071027 70%); box-shadow: 0 0 0 1px rgba(144, 195, 255, 0.4), 0 0 80px -20px rgba(34, 132, 255, 0.55), var(--shadow-lg); }
.note__text { display: grid; gap: var(--s-3); align-content: center; padding: var(--s-6) var(--s-5) var(--s-6) var(--s-6); min-width: 0; }
.note__from { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(234, 245, 255, 0.78); }
.note__face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 4%; background: #0b1a3d; box-shadow: 0 0 0 2px rgba(56, 165, 255, 0.8); display: none; }
.note__inner h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.02; text-wrap: balance; }
.note__inner p { margin: 0; font-size: var(--t-md); line-height: 1.55; text-wrap: pretty; }
.note__sign { color: rgba(234, 245, 255, 0.72); font-style: italic; }
.note__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-2); }
.note__portrait { position: relative; align-self: stretch; min-height: 100%; background: radial-gradient(120% 70% at 50% 100%, rgba(34, 132, 255, 0.35), transparent 70%); }
.note__portrait img { position: absolute; left: 46%; bottom: 0; height: min(94%, 420px); width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); pointer-events: none; }
@media (max-width: 640px) {
  .note__inner { grid-template-columns: 1fr; }
  .note__portrait { display: none; }
  .note__face { display: block; }
  .note__text { padding: var(--s-5); }
}

/* ---- The classroom ---- */
.room__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #060a16 image-set(url("../img/hall-960.webp") 1x, url("../img/hall-1600.webp") 2x) center / cover; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.room__screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.room__idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-2); text-align: center; padding: var(--s-6); background: linear-gradient(180deg, rgba(4, 6, 13, 0.3), rgba(4, 6, 13, 0.85)); }
.room__idle h2 { margin: 0; font-size: var(--t-xl); }
.room__idle p { margin: 0; max-width: 48ch; }
.room__live { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(4, 6, 13, 0.7); color: #fff; }
.room__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.room__react { display: flex; gap: 8px; }
.room__react button { font-size: 1.3rem; width: 48px; height: 48px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-strong); cursor: pointer; transition: transform 140ms var(--ease-out); }
.room__react button:hover { transform: translateY(-3px) scale(1.08); border-color: rgba(var(--neon-rgb), 0.8); }
.room__seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.seat { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; align-content: end; gap: 2px; padding: 8px 6px; border-radius: 14px; background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow: inset 0 0 0 1px var(--line); }
.seat--open { color: var(--fg-faint); }
.seat--you { background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.22), var(--bg-1)); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.8), 0 0 24px -4px rgba(var(--neon-rgb), 0.6); border: 0; cursor: default; font: inherit; color: #fff; }
.seat--you img { height: 70%; width: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6)); }
.seat__name { font-weight: 800; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.seat__rank { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
.seat__num { font-size: var(--t-sm); }
.seat__react { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: 1.6rem; animation: seat-rise 1.4s var(--ease-out) both; pointer-events: none; }
@keyframes seat-rise { from { opacity: 0; transform: translate(-50%, 10px) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } to { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.chat { display: grid; grid-template-rows: auto 1fr auto; height: min(70vh, 640px); border-radius: 18px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.chat__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat__feed { overflow-y: auto; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.chat__sys { font-size: var(--t-xs); color: var(--fg-faint); }
.chat__msg { display: grid; gap: 2px; font-size: var(--t-sm); }
.chat__msg b { color: var(--volt-hot); font-size: var(--t-xs); }
.chat__msg--sys span { color: var(--fg-dim); font-style: italic; }
.chat__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.room__sched { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.room__sched li { display: grid; gap: 2px; font-size: var(--t-sm); }
@media (max-width: 900px) { .chat { height: 420px; } }

/* ---- The teaser wall (the second free lesson stops halfway) ---- */
.teaser__rest { max-height: 220px; overflow: hidden; filter: blur(6px); opacity: 0.45; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.teaser { position: relative; margin-top: calc(-1 * var(--s-6)); display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(var(--neon-rgb), 0.22), var(--bg-1) 60%); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.5), 0 0 60px -20px rgba(var(--neon-rgb), 0.7); }
.teaser h3 { margin: 0; font-size: var(--t-2xl); }
.teaser p { margin: 0; color: var(--fg-dim); max-width: 56ch; }
.btn--unlock { background: linear-gradient(180deg, #5b96ff, #2f6fff 55%, #1f55e0); color: #fff; display: inline-flex; align-items: center; gap: 0.8rem; }
.btn__price { font-family: var(--font-mono); font-weight: 700; padding: 0.18rem 0.6rem; border-radius: var(--r-pill); background: #fff; color: #0040b0; }

/* ---- The lobby HUD: objectives first ---- */
.lob__hud { top: var(--s-5); transform: none; max-width: 40ch; }
.lob__obj { background: rgba(4, 6, 13, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(12px); }
.lob__obj-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lob__obj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lob__obj-list a { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; padding: 6px 4px; color: #fff; text-decoration: none; font-size: var(--t-sm); border-radius: 8px; }
.lob__obj-list a:hover { background: rgba(255, 255, 255, 0.07); }
.lob__obj-list i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; }
.lob__obj-list li.is-done a { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
.lob__obj-list li.is-done i { border-color: var(--money); background: rgba(var(--money-rgb), 0.18); color: var(--money); }
@media (max-width: 860px) { .lob__hud { top: auto; } }

/* ---- Campus presence ---- */
@keyframes pip { 50% { transform: scale(0.7); opacity: 0.6; } }

/* ---- Classroom hub ---- */
.hub { position: relative; margin: calc(-1 * var(--s-5)) calc(-1 * var(--gutter)) var(--s-5); padding: var(--s-6) var(--gutter); border-radius: 0 0 28px 28px; overflow: hidden; isolation: isolate; min-height: 72vh; display: grid; align-content: center; }
.hub__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; }
.hub__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 6, 13, 0.86), rgba(4, 6, 13, 0.55) 50%, rgba(4, 6, 13, 0.25) 100%), linear-gradient(180deg, transparent 60%, rgba(4, 6, 13, 0.9)); }
.hub__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: end; }
.hub__left { display: grid; gap: var(--s-4); }
.hub__left .view-head { margin: 0; }
.hub__next { padding: var(--s-4) var(--s-5); border-radius: 16px; background: rgba(4, 6, 13, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); display: grid; gap: 4px; max-width: 56ch; }
.hub__next h3 { margin: 0; }
.hub__next p { margin: 0; }
.hub__me { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: end; padding: var(--s-4); border-radius: 18px; background: rgba(4, 6, 13, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); }
.hub__op { height: 260px; width: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.7)); }
.hub__who { display: grid; gap: 4px; }
.hub__name { font-stretch: var(--signage-stretch); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; color: #fff; }
.hub__rank { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt-hot); }
.hub__gear { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.hub__gear img { width: 36px; height: 36px; padding: 3px; border-radius: 9px; background: rgba(var(--neon-rgb), 0.18); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.7); }
/* The door: a ring of light and a core, the way a ship's hatch control looks. Press to enter the hall. */
.door { position: relative; display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: var(--s-4); justify-self: start; padding: 10px 26px 10px 10px; border-radius: 999px; text-decoration: none; color: #fff; background: linear-gradient(180deg, rgba(13, 18, 33, 0.9), rgba(4, 6, 13, 0.9)); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.35), 0 0 60px -10px rgba(var(--neon-rgb), 0.8), 0 20px 50px -20px rgba(0, 0, 0, 0.9); transition: transform 200ms var(--ease-out), box-shadow 200ms; }
.door:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.9), 0 0 90px -10px rgba(var(--neon-rgb), 1), 0 24px 60px -20px rgba(0, 0, 0, 0.9); }
.door__ring { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, #fff 0 10%, rgba(var(--neon-rgb), 0.9) 11% 16%, transparent 17%), conic-gradient(from 0deg, rgba(var(--neon-rgb), 0) 0%, rgba(var(--neon-rgb), 1) 25%, rgba(var(--neon-rgb), 0) 50%, rgba(var(--neon-rgb), 1) 75%, rgba(var(--neon-rgb), 0) 100%); -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60% 82%, transparent 84%), radial-gradient(circle, #000 0 18%, transparent 19%); -webkit-mask-composite: source-over; mask: radial-gradient(circle, transparent 0 58%, #000 60% 82%, transparent 84%), radial-gradient(circle, #000 0 18%, transparent 19%); mask-composite: add; animation: door-spin 4s linear infinite; }
@keyframes door-spin { to { transform: rotate(360deg); } }
.door__core { display: grid; line-height: 1; gap: 4px; }
.door__label { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--volt-hot); }
.door__big { font-stretch: var(--signage-stretch); font-weight: 800; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em; }
.door__sub { font-size: var(--t-xs); color: var(--fg-dim); }
.door__arrow { font-size: 1.6rem; margin-left: var(--s-3); color: var(--volt-hot); transition: transform 200ms var(--ease-out); }
.door:hover .door__arrow { transform: translateX(6px); }
.recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.recs li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; font-size: var(--t-sm); }
.recs__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-faint); } .recs__dot.is-on { background: var(--money); box-shadow: 0 0 8px var(--money); }
@media (max-width: 900px) { .hub__grid { grid-template-columns: 1fr; } .hub__me { grid-template-columns: 1fr; justify-items: center; text-align: center; } .door { justify-self: stretch; } }

/* ---- The hall ---- */
.hall { position: relative; margin: calc(-1 * var(--s-5)) calc(-1 * var(--gutter)) 0; min-height: calc(100vh - 64px); padding: var(--s-4) var(--gutter) var(--s-6); isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; gap: var(--s-4) var(--s-5); }
.hall__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; }
.hall__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 6, 13, 0.55), rgba(4, 6, 13, 0.25) 30%, rgba(4, 6, 13, 0.7) 70%, rgba(4, 6, 13, 0.95)); }
.hall__top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-4); }
.hall__stage { grid-column: 1; grid-row: 2; display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.hall__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #060a16; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 80px -10px rgba(var(--neon-rgb), 0.6), 0 40px 80px -30px rgba(0, 0, 0, 0.95); }
.hall__screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hall__idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-2); text-align: center; padding: var(--s-6); background: radial-gradient(ellipse at 50% 40%, rgba(var(--neon-rgb), 0.25), rgba(4, 6, 13, 0.9) 70%); }
.hall__idle h2 { margin: 0; font-size: var(--t-2xl); }
.hall__idle p { margin: 0; max-width: 48ch; color: var(--fg-dim); }
.hall__seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hall .chat { grid-column: 2; grid-row: 2; height: auto; min-height: 420px; background: rgba(13, 18, 33, 0.85); backdrop-filter: blur(12px); }
.seat { position: relative; }
.seat__hand { position: absolute; right: -6px; top: -14px; font-size: 1.4rem; opacity: 0; transform: translateY(10px) rotate(-10deg); transition: opacity 220ms, transform 300ms var(--ease-out); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.seat.is-hand .seat__hand { opacity: 1; transform: translateY(0) rotate(0); animation: wave 1.2s ease-in-out infinite; }
.seat.is-hand { box-shadow: inset 0 0 0 2px #fff, 0 0 30px -4px rgba(var(--neon-rgb), 0.9); }
@keyframes wave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }
@media (max-width: 1200px) { .hall { grid-template-columns: 1fr; } .hall .chat { grid-column: 1; grid-row: auto; } }

/* ---- Ideas desk ---- */
.form { display: grid; gap: var(--s-3); }
.form .field { display: grid; gap: 4px; }
.ideas__list { display: grid; gap: var(--s-3); }
.idea { display: grid; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.idea p { margin: 0; color: var(--fg-dim); font-size: var(--t-sm); }
.idea__status { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt-hot); }

/* ---- Outreach ---- */
.outreach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.outreach__col { min-width: 0; }
.outreach__leads { display: grid; gap: 6px; max-height: 520px; overflow: auto; }
.outreach__lead { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: var(--t-sm); }
.outreach__lead.is-on { box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.8); background: rgba(var(--neon-rgb), 0.1); }
.outreach__lead-name small { color: var(--fg-faint); }
.outreach__lead-to { grid-column: 2; font-size: var(--t-xs); color: var(--fg-dim); }
.outreach__lead .label { grid-column: 3; grid-row: 1 / 3; }
.outreach__body { font-family: var(--font-sans); line-height: 1.45; resize: vertical; }
.outreach__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.outreach__preview { display: grid; gap: 8px; }
.outreach__env { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; font-size: var(--t-sm); }
.outreach__text { white-space: pre-wrap; font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.5; margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); max-height: 300px; overflow: auto; }
.outreach__consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: var(--s-3); font-size: var(--t-xs); color: var(--fg-dim); padding: 8px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.outreach__consent.is-bad { box-shadow: inset 0 0 0 1px var(--red); }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.seg button { font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--fg-dim); background: none; border: 0; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--neon); color: #fff; }
@media (max-width: 1100px) { .outreach { grid-template-columns: 1fr; } }

/* ---- Avatar tiers, the ladder, patches, soon cards (views/locker.js) ---- */
.studio { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.studio__figure { width: 100%; height: auto; max-height: 440px; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55)); }
/* The rank ladder: one row per rank (medal, name, points), so a long name like "Fleet Commander" always has room. */
.tiers { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tier { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.tier b { min-width: 0; overflow-wrap: break-word; }
.tier .dim { white-space: nowrap; font-size: var(--t-sm); }
.tier.is-now { box-shadow: inset 0 0 0 2px rgba(56, 165, 255, 0.9), 0 0 30px -6px rgba(56, 165, 255, 0.8); background: rgba(20, 103, 239, 0.14); }
.tier.is-locked { opacity: 0.6; }
.medal { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 900; font-family: var(--font-display); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(144, 195, 255, 0.4); }
.medal--done { background: rgba(61, 220, 132, 0.18); box-shadow: inset 0 0 0 1px var(--money); color: var(--money-hot); }
.medal--now { background: linear-gradient(180deg, var(--hu-blue-400, #38a5ff), var(--hu-blue-600, #1467ef)); color: #fff; box-shadow: 0 0 18px rgba(56, 165, 255, 0.7); }
@media (max-width: 640px) { .studio { grid-template-columns: minmax(0, 1fr); } .studio__figure { max-height: 300px; } }
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rung { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: 16px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); text-align: center; position: relative; }
.rung .medal { width: 44px; height: 44px; font-size: 1.1rem; }
.rung b { min-width: 0; max-width: 100%; font-size: 1rem; line-height: 1.2; text-align: center; text-wrap: balance; overflow-wrap: break-word; }
.rung .dim { font-size: var(--t-sm); white-space: nowrap; }
.rung.is-done { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.7); }
.rung.is-now { box-shadow: inset 0 0 0 2px rgba(56, 165, 255, 0.9), 0 0 30px -6px rgba(56, 165, 255, 0.8); }
.rung__to { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt-hot); }
.patches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.patchrow { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); opacity: 0.55; }
.patchrow.is-on { opacity: 1; box-shadow: inset 0 0 0 1px rgba(56, 165, 255, 0.6); }
.patchrow b { display: block; } .patchrow span { font-size: var(--t-xs); }
.soon { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 800px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Feature cards (views/common.js featureCard): one layout for every open / coming-soon card ---- */
.deck--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .deck--3 { grid-template-columns: 1fr; } }
.feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); }
.feature-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-5); border-radius: 16px; background: rgba(9, 22, 52, 0.72); border: 1px solid rgba(144, 195, 255, 0.22); }
.feature-card__icon { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
.feature-card__text { display: grid; gap: var(--s-2); min-width: 0; }
.feature-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.feature-card__head h3 { margin: 0; font-size: 1.12rem; line-height: 1.2; }
.feature-card__status { flex: none; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: rgba(234, 245, 255, 0.82); background: rgba(56, 165, 255, 0.14); border: 1px solid rgba(56, 165, 255, 0.4); white-space: nowrap; }
.feature-card--open .feature-card__status { color: #062a14; background: #5be38e; border-color: #5be38e; }
.feature-card p { margin: 0; color: rgba(234, 245, 255, 0.72); line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
/* Quiz feedback and retake (quiz.js). */
.quiz__feedback { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: 10px; font-size: var(--t-sm); line-height: 1.5; background: rgba(255, 110, 110, 0.1); border-left: 3px solid #ff8a8a; }
.quiz__feedback.is-right { background: rgba(91, 227, 142, 0.1); border-left-color: #5be38e; }
.quiz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.quiz__foot .quiz__result { margin: 0; }
/* Settings (views/settings.js). */
.settings { display: grid; gap: 0; padding: 0; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-top: 1px solid rgba(144, 195, 255, 0.14); cursor: pointer; }
.setting:first-child { border-top: 0; }
.setting__text { display: grid; gap: 2px; min-width: 0; }
.setting__text span { color: rgba(234, 245, 255, 0.7); font-size: var(--t-sm); line-height: 1.45; }
.setting__input { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); position: relative; cursor: pointer; transition: background 160ms; flex: none; }
.setting__input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 160ms var(--ease-out); }
.setting__input:checked { background: var(--hu-blue-500, #2f7bff); }
.setting__input:checked::after { transform: translateX(20px); }
.setting__input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Study sets (tools/study.js): Flashcards, Learn, Test, Match ---- */
.study { display: grid; gap: var(--s-4); }
.study__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.study > * { min-width: 0; }
.study__tabs button { padding: 8px 16px; font-size: var(--t-sm); }
@media (max-width: 560px) { .study__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } .study__tabs button { padding: 8px 4px; font-size: var(--t-xs); } }
.study__progress { display: grid; gap: 8px; }
.study__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.study__bar i { display: block; height: 100%; transition: width 300ms var(--ease-out); }
.study__bar .is-mastered { background: var(--money); }
.study__bar .is-learning { background: var(--neon); }
.study__counts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-xs); color: var(--fg-dim); }
.study__counts b { color: var(--fg); margin-right: 2px; }
.study__counts .is-mastered b { color: var(--money-hot); }
.study__counts .is-learning b { color: var(--volt-hot); }
.study__stage, .study__mode { display: grid; gap: var(--s-4); outline: none; min-width: 0; }
.study__mode > * { min-width: 0; }
.study__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); }
.study__row--split { justify-content: space-between; }
.study__count, .study__clock { min-width: 72px; text-align: center; font-weight: 800; }
.study__keys { margin: 0; text-align: center; font-size: var(--t-xs); color: var(--fg-dim); }

/* The card flips in 3D: the objection on the front, the move and the full answer on the back. */
.flip { display: block; width: 100%; min-width: 0; max-width: 760px; margin: 0 auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; perspective: 1600px; }
.flip__inner { position: relative; display: grid; min-height: 300px; transition: transform 520ms var(--ease-out); transform-style: preserve-3d; }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { grid-area: 1 / 1; min-width: 0; overflow-wrap: break-word; display: grid; align-content: center; gap: var(--s-3); padding: clamp(20px, 4vw, 40px); border-radius: 20px; background: linear-gradient(180deg, rgba(20, 103, 239, 0.18), rgba(9, 22, 52, 0.92)); border: 1px solid rgba(144, 195, 255, 0.35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__back { transform: rotateY(180deg); background: linear-gradient(180deg, rgba(61, 220, 132, 0.12), rgba(9, 22, 52, 0.95)); }
.flip:focus-visible .flip__face { outline: 2px solid #fff; outline-offset: 3px; }
.flip__label { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--volt-hot); }
.flip__text { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.flip__hint { font-size: var(--t-xs); color: var(--fg-dim); }
.flip__key { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.35; color: var(--money-hot); }
.flip__full { font-size: var(--t-sm); line-height: 1.6; color: rgba(234, 245, 255, 0.85); max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .flip__inner { transition: none; } }

/* Learn and Test choices. */
.study__q { display: grid; gap: var(--s-2); }
.study__q h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; text-wrap: balance; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } /* four options: always a full 2 × 2 */
.choices--tf { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
@media (max-width: 640px) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choices--tight { grid-template-columns: 1fr; gap: 8px; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(144, 195, 255, 0.28); background: rgba(9, 22, 52, 0.72); color: var(--fg); font: inherit; font-size: var(--t-sm); line-height: 1.45; text-align: left; cursor: pointer; transition: border-color 140ms, background 140ms, transform 140ms; }
.choices--tight .choice, .choices--tf .choice { grid-template-columns: minmax(0, 1fr); padding: 10px 14px; }
.choices--tf .choice { text-align: center; font-weight: 800; }
.choice:hover:not(:disabled) { border-color: var(--neon); transform: translateY(-1px); }
.choice__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-weight: 800; font-size: var(--t-xs); }
.choice.is-picked { border-color: var(--neon); background: rgba(20, 103, 239, 0.22); }
.choice.is-right { border-color: var(--money); background: rgba(61, 220, 132, 0.16); }
.choice.is-wrong { border-color: var(--red-hot); background: rgba(255, 77, 90, 0.14); }
.choice:disabled { cursor: default; }
.study__feedback { display: grid; gap: var(--s-2); justify-items: start; }
.study__feedback:empty { display: none; }
.study__good { margin: 0; font-weight: 800; color: var(--money-hot); }
.study__miss { margin: 0; font-weight: 800; color: var(--red-hot); }
.study__full { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--fg-dim); max-width: 75ch; }
.study__done { display: grid; gap: var(--s-2); justify-items: center; text-align: center; padding: var(--s-5) 0; }
.study__done h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.study__done p { margin: 0; color: var(--fg-dim); }

.test { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: var(--s-4); }
.test__q { display: grid; gap: 8px; padding-left: 4px; }
.test__q::marker { font-weight: 800; color: var(--volt-hot); }
.test__prompt { margin: 0; font-weight: 800; line-height: 1.35; }
.test__shown { margin: 0; color: var(--fg-dim); font-size: var(--t-sm); }

/* Match: two kinds of tile, the objection (blue edge) and the move (green edge). */
.match { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } /* twelve tiles: 4 × 3, 3 × 4, 2 × 6, never a ragged last row */
@media (max-width: 1000px) { .match { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .match { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.match__tile { min-height: 96px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(144, 195, 255, 0.28); background: rgba(9, 22, 52, 0.8); color: var(--fg); font: inherit; font-size: var(--t-sm); line-height: 1.4; text-align: left; cursor: pointer; transition: opacity 260ms, transform 160ms, border-color 140ms, background 140ms; }
.match__tile--q { font-weight: 800; font-size: var(--t-base); border-left: 4px solid var(--neon); }
.match__tile--a { border-left: 4px solid var(--money); }
.match__tile:hover { transform: translateY(-2px); }
.match__tile.is-open { border-color: var(--neon); background: rgba(20, 103, 239, 0.25); }
.match__tile.is-miss { border-color: var(--red-hot); background: rgba(255, 77, 90, 0.16); animation: match-shake 300ms; }
.match__tile.is-gone { opacity: 0; transform: scale(0.94); pointer-events: none; }
@keyframes match-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---- Pipeline: Do today, and drag between stages ---- */
.today { display: grid; gap: var(--s-3); border-color: rgba(var(--neon-rgb), 0.45); }
.today .card__head h3 { margin: 0; }
.today__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.today__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.today__name { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.today__name span { font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead[draggable="true"] { cursor: grab; }
.lead.is-dragging { opacity: 0.45; }
.pipe__col.is-drop { box-shadow: inset 0 0 0 2px var(--neon); background: rgba(20, 103, 239, 0.12); }

/* ---- Settings (views/settings.js): section list on the left, one section on the right ---- */
.settings-layout { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.settings__nav { position: sticky; top: 0; display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: rgba(9, 22, 52, 0.6); border: 1px solid rgba(144, 195, 255, 0.2); }
.settings__nav a { padding: 10px 12px; border-radius: 10px; color: var(--fg); text-decoration: none; font-weight: 700; font-size: var(--t-sm); }
.settings__nav a:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.settings__nav a.is-on { background: rgba(20, 103, 239, 0.28); box-shadow: inset 3px 0 0 var(--neon); }
.settings__title { margin: 0; padding: var(--s-4) var(--s-5) 0; font-size: 1.15rem; }
.setting--static { cursor: default; }
.setting__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.setting__who { display: flex; gap: var(--s-4); align-items: center; min-width: 0; }
.setting__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #0b1a3d; box-shadow: 0 0 0 2px rgba(56, 165, 255, 0.85); }
.setting__name { width: 200px; max-width: 100%; }
.setting__note { margin: 0; padding: var(--s-3) var(--s-5) var(--s-4); font-size: var(--t-xs); color: var(--fg-dim); }
.btn--danger { background: rgba(255, 77, 90, 0.18); border: 1px solid rgba(255, 122, 131, 0.6); color: #fff; }
.btn--danger:hover { background: rgba(255, 77, 90, 0.32); color: #fff; }
.kbd { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(144, 195, 255, 0.3); white-space: nowrap; }
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings__nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .settings__nav a { flex: none; padding: 8px 12px; }
  .setting { grid-template-columns: minmax(0, 1fr); }
  .setting__controls { justify-content: flex-start; }
}

/* ---- The profile menu (top right) ---- */
.pmenu { position: fixed; z-index: 60; top: calc(var(--top-h, 64px) + env(safe-area-inset-top, 0px) + 4px); right: 22px; width: 260px; display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: rgba(6, 16, 39, 0.94); border: 1px solid rgba(144, 195, 255, 0.35); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: lpanel-in 160ms var(--ease-out) both; }
.pmenu__who { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(144, 195, 255, 0.18); }
.pmenu__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #0b1a3d; box-shadow: 0 0 0 2px rgba(56, 165, 255, 0.85); }
.pmenu__who div { display: grid; min-width: 0; }
.pmenu__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmenu__who span { font-size: var(--t-xs); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmenu a, .pmenu button { display: block; width: 100%; padding: 10px 10px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: inherit; font-size: var(--t-sm); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.pmenu a:hover, .pmenu a:focus-visible, .pmenu button:hover { background: rgba(20, 103, 239, 0.25); outline: none; text-decoration: none; }

/* ---- Search everything (app/palette.js) ---- */
.palette { position: fixed; inset: 0; z-index: 80; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; background: rgba(3, 8, 20, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.palette__box { width: min(640px, 100%); display: grid; border-radius: 18px; overflow: hidden; background: rgba(6, 16, 39, 0.97); border: 1px solid rgba(144, 195, 255, 0.4); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.95); animation: lpanel-in 160ms var(--ease-out) both; }
.palette__input { width: 100%; padding: 18px 20px; border: 0; border-bottom: 1px solid rgba(144, 195, 255, 0.2); background: none; color: #fff; font: inherit; font-size: 1.1rem; outline: none; }
.palette__list { margin: 0; padding: 6px; list-style: none; display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; }
.palette__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.palette__list li.is-on { background: rgba(20, 103, 239, 0.3); }
.palette__kind { grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt-hot); }
.palette__list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__line { font-size: var(--t-xs); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__none { display: block !important; color: var(--fg-dim); cursor: default !important; }
.palette__foot { margin: 0; padding: 10px 16px; border-top: 1px solid rgba(144, 195, 255, 0.15); font-size: var(--t-xs); color: var(--fg-dim); }

/* ---- Help center ---- */
.help__bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.help__search { flex: 1 1 260px; min-width: 0; }
.help__block { display: grid; gap: var(--s-3); }
.help__block h3 { margin: 0; }
.help__rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.help__room { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: start; align-content: start; row-gap: 4px; padding: 14px; border-radius: 16px; background: rgba(9, 22, 52, 0.7); border: 1px solid rgba(144, 195, 255, 0.22); color: var(--fg); text-decoration: none; transition: border-color 140ms, transform 140ms; }
.help__room:hover { border-color: var(--neon); transform: translateY(-2px); text-decoration: none; color: var(--fg); }
.help__room img { grid-row: 1 / 3; width: 56px; height: 56px; object-fit: contain; align-self: start; }
.help__room span { font-size: var(--t-xs); line-height: 1.45; color: var(--fg-dim); }
.help__faq { display: grid; gap: 6px; }
.help__q { padding: 12px 16px; border-radius: 12px; background: rgba(9, 22, 52, 0.6); border: 1px solid rgba(144, 195, 255, 0.18); }
.help__q summary { font-weight: 800; cursor: pointer; }
.help__q p { margin: 8px 0 0; color: var(--fg-dim); line-height: 1.6; max-width: 70ch; }
.help__keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; align-items: center; }
.help__keys dd { margin: 0; color: var(--fg-dim); }
@media (max-width: 1100px) { .help__rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .help__rooms { grid-template-columns: minmax(0, 1fr); } }

/* Reduce motion, chosen in Settings (lib/prefs.js): nothing animates, whatever the device says. */
html.is-calm *, html.is-calm *::before, html.is-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---- The Map (views/campus.js): an aerial photograph with a pin on every building ---- */
.map { position: relative; border-radius: 20px; border: 1px solid rgba(144, 195, 255, 0.35); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95); aspect-ratio: 16 / 9; background: #0b1a3d; isolation: isolate; }
.map__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* The map no longer clips (overflow: hidden cut the edge pins' cards off); the photo and the vignette round their own corners. */
.map::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(6, 16, 39, 0.45) 100%); }
.pin { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; color: #fff; text-decoration: none; outline: none; }
.pin__dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; font-size: 0.82rem; background: linear-gradient(180deg, #4db2ff, #1467ef); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 0 0 9px rgba(56, 165, 255, 0.28), 0 8px 18px rgba(0, 0, 0, 0.55); animation: pin-pulse 2.8s ease-in-out infinite; }
.pin__label { padding: 5px 10px; border-radius: 999px; background: rgba(6, 16, 39, 0.82); border: 1px solid rgba(144, 195, 255, 0.45); font-weight: 800; font-size: 0.78rem; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.pin__card { position: absolute; z-index: 3; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); width: 240px; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(6, 16, 39, 0.95); border: 1px solid rgba(144, 195, 255, 0.5); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.9); font-size: var(--t-sm); line-height: 1.45; text-align: left; opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms var(--ease-out); }
.pin__card span { color: rgba(234, 245, 255, 0.78); }
.pin__read { color: var(--volt-hot) !important; font-weight: 700; }
.pin__go { color: #fff !important; font-weight: 800; margin-top: 2px; }
.pin:hover, .pin:focus-visible, .pin.is-open { z-index: 5; }
.pin:hover, .pin:hover .pin__label { text-decoration: none; }   /* the global a:hover underline drew a line under the pin's name */
.pin:hover .pin__card, .pin:focus-visible .pin__card, .pin.is-open .pin__card { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pin--up .pin__card { top: auto; bottom: calc(100% + 8px); }
/* Placed by views/campus.js (placeCard): left/top come inline, measured so the card is fully visible; it slides in from the pin's side. */
.pin__card.is-placed { bottom: auto; transform: translate(0, 6px); background: rgb(6, 16, 39); }
.pin__card.is-placed[data-side="up"] { transform: translate(0, -6px); }
.pin__card.is-placed[data-side="right"] { transform: translate(6px, 0); }
.pin__card.is-placed[data-side="left"] { transform: translate(-6px, 0); }
.pin:hover .pin__card.is-placed, .pin:focus-visible .pin__card.is-placed, .pin.is-open .pin__card.is-placed { transform: none; }
/* The pointer can cross the gap onto an open card (it is part of the link: clicking it walks in). */
.pin__card::before { content: ""; position: absolute; inset: -12px; }
/* Esc hides the open card until the pointer leaves or focus moves (WCAG 1.4.13). */
.pin.is-hushed .pin__card { opacity: 0 !important; pointer-events: none !important; }
.pin:hover .pin__dot, .pin:focus-visible .pin__dot { animation: none; box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(56, 165, 255, 0.5), 0 0 30px rgba(56, 165, 255, 0.9); }
.pin:focus-visible .pin__label { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 0 0 14px rgba(56, 165, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.55); } }
.map__you { position: absolute; z-index: 1; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.map__you img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #0b1a3d; box-shadow: 0 0 0 3px var(--money), 0 8px 18px rgba(0, 0, 0, 0.6); }
.map__you span { padding: 2px 8px; border-radius: 999px; background: var(--money); color: #062a14; font-weight: 900; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.map__list { margin: 0; padding: 0; list-style: none; counter-reset: room; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.map__list li { counter-increment: room; display: grid; }
.map__list a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(9, 22, 52, 0.7); border: 1px solid rgba(144, 195, 255, 0.2); color: var(--fg); text-decoration: none; }
.map__list a::before { content: counter(room); grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, #4db2ff, #1467ef); color: #fff; font-weight: 900; font-size: 0.8rem; }
.map__list a:hover { border-color: var(--neon); text-decoration: none; color: var(--fg); }
.map__list span { font-size: var(--t-xs); color: var(--fg-dim); grid-column: 2; }
.map__list .num { grid-row: 1 / 3; grid-column: 3; color: var(--volt-hot); font-weight: 700; white-space: nowrap; }
/* Small screens: numbers only on the photo, the names live in the list below it. */
@media (max-width: 900px) { .pin__label, .pin__card, .map__you span { display: none; } .pin__dot { width: 24px; height: 24px; font-size: 0.72rem; } .map__you img { width: 28px; height: 28px; } .map__list { grid-template-columns: minmax(0, 1fr); } }
/* Phones: the reading goes under the line instead of a third column, so the line never shrinks to one word per row. */
@media (max-width: 560px) { .map__list a { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto auto; } .map__list .num { grid-row: auto; grid-column: 2; white-space: normal; } .map__list a::before { grid-row: 1 / 4; } }

/* ---- The Vault (views/vault.js): four wings, the catalog as cabinets of machines ---- */
.vault { display: grid; gap: var(--s-5); }
.vault__results:empty { display: none; }
.vault__hits { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.vault__hits a { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(9, 22, 52, 0.7); color: var(--fg); text-decoration: none; }
.vault__hits a:hover { background: rgba(20, 103, 239, 0.25); text-decoration: none; }
.vault__kind { grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt-hot); }
.vault__hits .dim { font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.wing { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: start; gap: 10px; padding: 18px; border-radius: 18px; background: radial-gradient(circle at 100% 0, rgba(56, 165, 255, 0.25), transparent 45%), linear-gradient(180deg, rgba(20, 103, 239, 0.18), rgba(9, 22, 52, 0.85)); border: 1px solid rgba(144, 195, 255, 0.3); color: var(--fg); text-decoration: none; transition: transform 180ms var(--ease-out), border-color 180ms, box-shadow 180ms; }
.wing:hover, .wing.is-on { transform: translateY(-3px); border-color: var(--neon); box-shadow: 0 0 34px -8px rgba(56, 165, 255, 0.8); text-decoration: none; color: var(--fg); }
.wing.is-on { background: radial-gradient(circle at 100% 0, rgba(56, 165, 255, 0.35), transparent 45%), linear-gradient(180deg, rgba(20, 103, 239, 0.4), rgba(9, 22, 52, 0.9)); }
.wing img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)); }
.wing__text { display: grid; align-content: start; gap: 4px; min-width: 0; }   /* text starts right under the title, whatever the line count */
.wing__text b { font-size: 1.1rem; line-height: 1.2; }
.wing__text span { font-size: var(--t-sm); line-height: 1.45; color: var(--fg-dim); }
.wing__count { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt-hot); }
.vault__wing { display: grid; gap: var(--s-4); }
.catalog__cabinets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.cabinet-door { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: 16px; background: rgba(9, 22, 52, 0.75); border: 1px solid rgba(144, 195, 255, 0.22); color: var(--fg); font: inherit; text-align: center; cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms, background 160ms; }
.cabinet-door:hover { transform: translateY(-2px); border-color: rgba(56, 165, 255, 0.7); }
.cabinet-door.is-on { background: linear-gradient(180deg, rgba(20, 103, 239, 0.4), rgba(9, 22, 52, 0.9)); border-color: var(--neon); box-shadow: 0 0 30px -8px rgba(56, 165, 255, 0.85); }
.cabinet-door img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.cabinet-door b { font-size: var(--t-sm); line-height: 1.25; text-wrap: balance; }
.cabinet-door__count { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt-hot); }
.catalog__shelf { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: 20px; background: rgba(6, 16, 39, 0.55); border: 1px solid rgba(144, 195, 255, 0.2); }
.catalog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.catalog__head h3, .catalog__head h2.h3 { margin: 0; font-size: 1.4rem; }
.catalog__head p { margin: 4px 0 0; }
.machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); align-items: stretch; }
.machine { border-radius: 16px; background: rgba(9, 22, 52, 0.8); border: 1px solid rgba(144, 195, 255, 0.22); overflow: hidden; transition: border-color 160ms, box-shadow 160ms; }
.machine.is-open { border-color: var(--neon); box-shadow: 0 0 34px -10px rgba(56, 165, 255, 0.8); background: rgba(20, 103, 239, 0.22); }
.machine-open { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; padding: var(--s-4); border-radius: 16px; background: linear-gradient(180deg, rgba(20, 103, 239, 0.22), rgba(9, 22, 52, 0.9)); border: 1px solid var(--neon); box-shadow: 0 0 40px -12px rgba(56, 165, 255, 0.8); }
.machine-open img { width: 96px; height: 96px; object-fit: contain; }
.machine-open__body { display: grid; gap: 6px; min-width: 0; }
.machine-open__body h4 { margin: 0; font-size: 1.25rem; }
@media (max-width: 640px) { .machine-open { grid-template-columns: minmax(0, 1fr); } .machine-open img { width: 64px; height: 64px; } }
.machine.is-done { border-color: rgba(61, 220, 132, 0.55); }
.machine__face { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; width: 100%; height: 100%; padding: 14px; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
button.machine { border: 1px solid rgba(144, 195, 255, 0.22); }
.machine__face:hover { background: rgba(20, 103, 239, 0.14); }
.machine__face img { grid-row: 1 / 4; width: 44px; height: 44px; object-fit: contain; align-self: center; }
.machine__num { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; color: var(--volt-hot); }
.machine__name { font-size: var(--t-sm); line-height: 1.3; min-width: 0; overflow-wrap: break-word; }
.machine__meta { font-size: var(--t-xs); color: var(--fg-dim); }
.machine__lessons { padding: 0 14px 14px; }
a.machine--link { color: var(--fg); text-decoration: none; }
a.machine--link:hover { border-color: var(--neon); text-decoration: none; }
a.machine--link .machine__face { cursor: pointer; }
@media (max-width: 1100px) { .wings { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalog__cabinets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wings { grid-template-columns: minmax(0, 1fr); } .catalog__cabinets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalog__shelf { padding: var(--s-3); } }