/* =========================================================================
   Zynapzys — Lumen at midnight
   Dark-only by design. Warm-midnight canvas, signature amber accent,
   editorial layout, Fraunces + Geist + Geist Mono.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Geist:wght@300..700&family=Geist+Mono:wght@300..600&display=swap');

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Canvas + surfaces */
  --canvas: #0f1217;
  --canvas-deep: #0a0c10;
  --surface: #171a21;
  --surface-2: #1d2129;
  --surface-3: #232830;
  --hairline: #292e38;
  --hairline-bright: #3a4150;

  /* Ink — text */
  --ink: #ece5d3;
  --ink-strong: #fbf6e8;
  --ink-dim: #9c968a;
  --ink-faint: #62605b;

  /* Lumen — signature amber */
  --lumen: #f6b352;
  --lumen-bright: #ffd28a;
  --lumen-deep: #c87f1f;
  --lumen-glow: 246, 179, 82;
  --lumen-on: #1a140a;        /* ink for text on amber bg */

  /* Vermillion — editorial accent for underlined CTAs + emphasis */
  --vermillion: #ff3d00;
  --vermillion-bright: #ff6230;

  /* Semantic accents */
  --good:    #4ec968;
  --hard:    #e0a657;
  --easy:    #92c8d8;
  --again:   #ee4f3a;
  --danger:  #ee4f3a;

  /* Type */
  --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Code', monospace;

  /* Shadows */
  --sh-soft:  0 1px 2px rgba(0,0,0,.35);
  --sh-card:  0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  --sh-hero:  0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --sh-glow:  0 0 0 1px rgba(var(--lumen-glow), .35), 0 12px 40px rgba(var(--lumen-glow), .22);

  /* Motion */
  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body, input, button, textarea, select { font: 16px/1.55 var(--sans); }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--lumen); text-decoration: none; transition: color .2s var(--ease-soft); }
a:hover { color: var(--lumen-bright); }
hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.5rem 0;
}
::selection { background: var(--lumen); color: var(--lumen-on); }

/* -------------------------------------------------------------------------
   Light theme — warm cream with the same lumen accent
   ------------------------------------------------------------------------- */
[data-theme="light"] {
  --canvas: #fbf8ee;
  --canvas-deep: #f1ecdb;
  --surface: #ffffff;
  --surface-2: #f8f4e6;
  --surface-3: #f0ebd8;
  --hairline: #e2dcc7;
  --hairline-bright: #cdc6ad;

  --ink: #2c2820;
  --ink-strong: #1a1812;
  --ink-dim: #5b574e;
  --ink-faint: #8b8775;

  --lumen: #cf8a25;
  --lumen-bright: #e8a23f;
  --lumen-deep: #9a6314;
  --lumen-glow: 207, 138, 37;
  /* Dark ink for text sitting on the amber bg — prior value (#fff8e8)
     produced white-on-amber and was unreadable in light theme. */
  --lumen-on: #1a140a;

  --good:  #1f8a3a;
  --hard:  #b97a1f;
  --easy:  #4f8aa1;
  --again: #c8341a;
  --danger: #c8341a;

  --vermillion: #d63100;
  --vermillion-bright: #ed4513;

  --sh-soft:  0 1px 2px rgba(80,60,20,.08);
  --sh-card:  0 6px 20px rgba(80,60,20,.06), inset 0 1px 0 rgba(255,255,255,.6);
  --sh-hero:  0 16px 50px rgba(80,60,20,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="light"] body::before { opacity: .25; mix-blend-mode: multiply; }
[data-theme="light"] body::after  { opacity: .55; }
[data-theme="light"] .site-header { background: rgba(251, 248, 238, .82); }
[data-theme="light"] .site-footer { background: rgba(251, 248, 238, .85); }

/* -------------------------------------------------------------------------
   Body — viewport-locked layout. Header + footer stay fixed in view;
   sidebar and main scroll independently. No body-level scroll.
   ------------------------------------------------------------------------- */
html, body { height: 100%; overflow: hidden; }
html { background: var(--canvas-deep); }
body {
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  position: relative;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  /* SVG noise — tiny, repeating */
  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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.89  0 0 0 0 0.82  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .55;
}
body::after {
  /* Soft amber glow at the top to suggest a single hanging lamp. */
  content: '';
  position: fixed;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(closest-side, rgba(var(--lumen-glow), .14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--ink-strong);
  font-weight: 460;
  letter-spacing: -0.02em;
  margin: 0 0 .8rem;
  font-feature-settings: 'ss01', 'liga';
}
h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: -0.03em;
}
h2 {
  font-size: 1.8rem;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  margin-top: 2.5rem;
}
h5, .card-title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 14;
  color: var(--ink-dim);
  margin: 0 0 1rem;
  letter-spacing: 0;
}
p { margin: 0 0 1rem; }
.text-muted, .text-muted * { color: var(--ink-dim); }
.small, small { font-size: .82rem; color: var(--ink-dim); }
.fs-4 { font-size: 1.4rem; line-height: 1.35; }

/* Eyebrow — a recurring all-caps mono micro-heading, used as a section tag. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--lumen);
  display: inline-block;
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.page {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  overflow: hidden;
}

.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px) saturate(120%);
  background: rgba(15, 18, 23, .72);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink-strong);
  text-decoration: none;
}
.brand:hover { color: var(--ink-strong); }

.brand__logo {
  height: 56px;
  width: auto;
  display: block;
  transition: filter .25s var(--ease-soft);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.site-nav a {
  color: var(--ink-dim);
  font-size: .9rem;
  letter-spacing: .01em;
}
.site-nav a:hover { color: var(--ink-strong); }
.site-nav__user {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-faint);
  letter-spacing: .02em;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.site-nav__usage {
  font-size: .68rem;
  color: var(--lumen);
  letter-spacing: .04em;
  margin-top: 1px;
}

/* Three-region body: optional sidebar (auth users only) + main content.
   Sidebar and main each get their own scroll context — body never scrolls. */
.page-body {
  display: grid;
  /* Width is a variable so the drag handle can set it without touching the
     server; see wwwroot/js/sidebar-resize.js. The literal is the fallback
     for a first visit and for a browser that blocked localStorage. */
  grid-template-columns: var(--sidebar-w, 260px) 1fr;
  min-height: 0;
  overflow: hidden;
}
.page:not(:has(.sidebar)) .page-body { grid-template-columns: 1fr; }

main, .content {
  padding: 2.5rem 2.5rem 3rem;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Book reader host: let the embedded reader fill the content pane edge-to-edge.
   A column, not a plain block: the crumbs share this box with the iframe, and
   height:100% on the iframe measured the whole pane rather than what was left
   over, so the foot of the reader fell off the bottom of the clipped box. */
.content:has(.book-frame) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.book-frame {
  display: block;
  width: 100%;
  /* basis 0 so the frame takes the remaining height rather than its own; the
     min-height reset is what lets a flex item actually shrink to fit. */
  flex: 1 1 0;
  min-height: 0;
  border: 0;
}

/* The crumbs lift themselves -0.6rem into .content's usual 2.5rem padding.
   This page has no padding to lift into, so the trail rode up under the
   header and got clipped away. Give it its own gutter here instead. */
.content:has(.book-frame) > .crumbs {
  flex: 0 0 auto;
  margin: 0;
  padding: .9rem 2.5rem .7rem;
}

/* Page-level section block with editorial margin */
.section { margin-top: 3rem; }
.section:first-child { margin-top: 0; }

/* -------------------------------------------------------------------------
   Sidebar — course / test / deck tree
   ------------------------------------------------------------------------- */
.sidebar {
  background: linear-gradient(180deg, var(--surface) 0%, var(--canvas-deep) 100%);
  border-right: 1px solid var(--hairline);
  padding: 2rem 1.25rem 3rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  position: relative;
  z-index: 2;
}
.sidebar__heading { margin-bottom: 1rem; }
.sidebar__section + .sidebar__section { margin-top: 1.75rem; }

.tree { list-style: none; margin: 0; padding: 0; }
.tree--nested {
  margin-left: 1rem;
  border-left: 1px solid var(--hairline);
  padding-left: .5rem;
  margin-top: .15rem;
}
.tree__node + .tree__node { margin-top: .15rem; }
.tree__row { display: flex; align-items: center; gap: .25rem; }
.tree__toggle {
  background: none;
  border: 0;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: .8rem;
  padding: .15rem .25rem;
  width: 1.25rem;
  flex: 0 0 1.25rem;
}
.tree__toggle:hover { color: var(--lumen); }
.tree__label {
  flex: 1;
  padding: .25rem .35rem;
  border-radius: 4px;
  font-size: .88rem;
  color: var(--ink-dim);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.tree__label:hover { color: var(--lumen-bright); background: var(--surface-2); }
.tree__label--course { color: var(--ink); font-weight: 500; }
.tree__label--test {
  color: var(--lumen);
  font-style: italic;
  font-size: .82rem;
  font-family: var(--display);
}
.tree__label--deck { padding-left: .8rem; }

/* -------------------------------------------------------------------------
   Footer — breadcrumbs left, clock right
   ------------------------------------------------------------------------- */
.site-footer {
  background: rgba(15, 18, 23, .82);
  backdrop-filter: blur(14px) saturate(120%);
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 30;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .65rem 2rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  min-height: 36px;
}
.site-footer__right {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

/* Theme toggle — sun shows on dark, moon on light. Only one icon visible. */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  transition: all .18s var(--ease-soft);
}
.theme-toggle:hover {
  color: var(--lumen);
  border-color: var(--lumen);
  box-shadow: 0 0 8px rgba(var(--lumen-glow), .25);
}
.theme-toggle__icon { font-size: .9rem; line-height: 1; }
[data-theme="lumen"] .theme-toggle__icon--moon { display: none; }
[data-theme="light"] .theme-toggle__icon--sun  { display: none; }

.crumbs { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.crumbs__seg {
  color: var(--ink-faint);
  text-decoration: none;
  text-transform: lowercase;
}
.crumbs__seg:hover { color: var(--lumen); }
.crumbs__seg--current { color: var(--ink); }
.crumbs__seg--home { color: var(--ink-dim); }
.crumbs__sep { color: var(--ink-faint); opacity: .5; }

.clock { display: inline-flex; align-items: center; gap: .35rem; }
.clock__date { color: var(--ink-dim); }
.clock__sep { color: var(--ink-faint); opacity: .55; }
.clock__time { color: var(--lumen); }

/* Brand version badge — sits centered under FLASH/LUMEN. */
.brand__version {
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--ink-faint);
  letter-spacing: .15em;
  font-weight: 400;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Page-load stagger animation
   ------------------------------------------------------------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.content > * {
  animation: rise-in 700ms var(--ease-out) backwards;
}
.content > *:nth-child(1) { animation-delay: 60ms; }
.content > *:nth-child(2) { animation-delay: 140ms; }
.content > *:nth-child(3) { animation-delay: 220ms; }
.content > *:nth-child(4) { animation-delay: 300ms; }
.content > *:nth-child(5) { animation-delay: 380ms; }
main > *:nth-child(6) { animation-delay: 460ms; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .65rem 1.2rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--ink);
  font: 500 .9rem/1 var(--sans);
  letter-spacing: .005em;
  cursor: pointer;
  transition: background .18s var(--ease-soft), border-color .18s var(--ease-soft), color .18s var(--ease-soft), transform .12s var(--ease-soft), box-shadow .25s var(--ease-soft);
  text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--lumen); outline-offset: 2px; }

.btn-sm { padding: .42rem .85rem; font-size: .82rem; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1rem; }

.btn-primary {
  background: var(--lumen);
  color: var(--lumen-on);
  border-color: var(--lumen);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 24px rgba(var(--lumen-glow), .25);
}
.btn-primary:hover:not(:disabled) {
  background: var(--lumen-bright);
  border-color: var(--lumen-bright);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 36px rgba(var(--lumen-glow), .35);
}

.btn-outline-primary {
  background: transparent;
  color: var(--lumen);
  border-color: rgba(var(--lumen-glow), .55);
}
.btn-outline-primary:hover:not(:disabled) {
  background: rgba(var(--lumen-glow), .08);
  color: var(--lumen-bright);
  border-color: var(--lumen);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--hairline-bright);
}
.btn-outline-secondary:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--ink-faint);
}

.btn-outline-danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(215, 116, 100, .35);
}
.btn-outline-danger:hover:not(:disabled) {
  background: rgba(215, 116, 100, .08);
  color: #ec8b7c;
  border-color: var(--danger);
}

.btn-success {
  background: var(--good);
  color: #0a1410;
  border-color: var(--good);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px rgba(127, 194, 142, .22);
}
.btn-success:hover:not(:disabled) { background: #95d2a4; border-color: #95d2a4; }

.btn-link {
  background: none;
  color: var(--ink-dim);
  border: none;
  padding: .65rem .6rem;
  font-weight: 400;
}
.btn-link:hover:not(:disabled) { color: var(--lumen-bright); }

.w-100 { width: 100%; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form-control, input[type="email"], input[type="password"], input[type="text"], textarea {
  width: 100%;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink);
  font: 400 .95rem/1.4 var(--sans);
  transition: border-color .18s var(--ease-soft), background .18s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus, input:focus, textarea:focus {
  outline: none;
  border-color: rgba(var(--lumen-glow), .65);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(var(--lumen-glow), .10);
}
.form-label, label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .4rem;
}
.form-group { margin-bottom: 1rem; }

/* Password field with show/hide eye toggle. */
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.6rem; }
.password-field__toggle {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
}
.password-field__toggle:hover { color: var(--ink-strong); background: rgba(0,0,0,.04); }
[data-theme="lumen"] .password-field__toggle:hover { background: rgba(255,255,255,.06); }
.password-field__toggle:focus-visible { outline: 2px solid var(--lumen); outline-offset: 2px; }
.password-field__icon--hide { display: none; }
.password-field.is-showing .password-field__icon--show { display: none; }
.password-field.is-showing .password-field__icon--hide { display: block; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap, 0);
  margin: 0;
}
.row.g-2 { gap: .6rem; --row-gap: .6rem; }
.row.g-3 { gap: 1rem; --row-gap: 1rem; }

.col,
[class^="col-"] { flex: 1 1 auto; min-width: 0; }
.col-md-1  { flex: 0 0 calc(8.333% - var(--row-gap, 0)); }
.col-md-2  { flex: 0 0 calc(16.666% - var(--row-gap, 0)); }
.col-md-3  { flex: 0 0 calc(25% - var(--row-gap, 0)); }
.col-md-4  { flex: 0 0 calc(33.333% - var(--row-gap, 0)); }
.col-md-5  { flex: 0 0 calc(41.666% - var(--row-gap, 0)); }
.col-md-6  { flex: 0 0 calc(50% - var(--row-gap, 0)); }
.col-md-8  { flex: 0 0 calc(66.666% - var(--row-gap, 0)); }
@media (max-width: 720px) {
  [class^="col-md-"] { flex: 1 1 100%; }
}

/* -------------------------------------------------------------------------
   Card (UI block, not flashcard)
   ------------------------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(800px 200px at 50% -50px, rgba(var(--lumen-glow), .06), transparent 60%);
}
.card-body { padding: 1.5rem 1.5rem 1.4rem; position: relative; }

/* -------------------------------------------------------------------------
   Alerts
   ------------------------------------------------------------------------- */
.alert {
  padding: .75rem 1rem;
  border-radius: 6px;
  font-size: .92rem;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.alert-danger {
  border-color: rgba(215, 116, 100, .35);
  background: rgba(215, 116, 100, .08);
  color: #f0b8ad;
}
.alert-warning {
  border-color: rgba(224, 166, 87, .35);
  background: rgba(224, 166, 87, .08);
  color: #f1c98a;
}
.alert ul { margin: 0; padding-left: 1.2rem; }

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: .94rem;
}
.table thead th {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-faint);
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--hairline);
}
.table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  vertical-align: middle;
}
.table tbody tr {
  transition: background .15s var(--ease-soft);
}
.table tbody tr:hover {
  background: var(--surface);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table a { color: var(--ink-strong); border-bottom: 1px solid transparent; transition: border-color .15s var(--ease-soft); }
.table a:hover { color: var(--lumen-bright); border-bottom-color: rgba(var(--lumen-glow), .5); }

/* -------------------------------------------------------------------------
   List group (used on Deck detail for cards)
   ------------------------------------------------------------------------- */
.list-group {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 1.5rem 0;
}
.list-group-item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  transition: border-color .18s var(--ease-soft), background .18s var(--ease-soft), transform .18s var(--ease-soft);
}
.list-group-item:hover {
  border-color: var(--hairline-bright);
  background: var(--surface-2);
  transform: translateX(2px);
}

/* -------------------------------------------------------------------------
   Helpers (minimal subset of bootstrap utility classes used in markup)
   ------------------------------------------------------------------------- */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-inline { display: inline; }
.flex-grow-1 { flex: 1 1 auto; min-width: 0; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-baseline { align-items: baseline; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.text-end { text-align: right; }
.text-center { text-align: center; }
.gap-2 { gap: .55rem; }
.gap-3 { gap: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .35rem; }
.mb-2 { margin-bottom: .65rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.6rem; }
.mt-1 { margin-top: .35rem; }
.mt-2 { margin-top: .65rem; }
.mt-3 { margin-top: 1rem; }
.me-2 { margin-right: .65rem; }
.ms-2 { margin-left: .65rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-2 { padding-bottom: .65rem; }
.fw-semibold { font-weight: 600; }
.border-bottom { border-bottom: 1px solid var(--hairline); }
.m-0 { margin: 0; }

/* Mono spans for IDs, timers, etc. */
.mono, .meta {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

/* -------------------------------------------------------------------------
   Auth pages — centered, spacious
   ------------------------------------------------------------------------- */
.auth-shell {
  max-width: 420px;
  margin: 4rem auto 0;
  padding: 0 1.5rem;
}
.auth-shell h1 {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  margin-bottom: 0;
}
.auth-shell .lede {
  color: var(--ink-dim);
  margin-top: .75rem;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.auth-shell form > * + * { margin-top: 1rem; }
.auth-shell .form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

/* -------------------------------------------------------------------------
   Hero (Home)
   ------------------------------------------------------------------------- */
.hero { padding: 1rem 0 2rem; }
.hero h1 {
  font-style: italic;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 1.5rem;
}
.hero h1 .lumen-word {
  background: linear-gradient(180deg, var(--lumen-bright) 0%, var(--lumen) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(var(--lumen-glow), .25);
}
.hero p {
  font-size: 1.1rem;
  color: var(--ink-dim);
  max-width: 38ch;
}
.hero .hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

/* Centered ZYNAPZYS logo treatment for the home hero. */
.hero--logo {
  text-align: center;
  padding: 2.5rem 1rem 4rem;
  max-width: 2800px;
  margin: 0 auto;
}
.hero__logo {
  width: clamp(1120px, 90vw, 2800px);
  height: auto;
  margin: 0 auto 1.8rem;
  display: block;
}

/* -------------------------------------------------------------------------
   Lumen Editorial — broadsheet-style hero
   ------------------------------------------------------------------------- */
.hero--editorial {
  max-width: 880px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
  text-align: center;
}
.hero--editorial .hero__logo {
  width: clamp(280px, 36vw, 460px);
  margin: 0 auto 2.5rem;
}
.hero-editorial__eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.2rem;
}
.hero-editorial__headline {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: 'opsz' 144;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0 0 1.4rem;
  color: var(--ink-strong);
}
.hero-editorial__lede {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 auto 2.4rem;
  color: var(--ink-dim);
}
.hero-editorial__actions {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Underline CTA — editorial accent. The label sits over a 2px vermillion bar
   that thickens on hover. No fill, no rounded button — pure type. */
.cta-underline {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-strong);
  padding: .4rem .1rem .5rem;
  text-decoration: none;
  transition: color .2s var(--ease-soft);
}
.cta-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--vermillion);
  transition: height .2s var(--ease-soft), background .2s var(--ease-soft);
}
.cta-underline:hover,
.cta-underline:focus-visible {
  color: var(--vermillion-bright);
}
.cta-underline:hover::after,
.cta-underline:focus-visible::after {
  height: 4px;
  background: var(--vermillion-bright);
}
.cta-underline--quiet {
  color: var(--ink-dim);
}
.cta-underline--quiet::after { background: var(--hairline-bright); }
.cta-underline--quiet:hover { color: var(--ink-strong); }
.cta-underline--quiet:hover::after { background: var(--ink-dim); }
.hero__tagline {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--lumen);
  margin: 0 0 2rem;
}
.hero--logo .hero-actions {
  justify-content: center;
}

/* Dark theme: invert the now-transparent black wordmark to white. */
[data-theme="lumen"] .brand__logo,
[data-theme="lumen"] .hero__logo,
[data-theme="lumen"] .land-hero__logo {
  filter: invert(1);
}

/* -------------------------------------------------------------------------
   Course / Deck headers — editorial split
   ------------------------------------------------------------------------- */
.entity-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}
.entity-header__title { margin: 0; }
.entity-header__meta {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: right;
  align-items: flex-end;
}
.entity-header__code {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lumen);
}
.entity-header__sub {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.crumb a { color: var(--ink-dim); }
.crumb a:hover { color: var(--lumen-bright); }

/* -------------------------------------------------------------------------
   Study page — the hero feature
   ------------------------------------------------------------------------- */
.study {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}
/* tabindex="0" gives the container a focus outline by default — we use
   focus only to capture keys, not as a visible interaction state. */
.study:focus,
.study:focus-visible { outline: none; }
.study__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.study__progress-text {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.study__progress-bar {
  flex: 1;
  margin: 0 1.5rem;
  height: 1px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.study__progress-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, transparent, var(--lumen) 100%);
  transition: width .5s var(--ease-out);
  box-shadow: 0 0 8px rgba(var(--lumen-glow), .8);
}

.flashcard {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: var(--sh-hero);
  padding: 3.5rem 3rem;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow .4s var(--ease-out);
}
.flashcard.is-revealed {
  box-shadow: var(--sh-hero), 0 0 60px rgba(var(--lumen-glow), .12);
  border-color: rgba(var(--lumen-glow), .25);
}
.flashcard::before {
  content: '';
  position: absolute;
  top: 1rem; right: 1.25rem;
  width: 20px; height: 20px;
  border-top: 1px solid var(--hairline-bright);
  border-right: 1px solid var(--hairline-bright);
  opacity: .6;
}
.flashcard::after {
  content: '';
  position: absolute;
  bottom: 1rem; left: 1.25rem;
  width: 20px; height: 20px;
  border-bottom: 1px solid var(--hairline-bright);
  border-left: 1px solid var(--hairline-bright);
  opacity: .6;
}

.flashcard__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.flashcard__label::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--lumen);
  opacity: .55;
}
.flashcard__label--answer { color: var(--lumen); }
.flashcard__label--answer::before { opacity: 1; box-shadow: 0 0 8px rgba(var(--lumen-glow), .6); }

.flashcard__text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink-strong);
  letter-spacing: -.005em;
}
.flashcard__divider {
  height: 1px;
  background: var(--hairline);
  margin: 2rem 0;
  position: relative;
}
.flashcard__divider::before {
  content: '';
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: var(--lumen);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(var(--lumen-glow), .8);
  animation: rise-in 600ms var(--ease-out) backwards;
}

@keyframes reveal-answer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.flashcard__answer { animation: reveal-answer 500ms var(--ease-out) backwards; }

/* Card ID in the bottom-right corner. Mono, faint, tucked inside the
   bottom-left bracket area so it doesn't fight the corner decoration. */
.flashcard__cardno {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
  pointer-events: none;
}

.study__reveal {
  width: 100%;
  margin-top: 2rem;
  padding: 1.1rem;
  font-size: 1rem;
  letter-spacing: .04em;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-top: 2rem;
}
.rating-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.2rem .5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  transition: all .18s var(--ease-soft);
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .02em;
}
.rating-btn:disabled { opacity: .55; cursor: not-allowed; }
.rating-btn:not(:disabled):hover {
  transform: translateY(-2px);
  background: var(--surface-2);
  border-color: var(--accent, var(--ink-faint));
  color: var(--accent, var(--ink-strong));
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.rating-btn__hotkey {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.rating-btn:not(:disabled):hover .rating-btn__hotkey { color: var(--accent, var(--ink-dim)); }
.rating-btn--again  { --accent: var(--again); }
.rating-btn--hard   { --accent: var(--hard); }
.rating-btn--good   { --accent: var(--good); }
.rating-btn--easy   { --accent: var(--lumen-bright); background: linear-gradient(180deg, rgba(var(--lumen-glow), .10), transparent); }
.rating-btn--easy:not(:disabled):hover {
  border-color: var(--lumen);
  color: var(--lumen-bright);
  box-shadow: 0 8px 24px rgba(var(--lumen-glow), .25);
}

.complete {
  text-align: center;
  padding: 4rem 1rem 2rem;
}
.complete__mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 4rem;
  color: var(--lumen);
  text-shadow: 0 0 30px rgba(var(--lumen-glow), .4);
  margin-bottom: 1rem;
  font-variation-settings: 'opsz' 144;
}
.complete h1 {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.complete .actions {
  margin-top: 2rem;
  display: flex;
  gap: .8rem;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   Media gallery (CardEdit)
   ------------------------------------------------------------------------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.media-tile {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--canvas-deep);
  display: flex;
  flex-direction: column;
}
.media-tile img,
.media-tile video {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #0a0c10;
  display: block;
}
.media-tile figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.media-tile__loc {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-faint);
}

/* Inline-code media (SVG/HTML embedded directly in the card). */
.flashcard__inline-media {
  margin-bottom: 1.2rem;
  text-align: center;
}
.flashcard__inline-media svg {
  max-width: 100%;
  max-height: 320px;
  height: auto;
}

/* MC answer choices (pre-reveal, clickable) */
.answer-choices {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.5rem;
}
.answer-choice {
  text-align: left;
  padding: .9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  cursor: pointer;
  transition: all .15s var(--ease-soft);
}
.answer-choice:hover {
  background: var(--surface-2);
  border-color: rgba(var(--lumen-glow), .55);
  transform: translateX(2px);
}

/* MC answer reveal (post-reveal, read-only with correctness markers) */
.answer-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: 1rem;
}
.answer-item {
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink-dim);
}
.answer-item__text { font-size: .98rem; }
.answer-item__explanation {
  margin-top: .45rem;
  font-size: .85rem;
  color: var(--ink-dim);
  font-style: italic;
}
.answer-item.is-correct {
  border-left-color: var(--good);
  background: linear-gradient(90deg, rgba(78, 201, 104, .22), transparent 55%);
  color: var(--ink-strong);
}
.answer-item.is-correct .answer-item__explanation { color: var(--ink); }
.answer-item.is-correct .answer-item__text::before {
  content: '✓ ';
  color: var(--good);
  font-weight: 700;
  margin-right: .15rem;
}
.answer-item.is-wrong {
  border-left-color: var(--again);
  background: linear-gradient(90deg, rgba(238, 79, 58, .22), transparent 55%);
  color: var(--ink-strong);
}
.answer-item.is-wrong .answer-item__explanation { color: var(--ink); }
.answer-item.is-picked.is-wrong .answer-item__text::after {
  content: '  · your pick';
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--again);
  margin-left: .5rem;
}
.answer-item.is-picked.is-correct .answer-item__text::after {
  content: '  · your pick';
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--good);
  margin-left: .5rem;
}

/* Inline media on Study page (above question/answer) */
.flashcard__media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: 1.2rem;
}
.flashcard__media img,
.flashcard__media video {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--canvas-deep);
  border: 1px solid var(--hairline);
}

/* Tiny indicator on DeckDetail card rows */
.media-pip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--lumen);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.media-pip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lumen);
  box-shadow: 0 0 6px rgba(var(--lumen-glow), .8);
}

/* -------------------------------------------------------------------------
   Calendar (month view)
   ------------------------------------------------------------------------- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.cal-head {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  padding: .7rem 0;
  color: var(--ink-faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}
.cal-day {
  min-height: 110px;
  padding: .5rem .55rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  cursor: pointer;
  transition: background .15s var(--ease-soft);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.cal-day:hover { background: var(--surface-2); }
.cal-day:nth-child(7n + 7) { border-right: 0; }
.cal-day--other { background: var(--canvas-deep); color: var(--ink-faint); }
.cal-day--today .cal-day__num {
  color: var(--lumen);
  text-shadow: 0 0 8px rgba(var(--lumen-glow), .6);
}
.cal-day__num {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-dim);
  letter-spacing: .03em;
}
.cal-event {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .45rem;
  background: var(--surface-3);
  border-left: 2px solid var(--lumen);
  border-radius: 3px;
  font-size: .78rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event__time {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--ink-faint);
}
.cal-event--quiz   { border-left-color: var(--hard); }
.cal-event--exam   { border-left-color: var(--again); }
.cal-event--homework { border-left-color: var(--good); }
.cal-event--project { border-left-color: var(--easy); }

/* Agenda view */
.agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.agenda__group {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  align-items: start;
}
.agenda__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  background: var(--surface-2);
  border-radius: 6px;
}
.agenda__date--today { background: var(--lumen); color: var(--canvas-deep); }
.agenda__date-dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.agenda__date-day { font-size: 1.6rem; font-weight: 600; line-height: 1; margin: .15rem 0; }
.agenda__date-mon { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.agenda__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.agenda__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .75rem;
  background: var(--surface-3);
  border-left: 3px solid var(--lumen);
  border-radius: 4px;
  cursor: pointer;
  font-size: .9rem;
}
.agenda__item:hover { background: var(--surface-2); }
.agenda__item-time {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-dim);
  min-width: 4.5rem;
}
.agenda__item-title { flex: 1; }
.agenda__item-reminder { font-size: .85rem; opacity: .7; }

/* -------------------------------------------------------------------------
   Modal (Calendar event form)
   ------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 50;
  animation: rise-in 200ms var(--ease-out) backwards;
}
.modal-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 540px;
  width: calc(100% - 2rem);
  max-height: 90vh;
  overflow-y: auto;
  z-index: 51;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--sh-hero);
  animation: rise-in 250ms var(--ease-out) backwards;
}
.modal-panel__inner { padding: 1.5rem; }
.modal-panel h2 {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  font-variation-settings: 'opsz' 72;
}

/* -------------------------------------------------------------------------
   Reminder banner
   ------------------------------------------------------------------------- */
.reminder-banner {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  max-width: 360px;
  background: var(--surface-2);
  border: 1px solid var(--lumen);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 24px rgba(var(--lumen-glow), .15);
  z-index: 100;
  animation: rise-in 400ms var(--ease-out) backwards;
}
.reminder-banner__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lumen);
  margin-bottom: .35rem;
}
.reminder-banner__title {
  font-family: var(--display);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-strong);
  margin-bottom: .25rem;
}
.reminder-banner__when {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-dim);
  margin-bottom: .8rem;
}

/* -------------------------------------------------------------------------
   Misc
   ------------------------------------------------------------------------- */
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--good);
}
.invalid {
  outline: 1px solid var(--danger);
}
.validation-message { color: var(--danger); }

.blazor-error-boundary {
  background: var(--canvas-deep);
  border-top: 2px solid var(--danger);
  color: var(--ink);
  padding: 1rem 1.5rem;
  font-family: var(--mono);
  font-size: .85rem;
}
.blazor-error-boundary::after { content: 'An error has occurred — check the console.'; }

#blazor-error-ui {
  background: var(--canvas-deep);
  color: var(--ink);
  border-top: 1px solid var(--lumen);
  bottom: 0;
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: .8rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-family: var(--mono);
  font-size: .85rem;
  box-shadow: 0 -10px 30px rgba(0,0,0,.5);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .55rem; color: var(--lumen); }
#blazor-error-ui .reload  { color: var(--lumen); margin-left: .5rem; }

/* -------------------------------------------------------------------------
   Store catalog
   ------------------------------------------------------------------------- */
.store-section__title {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  font-variation-settings: 'opsz' 72;
  margin-bottom: 1rem;
  letter-spacing: .01em;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.store-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: transform .2s var(--ease-soft),
              box-shadow .2s var(--ease-soft),
              border-color .2s var(--ease-soft);
  will-change: transform;
}
.store-card:hover,
.store-card:focus-visible {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--hairline-bright);
  box-shadow: 0 16px 36px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.22);
  color: inherit;
}
/* Lighter, more diffuse shadow for the cream/light theme. */
[data-theme="light"] .store-card { box-shadow: 0 1px 2px rgba(80,60,20,.06); }
[data-theme="light"] .store-card:hover,
[data-theme="light"] .store-card:focus-visible {
  box-shadow: 0 18px 36px rgba(80,60,20,.10), 0 2px 8px rgba(80,60,20,.06);
}

.store-card__image {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.store-card__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s var(--ease-soft);
}
.store-card:hover .store-card__image img { transform: scale(1.04); }

.store-card__placeholder {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.store-card__body { padding: 1.1rem 1.15rem 1.25rem; }
.store-card__name {
  font-size: 1.04rem;
  font-weight: 600;
  margin: 0 0 .4rem;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--ink-strong);
  transition: color .2s var(--ease-soft);
}
.store-card:hover .store-card__name { color: var(--lumen); }

.store-card__price {
  font-family: var(--mono);
  color: var(--lumen);
  margin: 0;
  font-size: .92rem;
  letter-spacing: .02em;
}

/* Featured tile — spans 2 columns on wider grids. Unused by default; opt-in
   via .store-card--featured on a card. */
.store-card--featured { grid-column: span 2; }
.store-card--featured .store-card__image { aspect-ratio: 2 / 1; }

.product-detail {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.4fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}
.product-detail__image {
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.product-detail__image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__body h1 { margin: .5rem 0 1rem; }
.product-detail__price {
  font-family: var(--mono);
  color: var(--lumen);
  font-size: 1.2rem;
  margin: 0 0 1.5rem;
}
@media (max-width: 720px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Home — signed-in welcome + section launchpad
   ------------------------------------------------------------------------- */
.welcome {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 0 3rem;
}
.welcome__headline {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -.03em;
  line-height: 1;
  margin: .9rem 0 1.1rem;
  color: var(--ink-strong);
}
.welcome__lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 0 0 2.4rem;
}
.welcome__signed {
  margin: 2rem 0 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
}

.launchpad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.launch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.4rem 1.35rem 1.25rem;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--sh-card);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform .2s var(--ease-out),
    border-color .2s var(--ease-soft),
    box-shadow .2s var(--ease-soft);
}
.launch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(600px 160px at 50% -60px, rgba(var(--lumen-glow), .07), transparent 60%);
}
.launch-card:hover,
.launch-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--hairline-bright);
  box-shadow: var(--sh-glow);
  color: var(--ink);
  outline: none;
}
.launch-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(var(--lumen-glow), .1);
  border: 1px solid rgba(var(--lumen-glow), .22);
  color: var(--lumen);
  margin-bottom: .35rem;
}
.launch-card__icon svg { width: 22px; height: 22px; }
.launch-card__title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-strong);
}
.launch-card__desc {
  font-size: .92rem;
  line-height: 1.45;
  color: var(--ink-dim);
  flex: 1;
}
.launch-card__go {
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .2s var(--ease-soft), transform .2s var(--ease-out);
}
.launch-card:hover .launch-card__go,
.launch-card:focus-visible .launch-card__go {
  color: var(--lumen);
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .launchpad { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .launchpad { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Course builder — build progress + syllabus outline
   ------------------------------------------------------------------------- */
.build-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.build-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lumen) 0%, var(--lumen-bright) 100%);
  transition: width .4s var(--ease-out);
}

.syllabus {
  list-style: none;
  counter-reset: mod;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.syllabus__item {
  counter-increment: mod;
  position: relative;
  padding: .85rem 1rem .85rem 2.6rem;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--hairline);
  border-radius: 9px;
}
.syllabus__item::before {
  content: counter(mod);
  position: absolute;
  left: .85rem; top: .8rem;
  width: 1.3rem; height: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .72rem;
  color: var(--lumen);
  border: 1px solid rgba(var(--lumen-glow), .3);
  border-radius: 50%;
}
.syllabus__title { display: block; font-weight: 600; color: var(--ink-strong); }
.syllabus__summary { display: block; font-size: .9rem; color: var(--ink-dim); margin-top: .15rem; }

/* -------------------------------------------------------------------------
   Quiz — take-and-score (course-builder v1)
   ------------------------------------------------------------------------- */
.quiz-tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .05rem .45rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lumen);
  border: 1px solid rgba(var(--lumen-glow), .35);
  border-radius: 999px;
  vertical-align: middle;
}

.quiz { list-style: none; counter-reset: q; margin: 0; padding: 0; display: grid; gap: 1rem; }
.quiz__q {
  counter-increment: q;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.quiz__question { font-weight: 600; color: var(--ink-strong); margin: 0 0 .85rem; }
.quiz__question::before { content: counter(q) ". "; color: var(--lumen); font-family: var(--mono); }
.quiz__options { display: grid; gap: .5rem; }
.quiz__option {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s var(--ease-soft), background .15s var(--ease-soft);
}
.quiz__option:hover { border-color: var(--hairline-bright); }
.quiz__option input { margin-top: .2rem; }
.quiz__option--correct { border-color: rgba(78, 201, 104, .5); background: rgba(78, 201, 104, .08); }
.quiz__option--wrong   { border-color: rgba(238, 79, 58, .5);  background: rgba(238, 79, 58, .08); }
.quiz__explain {
  margin: .1rem 0 .3rem 1.6rem;
  font-size: .85rem;
  color: var(--good);
}

/* -------------------------------------------------------------------------
   Admin — segmented section switcher, role chips, state tags

   Written because the admin markup originally used Bootstrap class names
   (.nav-tabs, .badge, .form-check-input) and this app does not load Bootstrap;
   only the small utility subset above exists. The tab strip rendered as a
   bulleted list and badges rendered as bare text.
   ------------------------------------------------------------------------- */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--hairline);
}
.seg__btn {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .38rem .9rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .15s var(--ease-out), background .15s var(--ease-out);
}
/* An inline segmented control: the same buttons without the section-heading
   framing, for sitting inside a toolbar rather than above a page. */
.seg--sm { margin: 0; padding: 0; border-bottom: 0; gap: .15rem; }
.seg--sm .seg__btn { padding: .3rem .7rem; font-size: .66rem; }

.seg__btn:hover { color: var(--ink); background: var(--surface-2); }
.seg__btn--on {
  color: var(--lumen-on);
  background: var(--surface-2);
  border-color: var(--hairline-bright);
}
.seg__count {
  margin-left: .45rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.seg__btn--on .seg__count { color: var(--lumen); }

/* Role chips: a toggle per role, laid out as a wrapping row inside a cell. */
.roles { display: flex; flex-wrap: wrap; gap: .3rem; }
.role {
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  padding: .12rem .55rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--hairline);
  transition: all .15s var(--ease-out);
  white-space: nowrap;
}
.role:hover:not(:disabled) { color: var(--ink); border-color: var(--hairline-bright); }
.role:disabled { cursor: not-allowed; opacity: .45; }
.role--on {
  color: var(--lumen-on);
  border-color: rgba(var(--lumen-glow), .5);
  background: rgba(var(--lumen-glow), .1);
}
/* Admin is the only role that currently grants anything — mark it apart. */
.role--on.role--live {
  color: var(--vermillion-bright);
  border-color: var(--vermillion);
  background: rgba(0, 0, 0, .12);
}

/* Small state tag (deleted / archived / you). Standalone, unlike .quiz-tag
   which carries a left margin for inline use after a question. */
.tag {
  display: inline-block;
  padding: .05rem .45rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--ink-faint);
  white-space: nowrap;
}
.tag--you  { color: var(--lumen); border-color: rgba(var(--lumen-glow), .4); }
.tag--warn { color: var(--hard); border-color: var(--hard); }
.tag--bad  { color: var(--vermillion-bright); border-color: var(--vermillion); }
.tag--ok   { color: var(--good); border-color: var(--good); }

/* ---- deck stats -----------------------------------------------------
   The header strip on a deck page: how the deck is going. Written in the
   app's own tokens — this app does not load Bootstrap, so its grid and
   badge classes render as unstyled text here. */
.deck-stats {
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.deck-stats__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 0.9rem;
}
.deck-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 4.5rem; }
.deck-stat__n {
  font-size: 1.45rem; font-weight: 600; line-height: 1;
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.deck-stat__k {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* One card's journey, left to right: retained, learning, not started. */
.deck-bar {
  display: flex; height: 7px; border-radius: 4px; overflow: hidden;
  background: var(--surface-3);
}
.deck-bar__seg { display: block; height: 100%; }
.deck-bar__seg--mature   { background: var(--good); }
.deck-bar__seg--learning { background: var(--lumen); }
.deck-bar__seg--new      { background: var(--hairline-bright); }


/* ---- sidebar resize grip -------------------------------------------
   A 6px strip on the sidebar's inner edge. It sits INSIDE the sidebar
   rather than being a third grid column, so the grid stays two columns
   and nothing else in the layout has to know it exists. */
.sidebar-grip {
  position: absolute;
  top: 0;
  right: -3px;          /* straddle the border, so the whole edge is grabbable */
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  background: transparent;
  transition: background .12s ease;
}
.sidebar-grip:hover,
.sidebar-grip:focus-visible,
body.is-resizing .sidebar-grip { background: var(--lumen); }
.sidebar-grip:focus-visible { outline: none; }

/* While dragging, stop the cursor flickering between I-beam and col-resize
   over text, and stop the drag selecting the page. */
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing * { cursor: col-resize !important; }

/* Narrow screens stack rather than split, so a resize handle would have
   nothing to resize. */
@media (max-width: 720px) { .sidebar-grip { display: none; } }

/* ---- deck scoreboard ------------------------------------------------
   Charts for one deck's score history. Written in the app's own tokens —
   this app loads no Bootstrap, and its grid/badge classes render as bare
   text here. The SVG figures take their colour from these variables so
   they re-theme with the reader rather than baking in a palette. */
.board { display: flex; flex-direction: column; gap: 1.6rem; }

.board__hero {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding: 1.4rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

/* The accuracy ring. Rotated so the arc grows from twelve o'clock, which
   is where a gauge is read from. */
.ring { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track {
  fill: none; stroke: var(--surface-3); stroke-width: 10;
}
.ring__value {
  fill: none; stroke: var(--lumen); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 0 6px rgba(var(--lumen-glow), .45));
}
.ring__label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem;
}
.ring__pct {
  font-family: var(--display); font-size: 2.1rem; line-height: 1;
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.ring__pct small { font-size: .95rem; color: var(--ink-dim); }
.ring__cap {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
}

.board__tally { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.tally { display: flex; flex-direction: column; gap: .15rem; min-width: 4.2rem; }
.tally__n {
  font-size: 1.5rem; font-weight: 600; line-height: 1;
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.tally__n small { font-size: .8rem; }
.tally--right .tally__n { color: var(--good); }
.tally--wrong .tally__n { color: var(--again); }
.tally__n.is-up { color: var(--good); }
.tally__n.is-down { color: var(--hard); }
.tally__k {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}

.board__row, .board__chart { display: flex; flex-direction: column; gap: .55rem; }
.board__cap {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.board__chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

.segbar {
  display: flex; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--surface-3);
}
.segbar__seg { display: block; height: 100%; }
.segbar__seg--mature   { background: var(--good); }
.segbar__seg--learning { background: var(--lumen); }
.segbar__seg--new      { background: var(--hairline-bright); }
.segbar__seg--again    { background: var(--again); }
.segbar__seg--hard     { background: var(--hard); }
.segbar__seg--good     { background: var(--good); }
.segbar__seg--easy     { background: var(--easy); }

.legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .78rem; color: var(--ink-dim); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dot--mature { background: var(--good); }
.dot--learning { background: var(--lumen); }
.dot--new { background: var(--hairline-bright); }
.dot--due { background: var(--lumen-deep); }
.dot--again { background: var(--again); }
.dot--hard { background: var(--hard); }
.dot--good { background: var(--good); }
.dot--easy { background: var(--easy); }

/* preserveAspectRatio="none" stretches the drawing to the box, so the
   stroke widths are set in the box's own scale and vector-effect keeps
   them from stretching with it. */
.chart {
  width: 100%; height: 150px; display: block;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.chart--bars { height: 120px; }
.chart__grid { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart__axis { stroke: var(--hairline-bright); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__area { fill: rgba(var(--lumen-glow), .16); stroke: none; }
.chart__line {
  fill: none; stroke: var(--lumen); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.chart__dot { fill: var(--lumen-bright); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart__axis-labels {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--ink-dim);
}
.bar--right { fill: var(--good); }
.bar--wrong { fill: var(--again); }

.board__raw > summary {
  cursor: pointer; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-dim);
}
.board__raw > summary:hover { color: var(--ink); }
.table--tight td, .table--tight th { padding-top: .3rem; padding-bottom: .3rem; }

/* ---- deck index (/decks) -------------------------------------------- */
.deck-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.deck-card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.deck-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.deck-card__title { font-size: 1.15rem; margin: .1rem 0 0; }
.deck-card__title a { color: var(--ink-strong); text-decoration: none; }
.deck-card__title a:hover { color: var(--lumen); }
.deck-card__score {
  font-family: var(--display); font-size: 1.6rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-strong);
}
.deck-card__score small { font-size: .8rem; color: var(--ink-dim); }
.deck-card__score.is-good { color: var(--good); }
.deck-card__score.is-ok   { color: var(--lumen); }
.deck-card__score.is-poor { color: var(--hard); }
.deck-card__score--none { color: var(--ink-faint); }
.deck-card__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .3rem; }

.spark { width: 100%; height: 28px; display: block; }
.spark__line {
  fill: none; stroke: var(--lumen); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* ---- study HUD -------------------------------------------------------
   The score, pinned while studying. Sticky rather than scrolled away: a
   figure you are trying to move should stay visible next to the card you
   are moving it with. */
.study__hud {
  position: sticky; top: 0; z-index: 4;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .55rem 0 .7rem;
  background: var(--canvas);
  /* The card below scrolls under this, so it needs its own edge. */
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.2rem;
}
.hud { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1.15rem; }
.hud__stat { display: flex; align-items: baseline; gap: .3rem; }
.hud__n {
  font-size: 1rem; font-weight: 600; line-height: 1;
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.hud__stat--right .hud__n { color: var(--good); }
.hud__stat--wrong .hud__n { color: var(--again); }
.hud__k {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.hud__sep { width: 1px; align-self: stretch; background: var(--hairline); margin: 0 .2rem; }
.hud__link {
  margin-left: auto; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
}
.hud__link:hover { color: var(--lumen); }
@media (max-width: 640px) { .hud__link { margin-left: 0; } }

/* ---- expandable syllabus module + its tutorial ---------------------- */
.syllabus__toggle {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  position: relative; color: inherit; font: inherit;
}
.syllabus__toggle:hover .syllabus__title { color: var(--lumen); }
.syllabus__chev {
  position: absolute; right: 0; top: .1rem;
  font-size: .6rem; color: var(--ink-faint);
}
.syllabus__item.is-open { background: var(--surface-2); }
.syllabus__panel {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

/* The tutorial reads like a book page, not like an app panel: a measure
   that is comfortable for prose rather than the full width of the shell. */
.tut { max-width: 42rem; }
.tut__intro {
  font-size: 1.02rem; color: var(--ink); margin-bottom: 1.6rem;
  padding-left: .9rem; border-left: 2px solid var(--lumen);
}
.tut__section { margin-bottom: 2rem; }
.tut__heading {
  font-family: var(--display); font-size: 1.2rem;
  color: var(--ink-strong); margin: 0 0 .6rem;
}
.tut__body p { margin: 0 0 .85rem; line-height: 1.65; }
.tut__body ul, .tut__body ol { margin: 0 0 .85rem 1.2rem; line-height: 1.6; }
.tut__body li { margin-bottom: .3rem; }
.tut__body code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface-3); padding: .05rem .3rem; border-radius: 3px;
}
.tut__body blockquote {
  margin: 0 0 .85rem; padding: .6rem .9rem;
  background: var(--surface-3); border-left: 2px solid var(--hairline-bright);
}
.tut__keys {
  margin-top: 1.6rem; padding: 1rem 1.1rem;
  background: var(--surface-3); border-radius: 10px;
}
.tut__colophon { margin-top: 1.4rem; font-style: italic; }

/* Tutorial figures. Drawn by the app from the model's data points. */
.tfig { margin: 1.4rem 0; }
.tfig__svg {
  width: 100%; height: auto; display: block;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.tfig__frame { stroke: var(--hairline-bright); stroke-width: 1; }
.tfig__zero { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 4; }
.tfig__line {
  fill: none; stroke: var(--ink-dim); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.tfig__line--accent { stroke: var(--lumen); stroke-width: 2.4; }
.tfig__line--dashed { stroke: var(--ink-faint); stroke-dasharray: 5 4; }
.tfig__bar { fill: var(--lumen); opacity: .85; }
.tfig__pt { fill: var(--ink-dim); }
.tfig__pt.is-accent { fill: var(--lumen); }
.tfig__tick { fill: var(--ink-faint); font-size: 11px; font-family: var(--mono); }
.tfig__legend {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  margin-top: .5rem; font-size: .78rem; color: var(--ink-dim);
}
.tfig__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tfig__swatch { width: 14px; height: 2px; background: var(--ink-dim); display: inline-block; }
.tfig__swatch.is-accent { background: var(--lumen); height: 3px; }
.tfig__swatch.is-dashed {
  background: repeating-linear-gradient(90deg, var(--ink-faint) 0 4px, transparent 4px 7px);
}
.tfig__cap {
  margin-top: .5rem; font-size: .82rem; color: var(--ink-dim); line-height: 1.5;
}
.tfig__cap strong { color: var(--ink); }

/* ---- collapsible sidebar tree --------------------------------------- */
.sidebar__heading-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; padding: 0 0 .5rem;
  cursor: pointer; color: inherit; font: inherit;
}
.sidebar__heading-btn .sidebar__heading { margin: 0; }
.sidebar__chev {
  font-size: .8rem; color: var(--ink-faint); line-height: 1;
  font-family: var(--mono);
}
.sidebar__heading-btn:hover .sidebar__chev { color: var(--lumen); }

.tree__row { display: flex; align-items: baseline; gap: .15rem; }
.tree__twist {
  flex: 0 0 auto; width: 1rem; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--ink-faint); font-size: .62rem; line-height: 1.4;
}
.tree__twist:hover { color: var(--lumen); }
.tree__twist--empty { cursor: default; }
.tree__row .tree__label { flex: 1 1 auto; min-width: 0; }

.tree__label.is-active {
  color: var(--lumen); font-weight: 600;
}
.tree__label--chapter {
  display: flex; gap: .4rem; font-size: .82rem; line-height: 1.45;
}
.tree__num {
  flex: 0 0 auto; color: var(--ink-faint); font-family: var(--mono);
  font-size: .72rem; min-width: 1.1rem;
}

/* ---- breadcrumbs, now at the top of the content ---------------------- */
.content > .crumbs {
  margin: -0.6rem 0 1.4rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--hairline);
}

/* The mode banner on a "study all" session. */
.hud__mode {
  margin: 0 0 .5rem; font-size: .8rem; color: var(--ink-dim); line-height: 1.5;
}
.hud__mode .tag { margin-right: .4rem; }

/* ---- typed answer (classic mode) ------------------------------------ */
.typed { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.typed__box {
  font-size: 1.05rem; padding: .7rem .9rem;
  font-family: var(--sans);
}
.accents { display: flex; flex-wrap: wrap; gap: .3rem; }
.accents__key {
  min-width: 2rem; padding: .25rem .45rem;
  background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 5px;
  font-size: .95rem; line-height: 1.2; cursor: pointer;
}
.accents__key:hover { border-color: var(--lumen); color: var(--lumen); }

/* ---- per-session scoreboard, above every card ----------------------- */
.sessboard {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  padding: .9rem 1.1rem; margin-bottom: .6rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.sessboard__ring { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.sessboard__ring .ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sessboard__ring .ring__pct { font-size: 1.5rem; }
.sessboard__ring .ring__cap { font-size: .55rem; }
.sessboard__body { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .7rem; }
.sessboard .board__tally { gap: 1.2rem; }
.sessboard .tally__n { font-size: 1.25rem; }

/* ---- study: one compact run bar, and a card that fits the screen -----
   The session board and the row beneath it both reported right/wrong,
   which spent a third of the viewport saying everything twice. One line
   now, and on a phone it wraps rather than scrolling. */
.runbar {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .35rem .6rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.runbar__ring { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.runbar__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.runbar__track { fill: none; stroke: var(--surface-3); stroke-width: 5; }
.runbar__value {
  fill: none; stroke: var(--lumen); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .4s ease;
}
.runbar__pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 600; color: var(--ink-strong);
}
.runbar__n { font-size: 1rem; font-weight: 600; line-height: 1; }
.runbar__n--right { color: var(--good); }
.runbar__n--wrong { color: var(--again); }
.runbar__sep { color: var(--ink-faint); }
.runbar__count { font-size: .85rem; color: var(--ink); margin-left: .3rem; }
.runbar__of { color: var(--ink-dim); font-size: .78em; }
.runbar__mix {
  display: flex; height: 5px; flex: 1 1 4rem; min-width: 3rem; max-width: 14rem;
  border-radius: 3px; overflow: hidden; background: var(--surface-3);
}
.runbar__deck { font-size: .85rem; color: var(--ink-dim); margin-left: auto; }
.runbar__link {
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; white-space: nowrap;
}
.runbar__link:hover { color: var(--lumen); }

/* Fit the viewport instead of scrolling it. The card takes whatever is
   left after the furniture, and only the card's own text scrolls if a
   question is genuinely too long for the space. */
.content:has(.study) { display: flex; flex-direction: column; overflow: hidden; }
.study { display: flex; flex-direction: column; gap: .5rem; min-height: 0; flex: 1 1 auto; }
.study .flashcard {
  /* basis 0, not auto: with auto the card stays at its content height and the
     slack collects as dead space under the controls. Basis 0 makes it take
     whatever is left, so the card fills the screen at any size. */
  flex: 1 1 0; min-height: 7rem; overflow-y: auto;
}

/* The page carries its own course › deck › card trail, so the app-level
   one directly above it is the same journey twice. */
.content:has(.study) > .crumbs { display: none; }

.study__hud { padding-top: .3rem; padding-bottom: .45rem; margin-bottom: .5rem; }

@media (max-width: 720px) {
  main, .content { padding: 1rem 1rem 1.2rem; }
  /* Match the narrow gutter the rest of the page drops to. */
  .content:has(.book-frame) > .crumbs { padding: .7rem 1rem .6rem; }
  .study__progress { gap: .5rem; }
  .runbar { gap: .4rem; padding: .3rem .5rem; }
  .runbar__deck { display: none; }        /* the run is what matters mid-run */
  .study .seg { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .study .seg__btn { white-space: nowrap; }
  .flashcard { padding: 1rem 1.1rem; }
  .rating-grid { gap: .4rem; }
}

@media (max-width: 420px) {
  .runbar__count, .runbar__link { display: none; }
  .accents__key { min-width: 1.8rem; padding: .2rem .35rem; font-size: .9rem; }
}

/* Position in the deck: a hairline across the foot of the run bar. The
   labelled "Card 4 / 8 ——— 20%" row said the same thing as the count
   already in the bar, and cost a whole line to do it. */
.runbar__progress {
  flex: 1 0 100%; height: 3px; margin-top: .3rem;
  background: var(--surface-3); border-radius: 2px; overflow: hidden;
}
.runbar__progress::after {
  content: ""; display: block; height: 100%;
  width: var(--progress, 0%); background: var(--lumen);
  transition: width .3s ease;
}

/* ---- printable 5x8 deck card ---------------------------------------- */
.printbar {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.printbar__actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

.card58 { display: flex; flex-direction: column; gap: 1.2rem; }
.card58__side {
  /* A FIXED 8in on screen, not a minimum.
     With min-height the box simply grew to fit its content, so measuring it
     always found room — while print, where the height really is 8in, spilled
     onto a third page. Screen and print have to agree or measuring is
     pointless. */
  width: 5in; height: 8in; overflow: hidden;
  padding: .25in;
  background: #fff; color: #111;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  font-size: var(--fs, 8pt);
  line-height: var(--lh, 1.25);
}
/* Column count is chosen by the fitter, not fixed: see zynFitCard. Two
   columns halve the cell width, which is right for a long deck and wrong
   for a short one. */
.card58__cols {
  column-count: var(--cols, 2);
  column-gap: .16in;
  column-rule: .25pt solid #ddd;
}

/* Each pair on its own two-cell grid, so the answers line up in a column
   instead of starting wherever the question happened to end. The em-dash that
   used to separate them is gone with the alignment doing that job.

   minmax(0, ...) on both cells matters: a grid track's default minimum is
   auto, which refuses to shrink below the longest unbreakable word and would
   push the answer column out of the card on one long entry. */
.card58__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: .07in;
  align-items: baseline;
  break-inside: avoid; page-break-inside: avoid;
  margin-bottom: .03in;
}

/* The ANSWER carries the weight. The question is the lookup key — the eye
   arrives already knowing it and is hunting for what it maps to, so bolding
   the question emphasises the half the reader supplies. */
.card58__q { color: #444; font-weight: 400; overflow-wrap: break-word; }
.card58__a { color: #000; font-weight: 700; overflow-wrap: break-word; }
.card58__note {
  grid-column: 1 / -1;
  color: #666; font-size: .88em; font-style: italic;
}

@media print {
  /* Exactly the card, nothing else. */
  @page { size: 5in 8in; margin: 0; }

  /* The app shell is viewport-locked — html/body are height:100% with
     overflow:hidden so the panes scroll independently. Printing that clips
     everything past the first page: side two simply never appeared. Printing
     needs a document that can be as tall as it likes. */
  html, body {
    height: auto !important; overflow: visible !important;
    background: #fff;
  }
  .site-header, .site-footer, .sidebar, .crumbs, .printbar, .alert, .noprint,
  #blazor-error-ui { display: none !important; }

  /* The lamp glow and the noise texture are position:fixed decoration on the
     body. Fixed elements are painted onto the printed page — the glow is a
     900px radial sitting at left:50%, which came out as a smear across the
     first sheet. Nothing decorative belongs on a reference card. */
  body::before, body::after { display: none !important; content: none !important; }
  main, .content, .page, .page-body { display: block !important; padding: 0 !important;
                                      margin: 0 !important; overflow: visible !important; }

  .card58 { display: block; gap: 0; }
  .card58__side {
    width: 5in; height: 8in; min-height: 0;
    border: 0; border-radius: 0; box-shadow: none;
    /* One side per sheet: "two sides" has to mean two. */
    break-after: page; page-break-after: always;
  }
  .card58__side:last-child { break-after: auto; page-break-after: auto; }
}

/* A second row of actions above the ratings — Repeat and Listen.

   Deliberately a row, not `.answer-choices`, which is a column and would
   stack these full-width the way the old single retry button was. Two short
   buttons side by side read as one group of "things that are not a grade",
   which keeps them from being mistaken for a fifth rating.

   They wrap rather than shrink on a narrow screen: a button whose label has
   been squeezed to "Repea…" is worse than one on its own line. */
.study-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 1.25rem 0 .6rem;
}
.study-actions .btn { flex: 0 1 auto; }

/* The verdict on a card: the last thing under the answer, hard right.

   In flow, not absolutely positioned. `.study .flashcard` scrolls its own
   content (overflow-y: auto), so a pinned corner mark would scroll away with
   a long answer instead of staying in the corner — and at <=720px the card's
   padding drops to 1rem, leaving no gutter to pin it into. Sitting at the end
   of the content puts it under the answer at every size, which is where it
   was asked for and the only place it cannot collide with the answer text.

   The right padding clears the absolutely-positioned "#id" already parked in
   that corner. */
.flashcard__verdict {
  align-self: flex-end;
  padding-right: 2.4rem;
  margin-top: .6rem;
  font-size: 1.9rem; line-height: 1; font-weight: 700;
  pointer-events: none;
}
.flashcard__verdict.is-right { color: var(--good); }
.flashcard__verdict.is-wrong { color: var(--again); }
@media (max-width: 720px) {
  .flashcard__verdict { font-size: 1.5rem; padding-right: 0; margin-top: .35rem; }
}

/* ============================================================
   LANDING PAGE  (signed-out /)
   ============================================================
   The marketing one-pager, rendered in the app's own palette
   rather than the white-panelled infographic it came from: a
   dark app that flashes a white band mid-scroll looks broken,
   not designed. The source's band rhythm is kept by alternating
   --surface and --canvas-deep instead.
   ============================================================ */
.land { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ---- hero ------------------------------------------------- */
.land-hero { text-align: center; padding: 1.5rem 0 3rem; }
.land-hero__logo {
  width: clamp(280px, 62vw, 720px);
  height: auto; display: block; margin: 0 auto .75rem;
}
.land-hero__tag {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 2.75rem;
}
.land-hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  align-items: center; text-align: left;
}
.land-hero__headline {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 1.1rem; color: var(--ink-strong);
}
.land-hero__headline .lumen-word {
  display: block; font-style: italic;
  background: linear-gradient(180deg, var(--lumen-bright) 0%, var(--lumen) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.land-hero__lede {
  color: var(--ink-dim); font-size: 1.03rem; line-height: 1.65;
  max-width: 34rem; margin: 0 0 1.6rem;
}

/* ---- the product preview ---------------------------------- */
/* Decorative and aria-hidden, so it is styled for silhouette,
   not legibility: it reads as "an app" at a glance and does not
   pretend to be anyone's real data. */
.land-mock { position: relative; padding: 0 0 2.5rem 0; }
.mock-app {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.mock-app__bar {
  display: flex; align-items: center; gap: .8rem;
  padding: .5rem .7rem; border-bottom: 1px solid var(--hairline);
  background: var(--canvas-deep);
}
.mock-app__brand {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .3em;
  color: var(--ink-dim);
}
.mock-app__search {
  flex: 1; font-size: .52rem; color: var(--ink-faint);
  background: var(--surface-2); border-radius: 4px; padding: .22rem .5rem;
}
.mock-app__body { display: grid; grid-template-columns: 84px 1fr; min-height: 210px; }
.mock-nav {
  list-style: none; margin: 0; padding: .55rem .35rem;
  border-right: 1px solid var(--hairline); background: var(--canvas-deep);
}
.mock-nav li {
  font-size: .5rem; color: var(--ink-faint); padding: .26rem .35rem;
  border-radius: 3px; white-space: nowrap;
}
.mock-nav li.is-active { background: var(--surface-3); color: var(--lumen); }
.mock-main { padding: .7rem .8rem; }
.mock-main__title {
  font-family: var(--display); font-size: .92rem; color: var(--ink-strong); margin: 0 0 .3rem;
}
.mock-tabs { list-style: none; display: flex; gap: .6rem; margin: 0 0 .6rem; padding: 0; }
.mock-tabs li { font-size: .5rem; color: var(--ink-faint); }
.mock-tabs li.is-active { color: var(--ink); border-bottom: 1.5px solid var(--lumen); padding-bottom: .12rem; }
.mock-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .7rem; }
.mock-tile {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 5px; padding: .35rem .4rem; display: flex; flex-direction: column; gap: .05rem;
}
.mock-tile__k { font-size: .42rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.mock-tile b { font-size: .78rem; color: var(--ink-strong); font-family: var(--display); }
.mock-tile__u { font-size: .4rem; color: var(--ink-faint); }
.mock-main__sub { font-size: .48rem; color: var(--ink-dim); margin: 0 0 .35rem; }
.mock-progress { display: flex; align-items: center; gap: .7rem; }
.mock-ring { width: 52px; height: 52px; flex: none; }
.mock-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; flex: none; }
.mock-bars i { width: 5px; background: var(--lumen-deep); border-radius: 1px; display: block; }
.mock-note { font-size: .44rem; color: var(--ink-faint); line-height: 1.4; margin: 0; }

.mock-phone {
  position: absolute; right: -6px; bottom: 0; width: 118px;
  background: var(--canvas-deep); border: 1px solid var(--hairline-bright);
  border-radius: 12px; padding: .55rem .5rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.mock-phone__title { font-size: .46rem; color: var(--ink-dim); margin: 0 0 .35rem; }
.mock-phone__card {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 5px; padding: .55rem .4rem; text-align: center;
  font-size: .5rem; color: var(--ink-strong); margin-bottom: .4rem;
}
.mock-phone__rate { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.mock-phone__rate .r {
  font-size: .4rem; text-align: center; padding: .16rem 0; border-radius: 3px;
  color: var(--canvas-deep); font-weight: 600;
}
.r--again { background: #e06c5a; }
.r--hard  { background: var(--hard); }
.r--good  { background: var(--good); }
.r--easy  { background: var(--easy); }
.mock-phone__count { font-size: .4rem; color: var(--ink-faint); text-align: center; margin: .3rem 0 0; }

/* ---- bands ------------------------------------------------ */
.land-band {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 2.25rem 1.75rem; margin-bottom: 1.25rem;
}
.land-band--deep { background: var(--canvas-deep); }
.land-kicker {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--lumen); margin: 0 0 1.4rem;
}

/* ---- four features ---------------------------------------- */
.land-features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem;
}
.land-features h3 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-strong); margin: .8rem 0 .4rem;
}
.land-features p { color: var(--ink-dim); font-size: .9rem; line-height: 1.55; margin: 0; }
.land-ico { display: inline-flex; width: 38px; height: 38px; color: var(--lumen); }
.land-ico svg { width: 100%; height: 100%; }
.land-ico--sm { width: 24px; height: 24px; flex: none; }

/* ---- how it works ----------------------------------------- */
/* Five steps in a row, separated by a chevron drawn as a
   pseudo-element so the arrows can never wrap on to their own
   line the way real elements between grid items would. */
.land-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem;
}
.land-steps li { position: relative; text-align: center; }
.land-steps li + li::before {
  content: "\203A"; position: absolute; left: -.85rem; top: 2.6rem;
  color: var(--ink-faint); font-size: 1.5rem; line-height: 1;
}
.land-step__n {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .18em; color: var(--ink-faint); margin-bottom: .55rem;
}
.land-step__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--hairline-bright); color: var(--lumen);
  margin-bottom: .7rem;
}
.land-step__dot svg { width: 22px; height: 22px; }
.land-step__dot--a { background: rgba(146, 200, 216, .10); color: var(--easy); }
.land-step__dot--b { background: rgba(78, 201, 104, .10);  color: var(--good); }
.land-step__dot--c { background: rgba(var(--lumen-glow), .12); color: var(--lumen); }
.land-step__dot--d { background: rgba(224, 108, 90, .10);  color: #e0876a; }
.land-step__dot--e { background: rgba(246, 179, 82, .10);  color: var(--lumen-bright); }
.land-steps h3 {
  font-family: var(--display); font-size: 1.05rem; color: var(--ink-strong); margin: 0 0 .3rem;
}
.land-steps p { font-size: .82rem; color: var(--ink-dim); line-height: 1.5; margin: 0; }

/* ---- statement / audiences / foundation ------------------- */
.land-split { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }
.land-statement, .land-col {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 2rem 1.6rem;
}
.land-statement { background: linear-gradient(160deg, var(--surface-2), var(--canvas-deep)); }
.land-statement h2 {
  font-family: var(--mono); font-size: .95rem; line-height: 1.75;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-strong); margin: 0;
}
.land-rule { display: block; width: 46px; height: 2px; background: var(--lumen); margin: 1.4rem 0; }
.land-statement p { color: var(--ink-dim); font-size: .92rem; line-height: 1.65; margin: 0; }

.land-audience { list-style: none; margin: 0; padding: 0; }
.land-audience li { display: flex; gap: .8rem; padding: .7rem 0; align-items: flex-start; }
.land-audience li + li { border-top: 1px solid var(--hairline); }
.land-audience b { display: block; color: var(--ink-strong); font-size: .95rem; margin-bottom: .12rem; }
.land-audience p { margin: 0; color: var(--ink-dim); font-size: .84rem; line-height: 1.5; }

.land-checks { list-style: none; margin: 0; padding: 0; }
.land-checks li {
  position: relative; padding: .45rem 0 .45rem 1.7rem;
  color: var(--ink-dim); font-size: .88rem; line-height: 1.5;
}
.land-checks li::before {
  content: "\2713"; position: absolute; left: 0; top: .45rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: rgba(var(--lumen-glow), .16); color: var(--lumen);
  font-size: .62rem; display: flex; align-items: center; justify-content: center;
}
.land-closer {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-strong); line-height: 1.85; margin: 0;
}

/* ---- footer ----------------------------------------------- */
.land-foot {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: 2.5rem 0 .5rem; margin-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}
.land-foot__brand {
  font-family: var(--mono); font-size: .9rem; letter-spacing: .5em; color: var(--ink);
}
.land-foot__bar { width: 1px; height: 22px; background: var(--hairline-bright); }
.land-foot__tag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-dim);
}

/* ---- responsive ------------------------------------------- */
/* The five-step row breaks first: at 5 across, the labels squeeze
   to two characters a line well before the grid itself runs out
   of room, so it drops to 2-up early rather than at a round
   device width. */
@media (max-width: 1040px) {
  .land-hero__grid { grid-template-columns: 1fr; }
  .land-mock { max-width: 560px; margin: 0 auto; }
  .land-split { grid-template-columns: 1fr; }
  .land-features { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .land-steps { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  .land-steps li + li::before { display: none; }
}
@media (max-width: 620px) {
  .land { padding: 0 .9rem 3rem; }
  .land-band { padding: 1.5rem 1.1rem; }
  .land-features, .land-steps { grid-template-columns: 1fr; }
  .land-hero__tag { letter-spacing: .3em; margin-bottom: 1.75rem; }
  .mock-phone { position: static; width: auto; margin-top: .75rem; }
  .land-mock { padding-bottom: 0; }
  .land-foot { flex-direction: column; gap: .6rem; }
  .land-foot__bar { display: none; }
}