/* Expo theme — Material 3, BarLogic "Backbar Brass" standards.
 *
 * Shared design layer for new screens. Ported from BarLogic's globals.css and
 * its MD3 polish (barlogic cfc5445, 65f1df9): brass primary on warm gunmetal,
 * steel as the supporting metal, flat borderless surfaces, raised input fills,
 * 12px controls / 16px cards, 150ms standard easing, ::before state layers.
 *
 * Strictly additive: only --md-* tokens and .m3-* classes, no bare element
 * selectors, so screens still on styles.css are untouched. How to use it:
 * docs/theme.md. Live specimen (dev only): /docs/theme-specimen.html
 *
 * Scheme: dark by default, like BarLogic. data-theme="light" | "dark" | "auto"
 * on <html> or any container switches the subtree; add .m3 to that element so
 * its text color and font pick the new values up.
 */

/* ── Color: dark (default) ─────────────────────────────────────── */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Brass — the bar-rail metal. CTAs, brand, focus, selection. */
  --md-sys-color-primary: hsl(40 46% 49%);
  --md-sys-color-on-primary: hsl(0 0% 5%);
  --md-sys-color-primary-container: hsl(40 35% 22%);
  --md-sys-color-on-primary-container: hsl(40 55% 82%);

  /* Warm neutral — tonal buttons, selected chips. */
  --md-sys-color-secondary: hsl(40 12% 72%);
  --md-sys-color-on-secondary: hsl(40 10% 12%);
  --md-sys-color-secondary-container: hsl(40 10% 20%);
  --md-sys-color-on-secondary-container: hsl(40 20% 88%);

  /* Steel — done/finalized, informational, category identity. */
  --md-sys-color-tertiary: #8fb2d3;
  --md-sys-color-on-tertiary: #0e141b;
  --md-sys-color-tertiary-container: #2c455d;
  --md-sys-color-on-tertiary-container: #cfe1f0;

  --md-sys-color-error: hsl(0 72% 60%);
  --md-sys-color-on-error: hsl(0 0% 98%);
  --md-sys-color-error-container: hsl(0 45% 22%);
  --md-sys-color-on-error-container: hsl(0 80% 88%);

  /* Extensions (not in M3 baseline): status hues BarLogic uses. */
  --md-sys-color-success: var(--md-sys-color-tertiary);  /* steel = done */
  --md-sys-color-warning: hsl(43 90% 60%);

  /* Surfaces — warm gunmetal. Each step is a lighter tone. */
  --md-sys-color-surface: hsl(60 6% 7%);                  /* #131311 */
  --md-sys-color-surface-container-lowest: hsl(60 6% 5%);
  --md-sys-color-surface-container-low: hsl(55 5% 10%);
  --md-sys-color-surface-container: hsl(50 5% 12%);
  --md-sys-color-surface-container-high: hsl(50 5% 15%);
  --md-sys-color-surface-container-highest: hsl(50 5% 19%);
  --md-sys-color-on-surface: hsl(40 20% 92%);
  --md-sys-color-on-surface-variant: hsl(45 6% 60%);      /* #98948a */
  --md-sys-color-outline: hsl(45 5% 42%);
  --md-sys-color-outline-variant: hsl(0 0% 100% / 0.14);
  --md-sys-color-inverse-surface: hsl(40 20% 92%);
  --md-sys-color-inverse-on-surface: hsl(60 6% 10%);
  --md-sys-color-inverse-primary: hsl(40 52% 35%);
  --md-sys-color-scrim: hsl(0 0% 0% / 0.5);

  /* Extensions: card fill and the raised input fill. Fields sit LIGHTER than
     the card they're on, so they read as raised slots, not holes. */
  --md-sys-color-card: hsl(50 5% 12%);
  --md-sys-color-field: hsl(50 5% 22%);
  --md-sys-color-field-focus: hsl(50 5% 28%);
}

/* ── Color: light — brass on cream ─────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --md-sys-color-primary: hsl(40 52% 35%);
  --md-sys-color-on-primary: hsl(0 0% 100%);
  --md-sys-color-primary-container: hsl(40 62% 88%);
  --md-sys-color-on-primary-container: hsl(40 60% 18%);

  --md-sys-color-secondary: hsl(40 8% 38%);
  --md-sys-color-on-secondary: hsl(0 0% 100%);
  --md-sys-color-secondary-container: hsl(40 22% 89%);
  --md-sys-color-on-secondary-container: hsl(40 20% 18%);

  --md-sys-color-tertiary: #3e6185;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #d6e6f4;
  --md-sys-color-on-tertiary-container: #1b3248;

  --md-sys-color-error: hsl(0 70% 45%);
  --md-sys-color-on-error: hsl(0 0% 100%);
  --md-sys-color-error-container: hsl(0 80% 93%);
  --md-sys-color-on-error-container: hsl(0 70% 25%);

  --md-sys-color-success: var(--md-sys-color-tertiary);
  --md-sys-color-warning: hsl(26 90% 37%);

  --md-sys-color-surface: hsl(40 25% 95%);
  --md-sys-color-surface-container-lowest: hsl(0 0% 100%);
  --md-sys-color-surface-container-low: hsl(40 22% 93%);
  --md-sys-color-surface-container: hsl(40 18% 91%);
  --md-sys-color-surface-container-high: hsl(40 15% 88%);
  --md-sys-color-surface-container-highest: hsl(40 13% 85%);
  --md-sys-color-on-surface: hsl(50 8% 10%);
  --md-sys-color-on-surface-variant: hsl(45 6% 36%);
  --md-sys-color-outline: hsl(45 6% 55%);
  --md-sys-color-outline-variant: hsl(0 0% 0% / 0.12);
  --md-sys-color-inverse-surface: hsl(60 6% 12%);
  --md-sys-color-inverse-on-surface: hsl(40 20% 92%);
  --md-sys-color-inverse-primary: hsl(40 46% 49%);
  --md-sys-color-scrim: hsl(0 0% 0% / 0.4);

  --md-sys-color-card: hsl(0 0% 100%);
  --md-sys-color-field: hsl(40 15% 92%);
  --md-sys-color-field-focus: hsl(40 15% 88%);
  --m3-segment-selected: hsl(0 0% 100%);
}

/* "auto" follows the device. Duplicates the light block on purpose: CSS
   can't apply one selector's declarations from inside another. */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --md-sys-color-primary: hsl(40 52% 35%);
    --md-sys-color-on-primary: hsl(0 0% 100%);
    --md-sys-color-primary-container: hsl(40 62% 88%);
    --md-sys-color-on-primary-container: hsl(40 60% 18%);
    --md-sys-color-secondary: hsl(40 8% 38%);
    --md-sys-color-on-secondary: hsl(0 0% 100%);
    --md-sys-color-secondary-container: hsl(40 22% 89%);
    --md-sys-color-on-secondary-container: hsl(40 20% 18%);
    --md-sys-color-tertiary: #3e6185;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #d6e6f4;
    --md-sys-color-on-tertiary-container: #1b3248;
    --md-sys-color-error: hsl(0 70% 45%);
    --md-sys-color-on-error: hsl(0 0% 100%);
    --md-sys-color-error-container: hsl(0 80% 93%);
    --md-sys-color-on-error-container: hsl(0 70% 25%);
    --md-sys-color-success: var(--md-sys-color-tertiary);
    --md-sys-color-warning: hsl(26 90% 37%);
    --md-sys-color-surface: hsl(40 25% 95%);
    --md-sys-color-surface-container-lowest: hsl(0 0% 100%);
    --md-sys-color-surface-container-low: hsl(40 22% 93%);
    --md-sys-color-surface-container: hsl(40 18% 91%);
    --md-sys-color-surface-container-high: hsl(40 15% 88%);
    --md-sys-color-surface-container-highest: hsl(40 13% 85%);
    --md-sys-color-on-surface: hsl(50 8% 10%);
    --md-sys-color-on-surface-variant: hsl(45 6% 36%);
    --md-sys-color-outline: hsl(45 6% 55%);
    --md-sys-color-outline-variant: hsl(0 0% 0% / 0.12);
    --md-sys-color-inverse-surface: hsl(60 6% 12%);
    --md-sys-color-inverse-on-surface: hsl(40 20% 92%);
    --md-sys-color-inverse-primary: hsl(40 46% 49%);
    --md-sys-color-scrim: hsl(0 0% 0% / 0.4);
    --md-sys-color-card: hsl(0 0% 100%);
    --md-sys-color-field: hsl(40 15% 92%);
    --md-sys-color-field-focus: hsl(40 15% 88%);
    --m3-segment-selected: hsl(0 0% 100%);
  }
}

/* ── Type, shape, elevation, motion, state, spacing ────────────── */
:root {
  /* Geist is BarLogic's face. It isn't loaded here (see docs/theme.md);
     until it is, the stack falls through to the system font. */
  --md-ref-typeface-plain: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-ref-typeface-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* M3 type scale. Headline/title weights are 600 to match BarLogic's
     font-semibold headings. Shorthand: weight size/line-height. */
  --md-sys-typescale-display-small: 600 36px/44px var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-large: 600 32px/40px var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-medium: 600 28px/36px var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-small: 600 24px/32px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large: 600 22px/28px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium: 600 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 600 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-ref-typeface-plain);

  /* Shape. BarLogic: controls 12px, cards 16px, chips/badges full. */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* Elevation. The look is flat — surfaces separate by tone — so shadows
     are for things that float: menus, dialogs, the FAB. */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px hsl(0 0% 0% / .30), 0 1px 3px 1px hsl(0 0% 0% / .15);
  --md-sys-elevation-level2: 0 1px 2px hsl(0 0% 0% / .30), 0 2px 6px 2px hsl(0 0% 0% / .15);
  --md-sys-elevation-level3: 0 4px 8px 3px hsl(0 0% 0% / .15), 0 1px 3px hsl(0 0% 0% / .30);
  --md-sys-elevation-level4: 0 6px 10px 4px hsl(0 0% 0% / .15), 0 2px 3px hsl(0 0% 0% / .30);
  --md-sys-elevation-level5: 0 8px 12px 6px hsl(0 0% 0% / .15), 0 4px 4px hsl(0 0% 0% / .30);

  /* Motion. 150ms standard easing for small state changes. */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;

  /* State-layer opacities. */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;

  /* Spacing — 4px grid. */
  --m3-space-1: 4px;  --m3-space-2: 8px;  --m3-space-3: 12px; --m3-space-4: 16px;
  --m3-space-5: 20px; --m3-space-6: 24px; --m3-space-8: 32px; --m3-space-10: 40px;

  /* Touch target. 40px controls grow to 44px on touch screens. */
  --m3-control-height: 40px;
}
@media (pointer: coarse) { :root { --m3-control-height: 44px; } }

/* ── Root opt-in ───────────────────────────────────────────────── */
/* Put .m3 on a new screen's root (and on any element carrying data-theme). */
.m3 {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface);
  accent-color: var(--md-sys-color-primary);
  -webkit-font-smoothing: antialiased;
}
.m3 *, .m3 *::before, .m3 *::after { box-sizing: border-box; }
/* A full-page screen: page background + safe areas. */
.m3-screen {
  min-height: 100dvh;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  padding-bottom: env(safe-area-inset-bottom);
}
.m3-content { max-width: 1152px; margin: 0 auto; padding: var(--m3-space-4); }
.m3-content--narrow { max-width: 720px; }

/* ── Typography classes ────────────────────────────────────────── */
.m3-display-small   { font: var(--md-sys-typescale-display-small); }
.m3-headline-large  { font: var(--md-sys-typescale-headline-large); }
.m3-headline-medium { font: var(--md-sys-typescale-headline-medium); }
.m3-headline-small  { font: var(--md-sys-typescale-headline-small); }
.m3-title-large     { font: var(--md-sys-typescale-title-large); }
.m3-title-medium    { font: var(--md-sys-typescale-title-medium); }
.m3-title-small     { font: var(--md-sys-typescale-title-small); }
.m3-body-large      { font: var(--md-sys-typescale-body-large); }
.m3-body-medium     { font: var(--md-sys-typescale-body-medium); }
.m3-body-small      { font: var(--md-sys-typescale-body-small); }
.m3-label-large     { font: var(--md-sys-typescale-label-large); }
.m3-label-medium    { font: var(--md-sys-typescale-label-medium); }
.m3-label-small     { font: var(--md-sys-typescale-label-small); }
:where(.m3-display-small, .m3-headline-large, .m3-headline-medium, .m3-headline-small,
       .m3-title-large, .m3-title-medium, .m3-title-small) { margin: 0; letter-spacing: -0.005em; text-wrap: balance; }
/* Small uppercase section label (BarLogic's card labels, nav group headers). */
.m3-overline {
  font: var(--md-sys-typescale-label-small); font-size: 10px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--md-sys-color-on-surface-variant);
}
.m3-muted    { color: var(--md-sys-color-on-surface-variant); }
.m3-tabular  { font-variant-numeric: tabular-nums; }
.m3-mono     { font-family: var(--md-ref-typeface-mono); }

/* ── Layout helpers ────────────────────────────────────────────── */
.m3-stack { display: flex; flex-direction: column; gap: var(--m3-space-3); }
.m3-row   { display: flex; align-items: center; gap: var(--m3-space-2); flex-wrap: wrap; }
.m3-grid  { display: grid; gap: var(--m3-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.m3-spacer { flex: 1; }
.m3-divider { height: 1px; border: 0; margin: 0; background: var(--md-sys-color-outline-variant); }

/* ── State layer ───────────────────────────────────────────────── */
/* Translucent overlay of the current text color via ::before: 8% hover
   (pointer devices only, so it doesn't stick on touch), 12% focus/press. */
.m3-btn, .m3-icon-btn, .m3-fab, .m3-chip, .m3-list-item--interactive,
.m3-card--interactive, .m3-nav-item, .m3-navbar-item, .m3-segmented > button {
  position: relative; isolation: isolate;
}
.m3-btn::before, .m3-icon-btn::before, .m3-fab::before, .m3-chip::before,
.m3-list-item--interactive::before, .m3-card--interactive::before,
.m3-nav-item::before, .m3-navbar-item .m3-navbar-indicator::before, .m3-segmented > button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
  .m3-btn:hover::before, .m3-icon-btn:hover::before, .m3-fab:hover::before, .m3-chip:hover::before,
  .m3-list-item--interactive:hover::before, .m3-card--interactive:hover::before,
  .m3-nav-item:hover::before, .m3-navbar-item:hover .m3-navbar-indicator::before,
  .m3-segmented > button:hover::before { opacity: var(--md-sys-state-hover-opacity); }
}
.m3-btn:focus-visible::before, .m3-icon-btn:focus-visible::before, .m3-fab:focus-visible::before,
.m3-chip:focus-visible::before, .m3-list-item--interactive:focus-visible::before,
.m3-card--interactive:focus-visible::before, .m3-nav-item:focus-visible::before,
.m3-segmented > button:focus-visible::before,
.m3-btn:active::before, .m3-icon-btn:active::before, .m3-fab:active::before, .m3-chip:active::before,
.m3-list-item--interactive:active::before, .m3-card--interactive:active::before,
.m3-nav-item:active::before, .m3-navbar-item:active .m3-navbar-indicator::before,
.m3-segmented > button:active::before { opacity: var(--md-sys-state-pressed-opacity); }

/* Focus ring: 2px brass (WCAG 2.4.13). */
.m3 :focus-visible, .m3-focus-ring:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 80%, transparent);
  outline-offset: 2px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
/* Default .m3-btn is filled brass. Modifiers: --tonal --outlined --text
   --danger --steel; sizes --sm --lg; --block for full width. */
.m3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--m3-space-2);
  min-height: var(--m3-control-height); padding: 0 var(--m3-space-4);
  border: 0; border-radius: var(--md-sys-shape-corner-medium);
  font: var(--md-sys-typescale-label-large); white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.m3-btn:active { transform: scale(0.98); }
.m3-btn:disabled, .m3-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.m3-btn svg { width: 18px; height: 18px; flex: none; }
.m3-btn--tonal    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.m3-btn--outlined { background: transparent; color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }
.m3-btn--text     { background: transparent; color: var(--md-sys-color-primary); padding: 0 var(--m3-space-3); }
.m3-btn--danger   { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.m3-btn--steel    { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.m3-btn--sm    { min-height: 32px; padding: 0 var(--m3-space-3); border-radius: 10px; font: var(--md-sys-typescale-label-medium); }
.m3-btn--lg    { min-height: 48px; padding: 0 var(--m3-space-6); font: var(--md-sys-typescale-title-small); }
.m3-btn--block { display: flex; width: 100%; }

.m3-icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--m3-control-height); height: var(--m3-control-height);
  border: 0; border-radius: var(--md-sys-shape-corner-full); padding: 0;
  background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer;
}
.m3-icon-btn svg { width: 22px; height: 22px; display: block; }
.m3-icon-btn--filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.m3-icon-btn--tonal  { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

.m3-fab {
  position: fixed; right: var(--m3-space-4); bottom: calc(var(--m3-space-4) + env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--m3-space-3);
  min-width: 56px; height: 56px; padding: 0 var(--m3-space-4);
  border: 0; border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-label-large); box-shadow: var(--md-sys-elevation-level3); cursor: pointer;
}
.m3-fab svg { width: 24px; height: 24px; }

/* ── Cards ─────────────────────────────────────────────────────── */
/* Flat: no border, a lighter surface than the page. */
.m3-card {
  display: flex; flex-direction: column; gap: var(--m3-space-3);
  background: var(--md-sys-color-card); color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-large); padding: var(--m3-space-4);
}
.m3-card--outlined { background: transparent; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.m3-card--accent   { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent); }
.m3-card--interactive { cursor: pointer; text-align: left; border: 0; font: inherit; width: 100%; }
.m3-card-header  { display: flex; align-items: flex-start; gap: var(--m3-space-3); }
.m3-card-title   { font: var(--md-sys-typescale-title-medium); margin: 0; }
.m3-card-subtitle { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin: 0; }
.m3-card-actions { display: flex; justify-content: flex-end; gap: var(--m3-space-2); flex-wrap: wrap; }

/* Stat tile: label / big number / sub-line, optional progress bar. */
.m3-stat-label { font: var(--md-sys-typescale-label-small); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--md-sys-color-on-surface-variant); }
.m3-stat-value { font: var(--md-sys-typescale-headline-small); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.m3-stat-sub   { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }

/* Linear progress. Set the fill with style="--value: 72%". */
.m3-progress {
  height: 6px; border-radius: var(--md-sys-shape-corner-full); overflow: hidden;
  background: var(--md-sys-color-outline-variant);
}
.m3-progress::after {
  content: ""; display: block; height: 100%; width: var(--value, 0%);
  background: var(--md-sys-color-primary); border-radius: inherit;
  transition: width var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.m3-progress--steel::after { background: var(--md-sys-color-tertiary); }

/* ── Inputs ────────────────────────────────────────────────────── */
/* Flat raised fill, no resting border; brighter fill + brass ring on focus.
   16px font on phones prevents iOS zoom-on-focus. */
.m3-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m3-field-label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface); }
.m3-field-help  { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.m3-field-error { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-error); }

.m3-input, .m3-select, .m3-textarea {
  display: block; width: 100%; min-width: 0; margin: 0;
  min-height: var(--m3-control-height); padding: 8px 12px;
  border: 0; border-radius: var(--md-sys-shape-corner-medium); outline: none;
  background: var(--md-sys-color-field); color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
@media (min-width: 768px) and (pointer: fine) {
  .m3-input, .m3-select, .m3-textarea { font: var(--md-sys-typescale-body-medium); }
}
.m3-input::placeholder, .m3-textarea::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
@media (hover: hover) {
  .m3-input:hover, .m3-select:hover, .m3-textarea:hover { background: var(--md-sys-color-field-focus); }
}
.m3-input:focus-visible, .m3-select:focus-visible, .m3-textarea:focus-visible {
  background: var(--md-sys-color-field-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 80%, transparent);
  outline: none;
}
/* Error: ring tint only, never a red fill. */
.m3-input[aria-invalid="true"], .m3-select[aria-invalid="true"], .m3-textarea[aria-invalid="true"] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-error) 60%, transparent);
}
.m3-input:disabled, .m3-select:disabled, .m3-textarea:disabled { opacity: .5; cursor: not-allowed; }
.m3-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
/* iOS date inputs size themselves wider than the cell; this makes them obey it. */
.m3-input[type="date"], .m3-input[type="time"] { -webkit-appearance: none; appearance: none; }
.m3-input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* Chevron drawn with gradients so it follows the theme color. */
.m3-select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--md-sys-color-on-surface-variant) 50%),
    linear-gradient(135deg, var(--md-sys-color-on-surface-variant) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Checkbox / radio / switch rows. Native controls, brass via accent-color. */
.m3-check { display: flex; align-items: center; gap: var(--m3-space-3); min-height: var(--m3-control-height); cursor: pointer; font: var(--md-sys-typescale-body-large); }
.m3-check input:not(.m3-switch) { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--md-sys-color-primary); }
.m3-switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 52px; height: 32px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: inset 0 0 0 2px var(--md-sys-color-outline);
  position: relative; transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.m3-switch::after {
  content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--md-sys-color-outline);
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.m3-switch:checked { background: var(--md-sys-color-primary); box-shadow: none; }
.m3-switch:checked::after { left: 24px; top: 4px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); }

/* ── Chips and badges ──────────────────────────────────────────── */
/* .m3-chip: interactive (filter/assist). Selected = aria-pressed="true"
   or .is-selected. .m3-badge: non-interactive status pill. */
.m3-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 32px; padding: 0 var(--m3-space-3);
  border: 0; border-radius: var(--md-sys-shape-corner-small);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  font: var(--md-sys-typescale-label-large); white-space: nowrap; cursor: pointer;
}
.m3-chip svg { width: 18px; height: 18px; }
.m3-chip[aria-pressed="true"], .m3-chip.is-selected {
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); box-shadow: none;
}
.m3-chip-set { display: flex; gap: var(--m3-space-2); flex-wrap: wrap; }
.m3-chip-set--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.m3-chip-set--scroll::-webkit-scrollbar { display: none; }

.m3-badge {
  --c: var(--md-sys-color-on-surface-variant);
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; flex: none;
  padding: 2px 9px; border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-small); white-space: nowrap;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
}
.m3-badge--primary { --c: var(--md-sys-color-primary); }
.m3-badge--steel, .m3-badge--success { --c: var(--md-sys-color-success); }
.m3-badge--warning { --c: var(--md-sys-color-warning); }
.m3-badge--error   { --c: var(--md-sys-color-error); }
.m3-badge--solid   { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); box-shadow: none; font-weight: 600; }
/* Count bubble for icons and nav items. */
.m3-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font: var(--md-sys-typescale-label-small); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ── Lists ─────────────────────────────────────────────────────── */
.m3-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.m3-list--divided > * + * { box-shadow: inset 0 1px 0 var(--md-sys-color-outline-variant); }
.m3-list-item {
  display: flex; align-items: center; gap: var(--m3-space-4);
  min-height: 56px; padding: var(--m3-space-2) var(--m3-space-4);
  color: inherit; text-decoration: none; text-align: left;
  border: 0; background: transparent; font: inherit; width: 100%;
}
.m3-list-item--interactive { cursor: pointer; }
.m3-list-item-leading  { flex: none; display: grid; place-items: center; color: var(--md-sys-color-on-surface-variant); }
.m3-list-item-content  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m3-list-item-headline { font: var(--md-sys-typescale-body-large); font-weight: 500; overflow-wrap: anywhere; }
.m3-list-item-supporting { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.m3-list-item-trailing { flex: none; display: flex; align-items: center; gap: var(--m3-space-2); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); }

/* ── Dialogs ───────────────────────────────────────────────────── */
/* For a native <dialog class="m3-dialog">, opened with showModal(). */
.m3-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
  font: var(--md-sys-typescale-body-medium);
}
.m3-dialog[open] { display: flex; flex-direction: column; animation: m3-dialog-in var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized-decelerate); }
.m3-dialog::backdrop { background: var(--md-sys-color-scrim); }
.m3-dialog-header  { display: flex; align-items: center; gap: var(--m3-space-2); padding: var(--m3-space-6) var(--m3-space-6) var(--m3-space-4); }
.m3-dialog-title   { font: var(--md-sys-typescale-headline-small); margin: 0; flex: 1; }
.m3-dialog-body    { padding: 0 var(--m3-space-6); overflow-y: auto; color: var(--md-sys-color-on-surface-variant); }
.m3-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--m3-space-2); padding: var(--m3-space-6); }
@keyframes m3-dialog-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m3-dialog[open] { animation: none; } }

/* ── Top app bar ───────────────────────────────────────────────── */
/* Sticky, translucent card surface with a hairline; 56px plus the iOS
   status-bar inset in home-screen mode. */
.m3-top-app-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--m3-space-1);
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--m3-space-2) 0 var(--m3-space-3);
  background: color-mix(in srgb, var(--md-sys-color-card) 95%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}
.m3-top-app-bar-title { font: var(--md-sys-typescale-title-large); margin: 0 var(--m3-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* Two-tone wordmark: "Ex" in on-surface, <em>"po"</em> in brass — BarLogic's Bar/Logic. */
.m3-brand { font: 800 19px/1 var(--md-ref-typeface-plain); letter-spacing: -0.01em; color: var(--md-sys-color-on-surface); text-decoration: none; }
.m3-brand em { font-style: normal; color: var(--md-sys-color-primary); }

/* ── Navigation ────────────────────────────────────────────────── */
/* Drawer / sidebar items. Active = brass wash, brass text, 2px brass edge. */
.m3-nav { display: flex; flex-direction: column; padding: var(--m3-space-2) 0; }
.m3-nav-section { padding: var(--m3-space-3) var(--m3-space-5) var(--m3-space-1); font: var(--md-sys-typescale-label-small); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--md-sys-color-on-surface-variant); }
.m3-nav-item {
  display: flex; align-items: center; gap: var(--m3-space-3);
  min-height: 44px; padding: 0 var(--m3-space-5);
  border: 0; background: transparent; color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large); font-weight: 400; text-decoration: none; text-align: left; cursor: pointer; width: 100%;
}
.m3-nav-item svg { width: 18px; height: 18px; flex: none; color: var(--md-sys-color-on-surface-variant); }
.m3-nav-item[aria-current="page"], .m3-nav-item.is-active {
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
  color: var(--md-sys-color-primary);
  box-shadow: inset 2px 0 0 var(--md-sys-color-primary);
}
.m3-nav-item[aria-current="page"] svg, .m3-nav-item.is-active svg { color: inherit; }
.m3-sidebar {
  width: 256px; flex: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  background: color-mix(in srgb, var(--md-sys-color-card) 50%, transparent);
  box-shadow: inset -1px 0 0 var(--md-sys-color-outline-variant);
}

/* Bottom navigation bar for phone-width screens. Each item: icon in a
   pill indicator, label under it. Active = aria-current="page". */
.m3-navbar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  padding: var(--m3-space-3) var(--m3-space-2) calc(var(--m3-space-4) + env(safe-area-inset-bottom));
  background: var(--md-sys-color-surface-container);
  box-shadow: inset 0 1px 0 var(--md-sys-color-outline-variant);
}
.m3-navbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: transparent; padding: 0; cursor: pointer; text-decoration: none;
  color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium);
}
.m3-navbar-indicator { position: relative; isolation: isolate; display: grid; place-items: center; width: 64px; height: 32px; border-radius: var(--md-sys-shape-corner-full); }
.m3-navbar-indicator svg { width: 22px; height: 22px; }
.m3-navbar-item[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 600; }
.m3-navbar-item[aria-current="page"] .m3-navbar-indicator { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* Segmented control / tabs (BarLogic's TabsList): muted track, selected
   segment raised on the card surface. Selected = aria-selected / aria-pressed. */
.m3-segmented {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high);
}
.m3-segmented::-webkit-scrollbar { display: none; }
.m3-segmented > button {
  flex: none; height: calc(var(--m3-control-height) - 6px); padding: 0 var(--m3-space-4);
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-large); white-space: nowrap;
}
.m3-segmented > button[aria-selected="true"], .m3-segmented > button[aria-pressed="true"] {
  background: var(--m3-segment-selected, var(--md-sys-color-field)); color: var(--md-sys-color-on-surface);
}

/* Empty state. */
.m3-empty { display: flex; flex-direction: column; align-items: center; gap: var(--m3-space-2); padding: var(--m3-space-10) var(--m3-space-4); text-align: center; color: var(--md-sys-color-on-surface-variant); }

@media (prefers-reduced-motion: reduce) {
  .m3-btn, .m3-btn::before, .m3-progress::after, .m3-switch, .m3-switch::after { transition: none; }
  .m3-btn:active { transform: none; }
}