/* Design system bundle. Generated -- do not edit.
   Regenerate with the build tool; hand edits are overwritten.
   Layers, in order: primitives (scales), theme (colour/type/character),
   components (recipes). Every colour is measured against WCAG AA. */



:root {
  
  --root-size: 100%;

  
  --text-xs:   0.75rem;    
  --text-sm:   0.875rem;   
  --text-base: 1rem;       
  --text-md:   1.125rem;   
  --text-lg:   1.25rem;    
  --text-xl:   clamp(1.4rem,  1.2rem  + 0.9vw, 1.6rem);
  --text-2xl:  clamp(1.75rem, 1.45rem + 1.4vw, 2.15rem);
  --text-3xl:  clamp(2.25rem, 1.8rem  + 2.2vw, 3rem);
  --text-4xl:  clamp(2.9rem,  2.2rem  + 3.4vw, 4.25rem);  

  
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  
  --lh-display: 1.05;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  
  --track-display: -0.02em;   
  --track-tight:   -0.01em;
  --track-normal:  0;
  --track-wide:    0.06em;    

  
  --measure:       66ch;
  --measure-tight: 54ch;      

  
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;

  --container-pad: clamp(1rem, 4vw, 4rem);

  
  --radius-0:  0;
  --radius-2:  2px;
  --radius-3:  3px;
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 999px;

  
  --radius-xs: var(--radius-3);
  --radius-sm: var(--radius-6);
  --radius-md: var(--radius-10);
  --radius-lg: var(--radius-16);
  --radius-xl: var(--radius-24);

  
  --dur-fast:  120ms;   
  --dur:       200ms;   
  --dur-slow:  320ms;   
  --dur-entry: 400ms;   

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);       
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   
  --ease-soft:   cubic-bezier(0.2, 0, 0.2, 1);     

  --stagger: 40ms;      

  
  --z-base:     0;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;
  --z-tooltip:  60;

  
  --tap-min:    44px;   
  --tap-comfy:  48px;   
  --tap-gap:     8px;   

  
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;

  
  --pad-y: var(--s-3);
  --pad-x: var(--s-4);

  
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 960px;
  --container-xl: 1100px;
  --container-2xl: 1280px;
}

html { font-size: var(--root-size); }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root[data-density="compact"] {
  --h-sm: 28px;
  --h-md: 34px;
  --h-lg: 40px;
  --pad-y: var(--s-2);
  --pad-x: var(--s-3);
  --lh-base: 1.45;
}

:root[data-density="spacious"] {
  --h-sm: 36px;
  --h-md: 44px;
  --h-lg: 52px;
  --pad-y: var(--s-4);
  --pad-x: var(--s-5);
  --lh-base: 1.65;
}

@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;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light dark;
  --pov: "Civic-clear";

  
  --font-display: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans   : "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono   : ui-monospace, "SF Mono", Consolas, monospace;
  --font-heading: var(--font-sans);
  --font-body   : var(--font-sans);
  --font-ui     : var(--font-sans);
  --font-num    : var(--font-sans);
  --w-heading   : var(--w-bold);
  --w-strong    : var(--w-semibold);
  --root-size   : 106%;
  --lh-base     : 1.6;
  --lh-relaxed  : 1.75;

  
  --r-inner   : var(--radius-0);
  --r-control : var(--radius-2);
  --r-card    : var(--radius-2);
  --r-overlay : var(--radius-4);
  --r-pill    : var(--radius-2);
  --stroke   : 1.5px;
  --corner-shape: round;

  
  --bg             : light-dark(oklch(0.972 0.0020 250), oklch(0.181 0.0050 250));
  --surface        : light-dark(oklch(0.995 0.0020 250), oklch(0.228 0.0050 250));
  --surface-sunken : light-dark(oklch(0.936 0.0020 250), oklch(0.140 0.0050 250));
  --surface-raised : light-dark(oklch(1.000 0.0000 250), oklch(0.276 0.0050 250));
  --border         : light-dark(oklch(0.872 0.0028 250), oklch(0.341 0.0070 250));
  --border-strong  : light-dark(oklch(0.653 0.0028 250), oklch(0.525 0.0070 250));

  
  --text        : light-dark(oklch(0.244 0.0028 250), oklch(0.969 0.0070 250));
  --text-2      : light-dark(oklch(0.401 0.0028 250), oklch(0.788 0.0070 250));
  --text-muted  : light-dark(oklch(0.513 0.0028 250), oklch(0.657 0.0070 250));
  --text-faint  : light-dark(oklch(0.613 0.0028 250), oklch(0.554 0.0070 250));

  
  --accent            : light-dark(oklch(0.491 0.1275 256), oklch(0.694 0.1275 256));
  --accent-hover      : light-dark(oklch(0.431 0.1275 256), oklch(0.765 0.1216 256));
  --accent-solid      : light-dark(oklch(0.547 0.1500 256), oklch(0.602 0.1500 256));
  --accent-solid-hover: light-dark(oklch(0.507 0.1500 256), oklch(0.629 0.1500 256));
  --accent-tint       : light-dark(oklch(0.902 0.0240 256), oklch(0.316 0.0240 256));
  --accent-tint-bd    : light-dark(oklch(0.762 0.0528 256), oklch(0.431 0.0528 256));
  --text-onaccent     : light-dark(oklch(0.983 0.0050 256), oklch(0.160 0.0200 256));

  
  --danger     : light-dark(oklch(0.508 0.1615 25), oklch(0.713 0.1615 25));
  --danger-bg  : light-dark(oklch(0.906 0.0380 25), oklch(0.321 0.0380 25));
  --danger-on  : light-dark(oklch(0.984 0.0050 25), oklch(0.160 0.0200 25));
  --success    : light-dark(oklch(0.475 0.1251 152), oklch(0.679 0.1275 152));
  --success-bg : light-dark(oklch(0.899 0.0300 152), oklch(0.313 0.0300 152));
  --success-on : light-dark(oklch(0.982 0.0050 152), oklch(0.160 0.0200 152));
  --warning    : light-dark(oklch(0.494 0.1048 74), oklch(0.699 0.1275 74));
  --warning-bg : light-dark(oklch(0.903 0.0300 74), oklch(0.317 0.0300 74));
  --warning-on : light-dark(oklch(0.983 0.0050 74), oklch(0.160 0.0200 74));

  
  --focus-ring: 0 -2px oklch(0.90 0.18 95), 0 4px var(--text), 0 0 0 4px oklch(0.90 0.18 95);

  
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 0 0 1px var(--border-strong);
}

:root[data-accent="forest"] {
  --accent            : light-dark(oklch(0.477 0.1105 150), oklch(0.681 0.1105 150));
  --accent-hover      : light-dark(oklch(0.417 0.1105 150), oklch(0.753 0.1105 150));
  --accent-solid      : light-dark(oklch(0.530 0.1300 150), oklch(0.586 0.1300 150));
  --accent-solid-hover: light-dark(oklch(0.491 0.1300 150), oklch(0.613 0.1300 150));
  --accent-tint       : light-dark(oklch(0.900 0.0208 150), oklch(0.314 0.0208 150));
  --accent-tint-bd    : light-dark(oklch(0.757 0.0458 150), oklch(0.426 0.0458 150));
  --text-onaccent     : light-dark(oklch(0.982 0.0050 150), oklch(0.160 0.0200 150));
}

:root[data-accent="crimson"] {
  --accent            : light-dark(oklch(0.508 0.1530 14), oklch(0.713 0.1530 14));
  --accent-hover      : light-dark(oklch(0.448 0.1530 14), oklch(0.781 0.1296 14));
  --accent-solid      : light-dark(oklch(0.567 0.1800 14), oklch(0.623 0.1800 14));
  --accent-solid-hover: light-dark(oklch(0.527 0.1800 14), oklch(0.650 0.1800 14));
  --accent-tint       : light-dark(oklch(0.906 0.0288 14), oklch(0.320 0.0288 14));
  --accent-tint-bd    : light-dark(oklch(0.770 0.0634 14), oklch(0.439 0.0634 14));
  --text-onaccent     : light-dark(oklch(0.984 0.0050 14), oklch(0.160 0.0200 14));
}

:root[data-accent="vermillion"] {
  --accent            : light-dark(oklch(0.507 0.1573 32), oklch(0.712 0.1573 32));
  --accent-hover      : light-dark(oklch(0.446 0.1573 32), oklch(0.780 0.1295 32));
  --accent-solid      : light-dark(oklch(0.566 0.1850 32), oklch(0.621 0.1850 32));
  --accent-solid-hover: light-dark(oklch(0.526 0.1850 32), oklch(0.648 0.1850 32));
  --accent-tint       : light-dark(oklch(0.905 0.0296 32), oklch(0.320 0.0296 32));
  --accent-tint-bd    : light-dark(oklch(0.769 0.0651 32), oklch(0.438 0.0651 32));
  --text-onaccent     : light-dark(oklch(0.984 0.0050 32), oklch(0.160 0.0200 32));
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(.btn, .seg button, .chip, .input, .textarea, .select, .switch, .check, .radio,
       .tab, .pager a, .menu button, .crumbs a, .link, .combo-input, .combo-opt,
       .drop, .slider, .disclosure-trigger, .tagin, .palette-input, .palette-opt,
       .split > *, .datefield):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@supports (corner-shape: squircle) {
  :where(.btn, .card, .input, .textarea, .select, .chip, .badge, .seg, .seg button,
         .modal, .drawer, .sheet, .menu, .menu button, .toast, .tip, .confirm,
         .rowlist, .tagin, .tagin .tag, .combo-input, .combo-pop, .combo-opt,
         .palette, .palette-opt, .drop, .file, .cal, .cal-grid button, .qty,
         .qty button, .toolbar, .filters .token, .datefield, .searchfield .box,
         .avatar, .fab, .pager a, .progress, .skel, .alert, .stat, .tab) {
    corner-shape: var(--corner-shape, round);
  }
  
  :where(.avatar, .chip, .fab, .badge .dot, .dots button) { corner-shape: round; }
}

.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.25em; height: 1.25em; }

.link {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px;
  border-radius: var(--r-inner);
  transition: color var(--dur-fast) var(--ease-soft);
}
.link:hover, .link.is-hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

.kbd {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 1px var(--s-1); border-radius: var(--r-inner);
  background: var(--surface-sunken); color: var(--text-muted);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}

.btn {
  font-family: var(--font-ui);
  font-size: var(--text-sm); font-weight: var(--w-medium); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--pad-x); min-height: var(--h-md);
  border: var(--stroke) solid transparent;
  border-radius: var(--r-control);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur) var(--ease-soft),
              border-color var(--dur) var(--ease-soft),
              color var(--dur) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active, .btn.is-active { transform: scale(0.98); }

.btn-sm { font-size: var(--text-xs); padding: 0 var(--s-3); min-height: var(--h-sm); }
.btn-lg { font-size: var(--text-base); padding: 0 var(--s-6); min-height: var(--h-lg); }

.btn-icon { padding: 0; width: var(--h-md); }
.btn-icon.btn-sm { width: var(--h-sm); }
.btn-icon.btn-lg { width: var(--h-lg); }

.btn-primary { background: var(--accent-solid); color: var(--text-onaccent); font-weight: var(--w-strong); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--accent-solid-hover); }

.btn-secondary { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--surface-sunken); color: var(--text); border-color: var(--text-faint); }

.btn-quiet { background: transparent; color: var(--text-muted); }
.btn-quiet:hover, .btn-quiet.is-hover { background: var(--surface-sunken); color: var(--text); }

.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, transparent); }
.btn-danger:hover, .btn-danger.is-hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger); color: var(--danger-on); font-weight: var(--w-strong); }
.btn-danger-solid:hover, .btn-danger-solid.is-hover { filter: brightness(0.92); }

.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none;
}

.btn[data-loading], .btn.is-loading { cursor: progress; pointer-events: none; }
.btn[data-loading] .btn-label, .btn.is-loading .btn-label { opacity: 0.55; }
.btn .spinner { width: 1em; height: 1em; }

.split { display: inline-flex; }
.split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split > .btn:last-child {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 0 var(--s-2); margin-left: -1px;
  box-shadow: inset 1px 0 0 color-mix(in oklch, var(--text-onaccent) 25%, transparent);
}

.seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface-sunken);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-control);
}
.seg button {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-medium);
  border: 0; background: transparent; color: var(--text-muted);
  padding: 0 var(--s-4); min-height: calc(var(--h-sm) - 4px);
  border-radius: var(--r-inner); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.seg button:hover, .seg button.is-hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button.is-selected {
  background: var(--surface); color: var(--text);
  font-weight: var(--w-strong); box-shadow: var(--shadow-xs);
}

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label, .field-label {
  font-family: var(--font-ui); font-size: var(--text-sm);
  font-weight: var(--w-medium); color: var(--text-2);
}
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-help { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }
.field-error {
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--danger);
  display: flex; align-items: center; gap: var(--s-1);
}
.field-row { display: flex; gap: var(--s-3); align-items: flex-end; }

.input, .textarea, .select {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text);
  width: 100%;
  background: var(--surface);
  border: var(--stroke) solid var(--border-strong);
  border-radius: var(--r-control);
  padding: 0 var(--s-3); min-height: var(--h-md);
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .input.is-hover, .textarea:hover, .select:hover { border-color: var(--text-faint); }
.input:focus-visible, .input.is-focus,
.textarea:focus-visible, .textarea.is-focus,
.select:focus-visible, .select.is-focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.input[aria-invalid="true"], .input.is-invalid,
.textarea[aria-invalid="true"], .textarea.is-invalid {
  border-color: var(--danger); background: var(--danger-bg);
}
.input:disabled, .input.is-disabled, .textarea:disabled, .select:disabled {
  background: var(--surface-sunken); color: var(--text-faint);
  cursor: not-allowed; border-color: var(--border);
}
.input[readonly], .input.is-readonly { background: var(--surface-sunken); border-style: dashed; }

.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); padding: var(--s-3); }

.select {
  appearance: none; padding-right: var(--s-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .icon { position: absolute; left: var(--s-3); color: var(--text-faint); pointer-events: none; }
.input-wrap > .icon.trail { left: auto; right: var(--s-3); }
.input-wrap .input { padding-left: var(--s-10); }
.input-wrap.trailing .input { padding-left: var(--s-3); padding-right: var(--s-10); }

.affix {
  display: flex; align-items: stretch;
  border: var(--stroke) solid var(--border-strong); border-radius: var(--r-control);
  background: var(--surface); overflow: hidden;
}
.affix > span {
  display: flex; align-items: center; padding: 0 var(--s-3);
  background: var(--surface-sunken); color: var(--text-muted);
  font-family: var(--font-num); font-size: var(--text-sm);
  border-right: var(--stroke) solid var(--border);
}
.affix > .input { border: 0; border-radius: 0; }
.affix > .input:focus-visible { box-shadow: none; }
.affix:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }

.choice {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0; min-height: var(--tap-min); cursor: pointer;
}
.choice .choice-text { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text); }
.choice .choice-text small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }

.check, .radio {
  appearance: none; margin: 0; flex: none;
  width: 18px; height: 18px;
  background: var(--surface);
  border: var(--stroke) solid var(--border-strong);
  cursor: pointer; display: grid; place-content: center;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.check { border-radius: var(--r-inner); }
.radio { border-radius: var(--radius-full); }
.check:hover, .check.is-hover, .radio:hover, .radio.is-hover { border-color: var(--accent); }

.check::before {
  content: ""; width: 10px; height: 10px; transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
  background: var(--text-onaccent);
  clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 16%, 86% 2%, 38% 70%);
}
.check:checked, .check.is-checked { background: var(--accent-solid); border-color: var(--accent-solid); }
.check:checked::before, .check.is-checked::before { transform: scale(1); }
.check:indeterminate, .check.is-mixed { background: var(--accent-solid); border-color: var(--accent-solid); }
.check:indeterminate::before, .check.is-mixed::before {
  transform: scale(1); clip-path: none; width: 9px; height: 2px; border-radius: 1px;
}

.radio::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--text-onaccent); transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.radio:checked, .radio.is-checked { background: var(--accent-solid); border-color: var(--accent-solid); }
.radio:checked::before, .radio.is-checked::before { transform: scale(1); }

.check:disabled, .check.is-disabled, .radio:disabled, .radio.is-disabled {
  opacity: 0.45; cursor: not-allowed; background: var(--surface-sunken);
}

.switch {
  appearance: none; margin: 0; flex: none;
  width: 40px; height: 24px; border-radius: var(--radius-full);
  background: var(--border-strong); border: 0; cursor: pointer; position: relative;
  transition: background var(--dur) var(--ease-soft);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--surface-raised); box-shadow: 0 1px 2px oklch(0 0 0/0.25);
  transition: transform var(--dur) var(--ease-out);
}
.switch:checked, .switch.is-checked { background: var(--accent-solid); }
.switch:checked::after, .switch.is-checked::after { transform: translateX(16px); }
.switch:disabled, .switch.is-disabled { opacity: 0.45; cursor: not-allowed; }

.chip {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-medium);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-3); min-height: 36px;
  background: var(--surface); color: var(--text-2);
  border: var(--stroke) solid var(--border-strong);
  border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.chip:hover, .chip.is-hover { border-color: var(--text-faint); color: var(--text); }
.chip[aria-pressed="true"], .chip.is-selected {
  background: var(--accent-tint); color: var(--accent);
  border-color: var(--accent-tint-bd); font-weight: var(--w-strong);
}
.chip:disabled, .chip.is-disabled { opacity: 0.45; cursor: not-allowed; }
.chip-set { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-strong);
  letter-spacing: var(--track-tight);
  padding: 3px var(--s-2); border-radius: var(--r-inner);
  background: var(--surface-sunken); color: var(--text-2);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.badge-accent  { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 var(--stroke) var(--accent-tint-bd); }
.badge-success { background: var(--success-bg);  color: var(--success); box-shadow: inset 0 0 0 var(--stroke) color-mix(in oklch, var(--success) 30%, transparent); }
.badge-warning { background: var(--warning-bg);  color: color-mix(in oklch, var(--warning) 80%, var(--text)); box-shadow: inset 0 0 0 var(--stroke) color-mix(in oklch, var(--warning) 35%, transparent); }
.badge-danger  { background: var(--danger-bg);   color: var(--danger);  box-shadow: inset 0 0 0 var(--stroke) color-mix(in oklch, var(--danger) 30%, transparent); }
.badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

.card {
  background: var(--surface);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--shadow-xs);
}
.card-raised { background: var(--surface-raised); box-shadow: var(--shadow-sm); }
a.card, .card-link {
  display: block; text-decoration: none; color: inherit;
  transition: box-shadow var(--dur) var(--ease-soft), transform var(--dur-fast) var(--ease-out),
              border-color var(--dur) var(--ease-soft);
}
a.card:hover, .card-link:hover, .card-link.is-hover {
  box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px);
}
.card-title { font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--w-strong); margin: 0 0 var(--s-1); color: var(--text); }
.card-body  { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

.stat { display: flex; flex-direction: column; gap: var(--s-1); }
.stat-label {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-strong);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-faint);
}
.stat-value {
  font-family: var(--font-heading); font-optical-sizing: auto;
  font-size: var(--text-2xl); font-weight: var(--w-heading);
  line-height: var(--lh-display); letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.stat-delta { font-family: var(--font-num); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); display: flex; align-items: center; gap: var(--s-1); }
.stat-delta.up   { color: var(--success); }
.stat-delta.down { color: var(--danger); }

.table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); }
.table caption { text-align: left; font-size: var(--text-xs); color: var(--text-muted); padding-bottom: var(--s-3); }
.table th {
  text-align: left; font-size: var(--text-xs); font-weight: var(--w-strong);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-faint);
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--stroke) solid var(--border-strong); white-space: nowrap;
}
.table td { padding: var(--pad-y) var(--s-3); border-bottom: var(--stroke) solid var(--border); color: var(--text-2); vertical-align: middle; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-soft); }
.table tbody tr:hover, .table tbody tr.is-hover { background: var(--surface-sunken); }
.table tbody tr[aria-selected="true"], .table tbody tr.is-selected {
  background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent);
}
.table .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.table th button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-1); border-radius: var(--r-inner);
}
.table th button:hover, .table th button.is-hover { color: var(--text); }
.table th[aria-sort] button { color: var(--text); }
.table th[aria-sort="none"] .icon { opacity: 0; }
.table th button:hover .icon { opacity: 0.5; }
.table th[aria-sort="descending"] .icon { transform: rotate(180deg); }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--pad-y) 0; border-bottom: var(--stroke) solid var(--border);
  font-family: var(--font-ui); font-size: var(--text-sm);
}
.list li:last-child { border-bottom: 0; }
.list .list-main { flex: 1; min-width: 0; }
.list .list-main strong { display: block; font-weight: var(--w-medium); color: var(--text); }
.list .list-main small  { color: var(--text-muted); font-size: var(--text-xs); }

.alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-control);
  font-family: var(--font-ui); font-size: var(--text-sm);
  background: var(--surface-sunken); color: var(--text-2);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.alert .icon { flex: none; margin-top: 2px; }
.alert-title { font-weight: var(--w-strong); color: var(--text); display: block; margin-bottom: 2px; }
.alert-info    { background: var(--accent-tint); box-shadow: inset 0 0 0 var(--stroke) var(--accent-tint-bd); }
.alert-info    .icon, .alert-info    .alert-title { color: var(--accent); }
.alert-success { background: var(--success-bg); box-shadow: inset 0 0 0 var(--stroke) color-mix(in oklch, var(--success) 30%, transparent); }
.alert-success .icon, .alert-success .alert-title { color: var(--success); }
.alert-warning { background: var(--warning-bg); box-shadow: inset 0 0 0 var(--stroke) color-mix(in oklch, var(--warning) 35%, transparent); }
.alert-warning .icon, .alert-warning .alert-title { color: color-mix(in oklch, var(--warning) 80%, var(--text)); }
.alert-danger  { background: var(--danger-bg);  box-shadow: inset 0 0 0 var(--stroke) color-mix(in oklch, var(--danger) 30%, transparent); }
.alert-danger  .icon, .alert-danger  .alert-title { color: var(--danger); }
.alert-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }

.banner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--container-pad);
  font-family: var(--font-ui); font-size: var(--text-sm);
  background: var(--warning-bg); color: color-mix(in oklch, var(--warning) 80%, var(--text));
  border-bottom: var(--stroke) solid color-mix(in oklch, var(--warning) 35%, transparent);
}
.banner .btn { margin-left: auto; }

.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-raised);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text);
  max-width: 420px;
}
.toast .toast-msg { flex: 1; }
.toast .icon { flex: none; }
.toast-success .icon { color: var(--success); }
.toast-danger  .icon { color: var(--danger); }

.confirm {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  background: var(--danger-bg); border-radius: var(--r-control);
  box-shadow: inset 0 0 0 var(--stroke) color-mix(in oklch, var(--danger) 30%, transparent);
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--danger);
}

.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3); padding: var(--s-12) var(--s-6);
}
.empty .icon { width: 28px; height: 28px; color: var(--text-faint); stroke-width: 1.5; }
.empty h3 {
  font-family: var(--font-heading); font-optical-sizing: auto;
  font-size: var(--text-lg); font-weight: var(--w-heading); margin: 0; color: var(--text);
}
.empty p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: var(--measure-tight); line-height: var(--lh-base); }
.empty .btn { margin-top: var(--s-2); }

.skel {
  background: linear-gradient(90deg,
    var(--surface-sunken) 0%,
    color-mix(in oklch, var(--surface-sunken) 60%, var(--surface)) 50%,
    var(--surface-sunken) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-inner);
  animation: skel-shimmer 1.4s var(--ease-in-out) infinite;
  height: 1em;
}
.skel-text  { height: 0.8em; }
.skel-title { height: 1.4em; width: 45%; }
.skel-line  { width: 100%; }
.skel-line.short { width: 62%; }
@keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid color-mix(in oklch, currentColor 25%, transparent);
  border-top-color: currentColor; border-radius: var(--radius-full);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress { height: 6px; background: var(--surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent-solid); border-radius: inherit;
                transition: width var(--dur-slow) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: var(--surface-sunken); }
  .spinner { animation: none; border-top-color: transparent; border-right-color: currentColor; }
}

.tabs { display: flex; gap: var(--s-1); border-bottom: var(--stroke) solid var(--border); }
.tab {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-medium);
  background: none; border: 0; cursor: pointer;
  padding: 0 var(--s-4); min-height: var(--tap-min);
  color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: calc(var(--stroke) * -1);
  border-radius: var(--r-inner) var(--r-inner) 0 0;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.tab:hover, .tab.is-hover { color: var(--text); }
.tab[aria-selected="true"], .tab.is-selected {
  color: var(--text); font-weight: var(--w-strong); border-bottom-color: var(--accent);
}

.crumbs { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-ui); font-size: var(--text-sm); flex-wrap: wrap; }
.crumbs a { color: var(--text-muted); text-decoration: none; border-radius: var(--r-inner); }
.crumbs a:hover, .crumbs a.is-hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; }
.crumbs .sep { color: var(--text-faint); display: flex; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: var(--w-medium); }

.pager { display: flex; align-items: center; gap: var(--s-1); font-family: var(--font-num); font-size: var(--text-sm); }
.pager a, .pager span {
  min-width: 36px; min-height: 36px; padding: 0 var(--s-2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-control); color: var(--text-2); text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease-soft);
}
.pager a:hover, .pager a.is-hover { background: var(--surface-sunken); color: var(--text); }
.pager [aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: var(--w-strong); }
.pager .gap { color: var(--text-faint); min-width: auto; }
.pager .count { margin-left: var(--s-3); color: var(--text-muted); font-size: var(--text-xs); }

.steps { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-ui); font-size: var(--text-sm); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--s-2); color: var(--text-faint); }
.step .dot {
  width: 22px; height: 22px; border-radius: var(--radius-full);
  display: grid; place-content: center; flex: none;
  font-family: var(--font-num); font-size: var(--text-xs); font-weight: var(--w-strong);
  font-variant-numeric: tabular-nums;
  background: var(--surface-sunken); color: var(--text-muted);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.step.done { color: var(--text-2); }
.step.done .dot { background: var(--success); color: var(--success-on); box-shadow: none; }
.step.current { color: var(--text); font-weight: var(--w-strong); }
.step.current .dot { background: var(--accent-solid); color: var(--text-onaccent); box-shadow: none; }
.steps .bar { flex: 1; min-width: 20px; height: var(--stroke); background: var(--border); }

.menu {
  min-width: 200px; padding: var(--s-1);
  background: var(--surface-raised);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
.menu button {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-2);
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-3); min-height: 36px;
  background: none; border: 0; border-radius: var(--r-inner); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.menu button:hover, .menu button.is-hover { background: var(--surface-sunken); color: var(--text); }
.menu button.danger { color: var(--danger); }
.menu button.danger:hover, .menu button.danger.is-hover { background: var(--danger-bg); }
.menu button .kbd { margin-left: auto; }
.menu hr { border: 0; border-top: var(--stroke) solid var(--border); margin: var(--s-1) 0; }
.menu-label {
  font-size: var(--text-xs); font-weight: var(--w-strong); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--text-faint); padding: var(--s-2) var(--s-3) var(--s-1);
}

.tip {
  display: inline-block; padding: var(--s-1) var(--s-2);
  background: var(--text); color: var(--bg);
  border-radius: var(--r-inner);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-medium);
  box-shadow: var(--shadow-sm);
}

.scrim { position: absolute; inset: 0; background: oklch(0.2 0.01 250 / 0.45); }

.modal {
  width: min(440px, 100%);
  background: var(--surface-raised);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-overlay);
  box-shadow: var(--shadow-lg);
  padding: var(--s-6);
}
.modal h2 {
  font-family: var(--font-heading); font-optical-sizing: auto;
  font-size: var(--text-xl); font-weight: var(--w-heading);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  margin: 0 0 var(--s-2); color: var(--text);
}
.modal p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--s-6); line-height: var(--lh-base); }
.modal-actions { display: flex; gap: var(--s-2); justify-content: flex-end; }

.drawer {
  width: min(380px, 100%);
  background: var(--surface-raised);
  border-left: var(--stroke) solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--stroke) solid var(--border);
}
.drawer-head h2 {
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--w-heading);
  margin: 0; flex: 1; color: var(--text);
}
.drawer-body { padding: var(--s-5); flex: 1; overflow-y: auto; }
.drawer-foot {
  display: flex; gap: var(--s-2); justify-content: flex-end;
  padding: var(--s-4) var(--s-5); border-top: var(--stroke) solid var(--border);
  background: var(--surface);
}

.avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-solid); color: var(--text-onaccent);
  display: grid; place-content: center;
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-strong);
  letter-spacing: var(--track-tight);
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 44px; height: 44px; font-size: var(--text-sm); }
.avatar-muted { background: var(--surface-sunken); color: var(--text-muted); box-shadow: inset 0 0 0 var(--stroke) var(--border); }
.avatar-stack { display: flex; }
.avatar-stack .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }

.combo { position: relative; }
.combo-input {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text);
  width: 100%; background: var(--surface);
  border: var(--stroke) solid var(--border-strong); border-radius: var(--r-control);
  padding: 0 var(--s-10) 0 var(--s-3); min-height: var(--h-md);
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.combo-input:focus-visible, .combo-input.is-focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.combo > .icon { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }

.combo-pop {
  margin-top: var(--s-1); padding: var(--s-1);
  background: var(--surface-raised);
  border: var(--stroke) solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  max-height: 264px; overflow-y: auto;
}
.combo-opt {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-2);
  width: 100%; text-align: left; display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-3); min-height: 36px;
  background: none; border: 0; border-radius: var(--r-inner); cursor: pointer;
}
.combo-opt:hover, .combo-opt.is-hover,
.combo-opt[aria-selected="true"], .combo-opt.is-active { background: var(--surface-sunken); color: var(--text); }
.combo-opt[aria-selected="true"] .icon, .combo-opt.is-active .icon { color: var(--accent); }
.combo-opt mark { background: var(--accent-tint); color: var(--accent); border-radius: 2px; padding: 0 1px; }
.combo-opt .meta { margin-left: auto; font-size: var(--text-xs); color: var(--text-faint); }
.combo-empty { padding: var(--s-4) var(--s-3); font-size: var(--text-sm); color: var(--text-muted); text-align: center; }

.tagin {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  padding: var(--s-2); min-height: var(--h-md);
  background: var(--surface); border: var(--stroke) solid var(--border-strong);
  border-radius: var(--r-control); cursor: text;
}
.tagin:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.tagin input { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text);
               border: 0; outline: none; background: none; flex: 1; min-width: 80px; }
.tagin .tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-1) 2px var(--s-2);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-medium);
  background: var(--accent-tint); color: var(--accent);
  border-radius: var(--r-inner); box-shadow: inset 0 0 0 var(--stroke) var(--accent-tint-bd);
}
.tagin .tag button { background: none; border: 0; padding: 2px; color: inherit; cursor: pointer;
                     display: flex; border-radius: 2px; opacity: 0.6; }
.tagin .tag button:hover { opacity: 1; }

.toolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3);
  background: var(--surface); border: var(--stroke) solid var(--border);
  border-radius: var(--r-card) var(--r-card) 0 0;
  border-bottom-width: 0;
}
.toolbar .grow { flex: 1; min-width: 180px; }
.toolbar .divider { width: var(--stroke); align-self: stretch; background: var(--border); }
.toolbar .right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.toolbar.is-selecting { background: var(--accent-tint); border-color: var(--accent-tint-bd); }
.toolbar .selcount { font-family: var(--font-num); font-size: var(--text-sm); font-weight: var(--w-strong);
                     color: var(--accent); font-variant-numeric: tabular-nums; }

.filters { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
           padding: var(--s-2) var(--s-3); background: var(--surface-sunken);
           border: var(--stroke) solid var(--border); border-top: 0; font-size: var(--text-xs); }
.filters .label { color: var(--text-muted); }
.filters .token {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-1) 2px var(--s-2);
  background: var(--surface); border-radius: var(--r-inner);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
  font-family: var(--font-ui); font-weight: var(--w-medium); color: var(--text-2);
}
.filters .token b { font-weight: var(--w-regular); color: var(--text-faint); }
.filters .token button { background: none; border: 0; padding: 2px; color: var(--text-faint);
                         cursor: pointer; display: flex; border-radius: 2px; }
.filters .token button:hover { color: var(--text); }

.datefield {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 var(--s-2) 0 var(--s-3); min-height: var(--h-md);
  background: var(--surface); border: var(--stroke) solid var(--border-strong);
  border-radius: var(--r-control);
  font-family: var(--font-num); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.datefield:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.datefield input {
  font: inherit; font-variant-numeric: inherit; color: var(--text);
  border: 0; outline: none; background: none; text-align: center; padding: 2px 1px;
  border-radius: 2px;
}
.datefield input:focus { background: var(--accent-tint); color: var(--accent); }
.datefield input::placeholder { color: var(--text-faint); }
.datefield .dd { width: 2.2ch; } .datefield .mm { width: 2.2ch; } .datefield .yy { width: 4.2ch; }
.datefield .slash { color: var(--text-faint); }
.datefield .btn-icon { margin-left: var(--s-2); }
.datefield.is-invalid { border-color: var(--danger); background: var(--danger-bg); }

.daterange { display: inline-flex; align-items: center; gap: var(--s-2); }
.daterange .to { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

.cal {
  width: 260px; padding: var(--s-3);
  background: var(--surface-raised); border: var(--stroke) solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-md);
}
.cal-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.cal-head .month { flex: 1; text-align: center; font-family: var(--font-ui);
                   font-size: var(--text-sm); font-weight: var(--w-strong); color: var(--text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .dow { font-family: var(--font-ui); font-size: 10px; font-weight: var(--w-strong);
                 letter-spacing: var(--track-wide); text-transform: uppercase;
                 color: var(--text-faint); text-align: center; padding-bottom: var(--s-1); }
.cal-grid button {
  font-family: var(--font-num); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  aspect-ratio: 1; background: none; border: 0; border-radius: var(--r-inner);
  color: var(--text-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.cal-grid button:hover, .cal-grid button.is-hover { background: var(--surface-sunken); color: var(--text); }
.cal-grid button.out { color: var(--text-faint); }
.cal-grid button.today { box-shadow: inset 0 0 0 var(--stroke) var(--accent-tint-bd); color: var(--accent); }
.cal-grid button[aria-selected="true"], .cal-grid button.is-selected {
  background: var(--accent-solid); color: var(--text-onaccent); font-weight: var(--w-strong);
}
.cal-grid button.in-range { background: var(--accent-tint); color: var(--accent); border-radius: 0; }
.cal-grid button:disabled { opacity: 0.3; cursor: not-allowed; }

.palette {
  width: min(520px, 100%);
  background: var(--surface-raised);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-overlay);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.palette-search { display: flex; align-items: center; gap: var(--s-3);
                  padding: 0 var(--s-4); border-bottom: var(--stroke) solid var(--border); }
.palette-search .icon { color: var(--text-faint); }
.palette-input {
  font-family: var(--font-ui); font-size: var(--text-md); color: var(--text);
  border: 0; outline: none; background: none; flex: 1; min-height: 52px;
}
.palette-input::placeholder { color: var(--text-faint); }
.palette-list { padding: var(--s-2); max-height: 320px; overflow-y: auto; }
.palette-opt {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-2);
  width: 100%; text-align: left; display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-3); min-height: 40px;
  background: none; border: 0; border-radius: var(--r-inner); cursor: pointer;
}
.palette-opt .icon { color: var(--text-faint); }
.palette-opt[aria-selected="true"], .palette-opt.is-active {
  background: var(--accent-tint); color: var(--accent);
}
.palette-opt[aria-selected="true"] .icon, .palette-opt.is-active .icon { color: var(--accent); }
.palette-opt .kbd { margin-left: auto; }
.palette-foot { display: flex; align-items: center; gap: var(--s-4);
                padding: var(--s-2) var(--s-4); background: var(--surface);
                border-top: var(--stroke) solid var(--border);
                font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); }
.palette-foot span { display: inline-flex; align-items: center; gap: var(--s-1); }

.disclosure { border-bottom: var(--stroke) solid var(--border); }
.disclosure-trigger {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-medium);
  width: 100%; text-align: left; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-2); min-height: var(--tap-min);
  background: none; border: 0; cursor: pointer; color: var(--text);
  border-radius: var(--r-inner);
}
.disclosure-trigger:hover, .disclosure-trigger.is-hover { background: var(--surface-sunken); }
.disclosure-trigger .icon { margin-left: auto; color: var(--text-faint);
                            transition: transform var(--dur) var(--ease-soft); }
.disclosure-trigger[aria-expanded="true"] .icon, .disclosure-trigger.is-open .icon { transform: rotate(90deg); }
.disclosure-panel { padding: 0 var(--s-2) var(--s-5);
                    font-family: var(--font-body); font-size: var(--text-sm);
                    color: var(--text-muted); line-height: var(--lh-base); max-width: var(--measure); }

details.disclosure > summary {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-strong);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-2); min-height: var(--tap-min);
  cursor: pointer; color: var(--text); border-radius: var(--r-inner);
  list-style: none;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::marker { content: ""; }
details.disclosure > summary:hover { background: var(--surface-sunken); }
details.disclosure > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
details.disclosure > summary .icon {
  margin-left: auto; color: var(--text-faint);
  transition: transform var(--dur) var(--ease-soft);
}
details.disclosure[open] > summary .icon { transform: rotate(90deg); }

.code {
  margin: 0; padding: var(--s-4);
  background: var(--surface-sunken); color: var(--text);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-control);
  font-family: var(--font-mono); font-size: var(--text-xs);
  line-height: var(--lh-base);
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
  tab-size: 2;
}
.code-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-sunken);
  border: var(--stroke) solid var(--border); border-bottom: 0;
  border-radius: var(--r-control) var(--r-control) 0 0;
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
}
.code-head + .code { border-radius: 0 0 var(--r-control) var(--r-control); }
.code-head .btn { margin-left: auto; }

.drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-8) var(--s-5); text-align: center; cursor: pointer;
  background: var(--surface-sunken);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-card);
  color: var(--text-muted);
  transition: border-color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.drop .icon { width: 24px; height: 24px; color: var(--text-faint); stroke-width: 1.5; }
.drop strong { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-strong); color: var(--text); }
.drop small { font-family: var(--font-ui); font-size: var(--text-xs); }
.drop:hover, .drop.is-hover { border-color: var(--text-faint); }
.drop.is-over { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.drop.is-invalid { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

.file {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); background: var(--surface);
  border: var(--stroke) solid var(--border); border-radius: var(--r-control);
  font-family: var(--font-ui); font-size: var(--text-sm);
}
.file .file-main { flex: 1; min-width: 0; }
.file .file-main strong { display: block; font-weight: var(--w-medium); color: var(--text);
                          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .file-main small { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.file .progress { margin-top: var(--s-2); }

.slider { appearance: none; width: 100%; background: none; cursor: pointer; height: 24px; }
.slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--radius-full); background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.slider::-moz-range-track {
  height: 4px; border-radius: var(--radius-full); background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.slider::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; margin-top: -7px;
  border-radius: var(--radius-full); background: var(--accent-solid);
  border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--accent-solid); border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.1); }
.slider:disabled { opacity: 0.45; cursor: not-allowed; }
.slider-row { display: flex; align-items: center; gap: var(--s-4); }
.slider-row .value {
  font-family: var(--font-num); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  color: var(--text); min-width: 5ch; text-align: right;
}

@media (max-width: 640px) {
  .input, .textarea, .select, .combo-input, .tagin input, .datefield input, .searchfield input {
    font-size: 16px;
  }
}

@media (hover: none) {
  .btn, .chip, .tab, .seg button, .row, .menu button, .palette-opt, .fab, .tabbar a {
    -webkit-tap-highlight-color: transparent;
  }
  
  .btn:hover, .chip:hover, .card-link:hover { transform: none; }
}

.sheet-body, .drawer-body, .combo-pop, .palette-list, .rowlist-scroll {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.safe-b { padding-bottom: max(var(--s-3), env(safe-area-inset-bottom)); }
.safe-t { padding-top: max(var(--s-3), env(safe-area-inset-top)); }
.safe-x { padding-left: max(var(--s-4), env(safe-area-inset-left));
          padding-right: max(var(--s-4), env(safe-area-inset-right)); }

.sheet {
  width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--surface-raised);
  border-radius: var(--r-overlay) var(--r-overlay) 0 0;
  box-shadow: var(--shadow-lg);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-grab {
  flex: none; align-self: center;
  width: 36px; height: 4px; margin: var(--s-3) 0 var(--s-1);
  border-radius: var(--radius-full); background: var(--border-strong);
}
.sheet-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-5) var(--s-3);
  border-bottom: var(--stroke) solid var(--border);
}
.sheet-head h2 {
  flex: 1; margin: 0; color: var(--text);
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--w-heading);
}
.sheet-body { padding: var(--s-4) var(--s-5); overflow-y: auto; }
.sheet-foot {
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: var(--stroke) solid var(--border);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.sheet-foot .btn { width: 100%; min-height: var(--tap-comfy); }

.tabbar {
  display: flex; align-items: stretch;
  background: var(--surface);
  border-top: var(--stroke) solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--text-muted);
  font-family: var(--font-ui); font-size: 10px; font-weight: var(--w-medium);
  padding: var(--s-2) var(--s-1);
  transition: color var(--dur-fast) var(--ease-soft);
}
.tabbar a .icon { width: 22px; height: 22px; stroke-width: 1.75; }
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: var(--w-strong); }
.tabbar a[aria-current="page"] .icon { stroke-width: 2.25; }

.tabbar .count {
  position: absolute; transform: translate(14px, -12px);
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--danger); color: var(--danger-on);
  font-size: 10px; font-weight: var(--w-strong); font-variant-numeric: tabular-nums;
  display: grid; place-content: center;
}
.tabbar a { position: relative; }

.navbar {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-2) var(--s-2);
  background: var(--surface);
  border-bottom: var(--stroke) solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.navbar .title {
  flex: 1; text-align: center; color: var(--text);
  font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--w-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbar .lead, .navbar .trail { min-width: 64px; display: flex; align-items: center; }
.navbar .trail { justify-content: flex-end; }

.navbar-large {
  padding: var(--s-1) var(--s-5) var(--s-4);
  background: var(--surface); border-bottom: var(--stroke) solid var(--border);
}
.navbar-large h1 {
  margin: 0; color: var(--text);
  font-family: var(--font-heading); font-optical-sizing: auto;
  font-size: var(--text-2xl); font-weight: var(--w-heading);
  line-height: var(--lh-tight); letter-spacing: var(--track-display);
}
.navbar-large p { margin: var(--s-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); }

.rowlist {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.rowlist-label {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-strong);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--text-faint); padding: var(--s-5) var(--s-4) var(--s-2);
}
.rowlist-note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
                padding: var(--s-2) var(--s-4) 0; line-height: var(--lh-base); }
.row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-comfy); padding: var(--s-2) var(--s-4);
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text);
  text-decoration: none; background: none; border: 0; width: 100%; text-align: left;
  transition: background var(--dur-fast) var(--ease-soft);
}

.row + .row { box-shadow: inset var(--s-4) var(--stroke) 0 calc(var(--stroke) * -1) var(--border); }
.row:active, .row.is-active { background: var(--surface-sunken); }
.row .row-main { flex: 1; min-width: 0; }
.row .row-main small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 1px; }
.row .row-value { color: var(--text-muted); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.row > .icon:first-child { color: var(--accent); }
.row .chev { color: var(--text-faint); flex: none; }
.row.danger { color: var(--danger); }

.swipe { position: relative; overflow: hidden; border-radius: var(--r-inner); }
.swipe-actions { position: absolute; inset: 0 0 0 auto; display: flex; }
.swipe-actions button {
  border: 0; cursor: pointer; padding: 0 var(--s-4); min-width: 76px;
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  background: var(--surface-sunken); color: var(--text-2);
}
.swipe-actions button.danger { background: var(--danger); color: var(--danger-on); }
.swipe-actions button.accent { background: var(--accent-solid); color: var(--text-onaccent); }
.swipe-face {
  position: relative; background: var(--surface);
  transition: transform var(--dur) var(--ease-out);
}
.swipe.is-open .swipe-face { transform: translateX(-152px); }

.fab {
  position: absolute; right: var(--s-5);
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border: 0; cursor: pointer;
  border-radius: var(--r-pill);
  background: var(--accent-solid); color: var(--text-onaccent);
  display: grid; place-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.fab .icon { width: 24px; height: 24px; }
.fab:active { transform: scale(0.94); }
.fab-label { width: auto; padding: 0 var(--s-5); gap: var(--s-2);
             display: inline-flex; align-items: center;
             font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-strong); }

.qty {
  display: inline-flex; align-items: center;
  background: var(--surface-sunken); border-radius: var(--r-control);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.qty button {
  width: var(--tap-min); min-height: var(--tap-min);
  border: 0; background: none; cursor: pointer; color: var(--text-2);
  display: grid; place-content: center; border-radius: var(--r-control);
}
.qty button:active { background: var(--border); }
.qty button:disabled { color: var(--text-faint); cursor: not-allowed; }
.qty output {
  min-width: 3ch; text-align: center;
  font-family: var(--font-num); font-size: var(--text-md); font-weight: var(--w-strong);
  font-variant-numeric: tabular-nums; color: var(--text);
}

.dots { display: flex; gap: var(--s-2); align-items: center; justify-content: center; }
.dots button {
  width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-full); background: var(--border-strong);
  transition: background var(--dur) var(--ease-soft), width var(--dur) var(--ease-out);
}
.dots button[aria-current="true"] { background: var(--accent); width: 22px; }

.dots button::after { content: ""; position: absolute; width: 44px; height: 44px;
                      transform: translate(-18px, -18px); }
.dots button { position: relative; }

.pull { display: flex; align-items: center; justify-content: center; gap: var(--s-2);
        padding: var(--s-3); color: var(--text-muted);
        font-family: var(--font-ui); font-size: var(--text-xs); }
.pull .spinner { width: 16px; height: 16px; }

.actionbar {
  position: sticky; bottom: 0;
  padding: var(--s-3) var(--s-4);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: var(--stroke) solid var(--border);
  display: flex; gap: var(--s-2);
}
.actionbar .btn { flex: 1; min-height: var(--tap-comfy); }

@supports not (backdrop-filter: blur(1px)) { .actionbar { background: var(--surface); } }

.searchfield { display: flex; align-items: center; gap: var(--s-2); }
.searchfield .box {
  flex: 1; display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-3); min-height: var(--tap-min);
  background: var(--surface-sunken); border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 var(--stroke) var(--border);
}
.searchfield .box .icon { color: var(--text-faint); flex: none; }
.searchfield input {
  flex: 1; border: 0; outline: none; background: none; min-width: 0;
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text);
}
.searchfield .box:focus-within { box-shadow: inset 0 0 0 var(--stroke) var(--accent), var(--focus-ring); }
.searchfield .cancel { flex: none; }

.seg-full { display: flex; width: 100%; }
.seg-full button { flex: 1; min-height: var(--tap-min); }