/* lib/base.css — the reset sheet for both shipped pages
   (index.html and home.html). Loaded immediately after
   proposal/design-system/tokens.css, so every value below reads an existing
   --tf-*, --surface-*, or --sp-* custom property. Nothing here is a new token.

   This file exists because the vendored design system assumes a reset that
   this repo did not have. See the box-sizing note below (#76). */

/* Resolves #76. .tf-page sets width:100% plus 64px/72px padding
   (proposal/design-system/pages.css). Under the browser default content-box,
   that padding adds on top of the 100%, overflowing the viewport by exactly
   the horizontal padding — a constant 144px at every width — and forcing a
   horizontal scrollbar that clipped the right-hand dashboard controls.
   border-box is the standard fix and changes no visual token value.

   The vendored design system was authored against this reset: the identical
   rule sits in proposal/styles-live.css, which is the one vendored sheet the
   shipped pages do not load. The approved design preview
   (battery-dashboard-preview.css) carries it too. It was simply never ported
   into the shipped stylesheets. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Zeroes the UA default body margin. Without this, the default white body
   background shows through as an 8px border around the dark surface below.
   Lived in lib/auth.css until #76; moved here so both pages get it from the
   same place as the reset above. */
body {
  margin: 0;
  background: var(--surface-bg);
}

/* Resolves #92. Neither shipped page stated a focus style, so every focusable
   element except the email field fell back to the browser default ring: the
   send button, "Request a new link", "Sign in again", "Sign out", "Try again",
   and the support mailto that is the only thing a keyboard user can reach in
   the not-authorised state.

   Faithful port of proposal/styles-live.css, the one vendored sheet the
   shipped pages do not load. Same root cause as the link-colour half of #91.

   This is an ADDITION, not an override, which is why it may live in this
   early-loading sheet at all. Three other rules in the loaded set declare
   `outline`, and every one of them outranks this rule on specificity rather
   than on source order, so where this sits cannot disturb any of them:
   lib/auth.css's `.tf-auth-field__input:focus-visible { outline: none }`
   (0,2,0) and its `--invalid` variant (0,3,0), which is how the email field
   keeps its own yellow glow, and components.css's `.gate-email:focus`, which
   is inert here because neither page uses the class. Nothing declares
   `outline` at this rule's own 0,1,0, which is the condition that makes the
   early load safe. Same exemption as the `*` reset above, for the same
   reason - and, like that one, a condition rather than a guarantee, which is
   why tests/focus-visible-ring.test.mjs enforces it.

   Measured on the two surfaces the shipped pages actually paint, both
   data-surface="dark": #DAFF00 is 15.15:1 against the page background
   --tf-ink #1A1A1A, and 13.68:1 against the card, rgba(244,244,242,.04)
   composited over ink. WCAG 2.4.11 asks 3:1.

   The same yellow is invisible on every light surface tokens.css defines:
   1.10:1 on paper, 1.04:1 on bone, 1.15:1 on white. No page uses those today,
   so this is not a live defect, but it is the exact failure mode #47 (surface
   toggle) and #82 (brand colour flip) would introduce. Left as a faithful
   port rather than a --focus-ring token the vendored system does not have;
   whichever of those issues lands first owns making the ring surface-aware. */
:focus-visible {
  outline: 3px solid var(--tf-yellow);
  outline-offset: 2px;
}

/* This sheet deliberately holds no overrides of vendored rules. It is loaded
   early, ahead of proposal/design-system/*, so a same-specificity override
   written here would lose to the vendored rule on source order. The `*` reset
   above is immune to that (nothing else in the loaded set sets box-sizing), and
   the #92 focus ring is immune for the same reason (nothing else in the loaded
   set sets outline, and the one higher-specificity focus rule outranks it
   regardless of order), but a class-level override is not. The narrow-width
   .tf-page override that #76 also ports lives in lib/battery-view.css, which
   loads last. */