/* ============================================================================
   MACRITION UI SYSTEM v2 — COMPILED
   Source of truth: resources/css/macrition/ (see manifest.txt)
   Build: scripts/build_ui2.py  (deterministic; re-run after editing sources)
   Generated: 1970-01-01 00:00 UTC
   Do not edit this file directly - edit the sources and rebuild.
   Cascade: @layer legacy, reset, tokens, base, components, patterns, shells, utilities;
   (S122, issue #9: 'legacy' is declared FIRST = lowest priority. Mixed
   surfaces load the wrapped legacy bundle (macrition-legacy.css) instead
   of raw unlayered sheets, so layered v2 rules beat layered legacy rules
   deterministically - specificity never has to fight load order again.
   Legacy @import-free sheets only; wrapping preserves their proven order.)
   ========================================================================== */

@layer legacy, reset, tokens, base, components, patterns, shells, utilities;

/* ==== source: tokens.css (layer tokens) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — TOKENS
   The single semantic token authority for color, typography, spacing, radius,
   elevation, motion and z-index. Components consume ONLY semantic tokens;
   themes change tokens; nothing downstream redefines them.

   Director contract (UI-SYSTEM-V2-DIRECTOR-REVIEW §6-§8, §26):
   - primary blue #2563EB  : interaction, selection, links, primary action
   - health green #22C55E  : positive nutrition state, progress, success
   - energy orange #F97316 : calories/energy + selective emphasis
   - slate family          : text, structure, neutral data
   - red                   : destructive/error ONLY
   - amber                 : warning/attention ONLY
   Brand colors gain power by being used less often and more intentionally.
   ========================================================================== */
@layer tokens {

  /* ---------------------------------------------------------------
     1. PRIMITIVES — fixed ramp values, never consumed directly by
        components (components bind the semantic aliases below).
     ---------------------------------------------------------------- */
  :root {
    /* primary / interaction blue */
    --mc-blue-50:  #EFF6FF;
    --mc-blue-100: #DBEAFE;
    --mc-blue-200: #BFDBFE;
    --mc-blue-400: #60A5FA;
    --mc-blue-500: #3B82F6;
    --mc-blue-600: #2563EB;  /* THE interaction blue */
    --mc-blue-700: #1D4ED8;
    --mc-blue-800: #1E40AF;

    /* health / progress green */
    --mc-green-50:  #F0FDF4;
    --mc-green-100: #DCFCE7;
    --mc-green-400: #4ADE80;
    --mc-green-500: #22C55E;  /* THE health green */
    --mc-green-600: #16A34A;
    --mc-green-700: #15803D;

    /* energy / calorie orange */
    --mc-orange-50:  #FFF7ED;
    --mc-orange-100: #FFEDD5;
    --mc-orange-400: #FB923C;
    --mc-orange-500: #F97316;  /* THE energy orange */
    --mc-orange-600: #EA580C;
    --mc-orange-700: #C2410C;

    /* attention amber (warning only) */
    --mc-amber-50:  #FFFBEB;
    --mc-amber-100: #FEF3C7;
    --mc-amber-400: #FBBF24;
    --mc-amber-500: #F59E0B;
    --mc-amber-600: #D97706;
    --mc-amber-700: #B45309;

    /* destructive red (error only) */
    --mc-red-50:  #FEF2F2;
    --mc-red-100: #FEE2E2;
    --mc-red-400: #F87171;
    --mc-red-500: #EF4444;
    --mc-red-600: #DC2626;
    --mc-red-700: #B91C1C;

    /* info cyan */
    --mc-cyan-50:  #ECFEFF;
    --mc-cyan-100: #CFFAFE;
    --mc-cyan-500: #06B6D4;
    --mc-cyan-600: #0891B2;
    --mc-cyan-700: #0E7490;

    /* violet (fat macro + selective accent) */
    --mc-violet-50:  #F5F3FF;
    --mc-violet-100: #EDE9FE;
    --mc-violet-500: #8B5CF6;
    --mc-violet-600: #7C3AED;
    --mc-violet-700: #6D28D9;

    /* slate neutral ramp (structure + text) */
    --mc-slate-50:  #F8FAFC;
    --mc-slate-100: #F1F5F9;
    --mc-slate-200: #E2E8F0;
    --mc-slate-300: #CBD5E1;
    --mc-slate-400: #94A3B8;
    --mc-slate-500: #64748B;
    --mc-slate-600: #475569;
    --mc-slate-700: #334155;
    --mc-slate-800: #1E293B;
    --mc-slate-900: #0F172A;
    --mc-slate-950: #020617;
  }

  /* ---------------------------------------------------------------
     2. SEMANTIC TOKENS — what components actually consume.
        LIGHT theme (default).
     ---------------------------------------------------------------- */
  :root {
    /* surfaces: 0 = page canvas, 1 = bordered surface, 2 = raised, 3 = sunken */
    --mc-canvas:          var(--mc-slate-50);
    --mc-surface:         #FFFFFF;
    --mc-surface-raised:  #FFFFFF;
    --mc-surface-sunken:  var(--mc-slate-100);
    --mc-surface-overlay: rgba(15, 23, 42, 0.45);

    /* (S124) navigation rails: a distinct, quietly sunken pane so the
       rail never merges with the elevated white content surfaces beside
       it (figure-ground separation). One step below the canvas in tone,
       plus its own edge treatment in the shell CSS. */
    --mc-rail-bg:         #EEF1F6;
    --mc-rail-bg-accent:  var(--mc-slate-200);
    --mc-rail-edge:       inset -1px 0 0 0 rgba(15, 23, 42, 0.04);

    /* text */
    --mc-text:            var(--mc-slate-900);
    --mc-text-secondary:  var(--mc-slate-600);
    --mc-text-muted:      var(--mc-slate-500);
    --mc-text-inverse:    #FFFFFF;
    --mc-text-on-primary: #FFFFFF;

    /* structure */
    --mc-border:          var(--mc-slate-200);
    --mc-border-strong:   #64748B; /* (D-040) 4.76:1 on --mc-surface */
    --mc-border-focus:    var(--mc-blue-600);
    --mc-border-hover:    #64748B; /* (D-040) boundary hover: 4.76:1 */

    /* semantic color bindings */
    --mc-primary:            var(--mc-blue-600);
    --mc-primary-hover:      var(--mc-blue-700);
    --mc-primary-active:     var(--mc-blue-800);
    --mc-primary-subtle:     var(--mc-blue-50);
    --mc-primary-subtle-text: var(--mc-blue-700);

    --mc-success:            var(--mc-green-600);
    --mc-success-strong:     var(--mc-green-500);
    --mc-success-subtle:     var(--mc-green-50);
    --mc-success-subtle-text: var(--mc-green-700);

    --mc-warning:            var(--mc-amber-600);
    --mc-warning-strong:     var(--mc-amber-500);
    --mc-warning-subtle:     var(--mc-amber-50);
    --mc-warning-subtle-text: var(--mc-amber-700);

    --mc-danger:             var(--mc-red-600);
    --mc-danger-strong:      var(--mc-red-500);
    --mc-danger-subtle:      var(--mc-red-50);
    --mc-danger-subtle-text: var(--mc-red-700);

    --mc-info:               var(--mc-cyan-600);
    --mc-info-subtle:        var(--mc-cyan-50);
    --mc-info-subtle-text:   var(--mc-cyan-700);

    /* link */
    --mc-link:               var(--mc-blue-600);
    --mc-link-hover:         var(--mc-blue-700);
    --mc-link-visited:       var(--mc-blue-800);

    /* nutrition domain bindings — data, not decoration */
    --mc-nutrient-energy:    var(--mc-orange-500);   /* calories */
    --mc-nutrient-energy-soft: var(--mc-orange-100);
    --mc-nutrient-protein:   var(--mc-blue-600);
    --mc-nutrient-protein-soft: var(--mc-blue-100);
    --mc-nutrient-carbs:     var(--mc-amber-500);
    --mc-nutrient-carbs-soft: var(--mc-amber-100);
    --mc-nutrient-fat:       var(--mc-violet-600);
    --mc-nutrient-fat-soft:  var(--mc-violet-100);
    --mc-nutrient-water:     var(--mc-cyan-600);
    --mc-nutrient-water-soft: var(--mc-cyan-100);
    --mc-nutrient-fiber:     var(--mc-green-600);
    --mc-nutrient-fiber-soft: var(--mc-green-100);

    /* focus */
    --mc-focus-ring:         0 0 0 3px rgba(37, 99, 235, 0.35);
    --mc-focus-ring-danger:  0 0 0 3px rgba(220, 38, 38, 0.30);
    --mc-focus-outline:      2px solid var(--mc-blue-600);

    /* elevation — border + restrained shadow, never blur+glow+lift stacks */
    --mc-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
    --mc-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
    --mc-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);

    /* z-index authority — the documented layer scale */
    --mc-z-base:      1;
    --mc-z-nav:       40;    /* fixed workspace rail / admin sidebar */
    --mc-z-header:    50;    /* sticky headers */
    --mc-z-dropdown:  200;   /* popovers, menus, combobox */
    --mc-z-sticky:    500;   /* sticky table heads, bars, floating scroll/summary docks */
    --mc-z-overlay:   900;   /* modal backdrop, drawer scrim */
    /* (S258-D1) the floating popover plane: the AI assistant panel paints
       ABOVE the overlay/FAB plane (900) and BELOW the dialog plane (1000)
       — the S257-D1b consent-gate law requires var(--mc-z-modal) to always
       own the top, so the popover tier is pinned BETWEEN the two. */
    --mc-z-popover:   950;
    --mc-z-modal:     1000;  /* dialogs, drawers */
    --mc-z-toast:     1100;  /* toasts */
    --mc-z-coach:     1200;  /* coach marks / tutorial spotlight (overlays toasts legitimately) */
    /* (S258-D1) the accessibility emergency plane: the focused skip link
       must paint above EVERYTHING legal (toasts 1100, coach 1200 included)
       — WCAG 2.4.1 bypass-blocks loses its meaning if any transient layer
       can bury the focused skip affordance. */
    --mc-z-skip:      2000;
  }

  /* ---------------------------------------------------------------
     3. DARK THEME — token mirror, not a set of page repairs.
     ---------------------------------------------------------------- */
  [data-theme="dark"] {
    --mc-canvas:          #0B1220;
    --mc-surface:         #111A2C;
    --mc-surface-raised:  #16223A;
    --mc-surface-sunken:  #0D1526;
    --mc-surface-overlay: rgba(2, 6, 23, 0.62);

    /* (S124) rails: darker than the canvas pane in dark mode so the
       elevated content surfaces keep their pop. */
    --mc-rail-bg:         #0A101D;
    --mc-rail-bg-accent:  #182339;
    --mc-rail-edge:       inset -1px 0 0 0 rgba(148, 163, 184, 0.06);

    --mc-text:            #E7EDF7;
    --mc-text-secondary:  #A9B7CC;
    --mc-text-muted:      #7E8DA6;
    --mc-text-inverse:    #0F172A;
    --mc-text-on-primary: #FFFFFF;

    --mc-border:          #24334D;
    --mc-border-strong:   #94A3B8; /* (D-040) 6.78:1 */
    --mc-border-focus:    var(--mc-blue-400);
    --mc-border-hover:    #94A3B8; /* (D-040) 6.78:1 */

    --mc-primary:            var(--mc-blue-500);
    --mc-primary-hover:      var(--mc-blue-400);
    --mc-primary-active:     var(--mc-blue-600);
    --mc-primary-subtle:     rgba(59, 130, 246, 0.14);
    --mc-primary-subtle-text: var(--mc-blue-200);

    --mc-success:            var(--mc-green-500);
    --mc-success-strong:     var(--mc-green-400);
    --mc-success-subtle:     rgba(34, 197, 94, 0.13);
    --mc-success-subtle-text: var(--mc-green-400);

    --mc-warning:            var(--mc-amber-500);
    --mc-warning-strong:     var(--mc-amber-400);
    --mc-warning-subtle:     rgba(245, 158, 11, 0.13);
    --mc-warning-subtle-text: var(--mc-amber-400);

    --mc-danger:             var(--mc-red-500);
    --mc-danger-strong:      var(--mc-red-400);
    --mc-danger-subtle:      rgba(239, 68, 68, 0.13);
    --mc-danger-subtle-text: var(--mc-red-400);

    --mc-info:               var(--mc-cyan-500);
    --mc-info-subtle:        rgba(6, 182, 212, 0.13);
    --mc-info-subtle-text:   var(--mc-cyan-400);

    --mc-link:               var(--mc-blue-400);
    --mc-link-hover:         var(--mc-blue-200);
    --mc-link-visited:       var(--mc-blue-300);

    --mc-nutrient-energy:    var(--mc-orange-400);
    --mc-nutrient-energy-soft: rgba(249, 115, 22, 0.16);
    --mc-nutrient-protein:   var(--mc-blue-400);
    --mc-nutrient-protein-soft: rgba(59, 130, 246, 0.16);
    --mc-nutrient-carbs:     var(--mc-amber-400);
    --mc-nutrient-carbs-soft: rgba(245, 158, 11, 0.15);
    --mc-nutrient-fat:       var(--mc-violet-500);
    --mc-nutrient-fat-soft:  rgba(139, 92, 246, 0.16);
    --mc-nutrient-water:     var(--mc-cyan-500);
    --mc-nutrient-water-soft: rgba(6, 182, 212, 0.15);
    --mc-nutrient-fiber:     var(--mc-green-500);
    --mc-nutrient-fiber-soft: rgba(34, 197, 94, 0.15);

    --mc-focus-ring:         0 0 0 3px rgba(96, 165, 250, 0.40);
    --mc-focus-ring-danger:  0 0 0 3px rgba(248, 113, 113, 0.35);
    --mc-focus-outline:      2px solid var(--mc-blue-400);

    --mc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --mc-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --mc-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
  }

  /* Auto-dark for users with no explicit choice (data-theme absent).
     JS normally sets data-theme pre-paint; this is the no-JS safety net. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --mc-canvas:          #0B1220;
      --mc-surface:         #111A2C;
      --mc-surface-raised:  #16223A;
      --mc-surface-sunken:  #0D1526;
      --mc-text:            #E7EDF7;
      --mc-text-secondary:  #A9B7CC;
      --mc-text-muted:      #7E8DA6;
      --mc-border:          #24334D;
      --mc-border-strong:   #94A3B8; /* (D-040) mirror */
      --mc-border-hover:    #94A3B8; /* (D-040) mirror pairing */
    }
  }

  /* ---------------------------------------------------------------
     4. SUPPORTING THEMES — sepia (reading) and high-contrast (WCAG AAA
        leaning). The theme-switcher JS sets these data-theme values;
        the token system honors them without page repairs.
     ---------------------------------------------------------------- */
  [data-theme="sepia"] {
    --mc-canvas:          #F4EDE2;
    --mc-surface:         #FBF6EC;
    --mc-surface-raised:  #FFFDF7;
    --mc-surface-sunken:  #EDE3D2;
    --mc-text:            #33302A;
    --mc-text-secondary:  #55503F;
    --mc-text-muted:      #6E6853;
    --mc-border:          #DFD3BD;
    --mc-border-strong:   #9A7A4E; /* (D-040) 3.70:1 */
    --mc-primary:         #7C5B24;
    --mc-primary-hover:   #684C1D;
    --mc-primary-subtle:  #F0E5CE;
    --mc-primary-subtle-text: #684C1D;
    --mc-link:            #7C5B24;
    --mc-link-hover:      #684C1D;
    --mc-border-hover:    #8A6B40; /* (D-040) 4.58:1 */
  }

  [data-theme="high-contrast"] {
    --mc-canvas:          #FFFFFF;
    --mc-surface:         #FFFFFF;
    --mc-surface-raised:  #FFFFFF;
    --mc-surface-sunken:  #F0F0F0;
    --mc-text:            #000000;
    --mc-text-secondary:  #1A1A1A;
    --mc-text-muted:      #262626;
    --mc-border:          #454545;
    --mc-border-strong:   #000000;
    --mc-border-hover:    #000000; /* (D-040) the model */
    --mc-primary:         #003EA8;
    --mc-primary-hover:   #002F80;
    --mc-primary-subtle:  #E5EEFF;
    --mc-link:            #003EA8;
    --mc-link-hover:      #002F80;
    --mc-success:         #00600A;
    --mc-warning:         #7A4B00;
    --mc-danger:          #A10000;
    --mc-focus-ring:      0 0 0 3px rgba(0, 62, 168, 0.55);
    --mc-shadow-1: none;
    --mc-shadow-2: 0 0 0 1px #000000;
    --mc-shadow-3: 0 0 0 2px #000000;
  }

  /* colorblind-safe: shift red/green semantic dependence toward
     blue/orange differentiation while keeping semantic roles stable */
  [data-theme="colorblind"] {
    --mc-success:            #0072B2;
    --mc-success-strong:     #0072B2;
    --mc-success-subtle:     #E5F1F9;
    --mc-success-subtle-text: #00557F;
    --mc-danger:             #D55E00;
    --mc-danger-strong:      #D55E00;
    --mc-danger-subtle:      #FDF0E5;
    --mc-danger-subtle-text: #A34400;
    --mc-nutrient-protein:   #0072B2;
    --mc-nutrient-fiber:     #009E73;
  }

  /* ---------------------------------------------------------------
     5. TYPOGRAPHY — Inter is the interface authority; Fraunces is a
        controlled editorial accent (marketing display, public H1s),
        never dashboards/tables/forms/admin. Named scale only.
     ---------------------------------------------------------------- */
  :root {
    --mc-font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mc-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --mc-font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Menlo, monospace;

    /* named type scale — rem-based, honors user font-size preference */
    --mc-type-micro:      0.6875rem;   /* 11px — meta only, unavoidable cases */
    --mc-type-caption:   0.75rem;     /* 12px — captions, labels, badges */
    --mc-type-small:     0.8125rem;   /* 13px — dense admin data */
    --mc-type-body-sm:   0.875rem;    /* 14px — body-small, table cells */
    --mc-type-body:      1rem;        /* 16px — body */
    --mc-type-body-lg:   1.125rem;    /* 18px — body-large, lead-in */
    --mc-type-h4:        1.25rem;     /* 20px */
    --mc-type-h3:        1.5rem;      /* 24px */
    --mc-type-h2:        1.875rem;    /* 30px */
    --mc-type-h1:        2.25rem;     /* 36px */
    --mc-type-display:   clamp(2.5rem, 1.4rem + 3.2vw, 3.75rem);

    --mc-leading-tight:   1.2;
    --mc-leading-snug:    1.375;
    --mc-leading-normal:  1.5;
    --mc-leading-relaxed: 1.625;

    --mc-tracking-tight:  -0.02em;
    --mc-tracking-normal: 0;
    --mc-tracking-wide:   0.04em;

    --mc-weight-regular:  400;
    --mc-weight-medium:   500;
    --mc-weight-semibold: 600;
    --mc-weight-bold:     700;
  }

  /* ---------------------------------------------------------------
     6. SPACING — named scale, no arbitrary per-page gaps.
     ---------------------------------------------------------------- */
  :root {
    --mc-space-1:  0.25rem;   /*  4px */
    --mc-space-2:  0.5rem;    /*  8px */
    --mc-space-3:  0.75rem;   /* 12px */
    --mc-space-4:  1rem;      /* 16px */
    --mc-space-5:  1.25rem;   /* 20px */
    --mc-space-6:  1.5rem;    /* 24px */
    --mc-space-8:  2rem;      /* 32px */
    --mc-space-10: 2.5rem;    /* 40px */
    --mc-space-12: 3rem;      /* 48px */
    --mc-space-16: 4rem;      /* 64px */
    --mc-space-20: 5rem;      /* 80px */
    --mc-space-24: 6rem;      /* 96px */

    /* density contexts: member default, admin denser */
    --mc-density: 1;
  }

  /* ---------------------------------------------------------------
     7. RADIUS + MOTION
     ---------------------------------------------------------------- */
  :root {
    --mc-radius-xs:   6px;    /* tags, tiny chips */
    --mc-radius-sm:   8px;    /* controls: buttons, inputs */
    --mc-radius-md:   12px;   /* normal cards */
    --mc-radius-lg:   16px;   /* large panels, dialogs */
    --mc-radius-pill: 999px;  /* pills and badges only */

    --mc-dur-fast:   120ms;
    --mc-dur-normal: 200ms;
    --mc-dur-slow:   320ms;
    --mc-ease:        cubic-bezier(0.2, 0, 0, 1);
    --mc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --mc-dur-fast:   1ms;
      --mc-dur-normal: 1ms;
      --mc-dur-slow:   1ms;
    }
  }

  /* ---------------------------------------------------------------
     8. LAYOUT BANDS — the only global breakpoints. Local crowding is
        handled by container/flex behavior, never new global stops.
        compact <640 · medium 640–1023 · desktop 1024–1439 · wide ≥1440
     ---------------------------------------------------------------- */
  :root {
    --mc-band-compact-max: 639.5px;
    --mc-band-medium-min:  640px;
    --mc-band-desktop-min: 1024px;
    --mc-band-wide-min:    1440px;

    /* reading measure for long-form trust/editorial content */
    --mc-measure: 68ch;

    /* shells */
    --mc-rail-width:        248px;
    --mc-rail-width-collapsed: 68px;
    --mc-admin-sidebar:     240px;
    --mc-admin-sidebar-collapsed: 64px;
    --mc-topbar-height:     56px;

    /* control sizing */
    --mc-control-height:    38px;
    --mc-control-height-sm: 32px;
    --mc-control-height-lg: 46px;
    --mc-touch-target:      44px;   /* WCAG 2.2 AA 2.5.8 minimum */
  }
}


/* ==== source: reset.css (layer reset) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — RESET
   Modern element normalization scoped to v2 surfaces. Legacy pages never
   load this file, so legacy rendering is untouched.
   ========================================================================== */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    line-height: var(--mc-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  a {
    color: inherit;
  }

  ul, ol {
    list-style: none;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  fieldset {
    border: 0;
    padding: 0;
    min-inline-size: 0;
  }

  legend {
    padding: 0;
  }

  dialog {
    padding: 0;
    border: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: var(--mc-leading-tight);
    text-wrap: balance;
  }

  p, li, figcaption {
    text-wrap: pretty;
  }

  [hidden] {
    display: none !important;
  }

  /* focus visibility is the component's duty; base contract: never none */
  :focus-visible {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: 2px;
  }

  ::selection {
    background: var(--mc-primary-subtle);
    color: var(--mc-primary-subtle-text);
  }
}


/* ==== source: base.css (layer base) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — BASE
   Element defaults inside a v2 context (the .mc-app root scope).
   Typography, links, headings, form labels, tables — all token-driven.
   ========================================================================== */
@layer base {
  .mc-app {
    font-family: var(--mc-font-sans);
    font-size: var(--mc-type-body);
    color: var(--mc-text);
    background: var(--mc-canvas);
    line-height: var(--mc-leading-normal);

    /* explicit font feature settings for tabular nutrition data */
    font-feature-settings: 'cv05', 'ss03';
  }

  /* admin density mode of the same system (director §5/§22) */
  .mc-app[data-density="admin"] {
    font-size: var(--mc-type-body-sm);
  }

  /* ---- typography ---- */
  .mc-app h1, .mc-app .mc-h1 {
    font-size: var(--mc-type-h1);
    font-weight: var(--mc-weight-bold);
    letter-spacing: var(--mc-tracking-tight);
    line-height: var(--mc-leading-tight);
  }
  .mc-app h2, .mc-app .mc-h2 {
    font-size: var(--mc-type-h2);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-tight);
  }
  .mc-app h3, .mc-app .mc-h3 {
    font-size: var(--mc-type-h3);
    font-weight: var(--mc-weight-semibold);
  }
  .mc-app h4, .mc-app .mc-h4 {
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
  }
  /* (D-038 paired geometry) the heading-outline retags preserve the SERVED
     sizes: the panel-title family and the chrono food names were captured by
     the .mc-app element rules above both before and after the retag — these
     pins keep the exact pre-retag computed geometry (h3-era 24px panels,
     h4-era 20px sub-panels/JS group heads and food names) while the outline
     restores the semantic levels. */
  .mc-app h2.eng-panel-title { font-size: var(--mc-type-h3); }
  .mc-app h3.eng-panel-title { font-size: var(--mc-type-h4); }
  .mc-app h3.cf-name { font-size: var(--mc-type-h4); }

  .mc-app .mc-display {
    font-family: var(--mc-font-display);
    font-size: var(--mc-type-display);
    font-weight: var(--mc-weight-semibold);
    line-height: var(--mc-leading-tight);
    letter-spacing: var(--mc-tracking-tight);
  }

  .mc-app .mc-lead {
    font-size: var(--mc-type-body-lg);
    color: var(--mc-text-secondary);
    line-height: var(--mc-leading-relaxed);
  }

  .mc-app .mc-caption {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal);
  }

  .mc-app small, .mc-app .mc-small { font-size: var(--mc-type-caption); }
  .mc-app .mc-micro { font-size: var(--mc-type-micro); }

  .mc-app code, .mc-app kbd {
    font-family: var(--mc-font-mono);
    font-size: 0.9em;
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xs);
    padding: 0.1em 0.4em;
  }

  .mc-app abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  /* tabular figures for all nutrition data — never wobbly columns */
  .mc-app .mc-numeric,
  .mc-app td.num,
  .mc-app .mc-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  /* ---- links ---- */
  .mc-app a:not([class]) {
    color: var(--mc-link);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--mc-link) 35%, transparent);
    text-underline-offset: 2px;
    transition: color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-app a:not([class]):hover { color: var(--mc-link-hover); }
  .mc-app a:not([class]):focus-visible {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: 2px;
    border-radius: var(--mc-radius-xs);
  }

  /* ---- form element base (component layer refines) ---- */
  .mc-app label {
    display: inline-block;
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
    margin-bottom: var(--mc-space-2);
  }
  .mc-app label .mc-optional {
    font-weight: var(--mc-weight-regular);
    color: var(--mc-text-muted);
    margin-left: var(--mc-space-1);
  }

  .mc-app fieldset {
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-5);
  }
  .mc-app legend {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
    padding: 0 var(--mc-space-2);
  }

  .mc-app hr {
    border: 0;
    border-top: 1px solid var(--mc-border);
    margin: var(--mc-space-6) 0;
  }

  /* ---- long-form reading (trust/legal/editorial surfaces) ---- */
  .mc-prose {
    max-width: var(--mc-measure);
    font-size: var(--mc-type-body);
    line-height: var(--mc-leading-relaxed);
    color: var(--mc-text);
  }
  .mc-prose > * + * { margin-top: var(--mc-space-4); }
  .mc-prose h2 { margin-top: var(--mc-space-10); font-size: var(--mc-type-h3); }
  .mc-prose h3 { margin-top: var(--mc-space-8); font-size: var(--mc-type-h4); }
  .mc-prose ul, .mc-prose ol {
    padding-left: 1.25rem;
    list-style: revert;
  }
  .mc-prose li + li { margin-top: var(--mc-space-2); }
  .mc-prose blockquote {
    border-left: 3px solid var(--mc-border-strong);
    padding-left: var(--mc-space-4);
    color: var(--mc-text-secondary);
    font-style: italic;
  }
  .mc-prose table {
    width: 100%;
    font-size: var(--mc-type-body-sm);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    overflow: hidden;
  }
  .mc-prose th {
    text-align: left;
    font-weight: var(--mc-weight-semibold);
    background: var(--mc-surface-sunken);
    padding: var(--mc-space-2) var(--mc-space-3);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-prose td {
    padding: var(--mc-space-2) var(--mc-space-3);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-prose tr:last-child td { border-bottom: 0; }

  /* ---- motion safety net for v2-authored animations ---- */
  @media (prefers-reduced-motion: reduce) {
    .mc-app *, .mc-app *::before, .mc-app *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}


/* ==== source: components/button.css (layer components) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — COMPONENT: BUTTON
   One button grammar: variants (primary/secondary/ghost/danger/link),
   sizes (sm/md/lg), states (hover/active/focus-visible/disabled/loading).
   Gradient fills on routine controls are forbidden (director §4).
   ========================================================================== */
@layer components {
  .mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    height: var(--mc-control-height);
    padding: 0 var(--mc-space-4);
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    font-family: inherit;
    line-height: 1;
    border-radius: var(--mc-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    transition:
      background-color var(--mc-dur-fast) var(--mc-ease),
      border-color var(--mc-dur-fast) var(--mc-ease),
      color var(--mc-dur-fast) var(--mc-ease),
      box-shadow var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-btn:focus-visible {
    outline: none;
    box-shadow: var(--mc-focus-ring);
  }
  .mc-btn:disabled,
  .mc-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* (S134-A2-E5) the disabled icon affordance: visible, inert, and
     self-explaining — the `title` names the required permission, so
     pointer-events stays ENABLED (the tooltip must hover) and only the
     pointer intent + opacity signal the unavailable state. */
  .mc-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .mc-btn .mc-btn-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
  }

  /* sizes */
  .mc-btn-sm  { height: var(--mc-control-height-sm); padding: 0 var(--mc-space-3); font-size: var(--mc-type-caption); }
  .mc-btn-lg  { height: var(--mc-control-height-lg); padding: 0 var(--mc-space-6); font-size: var(--mc-type-body); }
  .mc-btn-block { display: flex; width: 100%; }

  /* primary — the single strongest action on the surface */
  .mc-btn-primary {
    background: var(--mc-primary);
    color: var(--mc-text-on-primary);
  }
  .mc-btn-primary:hover  { background: var(--mc-primary-hover); }
  .mc-btn-primary:active { background: var(--mc-primary-active); }

  /* secondary — bordered default action */
  .mc-btn-secondary {
    background: var(--mc-surface);
    color: var(--mc-text);
    border-color: var(--mc-border-strong);
    box-shadow: var(--mc-shadow-1);
  }
  .mc-btn-secondary:hover  { background: var(--mc-surface-sunken); border-color: var(--mc-border-strong); }
  .mc-btn-secondary:active { background: var(--mc-surface-sunken); }

  /* ghost — quiet inline actions */
  .mc-btn-ghost {
    background: transparent;
    color: var(--mc-text-secondary);
  }
  .mc-btn-ghost:hover {
    background: var(--mc-surface-sunken);
    color: var(--mc-text);
  }

  /* subtle — tinted secondary emphasis (info/success contexts) */
  .mc-btn-subtle {
    background: var(--mc-primary-subtle);
    color: var(--mc-primary-subtle-text);
  }
  .mc-btn-subtle:hover { background: color-mix(in srgb, var(--mc-primary) 14%, var(--mc-surface)); }

  /* destructive — reserved for irreversible actions */
  .mc-btn-danger {
    background: var(--mc-danger);
    color: #FFFFFF;
  }
  .mc-btn-danger:hover { background: color-mix(in srgb, var(--mc-danger) 88%, black); }
  .mc-btn-danger:focus-visible { box-shadow: var(--mc-focus-ring-danger); }

  .mc-btn-danger-subtle {
    background: var(--mc-danger-subtle);
    color: var(--mc-danger-subtle-text);
  }
  .mc-btn-danger-subtle:hover { background: color-mix(in srgb, var(--mc-danger) 14%, var(--mc-surface)); }

  /* link-button */
  .mc-btn-link {
    background: none;
    color: var(--mc-link);
    padding: 0;
    height: auto;
  }
  .mc-btn-link:hover { color: var(--mc-link-hover); text-decoration: underline; text-underline-offset: 3px; }

  /* icon button — square, for toolbar actions */
  .mc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mc-touch-target);
    height: var(--mc-touch-target);
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text-secondary);
    background: transparent;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-icon-btn:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-icon-btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-icon-btn svg { width: 1.125rem; height: 1.125rem; }
  .mc-icon-btn-sm { width: 2rem; height: 2rem; }
  .mc-icon-btn-sm svg { width: 1rem; height: 1rem; }

  /* loading state */
  .mc-btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.75;
  }
  .mc-btn[aria-busy="true"] .mc-btn-label { visibility: hidden; }
  .mc-btn .mc-spinner {
    display: none;
    width: 1em;
    height: 1em;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: mc-spin 0.7s linear infinite;
  }
  .mc-btn[aria-busy="true"] .mc-spinner { display: inline-block; }
  .mc-btn-primary .mc-spinner {
    position: absolute;
  }
  .mc-btn[aria-busy="true"] { position: relative; }

  @keyframes mc-spin { to { transform: rotate(360deg); } }
}


/* ==== source: components/form.css (layer components) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — COMPONENT: FORM CONTROLS
   Input, textarea, select, checkbox, radio, switch, field group,
   validation states, hints and errors. Fully labeled + associated.
   ========================================================================== */
@layer components {
  /* ---- field group (the unit of form layout) ---- */
  .mc-field {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    min-width: 0;
  }
  .mc-field > label {
    margin-bottom: 0; /* gap owns spacing */
  }
  /* (S132 FC-1) the control row holds the control + the unit adornment
     (R-F2: units live in the adornment slot, never in the label text).
     The former auto-fit grid def had zero consumers — the v1 corpus used
     .form-grid for multi-column field layout, which stays. */
  .mc-field-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
  }
  .mc-field-row > .mc-input,
  .mc-field-row > .mc-textarea,
  .mc-field-row > .mc-select {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
  }
  .mc-field-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--mc-space-3);
    font-size: var(--mc-type-body-sm);
    font-family: inherit;
    color: var(--mc-text-muted);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-strong);
    border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
    white-space: nowrap;
    user-select: none;
    flex: none;
  }
  .mc-field-help {
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal, 1.5);
  }

  /* ---- tier/limit lock (S132 FC-7: one primitive, three presentations) ----
     R-L1: containers adapt via the modifier; per-surface CSS beyond
     container fitting is banned (A-23). R-L2: neutral family ONLY — no
     danger hook exists; a lock is an offer, not a failure. The dashed
     boundary is the "soft offer" language; the counting state uses the
     solid field border (it is a normal, unlocked state). */
  .mc-tier-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-surface-sunken);
    border: 1px dashed var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text);
    min-width: 0;
  }
  .mc-tier-lock--panel {
    padding: var(--mc-space-5);
    border-radius: var(--mc-radius-md);
  }
  .mc-tier-lock--inline {
    align-items: center;
    padding: var(--mc-space-2) var(--mc-space-3);
  }
  .mc-tier-lock-counting {
    border-style: solid;
    border-color: var(--mc-border);
    background: var(--mc-surface);
  }
  .mc-tier-lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--mc-radius-xs);
    color: var(--mc-text-muted);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
  }
  .mc-tier-lock-counting .mc-tier-lock-icon {
    color: var(--mc-primary);
  }
  .mc-tier-lock-body {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    flex: 1 1 auto;
    min-width: 0;
  }
  .mc-tier-lock-title {
    margin: 0;
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
  }
  .mc-tier-lock-reason {
    margin: 0;
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal, 1.5);
  }
  .mc-tier-lock-note {
    margin: 0;
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal, 1.5);
  }
  .mc-tier-lock-count {
    margin: 0;
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .mc-tier-lock-cta {
    flex: none;
    align-self: flex-start;
    white-space: nowrap;
  }
  .mc-tier-lock--inline .mc-tier-lock-cta {
    align-self: center;
  }
  /* cap meter: progress semantics (R-L2) — the brand primary track fill,
     never the danger family; tabular numbers keep it stable while used
     ticks up. Server-rendered width from the payload (R-L3). */
  .mc-tier-lock-meter {
    flex: 0 1 96px;
    min-width: 48px;
    align-self: center;
    height: 6px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    overflow: hidden;
  }
  .mc-tier-lock-meter-fill {
    display: block;
    height: 100%;
    background: var(--mc-primary);
    border-radius: var(--mc-radius-pill);
    transition: width var(--mc-dur-normal, 200ms) var(--mc-ease, ease);
  }

  /* (S132 FC-2) bridge-hosted icons in inline text flow: the 16px
     registry SVG optically centers against the surrounding line. Flex
     hosts (toast icon, .mc-tier-lock-icon) are unaffected. */
  [data-icon-key] svg {
    vertical-align: -0.2em;
  }

  /* ---- text controls ---- */
  .mc-input,
  .mc-textarea,
  .mc-select {
    width: 100%;
    height: var(--mc-control-height);
    padding: 0 var(--mc-space-3);
    font-size: var(--mc-type-body-sm);
    font-family: inherit;
    color: var(--mc-text);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    box-shadow: var(--mc-shadow-1);
    transition: border-color var(--mc-dur-fast) var(--mc-ease), box-shadow var(--mc-dur-fast) var(--mc-ease);
    appearance: none;
  }
  .mc-textarea {
    height: auto;
    min-height: 96px;
    padding: var(--mc-space-2) var(--mc-space-3);
    line-height: var(--mc-leading-normal);
    resize: vertical;
  }
  .mc-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--mc-space-3) center;
    padding-right: var(--mc-space-8);
    cursor: pointer;
  }

  .mc-input:hover, .mc-textarea:hover, .mc-select:hover { border-color: var(--mc-border-hover); }
  .mc-input:focus, .mc-textarea:focus, .mc-select:focus {
    outline: none;
    border-color: var(--mc-border-focus);
    box-shadow: var(--mc-focus-ring);
  }
  .mc-input::placeholder, .mc-textarea::placeholder { color: var(--mc-text-muted); }
  .mc-input:disabled, .mc-textarea:disabled, .mc-select:disabled {
    background: var(--mc-surface-sunken);
    color: var(--mc-text-muted);
    cursor: not-allowed;
    border-color: var(--mc-border);
  }
  .mc-input[readonly] { background: var(--mc-surface-sunken); }

  /* sizes */
  .mc-input-sm, .mc-select-sm { height: var(--mc-control-height-sm); font-size: var(--mc-type-caption); }
  .mc-input-lg, .mc-select-lg { height: var(--mc-control-height-lg); font-size: var(--mc-type-body); }

  /* input with leading/trailing affordances */
  .mc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .mc-input-wrap .mc-input { padding-left: var(--mc-space-9); }
  .mc-input-wrap > .mc-input-affix {
    position: absolute;
    left: var(--mc-space-3);
    display: inline-flex;
    color: var(--mc-text-muted);
    pointer-events: none;
  }
  .mc-input-wrap > .mc-input-affix svg { width: 1rem; height: 1rem; }
  .mc-input-wrap .mc-input-trail {
    position: absolute;
    right: var(--mc-space-1);
    display: inline-flex;
  }
  .mc-input-wrap .mc-input-trail .mc-icon-btn { width: 2.25rem; height: 2.25rem; }

  /* ---- validation states (never color alone: icon + text + border) ---- */
  .mc-field[data-state="invalid"] .mc-input,
  .mc-field[data-state="invalid"] .mc-textarea,
  .mc-field[data-state="invalid"] .mc-select,
  .mc-input[aria-invalid="true"],
  .mc-textarea[aria-invalid="true"],
  .mc-select[aria-invalid="true"] {
    border-color: var(--mc-danger);
    box-shadow: none;
  }
  .mc-field[data-state="invalid"] .mc-input:focus,
  .mc-input[aria-invalid="true"]:focus {
    border-color: var(--mc-danger);
    box-shadow: var(--mc-focus-ring-danger);
  }
  .mc-field[data-state="valid"] .mc-input { border-color: var(--mc-success); }

  .mc-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-1);
    font-size: var(--mc-type-caption);
    color: var(--mc-danger-subtle-text);
    line-height: var(--mc-leading-normal);
  }
  .mc-field-error svg { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 2px; }

  .mc-field-hint {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal);
  }

  /* ---- checkbox + radio ---- */
  .mc-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    cursor: pointer;
    min-height: var(--mc-touch-target);
    padding: var(--mc-space-1) 0;
  }
  .mc-check input {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    margin: 2px 0 0;
    border: 1.5px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-xs);
    background: var(--mc-surface);
    transition: background-color var(--mc-dur-fast) var(--mc-ease), border-color var(--mc-dur-fast) var(--mc-ease);
    cursor: inherit;
  }
  .mc-check input[type="radio"] { border-radius: 50%; }
  .mc-check:hover input { border-color: var(--mc-primary); }
  .mc-check input:checked {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
  }
  .mc-check input[type="radio"]:checked {
    background: var(--mc-surface);
    border: 6px solid var(--mc-primary);
  }
  .mc-check input:focus-visible {
    outline: none;
    box-shadow: var(--mc-focus-ring);
  }
  .mc-check input:disabled { opacity: 0.5; cursor: not-allowed; }
  .mc-check .mc-check-label {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-regular);
    color: var(--mc-text);
    line-height: var(--mc-leading-normal);
  }
  .mc-check .mc-check-label a { color: var(--mc-link); }

  /* ---- switch ---- */
  .mc-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-3);
    cursor: pointer;
    min-height: var(--mc-touch-target);
  }
  .mc-switch input {
    appearance: none;
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    flex: none;
    margin: 0;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-border-strong);
    transition: background-color var(--mc-dur-normal) var(--mc-ease);
    cursor: inherit;
  }
  .mc-switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: var(--mc-shadow-1);
    transition: transform var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-switch input:checked { background: var(--mc-primary); }
  .mc-switch input:checked::after { transform: translateX(1rem); }
  .mc-switch input:focus-visible {
    outline: none;
    box-shadow: var(--mc-focus-ring);
  }
  .mc-switch input:disabled { opacity: 0.5; cursor: not-allowed; }
  .mc-switch .mc-switch-label {
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text);
  }
  .mc-switch .mc-switch-desc {
    display: block;
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    font-weight: var(--mc-weight-regular);
  }

  /* ---- choice cards (radio group presented as cards) ---- */
  .mc-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    padding: var(--mc-space-4);
    border: 1.5px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    cursor: pointer;
    transition: border-color var(--mc-dur-fast) var(--mc-ease), background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-choice:hover { border-color: var(--mc-border-strong); }
  .mc-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .mc-choice input:focus-visible ~ .mc-choice-body {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: 3px;
  }
  .mc-choice[aria-checked="true"],
  .mc-choice.selected {
    border-color: var(--mc-primary);
    background: var(--mc-primary-subtle);
  }
  .mc-choice-title {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
  }
  .mc-choice-desc {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal);
  }

  /* ---- segmented control / unit toggle ---- */
  .mc-segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--mc-surface-sunken);
    border-radius: var(--mc-radius-sm);
  }
  .mc-segmented button {
    padding: var(--mc-space-1) var(--mc-space-4);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-muted);
    border-radius: calc(var(--mc-radius-sm) - 2px);
    transition: color var(--mc-dur-fast) var(--mc-ease), background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-segmented button:hover { color: var(--mc-text); }
  .mc-segmented button[aria-pressed="true"],
  .mc-segmented button.active {
    background: var(--mc-surface);
    color: var(--mc-text);
    box-shadow: var(--mc-shadow-1);
  }
  .mc-segmented button:focus-visible {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: -2px;
  }

  /* ---- chips (selectable filters) ---- */
  .mc-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-2);
  }
  .mc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-pill);
    cursor: pointer;
    transition: all var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-chip:hover { border-color: var(--mc-primary); color: var(--mc-primary); }
  .mc-chip:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-chip[aria-pressed="true"],
  .mc-chip.active {
    background: var(--mc-primary-subtle);
    border-color: var(--mc-primary);
    color: var(--mc-primary-subtle-text);
  }
  .mc-chip svg { width: 0.875rem; height: 0.875rem; }
}


/* ==== source: components/surface.css (layer components) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — COMPONENTS: CARD / BADGE / ALERT / TABLE
   Surfaces: level 0 canvas, level 1 bordered surface, level 2 popover,
   level 3 modal. Ordinary cards = border + restrained shadow (director §8).
   ========================================================================== */
@layer components {
  /* ---- surface / card ---- */
  .mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-1);
  }
  .mc-card-pad { padding: var(--mc-space-6); }
  .mc-card-hover {
    transition: border-color var(--mc-dur-fast) var(--mc-ease), box-shadow var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-card-hover:hover {
    border-color: var(--mc-border-strong);
    box-shadow: var(--mc-shadow-2);
  }
  .mc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4) var(--mc-space-6);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-card-head .mc-card-title {
    font-size: var(--mc-type-body);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
  }
  .mc-card-head .mc-card-title svg { width: 1.125rem; height: 1.125rem; color: var(--mc-text-muted); }
  .mc-card-head .mc-card-action {
    font-size: var(--mc-type-caption);
    color: var(--mc-link);
    text-decoration: none;
  }
  .mc-card-head .mc-card-action:hover { text-decoration: underline; }
  .mc-card-body { padding: var(--mc-space-6); }
  .mc-card-foot {
    padding: var(--mc-space-4) var(--mc-space-6);
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface);
    border-radius: 0 0 var(--mc-radius-md) var(--mc-radius-md);
  }

  /* raised (popovers, floating toolbars) */
  .mc-card-raised {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-2);
  }

  /* ---- badge / status ---- */
  .mc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    padding: 0.15rem 0.55rem;
    font-size: var(--mc-type-micro);
    font-weight: var(--mc-weight-medium);
    line-height: 1.6;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    color: var(--mc-text-secondary);
    white-space: nowrap;
  }
  .mc-badge svg { width: 0.75rem; height: 0.75rem; }

  .mc-badge-primary { background: var(--mc-primary-subtle); color: var(--mc-primary-subtle-text); }
  .mc-badge-success { background: var(--mc-success-subtle); color: var(--mc-success-subtle-text); }
  .mc-badge-warning { background: var(--mc-warning-subtle); color: var(--mc-warning-subtle-text); }
  .mc-badge-danger  { background: var(--mc-danger-subtle); color: var(--mc-danger-subtle-text); }
  .mc-badge-info    { background: var(--mc-info-subtle); color: var(--mc-info-subtle-text); }

  /* dot + text status (never color alone) */
  .mc-status {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
  }
  .mc-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mc-text-muted);
    flex: none;
  }
  .mc-status-success::before { background: var(--mc-success-strong); }
  .mc-status-warning::before { background: var(--mc-warning-strong); }
  .mc-status-danger::before  { background: var(--mc-danger-strong); }
  .mc-status-info::before    { background: var(--mc-info); }

  /* ---- alert ---- */
  .mc-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    font-size: var(--mc-type-body-sm);
    line-height: var(--mc-leading-normal);
    color: var(--mc-text);
  }
  .mc-alert > svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    margin-top: 1px;
  }
  .mc-alert .mc-alert-title {
    font-weight: var(--mc-weight-semibold);
    display: block;
    margin-bottom: var(--mc-space-1);
  }
  .mc-alert .mc-alert-actions {
    display: flex;
    gap: var(--mc-space-3);
    margin-top: var(--mc-space-3);
  }

  .mc-alert-info {
    background: var(--mc-info-subtle);
    border-color: color-mix(in srgb, var(--mc-info) 30%, transparent);
    color: var(--mc-text);
  }
  .mc-alert-info > svg { color: var(--mc-info); }

  .mc-alert-success {
    background: var(--mc-success-subtle);
    border-color: color-mix(in srgb, var(--mc-success) 30%, transparent);
  }
  .mc-alert-success > svg { color: var(--mc-success); }

  .mc-alert-warning {
    background: var(--mc-warning-subtle);
    border-color: color-mix(in srgb, var(--mc-warning) 35%, transparent);
  }
  .mc-alert-warning > svg { color: var(--mc-warning); }

  .mc-alert-danger {
    background: var(--mc-danger-subtle);
    border-color: color-mix(in srgb, var(--mc-danger) 30%, transparent);
  }
  .mc-alert-danger > svg { color: var(--mc-danger); }

  /* ---- data table ---- */
  .mc-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    box-shadow: var(--mc-shadow-1);
    -webkit-overflow-scrolling: touch;
  }
  .mc-table {
    width: 100%;
    font-size: var(--mc-type-body-sm);
    border-collapse: collapse;
    white-space: nowrap;
  }
  .mc-table th {
    position: sticky;
    top: 0;
    z-index: var(--mc-z-base);
    text-align: left;
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-text-muted);
    background: var(--mc-surface-sunken);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-table td {
    padding: var(--mc-space-3) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
    color: var(--mc-text);
    vertical-align: middle;
  }
  .mc-table tbody tr:last-child td { border-bottom: 0; }
  .mc-table tbody tr {
    transition: background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-table tbody tr:hover { background: var(--mc-primary-subtle); }
  .mc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .mc-table .muted { color: var(--mc-text-muted); }
  .mc-table .strong { font-weight: var(--mc-weight-semibold); }
  .mc-table td.mc-cell-actions {
    text-align: right;
    white-space: nowrap;
  }
  .mc-table td.mc-cell-actions .mc-icon-btn { width: 2rem; height: 2rem; }
  .mc-table .mc-table-empty {
    text-align: center;
    padding: var(--mc-space-12) var(--mc-space-6);
    color: var(--mc-text-muted);
    white-space: normal;
  }

  /* ---- empty state ---- */
  .mc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-12) var(--mc-space-6);
  }
  .mc-empty > svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--mc-text-muted);
    opacity: 0.7;
  }
  .mc-empty .mc-empty-title {
    font-size: var(--mc-type-body);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
  }
  .mc-empty .mc-empty-desc {
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    max-width: 40ch;
    line-height: var(--mc-leading-normal);
  }

  /* ---- skeleton ---- */
  .mc-skeleton {
    border-radius: var(--mc-radius-xs);
    background: linear-gradient(
      90deg,
      var(--mc-surface-sunken) 25%,
      color-mix(in srgb, var(--mc-surface-sunken) 60%, var(--mc-surface)) 50%,
      var(--mc-surface-sunken) 75%
    );
    background-size: 200% 100%;
    animation: mc-shimmer 1.4s ease-in-out infinite;
  }
  .mc-skeleton-text { height: 0.875rem; margin-bottom: var(--mc-space-2); }
  .mc-skeleton-text:last-child { width: 60%; margin-bottom: 0; }
  .mc-skeleton-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
  @keyframes mc-shimmer {
    to { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-skeleton { animation: none; }
  }

  /* ---- pagination ---- */
  .mc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-1);
    padding: var(--mc-space-4);
  }
  .mc-pagination a,
  .mc-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--mc-space-2);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    border-radius: var(--mc-radius-xs);
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-pagination a:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-pagination a:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-pagination [aria-current="page"] {
    background: var(--mc-primary);
    color: var(--mc-text-on-primary);
  }
  .mc-pagination .mc-page-gap { color: var(--mc-text-muted); }

  /* ---- tabs ---- */
  .mc-tabs {
    display: flex;
    gap: var(--mc-space-1);
    border-bottom: 1px solid var(--mc-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mc-tabs::-webkit-scrollbar { display: none; }
  .mc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-3) var(--mc-space-4);
    margin-bottom: -1px;
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--mc-dur-fast) var(--mc-ease), border-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-tab:hover { color: var(--mc-text); }
  .mc-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 -2px 0 0 var(--mc-border-focus);
  }
  .mc-tab[aria-selected="true"],
  .mc-tab.active {
    color: var(--mc-primary);
    border-bottom-color: var(--mc-primary);
  }
  .mc-tab svg { width: 1rem; height: 1rem; }
  .mc-tab .mc-tab-count {
    padding: 0 0.4rem;
    font-size: var(--mc-type-micro);
    background: var(--mc-surface-sunken);
    border-radius: var(--mc-radius-pill);
    color: var(--mc-text-muted);
  }

  /* ---- dialog / drawer ---- */
  .mc-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mc-z-overlay);
    background: var(--mc-surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mc-space-4);
    animation: mc-fade-in var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-dialog {
    width: min(480px, 100%);
    max-height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-3);
    animation: mc-scale-in var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-dialog-lg { width: min(720px, 100%); }
  .mc-dialog-xl { width: min(960px, 100%); }
  .mc-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-4);
    padding: var(--mc-space-5) var(--mc-space-6);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-dialog-head .mc-dialog-title {
    font-size: var(--mc-type-body-lg);
    font-weight: var(--mc-weight-semibold);
  }
  .mc-dialog-head .mc-dialog-sub {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    margin-top: 2px;
  }
  .mc-dialog-body {
    padding: var(--mc-space-6);
    overflow-y: auto;
    font-size: var(--mc-type-body-sm);
    line-height: var(--mc-leading-normal);
  }
  .mc-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4) var(--mc-space-6);
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface);
    border-radius: 0 0 var(--mc-radius-lg) var(--mc-radius-lg);
  }

  .mc-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mc-z-overlay);
    background: var(--mc-surface-overlay);
    animation: mc-fade-in var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--mc-z-modal);
    width: min(480px, 94vw);
    display: flex;
    flex-direction: column;
    background: var(--mc-surface-raised);
    border-left: 1px solid var(--mc-border);
    box-shadow: var(--mc-shadow-3);
    animation: mc-slide-in-left var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-drawer-lg { width: min(640px, 96vw); }

  @keyframes mc-fade-in { from { opacity: 0; } }
  @keyframes mc-scale-in { from { opacity: 0; transform: scale(0.97) translateY(4px); } }
  @keyframes mc-slide-in-left { from { transform: translateX(24px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .mc-dialog-overlay, .mc-dialog, .mc-drawer-overlay, .mc-drawer { animation: none; }
  }
}


/* ==== source: components/notif.css (layer components) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — COMPONENTS: NOTIFICATION (the personal bell)
   FC-8.2 lane: the bell + panel presentation that lived in the module's
   injected <style id="notif-css"> is retired corpus-side. Scoped through
   .notif-bell / .notif-dropdown (the W1 §7.3 specificity lesson: never
   bare element selectors inside an injected-region root). Tokens only —
   zero raw z-index (the kernel resolver owns the tier), zero dark-specific
   rules, zero danger-family hooks (an unread count is attention, not error).
   ========================================================================== */
@layer components {
  .notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--mc-radius-sm);
    background: transparent;
    color: var(--mc-text-muted);
    cursor: pointer;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .notif-bell:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .notif-bell:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .notif-bell-icon { display: inline-flex; width: 1.125rem; height: 1.125rem; }
  .notif-bell-icon svg { width: 100%; height: 100%; }

  .notif-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-primary);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
  }
  .notif-badge[hidden] { display: none; }

  .notif-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--mc-space-2);
    width: 22.5rem;
    max-width: calc(100vw - 2rem);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-2);
    overflow: hidden;
    /* the ladder is the only z authority (A-06); the kernel registers
       this panel as a menu on the dropdown tier */
    z-index: var(--mc-z-dropdown);
  }
  .notif-dropdown[hidden] { display: none; }

  /* the rail foot is the bell's pinned home (workspace shell): the bell
     sits near the viewport bottom AND near the screen's left edge there,
     so the panel opens UPWARD and extends RIGHTWARD from the bell */
  .mc-rail-foot .notif-bell .notif-dropdown {
    top: auto;
    bottom: calc(100% + var(--mc-space-2));
    left: 0;
    right: auto;
  }

  /* the drawer band (<1024): the bell lives in the sliding rail header —
     a transformed ancestor is the containing block for fixed descendants,
     so the panel anchors as an honest bottom sheet inside the drawer */
  @media (max-width: 1023.5px) {
    .mc-rail-foot .notif-bell .notif-dropdown {
      position: fixed;
      top: auto;
      left: var(--mc-space-3);
      right: var(--mc-space-3);
      bottom: var(--mc-space-3);
      width: auto;
      max-width: none;
    }
  }

  .notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-surface-sunken);
  }
  .notif-panel-title { font-size: 0.875rem; font-weight: 700; color: var(--mc-text); }
  .notif-mark-all {
    background: none;
    border: none;
    padding: 0;
    color: var(--mc-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
  }
  .notif-mark-all:hover { text-decoration: underline; }
  .notif-mark-all:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); border-radius: var(--mc-radius-sm); }

  .notif-panel-body { max-height: 25rem; overflow-y: auto; }

  .notif-list { list-style: none; margin: 0; padding: 0; }
  .notif-item-link { display: block; text-decoration: none; color: inherit; }
  .notif-row { border-bottom: 1px solid var(--mc-border); }
  .notif-list li:last-child { border-bottom: none; }
  .notif-item-link:hover .notif-item { background: var(--mc-surface-sunken); }
  .notif-item-link:focus-visible { outline: none; box-shadow: inset var(--mc-focus-ring); }

  .notif-item {
    display: flex;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    transition: background-color var(--mc-dur-fast) var(--mc-ease);
    /* (the W1 §7.3 lesson) the rail foot centers its controls — the rows
       re-assert the reading grammar explicitly */
    text-align: left;
  }
  .notif-icon {
    flex: none;
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--mc-text-muted);
  }
  .notif-icon svg { width: 100%; height: 100%; }
  .notif-content { flex: 1; min-width: 0; }
  .notif-title { font-size: 0.8125rem; font-weight: 600; color: var(--mc-text); margin-bottom: 0.125rem; }
  .notif-desc { font-size: 0.75rem; color: var(--mc-text-muted); line-height: 1.4; }
  .notif-time { font-size: 0.6875rem; color: var(--mc-text-muted); margin-top: 0.25rem; }

  /* (FC-8.2) unread = neutral emphasis + dot marker; read rows render muted. */
  .notif-row[data-unread] .notif-title { color: var(--mc-text); font-weight: 700; }
  .notif-row:not([data-unread]) .notif-item { opacity: 0.72; }
  .notif-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.375rem;
    border-radius: 50%;
    background: var(--mc-primary);
    opacity: 0;
  }
  .notif-row[data-unread] .notif-dot { opacity: 1; }

  .notif-empty { padding: var(--mc-space-8) var(--mc-space-4); text-align: center; }
  .notif-empty-line { font-size: 0.8125rem; color: var(--mc-text-muted); margin-bottom: var(--mc-space-2); }
  .notif-retry {
    background: none;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    padding: 0.25rem 0.75rem;
    color: var(--mc-text);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
  }
  .notif-retry:hover { background: var(--mc-surface-sunken); }
  .notif-retry:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }

  .notif-skel { padding: var(--mc-space-3) var(--mc-space-4); border-bottom: 1px solid var(--mc-border); }
  .mc-skeleton-short { width: 40%; }
}


/* ==== source: components/content-surface.css (layer components) ==== */
/* ==========================================================================
   MACRITION UI SYSTEM v2 — components/content-surface
   (S133-N2) the content surface's v2 lane. The widget visual language
   stays in the proven legacy sheet (content-notifications.css, wrapped
   @layer legacy by the build); THIS file carries only what the
   presentation migration adds: bridge icon-host sizing for the hosts
   that replaced emoji glyphs, the kernel-dialog hidden-attr bridge for
   the daily popup, and the focus-visible affordances the K2 grammar
   requires. Minimal by contract — no restyling of the proven widgets.
   ========================================================================== */

@layer components {

  /* ---- the daily popup is a kernel dialog (K2-4) ---------------------- */
  /* The legacy overlay declares display:flex unconditionally (its own
     visibility contract used opacity/visibility); the kernel now owns
     open/close through the [hidden] attribute, so the lane restores the
     attribute's honest display:none against that legacy declaration. */
  .content-popup-overlay[hidden] {
    display: none;
  }

  /* (S133-N2 served-page lesson) the legacy transition includes
     `visibility`, and Chromium reports the computed value as hidden for
     the visible-ward transition's early frames — the kernel's open-time
     focus pass (a rAF, D-N4 rendered-state filter) reads hidden and
     filters every control, so the initial focus never lands. The lane
     transitions the opacity fade ONLY; visibility flips with the state
     change, which is also the honest semantics for a dialog. */
  .content-popup-overlay {
    transition: opacity .25s ease;
  }

  /* (S133-N2c served-page lesson, the overlay-check gate G2) the legacy
     `.content-popup-actions button, a { transition: .15s }` shorthand is
     `all`: when the composition flips the overlay's visibility (the
     opacity-only rule above), the inherited visibility change re-enters
     the action controls as a 150ms value transition of their own, and
     the kernel's open-time focus pass reads THAT early frame as hidden —
     the initial focus falls back to the container (a race the fixture
     battery won and the served public page lost). The dialog's action
     controls transition presentation properties only; visibility is the
     composition's binary state, never an animation. */
  .content-popup-actions button,
  .content-popup-actions a {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  }

  /* ---- icon hosts (FC-8.4): the registry SVG replaces the emoji glyph --
     The legacy rules size and paint the HOST BOXES (gradients, radii);
     these rules size the stroke glyph the bridge renders INTO the box.
     currentColor inherits the host's text color, so the glyph reads on
     the gradient chips the same way the emoji did. */
  .content-popup-icon svg,
  .content-banner-icon svg,
  .health-tip-icon svg,
  .water-tracker-mini-icon svg,
  .streak-flame svg {
    display: block;
  }

  .content-popup-icon {
    color: #fff;
  }
  .content-popup-icon svg {
    width: 26px;
    height: 26px;
  }

  .content-banner-icon {
    color: #fff;
  }
  .content-banner-icon svg {
    width: 20px;
    height: 20px;
  }

  .health-tip-icon svg {
    width: 18px;
    height: 18px;
  }

  .water-tracker-mini-icon {
    color: var(--mc-primary, #2563eb);
  }
  .water-tracker-mini-icon svg {
    width: 18px;
    height: 18px;
  }

  .streak-flame {
    color: var(--mc-muted, #6b7280);
  }
  .streak-flame.active {
    color: #f59e0b;
  }
  .streak-flame svg {
    width: 20px;
    height: 20px;
  }

  /* meta + CTA hosts: inline icons beside text */
  .content-popup-meta-icon svg,
  .content-popup-cta-icon svg,
  .content-banner-cta-icon svg,
  .bmi-quick-link-icon svg,
  .content-banner-close-icon svg {
    display: block;
    width: 14px;
    height: 14px;
  }

  .content-popup-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .content-popup-cta-icon,
  .content-banner-cta-icon,
  .bmi-quick-link-icon {
    display: inline-flex;
    align-items: center;
  }

  .content-banner-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }
  .content-banner-close-icon svg {
    width: 16px;
    height: 16px;
  }

  /* the unsafe-destination degradation (R-N12): same voice, no affordance */
  .content-banner-cta[data-destination-unsafe],
  .bmi-quick-link[data-destination-unsafe] {
    cursor: default;
  }
  .btn-primary[data-destination-unsafe] {
    pointer-events: none;
  }

  /* ---- K2 focus affordances (the dialog carries the theme ring) ------- */
  .content-popup .btn-primary:focus-visible,
  .content-popup .btn-secondary:focus-visible,
  .content-banner-close:focus-visible,
  .water-tracker-mini-btn:focus-visible,
  .bmi-quick-link:focus-visible,
  .content-banner-cta:focus-visible {
    outline: none;
    box-shadow: var(--mc-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.35));
  }
}


/* ==== source: components/presenter.css (layer components) ==== */
/* ============================================================================
   FC-5.1 recommendation-provenance presenter (S133-W5) — components lane.

   The four-state presentation vocabulary (stored / personalized / generic /
   unavailable) for every derived-metric cell, per
   docs/coordination/design/S132-RECOMMENDATION-VOCABULARY-FC51.md:

   - R-P3 visual firewall: the generic state is distinguishable in GRAYSCALE
     (the honesty pill carries text, never color alone) and its number sits
     at reduced emphasis (--text-muted); it can never share the
     personalized label text.
   - FC-3 boundary: the honesty pill is the NEUTRAL family — not warning,
     not danger.
   - Wall row A-24 binds these classes; renaming or dropping them from this
     lane is a wall failure by construction.
   ========================================================================== */

@layer components {

  /* --- shared presenter elements ---------------------------------------- */

  /* The personalized basis line: the possessive is earned by naming the
     basis in the same breath (R-P2). Secondary-text grade per the contract. */
  .mc-pres-basis {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 3px;
  }

  /* The generic-state honesty pill: neutral family, text-carried (WCAG
     1.4.1 — never color alone), links to the owning setup surface. */
  .mc-pres-pill {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .mc-pres-pill a,
  .mc-pres-pill a:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-3, rgba(15, 23, 42, 0.06));
    color: var(--text-2, var(--text-muted));
    border: 1px solid var(--border);
    text-decoration: none;
  }
  .mc-pres-pill a:hover,
  .mc-pres-pill a:focus-visible {
    color: var(--text);
    border-color: var(--text-muted);
  }
  .mc-pres-pill-sm a,
  .mc-pres-pill-sm a:visited {
    padding: 2px 7px;
    font-size: 10px;
  }

  /* The unavailable state's single setup CTA (compact inline form). */
  .mc-pres-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color:var(--primary-text);
    text-decoration: none;
  }
  .mc-pres-cta:hover,
  .mc-pres-cta:focus-visible {
    text-decoration: underline;
  }

  /* The unavailable not-set-yet line (compact cells without a CTA slot). */
  .mc-pres-unset {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 3px;
  }

  /* The personalized compact marker (quick-stat / AI-card grade). */
  .mc-pres-marker {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color:var(--primary-text);
  }

  /* --- dashboard: Today's Overview calorie card -------------------------- */

  /* stored: full emphasis (the possessive state) — no adornment, the
     existing progress grammar stands. */
  .today-cal[data-presenter-state="stored"] .remain {
    color: var(--text);
  }

  /* personalized: the offer renders at full emphasis, the basis names
     itself below. */
  .today-cal[data-presenter-state="personalized"] .remain {
    color: var(--text);
    font-weight: 700;
  }

  /* generic: the typical value is SUBORDINATED — muted number + pill
     (R-P3: grayscale-distinguishable, never the personalized voice). */
  .today-cal[data-presenter-state="generic"] .remain {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
  }
  .today-cal[data-presenter-state="generic"] .remain,
  .today-cal[data-presenter-state="unavailable"] .remain {
    line-height: 1.4;
  }

  /* unavailable: no number exists in any form; the not-set-yet line plus
     its single CTA carry the cell. */
  .today-cal[data-presenter-state="unavailable"] .remain {
    color: var(--text-muted);
  }

  /* --- dashboard: quick-stat calorie cell -------------------------------- */

  .quick-stat[data-presenter-state="generic"] .quick-stat-value {
    color: var(--text-muted);
  }
  .quick-stat[data-presenter-state="unavailable"] .quick-stat-value {
    color: var(--text-muted);
  }

  /* --- AI assistant: plan-card target line (R-P5) ------------------------ */

  .mc-pres-target {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text);
  }
  .mc-pres-target.mc-pres-muted {
    color: var(--text-muted);
  }

  /* --- goals Step-4 result panel ----------------------------------------- */

  /* The personalized basis line inside the result panel. */
  .calc-result .cr-basis {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 4px 0 2px;
  }

  /* generic: the typical value subordinated; the pill renders under it. */
  .calc-result[data-presenter-state="generic"] .cr-value {
    color: var(--text-muted);
    font-size: 26px;
  }
  .calc-result[data-presenter-state="generic"] .mc-pres-pill {
    margin: 6px 0 2px;
  }

  /* unavailable: dashes stay muted; the eyebrow carries the honest label. */
  .calc-result[data-presenter-state="unavailable"] .cr-value {
    color: var(--text-muted);
  }

  /* Dark parity through the token path only — no raw colors here, the
     tokens above carry both themes (D-013 captures both). */
}


/* ==== source: patterns/nutrition.css (layer patterns) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — PATTERNS: NUTRITION
   Domain patterns: daily summary, macro progress, nutrient ring, meal
   section, food row, hydration, metric, trend. Data is the centerpiece —
   color encodes the nutrient (energy=orange, protein=blue, carbs=amber,
   fat=violet, water=cyan), never decoration.
   ========================================================================== */
@layer patterns {
  /* ---- page header pattern (every member/admin surface) ---- */
  .mc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mc-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--mc-space-6);
  }
  .mc-page-header .mc-page-title {
    font-size: var(--mc-type-h3);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-tight);
  }
  .mc-page-header .mc-page-sub {
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    margin-top: var(--mc-space-1);
  }
  .mc-page-header .mc-page-actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    flex-wrap: wrap;
  }

  /* ---- stat / metric ---- */
  .mc-stat {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    padding: var(--mc-space-4) var(--mc-space-5);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-1);
    min-width: 0;
  }
  .mc-stat .mc-stat-label {
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-text-muted);
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
  }
  .mc-stat .mc-stat-label svg { width: 0.875rem; height: 0.875rem; }
  .mc-stat .mc-stat-value {
    font-size: var(--mc-type-h3);
    font-weight: var(--mc-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--mc-text);
  }
  .mc-stat .mc-stat-unit {
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-regular);
    color: var(--mc-text-muted);
    margin-left: var(--mc-space-1);
  }
  .mc-stat .mc-stat-meta {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
  }
  .mc-stat .mc-stat-trend { font-variant-numeric: tabular-nums; }
  .mc-stat .mc-stat-trend.up   { color: var(--mc-success); }
  .mc-stat .mc-stat-trend.down { color: var(--mc-danger); }

  .mc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mc-space-4);
  }

  /* nutrient-tinted stats — reserved for the nutrient itself */
  .mc-stat[data-nutrient="energy"] .mc-stat-value { color: var(--mc-nutrient-energy); }
  .mc-stat[data-nutrient="protein"] .mc-stat-value { color: var(--mc-nutrient-protein); }
  .mc-stat[data-nutrient="carbs"]   .mc-stat-value { color: var(--mc-nutrient-carbs); }
  .mc-stat[data-nutrient="fat"]     .mc-stat-value { color: var(--mc-nutrient-fat); }
  .mc-stat[data-nutrient="water"]   .mc-stat-value { color: var(--mc-nutrient-water); }

  /* ---- progress bar (generic + nutrient) ---- */
  .mc-progress {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    min-width: 0;
  }
  .mc-progress .mc-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--mc-type-caption);
    color: var(--mc-text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .mc-progress .mc-progress-track {
    height: 0.5rem;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    overflow: hidden;
  }
  .mc-progress .mc-progress-fill {
    height: 100%;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-primary);
    transition: width var(--mc-dur-slow) var(--mc-ease);
    min-width: 0;
  }
  .mc-progress[data-nutrient="energy"] .mc-progress-fill { background: var(--mc-nutrient-energy); }
  .mc-progress[data-nutrient="protein"] .mc-progress-fill { background: var(--mc-nutrient-protein); }
  .mc-progress[data-nutrient="carbs"]   .mc-progress-fill { background: var(--mc-nutrient-carbs); }
  .mc-progress[data-nutrient="fat"]     .mc-progress-fill { background: var(--mc-nutrient-fat); }
  .mc-progress[data-nutrient="water"]   .mc-progress-fill { background: var(--mc-nutrient-water); }
  .mc-progress[data-nutrient="fiber"]   .mc-progress-fill { background: var(--mc-nutrient-fiber); }

  /* over-goal state — communicates attention, not decoration */
  .mc-progress.is-over .mc-progress-fill { background: var(--mc-danger); }
  .mc-progress.is-over .mc-progress-row .mc-progress-now { color: var(--mc-danger-subtle-text); font-weight: var(--mc-weight-semibold); }

  /* ---- progress ring (the daily summary centerpiece) ---- */
  .mc-ring {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    flex: none;
  }
  .mc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .mc-ring .mc-ring-track { fill: none; stroke: var(--mc-surface-sunken); }
  .mc-ring .mc-ring-value {
    fill: none;
    stroke: var(--mc-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--mc-dur-slow) var(--mc-ease);
  }
  .mc-ring[data-nutrient="energy"] .mc-ring-value { stroke: var(--mc-nutrient-energy); }
  .mc-ring[data-nutrient="water"] .mc-ring-value { stroke: var(--mc-nutrient-water); }
  .mc-ring .mc-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
  }
  .mc-ring .mc-ring-value-text {
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
    font-variant-numeric: tabular-nums;
  }
  .mc-ring .mc-ring-label {
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    margin-top: 2px;
  }
  .mc-ring-sm { width: 3.5rem; height: 3.5rem; }
  .mc-ring-sm .mc-ring-value-text { font-size: var(--mc-type-caption); }
  .mc-ring-sm .mc-ring-label { display: none; }
  .mc-ring-lg { width: 10.5rem; height: 10.5rem; }
  .mc-ring-lg .mc-ring-value-text { font-size: var(--mc-type-h3); }

  /* ---- macro trio row ---- */
  .mc-macros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mc-space-3);
  }
  .mc-macro {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    min-width: 0;
  }
  .mc-macro .mc-macro-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
  }
  .mc-macro .mc-macro-now { font-variant-numeric: tabular-nums; }
  .mc-macro .mc-macro-goal { color: var(--mc-text-muted); font-weight: var(--mc-weight-regular); }
  .mc-macro[data-nutrient="protein"] .mc-macro-head .mc-macro-now { color: var(--mc-nutrient-protein); }
  .mc-macro[data-nutrient="carbs"]   .mc-macro-head .mc-macro-now { color: var(--mc-nutrient-carbs); }
  .mc-macro[data-nutrient="fat"]     .mc-macro-head .mc-macro-now { color: var(--mc-nutrient-fat); }

  /* ---- meal section (diary + planner) ---- */
  .mc-meal-section {
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    overflow: hidden;
  }
  .mc-meal-head {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-surface-sunken);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-meal-head .mc-meal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    color: var(--mc-text-secondary);
    flex: none;
  }
  .mc-meal-head .mc-meal-icon svg { width: 1.125rem; height: 1.125rem; }
  .mc-meal-head .mc-meal-name {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
  }
  .mc-meal-head .mc-meal-totals {
    margin-left: auto;
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: var(--mc-space-3);
    align-items: center;
  }
  .mc-meal-head .mc-meal-add {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-primary);
    text-decoration: none;
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-xs);
  }
  .mc-meal-head .mc-meal-add:hover { background: var(--mc-primary-subtle); }
  .mc-meal-head .mc-meal-add svg { width: 0.875rem; height: 0.875rem; }

  /* ---- food row ---- */
  .mc-food-row {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
    transition: background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-food-row:last-child { border-bottom: 0; }
  .mc-food-row:hover { background: var(--mc-primary-subtle); }
  .mc-food-row .mc-food-name {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mc-food-row .mc-food-serving {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mc-food-row .mc-food-kcal {
    margin-left: auto;
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--mc-nutrient-energy);
    flex: none;
  }
  .mc-food-row .mc-food-macros {
    display: flex;
    gap: var(--mc-space-2);
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
  }
  .mc-food-row .mc-food-actions {
    display: flex;
    gap: var(--mc-space-1);
    flex: none;
    margin-left: var(--mc-space-2);
  }
  .mc-food-row .mc-food-actions .mc-icon-btn { width: 2rem; height: 2rem; }

  /* ---- hydration ---- */
  .mc-hydration {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-3);
  }
  .mc-hydration .mc-hydration-glasses {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-2);
  }
  .mc-water-glass {
    width: 1.5rem;
    height: 2rem;
    border: 1.5px solid var(--mc-nutrient-water);
    border-radius: 0 0 var(--mc-radius-xs) var(--mc-radius-xs);
    border-top-width: 1px;
    background: var(--mc-surface);
    position: relative;
    cursor: pointer;
    transition: background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-water-glass::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    top: 100%;
    background: var(--mc-nutrient-water);
    border-radius: 0 0 2px 2px;
    transition: top var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-water-glass.filled::before { top: 2px; }
  .mc-water-glass:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }

  /* ---- insight (the "what should I do next" unit) ---- */
  .mc-insight {
    display: flex;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    border: 1px solid var(--mc-border);
    border-left: 3px solid var(--mc-primary);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
  }
  .mc-insight[data-tone="success"] { border-left-color: var(--mc-success); }
  .mc-insight[data-tone="warning"] { border-left-color: var(--mc-warning); }
  .mc-insight[data-tone="energy"]  { border-left-color: var(--mc-nutrient-energy); }
  .mc-insight .mc-insight-icon {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-primary-subtle);
    color: var(--mc-primary);
  }
  .mc-insight[data-tone="success"] .mc-insight-icon { background: var(--mc-success-subtle); color: var(--mc-success); }
  .mc-insight[data-tone="warning"] .mc-insight-icon { background: var(--mc-warning-subtle); color: var(--mc-warning); }
  .mc-insight .mc-insight-icon svg { width: 1rem; height: 1rem; }
  .mc-insight .mc-insight-body { min-width: 0; }
  .mc-insight .mc-insight-text {
    font-size: var(--mc-type-body-sm);
    line-height: var(--mc-leading-normal);
    color: var(--mc-text);
  }
  .mc-insight .mc-insight-meta {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    margin-top: var(--mc-space-1);
  }

  /* ---- trend sparkline ---- */
  .mc-trend {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
  }
  .mc-trend svg { width: 100%; height: 3rem; }
  .mc-trend .mc-trend-line {
    fill: none;
    stroke: var(--mc-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mc-trend .mc-trend-area {
    fill: var(--mc-primary-subtle);
    stroke: none;
  }

  /* ---- goal progress summary ---- */
  .mc-goal-progress {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-4);
  }
  .mc-goal-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--mc-space-3);
  }
  .mc-goal-item .mc-goal-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface-sunken);
    color: var(--mc-text-secondary);
  }
  .mc-goal-item .mc-goal-icon svg { width: 1rem; height: 1rem; }
  .mc-goal-item .mc-goal-name {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
  }
  .mc-goal-item .mc-goal-target {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ---- tier-lock affordance ---- */
  .mc-locked {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-2);
    text-align: center;
    padding: var(--mc-space-8) var(--mc-space-6);
    border: 1px dashed var(--mc-border-strong);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-muted);
  }
  .mc-locked svg { width: 1.5rem; height: 1.5rem; color: var(--mc-text-muted); }
  .mc-locked .mc-locked-title {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text-secondary);
  }
  .mc-locked .mc-locked-desc { font-size: var(--mc-type-caption); }
}


/* ==== source: patterns/auth.css (layer patterns) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — PATTERN: AUTH + ONBOARDING
   Calm, form-first entry surfaces: trust and completion, not spectacle
   (director §17). No animated mesh, no floating logo motion, no glass.
   ========================================================================== */
@layer patterns {
  .mc-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 46%);
    background: var(--mc-canvas);
  }
  /* The trust column is hidden below 1024px (see .mc-auth-trust-col below);
     the SECOND grid track must collapse with it - otherwise minmax(420px, 46%)
     keeps reserving a 420px track and squeezes the form column toward zero on
             phones/tablets (the S121 mobile-entry defect: form col = 0px at 390px). */
  @media (max-width: 1023.5px) {
    .mc-auth { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---- form column ---- */
  .mc-auth-form-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mc-space-8) var(--mc-space-6);
    gap: var(--mc-space-6);
  }
  .mc-auth-card {
    width: min(420px, 100%);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-1);
    padding: var(--mc-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-5);
  }
  .mc-auth-head {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    text-align: left;
  }
  .mc-auth-head .mc-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-3);
    text-decoration: none;
    color: var(--mc-text);
    margin-bottom: var(--mc-space-2);
  }
  .mc-auth-head .mc-auth-brand .mc-brand-mark { width: 32px; height: 32px; }
  .mc-auth-head .mc-auth-brand .mc-brand-word {
    font-family: var(--mc-font-display);
    font-size: var(--mc-type-body-lg);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-tight);
  }
  .mc-auth-head h1 {
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
  }
  .mc-auth-head .mc-auth-sub {
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-secondary);
    line-height: var(--mc-leading-normal);
  }
  .mc-auth-head .mc-auth-sub .mc-email-chip {
    display: inline-block;
    padding: 0 var(--mc-space-2);
    background: var(--mc-surface-sunken);
    border-radius: var(--mc-radius-xs);
    font-weight: var(--mc-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  /* one-error banner slot */
  .mc-auth-error,
  .mc-auth-success {
    display: none;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    font-size: var(--mc-type-body-sm);
    line-height: var(--mc-leading-normal);
  }
  .mc-auth-error.show,
  .mc-auth-success.show { display: flex; }
  .mc-auth-error {
    background: var(--mc-danger-subtle);
    border: 1px solid color-mix(in srgb, var(--mc-danger) 30%, transparent);
    color: var(--mc-danger-subtle-text);
  }
  .mc-auth-error svg { width: 1rem; height: 1rem; flex: none; margin-top: 2px; }
  .mc-auth-success {
    background: var(--mc-success-subtle);
    border: 1px solid color-mix(in srgb, var(--mc-success) 30%, transparent);
    color: var(--mc-success-subtle-text);
  }
  .mc-auth-success svg { width: 1rem; height: 1rem; flex: none; margin-top: 2px; }

  .mc-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-4);
  }
  .mc-auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-3);
  }
  .mc-auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--mc-type-caption);
  }
  .mc-auth-options a { color: var(--mc-link); text-decoration: none; }
  .mc-auth-options a:hover { text-decoration: underline; }

  .mc-auth-divider {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    color: var(--mc-text-muted);
    font-size: var(--mc-type-caption);
  }
  .mc-auth-divider::before,
  .mc-auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--mc-border);
  }

  .mc-auth-footer {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    text-align: center;
  }
  .mc-auth-footer a { color: var(--mc-link); font-weight: var(--mc-weight-medium); text-decoration: none; }
  .mc-auth-footer a:hover { text-decoration: underline; }

  /* quiet legal footer under the card */
  .mc-auth-legal {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    flex-wrap: wrap;
    justify-content: center;
  }
  /* (S258-D1) the legal nav links measured 16.5px tall — vertical padding
     lifts the pointer target over the WCAG 2.5.8 24px gate without
     changing the micro-type rhythm (the visual box stays the same). */
  .mc-auth-legal a { color: var(--mc-text-muted); text-decoration: none; padding: 4px 2px; }
  .mc-auth-legal a:hover { color: var(--mc-text-secondary); text-decoration: underline; }

  /* ---- trust column (right side): quiet evidence, no spectacle ---- */
  .mc-auth-trust-col {
    position: relative;
    display: none;
    padding: var(--mc-space-12) var(--mc-space-12);
    background:
      radial-gradient(1200px 500px at 80% -10%, var(--mc-primary-subtle), transparent 60%),
      linear-gradient(180deg, var(--mc-surface) 0%, var(--mc-canvas) 100%);
    border-left: 1px solid var(--mc-border);
    flex-direction: column;
    justify-content: center;
    gap: var(--mc-space-8);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .mc-auth-trust-col { display: flex; }
  }
  .mc-auth-trust-col .mc-trust-eyebrow {
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-primary);
  }
  .mc-auth-trust-col .mc-trust-title {
    font-family: var(--mc-font-display);
    font-size: var(--mc-type-h2);
    font-weight: var(--mc-weight-semibold);
    line-height: var(--mc-leading-tight);
    letter-spacing: var(--mc-tracking-tight);
    color: var(--mc-text);
    max-width: 22ch;
  }
  .mc-auth-trust-col .mc-trust-copy {
    font-size: var(--mc-type-body);
    color: var(--mc-text-secondary);
    line-height: var(--mc-leading-relaxed);
    max-width: 44ch;
  }
  .mc-trust-points {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-4);
  }
  .mc-trust-point {
    display: flex;
    gap: var(--mc-space-3);
    align-items: flex-start;
  }
  .mc-trust-point svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--mc-success);
    margin-top: 1px;
  }
  .mc-trust-point .mc-trust-point-title {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
  }
  .mc-trust-point .mc-trust-point-desc {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal);
    margin-top: 2px;
  }
  .mc-auth-trust-col .mc-trust-stat-row {
    display: flex;
    gap: var(--mc-space-8);
    padding-top: var(--mc-space-6);
    border-top: 1px solid var(--mc-border);
  }
  .mc-auth-trust-col .mc-trust-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mc-auth-trust-col .mc-trust-stat-value {
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--mc-text);
  }
  .mc-auth-trust-col .mc-trust-stat-label {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }

  /* ---- centered single-card variant (forgot/reset) ---- */
  .mc-auth-center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mc-space-8) var(--mc-space-4);
    gap: var(--mc-space-6);
    background:
      radial-gradient(900px 400px at 50% -10%, var(--mc-primary-subtle), transparent 65%),
      var(--mc-canvas);
  }
  .mc-auth-center .mc-auth-card { text-align: left; }
  .mc-auth-center .mc-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-3);
    text-decoration: none;
    color: var(--mc-text);
    margin: 0 auto var(--mc-space-4);
  }
  .mc-auth-center .mc-auth-brand .mc-brand-mark { width: 36px; height: 36px; }
  .mc-auth-center .mc-auth-brand .mc-brand-word {
    font-family: var(--mc-font-display);
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
  }

  /* reassurance strip under sensitive actions */
  .mc-reassurance {
    display: flex;
    gap: var(--mc-space-3);
    align-items: flex-start;
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-surface-sunken);
    border-radius: var(--mc-radius-md);
    font-size: var(--mc-type-caption);
    color: var(--mc-text-secondary);
    line-height: var(--mc-leading-normal);
  }
  .mc-reassurance svg { width: 1rem; height: 1rem; flex: none; margin-top: 1px; color: var(--mc-text-muted); }

  /* ---- 2FA step ---- */
  .mc-twofa-head {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
  }
  .mc-twofa-head .mc-twofa-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius-md);
    background: var(--mc-primary-subtle);
    color: var(--mc-primary);
  }
  .mc-twofa-head .mc-twofa-icon svg { width: 1.25rem; height: 1.25rem; }
  .mc-twofa-head h1 { font-size: var(--mc-type-h4); }
  .mc-twofa-head .mc-twofa-sub {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }
  .mc-code-input {
    width: 100%;
    height: var(--mc-control-height-lg);
    text-align: center;
    font-size: var(--mc-type-h4);
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
  }
  .mc-twofa-alt {
    display: flex;
    justify-content: center;
    gap: var(--mc-space-3);
    font-size: var(--mc-type-caption);
  }
  .mc-twofa-alt button { color: var(--mc-link); font-weight: var(--mc-weight-medium); }
  .mc-twofa-alt button:hover { text-decoration: underline; }

  /* ---- OTP boxes (verify email) ---- */
  .mc-otp-row {
    display: flex;
    justify-content: center;
    gap: var(--mc-space-2);
  }
  .mc-otp-box {
    width: 2.75rem;
    height: 3.25rem;
    text-align: center;
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--mc-text);
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    transition: border-color var(--mc-dur-fast) var(--mc-ease), box-shadow var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-otp-box:focus {
    outline: none;
    border-color: var(--mc-border-focus);
    box-shadow: var(--mc-focus-ring);
  }
  .mc-otp-box.filled { border-color: var(--mc-primary); background: var(--mc-primary-subtle); }
  .mc-otp-row.error .mc-otp-box { border-color: var(--mc-danger); }
  @media (max-width: 479.5px) {
    .mc-otp-row { gap: var(--mc-space-1); }
    .mc-otp-box { width: 2.4rem; height: 3rem; }
  }

  /* resend row */
  .mc-resend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }
  .mc-resend button { color: var(--mc-link); font-weight: var(--mc-weight-medium); }
  .mc-resend button[aria-disabled="true"] { color: var(--mc-text-muted); cursor: default; text-decoration: none; }

  /* ---- password strength (the declared MACRITION_PASSWORD contract UI) ---- */
  .mc-strength { display: flex; flex-direction: column; gap: var(--mc-space-2); }
  .mc-strength .mc-strength-meter {
    display: flex;
    gap: 4px;
  }
  .mc-strength .mc-strength-meter span {
    height: 4px;
    flex: 1;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    transition: background-color var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-strength.weak  .mc-strength-meter span:nth-child(-n+1) { background: var(--mc-danger); }
  .mc-strength.fair  .mc-strength-meter span:nth-child(-n+2) { background: var(--mc-warning); }
  .mc-strength.good  .mc-strength-meter span:nth-child(-n+3) { background: var(--mc-success); }
  .mc-strength.strong .mc-strength-meter span:nth-child(-n+4) { background: var(--mc-success-strong); }
  .mc-strength .mc-strength-label {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }
  .mc-strength .mc-strength-label.weak { color: var(--mc-danger-subtle-text); }

  /* password requirements checklist */
  .mc-reqs {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-surface-sunken);
    border-radius: var(--mc-radius-md);
  }
  .mc-reqs .mc-reqs-title {
    font-size: var(--mc-type-micro);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-text-muted);
    margin-bottom: var(--mc-space-1);
  }
  .mc-reqs li {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-type-caption);
    color: var(--mc-text-secondary);
  }
  .mc-reqs li svg {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    color: var(--mc-text-muted);
  }
  .mc-reqs li.met { color: var(--mc-success-subtle-text); }
  .mc-reqs li.met svg { color: var(--mc-success); }
  .mc-reqs li .mc-reqs-optional {
    margin-left: auto;
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
  }

  /* ---- onboarding wizard ---- */
  .mc-wizard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mc-canvas);
  }
  .mc-wizard-bar {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    padding: var(--mc-space-4) var(--mc-space-6);
    background: var(--mc-surface);
    border-bottom: 1px solid var(--mc-border);
    position: sticky;
    top: 0;
    z-index: var(--mc-z-header);
  }
  .mc-wizard-bar .mc-wizard-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    text-decoration: none;
    color: var(--mc-text);
  }
  .mc-wizard-bar .mc-wizard-brand .mc-brand-mark { width: 28px; height: 28px; }
  .mc-wizard-progress {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    flex: 1 1 auto;
    min-width: 0;
  }
  .mc-wizard-progress .mc-wizard-step-label {
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
    white-space: nowrap;
  }
  .mc-wizard-progress .mc-wizard-step-count {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .mc-wizard-track {
    flex: 1 1 auto;
    height: 4px;
    min-width: 80px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    overflow: hidden;
  }
  .mc-wizard-fill {
    height: 100%;
    background: var(--mc-primary);
    border-radius: var(--mc-radius-pill);
    transition: width var(--mc-dur-slow) var(--mc-ease);
  }
  .mc-wizard-dots {
    display: flex;
    gap: var(--mc-space-2);
  }
  .mc-wizard-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mc-border-strong);
    border: 0;
    padding: 0;
    cursor: default;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), transform var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-wizard-dot.completed { background: var(--mc-primary); cursor: pointer; }
  .mc-wizard-dot.completed:hover { transform: scale(1.25); }
  .mc-wizard-dot.active { background: var(--mc-primary); transform: scale(1.25); }
  .mc-wizard-dot:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }

  .mc-wizard-body {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--mc-space-10) var(--mc-space-6) var(--mc-space-16);
  }
  .mc-wizard-card {
    width: min(640px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-6);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-1);
    padding: var(--mc-space-8);
  }
  .mc-wizard-head h1 { font-size: var(--mc-type-h3); }
  .mc-wizard-head .mc-wizard-sub {
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-secondary);
    margin-top: var(--mc-space-2);
    line-height: var(--mc-leading-normal);
  }

  .mc-wizard-step { display: none; }
  .mc-wizard-step.active { display: block; animation: mc-step-in var(--mc-dur-normal) var(--mc-ease); }
  @keyframes mc-step-in {
    from { opacity: 0; transform: translateY(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-wizard-step.active { animation: none; }
  }

  .mc-wizard-foot {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding-top: var(--mc-space-6);
    border-top: 1px solid var(--mc-border);
  }
  .mc-wizard-foot .mc-wizard-skip {
    margin-right: auto;
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }
  .mc-wizard-foot .mc-wizard-skip:hover { color: var(--mc-text-secondary); text-decoration: underline; }

  /* unit toggle + option cards reused inside steps */
  .mc-wizard .mc-choice { padding: var(--mc-space-4); }
  .mc-wizard .mc-choice-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--mc-space-3);
  }

  /* ===================================================================
     CONTRACT BRIDGE — the auth.js class vocabulary, styled by v2.
     These pages load ONLY the v2 system (no legacy sheets), so this is
     the single styling authority for the classes the shipped client
     toggles: .fld/.valid/.invalid, .fld-check, .fld-error, .has-value,
     .auth-error/.show, .check-row/.check-box, .btn-gradient states,
     .spinner, .success, .totp-input, .google-btn, .auth-footer,
     .auth-site-footer. Removed from markup: every inline style attr.
     =================================================================== */
  .mc-auth .fld, .mc-wizard .fld {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
  }
  .mc-auth .fld > label, .mc-auth .fld-label {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
    margin-bottom: 0;
    display: flex;
    align-items: baseline;
    gap: var(--mc-space-2);
  }
  .mc-auth .fld .fld-optional {
    font-weight: var(--mc-weight-regular);
    color: var(--mc-text-muted);
    font-size: var(--mc-type-caption);
  }
  .mc-auth .fld .control-row {
    position: relative;
    display: flex;
    align-items: center;
  }
  .mc-auth input.glass-input, .mc-auth select.glass-input, .mc-auth textarea.glass-input {
    width: 100%;
    height: var(--mc-control-height);
    padding: 0 var(--mc-space-3);
    font-size: var(--mc-type-body-sm);
    font-family: inherit;
    color: var(--mc-text);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    box-shadow: var(--mc-shadow-1);
    transition: border-color var(--mc-dur-fast) var(--mc-ease), box-shadow var(--mc-dur-fast) var(--mc-ease);
    appearance: none;
  }
  .mc-auth select.glass-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--mc-space-3) center;
    padding-right: var(--mc-space-8);
    cursor: pointer;
  }
  .mc-auth .fld-pwd .control-row { padding-right: 2.75rem; }
  .mc-auth .fld-pwd input.glass-input { padding-right: var(--mc-space-2); }
  /* (S132 FC-1 F-6) the reset surface's pwd-toggle had no positioning rule
     anywhere — the button rendered unstyled below the input. The toggle
     lives inside the control row, aligned over the reserved 2.75rem lane. */
  .mc-auth .fld-pwd .pwd-toggle {
    position: absolute;
    right: var(--mc-space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--mc-radius-xs);
    color: var(--mc-text-muted);
    cursor: pointer;
    transition: color var(--mc-dur-fast) var(--mc-ease), background var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-auth .fld-pwd .pwd-toggle:hover { color: var(--mc-text); background: var(--mc-surface-sunken); }
  .mc-auth .fld-pwd .pwd-toggle:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-auth .fld-pwd .pwd-toggle svg { width: 1.125rem; height: 1.125rem; }
  .mc-auth input.glass-input:hover { border-color: var(--mc-border-hover); }
  .mc-auth input.glass-input:focus {
    outline: none;
    border-color: var(--mc-border-focus);
    box-shadow: var(--mc-focus-ring);
  }
  .mc-auth input.glass-input::placeholder { color: var(--mc-text-muted); }
  .mc-auth input.glass-input[aria-invalid="true"] {
    border-color: var(--mc-danger);
    box-shadow: none;
  }
  .mc-auth input.totp-input {
    text-align: center;
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
    font-size: var(--mc-type-h4);
    height: var(--mc-control-height-lg);
  }

  /* the inline .fld-check state dot (valid/invalid) */
  .mc-auth .fld-check {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--mc-dur-fast) var(--mc-ease);
    pointer-events: none;
  }
  .mc-auth .fld.valid .fld-check {
    transform: translateY(-50%) scale(1);
    background: var(--mc-success-subtle);
    color: var(--mc-success);
  }
  .mc-auth .fld.valid .fld-check::after { content: "✓"; font-size: 0.7em; font-weight: 700; }
  .mc-auth .fld.invalid .fld-check {
    transform: translateY(-50%) scale(1);
    background: var(--mc-danger-subtle);
    color: var(--mc-danger);
  }
  .mc-auth .fld.invalid .fld-check::after { content: "!"; font-size: 0.75em; font-weight: 700; }
  .mc-auth .fld.invalid input.glass-input { border-color: var(--mc-danger); }

  .mc-auth .fld-error {
    display: none;
    align-items: flex-start;
    gap: var(--mc-space-1);
    font-size: var(--mc-type-caption);
    color: var(--mc-danger-subtle-text);
    line-height: var(--mc-leading-normal);
    min-height: 1em;
  }
  .mc-auth .fld-error:not(:empty) { display: flex; }
  .mc-auth .fld.invalid .fld-error { display: flex; }

  /* checkbox row (remember me / terms) */
  .mc-auth .check-row {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    /* (S258-D1) WCAG 2.5.8 target size: the label IS the pointer target
       for the wrapped checkbox — the row measured 21px tall, under the
       24px hard gate. */
    min-height: 24px;
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-secondary);
    cursor: pointer;
    user-select: none;
  }
  .mc-auth .check-row input[type="checkbox"] {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-xs);
    background: var(--mc-surface);
    cursor: inherit;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), border-color var(--mc-dur-fast) var(--mc-ease);
    flex: none;
    margin: 0;
  }
  .mc-auth .check-row input[type="checkbox"]:hover { border-color: var(--mc-primary); }
  .mc-auth .check-row input[type="checkbox"]:checked {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
  }
  .mc-auth .check-row input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(3px, 0.5px);
  }
  .mc-auth .check-row input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-auth .check-row .check-box { display: none; } /* legacy visual box replaced above */

  /* the legacy error banner slots — v2 semantics */
  .mc-auth .auth-error {
    display: none;
    align-items: flex-start;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    background: var(--mc-danger-subtle);
    border: 1px solid color-mix(in srgb, var(--mc-danger) 30%, transparent);
    color: var(--mc-danger-subtle-text);
    font-size: var(--mc-type-body-sm);
    line-height: var(--mc-leading-normal);
  }
  .mc-auth .auth-error.show { display: flex; animation: mc-err-in var(--mc-dur-normal) var(--mc-ease); }
  @keyframes mc-err-in { from { opacity: 0; transform: translateY(-4px); } }
  .mc-auth .auth-error .ar-row { display: flex; gap: var(--mc-space-3); align-items: flex-start; }
  .mc-auth .auth-error .ar-icon { flex: none; color: var(--mc-danger); }
  .mc-auth .auth-error .ar-icon svg { width: 1.25rem; height: 1.25rem; }
  .mc-auth .auth-error .ar-text strong { display: block; margin-bottom: 2px; }
  .mc-auth .auth-error .ar-text span { font-size: var(--mc-type-caption); color: var(--mc-text-secondary); }
  .mc-auth .auth-error .ar-actions { display: flex; gap: var(--mc-space-2); margin-top: var(--mc-space-3); flex-wrap: wrap; }
  .mc-auth .auth-error .ar-btn {
    display: inline-flex;
    align-items: center;
    height: var(--mc-control-height-sm);
    padding: 0 var(--mc-space-3);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    border-radius: var(--mc-radius-sm);
    text-decoration: none;
  }
  .mc-auth .auth-error .ar-btn-primary { background: var(--mc-primary); color: var(--mc-text-on-primary); }
  .mc-auth .auth-error .ar-btn-ghost { border: 1px solid var(--mc-border-strong); color: var(--mc-text-secondary); }
  .mc-auth .auth-error a { color: inherit; }

  .mc-auth .auth-success {
    display: none;
    padding: var(--mc-space-3) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    background: var(--mc-success-subtle);
    border: 1px solid color-mix(in srgb, var(--mc-success) 30%, transparent);
    color: var(--mc-success-subtle-text);
    font-size: var(--mc-type-body-sm);
  }
  .mc-auth .auth-success.show { display: block; }

  /* password visibility toggle */
  .mc-auth .pwd-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius-xs);
    color: var(--mc-text-muted);
    background: transparent;
    z-index: var(--mc-z-base);
  }
  .mc-auth .pwd-toggle:hover { color: var(--mc-text-secondary); background: var(--mc-surface-sunken); }
  .mc-auth .pwd-toggle:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-auth .pwd-toggle svg { width: 1rem; height: 1rem; }

  /* the legacy submit grammar → v2 primary button */
  .mc-auth .btn-gradient, .mc-auth .btn-primary.btn-block {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    width: 100%;
    height: var(--mc-control-height-lg);
    padding: 0 var(--mc-space-5);
    font-size: var(--mc-type-body);
    font-weight: var(--mc-weight-medium);
    font-family: inherit;
    border-radius: var(--mc-radius-sm);
    border: 1px solid transparent;
    background: var(--mc-primary);
    color: var(--mc-text-on-primary);
    cursor: pointer;
    transition: background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-auth .btn-gradient:hover { background: var(--mc-primary-hover); }
  .mc-auth .btn-gradient:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-auth .btn-gradient:disabled { opacity: 0.6; cursor: not-allowed; }
  .mc-auth .btn-gradient .spinner {
    display: none;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: mc-spin 0.7s linear infinite;
  }
  .mc-auth .btn-gradient[aria-busy="true"] .spinner { display: inline-block; }
  .mc-auth .btn-gradient.success {
    background: var(--mc-success);
  }
  .mc-auth .btn-lg { height: var(--mc-control-height-lg); font-size: var(--mc-type-body); }
  .mc-auth .btn-block { width: 100%; display: flex; }

  /* Google auth button */
  .mc-auth .google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-3);
    width: 100%;
    height: var(--mc-control-height);
    padding: 0 var(--mc-space-4);
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    font-family: inherit;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-strong);
    box-shadow: var(--mc-shadow-1);
    color: var(--mc-text);
    cursor: pointer;
  }
  .mc-auth .google-btn:hover { background: var(--mc-surface-sunken); }
  .mc-auth .google-btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-auth .google-btn .g-mark { width: 1.125rem; height: 1.125rem; flex: none; }

  /* OTP boxes (legacy class vocabulary on verify-email) */
  .mc-auth .otp-input-row { display: flex; justify-content: center; gap: var(--mc-space-2); }
  .mc-auth .otp-input-row input {
    width: 2.75rem;
    height: 3.25rem;
    text-align: center;
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--mc-text);
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    transition: border-color var(--mc-dur-fast) var(--mc-ease), box-shadow var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-auth .otp-input-row input:focus {
    outline: none;
    border-color: var(--mc-border-focus);
    box-shadow: var(--mc-focus-ring);
  }
  .mc-auth .otp-input-row input.filled { border-color: var(--mc-primary); background: var(--mc-primary-subtle); }
  .mc-auth .otp-input-row.error input { border-color: var(--mc-danger); }

  /* 2FA step legacy hooks */
  .mc-auth .twofa-head { display: flex; gap: var(--mc-space-3); align-items: center; }
  .mc-auth .twofa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--mc-radius-md);
    background: var(--mc-primary-subtle);
    color: var(--mc-primary);
  }
  .mc-auth .twofa-badge svg { width: 1.25rem; height: 1.25rem; }
  .mc-auth .twofa-alt { display: flex; justify-content: center; }
  .mc-auth .twofa-alt-btn {
    font-size: var(--mc-type-caption);
    color: var(--mc-link);
    font-weight: var(--mc-weight-medium);
    padding: var(--mc-space-1) var(--mc-space-2);
    border-radius: var(--mc-radius-xs);
  }
  .mc-auth .twofa-alt-btn:hover { background: var(--mc-primary-subtle); }
  .mc-auth .twofa-back { display: flex; justify-content: center; margin-top: var(--mc-space-2); }
  .mc-auth .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    color: var(--mc-text-muted);
    font-size: var(--mc-type-caption);
  }
  .mc-auth .auth-divider::before, .mc-auth .auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--mc-border);
  }
  .mc-auth .auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--mc-type-caption);
  }
  .mc-auth .auth-options a { color: var(--mc-link); text-decoration: none; /* (S258-D1) the link measured 18px tall — padding lifts the pointer target over the WCAG 2.5.8 24px gate */ padding: 4px 0; }
  .mc-auth .auth-options a:hover { text-decoration: underline; }
  .mc-auth .auth-footer {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    text-align: center;
  }
  .mc-auth .auth-footer a { color: var(--mc-link); font-weight: var(--mc-weight-medium); text-decoration: none; }
  .mc-auth .auth-footer a:hover { text-decoration: underline; }
  .mc-auth .auth-site-footer {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    flex-wrap: wrap;
    justify-content: center;
  }
  .mc-auth .auth-site-footer nav { display: flex; gap: var(--mc-space-4); }
  .mc-auth .auth-site-footer a { color: var(--mc-text-muted); text-decoration: none; }
  .mc-auth .auth-site-footer a:hover { color: var(--mc-text-secondary); text-decoration: underline; }

  /* strength meter legacy hooks (signup/reset) */
  .mc-auth .password-strength {
    display: none;
    flex-direction: column;
    gap: var(--mc-space-2);
  }
  .mc-auth .password-strength.show { display: flex; }
  .mc-auth .password-strength .meter { display: flex; gap: 4px; }
  .mc-auth .password-strength .meter span {
    height: 4px;
    flex: 1;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    transition: background-color var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-auth .password-strength.weak .meter span:nth-child(-n+1) { background: var(--mc-danger); }
  .mc-auth .password-strength.fair .meter span:nth-child(-n+2) { background: var(--mc-warning); }
  .mc-auth .password-strength.good .meter span:nth-child(-n+3) { background: var(--mc-success); }
  .mc-auth .password-strength.strong .meter span:nth-child(-n+4) { background: var(--mc-success-strong); }
  .mc-auth .password-strength .label {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }
  .mc-auth .password-hint { font-size: var(--mc-type-caption); color: var(--mc-text-muted); }
  .mc-auth .password-match {
    display: none;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: var(--mc-type-caption);
  }
  .mc-auth .password-match.show { display: flex; }
  .mc-auth .password-match.match { color: var(--mc-success-subtle-text); }
  .mc-auth .password-match.mismatch { color: var(--mc-danger-subtle-text); }
  .mc-auth .requirements { display: flex; flex-direction: column; gap: var(--mc-space-1); }
  .mc-auth .requirements .req-title {
    font-size: var(--mc-type-micro);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-text-muted);
    margin-bottom: 2px;
  }
  .mc-auth .requirements ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
  .mc-auth .requirements li {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: var(--mc-type-caption);
    color: var(--mc-text-secondary);
  }
  .mc-auth .requirements li .req-check { color: var(--mc-text-muted); display: inline-flex; }
  .mc-auth .requirements li .req-check svg { width: 0.875rem; height: 0.875rem; }
  .mc-auth .requirements li.met { color: var(--mc-success-subtle-text); }
  .mc-auth .requirements li.met .req-check { color: var(--mc-success); }

  /* forgot/reset centered pages + icon badge + reassurance */
  .mc-auth .icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--mc-radius-md);
    background: var(--mc-primary-subtle);
    color: var(--mc-primary);
    margin: 0 auto var(--mc-space-4);
  }
  .mc-auth .icon-badge svg { width: 1.5rem; height: 1.5rem; }
  .mc-auth .reassurance {
    display: flex;
    gap: var(--mc-space-3);
    align-items: flex-start;
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-surface-sunken);
    border-radius: var(--mc-radius-md);
    font-size: var(--mc-type-caption);
    color: var(--mc-text-secondary);
    line-height: var(--mc-leading-normal);
  }
  .mc-auth .reassurance .r-icon { flex: none; color: var(--mc-text-muted); display: inline-flex; margin-top: 1px; }
  .mc-auth .reassurance .r-icon svg { width: 1rem; height: 1rem; }
  .mc-auth .subtitle { font-size: var(--mc-type-body-sm); color: var(--mc-text-secondary); line-height: var(--mc-leading-normal); }
  .mc-auth .email-chip {
    display: inline-block;
    padding: 0 var(--mc-space-2);
    background: var(--mc-surface-sunken);
    border-radius: var(--mc-radius-xs);
    font-weight: var(--mc-weight-medium);
  }
  .mc-auth .dev-reset { font-size: var(--mc-type-caption); color: var(--mc-text-muted); overflow-wrap: anywhere; }
  .mc-auth .dev-reset a { color: var(--mc-link); text-decoration: underline; }
  .mc-auth .mc-auth-form { display: flex; flex-direction: column; gap: var(--mc-space-4); }
  /* (S132 FC-1 F-6/F-7) the auth .form-group rule retired with the v1
     generation — reset/forgot wrappers now carry the canonical .mc-field
     (with .fld composition for the row/state machinery they share with
     login). The base .mc-field rule owns the flex-column layout. */

  @keyframes mc-spin { to { transform: rotate(360deg); } }
}


/* ==== source: patterns/dashboard.css (layer patterns) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — PATTERN: DASHBOARD (Today)
   The dashboard answers, in order (director §13):
     1. How am I doing today?   2. What should I do next?   3. What needs attention?
   Data is the centerpiece. No twelve equally-weighted panels.
   ========================================================================== */
@layer patterns {
  /* ---- greeting header ---- */
  .mc-dash-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mc-space-6);
    flex-wrap: wrap;
    margin-bottom: var(--mc-space-6);
  }
  .mc-dash-hero .mc-dash-greeting {
    font-size: var(--mc-type-h2);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-tight);
    line-height: var(--mc-leading-tight);
  }
  .mc-dash-hero .mc-dash-date {
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    margin-top: var(--mc-space-1);
  }
  .mc-dash-hero .mc-dash-badges {
    display: flex;
    gap: var(--mc-space-2);
    align-items: center;
    flex-wrap: wrap;
  }

  /* ---- the priority grid: answer #1 spans, answers #2/#3 support ---- */
  .mc-dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--mc-space-5);
    align-items: start;
  }
  .mc-col-12 { grid-column: span 12; }
  .mc-col-8  { grid-column: span 8; }
  .mc-col-7  { grid-column: span 7; }
  .mc-col-6  { grid-column: span 6; }
  .mc-col-5  { grid-column: span 5; }
  .mc-col-4  { grid-column: span 4; }
  @media (max-width: 1279.5px) {
    .mc-col-8, .mc-col-7 { grid-column: span 12; }
    .mc-col-5, .mc-col-4 { grid-column: span 6; }
  }
  @media (max-width: 1023.5px) {
    .mc-dash-grid { gap: var(--mc-space-4); }
    .mc-col-5, .mc-col-6 { grid-column: span 12; }
  }

  /* ---- today panel: the single most important card ---- */
  .mc-today {
    display: flex;
    gap: var(--mc-space-8);
    align-items: center;
    flex-wrap: wrap;
  }
  .mc-today .mc-today-ring-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-2);
    flex: none;
  }
  .mc-today .mc-today-ring-side .mc-today-ring-caption {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    text-align: center;
  }
  .mc-today .mc-today-side {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-5);
  }
  .mc-today .mc-today-remaining {
    display: flex;
    align-items: baseline;
    gap: var(--mc-space-2);
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-secondary);
  }
  .mc-today .mc-today-remaining strong {
    font-size: var(--mc-type-h4);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-nutrient-energy);
    font-variant-numeric: tabular-nums;
  }

  /* ---- quick actions: the "what next" strip ---- */
  .mc-qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--mc-space-3);
  }
  .mc-qa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mc-space-2);
    padding: var(--mc-space-4);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    text-decoration: none;
    color: var(--mc-text);
    transition: border-color var(--mc-dur-fast) var(--mc-ease), box-shadow var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-qa:hover { border-color: var(--mc-primary); box-shadow: var(--mc-shadow-2); }
  .mc-qa:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-qa .mc-qa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface-sunken);
    color: var(--mc-text-secondary);
  }
  .mc-qa:hover .mc-qa-icon { background: var(--mc-primary-subtle); color: var(--mc-primary); }
  .mc-qa .mc-qa-icon svg { width: 1.125rem; height: 1.125rem; }
  .mc-qa .mc-qa-label {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    line-height: var(--mc-leading-snug);
  }
  .mc-qa .mc-qa-desc {
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    line-height: var(--mc-leading-normal);
  }

  /* ---- attention strip (warnings first, then tips) ---- */
  .mc-attention {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-3);
  }

  /* ---- tabs (dashboard view switcher) ---- */
  .mc-dash-tabs {
    display: flex;
    gap: var(--mc-space-1);
    border-bottom: 1px solid var(--mc-border);
    margin-bottom: var(--mc-space-5);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mc-dash-tabs::-webkit-scrollbar { display: none; }

  /* ---- section heading inside the grid ---- */
  .mc-dash-section {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    grid-column: span 12;
    margin-top: var(--mc-space-2);
  }
  .mc-dash-section::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--mc-border);
  }
  .mc-dash-section h2 {
    font-size: var(--mc-type-body);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text-secondary);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
  }
  .mc-dash-section h2 svg { width: 1rem; height: 1rem; vertical-align: -2px; margin-right: var(--mc-space-1); }

  /* ---- activity feed ---- */
  .mc-feed {
    display: flex;
    flex-direction: column;
  }
  .mc-feed-item {
    display: flex;
    gap: var(--mc-space-3);
    padding: var(--mc-space-3) 0;
    border-bottom: 1px solid var(--mc-border);
    font-size: var(--mc-type-body-sm);
  }
  .mc-feed-item:last-child { border-bottom: 0; padding-bottom: 0; }
  .mc-feed-item .mc-feed-time {
    flex: none;
    width: 3.5rem;
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
  }
  .mc-feed-item .mc-feed-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mc-radius-xs);
    background: var(--mc-surface-sunken);
    color: var(--mc-text-muted);
  }
  .mc-feed-item .mc-feed-icon svg { width: 0.875rem; height: 0.875rem; }
  .mc-feed-item .mc-feed-body { min-width: 0; }
  .mc-feed-item .mc-feed-title { font-weight: var(--mc-weight-medium); }
  .mc-feed-item .mc-feed-meta {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
  }

  /* ---- widget reorder affordance (layout-customize mode) ---- */
  .mc-widget-block { position: relative; }
  .mc-widget-block .mc-widget-tools {
    display: none;
    position: absolute;
    top: var(--mc-space-2);
    right: var(--mc-space-2);
    z-index: var(--mc-z-base);
    gap: var(--mc-space-1);
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    padding: 2px;
    box-shadow: var(--mc-shadow-2);
  }
  .mc-workspace.mc-layout-editing .mc-widget-tools { display: flex; }
  .mc-workspace.mc-layout-editing .mc-widget-block {
    outline: 2px dashed var(--mc-border-strong);
    outline-offset: var(--mc-space-2);
    border-radius: var(--mc-radius-md);
  }
  .mc-workspace.mc-layout-editing .mc-widget-block:hover {
    outline-color: var(--mc-primary);
  }

  /* ---- tracking modal (reuses mc-dialog) ---- */
  .mc-quick-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--mc-space-2);
    margin-bottom: var(--mc-space-4);
  }
  .mc-quick-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-1);
    padding: var(--mc-space-3);
    border: 1.5px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
    cursor: pointer;
    transition: border-color var(--mc-dur-fast) var(--mc-ease), background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-quick-type:hover { border-color: var(--mc-border-strong); }
  .mc-quick-type.selected {
    border-color: var(--mc-primary);
    background: var(--mc-primary-subtle);
    color: var(--mc-primary-subtle-text);
  }
  .mc-quick-type svg { width: 1.25rem; height: 1.25rem; }
}


/* ==== source: patterns/corpus.css (layer patterns) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — PATTERN: CORPUS COMPAT LAYER
   The systemic restyle of the STORED corpus HTML (358 content pages +
   calculator/restaurant/food-database families render stored bodies with
   the legacy design-system vocabulary). No page row is ever rewritten:
   this layer targets the legacy class census on v2 tokens, scoped under
   body.pub. Because @layer legacy is declared FIRST (see build_ui2.py),
   every rule here beats the wrapped legacy sheets WITHOUT !important.

   The census (live DB, 2026-09-26): container, breadcrumb(+sep/current),
   section-head/eyebrow/left/lead, tool-grid, calc-group(+header),
   filter-bar/calc-filter/filter-chip(+active)/filter-empty, tool-card
   (+glass-surface/glass-surface-hover/depth-1/meta/arrow + icon color
   variants), tool-layout/tool-main/tool-sidebar, calc-glance/calc-widget,
   form-grid/form-group/unit, radio-group/radio-pill(+active),
   results/result-grid/result-item(value/label)/result-msg, sidebar-card,
   trust-block/head/meta/note/label/sep, faq-list/faq-item(+open)/faq-q/
   faq-a(-inner), chip(+berry etc.), article prose, btn family, cards.

   Design doctrine (S124 rail lesson): tinted canvas + elevated white
   surfaces + real borders; the glass-tax classes resolve to SOLID
   surfaces + the two elevation shadows (blur survives only on the sticky
   public header). Dark themes ride the [data-theme] token re-mapping.
   ========================================================================== */
@layer patterns {

  /* ---- layout primitives --------------------------------------------------- */
  .pub .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--mc-space-5);
    width: 100%;
    box-sizing: border-box;
  }
  .pub .container::after { content: none; }
  @media (max-width: 559px) { .pub .container { padding: 0 var(--mc-space-4); } }

  .pub .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mc-space-2);
    padding: var(--mc-space-4) 0 0;
    font-size: .8125rem;
    color: var(--mc-text-muted);
    list-style: none;
  }
  .pub .breadcrumb a { color: var(--mc-text-secondary); text-decoration: none; }
  .pub .breadcrumb a:hover { color: var(--mc-blue-600); text-decoration: underline; }
  .pub .breadcrumb .sep { color: var(--mc-text-muted); opacity: .6; }
  .pub .breadcrumb .current,
  .pub .breadcrumb [aria-current] { color: var(--mc-text); font-weight: 500; }

  .pub .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mc-space-4);
    flex-wrap: wrap;
    margin: var(--mc-space-10) 0 var(--mc-space-5);
  }
  .pub .section-head.left { justify-content: flex-start; }
  .pub .section-head h1,
  .pub .section-head h2 {
    font-family: var(--mc-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: var(--mc-leading-snug);
    color: var(--mc-text);
    margin: 0;
    letter-spacing: -.01em;
  }
  .pub .eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mc-blue-600);
    margin-bottom: var(--mc-space-2);
  }
  [data-theme="dark"] .pub .eyebrow { color: var(--mc-blue-400); }
  .pub .lead {
    font-size: 1.0625rem;
    line-height: var(--mc-leading-relaxed);
    color: var(--mc-text-secondary);
    max-width: 70ch;
  }

  /* ---- buttons -------------------------------------------------------------- */
  .pub .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    min-height: var(--mc-control-height);
    padding: var(--mc-space-2) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    border: 1px solid var(--mc-border-strong);
    background: var(--mc-surface);
    color: var(--mc-text);
    font-size: .875rem;
    font-weight: 600;
    font-family: var(--mc-font-sans);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    transition: background-color var(--mc-dur-fast) var(--mc-ease),
      border-color var(--mc-dur-fast) var(--mc-ease),
      color var(--mc-dur-fast) var(--mc-ease),
      box-shadow var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .btn:hover { border-color: var(--mc-border-focus); background: var(--mc-surface-sunken); }
  .pub .btn:focus-visible { outline: var(--mc-focus-outline); outline-offset: 2px; }
  .pub .btn-primary {
    background: var(--mc-blue-600);
    border-color: var(--mc-blue-600);
    color: var(--mc-text-on-primary);
  }
  .pub .btn-primary:hover { background: var(--mc-blue-700); border-color: var(--mc-blue-700); color: var(--mc-text-on-primary); }
  .pub .btn-outline { background: transparent; }
  .pub .btn-outline:hover { background: var(--mc-surface-sunken); }
  .pub .btn-ghost { background: transparent; border-color: transparent; color: var(--mc-text-secondary); }
  .pub .btn-ghost:hover { background: var(--mc-surface-sunken); border-color: transparent; color: var(--mc-text); }
  .pub .btn-sm { min-height: var(--mc-control-height-sm); padding: var(--mc-space-1) var(--mc-space-3); font-size: .8125rem; }
  .pub .btn-block { display: flex; width: 100%; }
  .pub .btn-link {
    background: none;
    border: none;
    color: var(--mc-blue-600);
    padding: var(--mc-space-1) 0;
    min-height: 0;
    font-weight: 600;
  }
  .pub .btn-link:hover { color: var(--mc-blue-700); text-decoration: underline; background: none; border: none; }

  /* ---- the tool-card family (the hub grids) -------------------------------- */
  .pub .tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--mc-space-4);
  }
  .pub .calc-group { margin: var(--mc-space-8) 0; }
  .pub .calc-group-header {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    margin: 0 0 var(--mc-space-4);
    padding-bottom: var(--mc-space-3);
    border-bottom: 1px solid var(--mc-border);
  }
  .pub .calc-group-header h2,
  .pub .calc-group-header h3 {
    font-family: var(--mc-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mc-text);
    margin: 0;
  }

  .pub .tool-card,
  .pub .card {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-5);
    box-shadow: var(--mc-shadow-1);
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: var(--mc-text);
    overflow: hidden;
    transition: box-shadow var(--mc-dur-fast) var(--mc-ease),
      border-color var(--mc-dur-fast) var(--mc-ease),
      transform var(--mc-dur-fast) var(--mc-ease);
    animation: none;
  }
  .pub .tool-card::before,
  .pub .tool-card::after { content: none; }
  .pub .tool-card:hover,
  .pub .card:hover {
    border-color: var(--mc-border-focus);
    box-shadow: var(--mc-shadow-2);
    transform: translateY(-2px);
    color: var(--mc-text);
  }
  .pub .tool-card h3,
  .pub .tool-card h2 {
    font-family: var(--mc-font-sans);
    font-size: 1rem;
    font-weight: 650;
    line-height: var(--mc-leading-snug);
    color: var(--mc-text);
    margin: 0 0 var(--mc-space-1);
  }
  .pub .tool-card .meta {
    display: block;
    font-size: .75rem;
    color: var(--mc-text-muted);
    margin-bottom: var(--mc-space-2);
  }
  .pub .tool-card p {
    font-size: .875rem;
    color: var(--mc-text-secondary);
    line-height: var(--mc-leading-normal);
    margin: 0 0 var(--mc-space-3);
    flex: 1 1 auto;
  }
  .pub .tool-card .arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mc-blue-600);
    margin-top: auto;
  }
  .pub .tool-card .arrow svg { width: 14px; height: 14px; }
  .pub .tool-card:hover .arrow { color: var(--mc-blue-700); }

  /* the icon chips: quiet tinted stages, one accent ring */
  .pub .tool-card .icon,
  .pub .icon-chip {
    width: 44px;
    height: 44px;
    border-radius: var(--mc-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--mc-space-3);
    flex: none;
    box-shadow: none;
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    color: var(--mc-text-secondary);
  }
  .pub .tool-card .icon svg,
  .pub .icon-chip svg { width: 22px; height: 22px; }
  .pub .tool-card .icon.terracotta,
  .pub .tool-card .icon.primary { background: var(--mc-red-50); border-color: color-mix(in srgb, var(--mc-red-400) 35%, transparent); color: var(--mc-red-600); }
  .pub .tool-card .icon.sage,
  .pub .tool-card .icon.accent { background: var(--mc-green-50); border-color: color-mix(in srgb, var(--mc-green-400) 35%, transparent); color: var(--mc-green-700); }
  .pub .tool-card .icon.mustard,
  .pub .tool-card .icon.amber { background: var(--mc-amber-50); border-color: color-mix(in srgb, var(--mc-amber-400) 35%, transparent); color: var(--mc-amber-700); }
  .pub .tool-card .icon.berry,
  .pub .tool-card .icon.rose { background: var(--mc-red-50); border-color: color-mix(in srgb, var(--mc-red-400) 35%, transparent); color: var(--mc-red-600); }
  .pub .tool-card .icon.azure { background: var(--mc-blue-50); border-color: color-mix(in srgb, var(--mc-blue-400) 35%, transparent); color: var(--mc-blue-600); }
  .pub .tool-card .icon.indigo { background: var(--mc-blue-50); border-color: color-mix(in srgb, var(--mc-blue-400) 35%, transparent); color: var(--mc-blue-700); }
  .pub .tool-card .icon.purple { background: var(--mc-cyan-50); border-color: color-mix(in srgb, var(--mc-cyan-500) 35%, transparent); color: var(--mc-cyan-700); }
  [data-theme="dark"] .pub .tool-card .icon.terracotta,
  [data-theme="dark"] .pub .tool-card .icon.primary,
  [data-theme="dark"] .pub .tool-card .icon.berry,
  [data-theme="dark"] .pub .tool-card .icon.rose { color: var(--mc-red-400); }
  [data-theme="dark"] .pub .tool-card .icon.sage,
  [data-theme="dark"] .pub .tool-card .icon.accent { color: var(--mc-green-400); }
  [data-theme="dark"] .pub .tool-card .icon.mustard,
  [data-theme="dark"] .pub .tool-card .icon.amber { color: var(--mc-amber-400); }
  [data-theme="dark"] .pub .tool-card .icon.azure,
  [data-theme="dark"] .pub .tool-card .icon.indigo { color: var(--mc-blue-400); }
  [data-theme="dark"] .pub .tool-card .icon.purple { color: var(--mc-cyan-500); }

  /* the glass-tax classes resolve to SOLID surfaces (the diet) */
  .pub .glass-surface,
  .pub .glass-surface-hover,
  .pub .depth-1,
  .pub .depth-2,
  .pub .depth-3 {
    background: var(--mc-surface-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-1);
  }
  .pub .glass-surface-hover:hover,
  .pub .depth-2 { box-shadow: var(--mc-shadow-2); }
  .pub .depth-3 { box-shadow: var(--mc-shadow-3); }

  /* ---- the filter bar -------------------------------------------------------- */
  .pub .filter-bar {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    flex-wrap: wrap;
    margin: var(--mc-space-4) 0 var(--mc-space-5);
    padding: var(--mc-space-3);
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
  }
  .pub .calc-filter { font-size: .875rem; color: var(--mc-text-secondary); font-weight: 600; }
  .pub .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    padding: var(--mc-space-1) var(--mc-space-3);
    border-radius: var(--mc-radius-pill);
    border: 1px solid var(--mc-border-strong);
    background: var(--mc-surface);
    color: var(--mc-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .filter-chip:hover { border-color: var(--mc-border-focus); color: var(--mc-text); }
  .pub .filter-chip.active {
    background: var(--mc-blue-600);
    border-color: var(--mc-blue-600);
    color: var(--mc-text-on-primary);
  }
  .pub .filter-empty {
    padding: var(--mc-space-8) var(--mc-space-4);
    text-align: center;
    color: var(--mc-text-muted);
    background: var(--mc-surface-sunken);
    border: 1px dashed var(--mc-border-strong);
    border-radius: var(--mc-radius-lg);
  }

  /* ---- chips ------------------------------------------------------------------ */
  .pub .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    padding: 2px var(--mc-space-2);
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    color: var(--mc-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
  }
  .pub .chip.berry { background: var(--mc-red-50); border-color: color-mix(in srgb, var(--mc-red-400) 30%, transparent); color: var(--mc-red-600); }
  .pub .chip.azure { background: var(--mc-blue-50); border-color: color-mix(in srgb, var(--mc-blue-400) 30%, transparent); color: var(--mc-blue-600); }
  .pub .chip.sage { background: var(--mc-green-50); border-color: color-mix(in srgb, var(--mc-green-400) 30%, transparent); color: var(--mc-green-700); }
  .pub .chip.amber { background: var(--mc-amber-50); border-color: color-mix(in srgb, var(--mc-amber-400) 30%, transparent); color: var(--mc-amber-700); }

  /* ---- the calculator leaf layout ---------------------------------------------- */
  .pub .tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--mc-space-6);
    align-items: start;
    padding-top: var(--mc-space-4);
  }
  @media (max-width: 1023px) { .pub .tool-layout { grid-template-columns: 1fr; } }
  .pub .tool-main { min-width: 0; }
  /* (S258-D1) the sticky-rail containment law: a sticky sidebar TALLER
     than the viewport minus its top offset permanently clips its own
     bottom content (the A-10 wall catch: the "Open food diary" card at
     1280x800 — the rail pins at 84px and its 771px column ends below the
     fold forever). The rail becomes internally scrollable exactly when it
     is too tall to stick in full; below 1023px it is static anyway. */
  .pub .tool-sidebar { display: flex; flex-direction: column; gap: var(--mc-space-4); position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
  @media (max-width: 1023px) { .pub .tool-sidebar { position: static; } }

  .pub .calc-glance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    margin-bottom: var(--mc-space-5);
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    font-size: .8125rem;
    color: var(--mc-text-secondary);
  }
  .pub .calc-widget {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-5);
    box-shadow: var(--mc-shadow-1);
    box-sizing: border-box;
    backdrop-filter: none;
  }
  .pub .calc-widget h2,
  .pub .calc-widget h3 {
    font-family: var(--mc-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--mc-space-4);
    color: var(--mc-text);
  }

  /* ---- forms --------------------------------------------------------------------- */
  .pub .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--mc-space-4);
  }
  .pub .form-group { display: flex; flex-direction: column; gap: var(--mc-space-2); min-width: 0; }
  .pub .form-group label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mc-text-secondary);
  }
  .pub .form-group input,
  .pub .form-group select,
  .pub .form-group textarea,
  .pub .calc-widget input,
  .pub .calc-widget select {
    width: 100%;
    min-height: var(--mc-control-height);
    padding: var(--mc-space-2) var(--mc-space-3);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    color: var(--mc-text);
    font-size: .9375rem;
    font-family: var(--mc-font-sans);
    box-sizing: border-box;
    transition: border-color var(--mc-dur-fast) var(--mc-ease),
      box-shadow var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .form-group input:focus,
  .pub .form-group select:focus,
  .pub .calc-widget input:focus,
  .pub .calc-widget select:focus {
    outline: none;
    border-color: var(--mc-border-focus);
    box-shadow: var(--mc-focus-ring);
  }
  .pub .form-group .unit,
  .pub .unit {
    font-size: .75rem;
    color: var(--mc-text-muted);
  }
  .pub .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-2);
  }
  .pub .radio-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    padding: var(--mc-space-2) var(--mc-space-3);
    border-radius: var(--mc-radius-pill);
    border: 1px solid var(--mc-border-strong);
    background: var(--mc-surface);
    color: var(--mc-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .radio-pill:hover { border-color: var(--mc-border-focus); color: var(--mc-text); }
  .pub .radio-pill.active,
  .pub .radio-pill[aria-pressed="true"] {
    background: var(--mc-blue-600);
    border-color: var(--mc-blue-600);
    color: var(--mc-text-on-primary);
  }

  /* ---- results (the member-dashboard stat pattern) --------------------------------- */
  .pub .results { margin-top: var(--mc-space-5); }
  .pub .result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: var(--mc-space-3);
  }
  .pub .result-item {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    box-shadow: var(--mc-shadow-1);
    backdrop-filter: none;
  }
  .pub .result-item .label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-text-muted); }
  .pub .result-item .value {
    font-family: var(--mc-font-display);
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--mc-blue-600);
    line-height: 1.2;
  }
  [data-theme="dark"] .pub .result-item .value { color: var(--mc-blue-400); }
  .pub .result-item .unit { font-size: .75rem; color: var(--mc-text-muted); }
  .pub .result-msg {
    margin-top: var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    background: var(--mc-blue-50);
    border: 1px solid color-mix(in srgb, var(--mc-blue-400) 30%, transparent);
    color: var(--mc-blue-700);
    border-radius: var(--mc-radius-md);
    font-size: .875rem;
  }
  [data-theme="dark"] .pub .result-msg { color: var(--mc-blue-200); }

  /* ---- the sidebar cards ------------------------------------------------------------- */
  .pub .sidebar-card {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-5);
    box-shadow: var(--mc-shadow-1);
    box-sizing: border-box;
    backdrop-filter: none;
  }
  .pub .sidebar-card h3,
  .pub .sidebar-card h4 {
    font-family: var(--mc-font-sans);
    font-size: .9375rem;
    font-weight: 700;
    margin: 0 0 var(--mc-space-3);
    color: var(--mc-text);
  }
  .pub .sidebar-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mc-space-2); }
  .pub .sidebar-card a { color: var(--mc-blue-600); text-decoration: none; font-size: .875rem; }
  .pub .sidebar-card a:hover { color: var(--mc-blue-700); text-decoration: underline; }

  /* ---- the trust blocks ---------------------------------------------------------------- */
  .pub .trust-block {
    margin-top: var(--mc-space-6);
    padding: var(--mc-space-5);
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
  }
  .pub .trust-head { display: flex; align-items: center; gap: var(--mc-space-2); font-weight: 650; color: var(--mc-text); margin-bottom: var(--mc-space-2); }
  .pub .trust-head svg { width: 18px; height: 18px; color: var(--mc-green-700); flex: none; }
  [data-theme="dark"] .pub .trust-head svg { color: var(--mc-green-400); }
  .pub .trust-meta { font-size: .75rem; color: var(--mc-text-muted); margin-bottom: var(--mc-space-3); }
  .pub .trust-note, .pub .trust-label { font-size: .8125rem; color: var(--mc-text-secondary); line-height: var(--mc-leading-normal); }
  .pub .trust-label { display: inline-block; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .6875rem; color: var(--mc-text-muted); margin-bottom: var(--mc-space-1); }
  .pub .trust-sep { border: none; border-top: 1px solid var(--mc-border); margin: var(--mc-space-3) 0; }

  /* ---- the FAQ accordion (app.js owns .open) --------------------------------------------- */
  .pub .faq-list { display: flex; flex-direction: column; gap: var(--mc-space-2); margin-top: var(--mc-space-4); }
  .pub .faq-item {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    overflow: hidden;
    backdrop-filter: none;
  }
  .pub .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-3);
    width: 100%;
    padding: var(--mc-space-3) var(--mc-space-4);
    background: transparent;
    border: none;
    color: var(--mc-text);
    font-size: .9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: var(--mc-font-sans);
  }
  .pub .faq-q:hover { background: var(--mc-surface-sunken); }
  .pub .faq-q .icon,
  .pub .faq-q svg { width: 16px; height: 16px; color: var(--mc-text-muted); flex: none; transition: transform var(--mc-dur-fast) var(--mc-ease); }
  .pub .faq-item.open .faq-q .icon,
  .pub .faq-item.open .faq-q svg { transform: rotate(180deg); color: var(--mc-blue-600); }
  .pub .faq-a {
    display: none;
    padding: 0 var(--mc-space-4) var(--mc-space-4);
  }
  .pub .faq-item.open .faq-a { display: block; }
  .pub .faq-a-inner { font-size: .875rem; color: var(--mc-text-secondary); line-height: var(--mc-leading-relaxed); }

  /* ---- the article prose (stored body typography) ------------------------------------------ */
  .pub .article,
  .pub .prose,
  .pub main article {
    font-size: 1rem;
    line-height: var(--mc-leading-relaxed);
    color: var(--mc-text);
  }
  .pub .article h1, .pub .article h2, .pub .article h3, .pub .article h4,
  .pub .prose h1, .pub .prose h2, .pub .prose h3, .pub .prose h4,
  .pub main article h1, .pub main article h2, .pub main article h3, .pub main article h4 {
    font-family: var(--mc-font-display);
    color: var(--mc-text);
    line-height: var(--mc-leading-snug);
    letter-spacing: -.01em;
    margin: var(--mc-space-8) 0 var(--mc-space-3);
  }
  .pub .article h1, .pub .prose h1, .pub main article h1 { font-size: clamp(1.625rem, 4vw, 2.25rem); margin-top: 0; }
  .pub .article h2, .pub .prose h2, .pub main article h2 { font-size: 1.375rem; }
  .pub .article h3, .pub .prose h3, .pub main article h3 { font-size: 1.125rem; }
  .pub .article h4, .pub .prose h4, .pub main article h4 { font-size: 1rem; }
  .pub .article p, .pub .prose p, .pub main article p { margin: 0 0 var(--mc-space-4); max-width: 75ch; }
  .pub .article a, .pub .prose a, .pub main article a { color: var(--mc-blue-600); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mc-blue-600) 35%, transparent); text-underline-offset: 3px; }
  .pub .article a:hover, .pub .prose a:hover, .pub main article a:hover { color: var(--mc-blue-700); text-decoration-color: currentColor; }
  .pub .article ul, .pub .article ol, .pub .prose ul, .pub .prose ol,
  .pub main article ul, .pub main article ol { margin: 0 0 var(--mc-space-4); padding-left: var(--mc-space-6); display: grid; gap: var(--mc-space-2); }
  .pub .article blockquote, .pub .prose blockquote, .pub main article blockquote {
    margin: var(--mc-space-5) 0;
    padding: var(--mc-space-4) var(--mc-space-5);
    border-left: 3px solid var(--mc-blue-600);
    background: var(--mc-surface-sunken);
    border-radius: 0 var(--mc-radius-md) var(--mc-radius-md) 0;
    color: var(--mc-text-secondary);
  }
  .pub .article table, .pub .prose table, .pub main article table,
  .pub .calc-widget table, .pub .sidebar-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    margin: 0 0 var(--mc-space-4);
  }
  .pub .article th, .pub .prose th, .pub main article th,
  .pub .calc-widget th, .pub .sidebar-card th {
    text-align: left;
    padding: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-surface-sunken);
    border-bottom: 2px solid var(--mc-border-strong);
    font-weight: 650;
    color: var(--mc-text);
    font-size: .8125rem;
  }
  .pub .article td, .pub .prose td, .pub main article td,
  .pub .calc-widget td, .pub .sidebar-card td {
    padding: var(--mc-space-2) var(--mc-space-3);
    border-bottom: 1px solid var(--mc-border);
    color: var(--mc-text-secondary);
  }
  .pub .article tr:hover td, .pub .prose tr:hover td { background: color-mix(in srgb, var(--mc-surface-sunken) 55%, transparent); }
  .pub .article code, .pub .prose code {
    font-family: var(--mc-font-mono);
    font-size: .8125em;
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xs);
    padding: 1px 5px;
  }
  .pub .article pre, .pub .prose pre {
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-4);
    overflow-x: auto;
    font-family: var(--mc-font-mono);
    font-size: .8125rem;
  }
  .pub .article img, .pub .prose img { max-width: 100%; height: auto; border-radius: var(--mc-radius-md); }
  .pub .article figure, .pub .prose figure { margin: var(--mc-space-5) 0; }

  /* ---- pagination (the #paginatedGrid/#paginationControls contract) ------------------------ */
  .pub #paginationControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    margin: var(--mc-space-6) 0 var(--mc-space-4);
    flex-wrap: wrap;
  }
  .pub #paginationControls button,
  .pub #paginationControls .page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--mc-space-2);
    border-radius: var(--mc-radius-md);
    border: 1px solid var(--mc-border-strong);
    background: var(--mc-surface);
    color: var(--mc-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
  }
  .pub #paginationControls button:hover { border-color: var(--mc-border-focus); color: var(--mc-text); }
  .pub #paginationControls button.active,
  .pub #paginationControls button[aria-current="page"] {
    background: var(--mc-blue-600);
    border-color: var(--mc-blue-600);
    color: var(--mc-text-on-primary);
  }

  /* ---- the S122 clinical governance notice ---------------------------------------------------- */
  .pub .clinical-notice,
  .pub .governance-notice {
    display: flex;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    margin: var(--mc-space-4) 0;
    background: var(--mc-amber-50);
    border: 1px solid color-mix(in srgb, var(--mc-amber-400) 40%, transparent);
    border-radius: var(--mc-radius-md);
    font-size: .8125rem;
    color: var(--mc-amber-700);
    line-height: var(--mc-leading-normal);
  }
  [data-theme="dark"] .pub .clinical-notice,
  [data-theme="dark"] .pub .governance-notice { color: var(--mc-amber-200); }
}


/* ==== source: patterns/blog-share.css (layer patterns) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — PATTERN: BLOG READER SHARE RAIL + TOC DISCLOSURE
   (S264, issue #264 — the founder blog reading-UX ruling)

   Scope: blog article pages (the .tool-layout corpus shell). Three surfaces:
   1. ONE `nav.mc-share-rail[aria-label="Share this article"]` (page-enhance.js).
      Founder placement ruling (binding, 2026-10-10): the rail lives in the
      vacant LEFT gutter of the reading column — never the right sidebar
      (that stays related tools/context) and never a fixed overlay. Wide:
      a 48px vertical sticky column (top clears the sticky header + reading
      progress; containment is the .tool-layout row so it stops before the
      footer). ≤1200px: the SAME single node renders as a quiet inline row
      after the article (JS matchMedia placement; this CSS is mobile-first).
      44px targets, focus-visible rings, aria-live copy status, reduced-motion
      safe, print-hidden.
   2. TOC disclosure: the server `blogTocLayer` nav.article-toc is the ONE
      authoritative contents list (no-JS keeps it fully rendered); the client
      collapses >6-item lists behind a real button (aria-expanded).
   3. Cascade law (the D245-01 discovery): unlayered normal declarations beat
      ALL layered normal declarations regardless of specificity — the one rule
      that must win over the RAW legacy sheet (the .tool-layout grid geometry)
      lives in the UNLAYERED tail below, scoped by the JS-added `.mc-has-rail`
      class so calculator/tool/hub pages are untouched. Everything else styles
      NEW classes and stays layered.
   ========================================================================== */@layer patterns {

  /* ---- share rail: mobile-first inline row (the ≤1200px form) ------------- */
  .mc-share-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: var(--mc-space-5, 24px) 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-md, 12px);
    background: var(--surface, #fff);
  }

  .mc-share-rail .mc-share-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3, #64748b);
    margin-right: 4px;
  }

  /* 44px minimum touch targets; the glyph is the 20px decoration. */
  .mc-share-rail a,
  .mc-share-rail button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm, 8px);
    background: transparent;
    color: var(--text-2, #334155);
    cursor: pointer;
    transition: color var(--mc-dur-fast, 120ms) var(--mc-ease, ease),
                background-color var(--mc-dur-fast, 120ms) var(--mc-ease, ease);
  }

  .mc-share-rail a:hover,
  .mc-share-rail button:hover {
    color: var(--primary, #2563eb);
    background: var(--mc-primary-soft, rgba(37, 99, 235, .08));
  }

  .mc-share-rail a:focus-visible,
  .mc-share-rail button:focus-visible,
  .mc-toc-toggle:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
  }

  .mc-share-rail svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* Truthful copy feedback: a polite live region, never a silent catch. */
  .mc-share-rail .mc-share-status {
    font-size: 12.5px;
    color: var(--mc-green-600, #16a34a);
    min-width: 0;
  }
  .mc-share-rail.mc-share-failed .mc-share-status {
    color: var(--danger, #dc2626);
  }

  /* The execCommand fallback textarea is functional-only, never visible. */
  .mc-share-rail .mc-share-copy-fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* ---- TOC disclosure (the server list keeps its inline card styling) ----- */
  nav.article-toc.mc-toc-collapsed ol li:nth-child(n + 7) { display: none; }

  .mc-toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 14px;
    min-height: 44px;
    border: 1px solid var(--mc-border-strong, #cbd5e1);
    border-radius: var(--r-sm, 8px);
    background: var(--surface, #fff);
    color: var(--primary, #2563eb);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--mc-dur-fast, 120ms) var(--mc-ease, ease),
                border-color var(--mc-dur-fast, 120ms) var(--mc-ease, ease);
  }
  .mc-toc-toggle:hover {
    background: var(--mc-primary-soft, rgba(37, 99, 235, .08));
    border-color: var(--primary, #2563eb);
  }
  nav.article-toc:not(.mc-toc-collapsed) .mc-toc-toggle { margin-top: 12px; }

  @media (prefers-reduced-motion: reduce) {
    .mc-share-rail a,
    .mc-share-rail button,
    .mc-toc-toggle { transition: none; }
  }

  @media print {
    .mc-share-rail { display: none; }
  }

  /* Dark theme: the legacy token re-mapping carries the rail; the only
     dedicated fix is the soft hover surface on the corpus dark canvas. */
  [data-theme="dark"] .mc-share-rail a:hover,
  [data-theme="dark"] .mc-share-rail button:hover,
  [data-theme="dark"] .mc-toc-toggle:hover {
    background: rgba(96, 165, 250, .14);
  }
  [data-theme="dark"] .mc-share-rail a,
  [data-theme="dark"] .mc-share-rail button {
    color: var(--text-2, #94a3b8);
  }
}

/* ==== UNLAYERED TAIL — the cascade law (see header, §3) ====================
   The wide-mode LEFT-gutter grid. Unlayered so it beats the RAW legacy
   `.tool-layout { grid-template-columns: 1fr 300px }` on real public pages
   and in the S264 battery (which injects legacy unlayered); specificity
   (0,2,0) > (0,1,0) does the rest. Scoped by the JS-added `.mc-has-rail`
   class — pages without the rail never see this geometry. Media-gated to
   the wide band: below 1201px the legacy/corpus single-column rules stand
   and the rail renders inline after the article. */
@media (min-width: 1201px) {
  .tool-layout.mc-has-rail {
    grid-template-columns: 56px minmax(0, 1fr) 300px;
  }

  .mc-share-rail {
    position: sticky;
    top: 96px; /* sticky header (~64px) + reading progress (~3px) + air */
    align-self: start;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 48px;
    margin: 0;
    padding: 10px 0;
    border-radius: 999px;
    align-items: center;
  }

  .mc-share-rail .mc-share-label {
    margin: 0 0 2px;
    font-size: 10.5px;
    letter-spacing: .06em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .mc-share-rail a,
  .mc-share-rail button {
    width: 44px;
    height: 44px;
  }

  /* (A22-07/R21-06, reviews 6107880165 + Audit-22) the wide rail must NOT
     remove the Copy live region from the a11y tree — page-enhance.js writes
     every Copy outcome ONLY here, so display:none silenced wide screen
     readers. Visually-hidden recipe: the node stays announced (computed
     display/visibility real, no aria-hidden); the 48px geometry holds; the
     narrow band keeps the text visibly inline (S264-A11Y-07 law). */
  .mc-share-rail .mc-share-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}


/* ==== source: patterns/home.css (layer patterns) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — PATTERN: HOME (the marketing home family)
   S247 / issues #253 + #254 — the Director's home-first-fold orders
   (6096868744 / 6096953876). Root cause of record: the v2 reset layer
   (reset.css h1..h6 { font-size: inherit; font-weight: inherit }) outranks
   the wrapped legacy heading rules via declared cascade-layer priority
   (legacy < reset < tokens < base < components < patterns < shells <
   utilities, build_ui2.py), and patterns/corpus.css restores only the
   .section-head headings — the home hero's .hero-content h1 and the
   pricing hero's h1 were left silently flattened to body size.

   This sheet is the legitimate-layer repair: a patterns-layer rule beats
   both the wrapped legacy sheet AND the reset WITHOUT !important, scoped
   tightly enough that no other surface changes:
     - .hero .hero-content h1 exists ONLY on the home hero (verified across
       the 358-row corpus; blog's h1 lives in .section-head.left and stays
       restored by corpus.css; pricing's h1 gets its own scoped restore).
     - the 26/28 other .section-head consumers are untouched (the .stack
       variant is opt-in, applied only to the home rows).
     - ring/pill rules are card-scoped (.today-card) — the Food Diary's
       shared .macro-rings vocabulary is untouched.

   The Today card presents a deterministic, internally consistent SAMPLE
   (ring offsets derived from the displayed values: offset = C × (1 −
   min(value/goal, 1)), C = 2π×32 = 201.1). Member truth never ships in
   this markup: it arrives client-side from the authorized diary summary
   API (modules/home-today.js), so the shared anonymous cache stays
   generic. No fake streak, no fake "On track", no per-refresh randomness.
   ========================================================================== */
@layer patterns {

  /* ---- the hero heading restore (the reset-defeat repair) ---------------- */
  .pub .hero .hero-content h1 {
    font-family: var(--mc-font-display);
    font-size: clamp(1.875rem, 4.5vw + 1rem, 3.5rem); /* 30px @320 → 56px desktop */
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--mc-text);
    margin: 0 0 var(--mc-space-4);
    max-width: 21ch;      /* the deliberate 2-line editorial wrap */
    text-wrap: balance;
  }
  .pub .hero .hero-content .eyebrow { margin-bottom: var(--mc-space-3); }
  .pub .hero .hero-content .lead { margin-bottom: var(--mc-space-6); }

  /* pricing-hero h1: same reset-defeat class (legacy clamp(34,5vw,52) +
     gradient text silently flattened) — the Director's cross-page census.
     Restoring only the defeated box; the legacy gradient declarations were
     never reset and recover automatically. */
  .pub .pricing-hero h1 {
    font-family: var(--mc-font-display);
    font-size: clamp(2.125rem, 5vw, 3.25rem); /* 34→52px, the legacy intent */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--mc-space-3);
  }

  /* ---- the home proof strip (replaces the Every/Real/Works/Free row) ----- */
  .pub .hero .hero-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mc-space-2) var(--mc-space-5);
    padding-top: var(--mc-space-4);
    border-top: 1px solid var(--mc-border);
    margin: 0;
  }
  .pub .hero .hero-proof li {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-size: .875rem;
    font-weight: 600;
    line-height: var(--mc-leading-snug);
    color: var(--mc-text-secondary);
  }
  .pub .hero .hero-proof svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--mc-green-600);
  }
  [data-theme="dark"] .pub .hero .hero-proof svg { color: var(--mc-green-400); }

  /* ---- the home section-head stack variant (opt-in, home rows only) ------ */
  .pub .section-head.stack {
    display: block;
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .pub .section-head.stack p {
    margin: var(--mc-space-2) 0 0;
    font-size: 1rem;
    line-height: var(--mc-leading-relaxed);
    color: var(--mc-text-secondary);
    text-wrap: pretty;
  }

  /* ---- the 248-D mobile census repair (the split-capture wave): the stat
     banner's serif display words (Research / Restaurant / Glossary / AI
     coach) clip at the glass-card edges on the 390/320 fold. The legacy
     2-up grid at <=680px (design-system) leaves ~115px of inner width
     against 36px serif words. One column below 480px gives every word its
     full row; a normal-declaration patterns rule wins the layer order (no
     !important), the 680px rule keeps serving wider phones/tablets, and
     the home row is the corpus's ONLY stat-banner consumer (census-checked). */
  @media (max-width: 480px) {
    .pub .stat-banner { grid-template-columns: 1fr; }
    .pub .stat-banner .item { border-right: 0; }
  }

  /* ---- the Today preview card (guest sample; member mode is JS-driven) --- */
  .pub .today-card { padding: var(--mc-space-5); }
  .pub .today-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mc-space-3);
    margin-bottom: var(--mc-space-2);
  }
  .pub .today-kicker {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mc-text-muted);
  }
  .pub .today-title {
    font-family: var(--mc-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mc-text);
    margin-top: 2px;
  }
  .pub .today-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--mc-border-strong);
    background: var(--mc-surface-sunken);
    color: var(--mc-text-secondary);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* the 248-D single-provenance law: the served sample ships the badge
     empty (one provenance line only); the member render fills it with
     "Your data" — an empty badge must not render as an empty pill */
  .pub .today-badge:empty { display: none; }
  .pub .today-kcal {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--mc-text-secondary);
    margin: 0 0 var(--mc-space-2);
    font-variant-numeric: tabular-nums;
  }
  .pub .today-kcal span {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mc-text-muted);
  }
  .pub .today-card .macro-ring svg { width: 76px; height: 76px; }
  .pub .today-card .ring-fg { transition: stroke-dashoffset .7s var(--mc-ease); }
  .pub .today-note {
    font-size: .8125rem;
    line-height: var(--mc-leading-relaxed);
    color: var(--mc-text-muted);
    margin: 0 0 var(--mc-space-3);
  }
  /* same law for the note slot: empty in the served sample (the working
     demo conveys interactivity); it speaks only on demo/error/member states */
  .pub .today-note:empty { display: none; }
  .pub .today-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mc-space-2);
    margin: 0;
  }
  .pub .today-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;               /* the touch contract */
    padding: var(--mc-space-2) var(--mc-space-4);
    border-radius: var(--mc-radius-md);
    border: 1px solid var(--mc-border-strong);
    background: var(--mc-surface);
    color: var(--mc-text);
    font-size: .8125rem;
    font-weight: 600;
    font-family: var(--mc-font-sans);
    cursor: pointer;
    transition: background-color var(--mc-dur-fast) var(--mc-ease),
      border-color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .today-btn:hover { background: var(--mc-surface-sunken); border-color: var(--mc-border-focus); }
  .pub .today-btn:focus-visible { outline: var(--mc-focus-outline); outline-offset: 2px; }
  .pub .today-btn.ghost { border-color: transparent; background: transparent; color: var(--mc-text-secondary); }
  .pub .today-link {
    margin-left: auto;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mc-blue-600);
    text-decoration: none;
  }
  .pub .today-link:hover { text-decoration: underline; }
  [data-theme="dark"] .pub .today-link { color: var(--mc-blue-400); }

  /* the member "over goal" tag — a factual state, never a health judgment */
  .pub .today-over {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mc-amber-50);
    color: var(--mc-amber-700, var(--mc-amber-500));
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  /* the ring token colors on v2 (the legacy literals retire with the row) */
  .pub .today-card .macro-ring[data-nutrient="protein"] .ring-fg { stroke: var(--mc-blue-600); }
  .pub .today-card .macro-ring[data-nutrient="carbs"] .ring-fg { stroke: var(--mc-amber-500); }
  .pub .today-card .macro-ring[data-nutrient="fat"] .ring-fg { stroke: var(--mc-green-500); }
  .pub .today-card .macro-ring .ring-track { stroke: var(--mc-border); }
  .pub .today-card .macro-ring .value {
    font-variant-numeric: tabular-nums;
  }
  .pub .today-card .macro-ring .value .unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--mc-text-muted);
  }

  /* the one-time reveal: rings settle once after state is resolved; the
     reduced-motion contract renders the final state immediately */
  @media (prefers-reduced-motion: reduce) {
    .pub .today-card .ring-fg { transition: none; }
    .pub .hero .hero-card,
    .pub .hero .hero-proof li,
    .pub .today-card { animation: none !important; }
  }

  /* mobile: the card stacks after the content (legacy hero-grid 1fr rule
     already collapses the grid); keep the actions reachable and the
     kcal line prominent */
  @media (max-width: 559px) {
    .pub .today-head { flex-wrap: wrap; }
    .pub .today-link { margin-left: 0; }
  }
}

/* ==== 251-D UNLAYERED TAIL — the cascade law (the D245-01 discovery) ======
   The public home loads the RAW legacy-public sheet AFTER nothing, so
   unlayered normal declarations beat ALL layered normal declarations
   regardless of specificity. The three 251-D Director findings
   (6100717827 #5/#6/#7 + the D248 residuals 6100722619) each need to win
   against RAW legacy rules, so they live here — scoped by
   `body.pub:has(.hero .hero-content h1)`, a structure the 247-D census
   proved unique to the home row (no-JS-safe; the copy edits make the
   degraded no-:has() path harmless anyway).

   251-D finding 6: the tool/article card descriptions render COMPLETE —
   the raw legacy `.tool-card p` line-clamp (design-system.css) is retired
   on the home row (the copy now carries concise complete sentences, so no
   card grows a third line at any plane).
   ========================================================================== */
body.pub:has(.hero .hero-content h1) .tool-card p {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
body.pub:has(.hero .hero-content h1) .article-card p,
body.pub:has(.hero .hero-content h1) .tool-card .d {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* 251-D finding 7: the four-tile serif strip (Research / Restaurant /
   Glossary / AI coach) compacted from the oversized gradient billboard to
   a proportionate link strip — the brand serif stays, the display size
   steps down (36px → 22px), the tiles lose the heavy gradient boxes and
   the "black vertical separating strokes" become quiet hairlines, the
   labels render on one line, and the strip's padding tightens. */
body.pub:has(.hero .hero-content h1) .stat-banner {
  gap: 0;
  padding: 14px 18px;
}
body.pub:has(.hero .hero-content h1) .stat-banner .item {
  padding: 8px 18px;
  border-right: 1px solid var(--border, #2c3444);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
}
body.pub:has(.hero .hero-content h1) .stat-banner .item:last-child {
  border-right: 0;
}
body.pub:has(.hero .hero-content h1) .stat-banner .num {
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 2px;
  white-space: nowrap;
}
body.pub:has(.hero .hero-content h1) .stat-banner .lbl {
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}
@media (max-width: 900px) {
  body.pub:has(.hero .hero-content h1) .stat-banner { grid-template-columns: 1fr 1fr; }
  body.pub:has(.hero .hero-content h1) .stat-banner .item {
    border-right: 0;
    border-bottom: 1px solid var(--border, #2c3444);
    padding: 10px 4px;
    text-align: center;
  }
  body.pub:has(.hero .hero-content h1) .stat-banner .item:nth-child(even) {
    border-left: 1px solid var(--border, #2c3444);
  }
  body.pub:has(.hero .hero-content h1) .stat-banner .item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}
@media (max-width: 480px) {
  body.pub:has(.hero .hero-content h1) .stat-banner { grid-template-columns: 1fr; }
  body.pub:has(.hero .hero-content h1) .stat-banner .item {
    border-left: 0;
    border-bottom: 1px solid var(--border, #2c3444);
    padding: 9px 2px;
  }
  body.pub:has(.hero .hero-content h1) .stat-banner .item:last-child {
    border-bottom: 0;
  }
}

/* 251-D finding 5: the 320/390 fold — the hero band compresses (padding +
   the tightened lead) so the sample rings peek into the first viewport
   without touching the D-248 sample-integrity machinery. */
@media (max-width: 480px) {
  body.pub:has(.hero .hero-content h1) .hero {
    padding-top: 18px;
    padding-bottom: 22px;
  }
  body.pub:has(.hero .hero-content h1) .hero .lead {
    margin-bottom: 16px;
  }
  body.pub:has(.hero .hero-content h1) .hero .hero-actions {
    margin-bottom: 16px;
  }
}


/* ==== source: shells/workspace.css (layer shells) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — SHELL: WORKSPACE (member area)
   The task-first application shell: persistent desktop rail (primary daily
   work → secondary → account), light topbar, mobile slide-over nav sheet.

   JS CONTRACTS PRESERVED (app.js / auth.js / notifications.js):
   .site-header, #mainNav (.main-nav + .open), #navAuth, .header-actions,
   .theme-toggle (#themeToggle), .menu-toggle (aria-expanded), .nav-item,
   .nav-label, .skip-to-content, #main-content, [data-mc-workspace] marker
   (smart-header + bottom-nav modules skip v2 workspace shells).
   ========================================================================== */
@layer shells {
  .mc-workspace {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--mc-rail-width) minmax(0, 1fr);
    background: var(--mc-canvas);
    transition: grid-template-columns var(--mc-dur-normal) var(--mc-ease);
  }

  /* (S124) the foldable rail: icon-only at 68px. The class lands on the
     .mc-workspace root; the grid + the rail contents respond together.
     State persists in localStorage (mcRailCollapsed) — restored pre-paint
     by the inline restore snippet in the shell partial. */
  .mc-workspace.rail-collapsed {
    grid-template-columns: var(--mc-rail-width-collapsed) minmax(0, 1fr);
  }

  /* ---- the rail: the same .site-header element, re-laid-out ----
     (S124) rail surface = --mc-rail-bg: one quiet step below the canvas
     tone + its own inset edge, so the white elevated content surfaces
     beside it always read as raised (the merge defect is closed). */
  .mc-workspace > .mc-rail-header {
    position: sticky;
    top: 0;
    z-index: var(--mc-z-nav);
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background: var(--mc-rail-bg);
    border-right: 1px solid var(--mc-border-strong);
    box-shadow: var(--mc-rail-edge);
    backdrop-filter: none;
    /* the container div stays (JS may reference it) but stops constraining */
  }
  .mc-workspace > .mc-rail-header .container {
    display: contents;
  }

  /* smart-header hide/show states are inert inside the workspace rail */
  .mc-workspace > .mc-rail-header.header-hidden,
  .mc-workspace > .mc-rail-header.header-visible {
    transform: none;
  }

  /* brand block */
  .mc-workspace .mc-rail-brand {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-5) var(--mc-space-5) var(--mc-space-4);
    text-decoration: none;
    color: var(--mc-text);
    flex: none;
  }
  /* (S124) folded rail: brand shows the mark only, centered */
  .mc-workspace.rail-collapsed .mc-rail-brand {
    justify-content: center;
    padding-left: var(--mc-space-2);
    padding-right: var(--mc-space-2);
  }
  .mc-workspace.rail-collapsed .mc-rail-brand .mc-brand-word {
    display: none;
  }
  .mc-workspace .mc-rail-brand .mc-brand-mark {
    width: 34px;
    height: 34px;
    flex: none;
  }
  .mc-workspace .mc-rail-brand .mc-brand-word {
    font-size: var(--mc-type-body-lg);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-tight);
    font-family: var(--mc-font-display);
  }

  /* ---- navigation sections ---- */
  .mc-workspace .mc-nav-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--mc-space-2) var(--mc-space-3);
    min-height: 0;
  }
  .mc-workspace .mc-nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--mc-space-4);
  }
  .mc-workspace .mc-nav-section + .mc-nav-section {
    border-top: 1px solid var(--mc-border);
    padding-top: var(--mc-space-4);
  }
  .mc-workspace .mc-nav-heading {
    font-size: var(--mc-type-micro);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-text-muted);
    padding: 0 var(--mc-space-3);
    margin-bottom: var(--mc-space-1);
  }
  /* (S124) folded rail: headings collapse to a hairline divider */
  .mc-workspace.rail-collapsed .mc-nav-heading {
    font-size: 0;
    padding: 0;
    height: 1px;
    margin: var(--mc-space-2) var(--mc-space-3);
    background: var(--mc-rail-bg-accent);
    overflow: hidden;
  }

  .mc-workspace .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: 0 var(--mc-space-3);
    height: 2.25rem;
    border-radius: var(--mc-radius-sm);
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-workspace .nav-item:hover {
    background: var(--mc-surface-sunken);
    color: var(--mc-text);
  }
  .mc-workspace .nav-item:focus-visible {
    outline: none;
    box-shadow: var(--mc-focus-ring);
  }
  .mc-workspace .nav-item.active {
    background: var(--mc-primary-subtle);
    color: var(--mc-primary-subtle-text);
    font-weight: var(--mc-weight-semibold);
  }
  .mc-workspace .nav-item.active::before {
    content: "";
    position: absolute;
    left: calc(var(--mc-space-3) * -1);
    width: 3px;
    height: 1.125rem;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-primary);
  }
  .mc-workspace .nav-item .nav-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: currentColor;
    opacity: 0.85;
  }
  .mc-workspace .nav-item .nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* (S124) the folded rail: icon-only nav items — centered, still
     focusable, labels carried by title/aria-label so nothing becomes
     unreachable or anonymous when the rail is folded. */
  .mc-workspace.rail-collapsed .nav-item {
    justify-content: center;
    padding: 0;
    gap: 0;
  }
  .mc-workspace.rail-collapsed .nav-item .nav-label {
    display: none;
  }
  .mc-workspace.rail-collapsed .nav-item .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .mc-workspace.rail-collapsed .nav-item.active::before {
    left: 4px;
  }
  .mc-workspace .nav-item .mc-nav-count {
    margin-left: auto;
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ---- rail footer: auth, theme, notifications ---- */
  .mc-workspace .mc-rail-foot {
    flex: none;
    border-top: 1px solid var(--mc-border);
    padding: var(--mc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    background: transparent;
  }
  /* (S124) folded rail: footer centers its controls */
  .mc-workspace.rail-collapsed .mc-rail-foot {
    align-items: center;
    padding: var(--mc-space-3) var(--mc-space-2);
  }
  .mc-workspace.rail-collapsed .mc-rail-foot .header-actions {
    justify-content: center;
  }
  .mc-workspace .mc-rail-foot .header-actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
  }
  .mc-workspace .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text-muted);
    background: transparent;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-workspace .theme-toggle:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-workspace .theme-toggle:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-workspace .theme-toggle svg { width: 1.125rem; height: 1.125rem; }
  .mc-workspace .theme-toggle .icon-sun,
  .mc-workspace .theme-toggle .icon-moon { display: none; }
  .mc-workspace[data-theme-mode="light"] .theme-toggle .icon-moon,
  .mc-workspace:not([data-theme-mode]) .theme-toggle .icon-moon { display: block; }
  [data-theme="dark"] .mc-workspace .theme-toggle .icon-sun { display: block; }
  [data-theme="dark"] .mc-workspace .theme-toggle .icon-moon { display: none; }

  /* the auth slot (#navAuth) sits at the rail bottom */
  .mc-workspace .nav-auth {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    min-height: 2.5rem;
  }

  /* notifications module injects #notifBell here */
  .mc-workspace .header-actions .mc-notif-slot,
  .mc-workspace #notifBell { margin-left: auto; }

  /* hamburger lives in the TOPBAR (mobile-only) */
  .mc-workspace .menu-toggle {
    display: none;
  }

  /* (S124) the fold control lives in the TOPBAR (desktop-only):
     same icon-button grammar as theme-toggle. Reveals/buries labels —
     the rail is ALWAYS usable both ways (title + aria-label). */
  .mc-workspace .rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text-muted);
    background: transparent;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-workspace .rail-toggle:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-workspace .rail-toggle:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-workspace .rail-toggle svg { width: 1.125rem; height: 1.125rem; }
  .mc-workspace .rail-toggle .rail-toggle-chev {
    transition: transform var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-workspace.rail-collapsed .rail-toggle .rail-toggle-chev {
    transform: rotate(180deg);
  }

  /* ---- topbar above main ---- */
  .mc-workspace .mc-topbar {
    position: sticky;
    top: 0;
    z-index: var(--mc-z-header);
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    height: var(--mc-topbar-height);
    padding: 0 var(--mc-space-6);
    background: color-mix(in srgb, var(--mc-canvas) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-workspace .mc-topbar .mc-topbar-title {
    font-size: var(--mc-type-body);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
  }
  .mc-workspace .mc-topbar .mc-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
  }

  /* ---- main column ---- */
  .mc-workspace .mc-workspace-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* (229-D, the D-V1 short-page footer ownership of record) the main
       column owns the viewport height: on short pages (Messages) the
       footer would otherwise render right after the content — a dark
       band in the upper third with empty canvas below. The column
       stretches to the viewport and the content area grows, so the footer
       lands at the true bottom on every page, long or short. */
    min-height: 100vh;
  }
  .mc-workspace .mc-workspace-content {
    padding: var(--mc-space-6) var(--mc-space-8) var(--mc-space-16);
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    min-width: 0;
    /* the content area absorbs the stretch (the footer follows it in the
       same column); its own bottom padding yields to the footer's rhythm */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  /* (245-D) the workspace footer flow terminator moved UNLAYERED — it
     sits with the chrome law below (the cascade reality: the unlayered
     chrome law beat this layered rule on margin-top, breaking the
     short-page flush; one unlayered footer block owns flow + chrome). */


  /* (D-046 R-1, the workspace scope pair of record) the rail's auth-corner
     avatar chip. The only served .nav-user-avatar styles were .pub-scoped
     (the public shell), and the workspace root never carries .pub — so the
     workspace rail rendered the fallback initial + the member name as bare
     inline text (the "CCapture Member Fixture" corrupted-account-data read,
     D-046-A). The workspace scope carries the same designed geometry here:
     the chip is the workspace's own, NOT a .pub promotion. */
  /* (D236-06 composed, cycle 244-D) #238's overflow-safety additions to
     the D-046 R-1 chip pair: the wrap sheds its flex minimum so the name
     can truncate; the avatar never shrinks. One authority, zero duplicate
     selectors — the #238 block and the #233 block fixed the same defect
     independently; the composed source keeps #233's richer trigger reset
     and takes #238's flex-correct truncation idiom. */
  .mc-workspace .nav-user-wrap { min-width: 0; }

  .mc-workspace .nav-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    background: none;
    border: none;
    padding: var(--mc-space-1) var(--mc-space-2);
    cursor: pointer;
    color: var(--mc-text-muted);
    border-radius: var(--mc-radius-sm);
  }
  .mc-workspace .nav-user-trigger:focus-visible {
    outline: var(--mc-focus-outline);
    outline-offset: 2px;
  }
  .mc-workspace .nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
  }
  .mc-workspace .nav-user-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-primary);
    color: var(--mc-text-on-primary);
    font-size: 13px;
    font-weight: 700;
  }
  .mc-workspace .nav-user-name {
    font-size: 14px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* (S124) THE GLASS TAX DIET — performance, the responsive-feel fix.
     Legacy .glass-surface / .chrono-card / .dash-card content pieces each
     carried backdrop-filter: blur(16px) saturate(1.6) = one GPU compositing
     layer with full-viewport blur sampling PER CARD (dozens on the member
     dashboard). Over a flat canvas the translucency reads as noise, so the
     v2 workspace renders them as solid elevated surfaces: same borders,
     same shadows, zero blur cost. Scoped to the content column only — the
     shell chrome (topbar strip) keeps its single small-area blur. */
  .mc-workspace .mc-workspace-content .glass-surface,
  .mc-workspace .mc-workspace-content .chrono-card,
  .mc-workspace .mc-workspace-content .dash-card,
  .mc-workspace .mc-workspace-content .stat-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--mc-surface);
  }

  /* ------------------ MOBILE: rail becomes slide-over sheet ---------------- */
  @media (max-width: 1023.5px) {
    .mc-workspace {
      grid-template-columns: minmax(0, 1fr);
    }
    .mc-workspace > .mc-rail-header {
      position: fixed;
      inset: 0 auto 0 0;
      width: min(300px, 86vw);
      transform: translateX(-100%);
      transition: transform var(--mc-dur-normal) var(--mc-ease);
      box-shadow: var(--mc-shadow-3);
      height: 100vh;
      height: 100dvh;
    }
    .mc-workspace > .mc-rail-header:has(.main-nav.open),
    .mc-workspace .mc-nav-sheet.open {
      /* .open lands on #mainNav per the menu-toggle contract */
    }
    /* the sheet: when #mainNav is open, the whole header slides in.
       (#mainNav is a child of .site-header; the header itself translates.) */
    .mc-workspace > .mc-rail-header:has(.mc-nav-sheet.open) {
      transform: translateX(0);
    }
    /* Fallback for browsers without :has() — the nav itself becomes the sheet */
    @supports not selector(:has(*)) {
      .mc-workspace .mc-nav-sheet {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 86vw);
        background: var(--mc-surface);
        transform: translateX(-100%);
        transition: transform var(--mc-dur-normal) var(--mc-ease);
        padding: var(--mc-space-4);
        z-index: var(--mc-z-modal);
      }
      .mc-workspace .mc-nav-sheet.open { transform: translateX(0); }
    }
    .mc-workspace .mc-nav-sheet {
      overflow-y: auto;
    }
    .mc-workspace .mc-topbar .menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: var(--mc-radius-sm);
      background: var(--mc-surface);
      border: 1px solid var(--mc-border);
      color: var(--mc-text-secondary);
      flex: none;
    }
    .mc-workspace .mc-topbar .menu-toggle:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
    .mc-workspace .mc-topbar .menu-toggle svg { width: 1.125rem; height: 1.125rem; }

    .mc-workspace .mc-topbar { padding: 0 var(--mc-space-4); }
    /* (S124) the fold control is desktop-only: mobile uses the drawer */
    .mc-workspace .mc-topbar .rail-toggle { display: none; }
    .mc-workspace .mc-workspace-content {
      padding: var(--mc-space-4) var(--mc-space-4) var(--mc-space-16);
    }
  }

  /* scrim behind the mobile sheet — pure sibling of the header */
  .mc-workspace .mc-nav-scrim {
    display: none;
  }
  @media (max-width: 1023.5px) {
    .mc-workspace .mc-nav-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--mc-z-modal) - 1);
      background: var(--mc-surface-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--mc-dur-normal) var(--mc-ease);
    }
    .mc-workspace .mc-nav-scrim.mc-open {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mc-workspace > .mc-rail-header { transition: none; }
  }
}

  /* ---- (235-D Lock C) the fab yields to the page's persistent bottom layers
     (the D-235-02 overlap fix, caught by the mobile-390 delta capture): the
     FIXED fab and the goals sticky save-bar share the bottom edge — at mobile
     widths the bar stacks to ~120px and the fab rendered ON the bar's glass
     surface (a subtle fixed-layer merge). The yield is a LAYOUT offset, not
     an interaction owner. */
  body:has(.save-bar) .ai-fab {
    bottom: 88px;
  }
  @media (max-width: 640px) {
    body:has(.save-bar) .ai-fab {
      bottom: 172px;
    }
  }

/* (245-D, D236-04/D236-05) THE MEMBER-FAMILY FOOTER CHROME LAW — UNLAYERED on purpose — the
     one authority for the S75 partial's chrome on every member surface.
     The defect class of record: the legacy design-system .site-footer
     band (unlayered #0F172A dark navy, 56px pad, 80px top margin) leaked
     onto light workspace surfaces — the D236-05 dark band mid-page on
     short pages, the D236-04 dark strip class on the AI member app — and
     NINE pages answered it with per-page <style id="footer-fix">
     !important dark-force hacks (three treatments, one chrome). The law:
     the partial carries .mc-app-footer and THIS block owns its look once
     — the light sunken surface matching the .pub footer grammar, the
     workspace rhythm, the muted text. The flow terminator above still
     owns the placement (auto top margin, the negative bottom pad
     cancellation); this block owns only the chrome. The AI member app
     (not a .mc-workspace root) rides the same class law from the same
     bundle; the dark theme reuses the dark tokens by var — no
     [data-theme] fork needed. THE CASCADE REALITY this block is written
     for: unlayered normal declarations beat ALL layered normal
     declarations regardless of specificity — the composed surfaces load
     only the two-link cascade (the legacy wrapped INSIDE the bundle
     layers, so this law won even layered), but the AI member app loads
     the ten RAW legacy sheets (unlayered) AFTER the v2 bundle, where the
     layered law could never win. Hence the law lives UNLAYERED (this
     section, after the @layer shells close): on the AI page both the raw
     .site-footer and this law are unlayered and the element-qualified
     selector (footer = 0,1,1 vs .site-footer = 0,1,0) wins by
     specificity on every load order — no !important anywhere. */
/* (245-D, D236-05) THE WORKSPACE FOOTER FLOW TERMINATOR — unlayered with
   the chrome law (the cascade reality above): the footer lands flush at
   the true bottom (the content's own bottom padding is the pre-footer
   rhythm, which the auto margin already owns — the negative margin
   cancels the leftover pad below the band; the mobile block re-cancels
   its own 16-unit pad below). The (0,2,1) specificity wins the unlayered
   tie against the chrome law's margin-top on every workspace surface;
   the AI member app (no .mc-workspace root) keeps the chrome margin. */
.mc-workspace .mc-workspace-content > .site-footer {
  margin-top: auto;
  margin-bottom: calc(-1 * var(--mc-space-16));
}

footer.mc-app-footer {
    margin-top: var(--mc-space-10);
    background: var(--mc-surface-sunken);
    border-top: 1px solid var(--mc-border);
    color: var(--mc-text-muted);
    padding: var(--mc-space-6) 0 var(--mc-space-5);
}
.mc-app-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--mc-space-5);
}
.mc-app-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mc-space-3);
    color: var(--mc-text-muted);
    font-size: 13px;
}
.mc-app-footer .footer-social {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
}
.mc-app-footer .footer-social a {
    color: var(--mc-text-muted);
    transition: color var(--mc-dur-fast) var(--mc-ease);
}
.mc-app-footer .footer-social a:hover { color: var(--mc-text-secondary); }

/* ---- (254-D) the S134-FC9 §5 persistent Cookie Settings entry -----------
   The SAME quiet-affordance contract the public footer carries
   (shells/public.css `.pub .footer-cookie-settings`), mirrored into the
   workspace chrome's one owner (D236-04/05): the member pages wear a bare
   <body>, so the `.pub` scope cannot reach them — without these rules the
   §5 button renders raw on every member surface (the A10 class). */
.mc-app-footer .footer-cookie-settings {
    border: none;
    background: none;
    /* (S258-D1) the button measured 20.8px tall — vertical padding lifts
       the pointer target over the WCAG 2.5.8 24px gate. */
    padding: 2px 0;
    font: inherit;
    font-size: inherit;
    color: var(--mc-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.mc-app-footer .footer-cookie-settings:hover { color: var(--mc-text); }
.mc-app-footer .footer-cookie-settings:focus-visible {
    outline: 2px solid var(--mc-primary);
    outline-offset: 2px;
}


/* ==== source: shells/admin.css (layer shells) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — SHELL: ADMIN CONSOLE
   The operating console: dense, neutral, precise (director §5/§22).
   Same tokens/grammar as member+public; more density, less decoration.

   JS CONTRACTS PRESERVED (admin.js / admin-notifications.js / admin-search.js):
   .admin-layout (+ .sidebar-collapsed / .sidebar-open), #adminSidebar,
   #adminNavRoot, .nav-group (+ .open), .nav-group-toggle, .nav-group-items,
   .nav-item (+ .active / .nav-hit), .nav-label, .nav-icon, #sidebarToggle,
   [data-toggle="mobile-sidebar"], #adminThemeToggle, [data-admin-search],
   #adminBell / #adminBellBtn / #adminBellBadge / #adminBellDropdown /
   #adminBellList / #adminBellMarkAll, #profileDropdown (+ .show),
   .profile-btn, #adminMain, body.modal-open, localStorage nav-group keys.

   Specificity strategy: rules are scoped under .mc-admin.admin-layout
   (0,2,0+) so the v2 console chrome wins over legacy admin.css shell rules
   without !important and without touching un-migrated page-body classes.
   ========================================================================== */
@layer shells {
  .mc-admin.admin-layout {
    --mc-density: 0.875;
    min-height: 100vh;
    background: var(--mc-canvas);
    grid-template-columns: var(--mc-admin-sidebar) minmax(0, 1fr);
    grid-template-rows: var(--mc-topbar-height) minmax(0, 1fr);
    grid-template-areas: "sidebar topbar" "sidebar main";
    color: var(--mc-text);
    font-family: var(--mc-font-sans);
    font-size: var(--mc-type-body-sm);
  }
  .mc-admin.admin-layout.sidebar-collapsed {
    grid-template-columns: var(--mc-admin-sidebar-collapsed) minmax(0, 1fr);
  }

  /* ---- sidebar: the console's distinct rail pane ----
     (S124) same figure-ground contract as the member rail: the rail is
     the quiet sunken pane (--mc-rail-bg + inset edge), the console's
     elevated white surfaces read raised against it. The merge defect
     (white rail on near-white canvas beside white cards) is closed. */
  .mc-admin .admin-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mc-rail-bg);
    border-right: 1px solid var(--mc-border-strong);
    box-shadow: var(--mc-rail-edge);
    overflow: hidden;
    transition: width var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-admin.admin-layout.sidebar-collapsed .admin-sidebar {
    /* (S124) the folded width applies at desktop widths only: below the
       980px breakpoint the sidebar is the slide-over drawer and must keep
       its full sheet width (the resize-after-collapse defect). */
    width: var(--mc-admin-sidebar-collapsed);
  }
  @media (max-width: 979.5px) {
    .mc-admin.admin-layout.sidebar-collapsed .admin-sidebar { width: min(300px, 84vw); }
  }

  .mc-admin .admin-sidebar .mc-admin-brand {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
    text-decoration: none;
    color: var(--mc-text);
    flex: none;
    min-height: var(--mc-topbar-height);
  }
  .mc-admin .mc-admin-brand .mc-brand-mark { width: 30px; height: 30px; flex: none; }
  .mc-admin .mc-admin-brand .mc-admin-brand-name {
    font-size: var(--mc-type-body);
    font-weight: var(--mc-weight-semibold);
    font-family: var(--mc-font-display);
    letter-spacing: var(--mc-tracking-tight);
    white-space: nowrap;
  }
  .mc-admin .mc-admin-brand .mc-admin-brand-tag {
    display: block;
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    font-family: var(--mc-font-sans);
    font-weight: var(--mc-weight-medium);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
  }
  .mc-admin.admin-layout.sidebar-collapsed .mc-admin-brand .mc-admin-brand-text {
    display: none;
  }

  /* ---- nav groups (open/collapse contract from admin.js) ---- */
  .mc-admin #adminNavRoot {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--mc-space-3) var(--mc-space-2) var(--mc-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    scrollbar-width: thin;
  }
  .mc-admin .nav-group + .nav-group { margin-top: var(--mc-space-1); }

  .mc-admin .nav-group-toggle {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    width: 100%;
    padding: var(--mc-space-2) var(--mc-space-3);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-text-muted);
    border-radius: var(--mc-radius-sm);
    transition: color var(--mc-dur-fast) var(--mc-ease), background-color var(--mc-dur-fast) var(--mc-ease);
    text-align: left;
  }
  .mc-admin .nav-group-toggle:hover { color: var(--mc-text); background: var(--mc-surface-sunken); }
  .mc-admin .nav-group-toggle:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-admin .nav-group-toggle .nav-group-icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: none;
    color: currentColor;
  }
  .mc-admin .nav-group-toggle .nav-group-label { flex: 1 1 auto; white-space: nowrap; }
  .mc-admin .nav-group-toggle .nav-group-chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    transition: transform var(--mc-dur-fast) var(--mc-ease);
    opacity: 0.7;
  }
  .mc-admin .nav-group.open .nav-group-toggle .nav-group-chevron { transform: rotate(90deg); }
  .mc-admin .nav-group-toggle .nav-group-count {
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .mc-admin .nav-group-items {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: var(--mc-space-1) 0 var(--mc-space-2);
  }
  .mc-admin .nav-group.open .nav-group-items { display: flex; }
  .mc-admin.admin-layout.sidebar-collapsed .nav-group-items {
    /* collapsed rail: show the group's items as icon-only hints */
    display: flex;
    align-items: center;
    padding-left: var(--mc-space-2);
  }
  .mc-admin.admin-layout.sidebar-collapsed .nav-group-toggle .nav-group-label,
  .mc-admin.admin-layout.sidebar-collapsed .nav-group-toggle .nav-group-chevron,
  .mc-admin.admin-layout.sidebar-collapsed .nav-group-toggle .nav-group-count,
  .mc-admin.admin-layout.sidebar-collapsed .nav-item .nav-label {
    display: none;
  }

  .mc-admin .nav-item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: 0 var(--mc-space-3);
    height: 2rem;
    border-radius: var(--mc-radius-xs);
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-regular);
    color: var(--mc-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  /* (S124) folded rail: icon-only items centered; the title attribute
     (already on every nav-item markup) carries the label. */
  .mc-admin.admin-layout.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 0;
    gap: 0;
  }
  .mc-admin .nav-item:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-admin .nav-item:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-admin .nav-item.active {
    background: var(--mc-primary-subtle);
    color: var(--mc-primary-subtle-text);
    font-weight: var(--mc-weight-semibold);
  }
  .mc-admin .nav-item .nav-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: currentColor;
    opacity: 0.8;
  }
  .mc-admin .nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; }

  /* nav search filtering states (admin.js) */
  .mc-admin #adminNavRoot.nav-searching .nav-group-items { display: flex; }
  .mc-admin #adminNavRoot.nav-searching .nav-item { display: none; }
  .mc-admin #adminNavRoot.nav-searching .nav-item.nav-hit { display: flex; }
  .mc-admin #adminNavRoot.nav-searching .nav-group:not(.has-hits) { display: none; }

  /* sidebar footer (user identity) */
  .mc-admin .mc-admin-sidefoot {
    flex: none;
    border-top: 1px solid var(--mc-border);
    padding: var(--mc-space-3) var(--mc-space-4);
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    min-height: var(--mc-topbar-height);
  }
  .mc-admin.admin-layout.sidebar-collapsed .mc-admin-sidefoot .mc-admin-sidefoot-text { display: none; }
  .mc-admin .mc-admin-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--mc-primary-subtle);
    color: var(--mc-primary-subtle-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-semibold);
    flex: none;
  }
  .mc-admin .mc-admin-sidefoot-name {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-admin .mc-admin-sidefoot-role {
    font-size: var(--mc-type-micro);
    color: var(--mc-text-muted);
  }

  /* ---- topbar ---- */
  .mc-admin .admin-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: 0 var(--mc-space-5);
    background: color-mix(in srgb, var(--mc-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mc-border);
    min-width: 0;
  }
  .mc-admin .topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text-muted);
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-admin .topbar-toggle:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-admin .topbar-toggle:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-admin .topbar-toggle svg { width: 1.125rem; height: 1.125rem; }
  .mc-admin .topbar-toggle.desktop-only { display: inline-flex; }
  .mc-admin .topbar-toggle[data-show-below="980"] { display: none; }

  .mc-admin .page-title {
    font-size: var(--mc-type-body);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .mc-admin .page-title .page-subtitle-inline {
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-regular);
    color: var(--mc-text-muted);
    margin-left: var(--mc-space-2);
  }

  .mc-admin .topbar-search {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
  }
  .mc-admin .topbar-search .search-icon {
    position: absolute;
    left: var(--mc-space-3);
    width: 0.9375rem;
    height: 0.9375rem;
    color: var(--mc-text-muted);
    pointer-events: none;
  }
  .mc-admin .topbar-search input {
    width: 240px;
    height: 2.25rem;
    padding: 0 var(--mc-space-3) 0 var(--mc-space-8);
    font-size: var(--mc-type-caption);
    background: var(--mc-surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text);
    transition: border-color var(--mc-dur-fast) var(--mc-ease), background-color var(--mc-dur-fast) var(--mc-ease), width var(--mc-dur-normal) var(--mc-ease);
  }
  .mc-admin .topbar-search input::placeholder { color: var(--mc-text-muted); }
  .mc-admin .topbar-search input:focus {
    outline: none;
    background: var(--mc-surface);
    border-color: var(--mc-border-focus);
    box-shadow: var(--mc-focus-ring);
    width: 320px;
  }

  .mc-admin .topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    flex: none;
  }
  .mc-admin .topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text-muted);
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-admin .topbar-icon-btn:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-admin .topbar-icon-btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-admin .topbar-icon-btn svg { width: 1.125rem; height: 1.125rem; }

  .mc-admin .bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 3px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-danger);
    color: #FFFFFF;
    font-size: var(--mc-type-micro);
    font-weight: var(--mc-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .mc-admin .bell-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 340px;
    max-height: 420px;
    display: none;
    flex-direction: column;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-2);
    overflow: hidden;
    z-index: var(--mc-z-dropdown);
  }
  .mc-admin .bell-dropdown.show { display: flex; }
  .mc-admin .bell-dropdown .bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-3) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text-secondary);
  }
  .mc-admin .bell-dropdown .bell-head button {
    font-size: var(--mc-type-micro);
    color: var(--mc-link);
    font-weight: var(--mc-weight-medium);
  }
  .mc-admin .bell-dropdown .bell-list {
    overflow-y: auto;
    max-height: 360px;
  }
  .mc-admin .bell-dropdown .bell-empty {
    padding: var(--mc-space-8);
    text-align: center;
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }

  .mc-admin .view-site-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    height: 2.25rem;
    padding: 0 var(--mc-space-3);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    color: var(--mc-text-secondary);
    text-decoration: none;
    border-radius: var(--mc-radius-sm);
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-admin .view-site-link:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-admin .view-site-link svg { width: 0.875rem; height: 0.875rem; }

  /* profile dropdown */
  .mc-admin .profile-menu { position: relative; }
  .mc-admin .profile-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    height: 2.25rem;
    padding: 0 var(--mc-space-2);
    border-radius: var(--mc-radius-sm);
    transition: background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-admin .profile-btn:hover { background: var(--mc-surface-sunken); }
  .mc-admin .profile-btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-admin .profile-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 240px;
    display: none;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-2);
    overflow: hidden;
    z-index: var(--mc-z-dropdown);
  }
  .mc-admin .profile-dropdown.show { display: block; }
  .mc-admin .profile-dropdown .pd-header {
    padding: var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-admin .profile-dropdown .pd-name {
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-semibold);
    color: var(--mc-text);
  }
  .mc-admin .profile-dropdown .pd-email {
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-admin .profile-dropdown .pd-item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-4);
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-secondary);
    text-decoration: none;
    transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-admin .profile-dropdown .pd-item:hover { background: var(--mc-surface-sunken); color: var(--mc-text); }
  .mc-admin .profile-dropdown .pd-item svg { width: 0.9375rem; height: 0.9375rem; }
  .mc-admin .profile-dropdown form .pd-item {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
  }

  /* ---- main + footer ---- */
  .mc-admin .admin-main {
    grid-area: main;
    min-width: 0;
    padding: var(--mc-space-6) var(--mc-space-8);
  }
  /* admin density mode: the same system, denser type */
  .mc-admin.mc-density-admin { font-size: var(--mc-type-body-sm); }

  /* (S124) THE GLASS TAX DIET for the console: legacy .glass-surface /
     .admin-card content pieces render as solid elevated surfaces (the
     blur(16px) saturate(1.6) backdrop filter cost one GPU layer each).
     The topbar keeps its single small-area blur. */
  .mc-admin .admin-main .glass-surface,
  .mc-admin .admin-main .admin-card,
  .mc-admin .admin-main .stat-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--mc-surface);
  }

  /* small chrome helpers (replacing per-element inline styles) */
  .mc-admin .mc-admin-version {
    margin-left: auto;
    font-size: var(--mc-type-micro);
    font-weight: var(--mc-weight-semibold);
    letter-spacing: var(--mc-tracking-wide);
    color: var(--mc-text-muted);
    background: var(--mc-surface-sunken);
    padding: 2px var(--mc-space-2);
    border-radius: var(--mc-radius-pill);
    white-space: nowrap;
  }
  .mc-admin .mc-admin-logout-form { margin: 0; }
  .mc-admin .mc-admin-maint-link {
    margin-left: var(--mc-space-2);
    color: inherit;
    text-decoration: underline;
  }
  .mc-admin .admin-footer {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    padding: var(--mc-space-4) var(--mc-space-8);
    border-top: 1px solid var(--mc-border);
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
    flex-wrap: wrap;
  }
  .mc-admin .admin-footer a { color: var(--mc-link); text-decoration: none; }
  .mc-admin .admin-footer a:hover { text-decoration: underline; }

  /* maintenance banner */
  .mc-admin .maintenance-banner {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-8);
    background: var(--mc-warning-subtle);
    color: var(--mc-warning-subtle-text);
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    border-bottom: 1px solid color-mix(in srgb, var(--mc-warning) 30%, transparent);
  }
  .mc-admin .maintenance-banner svg { width: 0.875rem; height: 0.875rem; }

  /* drawer backdrop (mobile) */
  .mc-admin .admin-drawer-backdrop {
    display: none;
  }

  /* ------------------ responsive: the ≤980px drawer ------------------ */
  @media (max-width: 979.5px) {
    .mc-admin.admin-layout {
      grid-template-columns: minmax(0, 1fr);
      /* D243-01: the topbar row must AUTO-size on the drawer planes — the
         wrapped flex (the search item drops to its own line) needs ~90px,
         but the inherited 56px --mc-topbar-height row kept the fixed height
         and the spilled second line rendered ON TOP of the page header
         (the h1/Analytics region) at 768/390/zoom. auto pushes main down
         instead; no magic number, no overlap. */
      grid-template-rows: auto minmax(0, 1fr);
      grid-template-areas: "topbar" "main";
    }
    .mc-admin .admin-sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      width: min(300px, 84vw);
      z-index: var(--mc-z-modal);
      transform: translateX(-100%);
      transition: transform var(--mc-dur-normal) var(--mc-ease);
      box-shadow: var(--mc-shadow-3);
    }
    .mc-admin.admin-layout.sidebar-open .admin-sidebar { transform: translateX(0); }
    .mc-admin .admin-drawer-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--mc-z-modal) - 1);
      background: var(--mc-surface-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--mc-dur-normal) var(--mc-ease);
    }
    .mc-admin.admin-layout.sidebar-open .admin-drawer-backdrop { opacity: 1; pointer-events: auto; }
    .mc-admin .topbar-toggle.desktop-only { display: none; }
    .mc-admin .topbar-toggle[data-show-below="980"] { display: inline-flex; }
    .mc-admin .topbar-search input { width: 160px; }
    .mc-admin .topbar-search input:focus { width: 200px; }
    .mc-admin .admin-main { padding: var(--mc-space-4); }
    .mc-admin .admin-footer { padding: var(--mc-space-4); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mc-admin .admin-sidebar,
    .mc-admin .topbar-search input { transition: none; }
  }

  /* ============================================================
     (S134-A1) THE OPERATIONAL CONTROL PLANE - Command Center,
     unified search grammar, kernel-composed bell visibility, and
     the operator-context presentation. Scoped under .mc-admin;
     v2 layer order out-ranks the legacy declarations - no
     !important, no override layer, zero raw z-index (the ladder
     tokens are the only z authority).
     ============================================================ */

  /* --- D-6: the unified search grammar (kernel popover) --- */
  .mc-admin .topbar-search { position: relative; }
  .mc-admin .admin-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md, 10px);
    box-shadow: var(--mc-shadow-lg, 0 10px 30px rgba(0, 0, 0, .14));
    max-height: 420px;
    overflow-y: auto;
    z-index: var(--mc-z-dropdown);
  }
  .mc-admin .admin-search-dropdown[hidden] { display: none; }
  .mc-admin .admin-search-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mc-text-muted);
  }
  .mc-admin .admin-search-group-icon { display: inline-flex; width: 12px; height: 12px; color: var(--mc-text-muted); }
  .mc-admin .admin-search-group-icon svg { width: 12px; height: 12px; }
  .mc-admin .admin-search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 14px;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
  }
  .mc-admin .admin-search-item.active,
  .mc-admin .admin-search-item:hover { background: var(--mc-surface-sunken); border-left-color: var(--mc-primary); }
  .mc-admin .admin-search-item-title { font-size: 13px; font-weight: 600; color: var(--mc-text); }
  .mc-admin .admin-search-item-sub { font-size: 11.5px; color: var(--mc-text-muted); }
  .mc-admin .admin-search-empty { padding: 14px; font-size: 12.5px; color: var(--mc-text-muted); }

  /* (S134-A1) The footer join: the legacy footer's own light block
     paints a white band over the dark canvas — the v2 scope renders
     it transparent over the canvas with the token border (no
     !important; the layer order outranks the legacy declaration). */
  .mc-admin .admin-footer {
    background: transparent;
    border-top: 1px solid var(--mc-border);
    color: var(--mc-text-muted);
  }

  /* --- D-9: the bell panel is kernel-owned ([hidden], never .open) --- */
  .mc-admin .admin-bell .bell-dropdown[hidden] { display: none; }
  .mc-admin .admin-bell .bell-dropdown:not([hidden]) { display: block; }
  .mc-admin .admin-bell .bell-item:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }

  /* --- S1A.1: the Command Center (the Needs Attention triage view) --- */
  .mc-admin .mc-cc-freeze {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--mc-space-4) var(--mc-space-6) 0;
    padding: var(--mc-space-3) var(--mc-space-4);
    border: 1px solid var(--mc-warning, #d97706);
    border-radius: var(--mc-radius-md, 10px);
    background: color-mix(in srgb, var(--mc-warning, #d97706) 10%, var(--mc-surface));
    color: var(--mc-text);
    font-size: var(--mc-type-body-sm, 13px);
  }
  /* (S134-A1c, blocker 4) the freeze-UNKNOWN state: a distinct neutral
     presentation — never folded into the frozen banner, never silent. */
  .mc-admin .mc-cc-freeze-unknown {
    border-color: var(--mc-border-strong, var(--mc-border));
    border-style: dashed;
    background: color-mix(in srgb, var(--mc-text-muted, #6b7280) 8%, var(--mc-surface));
  }
  .mc-admin .mc-cc { margin: var(--mc-space-5) var(--mc-space-6); }
  .mc-admin .mc-cc-queue-head h2 { margin: 0; font-size: 18px; font-weight: 650; color: var(--mc-text); }
  .mc-admin .mc-cc-queue-sub { margin-top: 2px; font-size: 12.5px; color: var(--mc-text-muted); }
  .mc-admin .mc-cc-families {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--mc-space-3);
    margin-top: var(--mc-space-4);
  }
  .mc-admin .mc-cc-family {
    /* D236-08: cards hug their own content (align-self:start). The grid's
       default stretch pulled every sparse family card to the row's tallest
       sibling, rendering hundreds of px of empty white interior below one
       or two rows — the "reserved-but-unrendered widget" void class the
       236-D fleet registered. Content-hugging is the honest dashboard
       grammar; the row track still sizes to the tallest sibling. */
    align-self: start;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md, 12px);
    overflow: hidden;
  }
  .mc-admin .mc-cc-family.sev-critical { border-color: var(--mc-danger, #dc2626); }
  .mc-admin .mc-cc-family.sev-warning { border-color: color-mix(in srgb, var(--mc-warning, #d97706) 55%, var(--mc-border)); }
  .mc-admin .mc-cc-family-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-surface-sunken);
  }
  .mc-admin .mc-cc-family-icon { display: inline-flex; color: var(--mc-text-muted); }
  .mc-admin .mc-cc-family-label { font-weight: 600; font-size: 13px; color: var(--mc-text); }
  .mc-admin .mc-cc-sev {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
  }
  .mc-admin .mc-cc-sev.sev-critical { background: var(--mc-danger, #dc2626); color: #fff; }
  .mc-admin .mc-cc-sev.sev-warning { background: var(--mc-warning, #d97706); color: #fff; }
  .mc-admin .mc-cc-sev.sev-info { background: var(--mc-surface-sunken); color: var(--mc-text-muted); }
  /* (S134-A1c) the distinct truth states: the canonical pass, the
     unavailable read, and the empty population — never one green line. */
  .mc-admin .mc-cc-sev.sev-pass { background: color-mix(in srgb, var(--mc-success, #16a34a) 16%, var(--mc-surface)); color: var(--mc-success, #16a34a); }
  /* (#134, D-022) the configured state: an integration configured but
     not verified-healthy carries its own neutral chip - never the pass
     green, never the warning amber. */
  .mc-admin .mc-cc-sev.sev-configured { background: color-mix(in srgb, var(--mc-text-muted, #64748b) 14%, var(--mc-surface)); color: var(--mc-text-muted, #64748b); }
  .mc-admin .mc-cc-sev.sev-unavailable { background: color-mix(in srgb, var(--mc-warning, #d97706) 16%, var(--mc-surface)); color: var(--mc-warning, #d97706); border: 1px dashed color-mix(in srgb, var(--mc-warning, #d97706) 55%, transparent); }
  .mc-admin .mc-cc-sev.sev-empty { background: var(--mc-surface-sunken); color: var(--mc-text-muted); border: 1px dashed var(--mc-border); }
  .mc-admin .mc-cc-family-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--mc-primary);
    text-decoration: none;
  }
  .mc-admin .mc-cc-family-link:hover { text-decoration: underline; }
  .mc-admin .mc-cc-family-link:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); border-radius: 6px; }
  .mc-admin .mc-cc-family-body { display: flex; flex-direction: column; }
  .mc-admin .mc-cc-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid color-mix(in srgb, var(--mc-border) 55%, transparent);
  }
  .mc-admin .mc-cc-row:first-child { border-top: 0; }
  a.mc-cc-row:hover { background: var(--mc-surface-sunken); }
  a.mc-cc-row:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }
  .mc-admin .mc-cc-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: var(--mc-text-muted); }
  .mc-admin .mc-cc-dot.sev-critical { background: var(--mc-danger, #dc2626); }
  .mc-admin .mc-cc-dot.sev-warning { background: var(--mc-warning, #d97706); }
  .mc-admin .mc-cc-dot.sev-info { background: var(--mc-primary); }
  .mc-admin .mc-cc-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .mc-admin .mc-cc-row-title { font-size: 12.5px; font-weight: 550; color: var(--mc-text); }
  .mc-admin .mc-cc-row-meta { font-size: 11.5px; color: var(--mc-text-muted); }
  .mc-admin .mc-cc-row.mc-cc-zero .mc-cc-row-title { font-weight: 400; color: var(--mc-text-muted); }
  .mc-admin .mc-cc-row.mc-cc-unavailable .mc-cc-row-title { font-weight: 550; color: var(--mc-warning, #d97706); }
  .mc-admin .mc-cc-row.mc-cc-unavailable .mc-cc-row-meta { font-size: 11px; }

  /* --- the compact corpus summary strip --- */
  .mc-admin .mc-cc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--mc-space-3);
    margin: 0 var(--mc-space-6) var(--mc-space-5);
  }
  .mc-admin .mc-cc-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md, 10px);
  }
  .mc-admin .mc-cc-stat-value { font-size: 18px; font-weight: 650; color: var(--mc-text); }
  .mc-admin .mc-cc-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-text-muted); }
  .mc-admin .mc-cc-stat-meta { font-size: 11px; color: var(--mc-text-muted); }

  /* --- the recent-activity card (v2 composition of the same feed) --- */
  .mc-admin .mc-cc-card {
    margin: 0 var(--mc-space-6) var(--mc-space-6);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md, 12px);
    overflow: hidden;
  }
  .mc-admin .mc-cc-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mc-border);
  }
  .mc-admin .mc-cc-card-head h2 { margin: 0; font-size: 14px; font-weight: 650; color: var(--mc-text); }
  .mc-admin .mc-cc-card-sub { font-size: 12px; color: var(--mc-text-muted); }
  .mc-admin .mc-cc-card-body { padding: 6px 0; }
  .mc-admin .mc-cc-activity { display: flex; flex-direction: column; }
  .mc-admin .mc-cc-activity-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
  }
  .mc-admin .mc-cc-activity-item + .mc-cc-activity-item { border-top: 1px solid color-mix(in srgb, var(--mc-border) 55%, transparent); }
  .mc-admin .mc-cc-activity-verb { font-weight: 600; color: var(--mc-text); text-transform: capitalize; }
  .mc-admin .mc-cc-activity-meta { color: var(--mc-text-muted); font-size: 12px; }
  .mc-admin .mc-cc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm, 8px);
    background: var(--mc-surface);
    color: var(--mc-text);
    font-size: 12.5px;
    font-weight: 550;
    text-decoration: none;
  }
  .mc-admin .mc-cc-link:hover { background: var(--mc-surface-sunken); }
  .mc-admin .mc-cc-link:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); }

  /* --- the system truth strip (the RD-3 wall contract's home; S134-A1c:
      consumes the canonical LaravelHealth battery — the Engine page's
      own checks — no second health implementation) --- */
  .mc-admin .mc-cc-health { display: flex; flex-direction: column; }
  .mc-admin .mc-cc-health-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
  }
  .mc-admin .mc-cc-health-item + .mc-cc-health-item { border-top: 1px solid color-mix(in srgb, var(--mc-border) 55%, transparent); }
  .mc-admin .mc-cc-health-label { font-size: 12.5px; font-weight: 600; color: var(--mc-text); }
  .mc-admin .mc-cc-health-value { margin-left: auto; font-size: 12.5px; color: var(--mc-text-muted); font-variant-numeric: tabular-nums; }
  .mc-admin .mc-cc-health-item .mc-cc-sev { flex: none; }
  .mc-admin .mc-cc-health-foot { padding: 9px 14px 11px; border-top: 1px solid color-mix(in srgb, var(--mc-border) 55%, transparent); font-size: 12px; color: var(--mc-text-muted); }
  .mc-admin .mc-cc-health-foot a { color: var(--mc-accent, #2563eb); text-decoration: underline; text-underline-offset: 2px; }
  .mc-admin .mc-cc-health-foot a:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); border-radius: 4px; }

  @media (max-width: 720px) {
    .mc-admin .mc-cc-families { grid-template-columns: 1fr; }
    .mc-admin .mc-cc { margin: var(--mc-space-4); }
    .mc-admin .mc-cc-stats { margin: 0 var(--mc-space-4) var(--mc-space-4); }
    .mc-admin .mc-cc-card { margin: 0 var(--mc-space-4) var(--mc-space-4); }
  }

  /* ==========================================================================
     S134-A2 — the admin primitives (the data-table variants, the .mc-toolbar
     composition, the surface-variant set). SOURCE layer per the §8.4a pin;
     the artifact is the deterministic rebuild. Contract of record:
     docs/coordination/design/S134-A2-PRIMITIVE-CONTRACTS.md (+ the A2-E
     amendments); variants are admin-scoped under .mc-admin (D-011: the
     corpus families are untouched — A3/A4 generalize if ever needed).
     ========================================================================== */

  /* ---- data-table variants (D-4) ---- */
  /* sticky: the height-bounded wrap; the base th already sticks + carries the
     opaque sunken surface + the ladder z (surface.css) — the variant bounds
     the viewport so the stick has a scroll context. */
  .mc-admin .mc-table--sticky { max-height: var(--mc-admin-table-max-h, 62vh); overflow-y: auto; }

  /* density: presentation-only, never changes the markup contract */
  .mc-admin .mc-table--dense th,
  .mc-admin .mc-table--dense td { padding: var(--mc-space-2) var(--mc-space-3); }
  .mc-admin .mc-table--comfortable th,
  .mc-admin .mc-table--comfortable td { padding: var(--mc-space-3) var(--mc-space-4); }

  /* the overflow→card-collapse pattern (mobile; opt-in via --collapse).
     The table stays a real <table> in the DOM (screen readers keep the
     tabular semantics); the collapse is CSS-only presentation. Each td
     renders its field name from data-label. */
  @media (max-width: 979.5px) {
    .mc-admin .mc-table--collapse { white-space: normal; }
    .mc-admin .mc-table--collapse thead { display: none; }
    .mc-admin .mc-table--collapse tbody tr {
      display: block;
      border: 1px solid var(--mc-border);
      border-radius: var(--mc-radius-md);
      background: var(--mc-surface);
      margin: 0 0 var(--mc-space-3);
      overflow: hidden;
    }
    .mc-admin .mc-table--collapse tbody tr:hover { background: var(--mc-surface); }
    .mc-admin .mc-table--collapse tbody tr:last-child { margin-bottom: 0; }
    .mc-admin .mc-table--collapse td {
      display: flex;
      align-items: baseline;
      gap: var(--mc-space-3);
      border-bottom: 1px solid color-mix(in srgb, var(--mc-border) 55%, transparent);
      padding: var(--mc-space-2) var(--mc-space-3);
      white-space: normal;
    }
    .mc-admin .mc-table--collapse td:last-child { border-bottom: 0; }
    .mc-admin .mc-table--collapse td::before {
      content: attr(data-label);
      flex: none;
      min-width: 7.5em;
      font-size: var(--mc-type-micro);
      font-weight: var(--mc-weight-semibold);
      letter-spacing: var(--mc-tracking-wide);
      text-transform: uppercase;
      color: var(--mc-text-muted);
    }
    .mc-admin .mc-table--collapse td[data-label=""]::before { content: none; }
    .mc-admin .mc-table--collapse td.mc-cell-actions {
      justify-content: flex-end;
      padding-top: var(--mc-space-2);
    }
    .mc-admin .mc-table--collapse td.mc-cell-actions::before { content: none; }
    .mc-admin .mc-table--collapse .num { text-align: left; }
  }

  /* ---- the .mc-toolbar composition (D-5) ---- */
  .mc-admin .mc-toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--mc-space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--mc-space-4);
  }
  .mc-admin .mc-toolbar .mc-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
  }
  .mc-admin .mc-toolbar .mc-toolbar-field > label {
    font-size: var(--mc-type-caption);
    font-weight: var(--mc-weight-medium);
    letter-spacing: var(--mc-tracking-wide);
    text-transform: uppercase;
    color: var(--mc-text-muted);
  }
  .mc-admin .mc-toolbar .mc-toolbar-field .mc-input,
  .mc-admin .mc-toolbar .mc-toolbar-field .mc-select {
    height: var(--mc-control-height-sm);
    font-size: var(--mc-type-body-sm);
  }
  .mc-admin .mc-toolbar .mc-toolbar-search { flex: 1 1 240px; max-width: 380px; }
  .mc-admin .mc-toolbar .mc-toolbar-count {
    margin-left: auto;
    font-size: var(--mc-type-body-sm);
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
    align-self: center;
  }
  .mc-admin .mc-toolbar .mc-toolbar-actions {
    display: flex;
    gap: var(--mc-space-2);
    align-items: center;
    align-self: center;
  }
  /* the chips slot (optional; rendered only when a page applies filters) */
  .mc-admin .mc-toolbar .mc-toolbar-chips {
    display: flex;
    gap: var(--mc-space-2);
    align-items: center;
    flex-wrap: wrap;
    align-self: center;
  }
  .mc-admin .mc-toolbar .mc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1);
    padding: 0.1rem 0.5rem;
    font-size: var(--mc-type-micro);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    color: var(--mc-text-secondary);
  }
  .mc-admin .mc-toolbar .mc-chip .mc-chip-x {
    border: 0;
    background: none;
    padding: 0 0 0 2px;
    cursor: pointer;
    color: var(--mc-text-muted);
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mc-admin .mc-toolbar .mc-chip .mc-chip-x:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); border-radius: var(--mc-radius-pill); }

  /* ---- pagination bar (the server-side pagination's v2 skin) ---- */
  .mc-admin .mc-pagination {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--mc-space-4);
    font-size: var(--mc-type-caption);
    color: var(--mc-text-muted);
  }

  /* ---- surface variants (D-3, admin share) ---- */
  .mc-admin .mc-card--flat {
    box-shadow: none;
    background: var(--mc-surface);
  }
  .mc-admin .mc-card--dense > .mc-card-body,
  .mc-admin .mc-card--dense.mc-card-body { padding: var(--mc-space-4); }
  .mc-admin .mc-card--dense > .mc-card-head { padding: var(--mc-space-3) var(--mc-space-4); }
  .mc-admin .mc-card--dense > .mc-card-foot { padding: var(--mc-space-3) var(--mc-space-4); }

  /* ---- the stat join (admin density slots; the family is nutrition.css) ---- */
  .mc-admin .mc-stat--dense { padding: var(--mc-space-3) var(--mc-space-4); }
  .mc-admin .mc-stat--dense .mc-stat-value { font-size: var(--mc-type-h4, 1.05rem); }
  .mc-admin .mc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--mc-space-3);
    margin: 0 0 var(--mc-space-4);
  }
  .mc-admin .mc-stat-grid .mc-stat-value.danger { color: var(--mc-danger); }
}


/* ==== source: shells/public.css (layer shells) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — SHELL: PUBLIC (the 358-page corpus + families)
   The public-site chrome: sticky header, hover/focus dropdown nav, auth
   actions, theme + search buttons, mobile slide-over drawer, four-column
   footer, the cmdk modal surface. Scoped under body.pub so the member/
   admin/studio shells (which share the .site-header/.site-footer vocab)
   are untouched.

   JS CONTRACTS PRESERVED (app.js — verified S130 survey):
   .site-header (+.scrolled scroll state), #mainNav on .main-nav (+.open
   mobile state), #navAuth, .header-actions, .theme-toggle (#themeToggle),
   .cmdk-trigger (#cmdkTrigger), .menu-toggle (aria-expanded),
   .nav-item/.nav-mega/.nav-drop, .skip-to-content → #main-content,
   #cmdkOverlay/#cmdkInput/#cmdkResults (the modal lives in the footer
   partial), .container, .brand/.brand-mark.
   The backdrop-filter diet: blur ONLY on the sticky header surface.
   ========================================================================== */
@layer shells {

  /* ---- the shell root -------------------------------------------------- */
  .pub {
    background: var(--mc-canvas);
    color: var(--mc-text);
    font-family: var(--mc-font-sans);
    line-height: var(--mc-leading-normal);
    -webkit-font-smoothing: antialiased;
  }

  /* ---- the header ------------------------------------------------------ */
  .pub .site-header {
    position: sticky;
    top: 0;
    z-index: var(--mc-z-header);
    background: color-mix(in srgb, var(--mc-surface) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mc-border);
    box-shadow: none;
    transition: box-shadow var(--mc-dur-fast) var(--mc-ease),
      border-color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .site-header.scrolled {
    box-shadow: var(--mc-shadow-1);
    border-bottom-color: var(--mc-border-strong);
  }
  .pub .site-header .container {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    /* (S133-W1) the header runs wider than the 1200 page grid: the
       measured content — 8 nav items ≈ 820px + brand 120 + auth corner
       275 + actions 140 + flex gaps — needs ~1403px. At the 1200 cap the
       primary nav overlapped itself at EVERY desktop width (the W1
       frames exposed it; the baseline capture proved it pre-existing).
       1440 gives the header the room the page grid cannot; the page
       content grid is unchanged. */
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--mc-space-5);
    min-height: 60px;
  }

  /* brand */
  .pub .site-header .brand {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-family: var(--mc-font-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--mc-text);
    text-decoration: none;
    flex: none;
  }
  .pub .site-header .brand:hover { color: var(--mc-blue-600); }
  .pub .site-header .brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--mc-radius-sm);
    overflow: hidden;
    flex: none;
  }
  .pub .site-header .brand .brand-mark img,
  .pub .site-header .brand .brand-mark svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
  }

  /* ---- the primary nav -------------------------------------------------- */
  .pub .main-nav {
    display: flex;
    align-items: center;
    /* (S133-W1) 2px — the fit budget: the 8 items + brand + corner +
       actions must honor the 1440 container from 1480 up (the W1
       measurement); the old 4px gap was part of the overflow. */
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .pub .nav-item {
    position: relative;
    display: flex;
    align-items: center;
  }
  /* (S133-W1 phase-2) the retired-from-band rows (home C9, resources C10)
     render ONLY in the drawer (the complete-registry render): hidden in
     the inline band, restored inside the drawer media below. */
  .pub .nav-item-drawer-only { display: none; }
  .pub .nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    /* (S133-W1) tightened: 6px/10px at 14px — the previous 8px/16px at
       15px made the 8-item nav ~995px wide, which no viewport could
       honor inside the header (the overlap defect class). */
    padding: 6px 10px;
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-secondary);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    transition: color var(--mc-dur-fast) var(--mc-ease),
      background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .nav-item > a:hover,
  .pub .nav-item > a:focus-visible {
    color: var(--mc-text);
    background: var(--mc-surface-sunken);
    outline: none;
  }
  .pub .nav-item > a .nav-icon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--mc-text-muted);
  }
  .pub .nav-item > a:hover .nav-icon { color: var(--mc-blue-600); }

  /* the CTA entry (Diary) */
  .pub .nav-item > a.nav-cta {
    color: var(--mc-text-on-primary);
    background: var(--mc-blue-600);
    font-weight: 600;
  }
  .pub .nav-item > a.nav-cta:hover,
  .pub .nav-item > a.nav-cta:focus-visible {
    background: var(--mc-blue-700);
    color: var(--mc-text-on-primary);
  }
  .pub .nav-item > a.nav-cta .nav-icon { color: var(--mc-text-on-primary); }

  /* ---- dropdowns: hover + keyboard, solid panels (glass diet) ----------- */
  .pub .nav-drop,
  .pub .nav-dropdown,
  .pub .nav-mega {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--mc-z-dropdown);
    min-width: 230px;
    padding: var(--mc-space-2);
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--mc-dur-fast) var(--mc-ease),
      transform var(--mc-dur-fast) var(--mc-ease),
      visibility var(--mc-dur-fast);
  }
  .pub .nav-mega {
    column-count: 2;
    column-gap: var(--mc-space-2);
    min-width: 430px;
    max-width: min(480px, calc(100vw - 3rem));
  }
  .pub .nav-item:hover .nav-drop,
  .pub .nav-item:hover .nav-dropdown,
  .pub .nav-item:hover .nav-mega,
  .pub .nav-item:focus-within .nav-drop,
  .pub .nav-item:focus-within .nav-dropdown,
  .pub .nav-item:focus-within .nav-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .pub .nav-drop a,
  .pub .nav-dropdown a,
  .pub .nav-mega a {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-2) var(--mc-space-3);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-secondary);
    text-decoration: none;
    font-size: .875rem;
    break-inside: avoid;
    transition: color var(--mc-dur-fast) var(--mc-ease),
      background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .nav-drop a:hover,
  .pub .nav-dropdown a:hover,
  .pub .nav-mega a:hover,
  .pub .nav-drop a:focus-visible,
  .pub .nav-dropdown a:focus-visible,
  .pub .nav-mega a:focus-visible {
    color: var(--mc-text);
    background: var(--mc-surface-sunken);
    outline: none;
  }
  /* the dropdown link labels + the live category count chips */
  .pub .nav-dropdown a .dd-label,
  .pub .nav-mega a .mega-label { flex: 1 1 auto; min-width: 0; }
  .pub .nav-mega a .mega-count,
  .pub .nav-dropdown a .mega-count {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-surface-sunken);
    border: 1px solid var(--mc-border);
    color: var(--mc-text-muted);
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.5;
  }
  .pub .nav-mega a:hover .mega-count,
  .pub .nav-dropdown a:hover .mega-count {
    background: var(--mc-blue-50);
    border-color: color-mix(in srgb, var(--mc-blue-400) 35%, transparent);
    color: var(--mc-blue-600);
  }

  .pub .nav-drop a .dd-icon,
  .pub .nav-dropdown a .dd-icon,
  .pub .nav-mega a .dd-icon {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--mc-text-muted);
  }
  .pub .nav-drop a:hover .dd-icon,
  .pub .nav-dropdown a:hover .dd-icon,
  .pub .nav-mega a:hover .dd-icon { color: var(--mc-blue-600); }

  /* ---- auth + action buttons -------------------------------------------- */
  .pub .nav-auth {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    flex: none;
  }
  .pub .header-actions {
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    flex: none;
  }
  .pub .theme-toggle,
  .pub .cmdk-trigger,
  .pub .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    color: var(--mc-text-secondary);
    cursor: pointer;
    transition: color var(--mc-dur-fast) var(--mc-ease),
      border-color var(--mc-dur-fast) var(--mc-ease),
      background-color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .theme-toggle:hover,
  .pub .cmdk-trigger:hover,
  .pub .menu-toggle:hover {
    color: var(--mc-text);
    border-color: var(--mc-border-strong);
    background: var(--mc-surface-sunken);
  }
  .pub .theme-toggle:focus-visible,
  .pub .cmdk-trigger:focus-visible,
  .pub .menu-toggle:focus-visible {
    outline: var(--mc-focus-outline);
    outline-offset: 2px;
  }
  .pub .theme-toggle .icon-moon { display: none; }
  [data-theme="dark"] .pub .theme-toggle .icon-sun { display: none; }
  [data-theme="dark"] .pub .theme-toggle .icon-moon { display: block; }
  .pub .cmdk-trigger { width: auto; padding: 0 var(--mc-space-3); gap: var(--mc-space-2); }
  .pub .cmdk-trigger kbd {
    font-family: var(--mc-font-mono);
    font-size: .6875rem;
    color: var(--mc-text-muted);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xs);
    padding: 1px 5px;
    background: var(--mc-surface-sunken);
  }

  /* the JS-populated auth area buttons (nav-auth-links vocabulary)
     (S133-W1) padding 6px/12px — part of the header fit budget */
  .pub .nav-auth a,
  .pub .nav-auth button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    padding: 6px 12px;
    border-radius: var(--mc-radius-md);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--mc-dur-fast) var(--mc-ease),
      color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .nav-auth a.btn-login,
  .pub .nav-auth a[href*="/login"] {
    color: var(--mc-text-secondary);
    background: transparent;
  }
  .pub .nav-auth a.btn-login:hover,
  .pub .nav-auth a[href*="/login"]:hover {
    color: var(--mc-text);
    background: var(--mc-surface-sunken);
  }
  .pub .nav-auth a.btn-signup,
  .pub .nav-auth a[href*="/signup"] {
    color: var(--mc-text-on-primary);
    background: var(--mc-blue-600);
  }
  .pub .nav-auth a.btn-signup:hover,
  .pub .nav-auth a[href*="/signup"]:hover {
    background: var(--mc-blue-700);
    color: var(--mc-text-on-primary);
  }

  /* ---- (S133-W1) the auth corner: member lane --------------------------
     The #navAuth corner renders three honest states (the settling
     skeleton, the guest pair above, and the member menu here) — composed
     by auth.js from real elements, kernel-menu governed, icon-bridge fed.
     Contract: docs/coordination/design/S133-W1-PUBLIC-HEADER-REGISTER.md
     §3. Every color is a token (dark parity is automatic); the old
     inline-style dialect and the undefined --rose reference are retired. */

  /* S1 — the settling skeleton (server-rendered; gone after settlement) */
  .pub .nav-auth[data-auth-state="settling"] {
    min-width: 132px;
    justify-content: flex-end;
  }
  .nav-auth-skeleton {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
  }
  .nav-auth-skeleton-bar {
    display: inline-block;
    width: 56px;
    height: 30px;
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface-sunken);
    animation: mc-shimmer 1.4s ease-in-out infinite;
  }
  .nav-auth-skeleton-bar-sm {
    width: 30px;
    animation-delay: 0.18s;
  }

  /* the composition wrapper (position context for the panel) */
  .pub .nav-user-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
  }

  /* the trigger: avatar + name + chevron as one real button */
  .pub .nav-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: var(--mc-space-1) var(--mc-space-2);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--mc-radius-md);
    cursor: pointer;
    color: var(--mc-text);
    font: inherit;
    transition: background-color var(--mc-dur-fast) var(--mc-ease),
      border-color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .nav-user-trigger:hover {
    background: var(--mc-surface-sunken);
    border-color: var(--mc-border);
  }
  .pub .nav-user-trigger:focus-visible {
    outline: var(--mc-focus-outline);
    outline-offset: 2px;
  }
  .pub .nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
  }
  .pub .nav-user-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-primary);
    color: var(--mc-text-on-primary);
    font-size: 13px;
    font-weight: 700;
  }
  .pub .nav-user-name {
    font-size: 14px;
    font-weight: 600;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pub .nav-auth-icon {
    display: inline-flex;
    align-items: center;
    width: 14px;
    height: 14px;
    color: inherit;
  }
  .pub .nav-auth-icon svg {
    width: 100%;
    height: 100%;
  }
  .pub .nav-user-caret-icon {
    width: 16px;
    height: 16px;
    color: var(--mc-text-muted);
    transition: transform var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .nav-user-trigger[aria-expanded="true"] .nav-user-caret-icon {
    transform: rotate(180deg);
  }

  /* the menu panel (kernel-governed open state; z from the lane, not inline) */
  .pub .nav-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    padding: var(--mc-space-2);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-3);
    z-index: var(--mc-z-dropdown);
  }
  .pub .nav-user-menu[hidden] { display: none !important; }

  .pub .nav-user-menu .nav-user-row {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2);
    width: 100%;
    padding: var(--mc-space-2) var(--mc-space-3);
    border: 0;
    border-radius: var(--mc-radius-sm);
    background: none;
    color: var(--mc-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mc-dur-fast) var(--mc-ease),
      color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .nav-user-menu .nav-user-row:hover {
    background: var(--mc-surface-sunken);
    color: var(--mc-text);
  }
  .pub .nav-user-menu .nav-user-row:focus-visible {
    outline: var(--mc-focus-outline);
    outline-offset: 1px;
  }
  .pub .nav-user-menu .nav-user-row .nav-auth-icon { color: var(--mc-text-muted); }
  .pub .nav-user-menu .nav-user-row:hover .nav-auth-icon { color: var(--mc-text); }
  .pub .nav-user-menu .nav-user-row-admin {
    color: var(--mc-primary);
    font-weight: 600;
  }
  .pub .nav-user-menu .nav-user-row-admin .nav-auth-icon { color: var(--mc-primary); }

  /* Sign Out: the canonical danger family (the undefined --rose is retired) */
  .pub .nav-user-menu .nav-auth-signout {
    color: var(--mc-danger);
  }
  .pub .nav-user-menu .nav-auth-signout:hover {
    background: var(--mc-danger-subtle);
    color: var(--mc-danger-strong);
  }
  .pub .nav-user-menu .nav-auth-signout .nav-auth-icon { color: var(--mc-danger); }
  .pub .nav-user-menu .nav-auth-signout:hover .nav-auth-icon { color: var(--mc-danger-strong); }

  .pub .nav-user-sep {
    border-top: 1px solid var(--mc-border);
    margin: var(--mc-space-2) 0;
  }
  /* the admin pill keeps the registry icon, not the duplicated SVG */
  .pub .nav-admin-link .nav-auth-icon { width: 14px; height: 14px; }
  @media (max-width: 480px) {
    .pub .nav-user-menu { min-width: 180px; right: -8px; }
  }

  /* the chevron only exists as the mobile accordion affordance */
  .pub .nav-item > a .nav-chevron { display: none; }

  /* ---- the mobile drawer (the .main-nav.open + .nav-item.expanded
         accordion contracts — app.js NAV_MENU_MAX matches this band
         exactly. (S133-W1 phase-2) the band is the MEASURED fit point of
         the six-row designed composition (goals, calculators, food-db,
         restaurants, apps, pricing) with the §4 ladder applied: the
         predicted 1280 boundary is confirmed/re-measured by the served
         fit gate — below that the honest primary surface is the drawer
         (the complete registry, retired rows included), not an
         overlapping inline nav. ---- */
  .pub .menu-toggle { display: none; }
  @media (max-width: 1279px) {
    .pub .nav-item-drawer-only { display: flex; }
    .pub .menu-toggle { display: inline-flex; }
    .pub .site-header .container {
      flex-wrap: nowrap;
      padding: 0 var(--mc-space-4);
    }
    .pub .main-nav {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: var(--mc-z-nav);
      width: min(320px, 86vw);
      flex-direction: column;
      align-items: stretch;
      gap: var(--mc-space-1);
      padding: var(--mc-space-5) var(--mc-space-4) var(--mc-space-8);
      background: var(--mc-surface-raised);
      border-right: 1px solid var(--mc-border-strong);
      box-shadow: var(--mc-shadow-3);
      overflow-y: auto;
      display: none;
    }
    .pub .main-nav.open {
      display: flex;
      transform: none;
      opacity: 1;
      pointer-events: auto;
    }
    .pub .nav-item { flex-direction: column; align-items: stretch; width: 100%; }
    .pub .nav-item > a { width: 100%; }
    /* the accordion: app.js toggles .nav-item.expanded on the FIRST tap of
       a parent link (preventDefault) and navigates on the second tap */
    .pub .nav-drop,
    .pub .nav-dropdown,
    .pub .nav-mega {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      border-radius: 0;
      padding: 0 0 0 var(--mc-space-5);
      margin: 0;
      column-count: 1;
      min-width: 0;
      max-width: none;
      width: 100%;
      background: transparent;
      display: none;
    }
    .pub .nav-item.expanded .nav-drop,
    .pub .nav-item.expanded .nav-dropdown,
    .pub .nav-item.expanded .nav-mega { display: block; }
    .pub .nav-mega a,
    .pub .nav-drop a,
    .pub .nav-dropdown a { font-size: .875rem; }
    /* the chevron affordance rotates with the expansion */
    .pub .nav-item > a .nav-chevron {
      display: inline-flex;
      width: 14px;
      height: 14px;
      margin-left: auto;
      color: var(--mc-text-muted);
      transition: transform var(--mc-dur-fast) var(--mc-ease);
    }
    .pub .nav-item.expanded > a .nav-chevron {
      transform: rotate(180deg);
      color: var(--mc-blue-600);
    }
    .pub .nav-auth { margin-left: auto; }
  }
  @media (max-width: 559px) {
    .pub .nav-auth a[href*="/signup"] { display: none; }
    .pub .cmdk-trigger kbd { display: none; }
  }
  /* (D244-01, cycle 244-D) the compact-header law: below 380px the header
     row's flex-none children (brand 120 + nav-auth 69 + actions 118 + the
     two 16px gaps + the 32px container padding = 355px of content) exceed
     the 320px viewport — the measured horizontal overflow of record,
     scrollWidth 355 vs innerWidth 320 (the actions trio pushed 35px past
     the edge). The drawer is the honest primary surface below 1280 and the
     brand link keeps its aria-label, so the wordmark yields at the compact
     plane; the mark stays. Measured after: scrollWidth 320 = innerWidth
     320, zero horizontal overflow. */
  @media (max-width: 379px) {
    .pub .brand span:not(.brand-mark) { display: none; }
  }

  /* ---- (S133-W1 phase-2) the desktop composition ladder (the contract
     §4): the destination set NEVER grades at desktop — all six groups
     render inline at every width ≥1280; what grades is the utility
     cluster, by this fixed ladder, never a breakpoint nudge past it:
       L1 — the member trigger's visible name label (the trigger's
            aria-label and the menu's identity rows keep the name)
       L2 — nav item padding 4/8 @ 14px (from the W1 6/10)
       L3 — the inter-cluster container gap one scale step down
     The served fit gate re-measures CTX-1280/1366/1440 in both auth
     states; a measured fit point above 1279 reopens the contract. ---- */
  @media (min-width: 1280px) and (max-width: 1365px) {
    .pub .nav-user-name { display: none; }
    .pub .nav-item > a { padding: 4px 8px; }
    .pub .site-header .container { gap: var(--mc-space-3); }
  }

  /* ---- the skip link ------------------------------------------------------ */
  .pub .skip-to-content {
    position: absolute;
    top: -48px;
    left: var(--mc-space-4);
    z-index: var(--mc-z-modal, 1000);
    padding: var(--mc-space-2) var(--mc-space-4);
    background: var(--mc-blue-600);
    color: var(--mc-text-on-primary);
    border-radius: var(--mc-radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: top var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .skip-to-content:focus { top: var(--mc-space-2); }

  /* ---- the footer --------------------------------------------------------- */
  .pub .site-footer {
    margin-top: var(--mc-space-16);
    background: var(--mc-surface-sunken);
    border-top: 1px solid var(--mc-border);
    padding: var(--mc-space-10) 0 var(--mc-space-5);
  }
  .pub .site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--mc-space-5);
  }
  .pub .footer-grid {
    display: grid;
    /* (D236-09) six tracks for the six children: repeat(4,1fr) wrapped Company under the brand (the dead-row void) */
    grid-template-columns: 2fr repeat(5, 1fr);
    gap: var(--mc-space-8);
  }
  @media (max-width: 1023px) { .pub .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--mc-space-6); } }
  @media (max-width: 559px) { .pub .footer-grid { grid-template-columns: 1fr; } }
  .pub .footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-3);
  }
  .pub .footer-brand .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    font-family: var(--mc-font-display);
    font-weight: 600;
    color: var(--mc-text);
    text-decoration: none;
  }
  .pub .footer-brand .brand .brand-mark {
    width: 26px;
    height: 26px;
    border-radius: var(--mc-radius-sm);
    overflow: hidden;
    display: inline-flex;
  }
  .pub .footer-brand .brand .brand-mark img,
  .pub .footer-brand .brand .brand-mark svg { width: 100%; height: 100%; object-fit: contain; }
  .pub .footer-brand p {
    color: var(--mc-text-muted);
    font-size: .875rem;
    max-width: 34ch;
    margin: 0;
  }
  .pub .footer-col h3,
  .pub .footer-col h4,
  .pub .footer-col .footer-heading {
    font-family: var(--mc-font-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mc-text-muted);
    margin: 0 0 var(--mc-space-3);
  }
  .pub .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mc-space-2); }
  .pub .footer-col a {
    color: var(--mc-text-secondary);
    text-decoration: none;
    font-size: .875rem;
    transition: color var(--mc-dur-fast) var(--mc-ease);
  }
  .pub .footer-col a:hover { color: var(--mc-blue-600); }
  .pub .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mc-space-3);
    margin-top: var(--mc-space-8);
    padding-top: var(--mc-space-5);
    border-top: 1px solid var(--mc-border);
    color: var(--mc-text-muted);
    font-size: .8125rem;
  }
  .pub .footer-bottom nav { display: flex; gap: var(--mc-space-4); }
  .pub .footer-bottom a { color: var(--mc-text-muted); text-decoration: none; }
  .pub .footer-bottom a:hover { color: var(--mc-text); }
  /* (S134-FC9 §5) the persistent Cookie Settings entry — a real button that
     reads as a quiet footer affordance, never a decorative link. */
  .pub .footer-cookie-settings {
    border: none;
    background: none;
    /* (S258-D1) vertical padding lifts the pointer target over the WCAG
       2.5.8 24px gate (the member mirror carries the same law). */
    padding: 2px 0;
    font: inherit;
    font-size: inherit;
    color: var(--mc-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .pub .footer-cookie-settings:hover { color: var(--mc-text); }
  .pub .footer-cookie-settings:focus-visible {
    outline: 2px solid var(--mc-primary);
    outline-offset: 2px;
  }
  .pub .footer-social { display: flex; gap: var(--mc-space-2); }

  /* ---- the cmdk modal ------------------------------------------------------ */
  .pub .cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mc-z-overlay);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh var(--mc-space-4) var(--mc-space-4);
    background: rgb(15 23 42 / .5);
    backdrop-filter: blur(2px);
  }
  .pub .cmdk-overlay.open { display: flex; }
  .pub .cmdk-modal {
    width: min(640px, 100%);
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
  }
  .pub .cmdk-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--mc-border);
    padding: var(--mc-space-4) var(--mc-space-5);
    font-size: 1rem;
    color: var(--mc-text);
    background: transparent;
    outline: none;
  }
  .pub .cmdk-input::placeholder { color: var(--mc-text-muted); }
  .pub .cmdk-results {
    overflow-y: auto;
    padding: var(--mc-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pub .cmdk-results a,
  .pub .cmdk-results .cmdk-item {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    padding: var(--mc-space-2) var(--mc-space-3);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-secondary);
    text-decoration: none;
    font-size: .875rem;
  }
  .pub .cmdk-results a:hover,
  .pub .cmdk-results a.active,
  .pub .cmdk-results .cmdk-item.active {
    background: var(--mc-surface-sunken);
    color: var(--mc-text);
  }
  .pub .cmdk-results .cmdk-group {
    padding: var(--mc-space-2) var(--mc-space-3) var(--mc-space-1);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mc-text-muted);
  }
  .pub .cmdk-footer {
    display: flex;
    align-items: center;
    gap: var(--mc-space-4);
    padding: var(--mc-space-2) var(--mc-space-5);
    border-top: 1px solid var(--mc-border);
    color: var(--mc-text-muted);
    font-size: .75rem;
    background: var(--mc-surface-sunken);
  }
  .pub .cmdk-footer kbd {
    font-family: var(--mc-font-mono);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-xs);
    padding: 0 5px;
    background: var(--mc-surface);
  }

  /* ---- the consent chooser (S134-FC9, §3 the dialog of record)
     (S257-D4, disclosed) every token var in this block carries its
     light-theme literal fallback so the STANDALONE raw-shell surfaces
     (the auth wizards, the error pages, checkout — no ui bundle, no
     token layer) render the gate styled: the finding-1 unstyled-consent
     class is dead there. Bundle surfaces resolve the real token (the
     default is ignored — theming untouched); the standalone dark/sepia
     refinement is the disclosed follow-up. ------------
     The granular cookie chooser: a real task dialog on the --mc-z ladder.
     (S257-D1b, the 257-D lock claim 6124869161) The gate rides the MODAL
     token (1000), not the overlay token: the served anatomy merges the
     scrim + the dialog card into ONE node, so the element IS the dialog
     layer of the ladder — "dialogs, drawers" per the token scale's own
     semantics. The live inversion this fixes: the AI panel (z 901,
     ai-assistant.css) painted ABOVE the consent gate (z 900) — a policy
     re-ask fired while the panel was open would lose the ladder to a
     popover (the Audit-24 "consent-vs-AI ownership in acceptance" clause;
     the consent-overlay-vs-panel z law pinned by s257-floating-dock V4).
     Toasts (1100) and coach marks (1200) legitimately stay above; the
     nav/FAB (900) and every popover (901) fall below the gate. Composes
     with the announcement bar and the toast layer; never fights them.
     Scoped under body.pub like the cmdk modal; the DOM is authored by
     app.js (the served-dialog contract). */
  .consent-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mc-z-modal, 1000);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh var(--mc-space-4, 1rem) calc(var(--mc-space-6, 1.5rem) + 72px);
    background: rgb(15 23 42 / .5);
    backdrop-filter: blur(2px);
  }
  .consent-overlay.open { display: flex; }

  .consent-modal {
    width: min(560px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    background: var(--mc-surface-raised, #FFFFFF);
    border: 1px solid var(--mc-border-strong, #64748B);
    border-radius: var(--mc-radius-lg, 16px);
    box-shadow: var(--mc-shadow-3, 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06));
    padding: var(--mc-space-5, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-4, 1rem);
  }
  .consent-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mc-text, #0F172A);
  }
  .consent-lede {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mc-text-secondary, #475569);
  }
  .consent-rows {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2, 0.5rem);
    margin: 0;
    padding: 0;
    border: none;
  }
  .consent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3, 0.75rem);
    padding: var(--mc-space-3, 0.75rem) var(--mc-space-4, 1rem);
    border: 1px solid var(--mc-border, #E2E8F0);
    border-radius: var(--mc-radius-md, 12px);
    background: var(--mc-surface, #FFFFFF);
  }
  .consent-row--locked { opacity: .75; }
  .consent-row input[type="checkbox"] {
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--mc-primary, #6366F1);
  }
  .consent-copy { min-width: 0; }
  .consent-copy-title {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mc-text, #0F172A);
  }
  .consent-copy-desc {
    display: block;
    margin-top: 2px;
    font-size: .78125rem;
    line-height: 1.45;
    color: var(--mc-text-secondary, #475569);
  }
  .consent-state-badge {
    display: inline-block;
    margin-left: var(--mc-space-2, 0.5rem);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mc-text-muted, #64748B);
  }
  .consent-notice {
    margin: 0;
    padding: var(--mc-space-3, 0.75rem) var(--mc-space-4, 1rem);
    border: 1px solid var(--mc-border-strong, #64748B);
    border-left: 3px solid var(--mc-primary, #6366F1);
    border-radius: var(--mc-radius-md, 12px);
    background: var(--mc-surface-sunken, #F1F5F9);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mc-text, #0F172A);
  }
  .consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-3, 0.75rem);
    justify-content: flex-end;
  }
  .consent-actions .consent-btn {
    border: 1px solid var(--mc-border-strong, #64748B);
    border-radius: var(--mc-radius-md, 12px);
    background: var(--mc-surface-raised, #FFFFFF);
    color: var(--mc-text, #0F172A);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    padding: var(--mc-space-2, 0.5rem) var(--mc-space-4, 1rem);
    cursor: pointer;
  }
  .consent-actions .consent-btn:hover { background: var(--mc-surface-sunken, #F1F5F9); }
  .consent-actions .consent-btn:focus-visible {
    outline: 2px solid var(--mc-primary, #6366F1);
    outline-offset: 2px;
  }
  .consent-actions .consent-btn--primary {
    background: var(--mc-primary, #6366F1);
    border-color: var(--mc-primary, #6366F1);
    color: #fff;
  }
  .consent-actions .consent-btn--primary:hover { filter: brightness(.95); background: var(--mc-primary, #6366F1); }
  .consent-actions .consent-btn[disabled] { opacity: .55; cursor: wait; }
  .consent-policy-link {
    font-size: .78125rem;
    color: var(--mc-text-secondary, #475569);
    text-decoration: underline;
    text-underline-offset: 2px;
    /* (S258-D1) the link measured 18.8px tall — vertical padding lifts the
       pointer target over the WCAG 2.5.8 24px gate (the consent dialog is
       a legal-action surface; its one link must be a real target). */
    padding: 4px 0;
    display: inline-block;
  }
  .consent-policy-link:focus-visible {
    outline: 2px solid var(--mc-primary, #6366F1);
    outline-offset: 2px;
  }
  @media (max-width: 640px) {
    .consent-overlay { padding: var(--mc-space-3, 0.75rem) var(--mc-space-3, 0.75rem) calc(var(--mc-space-6, 1.5rem) + 72px); }
    .consent-modal { max-height: 78vh; padding: var(--mc-space-4, 1rem); }
    .consent-actions { justify-content: stretch; }
    .consent-actions .consent-btn { flex: 1 1 auto; }
  }

  /* ---- the consent-vs-AI suspension (235-D Lock B: the structural law) ----
     While the consent chooser is open, the Ask-AI floating widget is
     SUSPENDED — structurally, not cosmetically: app.js owns the state
     (inert + aria-hidden on the fab and the panel through the kernel
     journey), so the surfaces leave the tab order, the accessibility tree
     AND the paint TOGETHER. The old opacity:0/pointer-events:none coupling
     was exactly the Audit-17 defect: invisible yet keyboard-focusable and
     screen-reader-announced, with no owner of the suspended state. This rule
     only REFLECTS the structural attribute — no consent-class coupling. */
  .ai-fab[inert],
  .ai-chat-panel[inert] {
    visibility: hidden;
  }

  /* ---- the body canvas padding -------------------------------------------- */
  .pub main {
    display: block;
    min-height: 60vh;
  }

  /* ---- (D236-01) the newsletter composite's centered-box grammar ----------
     ROOT CAUSE (the D236 fleet, cascade of record via CDP): the v2 bundle's
     @layer reset is DECLARED AFTER the legacy layer, and layer order beats
     specificity — its `* { margin: 0 }` silently zeroes every legacy-layer
     margin on the mixed public cascade. The newsletter's centered-box rules
     (.newsletter-desc/.newsletter-form margin:auto; the title/note/msg
     margins) died: the desc/form boxes left-anchored inside the centered
     card while their text stayed centered — three alignment grammars in one
     card (the user-flagged defect). Restored at the shells layer (declared
     after reset) per the source-first law; scoped to the composite only —
     the v2 reset's blanket contract is untouched. */
  .pub .newsletter-title {
    margin-top: 14px;
    margin-bottom: 8px;
  }
  .pub .newsletter-desc {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }
  .pub .newsletter-form {
    margin-left: auto;
    margin-right: auto;
  }
  .pub .newsletter-msg {
    margin-top: 12px;
  }
  .pub .newsletter-footer-note {
    margin-top: 12px;
  }
}

/* ==== UNLAYERED TAIL — the public headline-scale law (255-D) ==============
   ROOT CAUSE (A22-06 D-typography half, Audit-23 §4 "H1 is small and
   subdued"): macrition-legacy-public.css is wrapped in `@layer legacy`
   (S130-30A) — the FIRST, lowest-priority layer — so the v2 reset's
   `h1..h6 { font-size: inherit; font-weight: inherit }` beats the legacy
   headline scale on every .pub surface the v2 typography scopes
   (.article / .prose / .section-head / .mc-app) never reach. Served truth
   at the composed head (a6834db7 + 27bdfc1a): the article H1 computed
   15px/400 — SMALLER than its own body paragraphs (16px) — on all 46
   corpus articles, all 218 calculator/tool pages (.tool-main h1) AND the
   homepage hero (.hero h1). The battery: tests/Browser/module-batteries/
   s264-headline-scale.mjs (red-first 5/10 pre-fix).

   THE LAW restores each context's OWN pre-S130-30A legacy scale —
   nothing invented: the base h1 clamp(28px,4vw,40px)/800 and the hero
   clamp(28px,5vw,44px)/800, byte-faithful to the legacy sheet values.
   The GOVERNED v2 scopes keep their own laws: the complex :not()
   exclusions preserve .section-head h1, .article h1, .prose h1 and
   main article h1 byte-identically (pinned by S264-H1-05/06). The
   member-flow h1.blog-title keeps the renderer's inline clamp size and
   gains only the weight (S264-H1-07/08). body.pub-scoped: the bare-body
   auth family is unreachable (S264-H1-09). Unlayered = deterministic on
   every load order (the D245-01 cascade law; layered normal rules can
   never win against this bundle composition). */
body.pub h1:not(.section-head h1):not(.article h1):not(.prose h1):not(main article h1):not(.hero h1) {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}
body.pub .hero h1 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* (255-D D255-01) the settling-skeleton narrow-band yield. The d255
   served fleet caught the no-JS 390 article at scrollWidth 418 vs 390:
   the server-rendered settling skeleton reserves min-width:132px, but
   the settled JS guest box at the narrow band is ~69px — the 63px delta
   pushes .header-actions past the viewport for every visitor whose
   auth state never settles (no-JS, crawlers, the no-JS acceptance
   plane). The skeleton yields to the measured guest box below 480px
   (the same band where the guest composition collapses to the compact
   corner); the settled states are untouched. Battery pin:
   S264-H1-11 (red-first 392/390 pre-law). */
@media (max-width: 479.98px) {
  .pub .nav-auth[data-auth-state="settling"] { min-width: 69px; }
  .pub .nav-auth-skeleton { gap: var(--mc-space-1); }
  .pub .nav-auth-skeleton-bar { width: 34px; height: 28px; }
  .pub .nav-auth-skeleton-bar-sm { width: 22px; }
}


/* ==== source: utilities.css (layer utilities) ==== */
/* ============================================================================
   MACRITION UI SYSTEM v2 — UTILITIES
   A minimal, closed set. Not a general-purpose utility framework: only
   layout affordances that components genuinely share. This list is part
   of the architecture contract — grow it deliberately, never per-page.
   ========================================================================== */
@layer utilities {
  /* layout */
  .mc-stack { display: flex; flex-direction: column; gap: var(--mc-space-4); }
  .mc-stack-sm { display: flex; flex-direction: column; gap: var(--mc-space-2); }
  .mc-stack-lg { display: flex; flex-direction: column; gap: var(--mc-space-6); }
  .mc-row { display: flex; align-items: center; gap: var(--mc-space-3); flex-wrap: wrap; }
  .mc-grid { display: grid; gap: var(--mc-space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .mc-grid-2 { display: grid; gap: var(--mc-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-grid-3 { display: grid; gap: var(--mc-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 639.5px) {
    .mc-grid-2, .mc-grid-3 { grid-template-columns: minmax(0, 1fr); }
  }
  .mc-cluster { display: flex; flex-wrap: wrap; gap: var(--mc-space-2); }
  .mc-spacer { flex: 1 1 auto; }

  /* alignment within a line */
  .mc-between { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-space-3); }
  .mc-center { display: flex; align-items: center; justify-content: center; }
  .mc-end { display: flex; align-items: center; justify-content: flex-end; }

  /* text */
  .mc-t-muted { color: var(--mc-text-muted); }
  .mc-t-secondary { color: var(--mc-text-secondary); }
  .mc-t-primary { color: var(--mc-primary); }
  .mc-t-danger { color: var(--mc-danger-subtle-text); }
  .mc-t-success { color: var(--mc-success-subtle-text); }
  .mc-t-energy { color: var(--mc-nutrient-energy); }
  .mc-t-center { text-align: center; }
  .mc-t-right { text-align: right; }
  .mc-tabular { font-variant-numeric: tabular-nums; }
  .mc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .mc-break-word { overflow-wrap: break-word; word-break: break-word; }

  /* semantic icon-color pairs for nutrient chips/labels */
  .mc-nutrient-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mc-primary);
    flex: none;
  }
  .mc-nutrient-dot[data-nutrient="energy"] { background: var(--mc-nutrient-energy); }
  .mc-nutrient-dot[data-nutrient="protein"] { background: var(--mc-nutrient-protein); }
  .mc-nutrient-dot[data-nutrient="carbs"]   { background: var(--mc-nutrient-carbs); }
  .mc-nutrient-dot[data-nutrient="fat"]     { background: var(--mc-nutrient-fat); }
  .mc-nutrient-dot[data-nutrient="water"]   { background: var(--mc-nutrient-water); }
  .mc-nutrient-dot[data-nutrient="fiber"]   { background: var(--mc-nutrient-fiber); }

  /* visibility */
  .mc-hide-mobile { display: initial; }
  @media (max-width: 639.5px) { .mc-hide-mobile { display: none !important; } }
  .mc-hide-desktop { display: initial; }
  @media (min-width: 1024px) { .mc-hide-desktop { display: none !important; } }

  /* screen-reader-only */
  .mc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .mc-skip-link {
    position: absolute;
    left: var(--mc-space-4);
    top: var(--mc-space-2);
    /* (S258-D1) the skip plane, not the toast plane: the focused skip link
       tops every transient layer including toasts (the ladder's a11y
       emergency tier). */
    z-index: var(--mc-z-skip, 2000);
    transform: translateY(-200%);
    padding: var(--mc-space-2) var(--mc-space-4);
    background: var(--mc-primary);
    color: var(--mc-text-on-primary);
    border-radius: var(--mc-radius-sm);
    font-size: var(--mc-type-body-sm);
    font-weight: var(--mc-weight-medium);
    text-decoration: none;
    transition: transform var(--mc-dur-fast) var(--mc-ease);
  }
  .mc-skip-link:focus { transform: translateY(0); outline: none; }
}