/* ═══════════════════════════════════════════════════════════════════
   ARC FOUNDATION — vanilla port of the Arc UI tokens and components
   (uiarc.dev) for the Zourì admin.

   Rules carried over from Arc: one accent, warm-neutral surfaces, hairline
   borders, concentric radii (control 18 / panel 26 / surface 34), only
   regular (400) and medium (500) weights, sentence case, keyboard-only focus
   ring, hover states only on fine pointers, reduced-motion branches.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Neutral scale — a whisper of warmth (hue 70) so it sits with the brand. */
  --neutral-0:  oklch(100% 0 0);
  --neutral-1:  oklch(99.2% 0.003 70);
  --neutral-2:  oklch(97.6% 0.004 70);
  --neutral-3:  oklch(95.6% 0.005 70);
  --neutral-4:  oklch(91.5% 0.006 70);
  --neutral-5:  oklch(84% 0.007 70);
  --neutral-6:  oklch(72% 0.008 70);
  --neutral-7:  oklch(59% 0.01 70);
  --neutral-8:  oklch(46% 0.012 70);
  --neutral-9:  oklch(34% 0.012 70);
  --neutral-10: oklch(23% 0.012 70);
  --neutral-11: oklch(15% 0.01 70);

  --background:     var(--neutral-1);
  --surface:        var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-muted:  var(--neutral-2);
  --foreground:     var(--neutral-11);
  --text-secondary: var(--neutral-8);
  --text-muted:     var(--neutral-7);
  --border:         oklch(93.5% 0.005 70);
  --border-subtle:  oklch(96.5% 0.004 70);
  --border-strong:  oklch(82% 0.008 70);

  /* Accent — Zourì umber */
  --accent:            oklch(34% 0.06 58);
  --accent-strong:     oklch(26% 0.055 58);
  --accent-subtle:     oklch(34% 0.06 58 / .1);
  --accent-foreground: var(--background);

  --control-on:    oklch(23% 0.012 70);
  --control-glyph: oklch(100% 0 0);
  --control-track: oklch(89.5% 0.006 70);
  --control-track-hover: oklch(86% 0.006 70);
  --control-thumb: oklch(100% 0 0);
  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .14), 0 2px 6px oklch(0% 0 0 / .06);

  --success: oklch(49% .19 150);
  --warning: oklch(58% .18 75);
  --danger:  oklch(54% .21 25);

  --shadow-resting:  0 1px 2px oklch(0% 0 0 / .035);
  --shadow-raised:   0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035);
  --shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem;

  /* Softened, not round: reduced from Arc's 18/26/34px at the owner's request. */
  --radius-control: 0.75rem;
  --radius-panel:   1.125rem;
  --radius-surface: 1.5rem;
  --radius-pill:    9999px;

  --control-height-sm: 2.25rem;
  --control-height-md: 2.75rem;
  --control-height-lg: 3.125rem;

  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', 'Geist', system-ui, sans-serif;

  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3.25rem;
  --tracking-display: -.03em; --tracking-body: -.01em;
  --leading-display: 1.1; --leading-body: 1.4;

  --ease-enter:    cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.22,1,.36,1);
  --ease-exit:     cubic-bezier(.7,0,.84,0);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --ease-spring: linear(0, 0.0213, 0.0739, 0.1443, 0.2235, 0.305, 0.3849, 0.4606, 0.5305, 0.594, 0.6508, 0.7011, 0.7452, 0.7836, 0.8168, 0.8454, 0.8699, 0.8907, 0.9084, 0.9234, 0.9361, 0.9467, 0.9557, 0.9632, 0.9694, 0.9747, 0.979, 0.9826, 0.9857, 0.9882, 0.9902, 0.992, 0.9934, 0.9946, 0.9955, 0.9963, 1);
  --duration-instant: 120ms; --duration-fast: 160ms; --duration-standard: 240ms;
  --duration-considered: 480ms; --duration-spring: 580ms;

  /* Chart series */
  --series-1: oklch(45% 0.07 58);
  --series-2: oklch(62% 0.06 58);
  --series-3: oklch(78% 0.045 60);
  --series-4: oklch(88% 0.03 62);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background:     oklch(18% 0.008 70);
  --surface:        oklch(21% 0.008 70);
  --surface-raised: oklch(24% 0.008 70);
  --surface-muted:  oklch(26% 0.008 70);
  --foreground:     oklch(96% 0.004 70);
  --text-secondary: oklch(77% 0.006 70);
  --text-muted:     oklch(64% 0.008 70);
  --border:         oklch(29% 0.008 70);
  --border-subtle:  oklch(25% 0.008 70);
  --border-strong:  oklch(40% 0.01 70);
  --accent:         oklch(82% 0.05 65);
  --accent-strong:  oklch(91% 0.03 65);
  --accent-subtle:  oklch(82% 0.05 65 / .14);
  --accent-foreground: oklch(18% 0.008 70);
  --control-on:    oklch(93% 0.004 70);
  --control-glyph: oklch(19% 0.008 70);
  --control-track: oklch(33% 0.008 70);
  --control-track-hover: oklch(37% 0.008 70);
  --control-thumb: oklch(97% 0 0);
  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .3), 0 1px 2px oklch(0% 0 0 / .35), 0 2px 6px oklch(0% 0 0 / .2);
  --success: oklch(78% .18 150);
  --warning: oklch(83% .17 80);
  --danger:  oklch(76% .2 25);
  --shadow-resting:  0 1px 2px oklch(0% 0 0 / .18);
  --shadow-raised:   0 8px 22px oklch(0% 0 0 / .22);
  --shadow-floating: 0 22px 55px oklch(0% 0 0 / .34);
  --series-1: oklch(80% 0.06 65);
  --series-2: oklch(66% 0.06 62);
  --series-3: oklch(52% 0.05 60);
  --series-4: oklch(40% 0.03 60);
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  min-height: 100%;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { color: var(--text-secondary); }
a  { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
strong { font-weight: 500; }
.num, [data-numeric] { font-variant-numeric: tabular-nums; }
.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; }

/* Focus: pointer focus draws nothing; keyboard focus draws a subtle accent outline. */
:focus { outline: none; }
:focus-visible { outline: var(--focus-outline-width, 2px) solid var(--focus-outline, color-mix(in oklab, var(--accent-strong) 72%, transparent)); outline-offset: var(--focus-outline-offset, 2px); }
.input:focus-visible, .textarea:focus-visible, .select select:focus-visible { outline: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Button ───────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-4);
  font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:disabled { cursor: not-allowed; opacity: .52; }
.btn[aria-busy="true"] { cursor: progress; }
.btn:not(:disabled):active { transform: scale(.97); transition-duration: var(--duration-instant); }
.btn-primary   { color: var(--background); background: var(--foreground); border-color: var(--foreground); }
.btn-secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); }
.btn-ghost     { color: var(--text-secondary); background: transparent; border-color: transparent; }
.btn-danger    { color: var(--danger); background: var(--surface); border-color: var(--border); }
.btn-secondary:disabled, .btn-danger:disabled { opacity: 1; color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }
.btn-ghost:disabled { opacity: 1; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled)   { opacity: .91; box-shadow: var(--shadow-resting); }
  .btn-secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
  .btn-ghost:hover:not(:disabled)     { color: var(--foreground); background: var(--surface-muted); }
  .btn-danger:hover:not(:disabled)    { border-color: var(--danger); background: var(--surface-muted); }
}
.btn-primary:active:not(:disabled) { opacity: .84; }
.btn-sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); }
.btn-lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); }
.btn-icon { width: var(--control-height-md); padding: 0; }
.btn-icon.btn-sm { width: var(--control-height-sm); }
.btn-block { width: 100%; }
.btn .spinner { position: absolute; left: 50%; top: 50%; width: var(--space-4); height: var(--space-4); margin: calc(var(--space-4) / -2); border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: none; }
.btn[aria-busy="true"] .spinner { display: block; }
.btn[aria-busy="true"] .btn-label { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Badge ────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; min-height: 26px; align-items: center; gap: 5px; border: 1px solid var(--badge-border, var(--border)); border-radius: var(--radius-pill);
  padding: 0 10px; color: var(--badge-foreground, var(--foreground)); background: var(--badge-background, var(--surface));
  font-size: var(--text-xs); font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
  transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard);
}
.badge-sm { min-height: 22px; padding: 0 8px; font-size: 11px; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--badge-color, currentColor); }
.badge-neutral { --badge-color: var(--text-secondary); --badge-foreground: var(--text-secondary); --badge-background: var(--surface-muted); --badge-border: var(--border); }
.badge-success { --badge-color: var(--success); --badge-foreground: var(--success); --badge-background: color-mix(in oklab, var(--success) 10%, var(--surface)); --badge-border: color-mix(in oklab, var(--success) 25%, var(--border)); }
.badge-info    { --badge-color: var(--accent); --badge-foreground: var(--accent-strong); --badge-background: var(--accent-subtle); --badge-border: color-mix(in oklab, var(--accent) 24%, var(--border)); }
.badge-warning { --badge-color: var(--warning); --badge-foreground: var(--warning); --badge-background: color-mix(in oklab, var(--warning) 11%, var(--surface)); --badge-border: color-mix(in oklab, var(--warning) 27%, var(--border)); }
.badge-danger  { --badge-color: var(--danger); --badge-foreground: var(--danger); --badge-background: color-mix(in oklab, var(--danger) 10%, var(--surface)); --badge-border: color-mix(in oklab, var(--danger) 26%, var(--border)); }

/* ── Fields ───────────────────────────────────────────────────────── */
.field { display: grid; min-width: 0; }
.field > label, .label { margin-bottom: var(--space-2); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; }
.input, .textarea, .select select {
  width: 100%; min-height: var(--control-height-md); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  background: var(--surface); color: var(--foreground); font-size: var(--text-sm); line-height: var(--leading-body); outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .input:hover:not(:disabled, [aria-invalid="true"]), .textarea:hover:not(:disabled), .select select:hover:not(:disabled) { border-color: var(--foreground); } }
.input:focus, .textarea:focus, .select select:focus { border-color: var(--foreground); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .textarea:disabled, .select select:disabled { cursor: not-allowed; opacity: .5; background: var(--surface-muted); }
.input-sm { min-height: var(--control-height-sm); border-radius: calc(var(--radius-control) - 3px); }
.textarea { min-height: 112px; padding: var(--space-3); resize: vertical; line-height: 1.5; }
.field .hint { padding-top: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.field .error { padding-top: var(--space-2); color: var(--danger); font-size: var(--text-xs); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select::after { content: ''; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); pointer-events: none; }
/* ── Dropdown (ZSelect — js/select.js replaces every native <select>) ─── */
.zs { position: relative; display: block; min-width: 0; width: 100%; }
.select.zs-host::after { display: none; }
.zs-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; opacity: 0; pointer-events: none; }
.zs-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
  min-height: var(--control-height-md); padding: 0 var(--space-3) 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface);
  color: var(--foreground); font-size: var(--text-sm); line-height: var(--leading-body); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.input-sm + .zs-trigger, .zs-sm .zs-trigger { min-height: var(--control-height-sm); }
.zs-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-trigger.is-placeholder .zs-value { color: var(--text-muted); }
.zs-chevron { display: grid; flex: none; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
.zs-trigger[aria-expanded="true"] { border-color: var(--foreground); }
.zs-trigger[aria-expanded="true"] .zs-chevron { transform: rotate(180deg); color: var(--foreground); }
@media (hover: hover) and (pointer: fine) { .zs-trigger:hover:not(:disabled) { border-color: var(--foreground); } }
.zs-trigger:disabled { cursor: not-allowed; opacity: .5; background: var(--surface-muted); }
[aria-invalid="true"] + .zs-trigger, .field .zs-native:invalid.is-touched + .zs-trigger { border-color: var(--danger); }

.zs-panel {
  position: fixed; z-index: 80; box-sizing: border-box; display: flex; flex-direction: column;
  padding: 6px; border: 1px solid var(--border); border-radius: calc(var(--radius-control) + 2px);
  background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating);
  font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-body);
  transform-origin: top center; animation: zs-in var(--duration-standard) var(--ease-enter) both;
}
.zs-panel[data-side="top"] { transform-origin: bottom center; animation-name: zs-in-up; }
[data-theme="dark"] .zs-panel { background: var(--surface-muted); border-color: var(--border-strong); }
[data-theme="dark"] .zs-option.is-active { background: oklch(31% 0.008 70); }
.zs-search { position: relative; flex: none; margin-bottom: 6px; }
.zs-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.zs-search input {
  width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--border); border-radius: calc(var(--radius-control) - 4px);
  background: var(--surface-muted); color: var(--foreground); font: inherit; outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.zs-search input:focus { border-color: var(--border-strong); background: var(--surface); }
.zs-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; outline: none; }
.zs-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 36px; padding: 0 10px 0 11px; border-radius: calc(var(--radius-control) - 4px);
  color: var(--foreground); cursor: pointer; user-select: none;
  transition: background-color var(--duration-instant) var(--ease-standard);
}
.zs-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-option.is-active { background: var(--surface-muted); }
.zs-option[aria-selected="true"] { font-weight: 500; }
.zs-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.zs-check { display: grid; flex: none; color: var(--accent-strong); visibility: hidden; }
.zs-option[aria-selected="true"] .zs-check { visibility: visible; }
.zs-group { padding: 10px 11px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: .01em; }
.zs-group:first-child { padding-top: 4px; }
.zs-empty { margin: 0; padding: 14px 11px; color: var(--text-muted); font-size: var(--text-sm); }
@keyframes zs-in    { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes zs-in-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@media (pointer: coarse) {
  .zs-option { min-height: 44px; }
  .zs-search input { font-size: 16px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .zs-panel { animation: none; } .zs-chevron { transition: none; } }

.input-icon { position: relative; }
.input-icon > svg, .input-icon > [data-icon] { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: grid; }
.input-icon > [data-icon] svg { width: 16px; height: 16px; }
[data-icon] { display: inline-grid; place-items: center; }
[data-icon] svg { width: 1em; height: 1em; }
.btn [data-icon] svg { width: 16px; height: 16px; }
.input-icon > .input { padding-left: 40px; }
.form-grid { display: grid; gap: var(--space-4); }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; } }

/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; width: 44px; height: 26px; flex: none; border-radius: var(--radius-pill); background: var(--control-track); transition: background var(--duration-fast) var(--ease-standard); }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); transition: transform var(--duration-spring) var(--ease-spring); }
.switch input:checked + .track { background: var(--control-on); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid color-mix(in oklab, var(--accent-strong) 72%, transparent); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; cursor: not-allowed; }
.switch .switch-label { font-size: var(--text-sm); font-weight: 500; }
.switch .switch-hint { display: block; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; margin-top: 2px; }

/* Stepper (number with − +) */
.stepper { display: inline-flex; align-items: center; height: var(--control-height-sm); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); overflow: hidden; }
.stepper button { width: 34px; height: 100%; display: grid; place-items: center; color: var(--text-secondary); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.stepper button svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .stepper button:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper input { width: 52px; height: 100%; text-align: center; border: 0; border-inline: 1px solid var(--border); background: transparent; font-variant-numeric: tabular-nums; font-weight: 500; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper[data-dirty="true"] { border-color: var(--accent); }

/* ── Segmented control ────────────────────────────────────────────── */
.segmented { display: inline-flex; max-width: 100%; align-items: center; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button { position: relative; display: inline-grid; place-items: center; min-height: var(--control-height-sm); min-width: 4.5rem; flex: 0 0 auto; border-radius: calc(var(--radius-control) - 3px); padding: 0 var(--space-3); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .segmented button:hover { color: var(--foreground); } }
.segmented button[aria-pressed="true"], .segmented button.active { color: var(--accent-strong); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-resting); }

/* ── Card & metric card ───────────────────────────────────────────── */
.card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-resting); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6) 0; }
.card-header h2, .card-header h3 { font-size: var(--text-base); font-weight: 500; }
.card-header p { margin-top: 2px; color: var(--text-muted); font-size: var(--text-sm); }
.card-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

.metric { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-surface); padding: var(--space-6); background: var(--surface); box-shadow: var(--shadow-resting); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.metric-top span { color: var(--text-secondary); font-size: var(--text-sm); }
.metric-top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 8px; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.metric-top small[data-trend] { border-color: transparent; }
.metric-top small[data-trend="up"]   { background: color-mix(in oklab, var(--success) 11%, transparent); color: var(--success); }
.metric-top small[data-trend="down"] { background: color-mix(in oklab, var(--danger) 11%, transparent); color: var(--danger); }
.metric-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
.metric p { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
.metric.is-compact { padding: var(--space-5); border-radius: var(--radius-panel); }
.metric.is-compact .metric-top { margin-bottom: var(--space-4); }
.metric.is-compact .metric-value { font-size: var(--text-2xl); }
@media (max-width: 380px) { .metric { padding: var(--space-4); } .metric-top { align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-4); } }

/* ── Table ────────────────────────────────────────────────────────── */
.table-wrap { position: relative; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: var(--leading-body); text-align: left; }
.table th { height: 44px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; background: var(--surface); }
.table th[data-sort] { padding: 0; }
.table th[aria-sort]:not([aria-sort="none"]) { color: var(--foreground); }
.table th[data-sort] button { display: flex; width: 100%; height: 44px; align-items: center; gap: 6px; padding: 0 var(--space-4); color: inherit; font: inherit; font-weight: 500; white-space: nowrap; }
.table th[data-sort] button .sort-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--text-muted); opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.table th[data-sort] button .sort-icon svg { width: 14px; height: 14px; }
.table th[aria-sort="ascending"] .sort-icon, .table th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--foreground); }
.table th[aria-sort="descending"] .sort-icon { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .table th[data-sort] button:hover .sort-icon { opacity: .6; } }
.table th[data-numeric], .table td[data-numeric] { text-align: right; font-variant-numeric: tabular-nums; }
.table th[data-numeric] button { justify-content: flex-end; flex-direction: row-reverse; }
.table td { height: 52px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--foreground); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-href], .table tbody tr.is-clickable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .table tbody tr.is-clickable:hover td { background: var(--surface-muted); } }
.table .cell-stack { display: grid; gap: 2px; min-width: 0; }
.table .cell-stack span { color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .cell-stack strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .thumb { width: 40px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--surface-muted); flex: none; }
.table .thumb-fallback { width: 40px; height: 48px; border-radius: 10px; background: var(--surface-muted); display: grid; place-items: center; color: var(--text-muted); font-size: 10px; }
.table .cell-media { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.table .nowrap, .nowrap { white-space: nowrap; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-4); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-xs); }
.unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); vertical-align: middle; margin-right: 8px; }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid oklch(0% 0 0 / .12); vertical-align: -1px; margin-right: 8px; flex: none; }

/* ── Pagination ───────────────────────────────────────────────────── */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.pagination button { display: grid; width: var(--control-height-sm); height: var(--control-height-sm); place-items: center; border: 1px solid transparent; border-radius: var(--radius-control); color: var(--text-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.pagination button svg { width: 14px; height: 14px; }
.pagination button[aria-current="page"] { color: var(--foreground); border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-resting); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .pagination button:hover:not(:disabled):not([aria-current="page"]) { background: var(--surface-muted); color: var(--foreground); } }

/* ── Dialog ───────────────────────────────────────────────────────── */
.dialog-overlay { position: fixed; inset: 0; z-index: 50; background: oklch(10% 0 0 / .46); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); animation: overlay-in var(--duration-standard) var(--ease-enter) both; }
.dialog { position: fixed; z-index: 51; inset: 0; width: min(calc(100vw - var(--space-8)), var(--dialog-width, 520px)); height: fit-content; max-height: calc(100dvh - var(--space-8)); margin: auto; overflow: hidden auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); animation: content-fade-in var(--duration-fast) var(--ease-enter) both, content-rise-in var(--duration-spring) var(--ease-spring) both; display: flex; flex-direction: column; }
.dialog-lg { --dialog-width: 960px; }
.dialog-xl { --dialog-width: 1120px; }
.dialog-overlay[data-closing], .dialog[data-closing] { animation: content-out var(--duration-fast) var(--ease-standard) both; pointer-events: none; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); border-bottom: 1px solid var(--border); flex: none; }
.dialog-title { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
.dialog-description { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dialog-close { flex: 0 0 auto; display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-control); background: color-mix(in oklab, var(--surface-muted) 50%, transparent); color: var(--text-secondary); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.dialog-close svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .dialog-close:hover { background: var(--surface-muted); color: var(--foreground); } }
.dialog-close:active { transform: scale(.96); }
.dialog-body { padding: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-body); overflow-y: auto; flex: 1 1 auto; }
.dialog-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); flex: none; }
.dialog-footer .left { margin-right: auto; }
@keyframes overlay-in { from { opacity: 0; } }
@keyframes content-fade-in { from { opacity: 0; } }
@keyframes content-rise-in { from { transform: translateY(8px) scale(.96); } }
@keyframes content-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }

/* ── Toast ────────────────────────────────────────────────────────── */
.toast-stack { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60; display: grid; gap: var(--space-2); width: min(100% - var(--space-10), 26rem); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem .875rem .875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-panel); background: color-mix(in oklab, var(--surface) 94%, var(--background)); color: var(--foreground); box-shadow: var(--shadow-floating); pointer-events: auto; animation: toast-in var(--duration-spring) var(--ease-spring) both; }
.toast[data-closing] { animation: content-out var(--duration-fast) var(--ease-standard) both; }
.toast-icon { display: grid; width: 1.875rem; height: 1.875rem; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in oklab, var(--toast-tone, var(--success)) 24%, var(--border)); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--toast-tone, var(--success)) 10%, var(--surface)); color: var(--toast-tone, var(--success)); }
.toast-icon svg { width: 14px; height: 14px; }
.toast[data-tone="danger"] { --toast-tone: var(--danger); }
.toast[data-tone="warning"] { --toast-tone: var(--warning); }
.toast[data-tone="info"] { --toast-tone: var(--accent); }
.toast-copy { display: grid; min-width: 0; gap: .125rem; padding-top: .3125rem; flex: 1; }
.toast-title { font-size: var(--text-sm); font-weight: 500; }
.toast-desc { color: var(--text-secondary); font-size: var(--text-sm); }
.toast-close { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: var(--radius-pill); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.toast-close svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .toast-close:hover { background: var(--surface-muted); color: var(--foreground); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ── Empty state & skeleton ───────────────────────────────────────── */
.empty { display: flex; width: 100%; flex-direction: column; align-items: center; padding: clamp(var(--space-8), 8vw, var(--space-12)) var(--space-5); text-align: center; }
.empty-icon { display: grid; width: var(--space-12); height: var(--space-12); place-items: center; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-muted); color: var(--text-secondary); animation: empty-in var(--duration-considered) var(--ease-enter) both; }
.empty-icon svg { width: 22px; height: 22px; }
.empty h3 { margin: var(--space-5) 0 0; font-size: var(--text-base); font-weight: 500; }
.empty p { max-width: 20rem; margin: var(--space-2) auto 0; color: var(--text-secondary); font-size: var(--text-sm); text-wrap: balance; }
.empty .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
@keyframes empty-in { from { opacity: 0; transform: scale(.92); } }
.skeleton { display: block; border-radius: var(--radius-control); background: color-mix(in oklab, var(--border-strong) 38%, var(--surface)); animation: skeleton-pulse 1.8s var(--ease-in-out) calc(var(--index, 0) * 90ms) 11 both; }
.skeleton-text { height: var(--space-3); width: 60%; }
.skeleton-title { height: var(--space-4); width: 40%; }
.skeleton-block { height: 120px; width: 100%; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .52; } }

/* ── Menu (dropdown) ──────────────────────────────────────────────── */
.menu { position: absolute; z-index: 40; min-width: 180px; padding: 6px; border: 1px solid var(--border); border-radius: calc(var(--radius-control) + 2px); background: var(--surface-raised); box-shadow: var(--shadow-floating); animation: content-fade-in var(--duration-fast) var(--ease-enter) both, content-rise-in var(--duration-spring) var(--ease-spring) both; }
.menu[hidden] { display: none; }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: var(--space-2); min-height: 36px; border-radius: calc(var(--radius-control) - 4px); padding: 0 11px; color: var(--foreground); font-size: var(--text-sm); text-align: left; transition: background-color var(--duration-instant) var(--ease-standard); }
.menu button svg, .menu a svg { width: 14px; height: 14px; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .menu button:hover, .menu a:hover { background: var(--surface-muted); } }
.menu .danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }

/* ── Split bar & progress ─────────────────────────────────────────── */
.split-bar { display: flex; height: 10px; width: 100%; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-muted); }
.split-bar span { height: 100%; transition: width var(--duration-considered) var(--ease-standard); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: var(--text-xs); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend strong { color: var(--foreground); font-variant-numeric: tabular-nums; }

/* ── Touch devices (phones, iPad) ─────────────────────────────────── */
/* Bigger hit areas, and 16px text in fields so iOS Safari doesn't zoom on focus. */
@media (pointer: coarse) {
  .btn-sm { min-height: 40px; }
  .btn-icon.btn-sm { width: 40px; }
  .input-sm { min-height: 40px; }
  .stepper { height: 40px; }
  .stepper button { width: 40px; }
  .pagination button { width: 40px; height: 40px; }
  .segmented button { min-height: 40px; }
  .input, .textarea, .select select { font-size: 16px; }
  .dialog-close, .toast-close { width: 40px; height: 40px; }
}

/* Date fields look the same on iOS, Android and desktop */
.input[type="date"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; min-width: 0; }
.input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }

@media (max-width: 640px) {
  .toast-stack { left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); width: auto; }
  .dialog { width: calc(100vw - var(--space-4)); max-height: calc(100dvh - var(--space-4) - env(safe-area-inset-top)); border-radius: var(--radius-panel); }
  .dialog-header, .dialog-body { padding: var(--space-4); }
  .dialog-footer { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .empty { padding: var(--space-8) var(--space-4); }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn:not(:disabled):active { transform: none; }
}