/* =============================================================================
   BayRen shared UI — the estate's ONE stylesheet (directive v2 §22).
   Synced from BayRen Platform/core/ui/main.css by sync_core.sh — EDIT THERE,
   never the per-app copies (same rule as bayren_gate.py).

   Two sections, ON PURPOSE:
     1. the older fork's components (auth forms, admin tables, feature grids…)
        that the practice apps' unique screens still use;
     2. the Academy system (Grammar's lineage) LAST, so every component both
        sections define takes the Academy look — the cascade is the upgrade.
   Fonts are self-hosted per app under static/fonts/ with identical filenames.
   ========================================================================== */

/* ── Section 1: practice-app components (kept so no screen loses styling) ── */
/* ═══════════════════════════════════════════════════════════════════════════
   BayRen Reading — Design System
   The brand's sunrise motif: deep navy water, rising gold sun. Warm paper
   surfaces, Playfair display type, disciplined gold accents. Self-hosted
   fonts, zero inline styles (strict CSP).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, no CDN) ─────────────────────────────────────────── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/noto-sans-bengali-var.woff2') format('woff2');
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}

/* The design system's display face (4 Sep 2026). The mock and the Academy
   already read in Cormorant while these five apps read in Playfair, so the
   estate had two serifs. Declared here for all of them; nothing downloads it
   until an app opts into the skin at the end of this file and --font-display
   moves onto it. sync_core.sh copies both files in beside main.css. */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/cormorant-garamond-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy-950: #040f1d;
  --navy-900: #061626;
  --navy-800: #08203a;
  --navy-700: #0d3157;
  --navy:     #0b2a49;           /* the sea */
  --navy-100: #dfe7f0;
  --navy-50:  #eef2f7;
  --gold-700: #b08e30;
  --gold-600: #c6a03c;
  --gold:     #d8b04c;           /* the sun */
  --gold-300: #ecd79a;
  --gold-100: #f7ecce;
  --gold-50:  #fbf6e7;

  /* Semantic */
  --bg:          #ffffff;        /* white — Asaf, 2 Sep 2026: never off-white */
  --surface:     #ffffff;
  --panel:       #ffffff;        /* every card, quote, banner and legend — white, hairline border */
  --surface-2:   #f3f5f8;        /* inactive states only: a cool neutral, never the old beige */
  --ink:         #13233a;
  --text:        #33415a;
  --muted:       #71809b;
  --line:        #e6e2d8;
  --line-strong: #d7d2c4;
  --correct:     #1e9e60;
  --correct-bg:  #e8f7ef;
  --wrong:       #d84848;
  --wrong-bg:    #fdeeee;
  --warn:        #b07a1a;
  --warn-bg:     #fdf4e0;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, sans-serif;
  --font-bn: 'Noto Sans Bengali', 'Inter', sans-serif;

  /* Shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Depth (navy-tinted, soft and layered) */
  --shadow-xs: 0 1px 2px rgba(11,42,73,.05);
  --shadow-sm: 0 1px 3px rgba(11,42,73,.06), 0 4px 12px rgba(11,42,73,.05);
  --shadow-md: 0 2px 6px rgba(11,42,73,.05), 0 12px 32px rgba(11,42,73,.09);
  --shadow-lg: 0 6px 18px rgba(11,42,73,.08), 0 28px 64px rgba(11,42,73,.14);
  --shadow-gold: 0 8px 28px rgba(198,160,60,.30);
  --glow-gold: 0 0 0 5px rgba(216,176,76,.18);

  /* Motion */
  --ease-out: cubic-bezier(.22,.9,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .16s var(--ease-out);
  --t-med: .28s var(--ease-out);
  --t-slow: .55s var(--ease-out);

  /* Layout */
  --container: 1140px;
  --header-h: 64px;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--gold-700); }
::selection { background: var(--gold-300); color: var(--navy-900); }
code {
  font-size: .88em; background: var(--surface-2);
  padding: .12em .4em; border-radius: 6px;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.3rem); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.22rem; font-weight: 600; }
h4 { font-family: var(--font-body); font-size: .8rem; font-weight: 700;
     text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 .6em; }
p { margin: 0 0 1em; }
.bn { font-family: var(--font-bn); line-height: 1.9; }

:focus-visible {
  outline: none;
  box-shadow: var(--glow-gold), 0 0 0 2px var(--surface);
  border-radius: var(--r-xs);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 620px; margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(2.6rem, 7vw, 4.6rem) 0; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.spread.wrap, .wrap { flex-wrap: wrap; }
.center { text-align: center; }
.grid { display: grid; gap: 1.2rem; }
@media (min-width: 700px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Sunrise band ────────────────────────────────────────────────────────── */
.sunrise {
  position: relative;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(216,176,76,.32) 0%, rgba(216,176,76,.09) 46%, transparent 72%),
    linear-gradient(178deg, var(--navy-800) 0%, var(--navy) 55%, var(--navy-700) 100%);
  color: #e9eef5;
  overflow: hidden;
}
.sunrise h1, .sunrise h2 { color: #fff; }
.hl { color: var(--gold); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-300);
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold-600), transparent); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .74rem 1.55rem;
  border: none; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), color var(--t-fast);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-gold {
  background: linear-gradient(180deg, #e3bd5e 0%, var(--gold) 45%, var(--gold-600) 100%);
  color: var(--navy-900);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover {
  color: var(--navy-950);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(198,160,60,.42), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-navy {
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy) 60%, var(--navy-800) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-navy:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent; color: var(--navy-700);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn-ghost:hover { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--gold-600); }
.btn-sm { padding: .46rem 1.05rem; font-size: .85rem; }
.btn[disabled], .btn.disabled { opacity: .55; pointer-events: none; }

/* ── Cards & chips ───────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-300);
}
.card-gold-top { position: relative; overflow: hidden; }
.card-gold-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-300), var(--gold-600) 50%, var(--gold-300));
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .8rem;
  border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line);
}
.chip-navy { background: var(--navy-50); color: var(--navy-700); border-color: var(--navy-100); }
.chip-green { background: var(--correct-bg); color: var(--correct); border-color: #bfe8d2; }

/* ── Site header ─────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(6,22,38,.97), rgba(11,42,73,.94));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(216,176,76,.35);
}
.site-head .inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.logo-chip {
  width: 42px; height: 42px; border-radius: 12px;
  background: #fff; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(11,42,73,.08), var(--shadow-xs);
  padding: 3px;
}
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem;
  color: #fff; letter-spacing: .01em;
}
.head-nav { display: flex; align-items: center; gap: .4rem; }
.head-link {
  color: rgba(255,255,255,.85); font-size: .92rem; font-weight: 500;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.head-link:hover { color: #fff; background: rgba(255,255,255,.09); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0 2rem;
  margin-top: 2rem;
  color: var(--muted); font-size: .9rem;
}
.site-foot a { font-weight: 600; }
.foot-tag { font-size: .84rem; color: var(--muted); font-style: italic; }

/* ── Library hero ────────────────────────────────────────────────────────── */
.hero { text-align: center; }
.hero-inner { position: relative; z-index: 2; padding: clamp(3.2rem, 8vw, 5rem) 20px clamp(4.4rem, 9vw, 6.2rem); }
.hero h1 { margin: .9rem auto .8rem; max-width: 18ch; }
.hero .lead {
  font-size: clamp(1rem, 2vw, 1.16rem); font-weight: 300;
  color: #bccadb; max-width: 56ch; margin: 0 auto;
}
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 1; }
.hero-wave svg { width: 100%; height: 60px; display: block; }

/* ── Stats band (overlaps the wave) ──────────────────────────────────────── */
.stats-band { position: relative; z-index: 3; margin-top: -2.6rem; }
.stats-strip {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.1rem 1.5rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.stats-strip[hidden] { display: none; }
.stat { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 1.4rem; }
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-value {
  font-family: var(--font-display); font-weight: 700; font-size: 1.28rem;
  color: var(--ink); line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.stat-label { font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.stat-ring { width: 44px; height: 44px; flex: 0 0 44px; transform: rotate(-90deg); }
.stat-ring-track { fill: none; stroke: var(--line); stroke-width: 5; }
.stat-ring-fill {
  fill: none; stroke: var(--gold-600); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  transition: stroke-dashoffset .9s var(--ease-out);
}
.stats-empty p { margin: 0; color: var(--muted); font-size: .95rem; }
.stats-empty-cta { color: var(--gold-700); font-weight: 600; }
#stat-weak { cursor: pointer; }
#stat-weak:hover { color: var(--gold-700); }

/* ── Skills breakdown (expandable, under the stats strip) ────────────────── */
.skills-wrap { margin-top: .75rem; }
.skills-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: none; padding: .3rem .2rem;
  font-size: .86rem; font-weight: 600; color: var(--navy-700);
  cursor: pointer;
}
.skills-toggle:hover { color: var(--gold-700); }
.skills-caret { font-size: .72rem; transition: transform var(--t-fast); }
.skills-toggle.open .skills-caret { transform: rotate(180deg); }
.skills-panel { margin-top: .55rem; padding: .9rem 1.1rem; display: grid; gap: .4rem; }
.skills-panel[hidden] { display: none; }
.skill-row {
  display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(90px, 220px);
  align-items: center; gap: .85rem;
  background: none; border: none; padding: .34rem .4rem;
  font: inherit; font-size: .88rem; color: var(--ink); text-align: left;
  border-radius: var(--r-xs); cursor: pointer;
  transition: background var(--t-fast);
}
.skill-row:hover { background: var(--navy-50); }
.skill-score { font-weight: 700; color: var(--navy-700); font-variant-numeric: tabular-nums; }
.skill-bar {
  display: block; height: 7px; border-radius: 4px;
  background: var(--surface-2); overflow: hidden;
}
.skill-bar-fill {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-300), var(--gold-600));
}
@media (max-width: 720px) {
  .skill-row { grid-template-columns: 1fr auto; }
  .skill-bar { grid-column: 1 / -1; }
}

/* ── Filter row ──────────────────────────────────────────────────────────── */
.library-section { padding-top: 2.2rem; }
.filter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.filter-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip-filter { cursor: pointer; transition: all var(--t-fast); }
.chip-filter:hover { border-color: var(--gold-600); color: var(--navy); }
.chip-filter.active {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: var(--shadow-xs);
}
.type-filter select {
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--ink);
  padding: .5rem 2.2rem .5rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2371809b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
  cursor: pointer;
}

/* ── Passage cards ───────────────────────────────────────────────────────── */
.pgrid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
}
.pcard { display: flex; flex-direction: column; gap: .75rem; padding: 1.45rem 1.45rem 1.25rem; }
.pcard.filtered-out { display: none; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.diff-dots { display: inline-flex; gap: 4px; }
.diff-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong); display: inline-block;
}
.diff-1 i:nth-child(1) { background: var(--gold-600); }
.diff-2 i:nth-child(-n+2) { background: var(--gold-600); }
.diff-3 i { background: var(--gold-600); }
.pcard-title { margin: 0; font-size: 1.32rem; line-height: 1.25; }
.pcard-title a { color: var(--ink); transition: color var(--t-fast); }
.pcard-title a:hover { color: var(--navy-700); }
.pcard-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.type-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy-700); background: var(--navy-50);
  border: 1px solid var(--navy-100); border-radius: 6px;
  padding: .18rem .5rem;
}
.pcard-foot {
  margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.pcard-meta { font-size: .82rem; color: var(--muted); }
.pcard-state { display: inline-flex; align-items: center; gap: .5rem; }
.pcard-best {
  font-size: .8rem; font-weight: 700; color: var(--correct);
  background: var(--correct-bg); border: 1px solid #bfe8d2;
  border-radius: var(--r-pill); padding: .2rem .65rem;
}
.grid-empty { color: var(--muted); text-align: center; padding: 2.5rem 0; }
.noscript-note {
  margin: 1.4rem auto 0; text-align: center; color: var(--muted); font-size: .9rem;
}

/* Reveal-on-scroll (library cards) */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.shown {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

/* ── Error pages ─────────────────────────────────────────────────────────── */
.error-card { padding: 3rem 2rem; }
.error-logo { margin: 0 auto 1rem; }

@media (max-width: 720px) {
  .stats-strip { flex-direction: column; align-items: stretch; gap: .9rem; padding: 1.1rem 1.2rem; }
  .stat + .stat { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: .9rem; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .type-filter select { width: 100%; }
}

/* ═══ Landing page ══════════════════════════════════════════════════════════ */
.btn-lg { padding: .92rem 1.9rem; font-size: 1.02rem; }
.btn-xs { padding: .32rem .72rem; font-size: .76rem; }
.btn-block { width: 100%; }
.btn-ghost-light {
  background: rgba(255,255,255,.06); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px var(--gold); }

.landing-hero .hero-inner { padding-bottom: clamp(5rem, 10vw, 7rem); }
.hero-cta {
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  margin: 1.7rem 0 1rem;
}
.hero-note { font-size: .86rem; color: #9fb0c6; letter-spacing: .02em; margin: 0; }

.eyebrow-ink { color: var(--gold-700); }
.eyebrow-ink::before { background: linear-gradient(90deg, transparent, var(--gold-600)); }

.feature-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.feature { text-align: left; }
.feature h3 { margin: .7rem 0 .35rem; font-size: 1.12rem; }
.feature p { margin: 0; color: var(--text); font-size: .95rem; }
.feature-ic {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 1.35rem;
}

.section-tint { background: var(--bg); }
.how-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.how-wrap h2 { margin: .8rem 0 1.6rem; }
.steps {
  list-style: none; margin: 0 auto 1.8rem; padding: 0;
  display: grid; gap: 1rem; text-align: left; max-width: 560px;
}
.steps li { display: flex; align-items: flex-start; gap: .9rem; }
.step-n {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.step-t { color: var(--text); padding-top: .25rem; }
.step-t strong { color: var(--ink); }
.how-consent { max-width: 520px; margin: 1.3rem auto 0; font-size: .82rem; color: var(--muted); }

/* ═══ Auth / form cards ═════════════════════════════════════════════════════ */
.auth-card { max-width: 480px; margin: 0 auto; padding: 2rem 1.9rem; }
.auth-title { margin: 0 0 .3rem; font-size: 1.7rem; }
.auth-sub { color: var(--muted); font-size: .95rem; margin: 0 0 1.4rem; }
.auth-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field-label { font-size: .82rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.auth-form input, .auth-form select {
  font: inherit; font-size: .96rem; color: var(--ink);
  padding: .7rem .85rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.auth-form input:focus-visible, .auth-form select:focus-visible {
  border-color: var(--gold-600); box-shadow: var(--glow-gold);
}
.auth-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2371809b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.consent {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .88rem; color: var(--text); line-height: 1.5;
}
.consent input { margin-top: .18rem; width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--gold-600); }
.auth-form .btn-block { margin-top: .3rem; }
.auth-alt { text-align: center; margin: 1.2rem 0 0; font-size: .9rem; color: var(--muted); }
.auth-alt a { font-weight: 600; }
.form-error {
  background: var(--wrong-bg); color: var(--wrong);
  border: 1px solid #f2c9c9; border-radius: var(--r-sm);
  padding: .7rem .95rem; font-size: .9rem; margin-bottom: 1.1rem;
}
.reset-hint { margin: -.2rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.reset-hint b { color: var(--navy-700); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice-mark {
  width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.notice-msg { color: var(--text); font-size: 1rem; margin: 0 auto 1.5rem; max-width: 42ch; }

/* ═══ Admin console ═════════════════════════════════════════════════════════ */
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.admin-title { margin: 0 0 .2rem; }
.admin-sub { margin: 0; color: var(--muted); font-size: .95rem; }
.admin-stats { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.astat {
  flex: 1; min-width: 110px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-xs);
  padding: .9rem 1.1rem; display: flex; flex-direction: column;
}
.astat-hi { border-color: var(--gold-300); background: var(--panel); }
.astat-n { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); line-height: 1.1; }
.astat-l { font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.admin-filter { margin-bottom: 1.2rem; }
.admin-filter .chip-filter { cursor: pointer; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 820px; }
.admin-table th {
  text-align: left; padding: .7rem .9rem;
  background: var(--navy-50); color: var(--navy-800);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}
.admin-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.cell-name { font-weight: 600; }
.nowrap { white-space: nowrap; }
.status-pill {
  display: inline-block; padding: .18rem .6rem; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; text-transform: capitalize;
}
.status-active { background: var(--correct-bg); color: var(--correct); }
.status-blocked { background: var(--wrong-bg); color: var(--wrong); }
.status-pending { background: var(--warn-bg); color: var(--warn); }
.status-unconfirmed { background: var(--surface-2); color: var(--muted); }
.email-ok { color: var(--correct); font-weight: 700; margin-left: .3rem; }
.email-no { color: var(--muted); font-size: .78rem; margin-left: .3rem; white-space: nowrap; }

/* Privacy / prose page */
.prose { max-width: 640px; margin: 0 auto; }
.prose h3 { margin: 1.4rem 0 .4rem; font-size: 1.08rem; }
.prose p { color: var(--text); line-height: 1.7; margin: 0 0 .8rem; }
.admin-row-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.admin-row-actions form { margin: 0; }

.reset-banner {
  background: var(--panel); border: 1px solid var(--gold-300);
  border-radius: var(--r-md); padding: 1rem 1.2rem; margin-bottom: 1.3rem;
  font-size: .95rem; color: var(--ink); line-height: 1.6;
}
.reset-pw {
  display: inline-block; margin: 0 .3rem;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .06em;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-xs); padding: .1rem .55rem; color: var(--navy-800);
}
.reset-note { display: block; margin-top: .3rem; font-size: .8rem; color: var(--muted); }

/* "Keep me signed in" row on the auth forms */
.remember {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--text); cursor: pointer;
}
.remember input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--gold-600); }

/* Signpost to the one place student accounts are managed. */
.cc-banner{margin:0 0 18px;padding:12px 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--gold-300);color:var(--ink);font-size:.92rem;line-height:1.5}
.cc-banner a{color:#0b2a49;font-weight:700}

/* ── Inline line icons (replace emojis) ──────────────────────────────────────── */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; stroke: currentColor; fill: none; flex-shrink: 0; }
.icon-gold { color: var(--gold-700); }
.icon-navy { color: var(--navy); }
.icon-lg { width: 1.4em; height: 1.4em; }
.icon-xl { width: 2em; height: 2em; }


/* ── Section 2: the BayRen Academy system — the estate's look, wins the
      cascade for every shared component ── */
/* ═══════════════════════════════════════════════════════════════════════════
   BayRen Grammar — Design System
   A fresh, premium system built around the brand's sunrise motif:
   deep navy water, rising gold sun. Mobile-first, self-hosted fonts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, no CDN) ─────────────────────────────────────────── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/noto-sans-bengali-var.woff2') format('woff2');
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy-950: #040f1d;
  --navy-900: #061626;
  --navy-800: #08203a;
  --navy-700: #0d3157;
  --navy:     #0b2a49;           /* the sea */
  --navy-100: #dfe7f0;
  --navy-50:  #eef2f7;
  --gold-700: #b08e30;
  --gold-600: #c6a03c;
  --gold:     #d8b04c;           /* the sun */
  --gold-300: #ecd79a;
  --gold-100: #f7ecce;
  --gold-50:  #fbf6e7;

  /* Semantic */
  --bg:          #ffffff;        /* white — Asaf, 2 Sep 2026: never off-white */
  --surface:     #ffffff;
  --panel:       #ffffff;        /* every card, quote, banner and legend — white, hairline border */
  --surface-2:   #f3f5f8;        /* inactive states only: a cool neutral, never the old beige */
  --ink:         #13233a;        /* headings */
  --text:        #33415a;        /* body */
  --muted:       #71809b;
  --line:        #e6e2d8;
  --line-strong: #d7d2c4;
  --correct:     #1e9e60;
  --correct-bg:  #e8f7ef;
  --wrong:       #d84848;
  --wrong-bg:    #fdeeee;
  --info-bg:     #eef4fb;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, sans-serif;
  --font-bn: 'Noto Sans Bengali', 'Inter', sans-serif;

  /* Shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Depth (navy-tinted, soft and layered) */
  --shadow-xs: 0 1px 2px rgba(11,42,73,.05);
  --shadow-sm: 0 1px 3px rgba(11,42,73,.06), 0 4px 12px rgba(11,42,73,.05);
  --shadow-md: 0 2px 6px rgba(11,42,73,.05), 0 12px 32px rgba(11,42,73,.09);
  --shadow-lg: 0 6px 18px rgba(11,42,73,.08), 0 28px 64px rgba(11,42,73,.14);
  --shadow-gold: 0 8px 28px rgba(198,160,60,.30);
  --glow-gold: 0 0 0 5px rgba(216,176,76,.18);

  /* Motion */
  --ease-out: cubic-bezier(.22,.9,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .16s var(--ease-out);
  --t-med: .28s var(--ease-out);
  --t-slow: .55s var(--ease-out);

  /* Layout */
  --container: 1140px;
  --header-h: 68px;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--gold-700); }
::selection { background: var(--gold-300); color: var(--navy-900); }

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.3rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-family: var(--font-body); font-size: .8rem; font-weight: 700;
     text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 .6em; }
p { margin: 0 0 1em; }
.bn { font-family: var(--font-bn); }

:focus-visible {
  outline: none;
  box-shadow: var(--glow-gold), 0 0 0 2px var(--surface);
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 660px; margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.stack-sm > * + * { margin-top: .6rem; }
.stack > * + * { margin-top: 1.2rem; }
.row { display: flex; gap: .8rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.center { text-align: center; }
.grid { display: grid; gap: 1.2rem; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── The sunrise: navy panels with rising gold glow ──────────────────────── */
.sunrise {
  position: relative;
  background:
    radial-gradient(58% 44% at 50% 0%, rgba(216,176,76,.34) 0%, rgba(216,176,76,.10) 46%, transparent 72%),
    linear-gradient(178deg, var(--navy-800) 0%, var(--navy) 52%, var(--navy-700) 100%);
  color: #e9eef5;
  overflow: hidden;
}
.sunrise::after {              /* faint horizon hairline */
  content: '';
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,176,76,.55), transparent);
}
.sunrise h1, .sunrise h2, .sunrise h3 { color: #fff; }
.sunrise p { color: #bccadb; }
.hl { color: var(--gold); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-300);
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold-600), transparent); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.6rem;
  border: none; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), color var(--t-fast);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn-gold {
  background: linear-gradient(180deg, #e3bd5e 0%, var(--gold) 45%, var(--gold-600) 100%);
  color: var(--navy-900);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover {
  color: var(--navy-950);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(198,160,60,.42), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-navy {
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy) 60%, var(--navy-800) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-navy:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent; color: var(--navy-700);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn-ghost:hover { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--gold-600); }
.btn-outline-light {
  background: rgba(255,255,255,.04); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.38);
  backdrop-filter: blur(4px);
}
.btn-outline-light:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--gold-300); }
.btn-lg { padding: .95rem 2.1rem; font-size: 1.03rem; }
.btn-sm { padding: .48rem 1.05rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .55; pointer-events: none; }

/* ── Cards & panels ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-300);
}
.card-gold-top { position: relative; overflow: hidden; }
.card-gold-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-300), var(--gold-600) 50%, var(--gold-300));
}
.glass {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

/* ── Chips, badges, pills ────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem;
  border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line);
}
.chip-gold { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-300); }
.chip-navy { background: var(--navy-50); color: var(--navy-700); border-color: var(--navy-100); }
.chip-green { background: var(--correct-bg); color: var(--correct); border-color: #bfe8d2; }
.chip-red { background: var(--wrong-bg); color: var(--wrong); border-color: #f3c8c8; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; margin-bottom: .4rem;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.field .hint { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: .82rem 1.05rem;
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold-600);
  box-shadow: var(--glow-gold);
}
input::placeholder { color: #a6b0c2; }
.checkline { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; }
.checkline input { width: auto; margin-top: .28rem; accent-color: var(--gold-600); }

/* ── Flash messages ──────────────────────────────────────────────────────── */
.flash-wrap { position: relative; z-index: 5; }
.flash {
  display: flex; align-items: center; gap: .6rem;
  margin: 1rem auto; max-width: var(--container);
  padding: .85rem 1.2rem;
  border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500;
  animation: fadeSlideDown .35s var(--ease-out);
}
.flash.error { background: var(--wrong-bg); color: #a33; border: 1px solid #f0c4c4; }
.flash.success { background: var(--correct-bg); color: #17784a; border: 1px solid #bfe8d2; }
.flash.info { background: var(--info-bg); color: var(--navy-700); border: 1px solid #d3e2f2; }

/* ── App header ──────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(8,32,58,.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(216,176,76,.28);
}
.site-head .inner {
  max-width: var(--container); margin: 0 auto; height: 100%;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand .logo-chip {
  background: #fff; border-radius: 10px; padding: 4px 6px;
  box-shadow: inset 0 0 0 1px rgba(11,42,73,.08);
  flex-shrink: 0;
}
.brand .logo-chip img { height: 40px; width: 45px; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; color: #fff; white-space: nowrap; }
.brand-name .hl { color: var(--gold); }
.head-nav { display: flex; align-items: center; gap: .35rem; }
.head-link {
  padding: .45rem .85rem; border-radius: var(--r-pill);
  color: #cdd8e4; font-size: .9rem; font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.head-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.head-link.active { color: var(--gold-300); background: rgba(216,176,76,.13); }
@media (max-width: 520px) {
  .brand-name { font-size: .98rem; }
  .brand .logo-chip img { height: 32px; width: 36px; }
  .head-link { padding: .4rem .6rem; font-size: .84rem; }
  .site-head .inner { padding: 0 12px; gap: .5rem; }
  .head-nav .btn-sm { padding: .42rem .8rem; font-size: .8rem; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot {
  margin-top: 4rem;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color: #93a5ba;
  padding: 2.6rem 0 2.2rem;
  font-size: .88rem;
  border-top: 1px solid rgba(216,176,76,.25);
}
.site-foot a { color: #c3d0de; }
.site-foot a:hover { color: var(--gold-300); }

/* ── Stat blocks ─────────────────────────────────────────────────────────── */
.stat { text-align: center; }
.stat .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--gold);
  line-height: 1.1;
}
.stat .l { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #9fb0c4; }

/* ── Reveal-on-scroll ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pulseHalo {
  0%   { box-shadow: 0 0 0 0 rgba(216,176,76,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(216,176,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,176,76,0); }
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, #ffffff 40%, var(--surface-2) 55%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

/* ── Small print / muted text ────────────────────────────────────────────── */
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny { font-size: .76rem; }
.gold-text { color: var(--gold-700); }
.divider { border: 0; height: 1px; background: var(--line); margin: 1.6rem 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Landing page
   ═══════════════════════════════════════════════════════════════════════════ */
.hero {
  padding: clamp(4rem, 11vw, 7.5rem) 0 clamp(3.4rem, 9vw, 6rem);
  text-align: center;
}
.hero .logo-plate {
  display: inline-block;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 14px 20px 10px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(216,176,76,.25);
  margin-bottom: 1.8rem;
  animation: fadeUp .8s var(--ease-out) both;
}
.hero .logo-plate img { height: 92px; width: auto; margin: 0 auto; }
.hero h1 { margin: .4em auto .35em; max-width: 17ch; }
.hero .lead {
  font-size: clamp(1rem, 2.4vw, 1.17rem);
  max-width: 44rem; margin: 0 auto 2rem;
  color: #b9c7d8;
}
.hero .cta-row {
  display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 3rem;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1rem; max-width: 46rem; margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 640px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }

/* Decorative sun rays behind the hero (subtle) */
.hero-rays {
  position: absolute; left: 50%; top: -40px; transform: translateX(-50%);
  width: min(760px, 120vw); opacity: .16; pointer-events: none;
}

/* Journey preview — five milestone cards joined by a golden thread */
.journey { position: relative; }
.journey-line {
  position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-300) 12%, var(--gold-600) 50%, var(--gold-300) 88%, transparent);
  display: none;
}
@media (min-width: 900px) { .journey-line { display: block; } }
.journey-grid { display: grid; gap: 1rem; grid-template-columns: 1fr;
  position: relative; }
@media (min-width: 640px) { .journey-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .journey-grid { grid-template-columns: repeat(5, 1fr); } }
.milestone {
  text-align: center; padding: 1.4rem 1rem 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.milestone:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-300); }
.milestone .dot {
  width: 46px; height: 46px; margin: 0 auto .8rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-600));
  color: var(--navy-900); font-weight: 700; font-family: var(--font-display);
  font-size: 1.15rem;
  box-shadow: var(--shadow-gold);
}
.milestone h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.milestone p { font-size: .84rem; color: var(--muted); margin: 0; }

/* Feature cards */
.feature {
  padding: 1.7rem 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-300); }
.feature .ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  color: var(--gold-300);
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-xs);
}
.feature .ico svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.feature p { font-size: .9rem; color: var(--muted); margin: 0; }

/* How it works steps */
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step .num {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  background: var(--navy); color: var(--gold-300);
  box-shadow: var(--shadow-sm);
}
.step h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.step p { font-size: .9rem; color: var(--muted); margin: 0; }

/* Final CTA band */
.cta-band { text-align: center; padding: clamp(3.4rem, 9vw, 5.6rem) 0; }
.cta-band h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-band .lead { color: #b9c7d8; max-width: 40rem; margin: 0 auto 1.8rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Landing v2 — split hero with app mockup
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-grid {
  display: grid; gap: 3rem; align-items: center;
  text-align: left;
}
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.hero-copy .eyebrow { margin-bottom: 1.1rem; }
.hero-copy h1 { margin: 0 0 .5em; max-width: 15ch; }
.hero-copy .lead { margin: 0 0 1.8rem; max-width: 34rem; }
.hero-copy .cta-row { justify-content: flex-start; margin-bottom: 1.6rem; }
.hero-trust { display: flex; align-items: center; gap: .6rem; color: #8fa2b8; font-size: .84rem; }
.hero-trust .dotline { width: 26px; height: 1px; background: rgba(216,176,76,.5); }
@media (max-width: 939px) {
  .hero-grid { text-align: center; }
  .hero-copy h1, .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .hero-copy .cta-row { justify-content: center; }
  .hero-trust { justify-content: center; }
}

/* The floating app mockup */
.mock-wrap { position: relative; max-width: 430px; margin: 0 auto; }
.mock-wrap::before {          /* gold aura behind the card */
  content: ''; position: absolute; inset: -12% -8%;
  background: radial-gradient(50% 50% at 50% 42%, rgba(216,176,76,.32), transparent 70%);
  pointer-events: none;
}
.mock-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px rgba(4,15,29,.55), 0 4px 16px rgba(4,15,29,.3);
  padding: 1.5rem 1.5rem 1.3rem;
  animation: floaty 7s ease-in-out infinite;
}
.mock-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  color: var(--gold-700); text-transform: uppercase;
  margin-bottom: .8rem;
}
.mock-progress { display: flex; gap: .35rem; margin-top: 1.1rem; align-items: center; }
.mock-progress .pd { width: 22px; height: 5px; border-radius: 3px; background: var(--line); }
.mock-progress .pd.on { background: var(--gold-600); }
.mock-progress .plabel { margin-left: auto; font-size: .72rem; color: var(--muted); font-weight: 600; }
.float-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700;
  box-shadow: var(--shadow-md);
  animation: floaty 6s ease-in-out infinite;
}
.float-xp {
  top: -16px; right: -8px;
  background: linear-gradient(180deg, #e3bd5e, var(--gold-600));
  color: var(--navy-900);
  animation-delay: .8s;
}
.float-streak {
  bottom: 40px; left: -26px;
  background: rgba(8,32,58,.85); color: #ffd9a0;
  border: 1px solid rgba(216,176,76,.4);
  backdrop-filter: blur(8px);
  animation-delay: 1.6s;
}
.float-level {
  bottom: -18px; right: 18px;
  background: #fff; color: var(--navy-700);
  border: 1px solid var(--gold-300);
  animation-delay: 2.4s;
}
@media (max-width: 480px) {
  .float-streak { left: -6px; }
  .float-xp { right: 0; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* Wave divider at the bottom of navy sections */
.wave-divider { display: block; width: 100%; height: 70px; margin-top: 3rem; }
@media (max-width: 640px) { .wave-divider { height: 42px; margin-top: 2rem; } }

/* Journey v2 */
.milestone .m-bn { display: block; font-family: var(--font-bn); font-size: .78rem;
  color: var(--gold-700); margin-bottom: .45rem; }
.milestone .m-chips { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center;
  margin-top: .7rem; }
.milestone .m-chips span {
  font-size: .68rem; font-weight: 600; padding: .18rem .55rem;
  background: var(--navy-50); color: var(--navy-700);
  border-radius: var(--r-pill); border: 1px solid var(--navy-100);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lesson components — used by the real lesson viewer AND the landing demo
   ═══════════════════════════════════════════════════════════════════════════ */
.concept-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.5rem 1.3rem;
}
.concept-card + .concept-card, .lesson-flow > * + * { margin-top: 1.2rem; }
.concept-card h3 {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.13rem; margin-bottom: .55rem;
}
.concept-card h3::before {
  content: ''; width: 7px; height: 22px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-600));
  flex-shrink: 0;
}
.concept-card .body { color: var(--text); }

/* Inline lesson check — a quick "বুঝেছেন কি?" question inside the reading */
.check-card {
  border: 1px solid var(--gold-300);
  background: var(--panel);
}
.check-card h3::before { display: none; }
.check-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--gold-700); font-size: .95rem;
}
.check-kicker svg { width: 18px; height: 18px; }
.check-options { display: grid; gap: .5rem; margin-top: .9rem; }
.check-opt {
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: .7rem .9rem; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--surface);
  transition: border-color .12s, background .12s;
}
.check-opt:hover:not(:disabled) { border-color: var(--gold-600); background: var(--navy-50); }
.check-opt:disabled { cursor: default; }
.check-opt.right { border-color: var(--correct); background: var(--correct-bg); font-weight: 600; }
.check-opt.wrong { border-color: var(--wrong); background: var(--wrong-bg); }
.check-feedback {
  margin-top: .8rem; padding: .65rem .8rem; border-radius: var(--r-sm);
  font-size: .95rem; line-height: 1.5;
}
.check-feedback.ok { background: var(--correct-bg); color: #17784a; }
.check-feedback.no { background: var(--wrong-bg); color: #a33; }

/* Formula card — the rule at a glance */
.formula-card {
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(216,176,76,.25), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy));
  border-radius: var(--r-md);
  padding: 1.05rem 1.3rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .6rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.09);
}
.formula-card .fx {
  font-weight: 700; font-size: .95rem; color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  padding: .32rem .8rem; border-radius: var(--r-xs);
}
.formula-card .fop { color: var(--gold); font-weight: 800; font-size: 1.06rem; }
.formula-card .fnote { flex-basis: 100%; color: #b9c7d8; font-size: .84rem; margin-top: .2rem; }

/* Example sentences */
.example-list { display: grid; gap: .55rem; margin-top: .9rem; }
.example {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .95rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.example:hover { border-color: var(--gold-300); background: var(--navy-50); }
.example .ex-text { flex: 1; min-width: 0; }
.example .en { font-weight: 600; color: var(--ink); line-height: 1.5; }
.example .bn { font-family: var(--font-bn); color: var(--muted); font-size: .9rem; line-height: 1.6; }
.speak-btn {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: none;
  background: var(--navy); color: var(--gold-300);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), background var(--t-fast);
}
.speak-btn svg { width: 17px; height: 17px; }
.speak-btn:hover { background: var(--navy-700); transform: scale(1.1); }
.speak-btn:active { transform: scale(.95); }
.speak-btn.playing { animation: pulseHalo 1.2s ease-out infinite; }
.speak-btn.sm { width: 27px; height: 27px; vertical-align: middle; margin-left: .3rem; }
.speak-btn.sm svg { width: 13px; height: 13px; }

/* XP toast — floats up from the action button */
.xp-toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(0);
  z-index: 90;
  padding: .55rem 1.2rem; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #e3bd5e, var(--gold-600));
  color: var(--navy-900); font-weight: 800; font-size: 1.05rem;
  box-shadow: var(--shadow-gold);
  opacity: 0; transition: opacity .25s ease, transform 1.2s var(--ease-out);
  pointer-events: none;
}
.xp-toast.go { opacity: 1; transform: translateX(-50%) translateY(-70px); }

/* Common-mistake callout */
.mistake-card {
  border-left: 4px solid var(--gold-600);
  background: var(--gold-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1rem 1.2rem;
}
.mistake-card .pair { display: grid; gap: .2rem; padding: .45rem 0; }
.mistake-card .pair + .pair { border-top: 1px dashed var(--gold-300); }
.mistake-card .bad { color: var(--wrong); }
.mistake-card .bad s { text-decoration-thickness: 1.5px; }
.mistake-card .good { color: #157a49; font-weight: 600; }
.mistake-card .why { font-size: .85rem; color: var(--muted); }
.mistake-card .mark { font-weight: 700; margin-right: .35rem; }

/* Tip line */
.tip-line {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: .9rem; padding: .7rem .9rem;
  background: var(--info-bg); border-radius: var(--r-sm);
  font-size: .9rem; color: var(--navy-700);
}
.tip-line .tico { flex-shrink: 0; margin-top: .05rem; }

/* Simple data table block (pronoun charts, verb forms…) */
.gtable { width: 100%; border-collapse: collapse; margin-top: .9rem; font-size: .92rem; }
.gtable th {
  text-align: left; padding: .55rem .8rem;
  background: var(--navy); color: var(--gold-300);
  font-weight: 600; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
}
.gtable th:first-child { border-radius: var(--r-xs) 0 0 0; }
.gtable th:last-child { border-radius: 0 var(--r-xs) 0 0; }
.gtable td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); color: var(--text); }
.gtable tr:nth-child(even) td { background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   Learning path (/learn)
   ═══════════════════════════════════════════════════════════════════════════ */
.path-hero { padding: 2.2rem 0 2.4rem; }
.path-hero .inner {
  display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center;
  justify-content: space-between;
}
.path-hero h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 .2rem; }
.path-hero .sub { color: #9fb0c4; font-size: .9rem; margin: 0; }
.hero-metrics { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.metric-pill {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.metric-pill .mval { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.metric-pill .mlab { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #9fb0c4; }
.metric-pill.flame .mval { color: #ffb757; }

/* XP ring */
.xp-ring { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.xp-ring svg { transform: rotate(-90deg); }
.xp-ring .ring-bg { stroke: rgba(255,255,255,.14); }
.xp-ring .ring-fill { stroke: var(--gold); stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease-out); }
.xp-ring .ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05;
}
.xp-ring .ring-label b { font-family: var(--font-display); font-size: 1.3rem; color: #fff; }
.xp-ring .ring-label span { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-300); }

/* Today's goal bar */
.goal-bar { margin-top: 1.4rem; }
.goal-bar .g-row { display: flex; justify-content: space-between; font-size: .78rem;
  color: #9fb0c4; margin-bottom: .35rem; }
.goal-bar .g-row .met { color: var(--gold-300); font-weight: 700; }
.goal-track { height: 9px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.goal-fill {
  height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transition: width .6s var(--ease-out);
}

/* Level bands + topic nodes */
.level-band {
  display: flex; align-items: center; gap: 1rem;
  margin: 2.6rem 0 1.1rem;
}
.level-band:first-child { margin-top: 0; }
.level-band .lv-medal {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  color: var(--gold-300);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.14);
}
.level-band .lv-medal.done { background: linear-gradient(160deg, var(--gold-300), var(--gold-600)); color: var(--navy-900); }
.level-band h2 { font-size: 1.35rem; margin: 0; }
.level-band .lv-tag { font-size: .84rem; color: var(--muted); margin: 0; }
.level-band .lv-progress { margin-left: auto; text-align: right; }
.level-band .lv-progress b { color: var(--gold-700); }

.unit-label {
  margin: 1.3rem 0 .6rem 26px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

.path-list { position: relative; }
.topic-node {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 1.15rem .95rem .95rem;
  margin-left: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.topic-node + .topic-node { margin-top: .65rem; }
.topic-node::before {          /* connector to the spine */
  content: ''; position: absolute; left: -26px; top: 50%;
  width: 26px; height: 2px; background: var(--line-strong);
}
.path-spine { position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: var(--line-strong); border-radius: 2px; }
a.topic-node:hover { transform: translateX(4px); border-color: var(--gold-300); box-shadow: var(--shadow-sm); color: inherit; }
.topic-node .t-state {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.topic-node .t-state svg { width: 19px; height: 19px; }
.topic-node .t-body { flex: 1; min-width: 0; }
.topic-node .t-name { font-weight: 600; color: var(--ink); }
.topic-node .t-sub { font-size: .78rem; color: var(--muted); }
.topic-node .t-chev { color: var(--muted); flex-shrink: 0; }

.topic-node.locked { opacity: .62; background: var(--surface-2); pointer-events: none; }
.topic-node.locked .t-state { background: var(--line); color: var(--muted); }
.topic-node.start .t-state { background: var(--navy); color: var(--gold-300); }
.topic-node.learning .t-state { background: var(--info-bg); color: var(--navy-700); border: 2px solid var(--navy-100); }
.topic-node.quiz-ready .t-state { background: var(--gold-100); color: var(--gold-700); border: 2px solid var(--gold-300); }
.topic-node.passed .t-state { background: var(--correct-bg); color: var(--correct); }
.topic-node.mastered .t-state {
  background: linear-gradient(160deg, var(--gold-300), var(--gold-600));
  color: var(--navy-900);
}
.topic-node.current {
  border-color: var(--gold-600);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(216,176,76,.14);
}
.topic-node.current .t-state { animation: pulseHalo 2s ease-out infinite; }

/* Level-test / final-exam cards on the path */
.test-card {
  display: flex; gap: 1rem; align-items: center;
  margin: 1.5rem 0 .5rem 26px; padding: 1.05rem 1.25rem;
  border-radius: var(--r-lg); text-decoration: none;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(216,176,76,.28), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy));
  color: #fff; box-shadow: var(--shadow-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
a.test-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; }
.test-card .tc-ico { font-size: 1.7rem; flex-shrink: 0; }
.test-card .tc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.test-card .tc-body b { color: #fff; }
.test-card .tc-sub { font-size: .82rem; color: #b9c7d8; }
.test-card.locked { opacity: .6; box-shadow: var(--shadow-xs); }
.test-card.final { box-shadow: var(--shadow-md), 0 0 0 2px rgba(216,176,76,.4); }
/* Unit revision checkpoints — lighter cards tucked into the unit column */
.test-card.revision {
  margin: .35rem 0 .9rem 26px; padding: .7rem 1rem;
  background: linear-gradient(160deg, rgba(11,42,73,.05), rgba(216,176,76,.10));
  border: 1px dashed rgba(176,138,44,.55);
  color: var(--navy-900); box-shadow: none;
}
.test-card.revision .tc-ico { font-size: 1.25rem; }
.test-card.revision .tc-body b { color: var(--navy-900); font-size: .92rem; }
.test-card.revision .tc-sub { color: #5a6b7f; }
a.test-card.revision:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
  color: var(--navy-900);
}
.test-card.revision.locked { opacity: .55; }

/* Daily smart-review card at the top of the path */
.review-card {
  display: flex; gap: .9rem; align-items: center;
  margin: 0 0 1.6rem; padding: 1rem 1.2rem;
  border-radius: var(--r-lg); text-decoration: none;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(216,176,76,.30), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy));
  color: #fff; box-shadow: var(--shadow-md), 0 0 0 1px rgba(216,176,76,.35);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.review-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; }
.review-card .rc-ico { font-size: 1.6rem; flex-shrink: 0; }
.review-card .rc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.review-card .rc-body b { color: #fff; }
.review-card .rc-sub { font-size: .82rem; color: #b9c7d8; }
.review-card.done {
  background: linear-gradient(160deg, rgba(11,42,73,.05), rgba(63,158,96,.10));
  border: 1px solid rgba(63,158,96,.4);
  color: var(--navy-900); box-shadow: var(--shadow-xs);
}
.review-card.done .rc-body b { color: var(--navy-900); }
.review-card.done .rc-sub { color: #5a6b7f; }
.review-card.done:hover { color: var(--navy-900); }

/* ═══════════════════════════════════════════════════════════════════════════
   Topic overview + lesson page
   ═══════════════════════════════════════════════════════════════════════════ */
.page-head { padding: 2rem 0 1.6rem; }
.page-head .crumbs { font-size: .8rem; color: #9fb0c4; margin-bottom: .4rem; }
.page-head .crumbs a { color: var(--gold-300); }
.page-head h1 { margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.3rem); }
.page-head .bn-sub { color: #9fb0c4; font-family: var(--font-bn); margin-top: .25rem; }

.step-cards { display: grid; gap: 1rem; margin-top: -1.6rem; position: relative; z-index: 2; }
@media (min-width: 760px) { .step-cards { grid-template-columns: repeat(3, 1fr); } }
.step-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 1.4rem 1.4rem 1.3rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.step-card .sc-top { display: flex; align-items: center; justify-content: space-between; }
.step-card .sc-kind { font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.step-card h3 { margin: 0; font-size: 1.15rem; }
.step-card p { font-size: .87rem; color: var(--muted); margin: 0 0 .5rem; flex: 1; }
.step-card.locked { opacity: .66; background: var(--surface-2); }

.lesson-flow { max-width: 720px; margin: 0 auto; padding-bottom: 6.5rem; }
.lesson-intro {
  font-size: 1.06rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--gold-600);
  padding: 1.2rem 1.4rem; border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--shadow-xs);
}
.action-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--line);
  padding: .8rem max(20px, env(safe-area-inset-left)) calc(.8rem + env(safe-area-inset-bottom));
}
.action-dock .inner { max-width: 720px; margin: 0 auto; display: flex; gap: .8rem;
  align-items: center; justify-content: space-between; }
.action-dock .dock-note { font-size: .82rem; color: var(--muted); }

/* IELTS relevance callout */
.ielts-card {
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(216,176,76,.22), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy));
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.08);
}
.ielts-card .ihead {
  display: flex; gap: .55rem; align-items: center;
  font-weight: 700; font-size: 1.04rem; color: var(--gold-300);
  margin-bottom: .55rem;
}
.ielts-card p { margin: 0; color: #c6d2e0; font-size: .96rem; line-height: 1.75; }
.ielts-card p b { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   Practice runner
   ═══════════════════════════════════════════════════════════════════════════ */
.practice-shell { max-width: 640px; margin: 0 auto; padding: 1.7rem 20px 10rem; }
.q-head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .5rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.q-head .q-score { color: var(--gold-700); }
.q-bar { height: 8px; background: var(--line); border-radius: 5px;
  overflow: hidden; margin-bottom: 1.7rem; }
.q-fill { height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transition: width .45s var(--ease-out); }

.q-title { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.q-bn { font-family: var(--font-bn); color: var(--muted); font-size: .95rem;
  margin-bottom: 1.1rem; }
.q-sentence {
  font-size: 1.28rem; line-height: 1.75; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-xs);
  padding: 1.15rem 1.25rem; margin-bottom: 1.1rem;
}
.q-sentence .sen-bn { display: block; font-family: var(--font-bn);
  font-size: .92rem; color: var(--muted); margin-top: .3rem; }
.blank-slot {
  display: inline-block; min-width: 88px;
  border-bottom: 2.5px solid var(--gold-600);
  text-align: center; color: var(--gold-700); font-weight: 700;
  padding: 0 .4rem;
  transition: color var(--t-fast);
}
.blank-slot.filled { color: var(--navy-700); }
.inline-input {
  display: inline-block; width: 140px;
  padding: .1rem .5rem; font: inherit; font-weight: 700; color: var(--navy-700);
  border: none; border-bottom: 2.5px solid var(--gold-600); border-radius: 0;
  background: transparent; text-align: center;
}
.inline-input:focus { outline: none; box-shadow: none; border-color: var(--navy); }

.option-list { display: grid; gap: .6rem; }
.option-card {
  display: flex; gap: .75rem; align-items: center;
  width: 100%; text-align: left;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font: inherit; font-weight: 500; color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.option-card:hover { border-color: var(--gold-600); }
.option-card:active { transform: scale(.99); }
.option-card .oletter {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted);
  font-size: .78rem; font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast);
}
.option-card.selected { border-color: var(--navy); background: var(--navy-50); }
.option-card.selected .oletter { background: var(--navy); color: #fff; }
.option-card.right { border-color: var(--correct); background: var(--correct-bg); }
.option-card.right .oletter { background: var(--correct); color: #fff; }
.option-card.wrong { border-color: var(--wrong); background: var(--wrong-bg); }
.option-card.wrong .oletter { background: var(--wrong); color: #fff; }

.tile-bank, .answer-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
/* 1 Sep: the leading tile ships lowercase (so its capital can't leak which
   tile opens the sentence); the FIRST placed tile re-capitalizes for display
   only — grading accepts both casings via the accept list. */
.answer-strip .tile:first-child::first-letter { text-transform: uppercase; }
.answer-strip {
  min-height: 58px; padding: .65rem;
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  margin-bottom: 1rem;
}
.tile, .seg-chip {
  padding: .55rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--navy-100); border-bottom-width: 3px;
  border-radius: var(--r-sm);
  font: inherit; font-weight: 600; color: var(--ink);
  transition: transform var(--t-fast), border-color var(--t-fast),
              background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.tile:hover, .seg-chip:hover { transform: translateY(-2px); border-color: var(--gold-600); }
.tile:active, .seg-chip:active { transform: scale(.96); }
.tile.ghost { opacity: .35; pointer-events: none; }
.seg-chip.selected { background: var(--navy); border-color: var(--navy); color: #fff; }
.seg-chip.right { background: var(--correct); border-color: var(--correct); color: #fff; }
.seg-chip.wrong { background: var(--wrong); border-color: var(--wrong); color: #fff; }

.stage-done { pointer-events: none; }

/* Feedback inside the dock */
.action-dock.fb-ok { background: rgba(232,247,239,.96); border-top-color: #bfe8d2; }
.action-dock.fb-bad { background: rgba(253,238,238,.96); border-top-color: #f3c8c8; }
.fb-body { flex: 1; min-width: 0; }
.fb-title { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.02rem; }
.fb-ok .fb-title { color: #157a49; }
.fb-bad .fb-title { color: #b93838; }
.fb-answer { font-size: .92rem; font-weight: 600; color: var(--ink); margin-top: .15rem; }
.fb-expl { font-size: .88rem; color: var(--text); margin-top: .2rem; line-height: 1.6; }
.fb-xp {
  display: inline-flex; padding: .15rem .6rem; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #e3bd5e, var(--gold-600));
  color: var(--navy-900); font-size: .78rem; font-weight: 800;
}

/* Practice summary */
.summary-card { text-align: center; padding: 2.6rem 1.6rem; }
.summary-card .big { font-size: 3rem; margin-bottom: .4rem; }
.summary-card h2 { margin-bottom: .3rem; }
.summary-card .btn-row { display: flex; gap: .8rem; justify-content: center;
  flex-wrap: wrap; margin-top: 1.4rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Quiz
   ═══════════════════════════════════════════════════════════════════════════ */
.quiz-timer {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
}
.quiz-timer.danger { background: rgba(216,72,72,.25); border-color: #d84848;
  animation: pulseHalo 1.2s ease-out infinite; }

/* Result review rows */
.review-row {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .95rem 1.05rem;
}
.review-row.ok { border-left: 4px solid var(--correct); }
.review-row.bad { border-left: 4px solid var(--wrong); }
.review-row .rv-mark { font-weight: 800; font-size: 1.05rem; flex-shrink: 0; }
.review-row.ok .rv-mark { color: var(--correct); }
.review-row.bad .rv-mark { color: var(--wrong); }
.review-row .rv-body { flex: 1; min-width: 0; }
.review-row .rv-q { font-weight: 600; color: var(--ink); }
.review-row .rv-a { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .88rem; margin-top: .2rem; }
.review-row .rv-given { color: var(--wrong); }
.review-row .rv-right { color: #157a49; font-weight: 600; }
.review-row .rv-expl { font-size: .85rem; color: var(--muted); margin-top: .3rem; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   Profile: avatar, heatmap, badges · Leaderboard
   ═══════════════════════════════════════════════════════════════════════════ */
.avatar-circle {
  width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
  background: linear-gradient(160deg, var(--gold-300), var(--gold-600));
  color: var(--navy-900);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.5);
}
.avatar-circle.sm { width: 40px; height: 40px; font-size: 1.05rem; }

.heatmap { display: flex; gap: 4px; overflow-x: auto; padding-bottom: .3rem; }
.hm-col { display: flex; flex-direction: column; gap: 4px; }
.hm-cell {
  width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--navy-900);
}
.hm-cell.h0 { background: var(--surface-2); border: 1px solid var(--line); }
.hm-cell.h1 { background: var(--gold-100); }
.hm-cell.h2 { background: var(--gold-300); }
.hm-cell.h3 { background: var(--gold-600); }
.hm-cell.h4 { background: var(--navy); color: var(--gold-300); }
.hm-cell.future { background: transparent; border: 1px dashed var(--line); }

.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 640px) { .badge-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .badge-grid { grid-template-columns: repeat(4, 1fr); } }
.badge {
  text-align: center; padding: 1.1rem .8rem 1rem;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface);
}
.badge.earned {
  border-color: var(--gold-300);
  background: linear-gradient(180deg, var(--gold-50), var(--surface));
  box-shadow: var(--shadow-xs);
}
.badge.locked { opacity: .55; filter: grayscale(.4); }
.badge .b-ico { font-size: 1.9rem; margin-bottom: .3rem; }
.badge .b-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.badge .b-blurb { font-size: .72rem; color: var(--muted); margin: .15rem 0 .4rem; }
.badge .b-bar { height: 5px; border-radius: 3px; background: var(--line);
  overflow: hidden; margin-bottom: .25rem; }
.badge .b-fill { height: 100%; background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); }

.lb-row {
  display: flex; gap: .9rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .8rem 1.05rem;
  box-shadow: var(--shadow-xs);
}
.lb-row.me { border-color: var(--gold-600); box-shadow: var(--shadow-sm), 0 0 0 3px rgba(216,176,76,.15); }
.lb-row.top1 { background: linear-gradient(180deg, var(--gold-50), var(--surface)); border-color: var(--gold-300); }
.lb-rank { width: 34px; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--muted); flex-shrink: 0; }
.lb-body { flex: 1; min-width: 0; }
.lb-name { font-weight: 600; color: var(--ink); }
.lb-xp { font-variant-numeric: tabular-nums; color: var(--gold-700); flex-shrink: 0; }

/* Diagnostic invite card on the path */
.diag-invite {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(216,176,76,.16), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy));
  border-radius: var(--r-lg); padding: 1.2rem 1.4rem;
  margin-bottom: 2rem; box-shadow: var(--shadow-md);
}
.diag-invite .d-body { flex: 1; min-width: 220px; }
.diag-invite h3 { color: #fff; margin: 0 0 .2rem; font-size: 1.08rem; }
.diag-invite p { color: #b9c7d8; margin: 0; font-size: .88rem; }
.auth-shell {
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.6rem, 5vw, 4rem) 20px 4rem;
}
.auth-card {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.6rem, 5vw, 2.5rem);
  position: relative; overflow: hidden;
  animation: fadeUp .5s var(--ease-out) both;
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-300), var(--gold-600) 50%, var(--gold-300));
}
.auth-card.wide { max-width: 560px; }
.auth-head { text-align: center; margin-bottom: 1.6rem; }
.auth-head img { height: 64px; margin: 0 auto .8rem; }
.auth-head h1 { font-size: 1.7rem; margin-bottom: .2rem; }
.auth-head p { color: var(--muted); font-size: .92rem; margin: 0; }
.auth-alt { text-align: center; margin-top: 1.4rem; font-size: .9rem; color: var(--muted); }
@media (min-width: 560px) {
  .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

/* Signpost to the one place student accounts are managed. */
.cc-banner{margin:0 0 18px;padding:12px 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--gold-300);color:var(--ink);font-size:.92rem;line-height:1.5}
.cc-banner a{color:#0b2a49;font-weight:700}

/* ── Inline line icons (replace emojis) ──────────────────────────────────────── */
.icon {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  stroke: currentColor; fill: none;
  flex-shrink: 0;
}
.icon-gold { color: var(--gold-700); }
.icon-navy { color: var(--navy); }
.icon-lg { width: 1.4em; height: 1.4em; }
.icon-xl { width: 2em; height: 2em; }

/* The one line to remember — the same card the Academy shows (28 Aug). */
.rule-card { margin: 1.4rem 0 0; padding: 1.15rem 1.3rem; background: var(--gold-50, #fbf6e7);
             border: 1px solid var(--gold-300, #ecd79a); border-left: 5px solid var(--gold, #d8b04c);
             border-radius: 14px; }
.rule-kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem;
               font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7d6319; }
.rule-kicker .icon { width: 1.05em; height: 1.05em; }
.rule-text { margin: .5rem 0 0; font-size: 1.12rem; line-height: 1.75; font-weight: 500; color: var(--ink, #13233a); }
.rule-text b { color: var(--navy, #0b2a49); font-weight: 600; }

/* ── Phones ──────────────────────────────────────────────────────────────────
 *
 * Added 30 August 2026, after measuring the live estate on a real phone
 * viewport rather than reasoning about it. Three faults, all of them things a
 * student meets before they ever sign in.
 *
 * 1. THE HEADER RAN OFF THE SCREEN.
 *    Grammar was 33px and Vocabulary 36px wider than a 360px Android on their
 *    signed-out home page, and the part hanging off the right edge was the gold
 *    "Create account" button — the single thing those pages exist to ask for.
 *    The whole page scrolled sideways.
 *
 *    The cause was that nothing in that row was allowed to give: `.brand` is
 *    flex-shrink: 0 holding a `white-space: nowrap` name, beside a `.head-nav`
 *    that could not shrink either. When the two did not fit, the header simply
 *    grew and took the page with it.
 *
 *    The brand NAME now absorbs the squeeze, and it is the right thing to
 *    sacrifice: a student knows which app they just opened. The logo and the
 *    buttons never shrink.
 *
 * 2. TAP TARGETS WERE TOO SMALL TO HIT.
 *    "Create account" was 29px tall across the estate. 7 of Grammar's 10
 *    controls and 9 of the Academy's 16 were under 44px. Apple asks for 44,
 *    Android for 48.
 *
 *    Everything here is inside `pointer: coarse`, so a mouse-driven desktop
 *    keeps exactly the proportions it has today. This is a fix for thumbs, not
 *    a restyle — CLAUDE.md rule 1.
 *
 * 3. THE NOTCH.
 *    1,950 lines contained one `safe-area-inset` rule. On a notched phone in
 *    landscape the header ran under the cutout.
 */

/* 1 — the header can no longer overflow, at any width, down to 320px. */
.site-head .inner { min-width: 0; }
.brand { min-width: 0; flex: 0 1 auto; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand .logo-chip { flex-shrink: 0; }
.head-nav { flex-shrink: 0; min-width: 0; }

/* One more step below the existing 520px breakpoint. A 360px Android is the
 * most common screen these apps are opened on, and 520px was still tuned for
 * something wider. */
@media (max-width: 420px) {
  .site-head .inner { padding-left: 10px; padding-right: 10px; gap: .4rem; }
  .brand { gap: .45rem; }
  .head-nav { gap: .25rem; }
  .head-nav .head-link { padding: .4rem .5rem; font-size: .82rem; }
  .head-nav .btn-sm { padding: .4rem .7rem; font-size: .78rem; }

  /* Below this width the app name and the two buttons genuinely do not fit —
   * measured, not guessed: "BayRen Grammar" + "Sign in" + "Create account"
   * needs about 410px. Something has to go, and it is the wordmark, because
   * the logo still says BayRen and the student knows which app they opened.
   *
   * Hidden outright rather than left to the ellipsis below: "BayRen Gra…"
   * looks like a rendering fault, and a fault is the one thing a sign-up
   * header must not look like. The ellipsis stays as the safety net for the
   * widths in between, and for a longer app name than any we ship today. */
  .brand-name { display: none; }
}

/* 2 — a thumb can hit everything. Touch devices only. */
@media (pointer: coarse) {
  .btn,
  .head-link,
  .icon-btn,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
  /* Inline links inside prose are deliberately NOT enlarged — spacing a
   * paragraph out to 44px a line would wreck the reading rhythm the Academy's
   * lesson cards depend on. Only controls. */
  .btn-sm { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }

  /* Checkboxes and radios — "keep me signed in" is one of these, and it was
   * a 13px square. */
  input[type="checkbox"],
  input[type="radio"] { min-width: 22px; min-height: 22px; }

  /* Stop the grey flash on tap; it reads as a rendering fault, not feedback. */
  a, button, .btn, .head-link, [role="button"] {
    -webkit-tap-highlight-color: rgba(216,176,76,.18);
  }
}

/* 3 — stay clear of the notch and the home indicator. */
.site-head .inner {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
@media (max-width: 520px) {
  .site-head .inner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}
@media (max-width: 400px) {
  .site-head .inner {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
.site-foot { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }


/* ════════════════════════════════════════════════════════════════════════════
   THE CAPSULE-AND-TABLET SKIN — opt-in, per app  (4 September 2026)

   Asaf: "I actually like the colored capsule, tablet style … it makes things
   easier to see visually", "the white background looks clean, and the colorful
   decorative elements will add life", and no more leading with gold and navy.
   The full brief is in BayRen Platform/docs/design-system.md.

   WHY IT IS BEHIND A CLASS.
   This file is shared, byte-identical, by FIVE apps: Reading, Listening,
   Speaking, Grammar and the Academy. Asaf asked for the Academy to be LAST —
   he wants to live with the new look before its flat "Paper & line" home is
   touched. An unconditional block here would restyle it tonight. So the skin
   only applies under `body.br-skin`, and an app opts in by putting that class
   on its <body> and linking tokens.css + components.css ahead of this file.
   Removing the class removes the skin; nothing else has to move.

   HOW IT WORKS.
   Two halves. The FIRST re-points this sheet's legacy token names at the
   design-system tokens, so every rule above — and every app sheet that says
   var(--gold) or var(--navy), which is 81 places in Reading's practice.css
   alone — takes the new palette without being rewritten. The SECOND re-dresses
   the handful of shapes that carry their colour as a literal (the header's
   navy gradient, the gold button, the sunrise hero) and cannot follow a token.

   The aliases sit on `body`, not `:root`, on purpose: this file declares
   :root TWICE (lines 63 and 710) and the second wins, so a third would be a
   coin-toss to read. Custom properties inherit, and everything visible is
   inside <body>.
   ════════════════════════════════════════════════════════════════════════════ */

body.br-skin {
  /* ── Brand ───────────────────────────────────────────────────────────────
     GOLD IS RETIRED from the interface; it survives in the logo artwork only.
     Anything that was gold takes AMBER, the new palette's yellow and the
     closest honest home for it. NAVY survives as the ink — that is what still
     ties a page to the logo. */
  --navy-950: #08131f;  --navy-900: #0a1622;  --navy-800: #0f1f30;
  --navy-700: #1d3854;  --navy: var(--d-ink);
  /* The two pale navies were a fixed backdrop; they follow the page now,
     for the same reason gold does — a component that names a hue cannot
     be repainted by one word on <body>. */
  --navy-100: var(--tone-edge);  --navy-50: var(--tone-tint);
  --gold-700: var(--tone);      --gold-600: var(--tone);
  --gold: var(--tone);          --gold-300: var(--tone-edge);
  --gold-100: var(--tone-tint); --gold-50: var(--tone-tint);
  /* Gold is aimed at --tone, not at a fixed amber. That is what makes 110
     gold accents in this sheet — hairlines, rules, fills, the auth card's top
     bar, the badge meter — follow the page's own colour instead of all going
     yellow. One word on <body> repaints every one of them, which is the whole
     idea Asaf picked. Custom properties resolve where they are USED, so a
     nested .tone-rose repaints only its own subtree. */

  /* ── Ground and ink ────────────────────────────────────────────────────── */
  --bg: var(--d-ground);       --surface: var(--d-ground);
  --panel: var(--d-ground);    --surface-2: var(--d-sunken);
  --ink: var(--d-ink);         --text: var(--d-muted);
  --muted: var(--d-muted);
  --line: var(--d-line);       --line-strong: var(--d-line-strong);

  /* ── The four signals. Never re-toned for decoration ─────────────────────
     These MUST come from the --d- names: this sheet declares --correct and
     --wrong itself, on :root, and a `var(--correct)` here would be circular
     and silently drop the declaration. The estate's own green and red failed
     the contrast check on their own tints, which is why the design system's
     are a shade deeper. */
  --correct: var(--d-correct);  --correct-bg: var(--d-correct-bg);
  --wrong: var(--d-wrong);      --wrong-bg: var(--d-wrong-bg);
  --warn: var(--d-warn);        --warn-bg: var(--d-warn-bg);
  --info-bg: var(--d-info-bg);

  /* ── Type and shape ──────────────────────────────────────────────────────
     Playfair goes; the estate reads in Cormorant now. Bengali is kept in the
     body stack — dropping it renders Bangla in a fallback with no conjuncts. */
  --font-display: var(--d-font-display);
  --font-body: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, sans-serif;
  --r-xs: var(--d-r-sm);   --r-sm: var(--d-r-input);  --r-md: var(--d-r-tablet);
  --r-lg: var(--d-r-tablet);

  /* ── Depth: ONE shadow. Stacked shadows make a page a pile of boxes ────── */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: var(--d-shadow);
  --shadow-lg: var(--d-shadow);
  --shadow-gold: none;

  background: var(--d-ground);
}

/* ── The header: white with a hairline, not a navy slab ────────────────────── */
body.br-skin .site-head {
  background: var(--d-ground);
  border-bottom: 1px solid var(--d-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.br-skin .brand-name { color: var(--d-ink); }
/* THE BRAND MARK IS THE ONE THING THAT MUST NOT REPAINT.
   `.hl` is the "Ren" in the wordmark beside the logo. Aimed at --tone it
   changed colour on every page — indigo on the home, blue on sign-in — while
   the logo artwork beside it stayed put, so the two halves of the lockup
   disagreed. Asaf's first decision was "the logo does not change". Gold is
   retired from the interface and AMBER is its documented successor, so the
   wordmark keeps its two tones and keeps them everywhere. This is the only
   place in the skin that names a hue, and that is exactly the point.

   SCOPED TO THE BRAND. `.hl` is not only the wordmark: the landing pages use
   it to highlight a word in the HEADLINE too ("Own the language.", "We'll
   teach you to swim.", a number in a stat). Pinned globally it made those
   amber on a green page — the brand exception leaking into page content. It
   is the brand ONLY inside the brand; everywhere else it follows the page. */
body.br-skin .brand .hl,
body.br-skin .brand-name .hl,
body.br-skin .nav-brand .hl { color: var(--amber-solid); }
body.br-skin .hl { color: var(--tone); }
body.br-skin .logo-chip { box-shadow: none; background: transparent; padding: 0; }
body.br-skin .head-link { color: var(--d-muted); }
body.br-skin .head-link:hover { color: var(--tone); background: var(--tone-tint); }

/* ── Buttons become capsules ───────────────────────────────────────────────
   The gradients go with the gold. A flat fill in the page's tone is the whole
   point of "colour chosen per page": the same button is amber on one screen
   and teal on the next, with one class on <body>. */
body.br-skin .btn {
  border: 1.5px solid transparent;
  border-radius: var(--d-r-capsule);
  box-shadow: none;
}
body.br-skin .btn:hover { transform: none; box-shadow: none; }
body.br-skin .btn-gold {
  background: var(--tone); color: #fff;
  box-shadow: none;
}
body.br-skin .btn-gold:hover { background: var(--tone); filter: brightness(1.08); color: #fff; }
body.br-skin .btn-navy {
  background: transparent; color: var(--tone); border-color: var(--tone);
  box-shadow: none;
}
body.br-skin .btn-navy:hover { background: var(--tone-tint); color: var(--tone); }
body.br-skin .btn-ghost {
  background: transparent; color: var(--d-muted);
  border-color: var(--d-line-strong); box-shadow: none;
}
body.br-skin .btn-ghost:hover {
  background: var(--d-sunken); color: var(--d-ink);
  border-color: var(--d-line-strong); box-shadow: none;
}

/* ── Cards become tablets ──────────────────────────────────────────────────── */
body.br-skin .card {
  background: var(--d-ground);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-tablet);
  box-shadow: none;
}
body.br-skin .card-hover:hover {
  transform: none;
  box-shadow: var(--d-shadow);
  border-color: var(--tone-edge);
}

/* ── Chips become capsules ─────────────────────────────────────────────────── */
body.br-skin .chip { border-radius: var(--d-r-capsule); }
body.br-skin .chip-navy {
  background: var(--tone-tint); color: var(--tone); border-color: var(--tone-edge);
}
body.br-skin .chip-green {
  background: var(--d-correct-bg); color: var(--d-correct); border-color: #bfe3d0;
}

/* ── The landing hero: a soft tint, not a navy night sky ───────────────────
   `.sunrise` painted a navy gradient with a gold glow at the top — the one
   thing on the site that fought the white page. It becomes the tone's tint,
   so the ink stays readable and the hero still reads as a distinct band. */
body.br-skin .sunrise {
  background: var(--tone-tint);
  color: var(--d-ink);
  border-bottom: 1px solid var(--tone-edge);
}
body.br-skin .sunrise h1,
body.br-skin .sunrise h2 { color: var(--d-ink); }
body.br-skin .hero .lead { color: var(--d-muted); }
body.br-skin .hero-note { color: var(--d-muted); }
body.br-skin .eyebrow { color: var(--tone); }
/* The wave was a shape cut out of the navy. On a tint it has nothing to cut. */
body.br-skin .hero-wave { display: none; }

/* ── Fields ────────────────────────────────────────────────────────────────── */
body.br-skin .auth-form input,
body.br-skin .auth-form select,
body.br-skin .auth-form textarea {
  border-radius: var(--d-r-input);
  border: 1.5px solid var(--d-line-strong);
}
body.br-skin .auth-form input:focus,
body.br-skin .auth-form select:focus,
body.br-skin .auth-form textarea:focus {
  border-color: var(--tone);
  box-shadow: 0 0 0 3px var(--tone-tint);
  outline: none;
}

/* ── The tap highlight was a gold wash ─────────────────────────────────────── */
body.br-skin a, body.br-skin button, body.br-skin .btn,
body.br-skin .head-link, body.br-skin [role="button"] {
  -webkit-tap-highlight-color: rgba(20,40,60,.10);
}

/* ── The hero's second button ──────────────────────────────────────────────
   `.btn-ghost-light` was white text on a translucent white with a white inset
   ring — which only works against the navy sky the hero used to be. On a soft
   tint it disappeared completely: invisible, and still clickable. It becomes
   an outlined capsule like every other secondary button. */
body.br-skin .btn-ghost-light {
  background: transparent;
  color: var(--tone);
  border-color: var(--tone-edge);
  box-shadow: none;
}
body.br-skin .btn-ghost-light:hover {
  background: var(--tone-tint);
  color: var(--tone);
  border-color: var(--tone);
  box-shadow: none;
}

/* ── A signed-in header with six links ─────────────────────────────────────
   Core already stops the header overflowing by letting the brand NAME absorb
   the squeeze (see the block above, written for the signed-OUT header: a name
   plus two buttons). That fix assumes the nav itself is small. Speaking's
   signed-in nav is six links — Home, Speaking, Progress, Account, Academy,
   Sign out — and `.head-nav { flex-shrink: 0 }` means it refuses to give, so
   at 375 px the header was 447 px wide and took the whole page sideways with
   it. Reading's four links happen to fit, which is why it never showed there.

   The nav scrolls inside itself instead. Every link stays reachable, no link
   is hidden behind a menu, nothing moves on a desktop, and the PAGE stops
   scrolling sideways — which is the rule that actually matters. A no-op for
   any header whose links already fit. */
@media (max-width: 620px) {
  body.br-skin .head-nav {
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.br-skin .head-nav::-webkit-scrollbar { display: none; }
  /* …and the links themselves never squash, or they would compress to fit and
     lose the 44 px thumb target the block above just guaranteed. */
  body.br-skin .head-nav > * { flex-shrink: 0; }
}

/* ── The footer: the last piece of the old look ────────────────────────────
   `.site-foot` is declared twice in this sheet and the second wins: a navy
   gradient slab with a gold hairline above it. On a white page it is a black
   bar across the bottom of every screen — the same thing the header was, and
   the same answer. White, one hairline, quiet type. */
body.br-skin .site-foot {
  background: var(--d-ground);
  color: var(--d-muted);
  border-top: 1px solid var(--d-line);
}
body.br-skin .site-foot a { color: var(--d-muted); }
body.br-skin .site-foot a:hover { color: var(--tone); }
/* --d-faint is documented for large text and UI only (3.0:1). The footer
   tagline is small italic body text, so it takes --d-muted and clears 4.5:1. */
body.br-skin .foot-tag { color: var(--d-muted); }

/* ════════════════════════════════════════════════════════════════════════════
   GRAMMAR'S PATH SCREEN — the light-on-navy pieces (4 September 2026)

   Everything here was written to sit on a navy ground, so its text is white or
   a pale blue-grey LITERAL. Those literals cannot follow a token, and when the
   ground turned into a soft tint they stayed light: measured on the live page,
   "Level" came out at 1.16:1 and "Today's goal" at 1.98:1 against the hero.
   That is not dim, it is invisible — the readable floor is 4.5:1.

   Each rule below is the same fix: give the words back the ink they need now
   the ground is pale. Nothing is repositioned; this is a colour pass.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── The hero band and its three metrics ──────────────────────────────────── */
body.br-skin .path-hero .sub { color: var(--d-muted); }
body.br-skin .path-hero .metric-pill {
  background: var(--d-ground);
  border: 1px solid var(--tone-edge);
}
body.br-skin .metric-pill .mval { color: var(--d-ink); }
body.br-skin .metric-pill .mlab { color: var(--d-muted); }
/* The streak number was a fixed orange. It takes the page's colour like
   everything else: the design system allows exactly FOUR fixed meanings
   (correct, wrong, waiting, info) and a streak is not one of them. Pinning it
   to amber would have quietly made a fifth, and the flame glyph beside it
   inherits currentColor, so the two now agree instead of clashing. */
body.br-skin .metric-pill.flame .mval { color: var(--tone); }
body.br-skin .xp-ring .ring-label b { color: var(--d-ink); }
body.br-skin .xp-ring .ring-label span { color: var(--d-muted); }
body.br-skin .goal-bar .g-row { color: var(--d-muted); }
body.br-skin .goal-bar .g-row .met { color: var(--correct); }

/* ── The two navy slabs ────────────────────────────────────────────────────
   `.diag-invite` (the placement-test invitation) and `.test-card` (a unit's
   test) were gradient slabs with a gold glow. They are the signature blocks of
   this screen, so they become tab-tablet-ish: white, outlined in the tone, ink
   type. The gradient goes — nothing on a white page needs a night sky. */
body.br-skin .diag-invite {
  background: var(--tone-tint);
  border: 1px solid var(--tone-edge);
  box-shadow: none;
}
body.br-skin .diag-invite h3 { color: var(--d-ink); }
body.br-skin .diag-invite p { color: var(--d-muted); }

body.br-skin .test-card {
  background: var(--d-ground);
  border: 1.5px solid var(--tone);
  color: var(--d-ink);
  box-shadow: none;
}
body.br-skin .test-card:hover { box-shadow: var(--d-shadow); transform: none; }
body.br-skin .test-card .tc-body b { color: var(--d-ink); }
body.br-skin .test-card .tc-sub { color: var(--d-muted); }
body.br-skin .test-card.final { box-shadow: none; border-width: 2px; }
body.br-skin .test-card.revision { border-color: var(--d-line); }
body.br-skin .test-card.revision .tc-body b { color: var(--d-ink); }
body.br-skin .test-card.revision .tc-sub { color: var(--d-muted); }

/* ── The outlined button that lived on those slabs ─────────────────────────
   White text with a white ring: the same defect as .btn-ghost-light on the
   Reading hero, and the same fix. */
body.br-skin .btn-outline-light {
  background: transparent;
  color: var(--tone);
  border-color: var(--tone-edge);
  box-shadow: none;
}
body.br-skin .btn-outline-light:hover {
  background: var(--tone-tint); color: var(--tone);
  border-color: var(--tone); box-shadow: none;
}

/* ── The current page's nav link ───────────────────────────────────────────
   A gold wash behind muted grey text: 2.65:1, under the floor, and gold is
   retired anyway. */
body.br-skin .head-link.active {
  color: var(--tone);
  background: var(--tone-tint);
}

/* ── The unit medal ───────────────────────────────────────────────────────── */
body.br-skin .level-band .lv-medal.done {
  background: var(--tone); color: #fff;
}
body.br-skin .level-band .lv-progress b { color: var(--tone); }

/* ════════════════════════════════════════════════════════════════════════════
   THE LAST SIXTEEN GOLDS (4 September 2026)

   Aliasing --gold onto --tone repainted 110 accents at once, but only the ones
   that ASK for the token. Sixteen rules in this sheet paint the retired gold
   as a literal — rgba(216,176,76,…), #e3bd5e, #ecd79a — and a literal cannot
   follow anything. They were found by parsing the sheet, not by eye, because
   the ones that show up are the ones on screens nobody happened to open. The
   gold hairline under Grammar's hero was the first to appear.

   Each takes the page's tone, so the whole estate finally changes colour with
   one word. (The `--gold-*` variables THEMSELVES stay declared as gold on
   :root — an app that has not opted into the skin must keep exactly the look
   it has today.)
   ════════════════════════════════════════════════════════════════════════════ */

/* The hairline under a hero band. */
body.br-skin .sunrise::after {
  background: linear-gradient(90deg, transparent, var(--tone-edge), transparent);
}

/* Cards and panels that carried a gold glow or a gold ground. */
body.br-skin .formula-card,
body.br-skin .ielts-card {
  background: var(--tone-tint);
  border: 1px solid var(--tone-edge);
}
body.br-skin .rule-card {
  background: var(--tone-tint);
  border-color: var(--tone-edge);
}
body.br-skin .review-card {
  background: var(--tone-tint);
  border: 1px solid var(--tone-edge);
}
body.br-skin .mock-wrap::before { background: none; }

/* The two things that mark "this one is yours": the current topic on the path
   and your own row in the leaderboard. A ring in the page's colour. */
body.br-skin .topic-node.current {
  border-color: var(--tone);
  box-shadow: 0 0 0 4px var(--tone-tint);
}
body.br-skin .lb-row.me {
  border-color: var(--tone);
  box-shadow: 0 0 0 3px var(--tone-tint);
}

/* XP badges and the floating award chips. */
body.br-skin .fb-xp,
body.br-skin .float-xp {
  background: var(--tone);
  color: #fff;
}
body.br-skin .float-streak {
  background: var(--d-ground);
  color: var(--d-ink);
  border: 1px solid var(--tone-edge);
}
body.br-skin .xp-toast {
  background: var(--tone);
  color: #fff;
  box-shadow: var(--d-shadow);
}

/* The landing page's decorations. */
body.br-skin .hero .logo-plate { box-shadow: none; border: 1px solid var(--d-line); }
body.br-skin .hero-trust .dotline { background: var(--tone-edge); }

/* The pulse that draws the eye to the next thing to do. It was a gold ring
   expanding out of the element; a keyframe cannot read a variable set on an
   element, so the animation is redeclared here rather than patched. */
@keyframes br-pulse-tone {
  0%   { box-shadow: 0 0 0 0 var(--tone-edge); }
  70%  { box-shadow: 0 0 0 14px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
body.br-skin .pulse,
body.br-skin .topic-node.current .tn-dot { animation-name: br-pulse-tone; }

/* ── Page sub-headings and breadcrumbs ─────────────────────────────────────
   `.sub`, `.crumbs` and `.bn-sub` are pale blue-grey literals (#9fb0c4) —
   fine under a navy page head, 2.0:1 on white. `.path-hero .sub` was fixed
   above; these are the same colour on every OTHER page that has a heading.
   (Grammar's leaderboard and tests pages also carried the hex as an INLINE
   style, which beats any stylesheet — removed in the templates, not here.) */
body.br-skin .sub { color: var(--d-muted); }
body.br-skin .page-head .crumbs { color: var(--d-muted); }
body.br-skin .page-head .crumbs a { color: var(--tone); }
body.br-skin .page-head .bn-sub { color: var(--d-muted); }

/* ── The SIGNED-OUT landing pages ──────────────────────────────────────────
   Found on the live sites, not in the preview: every check until now was run
   on a SIGNED-IN page, and these are the screens a brand-new student meets
   first. They were built for a navy hero and their type is light literals, so
   on a tint the hero paragraph measured 1.45:1 and the product mock-up 1.00:1.
   Invisible, on the front door. */
/* `.sunrise p` colours EVERY paragraph in a hero band, which is what actually
   painted Speaking's lead (not `.hero .lead` — its markup is
   .sunrise > .hero-inner > p.lead, so the narrower rule never matched). Both
   are named, and `.lead` on its own as the backstop. */
body.br-skin .sunrise p,
body.br-skin .hero .lead,
body.br-skin .lead,
body.br-skin .cta-band .lead,
body.br-skin .stat .l { color: var(--d-muted); }
body.br-skin .sunrise .eyebrow { color: var(--tone); }
body.br-skin .hero-stats .n { color: var(--d-ink); }
/* Grammar's landing shows a mock lesson card. Its formula chips were white on
   a white-tinted card. */
body.br-skin .formula-card .fx {
  color: var(--tone);
  background: var(--tone-tint);
  border-color: var(--tone-edge);
}
/* The optional part of a formula reads quieter than the required parts, but
   it still has to be readable — it was carrying an inline --gold-300, which is
   the tone's EDGE colour: a hairline, never type. */
body.br-skin .formula-card .fx.fx-opt { color: var(--d-muted); background: var(--d-sunken); border-color: var(--d-line); }
body.br-skin .mock-card { background: var(--d-ground); border: 1px solid var(--d-line); }
body.br-skin .mock-tag { color: var(--d-muted); }
body.br-skin .mock-progress .pd.on { background: var(--tone); }

/* ── The palette cycle, made visible ───────────────────────────────────────
   `br-cycle` (tokens.css) hands each child of a grid its own hue. It sets
   variables and paints nothing, so the pieces that should CARRY the colour are
   named here. Asaf, 4 Sep: one accent estate-wide, and the colour comes from
   the cards — not from which app you happen to be in. */

/* The hairline across the top of a card was a gold gradient; it becomes the
   card's own hue, which is what makes a grid read as a set of six colours. */
body.br-skin .card-gold-top::before {
  background: var(--tone);
  height: 3px;
}
/* A passage / topic card takes its hue on hover and on its chip. */
body.br-skin .br-cycle > .card:hover { border-color: var(--tone); }
body.br-skin .br-cycle .pcard-top .chip { background: var(--tone-tint); color: var(--tone); border-color: var(--tone-edge); }

/* The Control Center's five figures: each tile its own colour, in the same
   order as every other grid in the estate. */
body.br-skin .br-cycle > .stat b { color: var(--tone); }
body.br-skin .br-cycle > .stat { border-color: var(--tone-edge); }
body.br-skin .br-cycle > .stat:hover { background: var(--tone-tint); }
/* …except the two that MEAN something. A count of people waiting is a signal,
   and a signal never takes a decorative colour. */
body.br-skin .br-cycle > .stat.is-pending b { color: var(--warn); }
body.br-skin .br-cycle > .stat.is-blocked b { color: var(--wrong); }