/* ============================================================================
   Base — reset, typography, focus, controls
   ========================================================================= */

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

/* The `hidden` attribute must beat every component's own `display` value.
   The user-agent rule is `[hidden] { display: none }` at specificity (0,1,0),
   so any class that sets `display` — `.btn { display: inline-flex }` — silently
   wins and the element stays on screen while the accessibility tree is told it
   is gone. That is the worst of both worlds, so this is the one place the
   codebase uses `!important`. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must not hide under the sticky topbar. */
  scroll-padding-top: 5.5rem;
}

/* Smooth scrolling is motion, and a long animated jump is exactly the kind
   that causes trouble. Both the system setting and the in-page toggle turn
   it off; the anchor still lands in the same place, instantly. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) { scroll-behavior: auto; }
}
html[data-motion="reduced"] { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 400;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: var(--lh-snug); }
p, ul, ol, dl, figure, pre, table, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

/* Monospace runs optically smaller than the surrounding text, so it gets a
   relative reduction — but never below the 16px floor, however deeply it is
   nested inside already-small context. */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: max(1rem, 0.92em);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

/* --- Focus --------------------------------------------------------------
   One focus treatment everywhere: a solid ring in the foreground colour with
   an offset in the page colour, so it stays visible on every surface we ship,
   including on top of the brand fill and on top of a lit orb. */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Elements that sit on busy or luminous ground get a double ring so the
   indicator survives whatever is behind it. */
.orb-card:focus-visible,
.job:focus-visible,
.btn:focus-visible,
.pref:focus-visible,
.seg__input:focus-visible + .seg__label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-offset);
}

.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  border-radius: var(--r-md);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }
.skip-link + .skip-link:focus-visible { transform: translateY(0) translateX(11.5rem); }

/* --- Screen-reader-only -------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Display type -------------------------------------------------------
   Amp's signature pairing: an extralight italic line above a regular line,
   both in Sagittaire Display, set tight and large. */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display__lead,
.display__main { display: block; }
.display__lead {
  font-weight: 200;
  font-style: italic;
  color: var(--fg);
}
.display__main { font-weight: 400; }

.display { font-size: var(--t-6xl); }
.display--sm { font-size: var(--t-5xl); }
.display--xs { font-size: var(--t-3xl); }

/* --- Eyebrow / small caps label ----------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--s-4);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: var(--card);
  color: var(--fg);
  transition:
    background-color var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    transform var(--d-fast) var(--ease-snap);
}
.btn:hover { background: var(--card-hover); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--brand {
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}
.btn--brand:hover { background: color-mix(in oklab, var(--brand) 88%, var(--fg)); }

.btn--ghost { border-color: var(--line-strong); background: transparent; }
.btn--ghost:hover { background: var(--card); }

.btn--sm { min-height: 36px; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); }


.btn__hint {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  opacity: 0.7;
}

/* --- Preference toggles in the topbar ------------------------------------ */

.pref {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: var(--s-1) var(--s-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.pref:hover { color: var(--fg); border-color: var(--line-strong); }
.pref[data-on="true"] { color: var(--fg); border-color: var(--fg-muted); }

.pref__icon {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  flex: none;
}
.pref[data-on="true"] .pref__icon { background: currentColor; }

@media (pointer: coarse) { .pref { min-height: var(--tap); padding: var(--s-2) var(--s-4); } }

/* --- Notices ------------------------------------------------------------- */

.notice {
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  background: var(--card);
  max-width: var(--prose-max);
}
.notice h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.notice p { font-size: var(--t-sm); color: var(--fg-muted); }
.notice--warn { border-left-color: var(--warn); }
.notice--bad { border-left-color: var(--danger); }
.notice--good { border-left-color: var(--success); }

/* --- Definitions --------------------------------------------------------- */

dfn {
  font-style: normal;
  font-weight: 600;
  border-bottom: 1px dashed var(--line-strong);
}

/* --- Numeric / telemetry text -------------------------------------------
   Tabular figures everywhere a number changes, so meters do not jitter. */

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Touch targets ------------------------------------------------------
   Every control gets a full finger target on a coarse pointer and on a narrow
   viewport. Relying on `pointer: coarse` alone would leave a phone reporting a
   fine pointer with 36px targets, so the two conditions are alternatives.

   The `html` prefix is load-bearing. These rules override component defaults
   that live in *later* stylesheets (console.css, prose.css), and at equal
   specificity the later file wins no matter where this block sits. The extra
   element selector lifts specificity to (0,1,1) so the rule holds regardless
   of stylesheet order.

   This deliberately does NOT pad inline links inside sentences — WCAG 2.5.8
   exempts targets in a line of text, and stretching them would wreck the
   prose. */
@media (pointer: coarse), (max-width: 48rem) {
  html .btn--sm { min-height: var(--tap); padding: var(--s-2) var(--s-4); }
  html .pref { min-height: var(--tap); }
  html .layer-btn { min-height: var(--tap); }
  html .seg__label { min-height: var(--tap); min-width: var(--tap); }
  html .toc__link { min-height: var(--tap); }
  html .topbar__nav a { min-height: var(--tap); }
  html .ladder__item { min-height: var(--tap); }
  html .job__toggle { min-height: var(--tap); }
}