/* ═══════════════════════════════════════════════════════════════════════════
   BASE - the reset both surfaces share
   ═══════════════════════════════════════════════════════════════════════════
   Loaded after tokens.css and before the surface's own stylesheet. Only rules
   that are true of every page on the site belong here; anything that differs
   between the marketing page and the app (the body layout, how a link is
   coloured, the type scale) stays with that surface.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* Rem-relative, and deliberately a percentage rather than a literal 16px, so a
   person who raises their browser default scales the entire site (WCAG 1.4.4).
   1rem is their default, nominally 16px. Never hardcode a px value here. */
html { font-size: 100%; }

/* The page transitions start a view a few px off to the side. On a phone,
   anything wider than the screen makes the browser widen the layout viewport
   to fit it - for the length of the slide the page was 398px on a 390px
   screen, shifting everything centred on it. body's own overflow-x does not
   stop that; it has to be clipped at the root. `clip`, unlike `hidden`, makes
   no scroll container, so sticky positioning is unaffected. */
html { overflow-x: clip; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-variation-settings: "wdth" var(--wd-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Form controls do not inherit the document font by default - the UA `font`
   shorthand sets its own family and size, and resets line-height to normal.
   Without this an icon-only button sits at the UA's 13.33px rather than on the
   surface's scale, and any text added to one later renders off-scale. */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Both surfaces set `display` on elements they also toggle with `hidden`, and
   an author `display` outranks the UA's `[hidden] { display: none }` by origin
   - so without this the attribute silently stops working on them.

   The two exemptions are the motion layer's `hidden`-driven surfaces. A
   `display: none` box has no computed style to transition from, so a popover
   or badge toggled by the attribute can only animate if it stays laid out
   while closed; `.t-pop` and `.t-badge` take opacity, transform and stepped
   `visibility` instead. Both are absolutely positioned, so a laid-out closed
   state costs the page nothing. See styles/motion.css. */
[hidden]:not(.t-pop):not(.t-badge) { display: none !important; }

::selection { background: var(--accent-fill); color: var(--accent-on); }

/* One focus ring for the whole site. Amber, and never removed without
   replacing it.
   The offset is 1px, not 2: at 2px the ring stood clear of a 24px control as a
   second, thicker rectangle around it, rather than as the control's own edge
   lighting up. The 2px WIDTH stays - that is the part a person has to see. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Available to a screen reader, invisible on screen. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}