/* Base layer: reset, typography, AppShell (skip link, topbar, breadcrumb), containers, cards, forms, toasts.
   Tokens only; mobile-first; 16px side gutter at 360px. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block: calc(var(--topbar-height) + var(--space-3)) 6rem; }
body { margin: 0; min-height: 100dvh; font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--color-text); margin: 0; }
h1 { font-size: var(--text-lg); line-height: var(--leading-heading); letter-spacing: var(--tracking-title); font-weight: 700; }
h2 { font-size: var(--text-md); line-height: 1.35; letter-spacing: var(--tracking-section); font-weight: 600; }
h3 { font-size: var(--text-base); line-height: var(--leading-snug); font-weight: 600; }
p { margin: 0; }
a { color: var(--color-link); text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }
img { max-width: 100%; }
:focus-visible { outline: var(--focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }

/* Skip link */
.skip-link { position: absolute; left: var(--space-3); top: -10rem; z-index: 100; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-elevated); color: var(--color-text); box-shadow: var(--shadow-2); }
.skip-link:focus { top: var(--space-2); }

/* Topbar (AppShell) */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-height); padding: 0 var(--gutter); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
.topbar__brand { margin: 0; display: flex; align-items: center; flex: 0 0 auto; }
.topbar__brand a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); color: var(--color-text); text-decoration: none; font-weight: 700; font-size: var(--text-md); letter-spacing: var(--tracking-section); border-radius: var(--radius-md); }
.topbar__logo { width: 1.5rem; height: 1.5rem; flex: none; }
.topbar__nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.topbar__link { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.topbar__link:hover { background: var(--color-surface-hover); color: var(--color-text); }
.topbar__link[aria-current='page'] { color: var(--color-text); background: var(--color-surface-muted); }
.topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.topbar__end .topbar__nav { margin-left: 0; }
.topbar .topbar__crumbs { min-width: 0; flex-wrap: nowrap; white-space: nowrap; }
.topbar__title { color: var(--color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.topbar__status:empty { display: none; }
@media (max-width: 767px) { .topbar .topbar__crumbs { display: none; } }
@media (max-width: 479px) { .topbar__status { display: none; } }
/* Phone: the bar wraps, so every link and the theme toggle stay reachable instead of running past the screen. */
@media (max-width: 479px) {
  .topbar { flex-wrap: wrap; row-gap: var(--space-2); padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .topbar__end { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; }
  .topbar__nav { flex-wrap: wrap; }
}
/* The decorative layer is clipped to the viewport and can never widen the page. */
.amb { max-width: 100%; contain: paint; }
.brand-mark { flex: none; }
.brand-mark__accent { stroke: var(--color-primary); }
/* Sync dot (zone A): Up to date · vN / Updating / Offline, retrying */
.sync { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.sync__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success-dot); flex: none; }
.sync[data-state='syncing'] .sync__dot { background: var(--color-info-border); animation: fade-in var(--duration-slow) ease-in-out infinite alternate; }
.sync[data-state='offline'] .sync__dot { background: var(--color-warning-border); }
@media (max-width: 479px) { .sync { display: none; } }
/* Band colour utilities (separation only, never meaning) */
.band-bg--0 { background: var(--band-0); } .band-bg--1 { background: var(--band-1); } .band-bg--2 { background: var(--band-2); } .band-bg--3 { background: var(--band-3); }
.band-bg--4 { background: var(--band-4); } .band-bg--5 { background: var(--band-5); } .band-bg--6 { background: var(--band-6); } .band-bg--7 { background: var(--band-7); }
/* Theme toggle (core/theme.js): moon shows in light theme, sun in dark */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: var(--control-md); height: var(--control-md); padding: 0; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.theme-toggle:hover { background: var(--color-surface-hover); color: var(--color-text); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { grid-area: 1 / 1; transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-slow) var(--ease-out); }
.theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme='dark'] .theme-toggle__sun { opacity: 1; transform: none; }
:root[data-theme='dark'] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle svg { transition: none; } }

/* Breadcrumb and page head */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; min-width: 0; }
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; border-radius: var(--radius-sm); }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.page-head { display: grid; gap: var(--space-2); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.page-head__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-heading); letter-spacing: var(--tracking-title); font-weight: 700; }
.page-lede { color: var(--color-text-secondary); max-width: 60ch; }

/* Containers */
.container { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: var(--space-4) var(--gutter) var(--space-6); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.container--narrow { max-width: var(--form-width); }
.container--home { max-width: var(--home-width); }
.container--report { max-width: var(--report-width); }
@media (min-width: 768px) { .container { padding-top: var(--space-5); } }
.stack { display: grid; gap: var(--space-3); min-width: 0; }
.stack--tight { gap: var(--space-2); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }

/* Cards */
.card { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); min-width: 0; box-shadow: var(--shadow-1); }
@media (max-width: 479px) { .card { padding: var(--space-3); } }
.card h2 { margin: 0; font-size: var(--text-md); }
.card--interactive { transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.card--interactive:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.card--success, .card.alert--success { border-left: 4px solid var(--color-success-border); }
.card__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }

/* Forms */
label { font-weight: 600; font-size: var(--text-sm); }
input, textarea, select { font: inherit; font-size: var(--text-body); min-height: var(--target-min); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; max-width: 100%; }
input[type='checkbox'], input[type='radio'] { min-height: 0; padding: 0; width: var(--icon-size); height: var(--icon-size); accent-color: var(--color-primary); }
input:disabled, textarea:disabled, select:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); cursor: not-allowed; }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--color-danger-border); }
.field-error { margin: 0; min-height: 1.2em; color: var(--color-danger-text); font-size: var(--text-sm); }
.field-error:empty { min-height: 0; }
.hint, .muted { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* Text utilities */
.mono { font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; }
.tabular { font-variant-numeric: tabular-nums; }
.unknown, .unclear, .value-unknown { font-style: italic; color: var(--color-text-muted); font-weight: 400; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Toasts */
.toast-region { position: fixed; z-index: 90; right: var(--gutter); bottom: var(--gutter); left: var(--gutter); display: grid; justify-items: end; gap: var(--space-2); pointer-events: none; }
.toast { pointer-events: auto; max-width: 26rem; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-elevated); color: var(--color-text); border: var(--border-width) solid var(--color-border); border-left: 4px solid var(--color-info-border); box-shadow: var(--shadow-2); font-size: var(--text-sm); animation: toast-in var(--duration-base) var(--ease-out) both; }
.toast--error { border-left-color: var(--color-danger-border); }
.toast--success { border-left-color: var(--color-success-border); }

/* Ambient mesh behind the top of Home and Upload only (never behind page images). */
.has-ambient { position: relative; isolation: isolate; }
.has-ambient::before { content: ''; position: absolute; inset: 0 0 auto; height: 15rem; z-index: -1; background: url('/static/img/bg-ambient-grid.svg') center top / 960px auto no-repeat; opacity: var(--ambient-opacity); color: var(--color-border-strong); mask-image: linear-gradient(to bottom, var(--color-text), transparent); -webkit-mask-image: linear-gradient(to bottom, var(--color-text), transparent); pointer-events: none; }

/* Page load stagger (motion 1) */
.container > * { animation: rise-in var(--duration-base) var(--ease-standard) both; }
.container > *:nth-child(2) { animation-delay: 40ms; }
.container > *:nth-child(n + 3) { animation-delay: 80ms; }

@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .container > *, .toast { animation: none; }
  .card--interactive:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* Tabs (Review context panel, Outputs Files | Summary): primary underline on the selected tab */
.tablist { display: flex; border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.tab { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3rem; padding: 0 var(--space-3); border: 0; background: none; font: inherit; font-size: var(--text-base); font-weight: 600; color: var(--color-text-secondary); cursor: pointer; }
.tab:hover { color: var(--color-text); }
.tab[aria-selected='true'] { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.tab:focus-visible { outline-offset: -3px; }
.tab__badge { font-size: var(--text-kbd); padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-changed-bg); color: var(--color-changed-text); font-variant-numeric: tabular-nums; }
.tablist--page { justify-content: flex-start; background: transparent; }
.tablist--page .tab { flex: 0 0 auto; padding: 0 var(--space-4); }