/* Cluewise graphic puzzle club. The shell shares one color system across
   every route; data-grid remains an independent palette for puzzle squares. */
@font-face {
  font-family: 'Archivo Black';
  src: url('assets/fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-style: normal; font-weight: 900; font-display: swap;
}
:root {
  color-scheme: light;
  --ui-headline: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  --ui-display: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
  --ui-choice-width: 156px;
  --ui-bg: #faf3e3;
  --ui-surface: #fffaf0;
  --ui-settings-surface: #fffaf0;
  --ui-settings-divider: #d7cdbb;
  --ui-feature-surface: #fffaf0;
  --ui-category-surface: #fffaf0;
  --ui-action-surface: #fffaf0;
  --ui-raised: #eee5d4;
  --ui-line: #d0c6b3;
  --ui-field-line: #8b8072;
  --ui-nav: #faf3e3;
  --ui-ink: #1d1d1b;
  --ui-soft: #60594f;
  --ui-muted: #696156;
  --ui-accent: #c7372b;
  --enum-ink: #a52b21;          /* clue word counts: small text, so darker than the accent */
  --ui-on-accent: #ffffff;
  --ui-tint: #fbe0d4;
  --ui-learn: #7550a2;
  --ui-learn-tint: #eee4f5;
  --ui-good: #27664c;
  --ui-bad: #b42d27;
  --ui-shadow: none;
  --ui-lift: 0 12px 36px #1d1d1b20;
  --ui-science: #385d7c;
  --ui-technology: #56613b;
  --ui-history: #905a29;
  --ui-arts: #9b3e49;
  --ui-geography: #326854;
  --club-coral: #f05242;
  --club-yellow: #f9ce49;
  --club-paper: #fff8e7;
  --club-black: #1d1d1b;
  --ui-type-caption: .8125rem;
  --ui-type-small: .8125rem;
  --ui-type-body: .9375rem;
  --ui-type-title: 1.25rem;
  --ui-type-page: 2rem;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-radius-control: 8px;
  --ui-radius-card: 10px;
  --ui-radius-sheet: 18px;
  --ui-feedback-bg: #1d1d1b;
  --ui-feedback-ink: #fff8e7;
  --ui-mastery-track: #d7cdbb;

  --app-bg: var(--ui-bg);
  --chrome: var(--ui-nav);
  --card: var(--ui-surface);
  --card-2: var(--ui-raised);
  --card-line: var(--ui-accent);
  --hairline: var(--ui-line);
  --ink: var(--ui-ink);
  --ink-soft: var(--ui-soft);
  --ink-faint: var(--ui-muted);
  --themed: var(--ui-learn);
  --good: var(--ui-good);
  --bad: var(--ui-bad);
  --bad-ink: var(--ui-bad);
  --accent: var(--ui-accent);
  --shadow: var(--ui-lift);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #20201f;
  --ui-surface: #292927;
  --ui-settings-surface: #292927;
  --ui-settings-divider: #4c4944;
  --ui-feature-surface: #292927;
  --ui-category-surface: #292927;
  --ui-action-surface: #292927;
  --ui-raised: #353430;
  --ui-line: #57534b;
  --ui-field-line: #8f897c;
  --ui-nav: #20201f;
  --ui-ink: #fff5e3;
  --ui-soft: #c9c0b2;
  --ui-muted: #b9b0a2;
  --ui-accent: #ff8b78;
  --enum-ink: #ff8b78;
  --ui-on-accent: #291611;
  --ui-tint: #49312b;
  --ui-learn: #cfb0ed;
  --ui-learn-tint: #3c3148;
  --ui-good: #93d0a8;
  --ui-bad: #ffa18e;
  --ui-lift: 0 12px 36px #0005;
  --ui-science: #a4c3df;
  --ui-technology: #c4ce99;
  --ui-history: #e9b47d;
  --ui-arts: #e7a1ae;
  --ui-geography: #9bceb7;
  --ui-feedback-bg: #fff5e3;
  --ui-feedback-ink: #20201f;
  --ui-mastery-track: #57534b;
}

/* ---------------------------------------------------------- grid palettes
   Kept independent of the app theme: data-grid is set by theme.js from the
   "Puzzle grid" setting (auto follows the app theme). The light palette is
   also the bare :root default, so the grid reads correctly before JS runs. */
:root, :root[data-grid="light"] {
  --grid-line:  #000000;
  --cell:       #fff9ed;
  --cell-theme: #e9dcf3;   /* learnable theme square (lavender wash) */
  --cell-ink:   #15161a;
  --cell-num:   #4e4b43;   /* Readable on the paper and lavender cells. */

  --blue:       #6aa9d0;
  --blue-soft:  #7fb6d8;
  --blue-fill:  #d7e8f6;
  --yellow:     #ffd21e;
  --yellow-fill:#fff3ae;
  /* Highlighting a lavender square keeps the lavender: each of these is the
     matching highlight pulled toward the wash, and brighter than it, so the
     active word and the cursor still stand out over a themed run. */
  --theme-word: #cbd2f9;
  --theme-sel:  #e7cff5;

  --cell-good:  #105f40;
  --cell-bad:   #a62822;
  --cell-shown: #56585c;
}

:root[data-grid="dark"] {
  --grid-line:  #141413;
  --cell:       #34342f;
  --cell-theme: #4e405e;
  --cell-ink:   #fff5e3;
  --cell-num:   #d0c8ba;   /* Readable on dark and lavender cells. */

  --blue:       #6aa9d0;
  --blue-soft:  #8cc3e4;
  --blue-fill:  #2e5c7d;
  --yellow:     #ffd21e;
  --yellow-fill:#775d14;
  --theme-word: #445a9b;
  --theme-sel:  #6f4f9c;

  --cell-good:  #a4f3c5;
  --cell-bad:   #ffd3c4;
  --cell-shown: #e7dfd4;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ink);
  font-family: var(--ui-display);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  overflow: hidden;           /* only .viewhost scrolls; chrome stays put */
}
:root[data-theme="light"] body { background: #e9dfcc; }

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer;
}
/* touch leaves no focus ring behind; keyboard users still get one */
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------- shell
   App-like chrome: the app box is EXACTLY one viewport tall (never merely at
   least — min-height lets a long view push the ad bar and nav below the fold),
   the view scrolls inside it, and the bottom chrome stays pinned on every
   screen. The player relies on the same bound: without it, opening the learn
   panel would grow the page instead of shrinking the grid. */
.shell { display: flex; justify-content: center; height: 100%; }

.app {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
}

.viewhost {
  flex: 1 1 auto;
  min-height: 0;              /* or the content floors the flex item's height */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.adbar, .bottomnav { flex: none; }
body.immersive .viewhost { overflow: hidden; display: flex; }
body.immersive .viewhost > * { flex: 1; min-height: 0; }

.view { padding: 1rem 1rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.block { display: flex; flex-direction: column; gap: .6rem; }

.muted { color: var(--ink-soft); }
.small { font-size: .82rem; line-height: 1.5; }
.center { text-align: center; }
.dot { color: var(--ink-faint); }
.link { color: var(--accent); font-size: .82rem; font-weight: 600; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-title { font-size: 1.55rem; font-weight: 680; letter-spacing: -.02em; }
.page-sub { color: var(--ink-soft); font-size: .85rem; margin-top: .25rem; line-height: 1.45; }

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sec-title { font-size: .96rem; font-weight: 650;
             display: flex; align-items: center; gap: .35rem; }
.sec-title svg { color: var(--ink-soft); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem 1rem;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: .9rem; font-weight: 600;
  transition: filter .12s, transform .08s;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: transparent; color: #08181f; }
:root[data-theme="light"] .btn.primary { color: #fff; }
.btn.wide { width: 100%; }
.btn.small { padding: .38rem .7rem; font-size: .8rem; border-radius: 8px; }
.btn.danger { color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.btn.go { flex: none; }

/* Inline SVG icons (ui.js svgIcon) — one stroke style everywhere. Contexts
   with their own icon rules (bottom nav, toolbar) override these later. */
svg.ico { fill: none; stroke: currentColor; stroke-width: 1.8;
          stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ico.fill { fill: currentColor; stroke: none; }

.card { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; }
.card.pad { padding: .9rem 1rem; }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .88rem; }
.kv + .kv { border-top: 1px solid var(--hairline); }

/* --------------------------------------------------------------------- home */
.home-top { display: flex; align-items: center; justify-content: space-between; }
.streak { display: flex; align-items: center; gap: .35rem; }
.streak-flame { display: flex; color: var(--ink-faint); }
.streak.lit .streak-flame { color: #f6913d; }
.streak-n { font-weight: 750; font-size: 1.05rem; }
.streak-l { color: var(--ink-faint); font-size: .76rem; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--hairline);
  display: grid; place-items: center; color: var(--ink-soft);
}

.hero { display: flex; flex-direction: column; gap: .55rem; }
.hero-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.hero-sub { color: var(--ink-soft); font-size: .88rem; }

.topic-row { display: flex; gap: .5rem; margin-top: .3rem; }
.topic-input {
  flex: 1; min-width: 0;
  padding: .72rem .85rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  color: var(--ink); font-size: .92rem;
}
.topic-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.topic-input::placeholder { color: var(--ink-faint); }

/* Teacher mode (custom words & definitions) */
.link-toggle {
  background: none; border: none; padding: .15rem 0;
  color: var(--accent); font-size: .84rem; font-weight: 600;
  cursor: pointer; text-align: left;
}
.teacher-body { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.words-input {
  width: 100%; resize: vertical; min-height: 7rem;
  padding: .72rem .85rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  color: var(--ink); font-size: .85rem; line-height: 1.45;
  font-family: inherit;
}
.words-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.words-input::placeholder { color: var(--ink-faint); }

.quota { display: flex; align-items: baseline; gap: .3rem; font-size: .78rem; color: var(--ink-soft); }
.quota-n { font-weight: 750; color: var(--accent); font-size: .95rem; }
.quota-n.out { color: var(--bad); }
.quota-up { margin-left: auto; color: var(--accent); font-weight: 650; }

.continue, .nudge {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1rem;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
}
.continue-main, .nudge > div { flex: 1; min-width: 0; }
.continue h3, .nudge h3 { font-size: .95rem; font-weight: 640; margin-bottom: .18rem; }
.continue-go { color: var(--accent); display: flex; align-items: center; }
.nudge { border-color: color-mix(in srgb, var(--themed) 42%, transparent); }

.rail {
  display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .3rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .pcard { flex: 0 0 74%; scroll-snap-align: start; }

.pcard {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .85rem .9rem;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
  transition: border-color .12s, transform .08s;
}
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pcard-cat { font-size: .74rem; color: var(--ink-soft); letter-spacing: .02em;
             display: inline-flex; align-items: center; gap: .28rem; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-title { font-size: 1rem; font-weight: 640; line-height: 1.25; }
.pcard-meta { display: flex; gap: .35rem; font-size: .8rem; color: var(--ink-faint); flex-wrap: wrap; }
.themed-count { color: var(--themed); }
.pill {
  white-space: nowrap; flex: none;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  padding: .12rem .4rem; border-radius: 99px;
  border: 1px solid var(--hairline); color: var(--ink-soft);
}
.pill.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }

.catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.cattile {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem .85rem;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 13px;
}
.cattile-ico { display: flex; color: var(--accent); margin-bottom: .2rem; }
.cattile-name { font-weight: 620; font-size: .9rem; }
.cattile-n { font-size: .73rem; color: var(--ink-faint); }
.cattile.soon { opacity: .5; border-style: dashed; }

/* categories the shell knows about but the generator hasn't filled yet */
.soon .sec-title { font-weight: 600; }
.soonrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.soontile {
  padding: .3rem .6rem; border-radius: 99px; font-size: .78rem;
  border: 1px dashed var(--hairline); color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: .3rem;
}
.gen-result .unavailable { display: flex; flex-direction: column; gap: .6rem; }
.gen-result h3 { font-size: 1rem; font-weight: 650; }

.pcard-age { color: var(--ink-faint); }
.pcard-take { color: var(--ink-faint); font-weight: 500; font-size: .85em; }
.cattile.soon { cursor: default; }
.showmore { align-self: center; }

/* ------------------------------------------------------------------- browse */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  padding: .34rem .75rem; border-radius: 99px;
  border: 1px solid var(--hairline); background: var(--card);
  font-size: .8rem; text-transform: capitalize;
}
.chip.on { background: var(--accent); border-color: transparent; color: #08181f; font-weight: 650; }
:root[data-theme="light"] .chip.on { color: #fff; }
.chip-x { margin-left: .3rem; opacity: .8; }
.browse-list { display: flex; flex-direction: column; gap: 1.4rem; }
.pgrid { display: flex; flex-direction: column; gap: .6rem; }

/* ----------------------------------------------------------------- generate */
.gen-form { display: flex; flex-direction: column; gap: .6rem; }
.suggest { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field-label {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
/* One option row = one band of equal chips, like the settings segmented
   pickers. Wrapping is what looked broken (Audience stranded "Adult" alone on
   a second line); a long label wraps inside its own chip instead. */
.levels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .35rem; }
.levels .chip { text-align: center; }
.level-hint { font-size: .74rem; color: var(--ink-faint); }
.gen-elapsed { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; }
.gen-wait { font-size: .82rem; line-height: 1.55; color: var(--ink-soft); }
.gen-err {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .74rem; line-height: 1.45; color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border-radius: 8px; padding: .5rem .6rem;
  overflow-wrap: anywhere;
}
/* the wait is genuine and open-ended, so the bar sweeps rather than fills */
.gen-bar.indeterminate .gen-bar-fill {
  width: 38%;
  animation: sweep 1.6s ease-in-out infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.sugg {
  padding: .3rem .6rem; border-radius: 99px; font-size: .78rem;
  background: var(--card); border: 1px solid var(--hairline); color: var(--ink-soft);
}
.gen-note { margin-top: .4rem; }

.steps { display: flex; flex-direction: column; gap: 1rem; }
.gen-topic h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin-top: .15rem; }
.step-list { display: flex; flex-direction: column; gap: .1rem; }
.step {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .6rem .2rem; opacity: .35; transition: opacity .25s;
}
.step.active, .step.done { opacity: 1; }
.step-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: .32rem; flex: none;
  background: var(--ink-faint);
}
.step.active .step-dot { background: var(--accent); animation: pulse 1s infinite; }
.step.done .step-dot { background: var(--good); }
@keyframes pulse { 50% { transform: scale(1.55); opacity: .55; } }
.step-label { font-size: .9rem; font-weight: 600; }
.step-detail { font-size: .76rem; color: var(--ink-faint); margin-top: .1rem; }
.gen-bar { height: 4px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.gen-bar-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* -------------------------------------------------------------------- learn */
.tabs { display: flex; gap: .35rem; background: var(--card-2); padding: .25rem; border-radius: 11px; }
.tab { flex: 1; padding: .5rem; min-height: 40px; border-radius: 8px;
       font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.tab.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.recall { display: flex; flex-direction: column; gap: .8rem; }
.recall-progress { font-size: .76rem; color: var(--ink-faint); display: flex; align-items: center; justify-content: center; position: relative; }
.recall-stop { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--accent);
               font-size: .8rem; font-weight: 650; padding: .55rem .6rem; min-height: 40px; }
.recall-card {
  padding: 1.4rem 1.1rem; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 16px;
  display: flex; flex-direction: column; gap: .5rem; align-items: center; text-align: center;
}
.recall-kicker { font-size: .74rem; color: var(--ink-faint);
                 display: inline-flex; align-items: center; gap: .3rem; }
.recall-term { font-size: 1.7rem; font-weight: 750; letter-spacing: .06em; }
.recall-card .btn.wide { margin-top: .6rem; }
.recall-answer { width: 100%; display: flex; flex-direction: column; gap: .9rem; margin-top: .3rem; }
.recall-def { font-size: .87rem; line-height: 1.6; color: var(--ink-soft); text-align: left; }
.recall-rate { display: flex; gap: .5rem; }
.recall-rate .btn { flex: 1; }
.btn.again { color: var(--bad); }

/* ------------------------------------------------- summary sheet statistics */
.sum-stats, .statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.statgrid { grid-template-columns: repeat(2, 1fr); }
.stat {
  padding: .8rem .5rem; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 13px; text-align: center;
}
.stat.accent { border-color: color-mix(in srgb, var(--themed) 45%, transparent); }
.stat-v { font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; }
.stat-l { font-size: .72rem; color: var(--ink-faint); margin-top: .15rem; }
.sum-actions { display: flex; gap: .6rem; }
.sum-actions .btn { flex: 1; }

/* ------------------------------------------------------------------ profile */
.plan-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 13px;
}
.plan-name { font-weight: 700; }

/* ------------------------------------------------------------------ paywall */
.plans { display: flex; flex-direction: column; gap: .8rem; }
.plan {
  position: relative;
  padding: 1rem; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 16px;
  display: flex; flex-direction: column; gap: .7rem;
}
.plan.featured { border-color: var(--accent); }
.plan.current { border-color: var(--good); }
.plan-tag {
  position: absolute; top: -9px; right: 14px;
  background: var(--accent); color: #08181f;
  font-size: .62rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 99px;
}
:root[data-theme="light"] .plan-tag { color: #fff; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; }
.plan-title { font-size: 1.1rem; font-weight: 700; }
.plan-price { font-size: 1rem; font-weight: 650; color: var(--accent); }
.plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.plan-feats li { font-size: .84rem; color: var(--ink-soft); padding-left: 1.1rem; position: relative; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--good); }
.plan.lifetime { border-style: dashed; }
.restore-row { display: flex; justify-content: center; margin-top: .5rem; }

/* ----------------------------------------------------------------- settings */
.srow { display: flex; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; flex-wrap: wrap; }
/* the one destructive row on the screen sits apart from the benign links
   under it, so a thumb aiming for "Open" cannot land on "Reset" */
.block:has(.btn.danger) { margin-bottom: 1.1rem; }
.srow:has(.btn.danger) { padding-block: 1.05rem; }
.srow-text { flex: 1 1 150px; }
.srow .seg, .srow .switch, .srow .btn { margin-left: auto; }
.srow.stack { flex-direction: column; align-items: stretch; }
.srow.stack .seg { margin-left: 0; }
.srow.stack .seg-b { flex: 1; text-align: center; }
.backlink { gap: .25rem; }
.gen-details summary { font-size: .76rem; color: var(--ink-faint); cursor: pointer; }
.gen-details p { margin-top: .4rem; }
.srow + .srow { border-top: 1px solid var(--hairline); }
.srow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srow-label { font-size: .9rem; font-weight: 560; }
.srow-hint { font-size: .74rem; color: var(--ink-faint); margin-top: .1rem; }
.seg { display: flex; background: var(--card-2); border-radius: 9px; padding: .16rem; gap: .1rem; }
.seg-b { padding: .3rem .55rem; min-height: 36px; border-radius: 7px; font-size: .76rem; color: var(--ink-soft); }
.seg-b.on { background: var(--accent); color: #08181f; font-weight: 650; }
:root[data-theme="light"] .seg-b.on { color: #fff; }
.switch {
  width: 46px; height: 27px; border-radius: 99px; background: var(--card-2);
  border: 1px solid var(--hairline); position: relative; flex: none; transition: background .15s;
}
/* the visible pill stays 27px; the finger target is 44 */
.switch::after { content: ""; position: absolute; inset: -9px -6px; }
.srow-tap { cursor: pointer; }
.srow-tap:active { background: var(--card-2); }
/* the grid is a focus stop now, so it needs a visible ring */
.grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch.on { background: var(--good); border-color: transparent; }
.knob {
  position: absolute; top: 2px; left: 2px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.switch.on .knob { transform: translateX(19px); }

/* --------------------------------------------------------------- bottom nav */
.bottomnav {
  display: flex; align-items: stretch;
  background: var(--chrome);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.navitem {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .5rem 0 .45rem; color: var(--ink-faint);
}
.navitem svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.navlabel { font-size: .64rem; letter-spacing: .01em; }
.navitem.on { color: var(--accent); }
.navitem.center .navicon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: #08181f;
  display: grid; place-items: center; margin-top: -14px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.navitem.center .navicon svg { stroke-width: 2.4; }
.navitem.center.on { color: var(--accent); }
.navitem.center .navlabel { margin-top: -2px; }

/* Create-tab dot: a generation is running (pulsing), ready (green) or failed. */
.navitem .navicon { position: relative; }
.nav-badge {
  position: absolute; top: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--chrome);
  background: var(--ink-soft);
}
.nav-badge.run { background: var(--yellow); animation: pulse 1.2s infinite; }
.nav-badge.done { background: var(--good); }
.nav-badge.err { background: var(--bad); }

/* ------------------------------------------------- background generation bar
   Pinned chrome (above the ad bar) reporting the generation that is running
   server-side: two lines, tinted by state, tappable, so it reads as a live
   job rather than another grey strip like the ad bar next to it. */
.genbar {
  position: relative;
  flex: none;
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .8rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--chrome));
  border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
}
/* In the player with no ad bar under it, the strip is the bottom-most chrome
   and inherits the home-indicator inset. */
body.immersive.no-ads .genbar { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
.genbar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.genbar-label {
  font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
.genbar-topic {
  font-size: .84rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.genbar-time {
  flex: none; font-size: .82rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.genbar-act { flex: none; color: var(--accent); font-weight: 700; font-size: .8rem; }
.genbar-act.strong {
  background: var(--accent); color: #08181f;
  border-radius: 99px; padding: .3rem .7rem;
}
:root[data-theme="light"] .genbar-act.strong { color: #fff; }
.genbar-x { flex: none; color: var(--ink-faint); font-size: 1.05rem; line-height: 1; padding: 0 .15rem; }
.genbar-ico { flex: none; display: flex; align-items: center; }
.genbar.error .genbar-ico, .gencard.error .gencard-ico { color: var(--bad); }
/* the default spinner's track is a hairline, which disappears on the tinted
   bar and leaves a lone arc; give it a visible ring here */
.genbar .spinner, .gencard .spinner {
  flex: none;
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
}

/* a hairline sweep along the top edge: motion says "still working" from the
   corner of the eye, without another spinner competing for attention */
.genbar-sweep {
  position: absolute; top: 0; left: 0; height: 2px; width: 34%;
  background: var(--accent);
  animation: sweep 1.9s ease-in-out infinite;
}

.genbar.done {
  background: color-mix(in srgb, var(--good) 14%, var(--chrome));
  border-top-color: color-mix(in srgb, var(--good) 50%, transparent);
}
.genbar.done .genbar-label { color: var(--good); }
.genbar.done .genbar-ico svg {
  fill: none; stroke: var(--good); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.genbar.done .genbar-act.strong { background: var(--good); }
.genbar.error {
  background: color-mix(in srgb, var(--bad) 12%, var(--chrome));
  border-top-color: color-mix(in srgb, var(--bad) 45%, transparent);
}
.genbar.error .genbar-label { color: var(--bad); }

/* Home-screen card for the same job */
.gencard {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .9rem 1rem;
  background: var(--card); border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.gencard-top { display: flex; align-items: center; gap: .55rem; }
.gencard-top h3 { flex: 1; min-width: 0; font-size: .98rem; font-weight: 650; }
.gencard-time { font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.gencard-ico { display: flex; align-items: center; }
.gencard-acts { display: flex; gap: .5rem; margin-top: .15rem; }
.gencard.done { border-color: color-mix(in srgb, var(--good) 50%, transparent); }
.gencard.done .gencard-ico svg {
  fill: none; stroke: var(--good); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gencard.error { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.gencard.error .gencard-ico { color: var(--bad); }

/* the Generate screen's hand-off block */
.gen-away {
  display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
  padding: .75rem .85rem; margin-top: .2rem;
  background: var(--card-2); border-radius: 11px;
  color: var(--ink-soft);
}
.gen-elapsed-l { color: var(--ink-faint); }

/* ------------------------------------------------------------------- ad bar */
.adbar {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem;
  background: repeating-linear-gradient(45deg, var(--card-2), var(--card-2) 10px,
              var(--card) 10px, var(--card) 20px);
  border-top: 1px solid var(--hairline);
  font-size: .78rem; color: var(--ink-soft);
}
.ad-tag {
  font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--ink-faint); border-radius: 3px; padding: .05rem .25rem;
  color: var(--ink-faint);
}
/* In the player the nav is hidden, so the ad bar is the bottom-most chrome
   and inherits responsibility for the home-indicator inset. */
body.immersive .adbar { padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
.ad-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-x { font-size: .72rem; font-weight: 650; color: var(--accent); }

/* ----------------------------------------------------------- modal + toast */
.backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  display: grid; place-items: end center;
  opacity: 0; transition: opacity .16s;
  padding: 1rem;
}
.backdrop.in { opacity: 1; }
.sheet {
  width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 1.1rem;
  display: flex; flex-direction: column; gap: .8rem;
  box-shadow: var(--shadow);
  transform: translateY(14px); transition: transform .18s;
}
.backdrop.in .sheet { transform: none; }
.sheet-title { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; }
.sheet-x { margin-left: auto; color: var(--ink-faint); font-size: 1.4rem; line-height: 1;
           padding: 0 .3rem; }
.sheet-body { font-size: .88rem; line-height: 1.55; color: var(--ink-soft); display: flex; flex-direction: column; gap: .6rem; }
.sheet-actions { display: flex; gap: .5rem; }
.sheet-actions .btn { flex: 1; }
@media (min-width: 560px) { .backdrop { place-items: center; } }

/* the player's full clue list: a tall sheet, scrolling inside itself */
.sheet.clues { max-height: 82vh; max-height: 82dvh; }
.sheet.clues .sheet-body { overflow-y: auto; min-height: 0; gap: .2rem;
                           overscroll-behavior: contain; }
.clues-wrap { display: flex; flex-direction: column; gap: .6rem; }
.clues-sum { text-align: center; }
.clues-sec { display: flex; flex-direction: column; }
.clues-h { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
           color: var(--ink-faint); font-weight: 700; padding: .5rem 0 .25rem;
           position: sticky; top: 0; background: var(--card); }
.clue-row {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .5rem .5rem; border-radius: 8px; text-align: left;
  color: var(--ink); font-size: .86rem; line-height: 1.35;
}
.clue-row + .clue-row { border-top: 1px solid var(--hairline); }
.clue-row.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.clue-row.done .clue-t { color: var(--ink-faint); }
.clue-row.themed .clue-n { color: var(--themed); }
.clue-row.themed { box-shadow: inset 3px 0 0 var(--themed); }
.clue-n { flex: none; min-width: 1.9em; font-weight: 700; font-variant-numeric: tabular-nums; }
.clue-t { flex: 1; min-width: 0; }
.clue-ok { flex: none; color: var(--good); display: flex; align-items: center; margin-top: .1rem; }
.clue-ok svg { stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.coach { display: flex; flex-direction: column; gap: .8rem; }
.coach-row { display: flex; gap: .7rem; align-items: flex-start; }
.coach-row strong { display: block; color: var(--ink); font-size: .9rem; margin-bottom: .15rem; }
.coach-row p { font-size: .82rem; line-height: 1.5; }
.coach-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem;
             background: var(--themed); }
.coach-row:first-child .coach-dot { background: var(--accent); }
.coach-row:last-child .coach-dot { background: var(--good); }

.buy { display: flex; flex-direction: column; gap: .6rem; }
.buy-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem .85rem; background: var(--card-2); border-radius: 11px;
  color: var(--ink);
}

.ad-mock { display: flex; flex-direction: column; gap: .7rem; align-items: center; }
.ad-badge {
  align-self: flex-start; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 750; color: var(--ink-faint); border: 1px solid var(--ink-faint);
  border-radius: 3px; padding: .06rem .3rem;
}
.ad-art {
  width: 100%; aspect-ratio: 16/9; border-radius: 12px;
  background: repeating-linear-gradient(45deg, #2a2c31, #2a2c31 12px, #232529 12px, #232529 24px);
  display: grid; place-items: center;
}
.ad-art-inner { font-size: 2.6rem; font-weight: 750; color: var(--ink-soft); }
.ad-copy { font-size: .8rem; color: var(--ink-faint); }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px);
  z-index: 300; max-width: 88vw;
  background: var(--card-2); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 99px;
  padding: .55rem 1rem; font-size: .84rem;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: var(--shadow);
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }
/* clear the generation strip, so "Your puzzle is ready" never covers the bar
   that says the same thing and can open it */
body.genbar-on .toast { bottom: 136px; }
/* in the player, ui.toast() sets an inline bottom just above the clue bar */

/* ------------------------------------------------------- empty + loading */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2.5rem 1rem; text-align: center;
}
.empty-icon { color: var(--ink-faint); display: flex; }
.empty h3 { font-size: 1.02rem; font-weight: 650; }
.empty p { font-size: .85rem; max-width: 30ch; line-height: 1.5; }
.empty .btn { margin-top: .5rem; }
.loading { display: flex; align-items: center; justify-content: center; gap: .6rem;
           padding: 3rem 0; color: var(--ink-faint); font-size: .85rem; }
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--hairline); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ====================================================================
   PLAYER — preserved from the standalone player
   ==================================================================== */
.player {
  display: flex; flex-direction: column;
  min-height: 0; flex: 1; height: 100%;
  background: var(--app-bg);
  overflow: hidden;
}
.play-head { flex: none; }
.dock { flex: none; margin-top: 0; }

.play-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem;
  padding-top: max(.55rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--hairline);
}
.iconbtn {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
/* A 44px hit area without changing the 34px circle: the halo is invisible, so the header
   keeps its height and the board below it keeps the pixels */
.iconbtn::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.iconbtn svg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.play-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.play-topic {
  font-size: .98rem; font-weight: 640; text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.play-sub { font-size: .68rem; color: var(--ink-faint);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-prog { display: flex; align-items: center; gap: .4rem; flex: none; }
.progress-bar { width: 56px; height: 4px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0%; background: var(--ink-soft); transition: width .25s ease, background .25s; }
.progress-bar.done span { background: var(--good); }
#progress-label { font-size: .68rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: right; }

/* The board takes the space left over after the head and the dock, and the
   grid is sized (in JS) to the smaller of that box's width/height — so the
   clue bar and keyboard are never pushed off screen. */
.board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* anchored to the top: the clue bar below can grow or shrink without the
     squares moving under a finger */
  align-items: flex-start;
  padding-top: .35rem;
  justify-content: center;
  background: var(--app-bg);
  overflow: hidden;
}

.grid {
  position: relative;
  display: grid;
  /* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, so a square
     holding a letter would grow wider than an empty one. */
  grid-template-columns: repeat(var(--n, 15), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n, 15), minmax(0, 1fr));
  aspect-ratio: 1;          /* JS sets explicit px; this is the fallback */
  width: 100%;
  flex: none;
  gap: 1px;
  border: 1px solid var(--grid-line);
  background: var(--grid-line);
  user-select: none;
  touch-action: manipulation;
}

/* Semantic rows leave the squares and overlays on the same CSS grid. */
.grid-row { display: contents; }

.cell {
  position: relative;
  min-width: 0; min-height: 0;
  background: var(--cell);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  /* type follows the square (--sq from fitGrid), so a 15x15 on a phone gets
     ~14px letters and ~8px numbers, and zooming scales both */
  font-size: max(11px, calc(var(--sq, 24px) * .56));
  line-height: 1;
  color: var(--cell-ink);
  transition: background .12s;
  cursor: pointer;
  overflow: hidden;
}
.cell.block { background: var(--grid-line); cursor: default; }

/* Faint wash marking squares that belong to a learnable (defined) theme entry.
   Declared BEFORE the highlight rules so selection, the active word and the
   wrong-letter mark all read clearly over it. */
.cell.theme-sq { background: var(--cell-theme); }
.cell .num {
  position: absolute; top: 0; left: 1px;
  font-size: max(9px, calc(var(--sq, 24px) * .38));
  font-weight: 500; line-height: 1.2;
  color: var(--cell-num); pointer-events: none;
}
/* Zoomed: the board scrolls around a grid bigger than itself, and type sizes
   follow the square (--sq, set by fitGrid) instead of the viewport. */
.player.zoomed .board { overflow: auto; justify-content: flex-start; align-items: flex-start;
                        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
                        scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
.player.zoomed .board::-webkit-scrollbar { width: 5px; height: 5px; }
.player.zoomed .board::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 3px; }
.player.zoomed .grid { margin: auto; }
.board { touch-action: none; }                 /* pinch reaches JS at 1× */
.player.zoomed .board { touch-action: pan-x pan-y; }  /* native scroll once zoomed */
.cell .ch { transform: translateY(.2em); }    /* clear of the number */

.cell.in-word  { background: var(--blue-fill); }
.cell.selected { background: var(--yellow-fill); }
/* the number must survive the highlight fills too */
.cell.in-word .num, .cell.selected .num { color: var(--cell-ink); opacity: .85; }

/* Highlighting a learnable square keeps its lavender identity rather than
   painting over it (see --theme-word / --theme-sel in the grid palettes). */
.cell.theme-sq.in-word  { background: var(--theme-word); }
.cell.theme-sq.selected { background: var(--theme-sel); }

.cell.wrong { color: var(--cell-bad); }
.cell.wrong::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .8px),
              var(--cell-bad) calc(50% - .8px), var(--cell-bad) calc(50% + .8px),
              transparent calc(50% + .8px));
  opacity: .8;
}
.cell.right { color: var(--cell-good); }
.player.celebrate .ov { opacity: 0; }
.tb-status.warn { color: #f0b429; font-weight: 650; }
.tb-status.notice { color: var(--ink); font-weight: 600; font-size: .74rem; }
.play-learn { color: var(--themed); margin-left: .35rem; font-weight: 650; }
.cell.revealed { color: var(--cell-shown); font-style: italic;
                 box-shadow: inset 0 -3px 0 var(--cell-shown); }

/* Run outlines: absolutely positioned so they take no part in grid
   auto-placement, but a grid-area still positions them over the run. */
.ov { position: absolute; inset: 0; pointer-events: none; border-radius: 2px; z-index: 3; }
.ov-word  { border: 2px solid var(--blue-soft); }
/* the run outline picks up the learn colour when the active answer is one */
.ov-word.themed { border-color: var(--themed); }
.ov-cell  { border: 2.5px solid var(--yellow); z-index: 4; }

.dock { margin-top: auto; }

.boardwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.boardwrap .board { flex: 1 1 auto; min-height: 0; }
/* zoomed: a fog on whichever edges the grid continues past — light on the
   dark board (a shadow would vanish into the black squares), dark on light */
.boardwrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  --fog: rgba(255,255,255,.26); --fog0: rgba(255,255,255,0);
  --e-r: linear-gradient(transparent, transparent); --e-l: linear-gradient(transparent, transparent);
  --e-d: linear-gradient(transparent, transparent); --e-u: linear-gradient(transparent, transparent);
  background-image: var(--e-r), var(--e-l), var(--e-d), var(--e-u);
  transition: opacity .15s;
}
:root[data-theme="light"] .boardwrap::after { --fog: rgba(0,0,0,.28); --fog0: rgba(0,0,0,0); }
.boardwrap.more-right::after { --e-r: linear-gradient(to left, var(--fog), var(--fog0) 36px); }
.boardwrap.more-left::after  { --e-l: linear-gradient(to right, var(--fog), var(--fog0) 36px); }
.boardwrap.more-down::after  { --e-d: linear-gradient(to top, var(--fog), var(--fog0) 36px); }
.boardwrap.more-up::after    { --e-u: linear-gradient(to bottom, var(--fog), var(--fog0) 36px); }
/* floats over the bottom of the board: opening it never reflows the grid */
.learn-panel {
  position: absolute; left: .6rem; right: .6rem; z-index: 6;
  /* centred on the board, every time */
  top: 50%; transform: translateY(-50%);
  padding: .8rem .95rem .85rem;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--themed) 55%, transparent);
  border-left: 3px solid var(--themed);
  border-radius: 10px;
  box-shadow: var(--shadow);
  animation: rise .18s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(-50%) scale(.97); } }
.learn-term { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--themed); margin-bottom: .3rem; }
.learn-body { font-size: .84rem; line-height: 1.55; color: var(--ink); max-height: 32vh; overflow-y: auto; }
.learn-close { position: absolute; top: .1rem; right: .2rem; width: 36px; height: 36px; display: grid; place-items: center;
               font-size: 1.15rem; line-height: 1; color: var(--ink-faint); }

.cluebar { display: flex; align-items: stretch; gap: .35rem; padding: .5rem .5rem; }
.arrow { flex: none; width: clamp(34px, 9vw, 44px); display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--ink); }
.arrow svg { stroke-width: 2.2; }

.clue-card {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .85rem; min-height: 76px;    /* three lines: the grid does not
                                                 jump as clue length changes */
  background: var(--card-2);
  border: 2px solid var(--card-line);
  border-radius: 8px; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.cc-num { flex: none; font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.cc-text { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.25; color: var(--ink);
           display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cc-text.long { font-size: .84rem; line-height: 1.3; }
.cc-text.xlong { font-size: .78rem; line-height: 1.3; }
/* A long clue outranks the chrome around it: the number, the gaps and the side
   padding give a little back so the text keeps its column. */
.clue-card:has(.cc-text.long), .clue-card:has(.cc-text.xlong) { padding-inline: .6rem; gap: .4rem; }
.clue-card:has(.cc-text.xlong) .cc-num { font-size: .9rem; }
/* The Learn pill costs the text ~60px of that column, so with the pill showing
   a long clue steps down one size, and the longest get a fifth line — which at
   that size still leaves the card no taller than a four-line ordinary clue. */
.clue-card:has(.cc-learn:not([hidden])) .cc-text.long { font-size: .74rem; }
.clue-card:has(.cc-learn:not([hidden])) .cc-text.xlong { font-size: .74rem; -webkit-line-clamp: 5; }
.cc-flag { flex: none; color: var(--themed); font-size: .8rem; }
.cc-learn {
  position: relative;
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: var(--themed); border-radius: 99px; padding: .3rem .6rem;
}
/* the pill stays small (a taller one would push the clue card taller); the
   halo is what the thumb actually hits — ~40px in the short dimension */
.cc-learn::after { content: ""; position: absolute; inset: -10px -4px; border-radius: 99px; }
/* The ◆ is redundant once the pill is there (only a themed entry ever shows
   one), and a long clue makes the pill give back its own padding too. */
.clue-card:has(.cc-learn:not([hidden])) .cc-flag { display: none; }
.cc-text.long ~ .cc-learn, .cc-text.xlong ~ .cc-learn { padding: .3rem .38rem; letter-spacing: .03em; }
/* when the on-screen keyboard is hidden, the way back is one visible tap */
.kbd-restore { display: none; }
.player.no-kbd .kbd-restore {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem; padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
  background: var(--chrome); border-top: 1px solid var(--hairline);
  color: var(--accent); font-size: .8rem; font-weight: 650;
}
.kbd-restore svg { transform: rotate(180deg); }
/* solved: the keyboard gives way to what's next */
.solved-bar { display: none; }
.player.locked .kbd, .player.locked .kbd-restore { display: none; }
.player.locked .solved-bar {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--chrome); border-top: 1px solid var(--hairline);
}
.solved-bar .btn { flex: 1 1 auto; }
.solved-stats { flex: 1 0 100%; margin: 0 0 .2rem; text-align: center;
                font-size: .8rem; color: var(--good); font-weight: 650; }
/* a beat of celebration over the board while the wave plays */
.solved-splash {
  position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .2rem; pointer-events: none;
  animation: splash 1.7s ease-out both;
}
.solved-splash strong { font-size: 1.9rem; font-weight: 800; color: #fff; background: var(--good);
  padding: .35rem 1.1rem; border-radius: 99px; letter-spacing: .02em;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--good) 45%, transparent); }
.solved-splash span { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem;
  font-weight: 700; color: var(--ink); background: var(--card); padding: .2rem .7rem; border-radius: 99px;
  border: 1px solid var(--hairline); }
@keyframes splash {
  0% { opacity: 0; transform: scale(.6); }
  18% { opacity: 1; transform: scale(1.08); }
  30% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}
/* the bar only appears once the solve wave has played, never under a finger */
.player.locked:not(.settled) .solved-bar { display: none; }
.player.locked:not(.settled) .kbd { display: flex; }
.player.solved .clue-card { border-color: var(--good); }

.toolbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem;
  padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  background: var(--chrome); border-top: 1px solid var(--hairline);
}
.timer { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }
.tb-status { flex: 1; min-width: 0; text-align: center; font-size: .78rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player.solved .tb-status { color: var(--good); font-weight: 700; }
.tb-actions { display: flex; gap: .1rem; flex: none; }
.icon { min-width: 44px; height: 44px; padding: 0 .2rem; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 1px; border-radius: 10px; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-l { font-size: .64rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); line-height: 1; }

.menu-pop {
  position: fixed; z-index: 150;
  display: flex; flex-direction: column; min-width: 172px;
  background: var(--card-2); border: 1px solid var(--hairline);
  border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.menu-pop button { text-align: left; padding: .68rem .9rem; font-size: .88rem; border-bottom: 1px solid var(--hairline); }
.menu-pop button:last-child { border-bottom: 0; }

/* ------------------------------------------------ on-screen keyboard ---
   Replaces the device keyboard so the app controls the layout and the clue
   bar directly above it is never covered. */
.kbd {
  --key-h: clamp(30px, 5.6vh, 46px);
  display: flex;
  flex-direction: column;
  gap: .32rem;
  padding: .4rem .28rem calc(.4rem + env(safe-area-inset-bottom));
  background: var(--chrome);
  border-top: 1px solid var(--hairline);
  user-select: none;
  touch-action: manipulation;
}
.player.no-kbd .kbd { display: none; }

.kbd-row { display: flex; gap: .26rem; justify-content: center; }
/* middle row inset, like a real QWERTY */
.kbd-row:nth-child(2) { padding: 0 5%; }

.key {
  flex: 1 1 0;
  min-width: 0;
  height: var(--key-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: clamp(.8rem, 3.6vw, 1.05rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  transition: background .06s, transform .06s;
}
:root[data-theme="light"] .key { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.key.key-wide { flex: 1.5 1 0; font-size: 1rem; color: var(--ink-soft); }
.key.down { background: var(--accent); color: #08181f; transform: translateY(1px); }
:root[data-theme="light"] .key.down { color: #fff; }
@media (hover: hover) {
  .key:hover { background: var(--card); }
  :root[data-theme="light"] .key:hover { background: #f2f2f5; }
}

/* ------------------------------------------------------------ accessibility
   Decorative motion (sweeps, pulses) stops for users who ask for less of it;
   the spinner stays, as the only signal that work is still happening. */
@media (prefers-reduced-motion: reduce) {
  .genbar-sweep, .gen-bar.indeterminate .gen-bar-fill,
  .nav-badge.run, .step.active .step-dot { animation: none; }
  .backdrop, .sheet, .toast, .learn-panel, .cc-learn.pulse { transition: none; animation: none; }
}

/* small close/dismiss controls get a finger-sized hit area */
.sheet-x { width: 36px; height: 36px; display: grid; place-items: center; margin-top: -6px; margin-right: -8px; }
.browse-tools { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .6rem; }
.browse-tools .search { width: 100%; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--hairline);
  background: var(--card); color: var(--ink); font-size: .92rem; }
.browse-tools .search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.browse-tools .chips { flex-wrap: wrap; padding-bottom: .2rem; }
.browse-tools .chip { flex: none; display: inline-flex; align-items: center; gap: .25rem; min-height: 36px; }
.browse-tools .chip.lvl { text-transform: capitalize; }

/* ---------------------------------------------------- browse category shelf */
/* One card per category, then that category's list. Two columns is the most
   a 390px phone can carry without the names truncating. */
.catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.catcard {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: .85rem .8rem .8rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 14px;
  color: var(--ink); overflow: hidden;
}
.catcard-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); margin-bottom: .15rem;
}
.catcard-icon svg { width: 22px; height: 22px; }
.catcard-name { font-size: .95rem; font-weight: 660; line-height: 1.2; }
.catcard-sub { font-size: .74rem; color: var(--ink-soft); }
.catcard-terms { color: var(--themed); font-weight: 620; }
.catcard-bar { height: 3px; border-radius: 99px; background: var(--hairline); overflow: hidden; margin-top: .35rem; }
.catcard-bar span { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.catcard-done { font-size: .68rem; color: var(--ink-faint); }

.catbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.cat-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: 1.15rem; font-weight: 680; margin: 0 0 .7rem;
}
.cat-title svg { color: var(--accent); }
/* "2 words (5,8)" is a label on the clue, not part of its wording */
.cc-enum { color: var(--enum-ink); font-size: .88em; font-weight: 700; white-space: nowrap; }
/* the tag can cost a narrow column one line, so it brings its own */
.cc-text:has(.cc-enum) { -webkit-line-clamp: 5; }

/* Shared shell controls and layout. Puzzle-square colors are deliberately
   independent from these chrome tokens. */
body:not(.immersive) .app { background: var(--ui-bg); }
.view {
  padding: var(--ui-space-6) var(--ui-space-5) var(--ui-space-8);
  gap: var(--ui-space-6);
  font-size: var(--ui-type-body); line-height: 1.5;
  animation: shell-enter 160ms ease-out;
}
@keyframes shell-enter { from { opacity: 0; transform: translateY(4px); } }
.view .block { gap: var(--ui-space-3); }
.view .page-head { align-items: center; }
.view .page-title { font-size: var(--ui-type-page); line-height: 1.15; font-weight: 750; letter-spacing: -.04em; }
.view .page-sub { font-size: var(--ui-type-body); line-height: 1.5; margin-top: 8px; }
.view .sec-title { font-size: var(--ui-type-title); line-height: 1.35; letter-spacing: -.02em; font-weight: 700; }
.view .small { font-size: var(--ui-type-small); line-height: 1.6; }
.view .link { font-size: var(--ui-type-small); display: inline-flex; align-items: center; min-height: 44px; }
.view :is(button, a, input, textarea), .bottomnav a, .sheet button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.view :is(.btn, .chip, .sugg, .tab, .seg-b, .link-toggle, .backlink), .sheet .btn {
  min-height: 44px;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.view .btn, .sheet .btn {
  border-radius: var(--ui-radius-control); padding: 12px 16px;
  background: var(--card); font-size: .875rem; font-weight: 700; line-height: 1.3;
  box-shadow: none;
}
.view .btn.primary, .sheet .btn.primary {
  background: var(--accent); color: var(--ui-on-accent); border-color: transparent;
  box-shadow: none;
}
.view .btn:disabled { opacity: 1; background: var(--card-2); color: var(--ink-soft); border-color: var(--hairline); box-shadow: none; }
.view .btn.small { font-size: var(--ui-type-small); padding: 10px 12px; }
.view :is(.card, .pcard, .cattile, .catcard, .continue, .nudge, .stat, .plan, .plan-strip, .gencard) {
  border-radius: var(--ui-radius-card); border-color: var(--hairline); box-shadow: var(--ui-shadow);
}
.view .card.pad { padding: var(--ui-space-5); }
.view :is(.pcard, .catcard, .cattile, .continue, .nudge) { transition: border-color 150ms, transform 120ms, box-shadow 150ms; }
.view :is(.topic-input, .words-input, .search) {
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  min-height: 52px; padding: 12px 14px; border-radius: var(--ui-radius-control);
  background: var(--card); border: 1px solid var(--ui-field-line); color: var(--ink);
  transition: border-color 150ms, box-shadow 150ms;
}
.view :is(.topic-input, .words-input, .search)::placeholder { color: var(--ink-faint); opacity: 1; }
.view :is(.topic-input, .words-input, .search):focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.view .topic-row { gap: 8px; margin-top: 8px; }
.view .quota { font-size: var(--ui-type-caption); gap: 6px; line-height: 1.5; }
.view .quota-n { font-size: .875rem; }
.view .quota-n.out { color: var(--bad-ink); }

/* Home: a recognizable wordmark, generous question, and tactile discovery. */
.home .home-top { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.home .wordmark { font-size: 1.25rem; font-weight: 800; letter-spacing: -.045em; color: var(--accent); }
.home .streak { grid-column: 1; gap: 5px; }
.home .streak-l { font-size: var(--ui-type-caption); }
.home .streak.lit .streak-flame { color: var(--accent); }
.home .avatar { grid-column: 2; grid-row: 1 / 3; width: 44px; height: 44px; background: var(--ui-tint); color: var(--accent); }
.home .hero { gap: 12px; }
.home .hero-title { font-size: 2.125rem; line-height: 1.12; font-weight: 750; letter-spacing: -.045em; max-width: 13ch; }
.home .hero-sub { font-size: var(--ui-type-body); line-height: 1.5; max-width: 34ch; }
.home .continue, .home .nudge { padding: 20px; }
.home .nudge { background: var(--ui-learn-tint); }
.home .continue-go { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-tint); }
.home .rail { margin-inline: -20px; padding: 2px 20px 12px; gap: 12px; scroll-padding-left: 20px; }
.home .rail .pcard { flex-basis: 80%; min-height: 156px; background: linear-gradient(145deg, var(--ui-tint), var(--card)); }
.view .pcard { position: relative; padding: 20px; gap: 10px; }
.view .pcard-title { font-size: var(--ui-type-title); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; padding-right: 16px; }
.view .pcard::after { content: ''; position: absolute; right: 20px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-faint); border-top: 1.5px solid var(--ink-faint); transform: rotate(45deg); }
.view .pcard-cat { font-size: var(--ui-type-caption); gap: 6px; }
.view .pcard-cat svg { width: 16px; height: 16px; color: var(--accent); }
.view .pcard-meta { font-size: var(--ui-type-small); gap: 6px; line-height: 1.4; }
.view .pill { font-size: .625rem; line-height: 1.5; padding: 3px 7px; background: var(--card-2); }
.view .pill.ok { color: var(--good); background: var(--ui-tint); border-color: transparent; }
.view .pcard-top:has(> .pcard-cat:empty):not(:has(.pill)) { display: none; }
.view .catgrid { gap: 12px; }
.view :is(.catcard, .cattile) { padding: 16px; gap: 8px; }
.view :is(.catcard-icon, .cattile-ico) { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ui-tint); color: var(--accent); border-radius: 14px; margin-bottom: 4px; }

.view :is(.catcard-name, .cattile-name) { font-size: .9375rem; line-height: 1.4; font-weight: 700; letter-spacing: -.02em; }
.view :is(.catcard-sub, .catcard-done, .cattile-n) { font-size: var(--ui-type-caption); }
.view .catcard-bar { height: 5px; margin-top: 8px; }
.view .catcard-bar span { transition: width 200ms; }

/* Browse and Create: clear fields, full-sized chips, calm group surfaces. */
.browse .browse-tools { gap: 12px; margin: 0; }
.browse .search-field { position: relative; }
.browse .search-field > svg { position: absolute; left: 16px; top: 16px; color: var(--ink-faint); pointer-events: none; }
.browse .search { width: 100%; padding-left: 46px; }
.view .chips:empty { display: none; }
.view .chip, .view .sugg { font-size: var(--ui-type-small); padding: 10px 14px; line-height: 1.35; }
.view .chip.on, .view .seg-b.on { background: var(--ui-tint); color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
.browse .browse-tools .chip { min-height: 44px; }
.browse .browse-list { gap: 16px; }
.browse .pgrid { gap: 12px; }
.browse .catbar { margin: 0; }
.browse .cat-title { margin: 4px 0 0; font-size: 1.375rem; letter-spacing: -.025em; }
.generate .gen-form { gap: 16px; }
.generate .gen-form > .topic-row { margin-top: 0; }
.generate .field { gap: 10px; }
.generate .field-label { color: var(--ink); font-size: 16px; line-height: 24px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.generate .levels { gap: 6px; }
.generate .levels .chip { border-radius: var(--ui-radius-control); padding: 10px 4px; min-width: 0; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.generate .level-hint, .generate .setting-help .small, .generate .gen-note .small { font-size: 15px; line-height: 23px; }
.generate .link-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); font-size: 16px; font-weight: 600; line-height: 24px; width: 100%; }
.generate .teacher-body { padding: 14px 0 0 16px; gap: 24px; background: none; border: 0; border-radius: 0; margin: 0; }
.generate .teacher-body .words-input { background: var(--card); min-height: 98px; resize: none; }
.generate .words-guidance { font-size: 13px; line-height: 19px; margin-top: -8px; }
.generate .teacher-body .field-label { font-size: 14px; line-height: 21px; font-weight: 500; }
.generate .teacher-body .setting-toggle { min-height: 48px; }
.generate .suggest { gap: 8px; }
.generate .gen-note { padding: 0 0 0 16px; border-left: 2px solid var(--hairline); border-radius: 0; background: none; margin: 0; }
.generate .gen-bar { height: 6px; }
.generate .gen-bar-fill { transition-duration: 200ms; }
.generate .step { opacity: 1; }
.generate .step:not(.active):not(.done) .step-label { color: var(--ink-faint); }

/* Learn and Summary: a dedicated review surface and legible term rows. */
.learn .tabs { padding: 4px; border-radius: 14px; gap: 4px; border: 1px solid var(--hairline); }
.learn .tab { min-height: 44px; border-radius: 10px; font-size: .875rem; }
.learn .tab.on { color: var(--accent); box-shadow: var(--ui-shadow); }
.view .empty { border: 1px solid var(--hairline); border-radius: var(--ui-radius-card); background: var(--card); box-shadow: var(--ui-shadow); padding: 32px 24px; gap: 12px; }
.view .empty-icon { width: 72px; height: 72px; border-radius: 24px; background: var(--card-2); color: var(--ink-soft); align-items: center; justify-content: center; margin-bottom: 8px; }
.view .empty h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.35; }
.view .empty p { font-size: var(--ui-type-body); line-height: 1.6; }
.view .empty .btn { margin-top: 8px; }
.learn .learn-body-wrap > div:not(.empty, .recall) { display: flex; flex-direction: column; gap: 24px; }
.learn .recall { gap: 16px; }
.learn .recall-progress { min-height: 44px; font-size: var(--ui-type-small); font-variant-numeric: tabular-nums; }
.learn .recall-stop { min-height: 44px; }
.learn .recall-card { border-radius: 24px; background: var(--card); padding: 28px 20px 20px; gap: 16px; box-shadow: var(--ui-shadow); border-top: 4px solid var(--themed); }
.learn .recall-kicker { color: var(--themed); font-size: var(--ui-type-small); }
.learn .recall-term { font-size: 2rem; line-height: 1.25; letter-spacing: .02em; overflow-wrap: anywhere; max-width: 100%; }
.learn .recall-def { font-size: var(--ui-type-body); line-height: 1.65; }
.learn .recall-answer { gap: 20px; }
.learn .recall-rate .btn { min-height: 48px; }
.view .stat { padding: 20px 10px; }
.view .stat-v { font-size: 1.875rem; line-height: 1.2; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.view .stat-l { font-size: var(--ui-type-caption); line-height: 1.5; margin-top: 8px; }

/* You, Settings and allowance: rhythm, readable rows, purposeful emphasis. */
.profile .statgrid { gap: 12px; }
.profile .statgrid .stat:first-child { background: var(--ui-tint); }
.profile .statgrid .stat:nth-child(2) { background: var(--ui-learn-tint); }
.view .kv { font-size: .875rem; padding: 10px 0; }
.settings .srow { padding: 12px 16px; gap: 12px; }
.settings .srow:has(.seg) { gap: 4px; }
.settings .srow:has(.seg) { flex-direction: column; align-items: stretch; }
.settings .srow .seg { margin-left: 0; }
.settings .srow .seg-b { flex: 1; min-height: 44px; padding: 10px 6px; font-size: var(--ui-type-small); }
.settings .srow-label { font-size: 16px; line-height: 20px; font-weight: 600; }
.settings .srow-hint { font-size: 15px; line-height: 23px; margin-top: 1px; }
.settings .seg { padding: 0; border-radius: 10px; gap: 4px; background: var(--ui-bg); }
.settings .srow-text { flex: 1; }
.settings .card { overflow: visible; }
.settings .srow:first-child { border-radius: 20px 20px 0 0; }
.settings .srow:last-child { border-radius: 0 0 20px 20px; }
.paywall > .card.pad { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
.paywall .allowance-icon { width: 64px; height: 64px; display: grid; place-items: center; background: var(--ui-tint); color: var(--accent); border-radius: 20px; }
.paywall > .card h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.03em; }
.paywall > .card p { font-size: var(--ui-type-body); line-height: 1.7; }
.paywall > .card .btn { width: 100%; }
.view .plan { padding: 24px; gap: 16px; }
.view .plan-tag { color: var(--ui-on-accent); }

/* A balanced nav with a clear selected destination, anchored above safe area. */
.bottomnav { background: var(--ui-nav); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow: none; }
.bottomnav .navitem { padding: 0; gap: 4px; min-height: 56px; color: var(--ink-faint); }
.bottomnav .navicon { width: 52px; height: 32px; display: grid; place-items: center; border-radius: 12px; transition: background 150ms, transform 120ms; }
.bottomnav .navitem.on { color: var(--accent); }
.bottomnav .navlabel { font-size: 12px; font-weight: 650; line-height: 1.5; letter-spacing: 0; }
.bottomnav .navitem.center .navicon { width: 52px; height: 32px; margin: 0; border-radius: 12px; color: inherit; box-shadow: none; }
.bottomnav .navitem.center:not(.on) .navicon { background: transparent; }
.bottomnav .navitem.center .navlabel { margin: 0; }
.bottomnav .navitem.center .navicon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.bottomnav .navitem.on .navicon { background: var(--ui-tint); box-shadow: inset 0 0 0 1px var(--accent); }

/* Sheets and feedback share the shell's surfaces and touch dimensions. */
.sheet { padding: 24px; gap: 20px; border-radius: var(--ui-radius-sheet); max-height: calc(100dvh - 32px); overflow-y: auto; }
.sheet-title { font-size: 1.25rem; line-height: 1.35; letter-spacing: -.025em; }
.sheet-x { width: 44px; height: 44px; flex: none; }
.sheet-body { font-size: var(--ui-type-body); line-height: 1.6; }
.toast { width: max-content; max-width: min(350px, calc(100vw - 40px)); padding: 14px 20px; border-radius: 16px; font-size: .875rem; line-height: 1.5; background: var(--card); }
.view .loading { min-height: 180px; color: var(--ink-soft); font-size: var(--ui-type-body); }
.view .loading .spinner { width: 24px; height: 24px; }
.view :focus-visible, .bottomnav :focus-visible, .sheet :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .view, .view *, .bottomnav *, .sheet, .sheet *, .toast { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Explicit light selectors outrank the legacy white selected-control text. */
:root[data-theme="light"] .view :is(.chip.on, .seg-b.on) { color: var(--accent); }
/* Nested options use pairs so full audience and effort labels stay intact. */
.generate .teacher-body .levels:has(.chip:nth-child(4)) {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Content-specific treatments: document, form, glossary, achievement, ledger. */
.privacy .reading-section h2 { font: 700 20px/27px var(--ui-display); margin-bottom: 8px; letter-spacing: -.025em; }
.privacy { gap: 28px; }
.privacy .page-sub { font: 400 18px/27px var(--ui-display); color: var(--ink); }
.privacy .reading-section p { font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.privacy > .page-head { padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.privacy > .small { text-align: left; padding-top: 16px; border-top: 1px solid var(--hairline); }
.generate .setting-field { gap: 0; border-bottom: 1px solid var(--hairline); }
.generate .setting-toggle { display: grid; grid-template-columns: 1fr auto 16px; align-items: center; gap: 12px; min-height: 52px; width: 100%; text-align: left; padding: 10px 0; }
.generate .setting-value { color: var(--accent); font-size: 14px; line-height: 21px; }
.generate .setting-editor { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 20px; }
.generate .disclosure-hint { display: block; color: var(--ink-soft); font-size: 14px; line-height: 21px; font-weight: 400; }
.generate :is(.setting-toggle, .link-toggle) > svg { color: var(--ink-soft); flex: none; }
.generate :is(.setting-toggle, .link-toggle)[aria-expanded="true"] > svg { transform: rotate(180deg); }
.browse .search { padding-right: 48px; }
.browse .search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.browse .search-clear { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink-soft); border-radius: 8px; }
.view .btn.utility, .settings .btn:not(.danger), .browse .backlink { background: none; border-color: transparent; color: var(--accent); }

.profile .learning-feature { display: flex; align-items: center; gap: 16px; padding: 24px 0; border-block: 1px solid var(--hairline); }
.profile .learning-emblem { color: var(--themed); background: var(--ui-learn-tint); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.profile .learning-count { font-size: 32px; line-height: 36px; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.profile .learning-label { font-size: 14px; color: var(--ink-soft); }
.profile .learning-feature .link { margin-left: auto; gap: 4px; }
.profile .secondary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile .secondary-stats .stat { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; }
.profile .secondary-stats .stat + .stat { padding-left: 12px; border-left: 1px solid var(--hairline); }
.profile .secondary-stats .stat-v { font-size: 20px; line-height: 24px; }
.profile .secondary-stats .stat:last-child .stat-v { font-size: 16px; letter-spacing: 0; }
.profile .secondary-stats .stat-l { margin-top: 4px; }
.profile .allowance-ledger { border-top: 1px solid var(--hairline); }
.settings .card { border: 1px solid var(--hairline); border-radius: var(--ui-radius-card); background: var(--card); box-shadow: none; padding: 0 16px; }
.settings .srow { padding-inline: 0; }
.settings .srow + .srow { border-top: 0; }
.settings .srow + .srow::before { content: ""; position: absolute; inset: 0 0 auto; border-top: 1px solid var(--hairline); }
.settings .srow { position: relative; }
.settings .srow:first-child, .settings .srow:last-child { border-radius: 0; }
.paywall > .card.pad { padding: 8px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.paywall .allowance-icon { background: none; border-radius: 0; width: 44px; height: 44px; justify-content: start; }

.words .empty { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 24px 8px; }
.words .empty-icon { border-radius: 50%; background: var(--ui-learn-tint); color: var(--themed); }
.learn .tabs { padding: 0; gap: 20px; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: none; }
.learn .tab { border-radius: 0; padding: 12px 4px; border-bottom: 3px solid transparent; }
.learn .tab.on { border-bottom-color: var(--themed); color: var(--themed); background: none; box-shadow: none; }
.learn .recall-card { border-radius: 20px; box-shadow: none; }
.learn .recall-term { font-family: var(--ui-display); font-weight: 700; }

.generate .teacher-body.options-body { gap: 0; padding-top: 0; }
.generate .setting-help { display: flex; flex-direction: column; gap: 12px; }

/* Graphic type and topic identities. Lavender retains its learning meaning. */
.view .page-title, .home .hero-title, .view .pcard-title, .view :is(.catcard-name, .cattile-name) {
  font-family: var(--ui-display); font-weight: 800; letter-spacing: -.045em;
}
.view .sec-title { font-family: var(--ui-display); font-weight: 750; letter-spacing: -.025em; }
.view [data-category] { --category-ink: var(--ink-soft); }
.view [data-category="Science"] { --category-ink: var(--ui-science); }
.view [data-category="Technology"] { --category-ink: var(--ui-technology); }
.view [data-category="History"] { --category-ink: var(--ui-history); }
.view [data-category="Arts & Culture"] { --category-ink: var(--ui-arts); }
.view [data-category="Geography"] { --category-ink: var(--ui-geography); }
.view .pcard-cat svg { color: var(--category-ink); }
.view .category-motif { display: block; color: var(--category-ink); width: 88px; height: 62px; }
.category-motif svg { width: 100%; height: 100%; }
.view .catcard { border-radius: 8px 20px 20px 8px; border-left: 3px solid var(--category-ink); padding: 16px; gap: 5px; }
.view .catcard .category-motif { align-self: flex-end; width: 74px; height: 52px; flex-shrink: 0; margin-bottom: 13px; }
.view .catcard-name { font-size: 22px; line-height: 1.1; }
.view .catcard-bar { height: 3px; margin-top: 10px; }
.view .catcard-bar span { background: var(--category-ink); }
.home .catgrid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hairline); }
.home .cattile { position: relative; background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 16px 88px 16px 0; gap: 4px; }
.home .cattile-name { font-size: 22px; }
.home .cattile .category-motif { position: absolute; right: 4px; top: 10px; width: 64px; height: 56px; }
.browse:has(.category-head) { gap: 16px; }
.browse .category-head { justify-content: flex-start; }
.view .page-back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink); }
.browse .category-count { display: flex; align-items: center; min-height: 20px; }
.browse:has(.category-head) .browse-list { gap: 12px; }
.browse .pcard .pcard-title { font-size: 22px; line-height: 28px; }
.generate .generation-topic { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.generate .generation-topic .topic-row { margin-top: 0; }
.generate .suggest { margin-top: 12px; gap: 8px; }
.generate .ideas-label { width: 100%; margin-bottom: 4px; }
.generate .setting-value { color: var(--ink-soft); }
.generate .teacher-body { gap: 16px; }
.paywall .allowance-balance { padding: 28px 24px; background: var(--ui-feature-surface); border: 1px solid var(--hairline); border-radius: 8px 24px 24px 8px; border-left: 3px solid var(--accent); }
.paywall .allowance-readout { display: flex; flex-direction: column; gap: 4px; }
.paywall .allowance-number { font-family: var(--ui-display); font-size: 40px; line-height: 1; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
.paywall .allowance-readout > span { color: var(--ink-soft); font-size: 15px; }
.paywall .allowance-meter { height: 6px; background: var(--card-2); border-radius: 3px; margin-top: 24px; overflow: hidden; }
.paywall .allowance-meter > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.paywall .allowance-reset { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.paywall .allowance-details { display: flex; flex-direction: column; gap: 0; }
.paywall .allowance-details h2 { margin-bottom: 8px; }
.paywall .allowance-row { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.paywall .allowance-row > svg { flex: none; margin-top: 2px; color: var(--ink-soft); }
.paywall .allowance-row p { font-size: 15px; line-height: 23px; }
.paywall .allowance-row strong { display: block; font-weight: 650; margin-bottom: 4px; }
.paywall .allowance-row p > span { display: block; color: var(--ink-soft); }
/* Grid stretches each pair to its tallest card. Titles keep their natural
   line count; only the metadata group absorbs spare space below a short title. */
.view .catcard { display: flex; flex-direction: column; min-height: 200px; }
.view .catcard-name { min-height: 0; }
.view .catcard-meta { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 2px; }
.view .catcard-bar { margin-top: 3px; }
.view .catcard-done { margin: 0; padding: 0; }

/* Placeholders follow the destination's field/card layout without motion. */
.loading-page .loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loading-page .skeleton-cards { display: grid; gap: 12px; }
.loading-page .skeleton-card { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 112px; padding: 20px; background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; }
.loading-page .skeleton-line { display: block; width: 38%; height: 12px; background: var(--hairline); border-radius: 4px; }
.loading-page .skeleton-line.long { width: 72%; height: 22px; }
.loading-page .shelf { grid-template-columns: 1fr 1fr; }
.loading-page .shelf .skeleton-card { min-height: 216px; border-radius: 8px 20px 20px 8px; justify-content: flex-end; }

.loading-page .skeleton-field { min-height: 52px; display: flex; align-items: center; padding: 14px; border: 1px solid var(--ui-field-line); border-radius: 12px; background: var(--card); }
.loading-page .form .skeleton-card { min-height: 52px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: none; }
.loading-page .form .skeleton-card .skeleton-line:not(:first-child) { display: none; }

.loading-page .featured { display: flex; overflow: hidden; }
.loading-page .featured .skeleton-card { flex: 0 0 86%; min-height: 146px; border-radius: 8px 20px 20px 8px; }

/* Feedback uses the same high-contrast ink/paper pair as the club. */
.toast { background: var(--ui-feedback-bg); color: var(--ui-feedback-ink); border-color: var(--ui-feedback-bg); }

/* Recover the first category at the fold without changing discovery cards. */
.home { gap: 10px; }
.home .home-top { padding-bottom: 8px; }
.home .hero { gap: 8px; }

.profile .knowledge-atlas { display: flex; flex-direction: column; gap: 16px; }
.profile .mastery-intro { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--ui-learn-tint); border-radius: var(--ui-radius-card); }
.profile .mastery-intro-heading { display: flex; align-items: center; gap: 12px; }
.profile .mastery-intro-heading > svg { color: var(--themed); }
.profile .mastery-intro h3 { font: 400 22px/28px var(--ui-display); letter-spacing: -.025em; }
.profile .mastery-intro p { font-size: 15px; line-height: 23px; color: var(--ink-soft); }
.profile .mastery-intro .btn { align-self: stretch; }
.profile .mastery-summary { display: flex; align-items: baseline; gap: 10px; }
.profile .mastery-summary strong { font: 400 32px/36px var(--ui-display); font-variant-numeric: lining-nums tabular-nums; }
.profile .mastery-summary > span { font-size: 15px; color: var(--ink-soft); }
.profile .mastery-rows { display: flex; flex-direction: column; gap: 16px; }
.profile .mastery-row { display: flex; flex-direction: column; gap: 8px; }
.profile .mastery-row-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.profile .mastery-category { font-size: 15px; color: var(--ink); }
.profile .mastery-fraction { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.profile .mastery-track { height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.profile .mastery-track > span { display: block; height: 100%; background: var(--category-ink); border-radius: inherit; }
.profile .mastery-caption { font: italic 16px/24px var(--ui-display); color: var(--ink-soft); padding-top: 4px; }
.profile .secondary-stats { border-top: 1px solid var(--hairline); padding-top: 20px; }
.profile .allowance-link { display: flex; align-items: center; gap: 8px; min-height: 52px; border-block: 1px solid var(--hairline); font-size: 13px; color: var(--ink-soft); }
.profile .allowance-link > span:nth-child(2) { margin-left: auto; }
.profile .allowance-link svg { flex: none; }

.learn .review-landing { display: flex; flex-direction: column; gap: 28px; }
.learn .review-welcome { display: grid; grid-template-columns: 1fr 104px; gap: 12px; align-items: center; padding-top: 4px; }
.learn .review-welcome h2 { font: 400 26px/1.15 var(--ui-display); letter-spacing: -.025em; }
.learn .review-welcome p { font-size: 15px; line-height: 23px; margin-top: 12px; }
.learn .learning-illustration { display: block; color: var(--themed); }
.learn .learning-illustration svg { display: block; width: 100%; }
.learn .next-review { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--themed); border-radius: 8px 20px 20px 8px; padding: 20px; }
.learn .next-review-top { display: flex; align-items: center; gap: 8px; color: var(--themed); font-size: 13px; }
.learn .next-review h3 { font: 400 22px/1.25 var(--ui-display); }
.learn .next-review h3::first-letter { text-transform: uppercase; }
.learn .next-review .btn { margin-top: 8px; width: 100%; }
.learn .review-rhythm { display: flex; flex-direction: column; gap: 16px; }
.learn .review-journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.learn .review-journey > div { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.learn .journey-number { font: italic 20px/28px var(--ui-display); color: var(--themed); }
.learn .review-journey > div:not(:last-child)::after { content: ''; position: absolute; height: 1px; background: var(--hairline); top: 14px; left: 32px; right: -8px; }
.learn .review-journey strong { font-size: 14px; font-weight: 600; }
.learn .review-journey p { font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.learn .review-rhythm > .link { align-self: flex-start; gap: 6px; }
@keyframes answer-appear { from { opacity: 0; } to { opacity: 1; } }

.generate .create-controls { display: flex; flex-direction: column; border-block: 1px solid var(--hairline); border-top: 2px solid var(--accent); }
.generate .create-controls .setting-field { border-bottom: 0; }
.generate .create-controls :is(.setting-toggle, .link-toggle) { min-height: 52px; padding: 10px 0; border: 0; font-size: 15px; font-weight: 500; }
.generate .create-controls .field-label { font-size: 15px; line-height: 21px; font-weight: 600; }
.generate .create-controls .disclosure-hint { display: inline; margin-left: 10px; font-size: 13px; }
.generate .create-controls .teacher-body { padding: 0 16px 12px; gap: 8px; }
.generate .create-controls .options-body { padding: 0; gap: 0; }
.generate .create-controls .setting-editor { padding: 0 0 16px; gap: 16px; }
.generate .create-controls .setting-value { font-size: 13px; }
.generate .create-controls .grid-style-choice { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.generate .create-controls .words-input { background: var(--card); }
.generate .create-controls .words-guidance { margin: 0; }
.generate .create-controls .create-detail { margin: 0; }
.generate .create-detail summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 16px; cursor: pointer; font-size: 13px; color: var(--ink-soft); list-style: none; }
.generate .create-detail summary::-webkit-details-marker { display: none; }
.generate .create-detail summary > svg { width: 16px; height: 16px; flex: none; }
.generate .create-detail[open] summary > svg { transform: rotate(180deg); }
.generate .create-detail p { padding: 0 0 8px; font-size: 13px; line-height: 20px; }
.generate .create-controls .level-hint, .generate .words-guidance { font-size: 13px; line-height: 20px; }
.generate .gen-note { padding: 0; border: 0; }
.generate .generation-topic { margin-bottom: 4px; }
.generate .suggest { margin-top: 8px; }
.generate .create-controls .create-options-toggle { min-height: 52px; gap: 8px; }
.generate .create-options-toggle .sec-title { margin-right: auto; }
.generate .options-label { font: 400 13px/19px ui-sans-serif, system-ui, sans-serif; color: var(--ink-soft); }
.generate .create-controls > .options-body { display: flex; flex-direction: column; gap: 0; }
.generate .create-controls > .options-body > .field { gap: 0; }
.generate .create-controls > .options-body > .teacher { margin: 0; border: 0; border-radius: 0; background: none; }
.generate .teacher-heading { margin: 0; }
.generate .create-controls .teacher-heading > .link-toggle { padding: 10px 0; text-align: left; }
.generate .teacher-title { display: flex; align-items: center; gap: 10px; font: 600 15px/21px ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.generate .teacher-title > svg { color: var(--themed); flex: none; }
.generate .create-controls > .options-body > .teacher .teacher-body { padding: 16px; border: 0; }
.generate .gen-form > .suggest { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 12px; min-width: 0; }
.generate .suggestion-rail { display: flex; width: calc(100% + 8px); min-width: 0; gap: 8px; overflow-x: auto; margin: -4px; padding: 4px; scroll-padding-inline: 4px; scrollbar-width: thin; }
.generate .suggestion-rail .sugg { flex: none; white-space: nowrap; }

/* Selective contrast and a compact, illustrated search state. */
.settings .switch.on .knob { background: var(--ui-on-accent); }
.empty-search { padding: 24px; gap: 10px; }
.empty-search .empty-icon { width: 64px; height: 44px; border-radius: 0; background: none; margin-bottom: 2px; }
.empty-search .empty-icon svg { width: 64px; height: 44px; }

/* Audience labels need two full-width pairs, including at 390px. */
.generate .levels.audience-choices { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.generate .levels.audience-choices .chip { height: 44px; }

/* Eighth pass: consistent disclosures and a quieter shelf. */
.generate .create-controls > .options-body > .field + .field { border-top: 1px solid var(--hairline); }
.browse .catcard { position: relative; min-height: 216px; gap: 4px; }
.browse .catcard .category-motif { margin-bottom: 0; }
.browse .catcard-name { font-size: 20px; line-height: 26px; min-height: 52px; }
.browse .catcard-meta { gap: 2px; padding: 0; }
.browse .catcard-terms { font-size: 13px; line-height: 19.5px; font-weight: 400; color: var(--ink-soft); }
.browse .catcard-bar { position: absolute; left: 16px; right: 16px; bottom: 7px; margin: 0; }
.loading-page .shelf .skeleton-card:first-child { background: var(--ui-feature-surface); }

.bottomnav .navitem:not(.on) .navlabel { font-weight: 500; }

/* Ninth pass: compact shelves, grouped choices, and a scannable finish. */
.browse .catgrid { grid-template-columns: 1fr; }
.browse .catcard {
  display: grid; grid-template-columns: minmax(0, 1fr) 74px;
  align-items: center; gap: 16px; min-height: 104px; padding: 12px 16px;
}
.browse .catcard .category-motif { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.browse .catcard-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.browse .catcard-name { min-height: 0; line-height: 26px; }
.browse .catcard-meta { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.browse .catcard-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.browse .catcard-done { flex: none; line-height: 19px; }
.browse .catcard-bar { position: static; flex: 1; height: 3px; margin: 0; }
.loading-page .shelf { grid-template-columns: 1fr; }
.loading-page .shelf .skeleton-card { min-height: 104px; gap: 8px; justify-content: center; }

.generate .suggestion-rail {
  flex-wrap: wrap; width: 100%; gap: 8px; overflow: visible;
  margin: 0; padding: 0;
}
.generate .suggestion-rail .sugg { max-width: 100%; white-space: normal; text-align: left; }
.generate .create-controls > .options-body { gap: 24px; padding-top: 16px; }
.generate .create-controls > .options-body > .field { gap: 12px; }
.generate .create-controls > .options-body > .field + .field { border-top: 0; }
.generate .create-controls > .options-body > .field.teacher {
  padding: 0 20px; gap: 0; border: 1px solid var(--hairline);
  border-radius: 20px; background: var(--card);
}
.generate .create-controls .teacher-heading > .link-toggle { min-height: 60px; }
.generate .create-controls > .options-body > .teacher .teacher-body { padding: 0 0 20px; gap: 12px; }
.generate .teacher-body .grid-style-choice { margin-top: 12px; }
.generate .secondary-options { border-top: 1px solid var(--hairline); }
.generate .secondary-fields { display: flex; flex-direction: column; gap: 24px; padding: 16px 0 8px; }
.generate .secondary-fields .setting-field { gap: 12px; }
.generate .secondary-fields .field-label { font-size: 15px; font-weight: 500; }
.generate .secondary-fields .levels:has(.chip:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.home .rail .pcard, .home .continue, .learn .next-review,
.loading-page .shelf .skeleton-card:first-child,
.loading-page .featured .skeleton-card { background: var(--ui-action-surface); }
.browse .empty-search h3, .sheet-title { font: 400 22px/28px var(--ui-display); letter-spacing: -.025em; }
.settings .srow-hint { margin-top: 4px; }
.settings .srow:has(.srow-hint) { padding-block: 16px; }
.settings .srow:has(.seg) { gap: 12px; }

/* Tenth pass: a stable recall session and progressive form controls. */
.viewhost:has(.recall-session) { overflow: hidden; }
.learn:has(.recall-session) { height: 100%; min-height: 0; gap: 12px; padding-block: 16px; }
.learn:has(.recall-session) .page-title { font-size: 24px; line-height: 28px; }
.learn:has(.recall-session) .page-sub {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.learn:has(.recall-session) > .page-head,
.learn:has(.recall-session) > .tabs { flex: none; }
.learn:has(.recall-session) .learn-body-wrap { flex: 1; min-height: 0; }
.learn .recall-session { height: 100%; min-height: 0; gap: 12px; }
.learn .recall-session .recall-progress { flex: none; justify-content: flex-start; }
.learn .recall-session .recall-card {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  align-items: stretch; text-align: left; padding: 24px 20px; gap: 16px;
}
.learn .recall-term { font: 500 28px/34px var(--ui-display); letter-spacing: 0; }
.learn .recall-actions { flex: none; height: 48px; }
.learn .recall-actions > .btn, .learn .recall-rate, .learn .recall-rate .btn { width: 100%; height: 48px; margin: 0; }
.learn .recall-actions .btn { min-height: 48px; }
.learn .review-welcome { grid-template-columns: 1fr; gap: 16px; }
.learn .learning-illustration { width: 104px; }
.learn .review-journey { grid-template-columns: 1fr; gap: 16px; }
.learn .review-journey > div { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 2px; }
.learn .journey-number { grid-row: 1 / 3; }
.learn .review-journey > div::after { display: none; }
.learn .review-journey p { grid-column: 2; font-size: 15px; line-height: 23px; }

.generate .create-controls > .options-body { gap: 0; padding-top: 0; }
.generate .create-controls .setting-field { gap: 0; border-bottom: 1px solid var(--hairline); }
.generate .create-controls .setting-toggle { height: 56px; min-height: 56px; }
.generate .create-controls .field-label { font-size: 15px; line-height: 21px; font-weight: 600; }
.generate .create-controls .setting-editor { padding: 0 0 16px; gap: 8px; }
.generate .create-controls > .options-body > .field.teacher { margin-block: 12px; }
.generate .create-controls .teacher-heading > .link-toggle { min-height: 56px; }
.generate .create-controls > .options-body > .teacher .teacher-body { gap: 8px; padding-bottom: 8px; }
.generate .teacher-body .setting-field { border-bottom: 0; }
.generate .secondary-fields { gap: 0; padding: 0; }
.generate .secondary-options { border-top: 0; }
.generate .secondary-options > summary { min-height: 56px; font-size: 15px; font-weight: 600; }

.profile .secondary-stats .stat:last-child .stat-v { font-size: 20px; line-height: 24px; }
.profile-empty { padding-bottom: 24px; }
.profile-empty .mastery-intro { padding: 24px; background: var(--ui-learn-tint); border-radius: var(--ui-radius-card); }
.profile-empty .mastery-intro-heading > svg { width: 28px; height: 28px; }
.profile-empty .mastery-intro .secondary-stats { border: 0; padding: 4px 0; }
.profile-empty .allowance-link { margin-top: 0; }

/* Eleventh pass: balanced prompts, a starting panel, and direct options. */

.profile-empty .starting-illustration { display: block; width: 100px; height: 72px; color: var(--themed); }
.profile-empty .starting-illustration svg { display: block; width: 100%; height: 100%; }
.learn .review-welcome { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
.learn .learning-illustration { width: 64px; }
.learn .review-welcome p { margin-top: 8px; }
.learn .review-rhythm { display: block; border-top: 1px solid var(--hairline); }
.learn .review-rhythm > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.learn .review-rhythm > summary::-webkit-details-marker { display: none; }
.learn .review-rhythm[open] > summary svg { transform: rotate(180deg); }
.learn .review-rhythm .review-journey { padding-block: 12px 16px; }
.learn .review-rhythm > .link { display: inline-flex; }

.generate .create-options-toggle .options-group-label { margin-right: auto; }
.generate .create-controls .options-group-label { font: 500 13px/20px ui-sans-serif, system-ui, sans-serif; color: var(--ink-soft); letter-spacing: 0; }
.generate .options-body > .options-group-label { padding-top: 12px; padding-bottom: 4px; }
.generate .create-controls .setting-field { gap: 0; border: 0; }
.generate .setting-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.generate .setting-choice .field-label { margin: 0; }
.generate .setting-select { width: 156px; flex: none; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--ui-radius-control); background: var(--card); color: var(--ink); font: 500 13px/20px ui-sans-serif, system-ui, sans-serif; }
/* Guidance keeps its place when a choice receives focus or changes. */
.generate .setting-guidance { padding: 0 0 12px; }
.generate .setting-guidance:has(> #setting-difficulty-help) { min-height: 52px; }
.generate .create-controls > .options-body > .field.teacher { margin-block: 12px; padding-inline: 16px; }
.generate .create-controls .teacher-heading > .link-toggle { min-height: 52px; }

.sheet.coach .coach-row p { font-size: 15px; line-height: 23px; }
.browse .catcard { background: var(--ui-category-surface); }
.settings .seg { padding: 4px; gap: 4px; border-radius: calc(var(--ui-radius-control) + 4px); }
.settings .seg-b { border-radius: var(--ui-radius-control); }
.settings .seg-b.on { background: var(--ui-tint); color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Practice reserves the taller state's natural content size in both states.
   The hidden definition reserves space without entering the accessibility tree.
   Only the content region scrolls when the definition exceeds the viewport. */
.learn .recall-session .recall-card {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) 48px;
  flex: none; max-height: calc(100% - 56px); min-height: 0; overflow: hidden;
  justify-content: stretch; padding: 24px 20px; gap: 16px;
  background: var(--ui-action-surface);
}
.learn .recall-session .recall-content {
  display: grid; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.learn .recall-content > * { grid-area: 1 / 1; align-self: start; margin: 0; }
.learn .recall-content > [hidden] { display: block !important; visibility: hidden; }
.learn .recall-card.is-revealed .recall-answer { margin: 0; animation: answer-appear 180ms ease-out; }
.learn .recall-content .recall-prompt { font-size: 15px; line-height: 23px; }

/* One column system for all settings, including the bounded Teacher section. */
.generate .create-controls .setting-choice {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ui-choice-width);
  align-items: center; gap: 12px; height: 56px; min-height: 56px; padding: 0;
}
.generate .create-controls .setting-choice .field-label { font-size: 15px; line-height: 21px; font-weight: 600; }
.generate .create-controls .setting-select {
  width: 100%; min-width: 0; height: 44px; font-size: 15px; font-weight: 400;
  text-align: right;
}
.generate .create-controls > .options-body > .field.teacher {
  margin: 12px 0; padding: 0; background: none;
  border-inline: 0; border-radius: 0;
}
.generate .create-controls > .options-body > .teacher .teacher-body { gap: 0; padding: 0 0 8px; }
.generate .create-controls .teacher-heading > .link-toggle { min-height: 56px; }
.generate .teacher-body .words-input { background: var(--ui-action-surface); }
.generate .teacher-body .words-guidance { padding-block: 8px; }

/* A personal starting point, followed by actual category progress. */
.profile-empty { gap: 16px; }
.profile-empty .mastery-intro { padding: 16px; gap: 12px; background: var(--ui-action-surface); }
.profile-empty .mastery-intro-heading { gap: 12px; }
.profile-empty .starting-illustration { flex: none; width: 56px; height: 40px; }
.profile-empty .mastery-intro .btn { min-height: 44px; }
.profile-empty .category-preview { margin-top: 4px; }
.profile-empty .mastery-rows { gap: 16px; }
.profile-empty .mastery-row { min-height: 48px; justify-content: center; }
.settings .block:last-child .srow:last-child .srow-hint { font-size: 13px; line-height: 19px; }

/* Thirteenth pass: compose the utility screens around their next meaningful step.
   Scoped rules preserve the established Home, Browse, Library rows and overlays. */
.generate .create-controls .options-group-label,
.generate .create-controls .teacher-title {
  font: 500 18px/24px var(--ui-display); color: var(--ink);
}
.generate .create-controls .setting-choice .field-label { font-weight: 400; }
.generate .create-controls > .options-body { gap: 24px; padding-bottom: 24px; }
.generate .option-group { display: flex; flex-direction: column; }
.generate .option-group > .options-group-label { margin: 0 0 8px; }
.generate .create-controls .setting-select { border-color: var(--ui-field-line); }
.generate .create-controls > .options-body > .field.teacher {
  margin: 0; padding: 0 16px; border: 1px solid var(--hairline);
  border-radius: 20px; background: var(--card);
}
.generate .create-controls > .options-body > .teacher .teacher-body { padding-bottom: 16px; }
.generate .teacher-body .words-input { height: 144px; min-height: 144px; }

/* One full-measure introduction; timing supports it instead of repeating it. */
.learn .review-composition { display: flex; flex-direction: column; gap: 24px; }
.learn .review-welcome { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.learn .review-welcome > div { width: 100%; }
.learn .review-welcome h2 { font-size: 24px; line-height: 30px; }
.learn .review-welcome p { margin-top: 8px; }
.learn .next-review {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 8px;
  background: none; border: 0; border-top: 1px solid var(--hairline);
  border-radius: 0; padding: 20px 0 0;
}
.learn .next-review-top { font-size: 13px; line-height: 21px; }
.learn .next-review-timing { font-size: 15px; line-height: 21px; text-align: right; }
.learn .next-review-timing::first-letter { text-transform: uppercase; }
.learn .next-review > .muted, .learn .next-review > .btn { grid-column: 1 / -1; }
.learn .next-review > .btn { margin-top: 8px; }
.learn .review-rhythm { margin-top: 0; }

.profile .mastery-rows, .profile-empty .mastery-rows { gap: 0; }
.profile .mastery-row, .profile-empty .mastery-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px;
  row-gap: 8px; min-height: 80px; align-content: center;
  border-bottom: 1px solid var(--hairline);
}
/* the covers are square art: a square thumbnail, never a squeezed one */
.profile .mastery-row .category-motif { grid-row: 1 / 3; width: 48px; height: 48px; align-self: center; border-radius: 8px; overflow: hidden; }
.profile .mastery-row-label { gap: 8px; }
.profile .mastery-fraction { white-space: nowrap; }
.profile .mastery-track { grid-column: 2; height: 8px; border-radius: 4px; background: var(--ui-mastery-track); }
.profile .mastery-intro h3 { font-size: 20px; line-height: 26px; }
.profile .mastery-intro { gap: 12px; }
.profile-empty .mastery-intro { padding: 16px; }

/* The content-sized card floats between equal flexible margins. Its internal
   grid, term, scroll region and fixed action row are deliberately unchanged. */
.learn .recall-session .recall-card { margin-block: auto; }
.learn .recall-feedback {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--themed); font-size: 13px;
}
.learn .recall-count, .learn .recall-stop { flex: none; }
.learn .recall-progress { gap: 12px; }
.learn .recall-stop { margin-left: auto; }
.settings .srow .srow-hint { font-size: 14px; line-height: 21px; margin-top: 4px; }
.settings .block:last-child .srow:last-child .srow-hint { font-size: 14px; line-height: 21px; }

/* Kept pages and a continuing sprig: small, specific rewards for learning. */
.milestone-art { display: block; flex: none; width: 120px; height: 88px; color: var(--themed); }
.milestone-art svg { width: 100%; height: 100%; display: block; }
.milestone-tick { stroke-dasharray: 28; animation: milestone-ink 360ms ease-out both; }
@keyframes milestone-ink { from { stroke-dashoffset: 28; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes milestone-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.streak-moment {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: var(--ui-tint); border-radius: 20px; color: var(--ink);
}
.streak-moment-icon { color: var(--accent); display: flex; flex: none; }
.streak-moment-copy { flex: 1; }
.streak-moment strong { font-size: 15px; line-height: 21px; font-weight: 600; }
.streak-moment p { margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.streak-seeds { display: flex; flex-wrap: wrap; gap: 4px; max-width: 28px; }
.streak-seeds i { display: block; width: 10px; height: 6px; border-radius: 6px 0 6px 0; background: var(--accent); }
.learn .review-complete { animation: milestone-arrive 240ms ease-out; }
.learn .review-complete .review-composition { padding-top: 12px; }
.learn .review-complete .review-welcome h2 { font-size: 32px; line-height: 38px; }
.learn .first-term-moment { display: flex; gap: 16px; padding: 20px 0 24px; border-bottom: 1px solid var(--hairline); align-items: center; }
.learn .first-term-moment .milestone-art { width: 80px; height: 59px; }
.learn .first-term-moment h2 { font: 400 20px/26px var(--ui-display); }
.learn .first-term-moment p { font-size: 13px; line-height: 20px; color: var(--ink-soft); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .milestone-art *, .review-complete, .solved-bar { animation: none !important; transition: none !important; }
}

/* The solved bar is the only player surface restyled in this pass. */
.player.locked .solved-bar {
  background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); gap: 8px;
  animation: milestone-arrive 240ms ease-out;
}
.solved-bar .solved-heading { display: flex; gap: 12px; align-items: center; width: 100%; padding-bottom: 4px; }
.solved-bar .milestone-art { width: 60px; height: 44px; color: var(--ui-accent); }
.solved-bar .solved-heading > div { flex: 1; }
.solved-bar .solved-heading h2 { font: 400 20px/26px var(--ui-display); }
.solved-bar .solved-stats { margin: 4px 0 0; color: var(--ui-soft); text-align: left; font-size: 13px; line-height: 19px; font-weight: 400; }
.solved-bar .btn { min-height: 44px; border-radius: 12px; font-size: 13px; color: var(--ui-ink); background: var(--ui-surface); border-color: var(--ui-field-line); }
.solved-bar .btn.primary { flex-basis: 100%; background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); animation: none; }
@media (prefers-reduced-motion: reduce) {
  .player.locked .solved-bar { animation: none; }
}
.learn .review-complete .review-kept { margin: 0; font-size: 15px; line-height: 23px; color: var(--themed); }

/* Fourteenth pass: shared setting columns and one achievement hierarchy. */
.profile .mastery-track { height: 4px; border-radius: 2px; }
.generate .create-controls > .options-body > .field.teacher {
  padding: 0; border: 0; border-top: 1px solid var(--hairline);
  border-radius: 0; background: none;
}
.generate .create-controls > .options-body > .teacher .teacher-body { padding: 0; }
.generate .create-controls .teacher-heading > .link-toggle { min-height: 44px; padding: 10px 0; }

/* Reserve the answer's natural height on both faces. The page, rather than
   a nested answer window, scrolls when a definition needs more room. */
.viewhost:has(.recall-session) { overflow-y: auto; }
.learn:has(.recall-session) { height: auto; min-height: 100%; }
.learn:has(.recall-session) .learn-body-wrap { flex: none; }
.learn .recall-session { height: auto; }
.learn .recall-session .recall-card {
  height: auto; min-height: 351px; max-height: none; margin-block: 0;
  grid-template-rows: auto 1fr 48px; row-gap: 24px; overflow: visible;
}
.learn .recall-study {
  display: grid; grid-template-rows: auto 1fr; row-gap: 16px;
}
.learn .recall-session .recall-content { overflow: visible; }

.browse .browse-list.search-results { gap: 12px; }

/* Fifteenth pass: clear form nesting and one continuous suggestion rail. */
.generate .create-controls .create-options-toggle .options-group-label {
  font: 500 20px/27px var(--ui-display);
}
.generate .create-controls .option-group > .options-group-label,
.generate .create-controls .teacher-title {
  font: 600 14px/20px ui-sans-serif, system-ui, sans-serif;
}
.generate .create-controls > .options-body { padding-top: 24px; gap: 24px; }
.generate .create-controls > .options-body > .field.teacher { padding-top: 24px; }
.generate .create-controls .teacher-heading > .link-toggle { padding-top: 0; }
.generate .setting-select-wrap { position: relative; width: 100%; min-width: 0; }
.generate .setting-select-wrap > .ico {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ink);
}
.generate .create-controls .setting-select { appearance: none; padding-right: 36px; }
.generate .suggestion-rail {
  flex-wrap: nowrap; width: calc(100% + 8px); overflow-x: auto;
  margin: -4px; padding: 4px; scrollbar-width: thin;
}
.generate .suggestion-rail .sugg { white-space: nowrap; }
.settings .card { background: var(--ui-settings-surface); }
.settings .srow + .srow::before { border-color: var(--ui-settings-divider); }

/* Sixteenth pass: compact Settings and an anchored study composition. */
.settings .srow:has(.srow-hint) { padding-block: 12px; }
.settings .srow:has(.seg) { gap: 4px; }
.settings .srow-label { font-weight: 500; }
.settings .srow .srow-hint { margin-top: 2px; }
.settings .seg { padding: 2px; }

/* The card sizes to its visible face. The actions occupy a separate study
   layer, anchored in the page scrollport regardless of the definition length.
   Outer space below the card lets its final line scroll above the action dock. */
.learn .recall-stage {
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: calc(100svh - 280px);
}
.learn .recall-session .recall-card {
  grid-area: 1 / 1; align-self: start; min-height: 0;
  grid-template-rows: auto auto; row-gap: 0; margin-bottom: 200px;
}
.learn .recall-stage > .recall-actions {
  grid-area: 1 / 1; align-self: start; position: sticky; top: calc(100% - 155px);
  z-index: 1; margin-inline: 21px; background: var(--app-bg);
  box-shadow: 0 0 0 12px var(--app-bg);
}
.learn .recall-kicker { margin-bottom: 24px; }
.learn .recall-study { grid-template-rows: auto auto; row-gap: 16px; }
.learn .recall-session .recall-content { padding-bottom: 0; }
.learn .recall-content > [hidden] { display: none !important; }
.learn .recall-session .recall-content > .recall-answer { margin: 0; }
.learn .recall-content > .recall-prompt { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .learn .recall-card.is-revealed .recall-answer { animation: none; }
}

/* Create shares one control surface and a consistent heading/label scale. */
.generate .ideas-label,
.generate .create-controls .create-options-toggle .options-group-label,
.generate .create-controls .option-group > .options-group-label,
.generate .create-controls .teacher-title { font: 500 20px/26px var(--ui-display); }
.generate .field-label,
.generate .create-controls .field-label { font-size: 15px; line-height: 21px; }
.generate .ideas-label { font-size: 20px; line-height: 26px; }
.generate .level-hint, .generate .setting-help .small,
.generate .gen-note .small, .generate .options-label,
.generate .disclosure-hint { font-size: 13px; line-height: 20px; }
.generate .create-controls .setting-select {
  border: 1px solid var(--ui-field-line); border-radius: 12px;
  background: var(--ui-action-surface); line-height: 21px;
}
.generate .create-controls > .options-body > .field.teacher {
  margin: 0; padding-top: 0; border-top: 0;
}
.generate .teacher-body .words-label { margin: 0 0 8px; }
.generate .teacher-body .words-input {
  height: 136px; min-height: 136px; resize: none; overflow-y: hidden;
}
.generate .create-form-action { width: 100%; min-height: 48px; }

/* Preserve the hero itself; only open the gap below the masthead rule. */
.home .home-top + .hero { margin-top: 14px; }

/* ====================================================================
   GRAPHIC PUZZLE CLUB
   A flat ink-and-paper game identity, shared by discovery and play.
   Structural player sizing and the independent grid palette remain above.
   ==================================================================== */
:root { --club-gold: var(--club-yellow); --club-ink: var(--ui-ink); --club-paper: var(--ui-bg); }
.app { box-shadow: 0 0 0 1px var(--ui-line); }
.view { padding-inline: 20px; padding-top: max(24px, env(safe-area-inset-top)); gap: 22px; }
.view .page-title { font-size: 34px; font-weight: 800; letter-spacing: -.055em; }
.view .page-sub { line-height: 1.5; }
.view .sec-title { font-size: 18px; font-weight: 800; }
.sheet-title { font-weight: 750; }
.view .btn, .sheet .btn { font-size: 15px; border-radius: 8px; font-weight: 750; }
.view .btn.primary, .sheet .btn.primary { border: 1px solid var(--accent); }
.view :is(.chip, .sugg) { border-radius: 6px; }
.view :is(.chip.on, .seg-b.on),
:root[data-theme="light"] .view :is(.chip.on, .seg-b.on) {
  background: var(--ink); color: var(--app-bg); border-color: var(--ink); box-shadow: none;
}
.view .field-label, .view .options-group-label, .view .teacher-title { letter-spacing: -.015em; }
.view :is(.recall-term, .term-name, .next-review-timing, .learning-count) { font-family: var(--ui-display); font-weight: 750; }
.view .next-review-timing { color: var(--ink); }
.view :is(.mastery-intro h3, .review-welcome h2, .first-term-moment h2) { font-family: var(--ui-display); font-weight: 750; }
.view .mastery-caption { font-style: normal; font-family: var(--ui-display); }
.generate .ideas-label,
.generate .create-controls .create-options-toggle .options-group-label,
.generate .create-controls .option-group > .options-group-label,
.generate .create-controls .teacher-title { font-family: var(--ui-display); font-weight: 750; }
.view :focus-visible, .player :focus-visible, .bottomnav :focus-visible, .sheet :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* The home screen is a game poster with one real puzzle to play or resume. */
.home { gap: 20px; }
.home .home-top { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 6px 12px; padding: 0; border: 0; }
.home .wordmark { color: var(--ink); font-family: var(--ui-headline); font-size: clamp(42px, 15.8vw, 68px); font-weight: 900; line-height: 1; letter-spacing: -.065em; }
.home .wordmark em { font: inherit; }
.home .avatar { grid-column: 2; grid-row: 1; width: 36px; height: 36px; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink); background: transparent; }
.home .streak { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 5px; }
.home .streak-l { font-size: 12px; }
.home .streak-n { font-size: 14px; }
.home .streak-flame { color: var(--accent); }
.home .play-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0; background: none; border: 0; }
.home .stage-art { width: calc(100% + 40px); height: 310px; display: grid; place-items: center; overflow: hidden; background: #faf3e3; margin: -6px -20px 4px; }
.home .stage-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.home .stage-art-puzzle > :is(.topic-poster, .dynamic-poster, .puzzle-poster) { width: min(100%, 310px); height: auto; aspect-ratio: 1; }
:root[data-theme=dark] .home .stage-art { border-radius: 14px; width: 100%; margin-inline: 0; }
.home .stage-art.stage-loading { background: var(--card); }
.home .stage-kicker { font-size: 11px; line-height: 16px; letter-spacing: .13em; font-weight: 800; text-transform: uppercase; color: var(--ink-soft); }
.home .stage-title { font-family: var(--ui-headline); font-size: clamp(25px, 7.2vw, 34px); font-weight: 900; letter-spacing: -.055em; line-height: 1.08; max-width: 100%; overflow-wrap: anywhere; }
.home .stage-meta { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.home .stage-meta .themed-count { font-weight: 650; }
.home .stage-progress { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; font-size: 12px; color: var(--ink-soft); }
.home .stage-progress-track { width: 98px; height: 5px; border-radius: 0; background: var(--hairline); overflow: hidden; }
.home .stage-progress-track span { display: block; height: 100%; background: var(--accent); }
.home .stage-play { width: 100%; min-height: 54px; margin-top: 4px; border-radius: 8px; font-size: 20px; letter-spacing: -.02em; }
.home .stage-note { color: var(--ink-soft); font-size: 12px; line-height: 18px; margin: 0; }
.home .create-entry { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-block: 1px solid var(--hairline); min-height: 72px; }
.home .create-entry > .ico:first-child { color: var(--accent); width: 26px; height: 26px; }
.home .create-entry-copy { flex: 1; min-width: 0; }
.home .create-entry strong { display: block; font-size: 16px; font-weight: 750; line-height: 22px; }
.home .create-entry p, .home .create-entry small, .home .create-entry-copy > span { display: block; color: var(--ink-soft); font-size: 13px; line-height: 20px; margin-top: 3px; }
.home .create-entry > .ico:last-child { color: var(--ink-soft); }
.home .nudge { padding: 16px; border-radius: 8px; border: 1px solid var(--themed); }
.home .nudge h3 { font-size: 16px; font-weight: 750; }
.home .continue-go { background: transparent; color: var(--themed); border-radius: 0; }

/* Full illustrated topic covers and smaller matching puzzle jackets. */
.topic-poster { display: block; background-image: url('assets/club/topic-posters.png'); background-size: 300% 200%; background-position: var(--art-x, 100%) var(--art-y, 100%); background-repeat: no-repeat; background-color: #faf3e3; }
.puzzle-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dynamic-poster { overflow: hidden; background: #faf3e3; }
.dynamic-poster > .category-motif { width: 100% !important; height: 100% !important; margin: 0 !important; }
.view .catgrid, .home .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border: 0; }
.view .catcard, .home .cattile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 0; gap: 0; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--card); min-height: 0; overflow: hidden;
}
.view .catcard .category-motif, .home .cattile .category-motif { position: static; align-self: stretch; display: block; width: 100%; height: auto; aspect-ratio: 1; margin: 0; }
.view .catcard-copy { width: 100%; padding: 13px; }
.view .catcard-name, .home .cattile-name { font-family: var(--ui-headline); font-size: 17px; line-height: 1.15; font-weight: 900; letter-spacing: -.045em; }
.home .cattile-name { padding: 13px 13px 0; }
.home .cattile-n { padding: 4px 13px 13px; }
.view .catcard-meta { padding: 6px 0 0; gap: 3px; width: 100%; }
.view .catcard-action { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: #faf3e3; color: #1d1d1b; display: grid; place-items: center; }
.view .catcard-sub, .view .catcard-done, .home .cattile-n { font-size: 12px; line-height: 18px; }
.view .catcard-terms { font-size: 12px; line-height: 18px; font-weight: 500; }
.view .catcard-progress { width: 100%; }
.view .catcard-bar { height: 3px; border-radius: 0; margin-top: 5px; }
.view .catcard-bar span { border-radius: 0; }
.view .pcard, .home .rail .pcard {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); padding: 12px;
  min-height: 112px; box-shadow: none;
}
.view .pcard::after { content: none; }
.view .pcard-emblem { width: 84px; height: 84px; display: block; align-self: center; border: 0; border-radius: 5px; background: #faf3e3; overflow: hidden; }
.view .pcard-emblem .category-motif { display: block; width: 100%; height: 100%; }
.view .pcard-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.view .pcard .pcard-title, .home .rail .pcard-title { font-size: 17px; line-height: 1.15; font-weight: 800; letter-spacing: -.04em; padding: 0; overflow-wrap: anywhere; }
.view .pcard-cat { font-size: 11px; gap: 4px; }
.view .pcard-cat svg { width: 12px; height: 12px; }
.view .pcard-top { flex-wrap: wrap; gap: 4px; }
.view .pcard-meta { gap: 4px; font-size: 11px; line-height: 17px; }
.view .pcard-action { min-width: 40px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--accent); font-size: 11px; line-height: 16px; font-weight: 750; }
.view .pcard-action .ico { width: 19px; height: 19px; }
.view .pcard-progress { display: flex; gap: 7px; align-items: center; width: 100%; font-size: 11px; line-height: 16px; color: var(--ink-soft); }
.view .pcard-progress-track { height: 3px; width: 54px; background: var(--hairline); }
.view .pcard-progress-track > span { display: block; height: 100%; background: var(--accent); }
.home .rail .pcard { flex: 0 0 92%; }
.browse .pgrid { gap: 10px; }
.view .page-back { border-radius: 6px; }
.browse .category-head { gap: 10px; }
/* The standard back arrow (common.js backArrow) sits left of the title. */
.view .page-head.has-back { justify-content: flex-start; align-items: center; gap: 10px; }
.view .page-head.has-back > div { flex: 1; min-width: 0; }
.view .page-head.has-back:has(> div > .page-sub) {
  /* An inline subtitle goes under the title, so the arrow stays centred on
   * the title line: arrow | title | right slot, subtitle below the title. */
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
}
.view .page-head.has-back:has(> div > .page-sub) > div { display: contents; }
.view .page-head.has-back:has(> div > .page-sub) > .page-back { grid-column: 1; grid-row: 1; }
.view .page-head.has-back:has(> div > .page-sub) > div > .page-title { grid-column: 2; grid-row: 1; }
.view .page-head.has-back:has(> div > .page-sub) > div > .page-sub { grid-column: 2; grid-row: 2; }
.view .page-head.has-back:has(> div > .page-sub) > :not(.page-back):not(div) { grid-column: 3; grid-row: 1; }
.view a.page-back { text-decoration: none; }
.browse .category-count { color: var(--ink-soft); }

/* Utility routes use bold headings, strong controls, and the same paper. */
.settings .card, .learn .recall-card, .profile .mastery-intro,
.paywall .allowance-balance { border-radius: 8px; }
.settings .srow-label { font-weight: 700; }
.settings .seg { border-radius: 6px; }
.settings .seg-b { border-radius: 4px; }
.learn .review-welcome h2 { font-size: 28px; line-height: 1.1; letter-spacing: -.045em; }
.learn .review-welcome > .learning-illustration { width: 110px; height: 90px; }
.learning-illustration > img, .milestone-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.learning-illustration { background: #faf3e3; border-radius: 10px; overflow: hidden; }
.learn .recall-term { font-size: 32px; letter-spacing: -.035em; }
:root[data-theme=dark] .milestone-art { background: #faf3e3; border-radius: 10px; }
.bottomnav { border-top: 1px solid var(--hairline); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.bottomnav .navitem { min-height: 48px; gap: 4px; }
.bottomnav .navlabel { font-size: 11px; line-height: 14px; font-weight: 650; }
.bottomnav .navicon, .bottomnav .navitem.center .navicon { width: 40px; height: 28px; border-radius: 0; }
.bottomnav .navitem.on .navicon { background: transparent; box-shadow: none; }
.bottomnav .navitem.on .navlabel { font-weight: 850; }
.bottomnav .navitem.on { position: relative; }
.bottomnav .navitem.on::after { content: ''; position: absolute; height: 3px; width: 18px; bottom: -7px; background: var(--accent); }

/* Player chrome uses the club palette without changing fitGrid's space model. */
.play-head { border-bottom: 1px solid var(--hairline); }
.play-topic { font-weight: 800; letter-spacing: -.025em; }
.play-sub { color: var(--ink-soft); }
.iconbtn { border-radius: 6px; }
.player .board { padding-top: 5px; }
.cluebar { gap: 0; padding: 7px 6px; background: var(--ui-tint); border-block: 1px solid var(--hairline); }
.clue-card { border: 0; border-radius: 0; background: transparent; min-height: 66px; padding: 6px 8px; }
.cc-num { color: var(--accent); font-size: .95rem; font-weight: 800; }
.cc-text { font-weight: 550; }
.cc-learn { background: var(--themed); color: var(--app-bg); border-radius: 5px; }
:root[data-theme="light"] .cc-learn { color: #fff; }
.toolbar { border-top: 0; gap: 5px; padding-inline: 8px; }
.timer { font-family: var(--ui-display); font-size: 13px; font-weight: 600; }
.tb-status { font-size: 11px; }
.icon { border-radius: 6px; }
.icon svg { stroke-width: 1.8; }
.icon-l { font-size: 10px; }
.kbd { background: var(--card-2); border-top-color: var(--hairline); padding-top: 6px; }
.key { background: var(--card); border-color: transparent; border-radius: 4px; font-family: var(--ui-display); font-weight: 700; box-shadow: 0 1px 0 var(--hairline); }
:root[data-theme="light"] .key { background: var(--card); box-shadow: 0 1px 0 var(--hairline); }
.key.down, :root[data-theme="light"] .key.down { background: var(--accent); color: var(--ui-on-accent); }
.player.settled .solved-bar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
.player.settled .solved-heading { gap: 8px; padding-bottom: 0; }
.player.settled .solved-heading h2 { font-family: var(--ui-display); font-size: 18px; line-height: 22px; font-weight: 800; }
.player.settled .solved-stats { font-size: 11px; line-height: 16px; margin-top: 2px; }
.player.settled .solved-bar .btn { border-radius: 6px; padding: 8px 10px; min-height: 40px; }
.player.settled .clue-card { min-height: 48px; }
.player.settled .cluebar { padding-block: 4px; }
.player.settled .toolbar { padding-block: 0; }

@media (max-height: 720px) {
  .home { gap: 18px; }
  .home .stage-art { height: 220px; }
  .home .is-resuming .stage-art { height: 195px; }
  .home .stage-art-puzzle > :is(.topic-poster, .dynamic-poster, .puzzle-poster) { width: min(100%, 220px); }
  .home .is-resuming .stage-art-puzzle > :is(.topic-poster, .dynamic-poster, .puzzle-poster) { width: min(100%, 195px); }
  .home .play-stage { gap: 8px; }
  .home .stage-title { font-size: 26px; }
  .home .stage-play { min-height: 50px; margin-top: 2px; }
}
@media (max-width: 350px) {
  .view { padding-inline: 16px; }
  .home .wordmark { font-size: 44px; }
  .home .stage-art { width: calc(100% + 32px); margin-inline: -16px; }
  .home .rail { margin-inline: -16px; padding-inline: 16px; }
  .view .pcard, .home .rail .pcard { grid-template-columns: 66px minmax(0, 1fr) 32px; gap: 9px; padding: 10px; }
  .view .pcard-emblem { width: 66px; height: 66px; }
  .view .pcard-emblem .category-motif { width: 100%; height: 100%; }
  .view .pcard .pcard-title { font-size: 16px; }
  .home .stage-meta { font-size: 12px; gap: 5px; }
  .view .catcard, .home .cattile { padding: 0; }
  .view .catcard-name, .home .cattile-name { font-size: 16px; }
  .play-head { gap: 6px; padding-inline: 6px; }
  .play-prog .progress-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .player *, .home .stage-art *, .key { animation: none !important; transition: none !important; }
}