/* ==========================================================================
   Reset + base typography + prose
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 2;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "ss03";  /* Space Grotesk's single-storey a and straight g */
  margin: 0;
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: -0.011em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p, ul, ol, dl, figure, table, pre, blockquote { margin: 0; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
  border-radius: var(--r-xs);
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

ul, ol { padding-left: 1.35em; }
li + li { margin-top: var(--sp-1); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

::selection { background: var(--selection); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.925em;
  font-variant-ligatures: none;
}

kbd {
  display: inline-block;
  padding: 0.1em 0.42em;
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

table { border-collapse: collapse; width: 100%; }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--fw-semi);
  border-radius: var(--r-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--sp-2); }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.stack > * + * { margin-top: var(--flow, var(--sp-4)); }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ---------- Prose (lesson body) ---------- */
.prose {
  max-width: var(--measure);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text);
}
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose h4 { margin-top: var(--sp-5); }
.prose strong { font-weight: var(--fw-semi); color: var(--text); }
.prose em { font-style: italic; color: var(--text); }
.prose code:not(pre code) {
  padding: 0.12em 0.36em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text);
  white-space: nowrap;
}
.prose ul, .prose ol { color: var(--text); }
.prose blockquote {
  padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-dim);
  font-style: italic;
}
.prose blockquote cite {
  display: block;
  margin-top: var(--sp-2);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* ---------- Boot + noscript ---------- */
.boot {
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  min-height: 100dvh;
  color: var(--text-dim);
}
.boot__logo {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  font: var(--fw-bold) 1.25rem/1 var(--font-mono);
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), #b58cff);
  border-radius: var(--r-md);
  animation: boot-pulse 1.4s var(--ease) infinite;
}
@keyframes boot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.92); opacity: 0.7; }
}
.boot__text { font-size: var(--fs-sm); }

.noscript {
  max-width: 60ch;
  margin: var(--sp-8) auto;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.noscript > * + * { margin-top: var(--sp-4); }

/* ---------- Print (cheatsheet) ---------- */
@media print {
  .app-header, .sidebar, .lesson-nav, .playground__toolbar, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; font-size: 11pt; }
  pre { border: 1px solid #ccc; page-break-inside: avoid; }
}

/* ==========================================================================
   Multi-script typography.
   Latin metrics do not fit every script: Tamil and Devanagari need more leading
   for their marks, Arabic needs a larger optical size at the same point size, and
   Japanese reads better slightly looser. Setting this per language costs nothing
   for the English reader and stops mixed-script lessons looking broken.
   ========================================================================== */

:lang(ta) { font-size: 1.04em; line-height: 1.9; }
:lang(hi), :lang(mr), :lang(ne), :lang(sa) { line-height: 1.88; }
:lang(ar), :lang(fa), :lang(ur) { font-size: 1.06em; line-height: 1.9; }
:lang(ja), :lang(zh), :lang(ko) { line-height: 1.8; font-feature-settings: "palt"; }

/* Right-to-left content inside an otherwise left-to-right lesson. */
[dir="rtl"] { text-align: right; }

/* Numerals stay tabular wherever they line up in a column or a timer. */
.stat__n,
.mono,
.tabular,
.teacher-bar__time,
.wftime { font-variant-numeric: tabular-nums; }

/* The display face is only used at large sizes; below ~18px it loses its advantage. */
.hero__title,
.card__title,
.stat__n,
.modal__title { font-family: var(--font-display); }

/* ==========================================================================
   Pre-rendered page content (tools/build-seo.mjs).

   This is what a crawler indexes, what a JavaScript-disabled visitor reads, and
   what paints before the app hydrates. It gets real reading typography rather
   than being hidden, because a fast, readable first paint is the entire point.
   The router replaces it the moment the app takes over.
   ========================================================================== */

.prerender {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-9);
}
.prerender > * + *,
.prerender article > * + * { margin-top: var(--sp-4); }
.prerender h1 { margin-top: var(--sp-5); }
.prerender h2 { margin-top: var(--sp-6); }
.prerender h3, .prerender h4 { margin-top: var(--sp-5); }
.prerender p, .prerender li { color: var(--text-dim); }
.prerender ul, .prerender ol { padding-left: var(--sp-5); }
.prerender li + li { margin-top: var(--sp-2); }
.prerender pre {
  padding: var(--sp-3);
  overflow-x: auto;
  color: var(--text);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-sm);
}
.prerender code { color: var(--tok-str); }
.prerender pre code { color: inherit; }
.prerender aside {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
}
.prerender blockquote {
  padding-left: var(--sp-4);
  border-left: 3px solid var(--border-strong);
  font-style: italic;
}
.prerender table { width: 100%; border-collapse: collapse; }
.prerender th, .prerender td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.prerender dt { font-weight: var(--fw-semi); color: var(--text); }
.prerender dd { margin: var(--sp-1) 0 var(--sp-3); color: var(--text-dim); }
.prerender nav { font-size: var(--fs-sm); color: var(--text-faint); }
.prerender a { color: var(--accent); }