/* GradeBlaze — Inferno Mode (restrained)
   Graphite + scarlet flame, designed for a Year 7 learner training daily.
   Engagement codes from Duolingo's retention loop (streak / freeze /
   XP goal / weekly tier). Inferno energy is reserved for arrival and
   celebration moments — the resting UI stays calmer so a 30-minute mock
   paper doesn't burn the eyes.

   Variable names like --mock-lime / --mock-cyan are intentionally kept
   from the previous palette so the rebrand is a value swap, not a
   class rewrite — every selector in the file continues to work. */

:root {
  /* Surface */
  --mock-bg: #0a0a0f;
  --mock-bg-grad: #14141a;
  --mock-card: #14141a;
  --mock-card-hi: #1f1f2a;
  --mock-border: #1f1f2a;
  --mock-border-hi: #2a2a35;

  /* Text */
  --mock-text: #c4c4d1;
  --mock-text-strong: #fafafa;
  --mock-text-dim: #c4c4d1;
  --mock-muted: #7a7a8c;

  /* Accents — primary slot now scarlet, secondary slot now mint */
  --mock-lime: #ff3d00;            /* primary energy — name kept for back-compat */
  --mock-lime-strong: #d94b00;
  --mock-lime-soft: rgba(255, 61, 0, 0.10);
  --mock-coral: #f97316;
  --mock-coral-soft: rgba(249, 115, 22, 0.14);
  --mock-fire: #ffb300;            /* warm amber — used by tiles + tier gold */
  --mock-cyan: #00f5d4;            /* mint — cool counterpoint, parent banner */
  --mock-magenta: #ff006e;         /* celebration only (perfect rounds, level-up) */

  /* Tier colours */
  --tier-bronze: #c2750a;
  --tier-silver: #cbd5e1;
  --tier-gold: #ffb300;
  --tier-diamond: #00f5d4;

  /* Per-mode strip colours — kept distinct so subject tiles still read */
  --tile-warmup:   #ff3d00;
  --tile-sprint:   #00f5d4;
  --tile-distance: #ff006e;
  --tile-coach:    #ffb300;

  /* Geometry */
  --mock-radius: 14px;
  --mock-radius-lg: 20px;

  /* Type */
  --mock-font-display: 'Anton', 'Impact', 'Arial Black', sans-serif;
  --mock-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.mock-page {
  font-family: var(--mock-font-body);
  background:
    radial-gradient(900px 480px at 50% -200px, rgba(255, 61, 0, 0.12), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(255, 0, 110, 0.06), transparent 70%),
    linear-gradient(180deg, var(--mock-bg) 0%, var(--mock-bg-grad) 100%);
  background-attachment: fixed;
  color: var(--mock-text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: 'tnum' 1;
}

body.mode-warmup   { --tile-color: var(--tile-warmup); }
body.mode-sprint   { --tile-color: var(--tile-sprint); }
body.mode-distance { --tile-color: var(--tile-distance); }
body.mode-coach    { --tile-color: var(--tile-coach); }

/* HEADER */
.mock-header {
  background: rgba(10, 10, 15, 0.85);
  border-bottom: 1px solid var(--mock-border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.mock-header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mock-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.mock-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--mock-lime), var(--mock-fire));
  color: var(--mock-bg);
  font-family: var(--mock-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.mock-brand-text { display: flex; flex-direction: column; gap: 0.05rem; }
.mock-brand-line-1 {
  font-family: var(--mock-font-display);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: var(--mock-text-strong);
  line-height: 1;
}
.mock-brand-line-2 {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
}
.mock-header-streak {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.32);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mock-fire);
  letter-spacing: 0.05em;
}
.mock-header-streak-count {
  font-family: var(--mock-font-display);
  font-size: 1.05rem;
  line-height: 1;
}
.mock-back {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mock-text-dim);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  margin-left: -0.55rem;
  border-radius: 7px;
  letter-spacing: 0.02em;
}

.mock-sound-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--mock-border);
  color: var(--mock-text-dim);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  transition: border-color 100ms ease, background 100ms ease;
}
.mock-sound-toggle:hover, .mock-sound-toggle:focus {
  border-color: var(--mock-lime);
  background: var(--mock-lime-soft);
  outline: none;
}
/* When the streak chip is also present (landing page), the streak chip
   keeps the auto margin and the sound toggle sits to its right. */
.mock-header-streak + .mock-sound-toggle { margin-left: 0.4rem; }
.mock-back:hover, .mock-back:focus {
  color: var(--mock-lime);
  background: var(--mock-lime-soft);
  outline: none;
}

/* MAIN */
.mock-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* HERO CARD */
.mock-hero {
  background: linear-gradient(160deg, var(--mock-card) 0%, var(--mock-card-hi) 100%);
  border: 1px solid var(--mock-border-hi);
  border-radius: var(--mock-radius-lg);
  padding: 1.25rem 1.25rem 1.35rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.55);
}
.mock-hero-streak-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.05rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--mock-border);
}
.mock-hero-flame { font-size: 2.5rem; line-height: 1; }
.mock-hero-streak-text { display: flex; flex-direction: column; gap: 0.1rem; }
.mock-hero-streak-num {
  font-family: var(--mock-font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--mock-text-strong);
  letter-spacing: 0.03em;
}
.mock-hero-streak-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
}
.mock-hero-freezes {
  margin-left: auto;
  text-align: right;
  font-size: 0.78rem;
  color: var(--mock-muted);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mock-hero-freezes strong { color: var(--mock-text-strong); font-weight: 700; }

.mock-hero-xp {
  margin-bottom: 1.05rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--mock-border);
}
.mock-hero-xp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
}
.mock-hero-xp-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
}
.mock-hero-xp-value {
  font-family: var(--mock-font-display);
  font-size: 1.4rem;
  color: var(--mock-text-strong);
  letter-spacing: 0.04em;
}
.mock-hero-xp-bar {
  position: relative;
  height: 12px;
  background: var(--mock-bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--mock-border);
}
.mock-hero-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mock-lime-strong), var(--mock-lime));
  width: 0%;
  transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255, 61, 0, 0.45);
}

.mock-hero-bottom {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.mock-hero-tier, .mock-hero-countdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.mock-hero-countdown { text-align: right; align-items: flex-end; }
.mock-hero-tier-label, .mock-hero-countdown-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
}
.mock-hero-tier-value {
  font-family: var(--mock-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1;
}
.mock-hero-tier-value.tier-bronze   { color: var(--tier-bronze); }
.mock-hero-tier-value.tier-silver   { color: var(--tier-silver); }
.mock-hero-tier-value.tier-gold     { color: var(--tier-gold); }
.mock-hero-tier-value.tier-diamond  { color: var(--tier-diamond); }
.mock-hero-tier-value.tier-empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.mock-hero-countdown-value {
  font-family: var(--mock-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--mock-text-strong);
  line-height: 1;
}
.mock-hero-countdown-set {
  background: transparent;
  border: 1px solid var(--mock-border-hi);
  color: var(--mock-text-dim);
  padding: 0.42rem 0.75rem;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--mock-font-body);
  transition: border-color 100ms ease, color 100ms ease;
}
.mock-hero-countdown-set:hover, .mock-hero-countdown-set:focus {
  border-color: var(--mock-lime);
  color: var(--mock-lime);
  outline: none;
}
.mock-hero-countdown-edit {
  background: transparent;
  border: none;
  color: var(--mock-muted);
  font-size: 0.7rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: var(--mock-font-body);
  margin-top: 0.1rem;
}
.mock-hero-countdown-edit:hover { color: var(--mock-text-dim); }
.mock-hero-date-input {
  font-family: var(--mock-font-body);
  font-size: 0.92rem;
  background: var(--mock-bg);
  color: var(--mock-text-strong);
  border: 1px solid var(--mock-lime);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  margin-top: 0.25rem;
}

/* MISSION HEADING */
.mock-mission { margin: 1.4rem 0 0.85rem; }
.mock-mission-title {
  font-family: var(--mock-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--mock-text-strong);
  margin: 0;
  line-height: 1.1;
}
.mock-mission-sub {
  font-size: 0.85rem;
  color: var(--mock-muted);
  margin: 0.2rem 0 0;
}

/* TILES */
.mock-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 600px) {
  .mock-tiles { grid-template-columns: 1fr 1fr; }
}
/* Laptop / wide-screen layout — max-width and 4-up tile row.
   Mobile-first design assumes a phone-sized column; on wider screens
   the existing column was feeling cramped. This breakpoint widens the
   main column and lays the four mode tiles out in a single row so
   nothing is cut off the bottom of the fold on first paint. */
@media (min-width: 1024px) {
  .mock-header-inner { max-width: 1080px; }
  .mock-main         { max-width: 1080px; padding: 1.5rem 1.4rem 3rem; }
  .mock-tiles        { grid-template-columns: repeat(4, 1fr); }
}
.mock-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--mock-card);
  border: 1px solid var(--mock-border);
  border-radius: var(--mock-radius);
  padding: 1.05rem 1.15rem 1.15rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 90ms ease, border-color 90ms ease, background 90ms ease;
}
.mock-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--tile-color, var(--mock-lime));
}
.mock-tile-warmup   { --tile-color: var(--tile-warmup); }
.mock-tile-sprint   { --tile-color: var(--tile-sprint); }
.mock-tile-distance { --tile-color: var(--tile-distance); }
.mock-tile-coach    { --tile-color: var(--tile-coach); }
.mock-tile:hover, .mock-tile:focus {
  transform: translateY(-1px);
  border-color: var(--mock-border-hi);
  background: var(--mock-card-hi);
  outline: none;
}
.mock-tile-tag {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tile-color, var(--mock-muted));
  font-weight: 800;
}
.mock-tile-title {
  font-family: var(--mock-font-display);
  font-size: 1.7rem;
  letter-spacing: 0.05em;
  color: var(--mock-text-strong);
  line-height: 1;
  margin-top: 0.05rem;
}
.mock-tile-meta {
  font-size: 0.78rem;
  color: var(--mock-muted);
  font-weight: 500;
}
.mock-tile-quote {
  font-size: 0.92rem;
  color: var(--mock-text-dim);
  font-style: italic;
  margin-top: 0.15rem;
}
.mock-tile-arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-size: 1.2rem;
  color: var(--mock-muted);
  transition: color 90ms ease, transform 110ms ease;
}
.mock-tile:hover .mock-tile-arrow {
  color: var(--tile-color);
  transform: translateX(3px);
}
.mock-tile-status {
  position: absolute;
  right: 0.85rem;
  top: 0.85rem;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--mock-bg);
  border: 1px solid var(--mock-border-hi);
  color: var(--mock-muted);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-weight: 800;
}
.mock-tile-status.live {
  background: var(--mock-lime-soft);
  border-color: var(--mock-lime);
  color: var(--mock-lime);
}

/* STUB / IN-PROGRESS PAGE */
.mock-stub-hero {
  background: var(--mock-card);
  border: 1px solid var(--mock-border);
  border-left: 4px solid var(--tile-color, var(--mock-lime));
  border-radius: var(--mock-radius);
  padding: 1.3rem 1.3rem 1.4rem;
  margin-bottom: 1.2rem;
}
.mock-stub-tag {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tile-color, var(--mock-lime));
  font-weight: 800;
}
.mock-stub-title {
  font-family: var(--mock-font-display);
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  color: var(--mock-text-strong);
  margin: 0.1rem 0 0.4rem;
  line-height: 1;
}
.mock-stub-quote {
  font-style: italic;
  color: var(--mock-text-dim);
  margin: 0;
}
.mock-stub-card {
  background: var(--mock-card);
  border: 1px solid var(--mock-border);
  border-radius: var(--mock-radius);
  padding: 1.2rem 1.3rem 1.4rem;
}
.mock-stub-card h2 {
  font-family: var(--mock-font-display);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  color: var(--mock-text-strong);
  margin: 0 0 0.6rem;
}
.mock-stub-card p { margin: 0 0 1rem; color: var(--mock-text-dim); }
.mock-stub-list {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
  color: var(--mock-text-dim);
}
.mock-stub-list li { margin-bottom: 0.35rem; }

/* BUTTONS */
.mock-button {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border-radius: 9px;
  background: var(--mock-lime);
  color: var(--mock-bg);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font-family: var(--mock-font-body);
  transition: transform 80ms ease, background 80ms ease;
}
.mock-button:hover, .mock-button:focus {
  background: var(--mock-lime-strong);
  transform: translateY(-1px);
  outline: none;
}
.mock-button:active { transform: translateY(0); }
.mock-button-ghost {
  background: transparent;
  color: var(--mock-text-dim);
  border: 1px solid var(--mock-border-hi);
}
.mock-button-ghost:hover, .mock-button-ghost:focus {
  border-color: var(--mock-lime);
  color: var(--mock-lime);
  background: var(--mock-lime-soft);
}

/* SESSION RUNNER (warm-up etc.) */
.mock-session { display: flex; flex-direction: column; gap: 1.1rem; }
.mock-session-progress {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.mock-session-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--mock-bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--mock-border);
}
.mock-session-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mock-lime-strong), var(--mock-lime));
  width: 0%;
  transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mock-session-progress-text {
  font-family: var(--mock-font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--mock-text-dim);
  min-width: 3.5rem;
  text-align: right;
}
.mock-session-progress-text.urgent {
  color: var(--mock-coral);
  animation: pulseUrgent 1s infinite ease-in-out;
}
@keyframes pulseUrgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.mock-session-card {
  background: linear-gradient(160deg, var(--mock-card) 0%, var(--mock-card-hi) 100%);
  border: 1px solid var(--mock-border-hi);
  border-radius: var(--mock-radius-lg);
  padding: 1.4rem 1.3rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.55);
}
.mock-session-subject {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tile-color, var(--mock-lime));
}
.mock-session-prompt {
  font-size: 1.15rem;
  color: var(--mock-text-strong);
  line-height: 1.4;
  margin: 0;
}
.mock-session-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: auto;
}
.mock-session-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  background: var(--mock-bg);
  border: 1px solid var(--mock-border-hi);
  color: var(--mock-text);
  padding: 0.85rem 0.95rem;
  border-radius: 11px;
  font-size: 0.98rem;
  font-family: var(--mock-font-body);
  cursor: pointer;
  transition: transform 80ms ease, border-color 80ms ease, background 80ms ease;
}
.mock-session-option:hover, .mock-session-option:focus {
  border-color: var(--mock-lime);
  background: var(--mock-card-hi);
  outline: none;
}
.mock-session-option:active { transform: scale(0.98); }
.mock-session-option-letter {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--mock-card);
  border: 1px solid var(--mock-border-hi);
  font-family: var(--mock-font-display);
  font-size: 0.92rem;
  color: var(--mock-text-dim);
  flex-shrink: 0;
}
.mock-session-option.is-correct {
  border-color: var(--mock-lime);
  background: var(--mock-lime-soft);
  color: var(--mock-text-strong);
  animation: pulseCorrect 600ms ease-out;
}
.mock-session-option.is-correct .mock-session-option-letter {
  background: var(--mock-lime);
  color: var(--mock-bg);
  border-color: var(--mock-lime);
}
.mock-session-option.is-wrong {
  border-color: var(--mock-coral);
  background: var(--mock-coral-soft);
  animation: shakeWrong 350ms ease;
}
.mock-session-option.is-wrong .mock-session-option-letter {
  background: var(--mock-coral);
  color: var(--mock-bg);
  border-color: var(--mock-coral);
}
.mock-session-option:disabled { cursor: default; }

@keyframes pulseCorrect {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0   rgba(255, 61, 0, 0.55); }
  25%  { transform: scale(1.06);  box-shadow: 0 0 0 14px rgba(255, 61, 0, 0); }
  55%  { transform: scale(1.015); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0   rgba(255, 61, 0, 0); }
}
@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  50%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
}

.mock-session-feedback {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
}
.mock-session-feedback.correct {
  background: var(--mock-lime-soft);
  border: 1px solid var(--mock-lime);
  color: var(--mock-lime);
}
.mock-session-feedback.wrong {
  background: var(--mock-coral-soft);
  border: 1px solid var(--mock-coral);
  color: var(--mock-coral);
}
.mock-session-feedback-explainer {
  color: var(--mock-text-dim);
  font-weight: 400;
  font-size: 0.88rem;
  margin-top: 0.3rem;
}

/* SESSION COMPLETE */
.mock-result {
  background: linear-gradient(160deg, var(--mock-card), var(--mock-card-hi));
  border: 1px solid var(--mock-border-hi);
  border-radius: var(--mock-radius-lg);
  padding: 1.6rem 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: center;
}
.mock-result-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 800;
}
.mock-result-score {
  font-family: var(--mock-font-display);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--mock-text-strong);
  letter-spacing: 0.04em;
}
.mock-result-score-meta {
  font-size: 0.95rem;
  color: var(--mock-text-dim);
  margin-top: -0.4rem;
}
.mock-result-xp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--mock-lime-soft);
  color: var(--mock-lime);
  border: 1px solid var(--mock-lime);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mock-result-streak {
  font-size: 0.95rem;
  color: var(--mock-text-dim);
}
.mock-result-streak strong { color: var(--mock-fire); font-weight: 700; }
.mock-result-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* COACH */
.mock-coach-block {
  background: var(--mock-card);
  border: 1px solid var(--mock-border);
  border-radius: var(--mock-radius);
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 0.9rem;
}
.mock-coach-block h2 {
  font-family: var(--mock-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--mock-text-strong);
  margin: 0 0 0.7rem;
}
.mock-coach-empty {
  color: var(--mock-muted);
  font-size: 0.9rem;
  margin: 0;
}
.mock-coach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mock-coach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--mock-bg);
  border: 1px solid var(--mock-border);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
}
.mock-coach-row-left { display: flex; flex-direction: column; gap: 0.1rem; }
.mock-coach-row-subject {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--mock-muted);
}
.mock-coach-row-topic {
  font-size: 0.95rem;
  color: var(--mock-text-strong);
  font-weight: 600;
}
.mock-coach-row-stat {
  font-family: var(--mock-font-display);
  font-size: 1.15rem;
  color: var(--mock-coral);
  letter-spacing: 0.04em;
}
.mock-coach-row-stat.ok { color: var(--mock-lime); }

/* RESPONSIVE */
@media (max-width: 380px) {
  .mock-hero-streak-num { font-size: 2rem; }
  .mock-hero-flame { font-size: 2rem; }
  .mock-tile-title { font-size: 1.45rem; }
  .mock-stub-title { font-size: 2rem; }
  .mock-result-score { font-size: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- WELCOME / SIGN-IN ---------- */

.mock-welcome-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.mock-welcome-card {
  background: linear-gradient(160deg, var(--mock-card) 0%, var(--mock-card-hi) 100%);
  border: 1px solid var(--mock-border-hi);
  border-radius: var(--mock-radius-lg);
  padding: 2rem 1.6rem 1.8rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.mock-welcome-emblem {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mock-lime), var(--mock-fire));
  color: var(--mock-bg);
  font-family: var(--mock-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
  box-shadow: 0 0 30px rgba(255, 61, 0, 0.45);
}
.mock-welcome-title {
  font-family: var(--mock-font-display);
  font-size: 2.6rem;
  letter-spacing: 0.06em;
  color: var(--mock-text-strong);
  line-height: 1;
  margin: 0;
}
.mock-welcome-sub {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
  margin: 0.3rem 0 0.9rem;
}
.mock-welcome-tagline {
  color: var(--mock-text-dim);
  font-size: 0.96rem;
  margin: 0 0 1.4rem;
}
.mock-welcome-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-align: left;
}
.mock-welcome-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
}
.mock-welcome-input {
  font-family: var(--mock-font-body);
  font-size: 1.1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 11px;
  background: var(--mock-bg);
  color: var(--mock-text-strong);
  border: 1px solid var(--mock-border-hi);
  -webkit-appearance: none;
  appearance: none;
}
.mock-welcome-input:focus {
  border-color: var(--mock-lime);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.18);
}
.mock-welcome-submit {
  margin-top: 0.4rem;
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
}
.mock-welcome-fineprint {
  margin-top: 1.2rem;
  font-size: 0.74rem;
  color: var(--mock-muted);
}

/* Welcome intro list — three short value-prop bullets shown on the
   very first visit, before we ask for any PINs or names. */
.mock-intro-list {
  list-style: none;
  margin: 1rem 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}
.mock-intro-list li {
  padding: 0.7rem 0.85rem;
  background: var(--mock-card);
  border: 1px solid var(--mock-border-hi);
  border-left: 3px solid var(--mock-fire);
  border-radius: 0.45rem;
}
.mock-intro-list li strong {
  display: block;
  font-family: var(--mock-font-display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--mock-fire);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-weight: 400;
}
.mock-intro-list li span {
  display: block;
  font-size: 0.88rem;
  color: var(--mock-text-dim);
  line-height: 1.45;
}

/* PIN input — wide-spaced digits to feel like a phone unlock */
.mock-welcome-pin {
  font-family: var(--mock-font-body);
  font-size: 1.6rem;
  letter-spacing: 0.6em;
  text-align: center;
  background: var(--mock-card);
  border: 1px solid var(--mock-border-hi);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--mock-text-strong);
  -webkit-text-security: disc;
  text-security: disc;
}
.mock-welcome-pin:focus {
  border-color: var(--mock-lime);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.18);
}

/* Inline error line under the form */
.mock-welcome-error {
  margin: 0.4rem 0 0;
  color: #fca5a5;
  font-size: 0.8rem;
  text-align: center;
}

/* Inline text-style buttons (back / forgot) */
.mock-welcome-link {
  background: transparent;
  border: 0;
  color: var(--mock-text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
  text-decoration: underline;
}
.mock-welcome-link:hover { color: var(--mock-text-strong); }
.mock-welcome-link-muted {
  color: var(--mock-muted);
  text-decoration: none;
}
.mock-welcome-link-muted:hover {
  color: var(--mock-text-dim);
  text-decoration: underline;
}

/* Role picker — two large tiles */
.mock-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.mock-role-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.1rem 0.8rem;
  background: var(--mock-card);
  border: 1px solid var(--mock-border-hi);
  border-radius: 0.7rem;
  color: var(--mock-text-strong);
  cursor: pointer;
  transition: transform 100ms ease, border-color 150ms ease;
}
.mock-role-btn:hover {
  transform: translateY(-2px);
  border-color: var(--mock-lime);
}
.mock-role-btn .mock-role-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mock-muted);
}
.mock-role-btn .mock-role-name {
  font-family: var(--mock-font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
.mock-role-btn.role-parent .mock-role-name { color: var(--mock-cyan); }
.mock-role-btn.role-child .mock-role-name { color: var(--mock-lime); }

/* Parent home banner — shown when parent role is signed in */
.mock-parent-banner {
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.9rem;
  background: rgba(0, 245, 212, 0.10);
  border: 1px solid rgba(0, 245, 212, 0.35);
  border-radius: 0.5rem;
  color: var(--mock-cyan);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* Demo session banner — shown on every page when role === "demo"  */
.mock-demo-banner {
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.9rem;
  background: rgba(255, 0, 110, 0.10);
  border: 1px solid rgba(255, 0, 110, 0.40);
  border-radius: 0.5rem;
  color: var(--mock-magenta);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Demo profile chip — magenta gradient so it's instantly distinct */
.mock-profile-chip.role-demo {
  background: linear-gradient(135deg, var(--mock-magenta), var(--mock-fire));
  color: var(--mock-bg);
}

/* Holiday-mode paused banner — amber tint, on every page when paused */
.mock-paused-banner {
  margin: 0 0 0.9rem;
  padding: 0.8rem 1rem;
  background: rgba(255, 179, 0, 0.10);
  border: 1px solid rgba(255, 179, 0, 0.45);
  border-radius: 0.55rem;
  color: var(--mock-fire);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.mock-paused-banner strong {
  color: var(--mock-text-strong);
  font-family: var(--mock-font-display);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-right: 0.4em;
}

/* Parent-control button variants — pause (amber) and reset (red) */
.mock-button-paused {
  background: rgba(255, 179, 0, 0.12);
  border: 1px solid rgba(255, 179, 0, 0.45);
  color: var(--mock-fire);
}
.mock-button-paused:hover { background: rgba(255, 179, 0, 0.22); }
.mock-button-warn {
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}
.mock-button-warn:hover { background: rgba(248, 113, 113, 0.24); }

/* ---- LEARN mode ---------------------------------------------------------- */

/* Home-page CTA: invitational amber card above the four mode tiles */
.mock-learn-cta {
  display: block;
  margin: 0 0 1.1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(255, 179, 0, 0.16) 0%, rgba(255, 179, 0, 0.05) 100%);
  border: 1px solid rgba(255, 179, 0, 0.40);
  border-radius: 0.8rem;
  color: var(--mock-text-strong);
  text-decoration: none;
  transition: transform 100ms ease, border-color 150ms ease;
}
.mock-learn-cta:hover { transform: translateY(-1px); border-color: rgba(255, 179, 0, 0.65); }
.mock-learn-cta-head {
  display: flex; justify-content: space-between; align-items: center;
}
.mock-learn-cta-eyebrow {
  font-family: var(--mock-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--mock-fire);
}
.mock-learn-cta-arrow {
  font-family: var(--mock-font-display);
  color: var(--mock-fire);
  font-size: 1.2rem;
}
.mock-learn-cta-title {
  display: block;
  font-family: var(--mock-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--mock-text-strong);
  margin-top: 0.4rem;
}
.mock-learn-cta-meta {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--mock-text-dim);
}

/* Subject hub on learn — reuses .mock-tile with extra "ready" badge */
.mock-learn-subject-tile { /* identical to .mock-tile */ }

/* Topic-list view on learn — "Coming soon" topics get a muted treatment */
.mock-topic-tile-soon {
  opacity: 0.78;
  border-style: dashed;
}
.mock-topic-tile-soon:hover { opacity: 1; }

/* Topic-detail layout */
.mock-learn-visual {
  margin: 0 0 1.2rem;
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mock-border-hi);
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
}
.mock-learn-visual svg {
  max-width: 100%;
  height: auto;
}
.mock-learn-article {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.mock-learn-section {
  background: var(--mock-card);
  border: 1px solid var(--mock-border-hi);
  border-radius: 0.7rem;
  padding: 1rem 1.1rem;
}
.mock-learn-heading {
  font-family: var(--mock-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--mock-fire);
  margin: 0 0 0.5rem;
}
.mock-learn-body {
  margin: 0 0 0.6rem;
  color: var(--mock-text-dim);
  line-height: 1.6;
  font-size: 0.95rem;
}
.mock-learn-body:last-child { margin-bottom: 0; }
.mock-learn-list {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--mock-text-dim);
  line-height: 1.55;
  font-size: 0.94rem;
}
.mock-learn-list li::marker { color: var(--mock-lime); }

/* Tips section — distinct scarlet-tinted treatment */
.mock-learn-tips {
  background: linear-gradient(135deg, rgba(255, 61, 0, 0.10) 0%, rgba(255, 179, 0, 0.05) 100%);
  border: 1px solid rgba(255, 61, 0, 0.35);
  border-radius: 0.7rem;
  padding: 1rem 1.1rem;
}
.mock-learn-tips .mock-learn-heading { color: var(--mock-lime); }
.mock-learn-tips-list li {
  font-style: italic;
  color: var(--mock-text-strong);
}

/* Bottom CTA: drill-this-topic + back */
section.mock-learn-cta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 1.5rem;
  background: none;
  border: none;
  padding: 0;
}

/* CGP-style visual content blocks — callout, worked example, quickfact,
   inline section visual. Each is its own component with distinct visual
   tone so a topic page reads as varied panels rather than a wall of text. */

/* Callout — amber tip box, blue note box, red warning box */
.mock-learn-callout {
  margin: 0.7rem 0;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border-left: 3px solid var(--mock-fire);
  background: rgba(255, 179, 0, 0.10);
}
.mock-learn-callout.mock-learn-callout-warn {
  border-left-color: #fca5a5;
  background: rgba(248, 113, 113, 0.10);
}
.mock-learn-callout.mock-learn-callout-note {
  border-left-color: var(--mock-cyan);
  background: rgba(0, 245, 212, 0.08);
}
.mock-learn-callout-title {
  font-family: var(--mock-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--mock-fire);
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}
.mock-learn-callout.mock-learn-callout-warn .mock-learn-callout-title { color: #fca5a5; }
.mock-learn-callout.mock-learn-callout-note .mock-learn-callout-title { color: var(--mock-cyan); }
.mock-learn-callout-body {
  margin: 0;
  color: var(--mock-text-strong);
  line-height: 1.55;
  font-size: 0.94rem;
}
.mock-learn-callout-body + .mock-learn-callout-body { margin-top: 0.4rem; }

/* Worked example — numbered steps in a cyan box */
.mock-learn-example {
  margin: 0.7rem 0;
  padding: 0.85rem 1rem;
  background: rgba(0, 245, 212, 0.06);
  border: 1px solid rgba(0, 245, 212, 0.30);
  border-radius: 0.55rem;
}
.mock-learn-example-title {
  font-family: var(--mock-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mock-cyan);
  margin: 0 0 0.55rem;
}
.mock-learn-example-steps {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0;
  color: var(--mock-text-dim);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.94rem;
  line-height: 1.55;
}
.mock-learn-example-steps li::marker { color: var(--mock-cyan); font-weight: 700; }
.mock-learn-example-outro {
  margin-top: 0.6rem !important;
  font-style: italic;
}

/* Quickfact — single big-number highlight, scarlet/magenta gradient */
.mock-learn-quickfact {
  margin: 0.7rem 0;
  padding: 1.2rem 1rem;
  background: linear-gradient(135deg, rgba(255, 61, 0, 0.14) 0%, rgba(255, 0, 110, 0.08) 100%);
  border: 1px solid rgba(255, 61, 0, 0.40);
  border-radius: 0.7rem;
  text-align: center;
}
.mock-learn-quickfact-value {
  display: block;
  font-family: var(--mock-font-display);
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--mock-text-strong);
  text-shadow: 0 0 18px rgba(255, 61, 0, 0.35);
}
.mock-learn-quickfact-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: var(--mock-text-dim);
}

/* Inline section visual — smaller padding than top-level visual */
.mock-learn-section-visual {
  margin: 0.7rem 0;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--mock-border);
  border-radius: 0.55rem;
  display: grid;
  place-items: center;
}
.mock-learn-section-visual svg { max-width: 100%; height: auto; }

/* Coach role badge — sits above the dashGreeting line */
.mock-coach-role-badge {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0.18rem 0.55rem;
  border-radius: 0.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.mock-coach-role-badge.is-parent {
  background: rgba(0, 245, 212, 0.15);
  color: var(--mock-cyan);
  border: 1px solid rgba(0, 245, 212, 0.4);
}
.mock-coach-role-badge.is-child {
  background: rgba(255, 61, 0, 0.15);
  color: var(--mock-lime);
  border: 1px solid rgba(255, 61, 0, 0.4);
}

/* Onboarding tour — child only, first sign-in */
.mock-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.92);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  animation: mockTourFade 220ms ease;
}
@keyframes mockTourFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mock-tour-card {
  max-width: 360px;
  width: 100%;
  background: linear-gradient(160deg, var(--mock-card) 0%, var(--mock-card-hi) 100%);
  border: 1px solid var(--mock-border-hi);
  border-radius: 1rem;
  padding: 1.6rem 1.4rem 1.2rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: mockTourPop 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mockTourPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.mock-tour-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.mock-tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mock-border-hi);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.mock-tour-dot.active {
  background: var(--mock-lime);
  box-shadow: 0 0 10px rgba(255, 61, 0, 0.55);
}
.mock-tour-title {
  margin: 0 0 0.7rem;
  font-family: var(--mock-font-display);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: var(--mock-text-strong);
}
.mock-tour-body {
  margin: 0 0 1.3rem;
  color: var(--mock-text-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}
.mock-tour-next {
  width: 100%;
  margin: 0 0 0.5rem;
}
.mock-tour-skip {
  background: transparent;
  border: 0;
  color: var(--mock-muted);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}
.mock-tour-skip:hover { color: var(--mock-text-dim); }
.mock-tour-bullets {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mock-tour-bullets li {
  padding: 0.55rem 0.8rem 0.55rem 2.1rem;
  background: rgba(255, 61, 0, 0.06);
  border: 1px solid rgba(255, 61, 0, 0.20);
  border-radius: 0.45rem;
  color: var(--mock-text-dim);
  font-size: 0.92rem;
  line-height: 1.4;
  position: relative;
}
.mock-tour-bullets li::before {
  content: "▸";
  position: absolute;
  left: 0.85rem;
  top: 0.55rem;
  color: var(--mock-lime);
  font-weight: 700;
}
.mock-tour-bullets li strong {
  color: var(--mock-text-strong);
  font-family: var(--mock-font-display);
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-right: 0.2em;
}

/* Resume in-flight session prompt — shown if a refresh interrupted a run */
.mock-resume-card {
  text-align: center;
}
.mock-resume-meta {
  margin: 0.4rem 0 1rem;
  color: var(--mock-text-dim);
}
.mock-resume-meta strong {
  color: var(--mock-text-strong);
  font-weight: 700;
}
.mock-resume-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Coach data tools — export/import buttons + status line */
.mock-data-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.mock-data-actions label.mock-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.mock-data-msg {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--mock-text-dim);
  min-height: 1em;
}
.mock-data-msg.ok  { color: var(--mock-lime); }
.mock-data-msg.err { color: #fca5a5; }

/* "Drill your weakest" home shortcut — child only, only when 7-day
   weakness data exists. Sits above the four mode tiles. */
.mock-weakest-shortcut {
  display: block;
  margin: 0 0 1rem;
  padding: 0.95rem 1.1rem;
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.18) 0%, rgba(248, 113, 113, 0.05) 100%);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 0.75rem;
  color: var(--mock-text-strong);
  text-decoration: none;
  transition: transform 100ms ease, border-color 150ms ease;
}
.mock-weakest-shortcut:hover {
  transform: translateY(-1px);
  border-color: rgba(248, 113, 113, 0.65);
}
.mock-weakest-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mock-weakest-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fca5a5;
  font-weight: 700;
}
.mock-weakest-arrow {
  font-family: var(--mock-font-display);
  color: #fca5a5;
  font-size: 1.2rem;
}
.mock-weakest-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.45rem;
}
.mock-weakest-subject {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--mock-muted);
  text-transform: uppercase;
}
.mock-weakest-topic {
  font-family: var(--mock-font-display);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: var(--mock-text-strong);
}
.mock-weakest-meta {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--mock-text-dim);
}

/* Tappable weak-topic rows in Coach (child only) */
.mock-coach-row-link {
  padding: 0;
}
.mock-coach-row-anchor {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.4rem;
  transition: background 120ms ease;
}
.mock-coach-row-anchor:hover {
  background: rgba(255, 61, 0, 0.08);
}
.mock-coach-row-anchor::after {
  content: "→";
  color: var(--mock-muted);
  margin-left: 0.4rem;
}

/* Listen controls — pill row with normal + slow playback buttons */
.mock-listen-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.6rem;
}
.mock-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  background: rgba(0, 245, 212, 0.10);
  border: 1px solid rgba(0, 245, 212, 0.45);
  border-radius: 999px;
  color: var(--mock-cyan);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease, transform 100ms ease;
}
.mock-listen-btn:hover  { background: rgba(0, 245, 212, 0.18); transform: translateY(-1px); }
.mock-listen-btn:active { transform: translateY(0); }
.mock-listen-icon { font-size: 1.05rem; }
.mock-listen-btn-slow {
  background: rgba(255, 179, 0, 0.10);
  border-color: rgba(255, 179, 0, 0.45);
  color: var(--mock-fire);
}
.mock-listen-btn-slow:hover { background: rgba(255, 179, 0, 0.20); }

/* Skip-this-question link — used on spell + speak so the kid isn't
   stuck on a stubborn STT result or an unfamiliar phrase. Recorded as
   "wrong" so spaced-repetition resurfaces the question soon. */
.mock-skip-question {
  background: transparent;
  border: 0;
  color: var(--mock-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  margin-top: 0.2rem;
  text-decoration: underline;
}
.mock-skip-question:hover { color: var(--mock-text-dim); }

/* Spelling/typing question input (French listen-and-type) */
.mock-spell-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.mock-spell-input {
  font-family: var(--mock-font-body);
  font-size: 1.1rem;
  background: var(--mock-card);
  border: 1px solid var(--mock-border-hi);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--mock-text-strong);
}
.mock-spell-input:focus {
  border-color: var(--mock-lime);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.18);
}
.mock-spell-input:disabled {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.02);
}

/* Correct feedback (match the existing .wrong feedback style) */
.mock-session-feedback.correct {
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 61, 0, 0.10);
  border: 1px solid rgba(255, 61, 0, 0.4);
  border-radius: 0.5rem;
  color: var(--mock-text-strong);
  font-size: 0.92rem;
}
.mock-session-feedback.correct strong { color: var(--mock-lime); }

/* Speaking question — Duolingo-style mic UI */
.mock-speak-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0;
}
.mock-mic-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(0, 245, 212, 0.10);
  border: 2px solid var(--mock-cyan);
  color: var(--mock-cyan);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.6rem 0;
  transition: transform 100ms ease, background 150ms ease;
}
.mock-mic-btn:hover { transform: translateY(-2px); }
.mock-mic-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.mock-mic-btn.recording {
  background: rgba(248, 113, 113, 0.18);
  border-color: #fca5a5;
  color: #fca5a5;
  animation: mockMicPulse 1.4s ease-in-out infinite;
}
@keyframes mockMicPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(248, 113, 113, 0.45); }
  50%      { box-shadow: 0 0 0 18px rgba(248, 113, 113, 0); }
}
.mock-mic-icon { font-size: 2.1rem; }
.mock-mic-label { font-size: 0.78rem; }
.mock-speak-status {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--mock-text-dim);
  min-height: 1.2em;
}
.mock-speak-heard {
  font-style: italic;
  color: var(--mock-muted);
  font-size: 0.85rem;
}
.mock-speak-fallback {
  margin-top: 0.6rem;
}

/* ---- Coach calendar heatmap (last 6 weeks) ------------------------------- */
.mock-cal-grid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  font-size: 0.62rem;
  color: var(--mock-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0.4rem 0 0.35rem;
}
.mock-cal-dow { text-align: center; }
.mock-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.mock-cal-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.045);
  transition: transform 100ms ease;
}
.mock-cal-cell:hover { transform: scale(1.08); }
.mock-cal-cell.cal-0 { background: rgba(255, 255, 255, 0.045); }
.mock-cal-cell.cal-1 { background: rgba(255, 61, 0, 0.20); }
.mock-cal-cell.cal-2 { background: rgba(255, 61, 0, 0.45); }
.mock-cal-cell.cal-3 { background: rgba(255, 61, 0, 0.70); }
.mock-cal-cell.cal-4 { background: rgba(255, 61, 0, 0.95); }
.mock-cal-cell.is-today {
  outline: 2px solid var(--mock-text-strong);
  outline-offset: -1px;
}
.mock-cal-cell.is-future {
  background: transparent;
  border: 1px dashed var(--mock-border-hi);
}
.mock-cal-legend {
  margin-top: 0.7rem;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.7rem;
  color: var(--mock-muted);
}
.mock-cal-legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.mock-cal-legend-cell.cal-0 { background: rgba(255, 255, 255, 0.045); }
.mock-cal-legend-cell.cal-1 { background: rgba(255, 61, 0, 0.20); }
.mock-cal-legend-cell.cal-2 { background: rgba(255, 61, 0, 0.45); }
.mock-cal-legend-cell.cal-3 { background: rgba(255, 61, 0, 0.70); }
.mock-cal-legend-cell.cal-4 { background: rgba(255, 61, 0, 0.95); }
.mock-cal-legend-text { padding: 0 0.25rem; }

/* ---- GradeBlaze brand: logo + wordmark + welcome treatment ---------------
   Restrained Inferno: glow + pulse on arrival surfaces only. Resting UI
   stays calmer. Brand mark uses the inline SVG flame logo from
   assets/logo.svg for a single source of truth. */

.gb-logo-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}
.gb-logo-mark.gb-mark-md   { width: 56px;  height: 56px;  }
.gb-logo-mark.gb-mark-lg   { width: 96px;  height: 96px;  }
.gb-logo-mark.gb-mark-xl   { width: 140px; height: 140px; }

/* Subtle pulse — alive but not distracting. ~3.6s cycle, gentle filter
   shift only. Disabled if user prefers reduced motion. */
@keyframes gbPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(255, 61, 0, 0.32)); }
  50%      { transform: scale(1.03); filter: drop-shadow(0 0 18px rgba(255, 61, 0, 0.55)); }
}
.gb-logo-mark.gb-alive { animation: gbPulse 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .gb-logo-mark.gb-alive { animation: none; }
}

/* Two-tone wordmark: Grade in white, Blaze in scarlet — matches the brand
   plate. Uses the display font (Anton) for the tall, blocky energy. */
.gb-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--mock-font-display);
  letter-spacing: 0.04em;
  line-height: 1;
}
.gb-wordmark .gb-grade { color: var(--mock-text-strong); }
.gb-wordmark .gb-blaze { color: var(--mock-lime); text-shadow: 0 0 18px rgba(255, 61, 0, 0.35); }
.gb-wordmark.gb-wordmark-sm { font-size: 1.4rem; }
.gb-wordmark.gb-wordmark-md { font-size: 2rem;   }
.gb-wordmark.gb-wordmark-lg { font-size: 2.8rem; }
.gb-wordmark.gb-wordmark-xl { font-size: 3.6rem; }

/* Header lockup: small flame + small wordmark. */
.gb-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}

/* Welcome screen lockup: large flame + large wordmark + tagline. */
.gb-welcome-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.gb-tagline {
  font-family: var(--mock-font-display);
  font-size: 0.92rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mock-fire);
  margin: 0;
}

/* ---------- GREETING + PROFILE CHIP + STUB NAME ---------- */

.mock-greeting {
  margin: 0 0 0.7rem;
  color: var(--mock-text-dim);
  font-size: 0.95rem;
  font-weight: 500;
}

.mock-profile-chip {
  margin-left: 0.4rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mock-lime), var(--mock-cyan));
  color: var(--mock-bg);
  border: 1px solid var(--mock-border-hi);
  font-family: var(--mock-font-display);
  font-size: 1rem;
  letter-spacing: 0;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: transform 100ms ease;
}
.mock-profile-chip:hover, .mock-profile-chip:focus {
  transform: scale(1.05);
  outline: none;
}

.mock-profile-wrap {
  position: relative;
  display: inline-block;
}
.mock-profile-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 220px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--mock-border-hi);
  border-radius: 0.6rem;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 50;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}
.mock-profile-panel-name {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mock-text-dim);
}
.mock-profile-panel-name strong {
  color: var(--mock-text-strong);
  font-weight: 700;
}
.mock-profile-signout {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.45);
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.mock-profile-signout:hover { background: rgba(248, 113, 113, 0.26); }
.mock-profile-cancel {
  background: transparent;
  color: var(--mock-text-strong);
  border: 1px solid var(--mock-border-hi);
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  cursor: pointer;
  text-align: center;
}
.mock-profile-cancel:hover { background: rgba(255, 255, 255, 0.04); }
.mock-profile-warn {
  margin: 0;
  font-size: 0.7rem;
  color: var(--mock-muted);
  line-height: 1.35;
}

.mock-stub-name {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
}

/* ---------- LADDER BADGES (Developing / Secure / Extending / Accomplished) ---------- */

.mock-ladder {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.mock-ladder.mock-ladder-large {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  padding: 0.34rem 0.85rem;
}
.ladder-developing {
  color: var(--mock-muted);
  border-color: var(--mock-border-hi);
  background: rgba(148, 163, 184, 0.08);
}
.ladder-secure {
  color: var(--mock-lime);
  border-color: var(--mock-lime);
  background: var(--mock-lime-soft);
}
.ladder-extending {
  color: var(--mock-cyan);
  border-color: var(--mock-cyan);
  background: rgba(0, 245, 212, 0.10);
}
.ladder-accomplished {
  color: var(--mock-fire);
  border-color: var(--mock-fire);
  background: rgba(251, 191, 36, 0.12);
}

/* ---------- SUBJECT HUB ---------- */

.mock-subject-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
  margin: 0.7rem 0 1rem;
}
.mock-subject-stat {
  font-size: 0.82rem;
  color: var(--mock-text-dim);
}
.mock-subject-sprint {
  display: inline-block;
  margin-top: 0.3rem;
}

.mock-topic-tiles {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.mock-topic-tile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem;
  background: var(--mock-card);
  border: 1px solid var(--mock-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 90ms ease, border-color 90ms ease, background 90ms ease;
}
.mock-topic-tile:hover, .mock-topic-tile:focus {
  border-color: var(--mock-border-hi);
  background: var(--mock-card-hi);
  transform: translateY(-1px);
  outline: none;
}
.mock-topic-tile-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.mock-topic-tile-name { font-weight: 600; color: var(--mock-text-strong); font-size: 1rem; }
.mock-topic-tile-meta { font-size: 0.78rem; color: var(--mock-muted); }
.mock-topic-tile-arrow { color: var(--mock-muted); font-size: 1.15rem; flex-shrink: 0; }
.mock-topic-tile:hover .mock-topic-tile-arrow {
  color: var(--mock-lime);
  transform: translateX(2px);
}

.mock-back-row { margin: 1.2rem 0; }

/* ---------- RESULT LADDER ROW ---------- */

.mock-result-ladder-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--mock-text-dim);
  flex-wrap: wrap;
}

/* ---------- TODAY'S LESSONS STRIP (landing) ---------- */

.mock-today {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--mock-card);
  border: 1px solid var(--mock-border);
  border-radius: var(--mock-radius);
  padding: 0.95rem 1.05rem;
  margin-bottom: 1.2rem;
}
.mock-today-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.mock-today-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mock-muted);
  font-weight: 700;
}
.mock-today-day {
  font-family: var(--mock-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--mock-text-strong);
}
.mock-today-chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.mock-today-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--mock-bg);
  border: 1px solid var(--mock-border-hi);
  color: var(--mock-text);
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 90ms ease, color 90ms ease, background 90ms ease;
}
.mock-today-chip:hover, .mock-today-chip:focus {
  border-color: var(--mock-lime);
  color: var(--mock-lime);
  background: var(--mock-lime-soft);
  outline: none;
}
.mock-today-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mock-muted);
}

/* ---------- VISUAL DIAGRAMS (in question card) ---------- */

.mock-session-visual {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--mock-border);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  margin: 0;
  color: var(--mock-text-dim);
}
.mock-visual-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}
@media (max-width: 380px) {
  .mock-visual-svg { max-height: 170px; }
}