/* =========================================================================
   Medalhei SP — design system
   Borrowed familiarity: the apostila. A printed study booklet the student
   already knows, rebuilt for a phone. Paper surface, ruled margin, numbered
   lessons, dates written out in words. Identity comes from Medalhei's ink
   (navy) and jersey (podium flare) and from Sora. Nothing else decorates.
   Full rationale in DESIGN.md.
   ========================================================================= */

/* --- Tokens: light (default) -------------------------------------------- */
:root {
  color-scheme: light;

  --paper: oklch(0.984 0.006 60);
  --paper-sunken: oklch(0.962 0.009 58);
  --paper-raised: oklch(1 0 0);
  --rule: oklch(0.906 0.012 56);
  --rule-strong: oklch(0.845 0.016 54);

  --ink: oklch(0.24 0.045 262);
  --ink-soft: oklch(0.505 0.031 264);
  --ink-faint: oklch(0.66 0.024 266);

  --accent: oklch(0.663 0.227 36);
  --accent-press: oklch(0.582 0.203 34);
  --accent-ink: oklch(0.505 0.176 34);
  --accent-wash: oklch(0.955 0.035 46);

  --done: oklch(0.535 0.128 156);
  --done-wash: oklch(0.955 0.032 158);
  --wrong: oklch(0.545 0.198 25);
  --wrong-wash: oklch(0.958 0.028 26);

  --on-accent: oklch(1 0 0);
  --thumb: oklch(0.955 0.035 46);
  --hero: oklch(0.275 0.052 262);
  --hero-fg: oklch(0.98 0.006 60);
  --lift: 0 1px 2px oklch(0.24 0.045 262 / 0.06), 0 6px 18px oklch(0.24 0.045 262 / 0.07);
  --lift-high: 0 2px 4px oklch(0.24 0.045 262 / 0.08), 0 16px 40px oklch(0.24 0.045 262 / 0.14);

  /* Type: fixed rem, ratio ~1.2, one step larger than a typical product UI.
     The reader may be 11 years old on a 5-inch screen. */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 1.875rem;
  --t-3xl: 2.5rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --r-control: 10px;
  --r-surface: 14px;
  --r-pill: 999px;

  --tap: 52px;
  --fast: 160ms;
  --slow: 240ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --page: 34rem;
}

/* --- Tokens: dark ------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: oklch(0.238 0.062 269);
  --paper-sunken: oklch(0.212 0.056 269);
  --paper-raised: oklch(0.287 0.087 269);
  --rule: oklch(0.365 0.082 269);
  --rule-strong: oklch(0.44 0.095 270);

  --ink: oklch(0.972 0.008 268);
  --ink-soft: oklch(0.755 0.055 270);
  --ink-faint: oklch(0.63 0.06 270);

  --accent: oklch(0.72 0.19 40);
  --accent-press: oklch(0.66 0.2 37);
  --accent-ink: oklch(0.78 0.15 45);
  --accent-wash: oklch(0.31 0.055 40);

  --done: oklch(0.76 0.185 156);
  --done-wash: oklch(0.32 0.075 160);
  --wrong: oklch(0.7 0.19 22);
  --wrong-wash: oklch(0.33 0.09 22);

  --on-accent: oklch(0.18 0.03 40);
  --thumb: oklch(0.33 0.045 269);
  --hero: oklch(0.325 0.088 269);
  --hero-fg: oklch(0.98 0.008 268);
  --lift: none;
  --lift-high: 0 20px 48px oklch(0.12 0.03 269 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: oklch(0.238 0.062 269);
    --paper-sunken: oklch(0.212 0.056 269);
    --paper-raised: oklch(0.287 0.087 269);
    --rule: oklch(0.365 0.082 269);
    --rule-strong: oklch(0.44 0.095 270);
    --ink: oklch(0.972 0.008 268);
    --ink-soft: oklch(0.755 0.055 270);
    --ink-faint: oklch(0.63 0.06 270);
    --accent: oklch(0.72 0.19 40);
    --accent-press: oklch(0.66 0.2 37);
    --accent-ink: oklch(0.78 0.15 45);
    --accent-wash: oklch(0.31 0.055 40);
    --done: oklch(0.76 0.185 156);
    --done-wash: oklch(0.32 0.075 160);
    --wrong: oklch(0.7 0.19 22);
    --wrong-wash: oklch(0.33 0.09 22);
    --on-accent: oklch(0.18 0.03 40);
    --thumb: oklch(0.33 0.045 269);
    --hero: oklch(0.325 0.088 269);
    --hero-fg: oklch(0.98 0.008 268);
    --lift: none;
    --lift-high: 0 20px 48px oklch(0.12 0.03 269 / 0.6);
  }
}

/* --- Base --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1 {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.3;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-control) 0;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* Numbers a student tracks always render as a scoreboard, never reflowing. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-base);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
    color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--accent-press);
}

.btn:active:not(:disabled) {
  opacity: 0.82;
}

.btn:disabled {
  cursor: not-allowed;
  background: var(--paper-sunken);
  color: var(--ink-faint);
}

.btn.quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn.quiet:hover:not(:disabled) {
  background: var(--paper-sunken);
  border-color: var(--ink-faint);
}

.btn.plain {
  width: auto;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  color: var(--accent-ink);
  font-weight: 600;
}

.btn.plain:hover:not(:disabled) {
  background: var(--accent-wash);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink-soft);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.icon-btn:hover {
  background: var(--paper-sunken);
  color: var(--ink);
}

.btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Forms -------------------------------------------------------------- */
.field {
  display: block;
  margin-bottom: var(--sp-4);
}

.field > span {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-control);
  background: var(--paper-raised);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.field textarea {
  min-height: 108px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.663 0.227 36 / 0.25);
}

.hint {
  margin-top: var(--sp-2);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.alert {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-control);
  background: var(--wrong-wash);
  color: var(--wrong);
  font-size: var(--t-sm);
  font-weight: 500;
}

/* --- Auth / onboarding page --------------------------------------------- */
.page {
  width: min(var(--page), 100%);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.logo {
  height: 30px;
}

.logo-light {
  display: none;
}

:root[data-theme="dark"] .logo-dark {
  display: none;
}

:root[data-theme="dark"] .logo-light {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-dark {
    display: none;
  }
  :root:not([data-theme]) .logo-light {
    display: block;
  }
}

.lede {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  max-width: 34ch;
}

.form {
  margin-top: var(--sp-6);
}

.switcher {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

/* --- Progress ----------------------------------------------------------- */
.meter {
  display: block;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--paper-sunken);
  overflow: hidden;
}

.meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--slow) var(--ease);
}

.meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

/* --- Question ----------------------------------------------------------- */
.question {
  margin: var(--sp-6) 0 var(--sp-5);
}

.options {
  display: grid;
  gap: var(--sp-3);
}

.option {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-control);
  background: var(--paper-raised);
  color: var(--ink);
  text-align: left;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.35;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.option:hover:not(:disabled) {
  border-color: var(--ink-faint);
}

.option .letter {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--paper-sunken);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 700;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.option[aria-pressed="true"] .letter {
  background: var(--accent);
  color: var(--on-accent);
}

.option.right {
  border-color: var(--done);
  background: var(--done-wash);
}

.option.right .letter {
  background: var(--done);
  color: var(--paper);
}

.option.miss {
  border-color: var(--wrong);
  background: var(--wrong-wash);
}

.option.miss .letter {
  background: var(--wrong);
  color: var(--paper);
}

.verdict {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-control);
  background: var(--paper-sunken);
}

.verdict strong {
  display: block;
  margin-bottom: var(--sp-1);
}

.verdict.right strong {
  color: var(--done);
}

.verdict.miss strong {
  color: var(--wrong);
}

/* --- Badge -------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--paper-sunken);
  color: var(--ink-soft);
  font-size: var(--t-xs);
  font-weight: 600;
}

.badge.gain {
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.badge.ok {
  background: var(--done-wash);
  color: var(--done);
}

/* --- App shell ---------------------------------------------------------- */
.shell {
  min-height: 100dvh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.xp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: box-shadow var(--slow) var(--ease);
}

.xp svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Reward signal: fires only when XP was just earned, then fades. */
.xp.earned {
  box-shadow: 0 0 0 4px oklch(0.663 0.227 36 / 0.24), 0 0 26px oklch(0.663 0.227 36 / 0.45);
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar button {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 60px;
  padding: var(--sp-2);
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  font-weight: 600;
  transition: color var(--fast) var(--ease);
}

.tabbar button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabbar button[aria-current="page"] {
  color: var(--accent-ink);
}

.section-title {
  margin: var(--sp-5) 0 var(--sp-3);
}

/* --- Trails ------------------------------------------------------------- */
.greeting {
  margin-bottom: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

/* The one focal point on the screen: whichever trail the student is mid-way
   through. Everything else on this page is deliberately quieter than it. */
.hero {
  position: relative;
  display: block;
  width: 100%;
  min-height: 232px;
  padding: var(--sp-5);
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, oklch(0.42 0.12 40 / 0.5), transparent 62%),
    var(--hero);
  color: var(--hero-fg);
  text-align: left;
  transition: transform var(--fast) var(--ease);
}

.hero:active {
  transform: scale(0.99);
}

.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim, not decoration: the cover art is arbitrary, the title has to stay
   readable on top of it. */
.hero > img + .hero-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.2 0.04 262 / 0.92), oklch(0.2 0.04 262 / 0.35));
}

.hero-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5);
}

.hero-body > * {
  position: relative;
}

.eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.82 0.14 45);
}

.hero-title {
  display: block;
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero .meter {
  margin-top: var(--sp-4);
  background: oklch(1 0 0 / 0.24);
}

.hero .meter-row {
  margin: var(--sp-3) 0 0;
  color: oklch(1 0 0 / 0.82);
}

/* The rest of the trails: compact rows, no boxes, so the hero keeps the
   attention and the page stops reading as a stack of equal rectangles. */
.trails {
  display: grid;
  gap: 0;
  margin-top: var(--sp-5);
}

.trail {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  text-align: left;
}

.trails > .trail:last-child {
  border-bottom: 0;
}

.thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--thumb);
  color: var(--accent-ink);
  font-size: var(--t-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trail-title {
  display: block;
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.012em;
}

.trail-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.trail:hover .trail-title {
  color: var(--accent-ink);
}

/* The lesson run: a ruled spine with numbered stops, the way a printed
   apostila lists its chapters. Deliberately not a grid of cards. */
.lessons {
  position: relative;
  margin: var(--sp-5) 0 0;
  padding: 0 0 0 var(--sp-7);
  list-style: none;
}

.lessons::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--rule);
}

.lesson {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--sp-4) 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  text-align: left;
}

.lessons > li:last-child .lesson {
  border-bottom: 0;
}

.lesson::before {
  content: attr(data-step);
  position: absolute;
  left: calc(-1 * var(--sp-7));
  /* Optically centred on the title's first line, not on the row box. */
  top: calc(var(--sp-4) - 5px);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lesson[data-state="done"]::before {
  content: "✓";
  border-color: var(--done);
  background: var(--done);
  color: var(--paper);
}

.lesson[data-state="open"]::before {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.lesson[data-state="locked"] {
  cursor: default;
}

.lesson[data-state="locked"] .lesson-title {
  color: var(--ink-soft);
}

.lesson-title {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.lesson:not([data-state="locked"]):hover .lesson-title {
  color: var(--accent-ink);
}

/* --- Content viewer (a route, not a modal) ------------------------------ */
.viewer {
  min-height: 100dvh;
  background: var(--paper);
}

.viewer-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.viewer-bar strong {
  font-size: var(--t-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-body {
  width: min(var(--page), 100%);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-7);
}

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-surface);
  overflow: hidden;
  background: var(--paper-sunken);
}

.frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pdf {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.pdf canvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: oklch(1 0 0);
}

.pdf-status {
  padding: var(--sp-5);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-surface);
  text-align: center;
  color: var(--ink-soft);
}

.finish {
  position: sticky;
  bottom: var(--sp-4);
  margin-top: var(--sp-5);
}

/* --- Forum -------------------------------------------------------------- */
.thread-title {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.topics {
  display: grid;
  gap: 0;
  margin-top: var(--sp-2);
}

.topic {
  display: block;
  width: 100%;
  padding: var(--sp-4) 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  text-align: left;
}

.topic-title {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.35;
}

.topic:hover .topic-title {
  color: var(--accent-ink);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.thread {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}

.reply {
  padding: var(--sp-4);
  border-radius: var(--r-surface);
  background: var(--paper-sunken);
}

.reply.mentor {
  border: 1.5px solid var(--accent);
  padding: calc(var(--sp-4) - 1.5px);
}

.reply.mentor .who {
  color: var(--accent-ink);
}

.reply .byline {
  margin: 0 0 var(--sp-2);
}

.reply .byline .who {
  font-weight: 700;
  color: var(--ink);
}

.composer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.empty {
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-surface);
  text-align: center;
  color: var(--ink-soft);
}

.empty strong {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--ink);
  font-size: var(--t-lg);
}

/* --- Skeletons ---------------------------------------------------------- */
.skeleton {
  border-radius: var(--r-control);
  background: var(--paper-sunken);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton + .skeleton {
  margin-top: var(--sp-3);
}

@keyframes pulse {
  50% {
    opacity: 0.55;
  }
}

/* --- Forum images ------------------------------------------------------- */
.post-image {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  border-radius: var(--r-control);
  border: 1px solid var(--rule);
}

.attach {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.attach input[type="file"] {
  display: none;
}

.attach-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.attach-label:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.attach-label svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attach-preview {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--r-control);
  overflow: hidden;
  flex: 0 0 auto;
}

.attach-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attach-preview button {
  position: absolute;
  inset: auto 0 0 0;
  border: 0;
  background: oklch(0.2 0.04 262 / 0.78);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 2px 0;
}

/* --- The one celebration in the system ---------------------------------- */
.moment {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: oklch(0.16 0.035 262 / 0.9);
  animation: moment-in 220ms var(--ease) both;
}

.moment-card {
  width: min(24rem, 100%);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: 24px;
  background: var(--hero);
  color: var(--hero-fg);
  text-align: center;
  animation: moment-rise 320ms var(--ease) both;
}

.medal {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-4);
  /* Reward glow: fires on a real win, then holds while the card is open. */
  filter: drop-shadow(0 0 22px oklch(0.663 0.227 36 / 0.55));
  animation: medal-in 460ms var(--ease) both;
}

.moment-xp {
  display: block;
  font-family: "Bowlby One", Impact, var(--display-fallback, sans-serif);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: oklch(0.82 0.16 55);
  font-variant-numeric: tabular-nums;
}

.moment-xp i {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: 0.55em;
}

.moment-title {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--t-lg);
  font-weight: 700;
}

.moment-sub {
  display: block;
  margin-top: var(--sp-2);
  color: oklch(1 0 0 / 0.72);
  font-size: var(--t-sm);
}

.moment .btn {
  margin-top: var(--sp-5);
}

@keyframes moment-in {
  from { opacity: 0; }
}

@keyframes moment-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}

@keyframes medal-in {
  from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
}

/* --- Toast -------------------------------------------------------------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 60;
  width: min(30rem, calc(100% - 32px));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: center;
  box-shadow: var(--lift-high);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.aviso.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Wider screens: the booklet gets margins, never a dashboard --------- */
@media (min-width: 48rem) {
  :root {
    --page: 40rem;
  }

  .shell {
    padding-bottom: var(--sp-7);
  }

  .tabbar {
    position: sticky;
    top: 0;
    bottom: auto;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: var(--sp-5);
    border-top: 0;
    border-bottom: 1px solid var(--rule);
  }

  .tabbar button {
    grid-auto-flow: column;
    align-items: center;
    gap: var(--sp-2);
    min-height: 52px;
    font-size: var(--t-sm);
  }

  .aviso {
    bottom: var(--sp-4);
  }
}

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