/* ==========================================================================
   Base — Reset, Typography, Utilities
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--neutral-800);
  background: var(--neutral-100);
  min-height: 100vh;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  color: var(--neutral-900);
  line-height: var(--leading-tight);
  font-weight: var(--font-semibold);
}

h1 { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
h2 { font-size: var(--text-xl);  margin-bottom: var(--space-4); }
h3 { font-size: var(--text-lg);  margin-bottom: var(--space-3); }
h4 { font-size: var(--text-md);  margin-bottom: var(--space-2); }

p { margin-bottom: var(--space-3); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* --- Tap latency (substory #708) ---

   Mobile browsers hold a tap on a link or a button for ~300ms in case a second
   tap follows and means "zoom". `touch-action: manipulation` declares the
   element is never a double-tap target, so the browser dispatches the click
   immediately. Every control on the page waited that 300ms before this rule
   existed — measured on beta: all 8 visible controls reported `auto`.

   `manipulation` and not `none`: `none` also drops the delay, and drops
   scrolling and pinch-zoom with it. A page that cannot be panned, or a control
   a low-vision user cannot magnify, is a worse page than a slow one.
   `manipulation` removes the double-tap gesture and keeps the rest.

   The property does NOT inherit, so a rule on `body` would reach nothing: the
   selectors have to name the elements. They are element-level rather than the
   component classes (`.btn`, `.sim-btn`, `.auth-btn`, `.upload-btn`,
   `#send-btn`, the checklist's own controls) for the same reason — a class list
   is a list of the controls we remembered, and this is the reset sheet every
   page loads, including pages not yet written. `input[type=submit|button]` are
   buttons wearing a different tag. Deliberately NOT `select`, `textarea` or
   text inputs: those are not double-tap targets to begin with, and claiming
   them here would reach wider than the substory asks. */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  touch-action: manipulation;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--neutral-200);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  background: var(--neutral-200);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-bottom: var(--space-3);
}
pre code { background: none; padding: 0; }

hr {
  border: none;
  border-top: 1px solid var(--neutral-300);
  margin: var(--space-6) 0;
}

/* --- Utility Classes --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--neutral-600); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }

.hidden { display: none !important; }
.visible { display: flex; }

/* --- RTL Support --- */

/* Bug #840. This used to declare `font-family` here, and it never reached a
   single character of Urdu: `[dir="rtl"]` is the `<html>` element, and
   `body { font-family: var(--font-family) }` at the top of this file re-states
   the family for everything inside `body`, so it won. `document.fonts`
   on /ur/ held six Noto Nastaliq Urdu faces and every one of them reported
   `status: "unloaded"` — nothing on the page ever asked to render text in the
   face, so the browser never fetched it, and a whole locale rendered in a
   Latin-first fallback while the `<link>` in base.html sat there looking correct.

   Re-pointing the TOKEN instead of declaring the property is what makes it win
   everywhere at once. `--font-family` is read by `body` (base.css:11) and by
   every control that re-declares its own family — `.input-area textarea`,
   `.input-area button`, `.auth-btn`, `.pathway-select-btn` and the rest — which
   matters because form controls do NOT inherit `font-family` from their
   ancestors: the composer the reader types Urdu INTO is the one element a
   `body`-only fix would leave in the Latin fallback.

   The fallback tail is `var(--sim-font)`, not `var(--font-family)`: a custom
   property that references itself is a cycle, and a cyclic `var()` computes to
   the guaranteed-invalid value, which would leave the page with no family at
   all. `--sim-font` (design-system.css) is the Latin stack `--font-family`
   already resolves to, so the stack below is the old one with Nastaliq in front.

   `.sim-langswitch__code` and `.msg code` read `--sim-font` / `--font-mono`
   directly and so stay Latin and monospace on purpose — a two-letter language
   code and a code span are not Urdu text. */
[dir="rtl"] {
  --font-family: 'Noto Nastaliq Urdu', 'Noto Sans', var(--sim-font);
  word-break: normal;
  overflow-wrap: break-word;
}
[dir="rtl"] code, [dir="rtl"] pre {
  direction: ltr;
  text-align: left;
  /* Bug #840: `pre` reads `--font-family`, which now carries Nastaliq. Code is
     not Urdu text, and it is already forced to LTR one line above. */
  font-family: var(--font-mono);
}