/* Base: reset, type scale utilities, focus ring, motion (tokens drive reduced-motion, no kill switch), forced
   colours / high contrast, canvas ambience, boot splash. Tokens come from tokens.css (DESIGN-SPEC §3-4, §8-9). */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overscroll-behavior-y: none; touch-action: manipulation;
}
body.has-modal { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
.prose ul, .prose ol { list-style: revert; margin: revert; padding: revert; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
a { color: var(--md-primary); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
@media (pointer: coarse) {
  input, textarea, select, [contenteditable] { font-size: max(16px, 1em); }
}

/* focus */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus-visible, .ui-surface:focus-visible { outline: none; }
.is-inset-focus:focus-visible { outline-offset: -2px; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

.sr-only { 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: 12px; top: -48px; z-index: var(--z-toast); background: var(--brand-fill); color: var(--on-brand-fill); padding: 10px 16px; border-radius: var(--r-s); text-decoration: none; }
.skip-link:focus { top: 12px; }

/* type scale (§3.3): foundation defines --fs-X/--lh-X in tokens.css, this applies size + line-height + weight +
   tracking as a utility class. Old Material classes stay as aliases mapped to the nearest new step. */
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); letter-spacing: .01em; }
.t-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-regular); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.t-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); }
.t-title-s { font-size: var(--fs-title-s); line-height: var(--lh-title-s); font-weight: var(--fw-semibold); letter-spacing: -.005em; }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.t-title-l { font-size: var(--fs-title-l); line-height: var(--lh-title-l); font-weight: var(--fw-bold); letter-spacing: -.015em; }
.t-headline { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-bold); letter-spacing: -.022em; }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: -.025em; }
.t-hero-num { font-size: var(--fs-hero-num); line-height: var(--lh-hero-num); font-weight: var(--fw-bold); letter-spacing: -.03em; }
/* legacy Material aliases (nearest new step) */
.t-display-s { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: -.025em; }
.t-headline-l, .t-headline-m { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-bold); letter-spacing: -.022em; }
.t-headline-s { font-size: var(--fs-title-l); line-height: var(--lh-title-l); font-weight: var(--fw-bold); letter-spacing: -.015em; }
.t-title-l { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.t-title-m { font-size: var(--fs-title-s); line-height: var(--lh-title-s); font-weight: var(--fw-semibold); letter-spacing: -.005em; }
.t-body-l, .t-body-m { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.t-body-s { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-regular); }
.t-label-l { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); }
.t-label-m { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); letter-spacing: .025em; }
.muted { color: var(--md-on-surface-variant); }

/* numerals, money, meta (§3.4) */
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum"; }
.money { white-space: nowrap; }
.money .num { font-weight: var(--fw-semibold); }
.money .cur { font-size: .6em; font-weight: var(--fw-medium); color: var(--ink-3); }
.money[data-size="hero"] { font-size: var(--fs-hero-num); line-height: var(--lh-hero-num); font-weight: var(--fw-bold); }
.money[data-size="hero"] .frac { font-size: .72em; color: var(--ink-2); }
.meta { display: inline-flex; align-items: center; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); min-width: 0; }
.meta > * { white-space: nowrap; }
.meta > * + * { position: relative; margin-inline-start: 8px; padding-inline-start: 9px; }
.meta > * + *::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: .8em; background: currentColor; opacity: .35; transform: translateY(-50%); }

/* layout utilities */
.u-measure { max-inline-size: var(--measure); }
.u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-hit { position: relative; }
.u-hit::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: max(100%, var(--hit, 44px)); height: max(100%, var(--hit, 44px)); transform: translate(-50%, -50%); }
.u-scroll-x {
  display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -ms-overflow-style: none;
}
.u-scroll-x::-webkit-scrollbar { display: none; }
.u-scroll-x[data-overflow-start] { mask-image: linear-gradient(to right, transparent, #000 24px); }
.u-scroll-x[data-overflow-end] { mask-image: linear-gradient(to left, transparent, #000 24px); }
.u-scroll-x[data-overflow-start][data-overflow-end] { mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }

/* canvas ambience (§2.5): brand glow everywhere, full-height drafting grid in blueprint only. The crosshair header
   plate is drawn by kit Page (00b F-07) using --grid-ink / --grid-tile (tokens.css), not here. */
.u-canvas { position: relative; }
.u-canvas::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1100px 620px at 0% 0%, color-mix(in oklab, var(--brand-fill) 7%, transparent), transparent 62%);
}
:root[data-theme="ocean"] .u-canvas::before {
  background-image: radial-gradient(1100px 620px at 0% 0%, color-mix(in oklab, var(--brand-fill) 6%, transparent), transparent 62%);
}
:root[data-theme="dark"] .u-canvas::before {
  background-image: radial-gradient(1100px 620px at 0% 0%, color-mix(in oklab, var(--brand-fill) 16%, transparent), transparent 62%);
}
:root[data-theme="blueprint"] .u-canvas::before {
  background-image:
    radial-gradient(1100px 620px at 0% 0%, color-mix(in oklab, var(--brand-fill) 14%, transparent), transparent 62%),
    repeating-linear-gradient(to right, rgb(103 211 253 / .045) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, rgb(103 211 253 / .045) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to right, rgb(103 211 253 / .09) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgb(103 211 253 / .09) 0 1px, transparent 1px 40px);
}
:root[data-theme="glass"] body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(960px 680px at 14% 12%, rgb(255 184 122 / .20), transparent 62%),
    radial-gradient(880px 640px at 86% 18%, rgb(123 224 210 / .16), transparent 60%),
    radial-gradient(920px 680px at 52% 92%, rgb(218 168 124 / .18), transparent 64%),
    radial-gradient(640px 480px at 78% 72%, rgb(181 197 255 / .12), transparent 58%),
    linear-gradient(160deg, #27211C 0%, #1E1A17 48%, #161310 100%);
  background-attachment: fixed;
}
:root[data-theme="glass"] .u-canvas::before {
  background-image:
    radial-gradient(900px 580px at 18% 8%, rgb(255 204 150 / .14), transparent 60%),
    radial-gradient(820px 540px at 82% 85%, rgb(123 224 210 / .12), transparent 62%);
}
@media (prefers-contrast: more), (forced-colors: active), print {
  .u-canvas::before { display: none; }
}

/* boot splash (F-03): shown until #app renders its first child, then hidden with zero JS. */
#boot { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--canvas); }
#boot img, #boot svg { width: 64px; height: 64px; animation: boot-pulse var(--dur-loop) var(--ease-in-out) infinite; }
#app:not(:empty) + #boot { display: none; }
@keyframes boot-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* view enter/exit (§8.3 Page router); View Transitions when supported, this animation as the fallback/first paint */
.view { animation: view-enter var(--dur-small) var(--ease-out) both; min-height: 100%; }
.view.no-anim { animation: none; }
@keyframes view-enter { from { opacity: 0; transform: translateY(var(--move-s)); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(var(--move-s)); } to { opacity: 1; transform: none; } }
@keyframes vt-crossfade-in { from { opacity: 0; } }
::view-transition-old(root) { animation: vt-out var(--dur-press) var(--ease-out); }
::view-transition-new(root) { animation: vt-in var(--dur-small) var(--ease-out); }
html[data-vt=back] ::view-transition-old(root), html[data-vt=lateral] ::view-transition-old(root) { animation: vt-out var(--dur-micro) var(--ease-out); }
html[data-vt=back] ::view-transition-new(root), html[data-vt=lateral] ::view-transition-new(root) { animation: vt-crossfade-in var(--dur-micro) var(--ease-out); }

/* theme switch reveal (§8.6 #3): js/core/theme.js transition() sets data-theme-transition + --vt-x/--vt-y */
@keyframes theme-reveal {
  from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
:root[data-theme-transition=reveal]::view-transition-new(root) { animation: theme-reveal var(--dur-xl) var(--ease-in-out); }
:root[data-theme-transition=reveal]::view-transition-old(root) { animation: none; }
:root[data-theme-transition=fade]::view-transition-new(root),
:root[data-theme-transition=fade]::view-transition-old(root) { animation: vt-crossfade-in var(--dur-micro) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .ui-spinner { animation-duration: var(--dur-breathe) !important; animation-iteration-count: infinite !important; } /* progress must stay visible */
}
@media (forced-colors: active) {
  [aria-checked=true], [aria-selected=true], [aria-current], .is-selected, .is-active {
    forced-color-adjust: none; outline: 2px solid Highlight;
  }
  .ui-switch-thumb { forced-color-adjust: none; background: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --ink-3: var(--ink-2); --line: var(--line-strong); }
}

/* Scrollbars: integrated with dark canvas, never OS-grey */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-full);
}
@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover {
    background: var(--ink-3);
  }
}