/* Reset, document typography, and the layout primitives every page shares.
 * Component classes live in components.css. Nothing here may use a primitive
 * token (--n-*, --a-*, --w-*) directly -- semantics only, so dark mode holds. */

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

/* The browser's own `[hidden] { display: none }` is a plain element rule, so any
 * class that sets an explicit display beats it and the element stays on screen
 * with its `hidden` attribute set. Nine places in the app toggle `.hidden` from
 * JavaScript, and every one of them silently did nothing on an element styled
 * `display: flex` or `display: grid`. This makes the attribute mean what it
 * says. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  /* dvh tracks the mobile browser's collapsing toolbar; vh stays as the
     fallback for engines that do not know the dynamic units. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Two layers: the flat ground, and a faint wash of the brand hues across the
     top of the page. Sized to the viewport and left to scroll away rather than
     fixed -- a fixed attachment is expensive on mobile Safari, and a wash that
     tiles down a long page reappears as a band halfway through it. */
  background-color: var(--canvas);
  background-image: var(--canvas-wash);
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  background-size: 100% 100dvh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stats and money must not shimmy as they update. */
body { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

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

img, svg, video { max-width: 100%; height: auto; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- type roles ---- */

/* The kicker above a heading, and one of only two micro-labels that carry the
 * accent -- the other is the Weekly Answer card's caption, because those six
 * cards are the product. Every other uppercase caption in the system, .label
 * and table headers included, stays subtle grey on purpose: if they all took
 * the brand colour it would stop meaning anything. An eyebrow appears at most
 * once per section, which is the density that keeps it a signal. */
.eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.lead {
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.muted { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); }

.fine-print {
  color: var(--ink-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* .label is a field caption, not a form label -- account_settings.html uses it
 * above a read-only value, and forms use real <label> elements. It shares the
 * eyebrow's treatment because it plays the same role. */
.label {
  display: block;
  color: var(--ink-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- layout primitives ---- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  /* Held landscape, a notched phone puts the cutout and the rounded corners
     beside the text column, so the side padding has to be at least the inset.
     max() keeps the normal 1rem everywhere the insets are zero. */
  padding: var(--sp-5) max(var(--sp-4), env(safe-area-inset-right)) var(--sp-8)
           max(var(--sp-4), env(safe-area-inset-left));
}

.stack { display: flex; flex-direction: column; gap: var(--gap-stack); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* Column counts are explicit rather than auto-fit: a class named grid-2 that
 * silently renders three columns at a wide viewport is worse than no class. */
.grid { display: grid; gap: var(--gap-stack); grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.full { grid-column: 1 / -1; }

/* Single-purpose pages -- an operator login, a confirmation -- read better in a
 * narrow column than stretched to the full shell. */
.narrow { width: min(40rem, 100%); margin-inline: auto; }

/* ---- masthead ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.brand:hover { text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  box-shadow: var(--accent-glow), var(--surface-sheen);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0;
}

.nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.site-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--ink-subtle);
  font-size: var(--text-sm);
}

/* ---- accessibility ---- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
}
.skip-link:focus { top: var(--sp-3); }

@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;
  }
}