/* The Crucible App's one stylesheet: brand fonts, tokens, then components. Every page links it (served from
   /static/app.css and cached by sw.js so the clock works offline).

   The brand is Crucible's own, from Hardy Brands' brand book (Drive: Krystal McGee/Marketing/Branding/New Branding/
   Crucible (Hardy Brands); reports/2026-10-24-app-redesign.md):
   - colour: Charcoal #10191a is the primary; Leather #964c1b and Denim #283752 are accents; Stone #e5e1da (tint) and
     Sand #f4f0ea are the light neutrals; Brown #5e3b15 and Dark Wash #152139 are secondary. Body text is only Charcoal
     or Stone. No Leather text on Denim, or Denim on Leather.
   - type: Apotek Wide (headings, all caps, tracked) and Sweet Sans Pro (text) are licensed for desktop only, so the web
     uses the brand book's own substitutes, Quantico (all caps only) and Albert Sans, both SIL Open Font License.
   The scales below are built in OKLCH around those colours; every text pair meets WCAG AA (4.5:1, and 3:1 for marks and
   controls) in both themes, so check contrast again after changing a colour. Components use role tokens (--text, --surface, --accent...), never raw steps, so both
   themes and the always-dark chrome (.dark-zone) follow. */

@font-face { font-family: "Albert Sans"; src: url("/static/albert-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Quantico"; src: url("/static/quantico-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* light neutrals: Sand and Stone at the light end, Charcoal for text */
  --n-1: oklch(0.957 0.009 78);    /* Sand */
  --n-2: oklch(0.935 0.010 80);
  --n-3: oklch(0.911 0.010 82);    /* Stone tint */
  --n-4: oklch(0.885 0.013 82);
  --n-5: oklch(0.860 0.016 83);
  --n-6: oklch(0.823 0.022 83);    /* Stone */
  --n-7: oklch(0.760 0.020 83);
  --n-8: oklch(0.660 0.015 90);
  --n-9: oklch(0.560 0.012 180);
  --n-10: oklch(0.470 0.012 200);
  --n-11: oklch(0.400 0.013 205);
  --n-12: oklch(0.205 0.013 205);  /* Charcoal */
  --page: var(--n-1);
  --card: oklch(0.988 0.004 80);
  --card-raised: oklch(0.995 0.003 80);
  /* Leather: the one action colour; Brown is its pressed and hover shade */
  --a-3: oklch(0.925 0.030 55);
  --a-7: oklch(0.720 0.090 50);
  --a-9: oklch(0.500 0.116 50);    /* Leather */
  --a-10: oklch(0.386 0.072 65);   /* Brown */
  --a-11: oklch(0.480 0.116 50);
  --a-ui: oklch(0.500 0.116 50);
  --on-accent: oklch(0.957 0.009 78);
  /* Denim: focus and information */
  --d-3: oklch(0.925 0.018 262);
  --d-8: oklch(0.337 0.052 262);   /* Denim */
  --d-11: oklch(0.337 0.052 262);
  /* status: only where it carries meaning, always with words */
  --success-3: oklch(0.940 0.030 150); --success-9: oklch(0.500 0.110 150); --success-11: oklch(0.420 0.090 150);
  --warning-3: oklch(0.940 0.045 85);  --warning-9: oklch(0.780 0.140 80);  --warning-11: oklch(0.450 0.090 70);
  --danger-3: oklch(0.940 0.025 20);   --danger-7: oklch(0.780 0.080 20);   --danger-9: oklch(0.520 0.180 22); --danger-11: oklch(0.470 0.170 22);
  --shadow-color: 205 20% 10%;
  --shadow-strength: 0.10;
}

/* dark: the brand's own layering, Charcoal page, Dark Wash cards, Denim fills, Stone text */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --n-1: oklch(0.205 0.013 205);   /* Charcoal */
    --n-2: oklch(0.235 0.014 205);
    --n-3: oklch(0.300 0.048 262);
    --n-4: oklch(0.337 0.052 262);   /* Denim */
    --n-5: oklch(0.370 0.050 262);
    --n-6: oklch(0.340 0.040 262);
    --n-7: oklch(0.400 0.040 262);
    --n-8: oklch(0.480 0.035 262);
    --n-9: oklch(0.600 0.020 80);
    --n-10: oklch(0.720 0.015 82);
    --n-11: oklch(0.823 0.022 83);   /* Stone */
    --n-12: oklch(0.911 0.010 82);   /* Stone tint */
    --page: var(--n-1);
    --card: oklch(0.250 0.049 263);  /* Dark Wash */
    --card-raised: oklch(0.285 0.050 263);
    --a-3: oklch(0.300 0.055 55);
    --a-7: oklch(0.480 0.100 50);
    --a-9: oklch(0.500 0.116 50);
    --a-10: oklch(0.430 0.100 55);
    --a-11: oklch(0.760 0.105 55);
  --a-ui: oklch(0.680 0.120 52);
    --a-ui: oklch(0.680 0.120 52);
    --d-3: oklch(0.310 0.050 262);
    --d-8: oklch(0.660 0.080 262);
    --d-11: oklch(0.820 0.055 262);
    --success-3: oklch(0.270 0.040 150); --success-9: oklch(0.500 0.110 150); --success-11: oklch(0.780 0.100 150);
    --warning-3: oklch(0.290 0.045 80);  --warning-9: oklch(0.780 0.140 80);  --warning-11: oklch(0.840 0.110 85);
    --danger-3: oklch(0.280 0.050 20);   --danger-7: oklch(0.450 0.110 20);   --danger-9: oklch(0.520 0.180 22); --danger-11: oklch(0.760 0.120 20);
    --shadow-color: 205 40% 3%;
    --shadow-strength: 0.45;
  }
}

/* the same dark values, for data-theme="dark" and for always-dark chrome (.dark-zone: the bars, the tablet sign-in) */
:root[data-theme="dark"], .dark-zone {
  color-scheme: dark;
  --n-1: oklch(0.205 0.013 205);
  --n-2: oklch(0.235 0.014 205);
  --n-3: oklch(0.300 0.048 262);
  --n-4: oklch(0.337 0.052 262);
  --n-5: oklch(0.370 0.050 262);
  --n-6: oklch(0.340 0.040 262);
  --n-7: oklch(0.400 0.040 262);
  --n-8: oklch(0.480 0.035 262);
  --n-9: oklch(0.600 0.020 80);
  --n-10: oklch(0.720 0.015 82);
  --n-11: oklch(0.823 0.022 83);
  --n-12: oklch(0.911 0.010 82);
  --page: var(--n-1);
  --card: oklch(0.250 0.049 263);
  --card-raised: oklch(0.285 0.050 263);
  --a-3: oklch(0.300 0.055 55);
  --a-7: oklch(0.480 0.100 50);
  --a-9: oklch(0.500 0.116 50);
  --a-10: oklch(0.430 0.100 55);
  --a-11: oklch(0.760 0.105 55);
  --a-ui: oklch(0.680 0.120 52);
  --d-3: oklch(0.310 0.050 262);
  --d-8: oklch(0.660 0.080 262);
  --d-11: oklch(0.820 0.055 262);
  --success-3: oklch(0.270 0.040 150); --success-9: oklch(0.500 0.110 150); --success-11: oklch(0.780 0.100 150);
  --warning-3: oklch(0.290 0.045 80);  --warning-9: oklch(0.780 0.140 80);  --warning-11: oklch(0.840 0.110 85);
  --danger-3: oklch(0.280 0.050 20);   --danger-7: oklch(0.450 0.110 20);   --danger-9: oklch(0.520 0.180 22); --danger-11: oklch(0.760 0.120 20);
  --shadow-color: 205 40% 3%;
  --shadow-strength: 0.45;
}

/* roles: declared on .dark-zone too, so they resolve against its dark values */
:root, .dark-zone {
  --bg: var(--page);
  --bg-subtle: var(--n-2);
  --surface: var(--card);
  --surface-raised: var(--card-raised);
  --fill: var(--n-3);
  --fill-hover: var(--n-4);
  --fill-active: var(--n-5);
  --border-subtle: var(--n-6);
  --border: var(--n-7);
  --border-strong: var(--n-8);
  --border-input: var(--n-9);
  --text: var(--n-12);
  --text-muted: var(--n-11);
  --text-faint: var(--n-10);
  --accent: var(--a-9);
  --accent-hover: var(--a-10);
  --accent-text: var(--a-11);
  --accent-subtle: var(--a-3);
  --accent-ui: var(--a-ui);        /* Leather as a state mark (selected tab, switch on, checkbox): 3:1 in both themes */
  --info-subtle: var(--d-3);
  --info-text: var(--d-11);
  --focus-ring: var(--d-8);
}

:root {
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 3rem;     --space-8: 4rem;
  --space-9: 6rem;     --space-10: 8rem;

  --font-sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Quantico", "Albert Sans", system-ui, sans-serif;   /* all caps only (the brand's rule for it) */
  --track-display: 0.07em;   /* the brand tracks its headings wide (+100 to +125) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.2rem, 1.183rem + 0.07407vw, 1.25rem);
  --text-xl: clamp(1.44rem, 1.399rem + 0.1815vw, 1.562rem);
  --text-2xl: clamp(1.728rem, 1.653rem + 0.3335vw, 1.953rem);
  --text-3xl: clamp(2.074rem, 1.951rem + 0.5449vw, 2.441rem);
  --leading-tight: 1.2;
  --leading-body: 1.5;
  --measure: 65ch;

  /* shape: the brand is precise and grid-based, so corners are tight */
  --radius-sm: 2px;  --radius-md: 4px;  --radius-lg: 6px;  --radius-xl: 8px;  --radius-full: 999px;

  --shadow-1: 0 1px 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.6)),
              0 1px 3px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.6));
  --shadow-2: 0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.5)),
              0 4px 8px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.6)),
              0 8px 16px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.4));
  --shadow-3: 0 2px 4px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.4)),
              0 8px 16px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.5)),
              0 24px 48px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.6));

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --target-min: 44px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); font-size: 100%; line-height: var(--leading-body); color: var(--text);
       background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
body.dark-zone { background: var(--bg); color: var(--text); }
html:has(body.dark-zone) { background: oklch(0.205 0.013 205); }
h1, h2, h3 { line-height: var(--leading-tight); text-wrap: balance; margin: 0; }
/* headings in the brand's display face: Quantico, all caps, tracked wide (the brand's rule for it) */
h1, h2, .display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-display); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-lg); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-text); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.num, table { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.small { font-size: var(--text-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
svg.i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; fill: none; stroke: currentColor;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell: top bar on wide screens, tab bar on phones ---------- */
/* the bars are always Charcoal (.dark-zone), as the brand's own materials are */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); color: var(--text); border-bottom: 1px solid var(--border-subtle);
          padding-top: env(safe-area-inset-top); }
.topbar-in { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; gap: var(--space-4);
             padding: 0 var(--space-4); min-height: 3.5rem; }
.brand { display: flex; align-items: center; padding: var(--space-2) 0; min-height: 2.75rem; }
.brand img { height: 1.6rem; width: auto; display: block; }
.nav { display: none; gap: var(--space-1); }
.nav a { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-3);
         border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; font-weight: 600; }
.nav a:hover { background: var(--fill); color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent-ui); border-radius: 0; }
.who { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.who-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; background: var(--bg);
          border-top: 1px solid var(--border-subtle); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
            min-height: 3.5rem; color: var(--text-muted); text-decoration: none; font-size: var(--text-xs); font-weight: 600; }
.tabbar a svg { width: 1.5rem; height: 1.5rem; }
.tabbar a[aria-current="page"] { color: var(--accent-text); box-shadow: inset 0 3px 0 var(--accent-ui); }
.tabbar a .badge { position: absolute; }
body.has-tabbar { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 840px) {
  .nav { display: flex; }
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
}

/* ---------- page layout ---------- */
.page { max-width: 36rem; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
.page.wide { max-width: 80rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3);
             margin-bottom: var(--space-5); }
.page-head p { margin-top: var(--space-1); color: var(--text-muted); max-inline-size: 60ch; }
.stack > * + * { margin-top: var(--space-4); }
.section + .section { margin-top: var(--space-6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.panel { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.panel.tight { padding: var(--space-4); }
.row-split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.grid-2 { display: grid; gap: var(--space-5); }
@media (min-width: 1000px) { .grid-2 { grid-template-columns: minmax(20rem, 26rem) 1fr; align-items: start; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3rem;
       padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font-weight: 700;
       text-decoration: none; cursor: pointer; text-align: center; line-height: 1.25; background: var(--surface); color: var(--text);
       border-color: var(--border-input); transition: background-color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--fill); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* the one action colour is Leather; primary, go and accent are the same button (the brand: Leather as the accent) */
.btn.primary, .btn.go, .btn.accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover, .btn.go:hover, .btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: var(--surface); color: var(--danger-11); border-color: var(--danger-7); }
.btn.danger:hover { background: var(--danger-3); }
.btn.danger.solid { background: var(--danger-9); color: var(--on-accent); border-color: var(--danger-9); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--accent-text); padding: 0 var(--space-3); }
.btn.quiet:hover { background: var(--fill); }
.btn.lg { min-height: 4rem; font-size: var(--text-lg); padding: 0 var(--space-6); }
.btn.sm { min-height: 2.5rem; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn.block { width: 100%; }
@media (pointer: coarse) { .btn.sm { min-height: 2.75rem; } }
.spin { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
        animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
.field + .field { margin-top: var(--space-4); }
.field > label, .label { display: block; font-weight: 650; margin-bottom: var(--space-2); }
.hint { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.error { color: var(--danger-11); font-size: var(--text-sm); margin-top: var(--space-1); font-weight: 600; }
.input, select.input, textarea.input { width: 100%; min-height: 3rem; padding: 0 var(--space-3); border: 1px solid var(--border-input);
         border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 1rem; }
textarea.input { padding: var(--space-3); min-height: 6rem; resize: vertical; line-height: var(--leading-body); }
.input:hover { border-color: var(--text-muted); }
.input[aria-invalid="true"] { border-color: var(--danger-9); }
select.input { appearance: auto; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 2.75rem; padding: var(--space-2) 0; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--accent-ui); flex: none; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3rem; cursor: pointer; }
.switch input { appearance: none; width: 3.25rem; height: 2rem; border-radius: var(--radius-full); background: var(--n-8);
                position: relative; flex: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.switch input::after { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.5rem; height: 1.5rem;
                       border-radius: 50%; background: white; transition: transform var(--dur-fast) var(--ease-out); }
.switch input:checked { background: var(--accent-ui); }
.switch input:checked::after { transform: translateX(1.25rem); }

/* ---------- chips (quick picks), badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { min-height: 3rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-input);
        background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font-weight: 600; line-height: 1.25; }
.chip small { display: block; font-weight: 400; color: var(--text-muted); }
.chip:hover { background: var(--fill); }
.chip[aria-pressed="true"] { border-color: var(--accent-ui); background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-ui); }
.badge, .count { font-family: var(--font-sans); text-transform: none; letter-spacing: normal; }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2); border-radius: var(--radius-full);
         font-size: var(--text-xs); font-weight: 650; background: var(--fill); color: var(--text-muted); white-space: nowrap; }
.badge.ok { background: var(--success-3); color: var(--success-11); }
.badge.warn { background: var(--warning-3); color: var(--warning-11); }
.badge.bad { background: var(--danger-3); color: var(--danger-11); }
.badge.info { background: var(--info-subtle); color: var(--info-text); }
.count { display: inline-flex; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; align-items: center; justify-content: center;
         border-radius: var(--radius-full); background: var(--danger-9); color: var(--on-accent); font-size: 0.75rem; font-weight: 700; }

/* ---------- banners, toasts, empty states ---------- */
.banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
          background: var(--fill); }
.banner.warn { background: var(--warning-3); color: var(--warning-11); }
.banner.bad { background: var(--danger-3); color: var(--danger-11); }
.banner.info { background: var(--info-subtle); color: var(--info-text); }
.banner.ok { background: var(--success-3); color: var(--success-11); }
.banner svg.i { margin-top: 0.15rem; }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 60;
          display: flex; flex-direction: column; gap: var(--space-2); width: min(32rem, calc(100% - 2rem)); pointer-events: none; }
@media (min-width: 840px) { .toasts { bottom: var(--space-6); } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
         border-radius: var(--radius-md); background: var(--n-12); color: var(--n-1); box-shadow: var(--shadow-2);
         animation: toast-in var(--dur-base) var(--ease-out); }
.toast .grow { flex: 1; }
.toast button { background: none; border: 0; color: inherit; font-weight: 700; text-decoration: underline; min-height: 2.75rem;
                padding: 0 var(--space-3); cursor: pointer; }
.toast.bad { background: var(--danger-9); color: white; }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem); } }
.empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted); }
.empty strong { display: block; color: var(--text); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.loading { color: var(--text-muted); padding: var(--space-5) 0; }

/* ---------- lists and tables ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--border-subtle); }
.item { display: block; padding: var(--space-3) 0; }
a.item, button.item { width: 100%; text-align: left; background: none; border: 0; color: inherit; text-decoration: none; cursor: pointer;
                      padding: var(--space-3) var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-md); }
a.item:hover, button.item:hover { background: var(--fill); }
a.item[aria-current="true"], button.item[aria-current="true"] { background: var(--fill); box-shadow: inset 3px 0 0 var(--accent-ui); }
.item-title { font-weight: 650; overflow-wrap: anywhere; }
.item-meta { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.scroll-x { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.table thead th { position: sticky; top: 0; background: var(--surface); color: var(--text-muted); font-weight: 650; z-index: 1; }
.table td.n, .table th.n { text-align: right; }
.table tbody th { font-weight: 650; }
.table tr.group th { background: var(--bg-subtle); padding-top: var(--space-3); font-size: var(--text-sm); }
.table tfoot td, .table tfoot th { font-weight: 700; border-bottom: 0; }
.cell-btn { background: none; border: 0; padding: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
            border-radius: var(--radius-sm); color: inherit; cursor: pointer; text-decoration: underline dotted var(--text-faint);
            text-underline-offset: 4px; min-height: 2rem; }
.cell-btn:hover { background: var(--fill); }
@media (pointer: coarse) { .cell-btn { min-height: 2.75rem; } }

/* ---------- dialogs ---------- */
dialog.dlg { border: 0; padding: 0; border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text);
             box-shadow: var(--shadow-3); width: min(32rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); }
dialog.dlg::backdrop { background: oklch(0.205 0.013 205 / 0.6); }
.dlg form { padding: var(--space-5); }
.dlg h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.dlg .body { color: var(--text-muted); margin-bottom: var(--space-4); }
.dlg .actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
@media (max-width: 599px) { .dlg .actions .btn { flex: 1 1 100%; } }

/* ---------- details / disclosure ---------- */
details.more > summary { cursor: pointer; font-weight: 650; min-height: 2.75rem; display: flex; align-items: center; gap: var(--space-2);
                         list-style: none; color: var(--accent-text); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                                 transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-out); margin: 0 var(--space-1); }
details.more[open] > summary::before { transform: rotate(45deg); }

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