/* ============================================================
   The Useful Quiz — Soft Pastel UI
   Calm on the home. Snappy in a round.
   ============================================================ */

/* === TOKENS ============================================== */
:root {
  /* Surfaces */
  --paper:        oklch(97.6% 0.008 90);
  --paper-warm:   oklch(95% 0.014 86);
  --ink:          oklch(22% 0.018 264);
  --ink-soft:     oklch(40% 0.018 264);
  --muted:        oklch(58% 0.018 264);
  --rule:         oklch(88% 0.012 264);
  --rule-soft:    oklch(93% 0.008 264);

  /* Default accent (peach) — used where no subject is active */
  --accent:       oklch(82% 0.11 58);
  --accent-deep:  oklch(58% 0.16 48);
  --accent-tint:  oklch(94% 0.04 60);

  /* States */
  --pos:          oklch(50% 0.13 152);
  --pos-bg:       oklch(93% 0.06 152);
  --pos-tint:     oklch(88% 0.10 152);
  --neg:          oklch(50% 0.17 28);
  --neg-bg:       oklch(93% 0.05 28);
  --neg-tint:     oklch(88% 0.10 28);
  --warn:         oklch(70% 0.16 70);

  /* Per-subject colour — set by JS from cat.color */
  --cat-c:        oklch(82% 0.11 58);

  /* Type */
  --ff: "Manrope", system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-xs:   0 1px 2px oklch(22% 0.018 264 / 0.04);
  --shadow-soft: 0 2px 4px oklch(22% 0.018 264 / 0.04), 0 12px 28px oklch(22% 0.018 264 / 0.06);
  --shadow-lift: 0 4px 8px oklch(22% 0.018 264 / 0.05), 0 22px 40px oklch(22% 0.018 264 / 0.10);

  /* Motion */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quint:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow:   0.32s;
  --t-med:    0.22s;
  --t-fast:   0.16s;

  /* Layout */
  --gutter: clamp(1rem, 4vw, 2rem);
  --shell-max: 1040px;
}

/* === RESET =============================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff);
  font-feature-settings: "ss01", "cv11";
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--ink) }
button, input { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
ul, ol { list-style: none }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
em, i { font-style: italic }
kbd {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 0.1em 0.5em; border-radius: 6px;
  font: inherit; font-size: 0.92em; font-weight: 700;
  color: var(--ink); box-shadow: 0 1px 0 var(--rule);
}

/* === DECORATIVE ATMOSPHERE =============================== */
.grain {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.025;
  mix-blend-mode: multiply;
}

/* Two soft pastel orbs only behind the home — gentle warmth, not "wellness app" */
.atmo {
  position: absolute; pointer-events: none; z-index: -1;
  border-radius: 50%; filter: blur(50px);
  opacity: 0.55;
}
.atmo--peach {
  width: 420px; height: 420px;
  top: -160px; right: -180px;
  background: radial-gradient(circle, oklch(86% 0.14 56), transparent 70%);
  animation: drift 28s var(--ease) infinite alternate;
}
.atmo--mint {
  width: 320px; height: 320px;
  top: 360px; left: -160px;
  background: radial-gradient(circle, oklch(88% 0.10 165), transparent 70%);
  animation: drift 36s var(--ease) infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) }
  to   { transform: translate(50px, 40px) }
}

/* === SHELL =============================================== */
.shell {
  position: relative; z-index: 1;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: clamp(0.75rem, 2vw, 1.25rem) var(--gutter) clamp(2rem, 6vw, 4rem);
}

/* === SCREENS ============================================= */
.screen { display: none }
.screen.active { display: block; animation: rise 0.55s var(--ease-quint) both }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

#screen-quiz, #screen-results { position: relative }
#screen-quiz::before, #screen-results::before {
  content: "";
  position: absolute;
  inset: -1.5rem calc(-1 * var(--gutter)) auto;
  height: 320px;
  background: radial-gradient(ellipse 70% 100% at 50% 0%,
    color-mix(in oklab, var(--cat-c) 32%, transparent) 0%,
    transparent 75%);
  pointer-events: none; z-index: -1;
  filter: blur(14px);
  transition: opacity 0.4s var(--ease);
}

/* === TYPE ROLES ========================================== */
.tabular { font-variant-numeric: tabular-nums }

/* === HOME — TOP BAR ====================================== */
.idx__topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem; flex-wrap: wrap;
  padding: 0.85rem 0 1.25rem;
}
.idx__brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 800; font-size: 0.95rem;
  letter-spacing: -0.012em; color: var(--ink);
}
.idx__brand::before {
  content: ""; width: 0.65rem; height: 0.65rem;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}
.idx__topbar-meta { display: flex; gap: 0.4rem; flex-wrap: wrap }
.idx__topbar-meta span {
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.75rem;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ink-soft);
}

/* === HOME — HERO ========================================= */
.idx__hero {
  padding-block: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2rem);
  display: grid; gap: clamp(1.25rem, 3.5vw, 2rem);
}
.idx__hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 4.5vw, 4.5rem);
  font-weight: 800; line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 16ch; text-wrap: balance;
}
.idx__hero h1 .mark {
  display: inline-block;
  background: var(--accent);
  padding: 0 0.18em 0.04em;
  border-radius: 0.4em;
  white-space: nowrap;
  transform: rotate(-1deg);
  animation: settleMark 0.85s var(--ease-quint) 0.3s both;
}
@keyframes settleMark {
  from { transform: rotate(-3deg) scale(1.04); opacity: 0 }
  to   { transform: rotate(-1deg) scale(1);    opacity: 1 }
}
.idx__lede {
  font-size: clamp(1rem, 0.92rem + 0.5vw, 1.18rem);
  line-height: 1.55;
  max-width: 56ch; color: var(--ink-soft);
}
.idx__lede em {
  font-style: italic; color: var(--ink); font-weight: 600;
  background: linear-gradient(transparent 65%, var(--accent-tint) 65%);
  padding: 0 0.05em;
}
.idx__quickfacts { display: flex; flex-wrap: wrap; gap: 0.4rem }
.idx__quickfacts__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem; font-weight: 500;
  color: var(--ink-soft);
}
.idx__quickfacts__pill b {
  color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* === HOME — QUICKSTART =================================== */
.idx__quickstart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0.65rem;
  margin: clamp(1.25rem, 3.5vw, 2.25rem) 0 clamp(2.25rem, 5vw, 3rem);
}
.qs {
  position: relative;
  background: var(--ink); color: var(--paper);
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-lg);
  display: grid; gap: 0.3rem;
  text-align: left;
  font-family: inherit; cursor: pointer;
  border: 1px solid transparent; overflow: hidden;
  transition: transform var(--t-slow) var(--ease), background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.qs::after {
  content: "→";
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-size: 1.1rem; font-weight: 600; opacity: 0.5;
  transition: transform var(--t-med) var(--ease-quint), opacity var(--t-med) var(--ease);
}
.qs:hover, .qs:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  outline: none;
}
.qs:hover::after, .qs:focus-visible::after {
  transform: translateX(5px);
  opacity: 1;
}
.qs:active { transform: translateY(0); transition-duration: 0.08s }
.qs--primary { background: var(--accent); color: var(--ink) }
.qs--primary:hover { background: oklch(85% 0.11 58) }
.qs__title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
}
.qs__hint { font-size: 0.78rem; font-weight: 500; opacity: 0.78 }
.qs[aria-busy="true"] .qs__hint { opacity: 0.5 }

/* === HOME — SECTION HEAD ================================= */
.idx__sectionhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.idx__sectionhead h2 {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800; letter-spacing: -0.025em;
}
.idx__sectionhead h2::before {
  content: ""; width: 0.5rem; height: 0.5rem;
  background: var(--accent); border-radius: 50%;
}
.idx__sectionhead .label {
  font-size: 0.72rem; font-weight: 600;
  color: var(--muted); letter-spacing: 0.04em;
}

/* === SUBJECTS — chip cloud =============================== */
.cat-grid {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  min-height: 240px;
  align-content: flex-start;
}
.cat-card {
  position: relative;
  background: color-mix(in oklab, var(--cat-c) var(--cat-mix, 14%), var(--paper));
  border: 1px solid color-mix(in oklab, var(--cat-c) calc(var(--cat-mix, 14%) + 8%), var(--rule));
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: inherit;
  font-size: 0.92rem; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink); cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-slow) var(--ease), background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.cat-card:hover, .cat-card:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--cat-c) calc(var(--cat-mix, 14%) + 14%), var(--paper));
  border-color: color-mix(in oklab, var(--cat-c) 50%, var(--rule));
  box-shadow: var(--shadow-soft);
  outline: none;
}
.cat-card.mastered::after {
  content: "★";
  position: absolute;
  top: -3px; right: -3px;
  width: 1.2rem; height: 1.2rem;
  background: var(--accent-deep);
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  border: 2px solid var(--paper);
  line-height: 1;
}
.cat-card.mastered { border-color: color-mix(in oklab, var(--cat-c) 55%, var(--rule)) }
.cat-card:hover .cat-card__icon { transform: scale(1.06) rotate(-3deg) }
.cat-card:active { transform: translateY(0); transition-duration: 0.08s }
.cat-card__icon {
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: color-mix(in oklab, var(--cat-c) 55%, white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  transition: transform var(--t-med) var(--ease-quint);
}
.cat-card__count {
  font-size: 0.72rem; font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-left: 0.15rem; opacity: 0.78;
}
.cat-card__count em {
  font-style: normal; font-weight: 500;
  opacity: 0.7; margin-left: 0.18em;
}

/* === QUIZ — ROUND ======================================== */
#screen-quiz { --motion: var(--t-fast) }

.round__top-rail {
  display: flex; align-items: center; gap: 0.75rem;
  padding-top: 0.5rem;
  margin-bottom: 1.25rem;
}
.round__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--ink-soft);
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-pill);
  padding: 0.45rem 0.95rem;
  font-family: inherit;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.round__back:hover, .round__back:focus-visible {
  color: var(--ink); background: var(--paper);
  transform: translateX(-2px); outline: none;
}

.round__timer {
  flex: 1;
  height: 6px; min-width: 60px;
  background: var(--rule-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.round__timer-fill {
  display: block; height: 100%;
  background: color-mix(in oklab, var(--cat-c) 70%, white);
  transform-origin: left;
  transform: scaleX(var(--timer-p, 1));
  transition: transform var(--motion) linear, background 0.3s var(--ease);
  border-radius: inherit;
  will-change: transform;
}
.round__timer-fill.warn   { background: var(--warn) }
.round__timer-fill.danger { background: var(--neg); animation: pulseDanger 0.7s ease-in-out infinite alternate }
@keyframes pulseDanger { from { opacity: 1 } to { opacity: 0.6 } }

.round__meta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.streak-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: color-mix(in oklab, var(--accent) 22%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--rule));
  border-radius: var(--r-pill);
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem; font-weight: 700; color: var(--ink);
  opacity: 0;
  transform: translateX(0.25rem) scale(0.92);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-quint);
  pointer-events: none;
}
.streak-badge.visible {
  opacity: 1; transform: none; pointer-events: auto;
  animation: streakPop 0.55s var(--ease-quint);
}
.streak-badge.visible > span:first-child {
  animation: streakWiggle 0.6s var(--ease-quint);
  display: inline-block;
}
@keyframes streakPop {
  0%   { transform: scale(0.92) translateX(0.25rem) }
  60%  { transform: scale(1.08) translateX(0) }
  100% { transform: scale(1) translateX(0) }
}
@keyframes streakWiggle {
  0%, 100% { transform: rotate(0) }
  25%      { transform: rotate(-12deg) }
  50%      { transform: rotate(0) }
  75%      { transform: rotate(8deg) }
}

.score-display {
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease-quint);
}
.score-display strong { color: var(--ink); font-weight: 800 }
.score-display.bumped {
  animation: scoreBump 0.5s var(--ease-quint);
  background: color-mix(in oklab, var(--pos) 18%, var(--paper));
  border-color: color-mix(in oklab, var(--pos) 32%, var(--rule));
}
@keyframes scoreBump {
  0%   { transform: scale(1) }
  40%  { transform: scale(1.1) }
  100% { transform: scale(1) }
}

/* Stage */
.round__stage {
  display: grid;
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
  max-width: 720px;
}
.q-category {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: color-mix(in oklab, var(--cat-c) 20%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--cat-c) 32%, var(--rule));
  border-radius: var(--r-pill);
  padding: 0.4rem 0.95rem 0.4rem 0.45rem;
  font-size: 0.76rem; font-weight: 700; color: var(--ink);
  width: fit-content;
}
.q-category__icon {
  width: 1.5rem; height: 1.5rem;
  background: color-mix(in oklab, var(--cat-c) 60%, white);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.round__heading {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 0.25rem;
}
.round__time {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  font-size: 0.76rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.round__time b {
  color: var(--ink); font-weight: 800; font-size: 0.92rem;
  transition: color 0.3s var(--ease);
}
.round__time b.warn   { color: var(--warn) }
.round__time b.danger { color: var(--neg); animation: pulseDanger 0.7s ease-in-out infinite alternate }

.q-text {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Options */
.options-list {
  display: grid; gap: 0.55rem;
  margin-top: 0.25rem;
}
.option-btn {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 0.95rem 1.1rem;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.85rem;
  align-items: center;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  text-align: left; cursor: pointer; width: 100%;
  color: var(--ink); min-height: 60px;
  transition: transform var(--motion) var(--ease), background var(--motion) var(--ease), border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.option-btn:not([disabled]):hover,
.option-btn:not([disabled]):focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--cat-c) 60%, var(--rule));
  box-shadow: var(--shadow-soft);
  outline: none;
}
.option-btn:not([disabled]):active {
  transform: translateY(0); transition-duration: 0.06s;
}
.option-letter {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--cat-c) 32%, white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: var(--ink);
  flex-shrink: 0;
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease), transform var(--motion) var(--ease-quint);
}
.option-btn:not([disabled]):hover .option-letter,
.option-btn:not([disabled]):focus-visible .option-letter {
  background: color-mix(in oklab, var(--cat-c) 60%, white);
  transform: scale(1.06);
}
.option-text { font-weight: 500; line-height: 1.4; letter-spacing: -0.005em }

.option-btn.correct {
  background: var(--pos-bg);
  border-color: var(--pos);
  color: oklch(28% 0.13 152);
  animation: gentlePop 0.5s var(--ease-quint) both;
}
.option-btn.correct .option-letter { background: var(--pos); color: white }
.option-btn.wrong {
  background: var(--neg-bg);
  border-color: var(--neg);
  color: oklch(30% 0.17 28);
  animation: gentleShake 0.45s ease both;
}
.option-btn.wrong .option-letter { background: var(--neg); color: white }
.option-btn.dimmed { opacity: 0.45; filter: saturate(0.6) }
.option-btn[disabled] { cursor: default }
@keyframes gentlePop {
  0% { transform: scale(1) }
  45% { transform: scale(1.018) }
  100% { transform: scale(1) }
}
@keyframes gentleShake {
  0%, 100% { transform: translateX(0) }
  25% { transform: translateX(-3px) }
  75% { transform: translateX(3px) }
}

/* Timeout */
.timeout-msg {
  display: none;
  font-size: 0.78rem; font-weight: 700;
  color: var(--neg);
  background: var(--neg-bg);
  border: 1px solid color-mix(in oklab, var(--neg) 30%, var(--rule));
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  width: fit-content;
  letter-spacing: 0.02em;
}
.timeout-msg.visible { display: inline-flex; animation: rise 0.3s var(--ease) both }

/* Fact card */
.fact-card {
  display: none;
  background: color-mix(in oklab, var(--cat-c) 12%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--cat-c) 22%, var(--rule));
  border-radius: var(--r-lg);
  margin-top: 0.25rem;
  overflow: hidden;
}
.fact-card.visible { display: block; animation: rise 0.4s var(--ease) both }
.fact-card__inner { padding: 1rem 1.2rem 1.15rem }
.fact-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 800;
  color: color-mix(in oklab, var(--cat-c) 70%, var(--ink));
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.fact-text { font-size: 0.96rem; line-height: 1.55; color: var(--ink) }
.fact-text em {
  background: color-mix(in oklab, var(--cat-c) 25%, var(--paper));
  padding: 0 0.18em;
  border-radius: 0.25em;
  font-style: italic; font-weight: 600;
}

/* Next */
.next-wrap {
  display: none;
  align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin-top: 0.25rem;
}
.next-wrap.visible { display: flex; animation: rise 0.4s var(--ease) 0.05s both }
.round__next-hint {
  font-size: 0.74rem; color: var(--muted); font-weight: 500;
}

/* === BUTTONS ============================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-pill);
  padding: 0.85rem 1.4rem;
  font-family: inherit;
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn:active { transform: translateY(0); transition-duration: 0.08s }
.btn:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.btn--ghost {
  background: var(--paper); color: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover {
  background: var(--paper-warm); border-color: var(--ink);
}

/* === MARKSHEET / RESULTS ================================= */
.report {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2rem);
  padding-top: clamp(0.5rem, 2vw, 1rem);
}
.report__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.report__edition {
  font-size: 0.74rem; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.report__cat {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: color-mix(in oklab, var(--cat-c) 22%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--cat-c) 35%, var(--rule));
  border-radius: var(--r-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem; font-weight: 700; color: var(--ink);
}

.report__pct {
  font-size: clamp(4.5rem, 2rem + 14vw, 11rem);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: end; flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}
.report__pct > span:first-child {
  display: inline-flex; align-items: end;
  background: color-mix(in oklab, var(--cat-c) 22%, var(--paper));
  border-radius: var(--r-xl);
  padding: 0 0.18em 0.02em 0.22em;
  animation: rise 0.6s var(--ease-quint) both;
}
.report__pct .num {
  display: inline-block;
  animation: countIn 0.7s var(--ease-quint) both;
}
@keyframes countIn {
  from { opacity: 0; transform: translateY(0.2em) }
  to   { opacity: 1; transform: none }
}
.report__pct .sym {
  font-size: 0.34em; font-weight: 700;
  color: var(--ink-soft);
  align-self: end;
  padding-bottom: 0.55em;
  letter-spacing: -0.01em;
}
.report__pct-meta {
  font-size: clamp(0.85rem, 0.78rem + 0.3vw, 1rem);
  font-weight: 600;
  color: var(--ink-soft);
  align-self: end;
  padding-bottom: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.report__verdict {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance; max-width: 18ch;
}
.report__verdict em {
  font-style: italic; font-weight: 700;
  background: linear-gradient(transparent 65%, var(--accent-tint) 65%);
  padding: 0 0.05em;
}
.report__sub {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  color: var(--ink-soft);
  max-width: 50ch; line-height: 1.55;
}

/* Breakdown */
.report__breakdown {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.cell {
  height: 40px;
  border-radius: var(--r-md);
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  animation: cellIn 0.5s var(--ease-quint) both;
}
@keyframes cellIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96) }
  to   { opacity: 1; transform: none }
}
.cell[data-state="hit"]  {
  background: var(--pos-tint); color: oklch(30% 0.13 152);
  border-color: color-mix(in oklab, var(--pos) 30%, var(--rule));
}
.cell[data-state="miss"] {
  background: var(--neg-tint); color: oklch(32% 0.17 28);
  border-color: color-mix(in oklab, var(--neg) 30%, var(--rule));
}
.cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-xs) }

/* Stats */
.report__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.report__stats .stat {
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: 0.95rem 1.1rem 1.05rem;
  display: grid; gap: 0.2rem;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.report__stats .stat:hover {
  transform: translateY(-2px);
  background: var(--paper);
  border-color: color-mix(in oklab, var(--cat-c) 35%, var(--rule));
  box-shadow: var(--shadow-soft);
}
.stat__label {
  font-size: 0.7rem; font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.stat__val {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.results-actions { display: flex; gap: 0.6rem; flex-wrap: wrap }

/* === FOOTER ============================================== */
.site-footer {
  position: relative; z-index: 1;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 1.5rem var(--gutter) 2rem;
  max-width: var(--shell-max);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.005em;
  border-top: 1px solid var(--rule-soft);
}
.site-footer b { color: var(--ink); font-weight: 700 }
.site-footer__org { opacity: 0.78 }
.site-footer__contact a {
  color: var(--muted);
  border-bottom: 1px solid currentColor;
  transition: color var(--t-med) var(--ease);
}
.site-footer__contact a:hover { color: var(--ink) }

/* === LOADING OVERLAY ===================================== */
.cat-loading-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: oklch(97.6% 0.008 90 / 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.cat-loading-overlay.visible { display: flex; animation: rise 0.2s ease both }
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent-deep);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* === REDUCED MOTION ====================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === SUBJECT PAGE LANDING ================================ */
.subject-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 0 1.25rem;
}
.subject-topbar .idx__brand { color: var(--ink) }

.breadcrumb {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--ink-soft); font-weight: 600;
  letter-spacing: -0.005em;
}
.breadcrumb a {
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  padding-bottom: 1px;
}
.breadcrumb a:hover { color: var(--ink); border-color: var(--ink-soft) }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700 }
.breadcrumb [aria-hidden="true"] { color: var(--muted); opacity: 0.6 }

.subject-hero {
  position: relative;
  display: grid; gap: 1rem; place-items: center;
  text-align: center;
  padding-block: clamp(2rem, 6vw, 3.75rem);
  isolation: isolate;
}
.subject-hero::before {
  content: "";
  position: absolute;
  inset: -1rem calc(-1 * var(--gutter)) -1rem;
  background: radial-gradient(ellipse 70% 100% at 50% 30%,
    color-mix(in oklab, var(--cat-c) 30%, transparent) 0%,
    transparent 75%);
  z-index: -1;
  filter: blur(18px);
  pointer-events: none;
}
.subject-hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: color-mix(in oklab, var(--cat-c) 22%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--cat-c) 38%, var(--rule));
  border-radius: var(--r-pill);
  padding: 0.4rem 1rem 0.4rem 0.5rem;
  font-size: 0.78rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em;
}
.subject-hero__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: color-mix(in oklab, var(--cat-c) 60%, white);
  font-size: 1rem; flex-shrink: 0;
}
.subject-hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-wrap: balance;
  max-width: 14ch;
}
.subject-hero__desc {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 38ch;
  line-height: 1.4;
  text-wrap: balance;
}
.subject-hero__cta {
  display: grid; gap: 0.5rem; place-items: center;
  margin-top: 0.85rem;
}
.btn--start {
  background: var(--ink); color: var(--paper);
  font-size: 1.05rem; font-weight: 700;
  padding: 1rem 2rem;
  border-radius: var(--r-pill);
  position: relative; overflow: hidden;
}
.btn--start::after {
  content: "→";
  display: inline-block;
  margin-left: 0.45rem;
  transition: transform var(--t-med) var(--ease-quint);
}
.btn--start:hover::after { transform: translateX(4px) }
.subject-hero__cta-hint {
  font-size: 0.74rem; color: var(--muted); font-weight: 500;
  letter-spacing: 0.005em;
}

.subject-about,
.subject-howitworks,
.subject-others,
.subject-related {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid; gap: 0.85rem;
}
.subject-about h2,
.subject-howitworks h2,
.subject-others h2,
.subject-related h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.subject-about h2::before,
.subject-howitworks h2::before,
.subject-others h2::before,
.subject-related h2::before {
  content: ""; width: 0.5rem; height: 0.5rem;
  background: color-mix(in oklab, var(--cat-c, var(--accent)) 70%, var(--ink));
  border-radius: 50%;
}
.subject-about h3 {
  font-size: 1.05rem; font-weight: 700;
  margin-top: 0.5rem;
}
.subject-about p,
.subject-howitworks p {
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 64ch;
  font-size: 0.98rem;
}
.subject-topics {
  display: grid; gap: 0.4rem;
  list-style: none;
  padding-left: 0;
  max-width: 64ch;
}
.subject-topics li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink);
  line-height: 1.5;
  font-size: 0.96rem;
}
.subject-topics li::before {
  content: "";
  position: absolute;
  left: 0.3rem; top: 0.6em;
  width: 0.4rem; height: 0.4rem;
  background: color-mix(in oklab, var(--cat-c, var(--accent)) 70%, var(--ink));
  border-radius: 50%;
}
.subject-others .cat-grid { margin-top: 0.5rem }

@media (max-width: 540px) {
  .subject-hero { padding-block: 1.5rem }
  .btn--start { padding: 0.9rem 1.5rem; font-size: 1rem }
}

/* === SEO ABOUT — visible long-form copy for crawlers + humans === */
.seo-about {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--rule-soft);
  display: grid;
  gap: 0.85rem;
  max-width: 64ch;
}
.seo-about h2 {
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}
.seo-about h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-top: 0.65rem;
  color: var(--ink);
}
.seo-about p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.seo-about p strong {
  color: var(--ink);
  font-weight: 700;
}

/* === DAILY STREAK PILL =================================== */
.idx__topbar-meta .streak-pill[hidden] { display: none }
.idx__topbar-meta .streak-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: color-mix(in oklab, var(--accent) 24%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--accent) 42%, var(--rule));
  border-radius: var(--r-pill);
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.streak-pill__flame {
  display: inline-block;
  animation: flicker 1.6s ease-in-out infinite alternate;
  transform-origin: 50% 80%;
}
.streak-pill b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
@keyframes flicker {
  0%   { transform: scale(1) rotate(0deg) }
  50%  { transform: scale(1.08) rotate(-3deg) }
  100% { transform: scale(0.96) rotate(3deg) }
}

/* === RESUME BANNER ======================================= */
.resume-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  background: color-mix(in oklab, var(--accent) 18%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--rule));
  border-radius: var(--r-lg);
  padding: 0.75rem 0.75rem 0.75rem 1.1rem;
  margin-bottom: 0.75rem;
  animation: rise 0.45s var(--ease-quint) both;
}
.resume-banner[hidden] { display: none }
.resume-banner__btn {
  background: none; border: 0; cursor: pointer;
  text-align: left;
  display: grid; gap: 0.15rem;
  font-family: inherit;
  color: var(--ink);
  padding: 0.2rem 0;
  transition: transform var(--t-med) var(--ease);
}
.resume-banner__btn:hover { transform: translateX(2px) }
.resume-banner__title {
  font-weight: 700; font-size: 0.96rem; letter-spacing: -0.01em;
}
.resume-banner__hint {
  font-size: 0.74rem; color: var(--ink-soft); font-weight: 500;
}
.resume-banner__dismiss {
  background: var(--paper); border: 1px solid var(--rule);
  color: var(--ink-soft);
  width: 2rem; height: 2rem;
  border-radius: 50%;
  font-size: 1.05rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease-quint);
}
.resume-banner__dismiss:hover {
  color: var(--ink); border-color: var(--ink);
  transform: scale(1.05);
}

/* === MARKSHEET PB BADGE ================================== */
.report__streak {
  color: var(--ink); font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.report__pb {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  padding: 0.4rem 0.85rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-pill);
  width: fit-content;
}
.report__pb[hidden] { display: none }
.report__pb b {
  color: var(--ink); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.report__pb.pb-new {
  background: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 60%, var(--ink));
  color: var(--ink);
  animation: pbCelebrate 0.8s var(--ease-quint);
}
.report__pb.pb-tied {
  background: color-mix(in oklab, var(--accent) 20%, var(--paper));
  border-color: color-mix(in oklab, var(--accent) 40%, var(--rule));
  color: var(--ink);
}
@keyframes pbCelebrate {
  0%   { transform: scale(0.85); opacity: 0 }
  50%  { transform: scale(1.06); opacity: 1 }
  100% { transform: scale(1) }
}

/* === SHARE BUTTON ======================================== */
.btn--share {
  background: var(--accent);
  color: var(--ink);
}
.btn--share:hover { background: oklch(85% 0.11 58) }

/* === TOAST =============================================== */
.toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(0.75rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-pill);
  padding: 0.7rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  box-shadow: var(--shadow-lift);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-quint);
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === ACHIEVEMENTS (home) ================================= */
.achievements {
  display: grid; gap: 0.6rem;
  background: color-mix(in oklab, var(--accent) 9%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--rule));
  border-radius: var(--r-lg);
  padding: 0.85rem 1rem 0.95rem;
  margin: 0 0 1rem;
}
.achievements[hidden] { display: none }
.achievements__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.achievements__title #achievements-count,
.achievements__title #achievements-total {
  color: var(--ink); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.achievements__row {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.achievement {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--rule));
  border-radius: var(--r-pill);
  padding: 0.32rem 0.7rem 0.32rem 0.45rem;
  font-size: 0.75rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.005em;
  cursor: default;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  animation: rise 0.4s var(--ease-quint) both;
}
.achievement:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft) }
.achievement__icon {
  width: 1.4rem; height: 1.4rem;
  background: color-mix(in oklab, var(--accent) 25%, var(--paper));
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.achievement--locked {
  border-color: var(--rule-soft);
  color: var(--muted);
  background: var(--paper-warm);
}
.achievement--locked .achievement__icon {
  background: var(--rule-soft);
  filter: grayscale(0.6);
}

/* === END-OF-ROUND NEXT-SUBJECT SUGGESTION ================ */
.res-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rule-soft);
  margin-top: 0.5rem;
  animation: rise 0.5s var(--ease-quint) both;
}
.res-next[hidden] { display: none }
.res-next__label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.res-next__chip { /* inherits .cat-card; light extra hover */
  animation: nudge 1.6s var(--ease-quint) infinite;
}
.res-next__chip:hover { animation: none }
@keyframes nudge {
  0%, 100% { transform: translateX(0) }
  50%      { transform: translateX(2px) }
}

/* === SCORE FLOATER (+1) ================================== */
.score-float {
  position: absolute;
  top: -0.4rem; right: -0.5rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--pos);
  letter-spacing: -0.005em;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 var(--paper);
  animation: scoreFloatAnim 0.85s var(--ease-quint) both;
  z-index: 5;
}
@keyframes scoreFloatAnim {
  0%   { opacity: 0; transform: translateY(0) scale(0.8) }
  20%  { opacity: 1; transform: translateY(-0.2rem) scale(1.05) }
  60%  { opacity: 1; transform: translateY(-1.3rem) scale(1) }
  100% { opacity: 0; transform: translateY(-2.2rem) scale(0.92) }
}

/* === CONFETTI ============================================ */
.confetti-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -2rem;
  width: 9px; height: 13px;
  display: block;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(0.22, 0.7, 0.4, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
  transform: translateY(-2rem) rotate(var(--rot, 0deg));
}
@keyframes confettiFall {
  0%   { transform: translate(0, -2rem) rotate(var(--rot, 0deg)); opacity: 0 }
  10%  { opacity: 1 }
  100% { transform: translate(var(--drift, 0), 110vh) rotate(calc(var(--rot, 0deg) + 720deg)); opacity: 0.9 }
}

/* === MOBILE TUNING ======================================= */
@media (max-width: 540px) {
  .idx__topbar { padding: 0.75rem 0 0.75rem; gap: 0.5rem }
  .idx__topbar-meta { gap: 0.3rem }
  .idx__topbar-meta span { padding: 0.28rem 0.6rem; font-size: 0.68rem }
  .idx__hero { padding-block: 1.5rem 0.5rem; gap: 1rem }
  .idx__quickstart { gap: 0.5rem }
  .qs { padding: 1.05rem 1.2rem }
  .qs::after { top: 1.05rem; right: 1.2rem }
  .qs__title { font-size: 1rem }

  /* Round top-rail: grid layout for clean wrap */
  .round__top-rail {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "back meta"
      "timer timer";
    gap: 0.5rem 0.75rem;
    align-items: center;
  }
  .round__back { grid-area: back; padding: 0.4rem 0.8rem; font-size: 0.74rem }
  .round__meta { grid-area: meta; justify-self: end; gap: 0.3rem }
  .round__timer { grid-area: timer; height: 5px; min-width: 0 }
  .streak-badge, .score-display { padding: 0.32rem 0.65rem; font-size: 0.72rem }

  .option-btn { padding: 0.85rem 0.95rem; font-size: 0.96rem; min-height: 56px }
  .option-letter { width: 1.85rem; height: 1.85rem }

  .cat-card { font-size: 0.86rem; padding: 0.4rem 0.85rem 0.4rem 0.4rem }
  .cat-card__icon { width: 1.65rem; height: 1.65rem; font-size: 0.92rem }
  .cat-grid { gap: 0.35rem }

  .report__pct { gap: 0.25rem 0.6rem }
  .report__breakdown { grid-template-columns: repeat(5, 1fr); gap: 5px }
  .cell { height: 36px }
  .report__stats { grid-template-columns: 1fr 1fr }
  .report__stats .stat:nth-child(3) { grid-column: 1 / -1 }

  .atmo--peach { width: 320px; height: 320px; top: -120px; right: -140px }
  .atmo--mint { width: 240px; height: 240px; top: 280px; left: -100px }
}

@media (max-width: 380px) {
  .idx__topbar-meta > span:last-child { display: none } /* drop trailing "Free" pill on tiny screens */

  /* Chip cloud → vertical stack so long names ("Environmental Science") never overflow */
  .cat-grid { flex-direction: column; gap: 0.4rem }
  .cat-card {
    width: 100%;
    justify-content: flex-start;
    padding: 0.55rem 1rem 0.55rem 0.5rem;
  }
  .cat-card__count { margin-left: auto }

  /* Round top-rail meta pills can wrap */
  .round__top-rail { gap: 0.4rem }

  /* Tighter result stat tiles */
  .report__stats .stat { padding: 0.75rem 0.85rem 0.85rem }
}