/* The web's global stylesheet. Linked from public/index.html; the phone never loads it.
   Amendment 04 (2026-09-13): the browser wears the phone's Quiet Instrument system, so this
   file holds NO palette. Every colour comes from src/lib/quiet.ts through the components.
   What is left here is only what react-native-web cannot express in a style object. */

html, body {
  background: #F2F2F7; /* quiet.bg, painted before React mounts. The only literal in this file. */
  font-family: -apple-system, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  /* SF Pro is drawn for a retina phone screen; unsmoothed on a desktop browser it renders a
     half-weight heavier than the same type on the phone. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Every price, mileage, date, percentage and axis label lines up in a column.
     react-native-web only reaches the elements it styles; this reaches the rest. */
  font-variant-numeric: tabular-nums;
}

/*
 * react-native-web's Text primitive hard-codes its ambient default as `font: '14px System'`,
 * which createReactDOMStyle.js string-replaces with its own OS stack before the rule is ever
 * written, so a face declared under the name "System" cannot intercept it. Text.tsx marks its
 * own output with
 * `data-shifty-text`, so this targets exactly the complementary set: the 48 files that import
 * Text straight from 'react-native' and carry only that ambient default. Without it they render
 * in react-native-web's stack (BlinkMacSystemFont, Segoe UI, Roboto) rather than ours.
 *
 * Do NOT widen this selector to every div: it sits above a plain class, so it would also beat
 * Text.tsx's own per-variant styles, which only win at parity through react-native-web's
 * insertion-group ordering.
 */
div[dir]:not([data-shifty-text]) {
  font-family: -apple-system, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
}

/*
 * Tabular figures on every number, which is the one type rule the design system
 * says does not bend (brief section 3.10). The `html, body` declaration above
 * cannot do it alone: react-native-web writes its Text default as the `font`
 * SHORTHAND, and that shorthand resets font-variant to normal on every element
 * it renders, so an inherited value never reaches a price. This selector is
 * element+attribute, one step above a single class, so it lands on top of that
 * default. It says the same thing as react-native-web's own tabular-nums
 * atomic class, so a component that asks for tabular figures itself is
 * unaffected.
 */
div[dir], span[dir] { font-variant-numeric: tabular-nums; }

/* DOM h1/p used by the web screens carry ~21px/~16px of UA margin that react-native-web layout
   does not expect. `balance` keeps a two-line heading from leaving one orphan word. */
.desk-headline { text-wrap: balance; margin: 0; }
.desk-prose { text-wrap: pretty; margin: 0; }

/* Every photograph carries a 1px inset outline at 10% black (the design system's photo rule).
   Pure black, never a tinted neutral: a tint picks up the surface beneath and reads as dirt on
   the edge. `outline` rather than `border` so it costs no layout, and inset so it follows the
   image's own rounded corner. */
img { outline: 1px solid rgba(0, 0, 0, 0.10); outline-offset: -1px; }

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