/* =============================================================================
LeakLedger design system — see design/DESIGN.md
Calm, clear, compliance-grade. System fonts, no build step, CSP-safe (no inline styles).
Sections: 1 tokens · 2 base · 3 layout & app shell · 4 components · 5 legacy aliases · 6 utilities
Screen-specific CSS goes ONLY in the marked "screen" blocks at the very end.
========================================================================== */
/* ---------------------------------------------------------------- 1. tokens */
:root {
color-scheme: light;
/* neutral ramp (cool slate) */
--gray-0: #ffffff;
--gray-25: #f8fafc;
--gray-50: #f1f4f7;
--gray-100: #e4e8ee;
--gray-200: #d0d6de;
--gray-300: #aab3bf;
--gray-400: #7b8794;
--gray-500: #5a6573;
--gray-600: #3e4754;
--gray-700: #262d37;
--gray-800: #1a2029;
/* surfaces & text */
--bg: #f5f7fa; /* page */
--surface: #ffffff; /* cards, header, inputs */
--surface-2: var(--gray-25); /* table heads, hover, card headers */
--surface-3: var(--gray-50); /* wells, segmented track, skeleton */
--border: #dfe4ea; /* decorative separators */
--border-strong: var(--gray-200);
--control-border: var(--gray-400); /* ≥3:1 on surface and bg (WCAG 1.4.11) */
--text: var(--gray-800);
--text-2: var(--gray-600);
--muted: var(--gray-500);
--placeholder: #6b7684;
--inverse-bg: var(--gray-800);
--inverse-text: #ffffff;
/* brand */
--brand: #1f4f8a;
--brand-hover: #183f6f;
--brand-active: #12325a;
--brand-subtle: #e9f0f8;
--brand-subtle-border: #bcd0e8;
--on-brand: #ffffff;
--link: var(--brand);
--link-hover: var(--brand-active);
--focus: #1d5fc4;
/* semantic status: fg / bg / border */
--ok: #17663f; --ok-bg: #e7f5ec; --ok-border: #a9d8bb; /* done, confirmed, resolved */
--covered: #0e6670; --covered-bg: #e3f4f4; --covered-border: #9fd3d3; /* in regulatory scope */
--critical: #b42318; --critical-bg: #fdecea; --critical-border: #f3b4ad; /* exceeds threshold, failed, errors */
--overdue: #ffffff; --overdue-bg: #b42318; --overdue-border: #b42318; /* solid: past due */
--warning: #8a5100; --warning-bg: #fff4dc; --warning-border: #f0cf8a; /* due soon, needs attention */
--info: #245a8f; --info-bg: #e8f1fa; --info-border: #b5cfe8; /* neutral facts, processing */
--interp: #5b3d99; --interp-bg: #f3effb; --interp-border: #cfc2ec; /* interpretation / unverified */
--neutral: #4a5361; --neutral-bg: #eef1f4; --neutral-border: var(--gray-200); /* not covered, rejected */
--danger: #b42318; --danger-hover: #932015; --on-danger: #ffffff;
/* type */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
--text-xs: 0.75rem; /* 12 eyebrow, badge */
--text-sm: 0.8125rem; /* 13 meta, help */
--text-base-sm: 0.875rem; /* 14 tables, secondary */
--text-md: 1rem; /* 16 body, inputs */
--text-lg: 1.125rem; /* 18 card titles */
--text-xl: 1.25rem; /* 20 section titles */
--text-2xl: 1.5rem; /* 24 page title (phone) */
--text-3xl: 1.875rem; /* 30 page title (desktop), stat numbers */
--leading-tight: 1.25;
--leading: 1.5;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* spacing (4px base) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
--space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
/* radii, elevation */
--radius-sm: 4px;
--radius: 6px; /* controls */
--radius-md: 8px; /* cards */
--radius-lg: 12px; /* toasts, empty-state icon */
--radius-pill: 999px;
--shadow-xs: 0 1px 2px rgb(16 24 40 / 0.06);
--shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
--shadow-md: 0 8px 24px rgb(16 24 40 / 0.14), 0 2px 6px rgb(16 24 40 / 0.06);
/* controls */
--control-h: 40px;
--control-h-sm: 32px;
--tap: 44px;
/* motion */
--dur-fast: 120ms;
--dur: 180ms;
--ease: cubic-bezier(0.2, 0, 0, 1);
/* layout */
--container: 1120px;
--container-narrow: 720px;
--gutter: 16px;
--header-h: 60px;
}
/* dark theme: follows the OS unless data-theme="light"; data-theme="dark" forces it (any element) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #0f1318; --surface: #171c23; --surface-2: #1c222a; --surface-3: #222932;
--border: #2a313b; --border-strong: #38414d; --control-border: #6b7685;
--text: #e6eaf0; --text-2: #c4ccd6; --muted: #a3adba; --placeholder: #8a95a3;
--inverse-bg: #e6eaf0; --inverse-text: #0f1318;
--brand: #2f6db5; --brand-hover: #3a7bc6; --brand-active: #2860a1;
--brand-subtle: #16253a; --brand-subtle-border: #2a4a70; --on-brand: #ffffff;
--link: #7fb0ec; --link-hover: #a9c9f2; --focus: #8ab8f5;
--ok: #6fd39b; --ok-bg: #10291c; --ok-border: #1f5a3a;
--covered: #7fd6d6; --covered-bg: #0f2a2c; --covered-border: #1f5759;
--critical: #ff9b8f; --critical-bg: #3a1512; --critical-border: #7a2a22;
--overdue: #ffffff; --overdue-bg: #c4372b; --overdue-border: #c4372b;
--warning: #f2c26b; --warning-bg: #33240a; --warning-border: #6e4f14;
--info: #8dbcef; --info-bg: #13253a; --info-border: #2a4a70;
--interp: #c3aef5; --interp-bg: #251c3b; --interp-border: #4c3a7a;
--neutral: #b4bdc9; --neutral-bg: #232a33; --neutral-border: #3a434f;
--danger: #c4372b; --danger-hover: #d04538; --on-danger: #ffffff;
--shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
--shadow-md: 0 8px 24px rgb(0 0 0 / 0.55);
}
}
:root[data-theme="dark"], [data-theme="dark"] {
color-scheme: dark;
--bg: #0f1318; --surface: #171c23; --surface-2: #1c222a; --surface-3: #222932;
--border: #2a313b; --border-strong: #38414d; --control-border: #6b7685;
--text: #e6eaf0; --text-2: #c4ccd6; --muted: #a3adba; --placeholder: #8a95a3;
--inverse-bg: #e6eaf0; --inverse-text: #0f1318;
--brand: #2f6db5; --brand-hover: #3a7bc6; --brand-active: #2860a1;
--brand-subtle: #16253a; --brand-subtle-border: #2a4a70; --on-brand: #ffffff;
--link: #7fb0ec; --link-hover: #a9c9f2; --focus: #8ab8f5;
--ok: #6fd39b; --ok-bg: #10291c; --ok-border: #1f5a3a;
--covered: #7fd6d6; --covered-bg: #0f2a2c; --covered-border: #1f5759;
--critical: #ff9b8f; --critical-bg: #3a1512; --critical-border: #7a2a22;
--overdue: #ffffff; --overdue-bg: #c4372b; --overdue-border: #c4372b;
--warning: #f2c26b; --warning-bg: #33240a; --warning-border: #6e4f14;
--info: #8dbcef; --info-bg: #13253a; --info-border: #2a4a70;
--interp: #c3aef5; --interp-bg: #251c3b; --interp-border: #4c3a7a;
--neutral: #b4bdc9; --neutral-bg: #232a33; --neutral-border: #3a434f;
--danger: #c4372b; --danger-hover: #d04538; --on-danger: #ffffff;
--shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
--shadow-md: 0 8px 24px rgb(0 0 0 / 0.55);
}
:root[data-theme="light"], [data-theme="light"] { color-scheme: light; }
/* ------------------------------------------------------------------ 2. base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[data-theme] { background: var(--bg); color: var(--text); }
h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: var(--weight-semibold); color: var(--text); overflow-wrap: anywhere; }
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
h4 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }
@media (min-width: 768px) { h1 { font-size: var(--text-3xl); } }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--link); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
strong, b { font-weight: var(--weight-semibold); }
small { font-size: var(--text-sm); }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
time, td, .tnum { font-variant-numeric: tabular-nums; }
::selection { background: var(--brand-subtle-border); color: var(--text); }
/* focus: one ring everywhere. The 2px offset shows the background between ring and control,
so the ring keeps ≥3:1 next to primary/danger buttons, tinted rows and the header. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-radius: var(--radius); }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }
@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;
}
}
/* ------------------------------------------------------- 3. layout & shell */
.container, .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
@media (min-width: 768px) { :root { --gutter: 24px; } }
.app-main, .wrap { padding-top: var(--space-6); padding-bottom: var(--space-12); }
@media (min-width: 768px) { .app-main, .wrap { padding-top: var(--space-8); } }
body.app { min-height: 100vh; display: flex; flex-direction: column; }
body.app > main { flex: 1 0 auto; }
/* skip link */
.skip-link {
position: absolute; left: var(--space-2); top: -100px; z-index: 100;
background: var(--surface); color: var(--link); font-weight: var(--weight-semibold);
padding: var(--space-3) var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-2); }
/* header: calm light bar, aligned to the content grid */
.app-header { background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 10; }
.app-header__inner { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-h); }
.app-brand {
display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap);
color: var(--text); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: -0.01em;
}
.app-brand:hover { color: var(--text); }
.app-brand__mark { width: 28px; height: 28px; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); display: inline-grid; place-items: center; flex: none; }
.app-brand__mark .icon { width: 18px; height: 18px; }
.app-nav { flex: 1; min-width: 0; }
.app-nav__list { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.app-nav a {
display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-3);
color: var(--text-2); text-decoration: none; font-size: var(--text-base-sm); font-weight: var(--weight-medium);
border-radius: var(--radius); white-space: nowrap; position: relative;
}
.app-nav a:hover { color: var(--text); background: var(--surface-3); }
.app-nav a[aria-current="page"] { color: var(--brand); background: var(--brand-subtle); font-weight: var(--weight-semibold); }
[data-theme="dark"] .app-nav a[aria-current="page"] { color: var(--link); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-nav a[aria-current="page"] { color: var(--link); } }
.app-nav a[aria-current="page"]::after { /* non-colour cue */
content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px; height: 2px; border-radius: 2px; background: currentColor;
}
.app-nav .icon { width: 18px; height: 18px; }
.app-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
/* phone: compact top bar + single scrollable nav row (all links stay visible/tappable) */
@media (max-width: 899px) {
.app-header__inner { flex-wrap: wrap; align-content: flex-start; gap: 0 var(--space-3); min-height: 56px; padding-top: 6px; }
.app-brand { flex: 1; }
.app-nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--gutter)); border-top: 1px solid var(--border); }
.app-nav__list {
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
padding: var(--space-1) var(--gutter);
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.app-nav__list::-webkit-scrollbar { display: none; }
.app-nav__list li { scroll-snap-align: start; }
.app-nav__list li:last-child { padding-right: var(--space-6); }
.app-nav .icon { display: none; }
}
@media (max-width: 600px) { .app-header__actions .btn { width: var(--tap); padding: 0; } }
/* footer: disclaimer + sign out */
.app-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: var(--space-8); }
.app-footer__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-8); padding-top: var(--space-5); padding-bottom: var(--space-8); }
.app-footer__disclaimer { flex: 1 1 420px; max-width: 72ch; margin: 0; font-size: var(--text-sm); color: var(--muted); display: flex; gap: var(--space-2); }
.app-footer__disclaimer .icon { flex: none; margin-top: 2px; }
.app-footer__session { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); color: var(--muted); }
.app-footer form { margin: 0; }
/* layout primitives */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.grid-2, .row2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .grid-2, .row2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.split { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.section { margin: 0 0 var(--space-8); }
.section > h2:first-child, .section__title { margin-top: 0; }
.narrow { max-width: 420px; margin: var(--space-10) auto; }
/* ----------------------------------------------------------- 4. components */
/* --- icon --- */
.icon { width: 20px; height: 20px; flex: none; vertical-align: -0.25em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
/* --- page header --- */
.page-header { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-6); }
.page-header__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.page-header__title, .page-header h1 { margin: 0; min-width: 0; flex: 1 1 320px; }
.page-header__meta { margin: 0; color: var(--muted); font-size: var(--text-base-sm); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* --- breadcrumbs: parents only, separator by CSS, no trailing slash --- */
.breadcrumbs ol, ol.crumbs { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: var(--text-base-sm); color: var(--muted); }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 var(--space-2); border-right: 1.5px solid var(--gray-300); border-top: 1.5px solid var(--gray-300); transform: rotate(45deg); }
.breadcrumbs a, .crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover, .crumbs a:hover { color: var(--link); text-decoration: underline; }
@media (pointer: coarse) { .breadcrumbs a, .crumbs a { min-height: var(--tap); } }
p.crumbs { margin: 0 0 var(--space-2); font-size: var(--text-base-sm); color: var(--muted); } /* legacy markup */
/* --- buttons --- */
.btn {
--btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--control-border); --btn-hover: var(--surface-3);
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius);
border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg);
font: inherit; font-size: var(--text-base-sm); font-weight: var(--weight-semibold); line-height: 1.2;
text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; position: relative;
transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--btn-hover); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn .icon { width: 18px; height: 18px; }
.btn--secondary { box-shadow: var(--shadow-xs); }
.btn--primary, .btn.primary { --btn-bg: var(--brand); --btn-fg: var(--on-brand); --btn-border: var(--brand); --btn-hover: var(--brand-hover); box-shadow: var(--shadow-xs); }
.btn--danger { --btn-bg: var(--danger); --btn-fg: var(--on-danger); --btn-border: var(--danger); --btn-hover: var(--danger-hover); }
.btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--critical); --btn-border: transparent; --btn-hover: var(--critical-bg); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--link); --btn-border: transparent; --btn-hover: var(--brand-subtle); }
.btn--sm, .btn.small { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--lg { min-height: 48px; padding: 0 var(--space-6); font-size: var(--text-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: var(--control-h); }
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"], .btn.is-loading, form.htmx-request .btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after, .btn.is-loading::after {
content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--btn-fg); border-right-color: transparent; animation: ll-spin 0.8s linear infinite;
}
@media (pointer: coarse), (max-width: 600px) {
.btn, .btn--sm, .btn.small { min-height: var(--tap); }
.btn--icon, .btn--icon.btn--sm { width: var(--tap); }
}
.btn-row, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.actions { margin: var(--space-2) 0 var(--space-4); }
form .actions, .card .actions { margin-bottom: 0; }
.btn-row--end { justify-content: flex-end; }
/* text-style button (e.g. sign out); keeps a 44px hit area */
.btn-link, button.link {
display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0;
background: none; border: 0; color: var(--link); font: inherit; font-weight: var(--weight-medium); cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em;
}
.btn-link:hover, button.link:hover { color: var(--link-hover); }
/* --- forms --- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label, .label { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-base-sm); font-weight: var(--weight-semibold); color: var(--text); }
.field__req { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted); }
.field__help, .hint { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.45; }
.field__error, .error-text {
display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--critical);
}
.field__error .icon { width: 16px; height: 16px; margin-top: 1px; }
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-section { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
input, select, textarea {
font: inherit; font-size: var(--text-md); /* 16px: no iOS zoom */ font-weight: var(--weight-regular);
color: var(--text); background: var(--surface); width: 100%;
border: 1px solid var(--control-border); border-radius: var(--radius);
min-height: var(--control-h); padding: 8px 12px; line-height: 1.4;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; height: var(--control-h); }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--text-2); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
input[readonly] { background: var(--surface-2); }
select {
-webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer; text-overflow: ellipsis;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
@media (pointer: coarse), (max-width: 600px) {
input, select, textarea { min-height: var(--tap); }
input[type="date"], input[type="time"] { height: var(--tap); }
}
[aria-invalid="true"], .is-invalid { border-color: var(--critical) !important; box-shadow: inset 0 0 0 1px var(--critical); }
/* checkbox / radio: native, brand accent, 20px, 44px row */
input[type="checkbox"], input[type="radio"] {
width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--brand); cursor: pointer;
}
.choice, label.check {
display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-3); min-height: var(--tap);
padding: 10px 0; font-weight: var(--weight-regular); font-size: var(--text-md); cursor: pointer; line-height: 1.4;
}
.choice input, label.check input { margin-top: 1px; }
.choice__text { display: flex; flex-direction: column; gap: 2px; }
.choice__help { font-size: var(--text-sm); color: var(--muted); }
.choice-group { display: flex; flex-direction: column; }
.choice-group .choice + .choice { border-top: 1px solid var(--border); }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
legend { font-weight: var(--weight-semibold); font-size: var(--text-base-sm); padding: 0 var(--space-2); }
fieldset.form-section > legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-md); }
/* file input → dropzone (input overlays the zone so click, keyboard & drop stay native) */
.dropzone {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
min-height: 148px; padding: var(--space-6) var(--space-4); text-align: center;
border: 1.5px dashed var(--control-border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; min-height: 0; padding: 0; border: 0; }
.dropzone__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-subtle); color: var(--link); display: grid; place-items: center; }
.dropzone__title { font-weight: var(--weight-semibold); color: var(--text); }
.dropzone__title u { color: var(--link); text-underline-offset: 0.15em; }
.dropzone__hint { font-size: var(--text-sm); color: var(--muted); }
.dropzone__file { font-size: var(--text-base-sm); font-weight: var(--weight-semibold); color: var(--text); overflow-wrap: anywhere; }
.dropzone__file:empty { display: none; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--focus); background: var(--brand-subtle); }
.dropzone:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.dropzone.has-file { border-style: solid; border-color: var(--ok-border); background: var(--ok-bg); }
/* --- cards --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: var(--space-5); margin: 0 0 var(--space-4); }
@media (max-width: 600px) { .card { padding: var(--space-4); } }
.card > h2:first-child, .card > h3:first-child, .card > .card__title:first-child { margin-top: 0; }
.card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.card__header h2, .card__header h3, .card__title { margin: 0; font-size: var(--text-lg); }
.card__header p { margin: 0; color: var(--muted); font-size: var(--text-base-sm); flex-basis: 100%; }
.card__footer { margin: var(--space-4) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.card--flush { padding: 0; overflow: hidden; }
.card--flush > .card__header { padding: var(--space-4) var(--space-5); margin: 0; border-bottom: 1px solid var(--border); }
.card--flush > .card__footer { margin: 0; }
.card--muted { background: var(--surface-2); box-shadow: none; }
.card--interactive { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: inherit; }
/* --- badges / tags --- */
.badge, .tag {
--b-fg: var(--neutral); --b-bg: var(--neutral-bg); --b-border: var(--neutral-border);
display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap;
padding: 1px 8px; min-height: 22px; border-radius: var(--radius-pill);
font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; letter-spacing: 0.01em;
color: var(--b-fg); background: var(--b-bg); border: 1px solid var(--b-border);
}
.badge .icon, .tag .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.badge--ok { --b-fg: var(--ok); --b-bg: var(--ok-bg); --b-border: var(--ok-border); }
.badge--covered { --b-fg: var(--covered); --b-bg: var(--covered-bg); --b-border: var(--covered-border); }
.badge--critical { --b-fg: var(--critical); --b-bg: var(--critical-bg); --b-border: var(--critical-border); }
.badge--overdue { --b-fg: var(--overdue); --b-bg: var(--overdue-bg); --b-border: var(--overdue-border); }
.badge--warning { --b-fg: var(--warning); --b-bg: var(--warning-bg); --b-border: var(--warning-border); }
.badge--info { --b-fg: var(--info); --b-bg: var(--info-bg); --b-border: var(--info-border); }
.badge--interp { --b-fg: var(--interp); --b-bg: var(--interp-bg); --b-border: var(--interp-border); }
.badge--neutral { --b-fg: var(--neutral); --b-bg: var(--neutral-bg); --b-border: var(--neutral-border); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--lg { font-size: var(--text-sm); padding: 2px 10px; min-height: 26px; }
/* --- callouts / alerts --- */
.callout {
--c-fg: var(--info); --c-bg: var(--info-bg); --c-border: var(--info-border);
display: flex; gap: var(--space-3); align-items: flex-start; margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
background: var(--c-bg); border: 1px solid var(--c-border); color: var(--text); font-size: var(--text-base-sm);
}
.callout > .icon { color: var(--c-fg); margin-top: 1px; }
.callout__body { flex: 1; min-width: 0; }
.callout__title { display: block; font-weight: var(--weight-semibold); color: var(--c-fg); margin: 0 0 2px; font-size: var(--text-base-sm); }
.callout__body > p { margin: 0 0 var(--space-1); }
.callout__body ul { margin: var(--space-1) 0 0; padding-left: 1.2em; }
.callout__actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.callout--ok { --c-fg: var(--ok); --c-bg: var(--ok-bg); --c-border: var(--ok-border); }
.callout--critical { --c-fg: var(--critical); --c-bg: var(--critical-bg); --c-border: var(--critical-border); }
.callout--warning { --c-fg: var(--warning); --c-bg: var(--warning-bg); --c-border: var(--warning-border); }
.callout--neutral { --c-fg: var(--text-2); --c-bg: var(--surface-2); --c-border: var(--border); }
/* interpretation: the legally important "confirm with your compliance advisor" note */
.callout--interp { --c-fg: var(--interp); --c-bg: var(--interp-bg); --c-border: var(--interp-border); border-left-width: 4px; }
.interp-note, .flag {
display: inline-flex; align-items: flex-start; gap: 6px; margin: var(--space-1) 0;
padding: 3px 10px 3px 8px; border-radius: var(--radius); border: 1px solid var(--interp-border);
background: var(--interp-bg); color: var(--interp); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.4;
}
.interp-note .icon { width: 16px; height: 16px; margin-top: 1px; }
/* --- empty state --- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); }
.empty__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--surface-3); color: var(--muted); display: grid; place-items: center; margin-bottom: var(--space-2); }
.empty__icon .icon { width: 24px; height: 24px; }
.empty__title { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; }
.empty__text { color: var(--muted); font-size: var(--text-base-sm); max-width: 46ch; margin: 0; }
.empty__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.empty--ok .empty__icon { background: var(--ok-bg); color: var(--ok); }
.empty--compact { padding: var(--space-6) var(--space-4); }
.card > .empty { padding-top: var(--space-6); padding-bottom: var(--space-6); }
/* --- toasts / flash --- */
.toast-region {
position: fixed; z-index: 50; right: var(--space-4); bottom: var(--space-4); left: auto;
display: flex; flex-direction: column; gap: var(--space-2); width: min(400px, calc(100vw - 2 * var(--space-4))); pointer-events: none;
}
@media (max-width: 600px) { .toast-region { left: var(--space-4); right: var(--space-4); width: auto; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); } }
.toast {
--t-fg: var(--ok);
pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--t-fg);
border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-base-sm);
animation: ll-toast-in var(--dur) var(--ease);
}
.toast > .icon { color: var(--t-fg); margin-top: 1px; }
.toast__msg { flex: 1; padding-top: 1px; }
.toast__close { margin: -6px -4px -6px 0; color: var(--muted); }
.toast--critical { --t-fg: var(--critical); }
.toast--warning { --t-fg: var(--warning); }
.toast--info { --t-fg: var(--info); }
.toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
@keyframes ll-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* inline flash (server-rendered, top of main) */
.flash { margin: 0 0 var(--space-4); }
/* --- progress / spinner / skeleton --- */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: ll-spin 0.9s linear infinite; vertical-align: -3px; margin-right: 6px; flex: none; }
@keyframes ll-spin { to { transform: rotate(360deg); } }
.progress { display: flex; flex-direction: column; gap: var(--space-2); }
.progress__head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base-sm); font-weight: var(--weight-medium); }
.progress__head .spinner { margin: 0; }
.progress__meta { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.progress__bar { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.progress__fill { position: absolute; inset: 0 auto 0 0; background: var(--brand); border-radius: inherit; transition: width var(--dur) var(--ease); }
.progress__bar--indeterminate .progress__fill { width: 35%; animation: ll-indeterminate 1.4s var(--ease) infinite; }
@keyframes ll-indeterminate { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .progress__bar--indeterminate .progress__fill { width: 100%; opacity: 0.4; left: 0; } }
/* fill widths in 5% steps (CSP forbids inline style) */
.w-0{width:0}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}
.skeleton { display: block; height: 12px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-3) 25%, var(--border) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: ll-shimmer 1.4s linear infinite; }
.skeleton + .skeleton { margin-top: var(--space-2); }
.skeleton--title { height: 18px; width: 40%; }
.skeleton--short { width: 60%; }
@keyframes ll-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* --- stat tiles (markup contract: NLabel) --- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-6); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.stat {
display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
padding: var(--space-4); color: var(--text); text-decoration: none; position: relative;
}
.stat > span:not(.num):not(.stat__hint) { order: 1; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted); }
.stat .num { order: 2; font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat .stat__hint { order: 3; font-size: var(--text-sm); color: var(--muted); }
a.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: var(--text); }
.stat--critical, .stat.bad { border-color: var(--critical-border); background: var(--critical-bg); }
.stat--critical .num, .stat.bad .num { color: var(--critical); }
.stat--warning, .stat.warn { border-color: var(--warning-border); background: var(--warning-bg); }
.stat--warning .num, .stat.warn .num { color: var(--warning); }
.stat--ok .num { color: var(--ok); }
.stat--quiet { box-shadow: none; background: transparent; }
.stat--quiet .num { font-size: var(--text-xl); }
/* --- lists --- */
.list { list-style: none; margin: 0 0 var(--space-4); padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); overflow: hidden; }
.list--flush, .card .list { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0; }
.card:not(.card--flush) .list--flush, .card:not(.card--flush) > .list { margin: 0 calc(-1 * var(--space-5)); }
@media (max-width: 600px) { .card:not(.card--flush) .list--flush, .card:not(.card--flush) > .list { margin: 0 calc(-1 * var(--space-4)); } }
.list > li { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); position: relative; }
@media (max-width: 600px) { .list > li { padding: var(--space-3) var(--space-4); } }
.list > li:first-child { border-top: 0; }
.list li > a:first-child:not(.list-row) { color: var(--text); text-decoration: none; display: inline-block; min-height: 28px; overflow-wrap: anywhere; }
.list li > a:first-child:not(.list-row):hover { color: var(--link); text-decoration: underline; }
@media (pointer: coarse) { .list li > a:first-child:not(.list-row) { display: block; min-height: var(--tap); padding-top: 10px; margin-top: -10px; } }
/* status accents: inset bar, never clipped by radius */
.list > li.overdue, .list > li.is-critical { background: var(--critical-bg); box-shadow: inset 4px 0 0 var(--critical); }
.list > li.is-warning { box-shadow: inset 4px 0 0 var(--warning); }
.list > li.superseded, .list > li.is-replaced { color: var(--muted); }
.list > li.superseded > strong, .list > li.is-replaced .list-row__title { text-decoration: line-through; }
/* structured row: title + meta + aside (badges / chevron) */
.list-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); }
.list-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row__title { font-weight: var(--weight-semibold); color: var(--text); overflow-wrap: anywhere; }
.list-row__aside { display: flex; align-items: center; gap: var(--space-2); flex: none; flex-wrap: wrap; justify-content: flex-end; }
.list-row__chevron { color: var(--gray-300); }
a.list-row { color: inherit; text-decoration: none; margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5); }
@media (max-width: 600px) { a.list-row { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); } }
a.list-row:hover { background: var(--surface-2); color: inherit; }
a.list-row:hover .list-row__title { color: var(--link); text-decoration: underline; }
a.list-row:focus-visible { outline-offset: -3px; border-radius: 0; }
@media (max-width: 600px) { .list-row { flex-wrap: wrap; } .list-row__aside { justify-content: flex-start; } .list-row__chevron { display: none; } }
/* dot-separated meta line */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; font-size: var(--text-sm); color: var(--muted); }
.meta > * + *::before { content: "·"; margin: 0 6px; color: var(--gray-300); }
.meta strong { color: var(--text-2); }
/* --- key-value list --- */
.kv, .fields { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; font-size: var(--text-base-sm); }
.kv dt, .fields dt { color: var(--muted); font-weight: var(--weight-medium); padding-top: var(--space-3); }
.kv dd, .fields dd { margin: 0; padding: 2px 0 var(--space-3); border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--text-md); overflow-wrap: anywhere; }
.kv dd:last-of-type, .fields dd:last-of-type { border-bottom: 0; }
@media (min-width: 600px) {
.kv, .fields { grid-template-columns: minmax(140px, 32%) 1fr; }
.kv dt, .fields dt { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--border); }
.kv dd, .fields dd { padding: var(--space-3) 0; font-size: var(--text-base-sm); }
.kv dt:last-of-type, .fields dt:last-of-type { border-bottom: 0; }
}
.kv--compact dt, .kv--compact dd { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; border: 0 !important; }
/* --- tables (desktop) → stacked cards (phone) --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.card .table-wrap { border: 0; border-radius: 0; margin: 0 calc(-1 * var(--space-5)); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-base-sm); }
.table-wrap > table { min-width: 640px; }
th, td { text-align: left; padding: 10px var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
th:first-child, td:first-child { padding-left: var(--space-5); }
th:last-child, td:last-child { padding-right: var(--space-5); }
th { background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
tbody:last-child tr:last-child td { border-bottom: 0; }
td.numeric, th.numeric, .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.overdue td, tbody.overdue td, tr.is-critical td { background: var(--critical-bg); }
tr.overdue td:first-child, tbody.overdue tr:first-child td:first-child { box-shadow: inset 4px 0 0 var(--critical); }
tr.sub td { color: var(--muted); border-bottom: 1px solid var(--border-strong); }
tbody tr:hover td { background: var(--surface-2); }
tbody.overdue tr:hover td, tr.overdue:hover td { background: var(--critical-bg); }
/* : cells carry data-label; td.key = card title; td.secondary = small "Label: value";
td.full = spans the card, no label. One per record. Add role="table/row/cell" for VoiceOver. */
@media (max-width: 600px) {
.table-wrap:has(> table.stack-table) { overflow-x: visible; border: 0; background: transparent; margin: 0; }
table.stack-table { min-width: 0; font-size: var(--text-base-sm); }
table.stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.stack-table tbody { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
table.stack-table tbody.overdue { background: var(--critical-bg); border-color: var(--critical-border); box-shadow: inset 4px 0 0 var(--critical); }
table.stack-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
table.stack-table tr + tr { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
table.stack-table td, table.stack-table tr.overdue td, table.stack-table tr.sub td, table.stack-table tbody tr:hover td { display: block; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
table.stack-table td::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted); letter-spacing: 0.02em; }
table.stack-table td.key { grid-column: 1 / -1; font-weight: var(--weight-semibold); font-size: var(--text-md); }
table.stack-table td.key::before { display: none; }
table.stack-table td.secondary, table.stack-table td.full { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--muted); }
table.stack-table td.secondary::before { display: inline; content: attr(data-label) ": "; font-size: inherit; }
table.stack-table td.full { color: var(--text); }
table.stack-table td.full::before { display: none; }
.card .table-wrap:has(> table.stack-table) { margin: 0; }
}
/* --- segmented control / tabs / filters --- */
.segmented { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-3); border: 1px solid var(--border); border-radius: calc(var(--radius) + 3px); max-width: 100%; }
.segmented > a, .segmented > button, .segmented > label {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius);
background: transparent; color: var(--text-2); font: inherit; font-size: var(--text-base-sm); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.segmented > label { position: relative; }
.segmented > label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented > a:hover, .segmented > button:hover, .segmented > label:hover { color: var(--text); background: var(--surface-2); }
.segmented > [aria-current="page"], .segmented > [aria-current="true"], .segmented > [aria-pressed="true"], .segmented > [aria-selected="true"], .segmented > .is-active, .segmented > label:has(input:checked) {
background: var(--surface); color: var(--text); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm);
}
.segmented > label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.segmented .count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted); background: var(--surface-3); border-radius: var(--radius-pill); padding: 0 6px; font-variant-numeric: tabular-nums; }
@media (pointer: coarse), (max-width: 600px) {
.segmented { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.segmented > a, .segmented > button, .segmented > label { min-height: 40px; }
}
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0 0 var(--space-4); }
.toolbar .field { flex: 0 1 280px; }
.toolbar--sticky { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
/* --- pagination / load more --- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0; font-size: var(--text-base-sm); color: var(--muted); }
.load-more { display: flex; justify-content: center; margin: var(--space-4) 0; }
/* --- inline confirm (dialog-free): …
…