/* ==========================================================================
   mehali-ui.css — the Mehali house design system (v2, replaces apple-ui)
   Paste this file VERBATIM into every app. Never edit values inline.
   All classes are prefixed `mu-` so apps can be merged without collisions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BRAND BLOCK
   The ONLY place the brand accent is defined. When the final brand colour is
   derived from the Mehali logo, replace the values in this block (light set
   here, dark set inside [data-theme="dark"]) and nothing else changes.
   Brand blue sampled from the Mehali logo (Mehali Logo .jpeg): #0456A2.
   -------------------------------------------------------------------------- */
:root {
  --mu-accent:         #0456A2;
  --mu-accent-hover:   #0A63B5;
  --mu-accent-active:  #034A8C;
  --mu-accent-subtle:  rgba(4, 86, 162, 0.10);
  --mu-focus-ring:     rgba(4, 86, 162, 0.36);
  --mu-text-on-accent: #FFFFFF;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Type families. System stack resolves to SF Pro on Apple hardware,
         Segoe UI on Windows; Inter is the named web fallback. No webfonts
         in artifacts; production builds may self-host Inter (platform.md). --- */
  --mu-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mu-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
             "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mu-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
             "Cascadia Mono", monospace;

  /* --- Type scale (semantic roles) --- */
  --mu-size-large-title: 40px;
  --mu-size-title-1:     32px;
  --mu-size-title-2:     24px;
  --mu-size-title-3:     20px;
  --mu-size-headline:    17px;
  --mu-size-body:        17px;
  --mu-size-callout:     16px;
  --mu-size-subhead:     15px;
  --mu-size-footnote:    13px;
  --mu-size-caption:     12px;

  /* --- Tracking: large text tightens, small text opens up --- */
  --mu-track-tight:   -0.022em;
  --mu-track-snug:    -0.014em;
  --mu-track-normal:  -0.008em;
  --mu-track-wide:     0.01em;

  /* --- Weights --- */
  --mu-weight-regular:  400;
  --mu-weight-medium:   500;
  --mu-weight-semibold: 600;
  --mu-weight-bold:     700;

  /* --- Spacing: strict 4pt grid. Never use a value outside this scale. --- */
  --mu-space-1:  4px;
  --mu-space-2:  8px;
  --mu-space-3:  12px;
  --mu-space-4:  16px;
  --mu-space-5:  20px;
  --mu-space-6:  24px;
  --mu-space-8:  32px;
  --mu-space-10: 40px;
  --mu-space-12: 48px;
  --mu-space-16: 64px;
  --mu-space-20: 80px;

  /* --- Radii --- */
  --mu-radius-xs:   6px;
  --mu-radius-sm:   8px;
  --mu-radius-md:  10px;
  --mu-radius-lg:  14px;
  --mu-radius-xl:  20px;
  --mu-radius-2xl: 28px;
  --mu-radius-full: 980px;

  /* --- Control sizing (44px = minimum comfortable touch target) --- */
  --mu-control-sm: 28px;
  --mu-control-md: 36px;
  --mu-control-lg: 44px;

  /* --- Density-scoped component tokens. Compact mode overrides ONLY these
         plus control sizes; everything else stays put. --- */
  --mu-card-pad:    var(--mu-space-5);
  --mu-cell-pad-y:  var(--mu-space-3);
  --mu-cell-pad-x:  var(--mu-space-4);
  --mu-row-min-h:   var(--mu-control-lg);
  --mu-table-size:  var(--mu-size-subhead);
  --mu-stack-gap:   var(--mu-space-4);

  /* --- Layout --- */
  --mu-max-content: 980px;
  --mu-max-text:    680px;
  --mu-max-wide:   1200px;
  --mu-gutter:      22px;
  --mu-hairline:     1px;

  /* --- Motion --- */
  --mu-dur-fast: 150ms;
  --mu-dur:      250ms;
  --mu-dur-slow: 400ms;
  --mu-ease:        cubic-bezier(0.25, 0.10, 0.25, 1.00);
  --mu-ease-out:    cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --mu-ease-spring: cubic-bezier(0.34, 1.40, 0.64, 1.00);

  /* --- Colour: LIGHT (default) --- */
  --mu-bg:            #FFFFFF;   /* base surface                 */
  --mu-bg-grouped:    #F5F5F7;   /* page background behind cards */
  --mu-bg-elevated:   #FFFFFF;   /* cards, sheets, popovers      */
  --mu-bg-inset:      #FAFAFC;   /* subtly recessed panels       */

  --mu-fill-subtle:   rgba(120, 120, 128, 0.08);
  --mu-fill:          rgba(120, 120, 128, 0.14);
  --mu-fill-strong:   rgba(120, 120, 128, 0.22);

  --mu-separator:     rgba(60, 60, 67, 0.16);
  --mu-border:        #D2D2D7;

  --mu-text:           #1D1D1F;
  --mu-text-secondary: rgba(60, 60, 67, 0.62);
  --mu-text-tertiary:  rgba(60, 60, 67, 0.36);

  --mu-green:  #34C759;
  --mu-red:    #FF3B30;
  --mu-orange: #FF9500;
  --mu-yellow: #FFCC00;
  --mu-purple: #AF52DE;
  --mu-teal:   #30B0C7;
  --mu-indigo: #5856D6;
  --mu-pink:   #FF2D55;

  /* --- Elevation. The system leans on hairlines, not heavy shadow. --- */
  --mu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --mu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --mu-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
  --mu-shadow-popover: 0 16px 48px rgba(0, 0, 0, 0.18);

  /* --- Material (translucent chrome) --- */
  --mu-material: rgba(255, 255, 255, 0.72);
  --mu-material-blur: saturate(180%) blur(20px);

  /* --- Data / chart palette, in order of use. Slot 1 = accent. --- */
  --mu-chart-1: var(--mu-accent);
  --mu-chart-2: #5856D6;
  --mu-chart-3: #FF9500;
  --mu-chart-4: #30B0C7;
  --mu-chart-5: #AF52DE;
  --mu-chart-6: #FF2D55;
}

[data-theme="dark"] {
  /* Brand block — dark. Lighter Mehali blue for contrast on black. */
  --mu-accent:        #3D8EE6;
  --mu-accent-hover:  #5AA0EC;
  --mu-accent-active: #2F7FD6;
  --mu-accent-subtle: rgba(61, 142, 230, 0.18);
  --mu-focus-ring:    rgba(61, 142, 230, 0.48);
  --mu-text-on-accent: #041A33;

  --mu-bg:            #000000;
  --mu-bg-grouped:    #000000;
  --mu-bg-elevated:   #1C1C1E;
  --mu-bg-inset:      #2C2C2E;

  --mu-fill-subtle:   rgba(120, 120, 128, 0.18);
  --mu-fill:          rgba(120, 120, 128, 0.28);
  --mu-fill-strong:   rgba(120, 120, 128, 0.40);

  --mu-separator:     rgba(84, 84, 88, 0.60);
  --mu-border:        #38383A;

  --mu-text:           #F5F5F7;
  --mu-text-secondary: rgba(235, 235, 245, 0.62);
  --mu-text-tertiary:  rgba(235, 235, 245, 0.34);

  --mu-green:  #30D158;
  --mu-red:    #FF453A;
  --mu-orange: #FF9F0A;
  --mu-yellow: #FFD60A;
  --mu-purple: #BF5AF2;
  --mu-teal:   #40C8E0;
  --mu-indigo: #5E5CE6;
  --mu-pink:   #FF375F;

  --mu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --mu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.48);
  --mu-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.56);
  --mu-shadow-popover: 0 16px 48px rgba(0, 0, 0, 0.64);

  --mu-material: rgba(29, 29, 31, 0.72);

  --mu-chart-2: #5E5CE6;
  --mu-chart-3: #FF9F0A;
  --mu-chart-4: #40C8E0;
  --mu-chart-5: #BF5AF2;
  --mu-chart-6: #FF375F;
}

/* --------------------------------------------------------------------------
   1b. DENSITY — compact mode for data-heavy screens (tables, dashboards,
   mill data). Flip with data-density="compact" on the root, or use
   .mu-table-dense on a single table. Do not use compact on touch-first
   screens: it drops below the 44px touch target.
   -------------------------------------------------------------------------- */
[data-density="compact"] {
  --mu-control-sm: 24px;
  --mu-control-md: 30px;
  --mu-control-lg: 38px;
  --mu-card-pad:   var(--mu-space-4);
  --mu-cell-pad-y: var(--mu-space-2);
  --mu-cell-pad-x: var(--mu-space-3);
  --mu-row-min-h:  36px;
  --mu-table-size: var(--mu-size-footnote);
  --mu-stack-gap:  var(--mu-space-3);
  --mu-size-body:  15px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, .mu-root {
  margin: 0;
  font-family: var(--mu-font);
  font-size: var(--mu-size-body);
  line-height: 1.47;
  letter-spacing: var(--mu-track-normal);
  color: var(--mu-text);
  background: var(--mu-bg-grouped);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.mu-root :focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--mu-focus-ring);
  border-radius: var(--mu-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  .mu-root *, .mu-root *::before, .mu-root *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.mu-large-title {
  font-family: var(--mu-font-display);
  font-size: var(--mu-size-large-title);
  line-height: 1.08;
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-tight);
  margin: 0;
}
.mu-title-1 {
  font-family: var(--mu-font-display);
  font-size: var(--mu-size-title-1);
  line-height: 1.13;
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-tight);
  margin: 0;
}
.mu-title-2 {
  font-size: var(--mu-size-title-2);
  line-height: 1.20;
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-snug);
  margin: 0;
}
.mu-title-3 {
  font-size: var(--mu-size-title-3);
  line-height: 1.25;
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-snug);
  margin: 0;
}
.mu-headline {
  font-size: var(--mu-size-headline);
  line-height: 1.35;
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-normal);
  margin: 0;
}
.mu-body      { font-size: var(--mu-size-body);     line-height: 1.47; margin: 0; }
.mu-callout   { font-size: var(--mu-size-callout);  line-height: 1.45; margin: 0; }
.mu-subhead   { font-size: var(--mu-size-subhead);  line-height: 1.45; margin: 0; }
.mu-footnote  { font-size: var(--mu-size-footnote); line-height: 1.40; margin: 0;
                letter-spacing: var(--mu-track-wide); }
.mu-caption   { font-size: var(--mu-size-caption);  line-height: 1.35; margin: 0;
                letter-spacing: var(--mu-track-wide); }

.mu-secondary { color: var(--mu-text-secondary); }
.mu-tertiary  { color: var(--mu-text-tertiary); }
.mu-mono      { font-family: var(--mu-font-mono); font-variant-numeric: tabular-nums; }
.mu-tabular   { font-variant-numeric: tabular-nums; }

.mu-eyebrow {
  font-size: var(--mu-size-caption);
  font-weight: var(--mu-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mu-text-secondary);
}

.mu-link { color: var(--mu-accent); text-decoration: none; }
.mu-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.mu-container { width: 100%; max-width: var(--mu-max-content); margin-inline: auto;
                padding-inline: var(--mu-gutter); }
.mu-container-wide { max-width: var(--mu-max-wide); }
.mu-container-text { max-width: var(--mu-max-text); }

.mu-stack { display: flex; flex-direction: column; gap: var(--mu-stack-gap); }
.mu-stack-sm { gap: var(--mu-space-2); }
.mu-stack-lg { gap: var(--mu-space-8); }
.mu-row-h { display: flex; align-items: center; gap: var(--mu-space-3); }
.mu-spacer { flex: 1 1 auto; }

.mu-grid { display: grid; gap: var(--mu-space-4); }
.mu-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mu-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.mu-section { padding-block: var(--mu-space-12); }
.mu-section-header {
  font-size: var(--mu-size-footnote);
  font-weight: var(--mu-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mu-text-secondary);
  padding: 0 var(--mu-space-4) var(--mu-space-2);
}
.mu-divider { height: var(--mu-hairline); background: var(--mu-separator); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. CHROME: nav bar, toolbar, sidebar
   -------------------------------------------------------------------------- */
.mu-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--mu-space-4);
  height: 48px;
  padding-inline: var(--mu-gutter);
  background: var(--mu-material);
  -webkit-backdrop-filter: var(--mu-material-blur);
  backdrop-filter: var(--mu-material-blur);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
}
.mu-nav-title {
  font-size: var(--mu-size-subhead);
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-normal);
}

.mu-toolbar {
  display: flex; align-items: center; gap: var(--mu-space-2);
  padding: var(--mu-space-2) var(--mu-space-3);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
  background: var(--mu-bg-elevated);
}

.mu-sidebar {
  width: 240px; flex: 0 0 240px;
  padding: var(--mu-space-3);
  background: var(--mu-bg-inset);
  border-right: var(--mu-hairline) solid var(--mu-separator);
  overflow-y: auto;
}
.mu-sidebar-item {
  display: flex; align-items: center; gap: var(--mu-space-2);
  height: var(--mu-control-md);
  padding-inline: var(--mu-space-3);
  border-radius: var(--mu-radius-sm);
  font-size: var(--mu-size-subhead);
  color: var(--mu-text);
  cursor: pointer;
  transition: background var(--mu-dur-fast) var(--mu-ease);
}
.mu-sidebar-item:hover { background: var(--mu-fill-subtle); }
.mu-sidebar-item[aria-current="page"],
.mu-sidebar-item.is-active { background: var(--mu-fill); font-weight: var(--mu-weight-medium); }

/* Tabs — underline style, for switching content regions within a page.
   (For 2–4 exclusive filters of the same data, prefer the segmented control.) */
.mu-tabs {
  display: flex; gap: var(--mu-space-5);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
}
.mu-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: var(--mu-space-3) 0;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: var(--mu-size-subhead);
  font-weight: var(--mu-weight-medium);
  letter-spacing: var(--mu-track-normal);
  color: var(--mu-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color var(--mu-dur-fast) var(--mu-ease),
              border-color var(--mu-dur-fast) var(--mu-ease);
}
.mu-tab:hover { color: var(--mu-text); }
.mu-tab[aria-selected="true"], .mu-tab.is-active {
  color: var(--mu-text);
  border-bottom-color: var(--mu-accent);
}

/* --------------------------------------------------------------------------
   6. SURFACES
   -------------------------------------------------------------------------- */
.mu-card {
  background: var(--mu-bg-elevated);
  border-radius: var(--mu-radius-lg);
  border: var(--mu-hairline) solid var(--mu-separator);
  padding: var(--mu-card-pad);
}
.mu-card-flush { padding: 0; overflow: hidden; }
.mu-card-raised { border-color: transparent; box-shadow: var(--mu-shadow-md); }

/* Inset grouped list — the signature structure. Use for settings, detail
   rows, key/value pairs, anything with a label on the left. */
.mu-list {
  background: var(--mu-bg-elevated);
  border-radius: var(--mu-radius-lg);
  border: var(--mu-hairline) solid var(--mu-separator);
  overflow: hidden;
}
.mu-list-row {
  display: flex; align-items: center; gap: var(--mu-space-3);
  min-height: var(--mu-row-min-h);
  padding: var(--mu-cell-pad-y) var(--mu-cell-pad-x);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
  font-size: var(--mu-size-subhead);
}
.mu-list-row:last-child { border-bottom: 0; }
.mu-list-row-interactive { cursor: pointer; transition: background var(--mu-dur-fast) var(--mu-ease); }
.mu-list-row-interactive:hover { background: var(--mu-fill-subtle); }
.mu-list-label { color: var(--mu-text); }
.mu-list-value { margin-left: auto; color: var(--mu-text-secondary); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.mu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mu-space-2);
  height: var(--mu-control-md);
  padding-inline: var(--mu-space-4);
  border: var(--mu-hairline) solid transparent;
  border-radius: var(--mu-radius-full);
  font-family: inherit;
  font-size: var(--mu-size-subhead);
  font-weight: var(--mu-weight-medium);
  letter-spacing: var(--mu-track-normal);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  background: var(--mu-fill-subtle);
  color: var(--mu-text);
  transition: background var(--mu-dur-fast) var(--mu-ease),
              transform var(--mu-dur-fast) var(--mu-ease),
              opacity var(--mu-dur-fast) var(--mu-ease);
}
.mu-btn:hover { background: var(--mu-fill); }
.mu-btn:active { transform: scale(0.97); }
.mu-btn:disabled { opacity: 0.4; cursor: default; transform: none; }

.mu-btn-primary { background: var(--mu-accent); color: var(--mu-text-on-accent); }
.mu-btn-primary:hover { background: var(--mu-accent-hover); }
.mu-btn-primary:active { background: var(--mu-accent-active); }

.mu-btn-secondary { background: transparent; border-color: var(--mu-border); }
.mu-btn-secondary:hover { background: var(--mu-fill-subtle); }

.mu-btn-ghost { background: transparent; color: var(--mu-accent); padding-inline: var(--mu-space-2); }
.mu-btn-ghost:hover { background: var(--mu-accent-subtle); }

.mu-btn-destructive { background: var(--mu-red); color: #FFFFFF; }
.mu-btn-destructive:hover { filter: brightness(1.06); }

.mu-btn-sm { height: var(--mu-control-sm); padding-inline: var(--mu-space-3);
             font-size: var(--mu-size-footnote); }
.mu-btn-lg { height: var(--mu-control-lg); padding-inline: var(--mu-space-6);
             font-size: var(--mu-size-callout); }
.mu-btn-block { width: 100%; }
.mu-btn-icon { width: var(--mu-control-md); padding-inline: 0; border-radius: var(--mu-radius-full); }

/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */
.mu-field { display: flex; flex-direction: column; gap: var(--mu-space-2); }
.mu-label {
  font-size: var(--mu-size-footnote);
  font-weight: var(--mu-weight-medium);
  color: var(--mu-text-secondary);
}
.mu-hint { font-size: var(--mu-size-footnote); color: var(--mu-text-tertiary); }
.mu-error { font-size: var(--mu-size-footnote); color: var(--mu-red); }

.mu-input, .mu-select, .mu-textarea {
  width: 100%;
  height: var(--mu-control-md);
  padding: 0 var(--mu-space-3);
  font-family: inherit;
  font-size: var(--mu-size-subhead);
  color: var(--mu-text);
  background: var(--mu-bg-elevated);
  border: var(--mu-hairline) solid var(--mu-border);
  border-radius: var(--mu-radius-md);
  transition: border-color var(--mu-dur-fast) var(--mu-ease),
              box-shadow var(--mu-dur-fast) var(--mu-ease);
}
.mu-textarea { height: auto; min-height: 88px; padding: var(--mu-space-3); resize: vertical;
               line-height: 1.47; }
.mu-input::placeholder, .mu-textarea::placeholder { color: var(--mu-text-tertiary); }
.mu-input:focus, .mu-select:focus, .mu-textarea:focus {
  outline: none;
  border-color: var(--mu-accent);
  box-shadow: 0 0 0 4px var(--mu-focus-ring);
}
.mu-input[aria-invalid="true"] { border-color: var(--mu-red); }

.mu-search {
  height: var(--mu-control-md);
  padding-inline: var(--mu-space-4);
  background: var(--mu-fill-subtle);
  border: none;
  border-radius: var(--mu-radius-full);
}

/* Checkbox */
.mu-check {
  display: inline-flex; align-items: center; gap: var(--mu-space-2);
  font-size: var(--mu-size-subhead);
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.mu-check input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0; flex: none;
  border: var(--mu-hairline) solid var(--mu-border);
  border-radius: var(--mu-radius-xs);
  background: var(--mu-bg-elevated);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: background var(--mu-dur-fast) var(--mu-ease),
              border-color var(--mu-dur-fast) var(--mu-ease);
}
.mu-check input::before {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid var(--mu-text-on-accent);
  border-bottom: 2px solid var(--mu-text-on-accent);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--mu-dur-fast) var(--mu-ease-spring);
}
.mu-check input:checked { background: var(--mu-accent); border-color: var(--mu-accent); }
.mu-check input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

/* Switch */
.mu-switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.mu-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mu-switch-track {
  position: absolute; inset: 0;
  background: var(--mu-fill-strong);
  border-radius: var(--mu-radius-full);
  transition: background var(--mu-dur) var(--mu-ease);
  pointer-events: none;
}
.mu-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: transform var(--mu-dur) var(--mu-ease-spring);
}
.mu-switch input:checked + .mu-switch-track { background: var(--mu-accent); }
.mu-switch input:checked + .mu-switch-track::after { transform: translateX(20px); }
.mu-switch input:focus-visible + .mu-switch-track { box-shadow: 0 0 0 4px var(--mu-focus-ring); }

/* Segmented control */
.mu-segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--mu-fill-subtle);
  border-radius: var(--mu-radius-md);
}
.mu-segment {
  border: 0; cursor: pointer;
  height: var(--mu-control-sm);
  padding-inline: var(--mu-space-3);
  border-radius: calc(var(--mu-radius-md) - 2px);
  background: transparent;
  font-family: inherit;
  font-size: var(--mu-size-footnote);
  font-weight: var(--mu-weight-medium);
  color: var(--mu-text);
  transition: background var(--mu-dur-fast) var(--mu-ease);
}
.mu-segment[aria-selected="true"], .mu-segment.is-active {
  background: var(--mu-bg-elevated);
  box-shadow: var(--mu-shadow-sm);
}

/* --------------------------------------------------------------------------
   9. FEEDBACK + DATA
   -------------------------------------------------------------------------- */
.mu-badge {
  display: inline-flex; align-items: center; gap: var(--mu-space-1);
  height: 22px; padding-inline: var(--mu-space-2);
  border-radius: var(--mu-radius-xs);
  background: var(--mu-fill);
  font-size: var(--mu-size-caption);
  font-weight: var(--mu-weight-medium);
  color: var(--mu-text-secondary);
}
.mu-badge-accent  { background: var(--mu-accent-subtle);   color: var(--mu-accent); }
.mu-badge-success { background: rgba(52, 199, 89, 0.14);   color: var(--mu-green); }
.mu-badge-warning { background: rgba(255, 149, 0, 0.16);   color: var(--mu-orange); }
.mu-badge-danger  { background: rgba(255, 59, 48, 0.14);   color: var(--mu-red); }

.mu-table { width: 100%; border-collapse: collapse; font-size: var(--mu-table-size); }
.mu-table th {
  text-align: left;
  padding: var(--mu-space-2) var(--mu-cell-pad-x);
  font-size: var(--mu-size-caption);
  font-weight: var(--mu-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mu-text-secondary);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
  white-space: nowrap;
}
.mu-table td {
  padding: var(--mu-cell-pad-y) var(--mu-cell-pad-x);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
}
.mu-table tbody tr:last-child td { border-bottom: 0; }
.mu-table tbody tr:hover { background: var(--mu-fill-subtle); }
.mu-table .mu-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Per-table dense variant — same values compact mode applies globally. */
.mu-table-dense { font-size: var(--mu-size-footnote); }
.mu-table-dense td { padding: var(--mu-space-2) var(--mu-space-3); }
.mu-table-dense th { padding: var(--mu-space-1) var(--mu-space-3) var(--mu-space-2); }

.mu-stat-value {
  font-family: var(--mu-font-display);
  font-size: var(--mu-size-title-1);
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-tight);
  font-variant-numeric: tabular-nums;
}
.mu-stat-label { font-size: var(--mu-size-footnote); color: var(--mu-text-secondary); }

.mu-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--mu-space-2);
  padding: var(--mu-space-16) var(--mu-space-6);
  text-align: center;
  color: var(--mu-text-secondary);
}

/* Loading: skeletons at the final size of the content, or a small spinner. */
.mu-skeleton {
  background: var(--mu-fill-subtle);
  border-radius: var(--mu-radius-sm);
  animation: mu-pulse 1.4s var(--mu-ease) infinite;
}
@keyframes mu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.mu-spinner {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--mu-fill);
  border-top-color: var(--mu-accent);
  border-radius: 50%;
  animation: mu-spin 0.8s linear infinite;
}
@keyframes mu-spin { to { transform: rotate(360deg); } }

/* Toasts — bottom-centre, one at a time, auto-dismiss ~4s. */
.mu-toast-region {
  position: fixed; bottom: var(--mu-space-6); left: 0; right: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: var(--mu-space-2);
  pointer-events: none;
}
.mu-toast {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: var(--mu-space-3);
  max-width: 420px;
  padding: var(--mu-space-3) var(--mu-space-4);
  background: var(--mu-bg-elevated);
  color: var(--mu-text);
  font-size: var(--mu-size-subhead);
  border: var(--mu-hairline) solid var(--mu-separator);
  border-radius: var(--mu-radius-lg);
  box-shadow: var(--mu-shadow-lg);
  animation: mu-rise var(--mu-dur) var(--mu-ease-out);
}

/* Sheet / modal */
.mu-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--mu-space-4);
  animation: mu-fade var(--mu-dur) var(--mu-ease-out);
}
.mu-sheet {
  width: 100%; max-width: 480px;
  background: var(--mu-bg-elevated);
  border-radius: var(--mu-radius-xl);
  box-shadow: var(--mu-shadow-popover);
  padding: var(--mu-space-6);
  animation: mu-rise var(--mu-dur) var(--mu-ease-out);
}
@keyframes mu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mu-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE — one breakpoint at 734px.
   -------------------------------------------------------------------------- */
@media (max-width: 734px) {
  :root {
    --mu-size-large-title: 32px;
    --mu-size-title-1:     26px;
    --mu-size-title-2:     21px;
    --mu-gutter:           16px;
  }
  /* Compact density never shrinks touch targets on small screens. */
  [data-density="compact"] {
    --mu-control-sm: 28px;
    --mu-control-md: 36px;
    --mu-control-lg: 44px;
    --mu-row-min-h:  44px;
  }
  .mu-sidebar { display: none; }
  .mu-section { padding-block: var(--mu-space-8); }
}