/* ============================================================================
   base.css — document defaults + the SC §2.7 browser-chrome bindings.
   Consolidated, intentional styling (F-R26): tokens.css defines roles, this
   file binds the document and shared structure; component classes live in
   primitives.css. No literals — roles only (SC-R01).
   ========================================================================== */

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

* {
    margin: 0;
}

html {
    /* 200% text resize must survive; zoom suppression is forbidden (F-R14). */
    -webkit-text-size-adjust: 100%;
    /* The canvas is the page surface, not the browser's white: under a short page, in the
       overscroll, and in the moment before the body paints (Jeff, 2026-09-17). Every stored
       theme is dark, so the browser's own parts — scrollbars, native controls, popups — go
       dark with it rather than flashing light. */
    background-color: var(--surface-page);
    color-scheme: dark;
}

body {
    background-color: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-0);
    line-height: var(--line-height-body);
    min-height: 100vh;
}

/* --- Headings: the heading roles bind at element level so every page title,
   gated or admin or error, takes the display face (SC §2.5). --- */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-heading);
    line-height: 1.25;
    overflow-wrap: break-word;
}

h1 { font-size: var(--font-size-3); }
h2 { font-size: var(--font-size-2); }
h3 { font-size: var(--font-size-1); }

p, li {
    overflow-wrap: break-word;
}

img, svg, video {
    max-width: 100%;
    display: block;
}

/* Intrinsic width/height attributes (MF-R01 — mandatory for CLS 0) are
   presentational hints: capping width without releasing height would render every
   constrained image at its literal pixel height against a shrunken width. */
img {
    height: auto;
}

/* --- Browser chrome (SC-R08): the page claims the browser's own surfaces. --- */
::selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

input, textarea, select {
    caret-color: var(--accent);
    accent-color: var(--accent);
}

/* Autofill flash override: paint the input's own surface, not UA yellow. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-raised) inset;
    -webkit-text-fill-color: var(--text-primary-on-raised);
    caret-color: var(--accent);
}

html {
    scrollbar-color: var(--divider) var(--surface-deep);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--surface-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--divider);
    border-radius: var(--radius-chip);
    border: 3px solid var(--surface-deep);
}

/* --- Focus: one visible ring everywhere (>=3:1, F-R05); outer radius derives
   from the control's radius + offset (SC-R03's one sanctioned derivation). --- */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: calc(var(--radius-control) + var(--focus-ring-offset));
}

/* The page heading takes focus after each navigation (FocusOnNavigate) so a screen reader
   announces the new page. It is not a control, so it shows no ring (2026-10-08: the
   "Check your email" heading looked like a selected box). */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* --- Motion safety (SC-R05): reduced motion disables non-opacity motion. --- */
@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;
    }
}

/* --- Shared structural primitives (F-R26): one source of truth for geometry. --- */

/* Vertical flow with a token gap. */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.stack-sm { gap: var(--space-sm); }
.stack-xl { gap: var(--space-xl); }

/* Horizontal wrap cluster (chips, meta rows). */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Form/action button row (F-R27: primary first; alignment set per surface class). */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

/* Label -> input -> hint rhythm (SC §2.3 field tokens). */
.field-group {
    display: flex;
    flex-direction: column;
}

.field-group > label {
    margin-bottom: var(--label-gap);
}

.field-group > .field-hint,
.field-group > .field-error {
    margin-top: var(--hint-gap);
    font-size: var(--font-size--1);
}

.field-group + .field-group {
    margin-top: var(--field-gap);
}

/* Running-text measure (F-R13): binds regardless of container width. */
.measure {
    max-width: var(--measure-prose-max);
}

/* Screen-reader-only (skip link rest state, glyph text alternatives). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The skip link becomes visible on focus (PF-R04). */
.skip-link:focus-visible {
    position: fixed;
    top: var(--space-lg);
    left: var(--space-lg);
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    padding: var(--space-sm) var(--space-lg);
    clip-path: none;
    white-space: normal;
    background: var(--surface-hover);
    color: var(--text-primary);
    border-radius: var(--radius-control);
    z-index: var(--z-toast);
}