/* =============================================================
   dual-research — Design System v2 — Material-flavored
   M3 vocabulary mapped onto the existing pastel palette.
   No palette change: sable (Claude) = primary, sage (GPT) = secondary.
   ============================================================= */

:root {
  /* ── Base palette (preserved from v1) ──────────── */
  --p-sable:           #d4a574;
  --p-sable-dim:       #8a6d4e;
  --p-sage:            #7cc4b8;
  --p-sage-dim:        #4f8079;
  --p-info:            #6b9cf0;
  --p-ok:              #6fb380;
  --p-warn:            #d4a056;
  --p-err:             #d96a6a;
  --p-idle:            #5e636d;

  /* ── M3 color roles — DARK (default) ─────────── */
  /* Primary = sable (Claude lead), Secondary = sage (GPT) */
  --md-primary:                var(--p-sable);
  --md-on-primary:             #1f1407;
  --md-primary-container:      rgba(212,165,116,0.18);
  --md-on-primary-container:   #f3deca;

  --md-secondary:              var(--p-sage);
  --md-on-secondary:           #06201d;
  --md-secondary-container:    rgba(124,196,184,0.18);
  --md-on-secondary-container: #cfece6;

  --md-tertiary:               var(--p-info);
  --md-on-tertiary:             #061229;
  --md-tertiary-container:     rgba(107,156,240,0.18);
  --md-on-tertiary-container:  #d6e3ff;

  --md-error:                  var(--p-err);
  --md-on-error:               #2a0808;
  --md-error-container:        rgba(217,106,106,0.16);
  --md-on-error-container:     #f3c8c5;

  --md-warning:                var(--p-warn);
  --md-success:                var(--p-ok);

  /* Surface tiers (5) + dim. Tonal — neutral with a hint of warmth. */
  --md-surface-dim:                 #08090b;
  --md-surface:                     #0d0f12;
  --md-surface-bright:              #21242a;
  --md-surface-container-lowest:    #0a0c0f;
  --md-surface-container-low:       #111317;
  --md-surface-container:           #14171c;
  --md-surface-container-high:      #191c21;
  --md-surface-container-highest:   #21252b;

  --md-on-surface:           #ffffff;
  --md-on-surface-variant:   #b4bac4;
  --md-on-surface-muted:     #9aa0ac;
  --md-on-surface-faint:     #7d8290;
  --md-on-surface-decor:     #50545d;

  --md-outline:              #343941;
  --md-outline-variant:      #262a31;
  --md-outline-hair:         #1c1f24;

  /* Surface tint — body.tint-secondary swaps to sage. */
  --md-surface-tint:         var(--md-primary);

  /* M3 tonal elevation: rgba of surface-tint laid over surface at increasing opacity.
     We bake them into per-level surface vars so components can read --md-surface-1..5. */
  --md-surface-1: color-mix(in srgb, var(--md-surface-tint) 5%,  var(--md-surface));
  --md-surface-2: color-mix(in srgb, var(--md-surface-tint) 8%,  var(--md-surface));
  --md-surface-3: color-mix(in srgb, var(--md-surface-tint) 11%, var(--md-surface));
  --md-surface-4: color-mix(in srgb, var(--md-surface-tint) 12%, var(--md-surface));
  --md-surface-5: color-mix(in srgb, var(--md-surface-tint) 14%, var(--md-surface));

  /* ── Typography — Roboto Flex + Roboto Serif (M3 default pair) ─── */
  --md-font-plain:  "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-font-brand:  "Roboto Serif", ui-serif, Charter, Georgia, serif;
  --md-font-data:   "Roboto Flex", "Roboto", ui-monospace, monospace;

  /* M3 type scale — 15 roles (5 categories × 3 sizes) */
  --md-display-l-size: 57px; --md-display-l-lh: 64px; --md-display-l-track: -0.25px;
  --md-display-m-size: 45px; --md-display-m-lh: 52px; --md-display-m-track: 0;
  --md-display-s-size: 36px; --md-display-s-lh: 44px; --md-display-s-track: 0;

  --md-headline-l-size: 32px; --md-headline-l-lh: 40px;
  --md-headline-m-size: 28px; --md-headline-m-lh: 36px;
  --md-headline-s-size: 24px; --md-headline-s-lh: 32px;

  --md-title-l-size: 22px; --md-title-l-lh: 28px;
  --md-title-m-size: 16px; --md-title-m-lh: 24px;  --md-title-m-track: 0.15px;
  --md-title-s-size: 14px; --md-title-s-lh: 20px;  --md-title-s-track: 0.1px;

  --md-body-l-size: 16px; --md-body-l-lh: 24px;
  --md-body-m-size: 14px; --md-body-m-lh: 20px;
  --md-body-s-size: 12px; --md-body-s-lh: 16px;

  --md-label-l-size: 14px; --md-label-l-lh: 20px;  --md-label-l-track: 0.1px;
  --md-label-m-size: 12px; --md-label-m-lh: 16px;  --md-label-m-track: 0.5px;
  --md-label-s-size: 11px; --md-label-s-lh: 16px;  --md-label-s-track: 0.5px;

  /* Weights — Roboto Flex variable */
  --md-w-regular: 400;
  --md-w-medium:  500;
  --md-w-semi:    600;
  --md-w-bold:    700;

  /* ── Shape scale ───────────────────────────────── */
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:  12px;   /* default — user picked option 3 */
  --md-shape-lg:  16px;
  --md-shape-xl:  28px;
  --md-shape-full: 9999px;

  /* ── Spacing — M3 8dp grid (with 4dp half-step) ─ */
  --md-sp-0:  0;
  --md-sp-1:  4px;
  --md-sp-2:  8px;
  --md-sp-3:  12px;
  --md-sp-4:  16px;
  --md-sp-5:  20px;
  --md-sp-6:  24px;
  --md-sp-8:  32px;
  --md-sp-10: 40px;
  --md-sp-12: 48px;
  --md-sp-14: 56px;
  --md-sp-16: 64px;
  --md-sp-20: 80px;

  /* Comfortable density — M3 defaults. body.compact tightens. */
  --md-density:     0;
  --md-pad-card:    var(--md-sp-6);
  --md-pad-card-y:  var(--md-sp-5);
  --md-gap-row:     var(--md-sp-8);
  --md-gap-col:     var(--md-sp-6);
  --md-row-h:       56px;
  --md-rail-w:      280px;
  --md-content-max: 1440px;

  /* ── Elevation — 6 levels (M3) ─────────────────── */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.30);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.30);
  --md-elev-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px 0 rgba(0,0,0,.30);

  /* ── State layer opacities (overlay at currentColor) ── */
  --md-state-hover:    0.08;
  --md-state-focus:    0.10;
  --md-state-pressed:  0.12;
  --md-state-dragged:  0.16;

  /* ── Motion — M3 easings + durations ───────────── */
  --md-easing-emphasized:           cubic-bezier(0.2, 0, 0, 1);
  --md-easing-emphasized-decel:     cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-easing-emphasized-accel:     cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-easing-standard:             cubic-bezier(0.2, 0, 0, 1);
  --md-easing-standard-decel:       cubic-bezier(0, 0, 0, 1);
  --md-easing-standard-accel:       cubic-bezier(0.3, 0, 1, 1);

  --md-dur-short-1:  50ms;
  --md-dur-short-2:  100ms;
  --md-dur-short-3:  150ms;
  --md-dur-short-4:  200ms;
  --md-dur-medium-1: 250ms;
  --md-dur-medium-2: 300ms;
  --md-dur-medium-4: 400ms;
  --md-dur-long-2:   500ms;

  /* ── Focus ring (uses tertiary = info) ─────────── */
  --md-focus-ring: 3px solid color-mix(in srgb, var(--md-tertiary) 80%, transparent);
  --md-focus-offset: 2px;
}

/* ── Tinted modes ─────────────────────────────────── */
/* sable tint = Claude pages (default), sage tint = GPT pages. */
body.tint-secondary {
  --md-surface-tint: var(--md-secondary);
}

/* ── Compact density (toggle) ─────────────────────── */
body.compact {
  --md-density: 1;
  --md-pad-card:    var(--md-sp-4);
  --md-pad-card-y:  var(--md-sp-3);
  --md-gap-row:     var(--md-sp-5);
  --md-gap-col:     var(--md-sp-4);
  --md-row-h:       44px;
  --md-rail-w:      240px;

  --md-display-l-size: 45px; --md-display-l-lh: 52px;
  --md-display-m-size: 36px; --md-display-m-lh: 44px;
  --md-display-s-size: 28px; --md-display-s-lh: 36px;
  --md-headline-l-size: 24px; --md-headline-l-lh: 32px;
  --md-headline-m-size: 22px; --md-headline-m-lh: 28px;
  --md-headline-s-size: 20px; --md-headline-s-lh: 28px;
}

/* ── Light theme ──────────────────────────────────── */
body.light {
  --md-on-primary:             #1f1407;
  --md-primary-container:      rgba(212,165,116,0.26);
  --md-on-primary-container:   #3b2810;

  --md-secondary-container:    rgba(124,196,184,0.26);
  --md-on-secondary-container: #0a322d;

  --md-tertiary-container:     rgba(107,156,240,0.20);
  --md-on-tertiary-container:  #0a1d44;

  --md-error-container:        rgba(217,106,106,0.18);
  --md-on-error-container:     #4a0e0e;

  --md-surface-dim:                 #ece8de;
  --md-surface:                     #faf9f6;
  --md-surface-bright:              #ffffff;
  --md-surface-container-lowest:    #ffffff;
  --md-surface-container-low:       #f5f3ec;
  --md-surface-container:           #f0ede4;
  --md-surface-container-high:      #e9e5d9;
  --md-surface-container-highest:   #e3decf;

  --md-on-surface:           #04060a;
  --md-on-surface-variant:   #3a3f47;
  --md-on-surface-muted:     #4d5159;
  --md-on-surface-faint:     #6f7480;
  --md-on-surface-decor:     #a8aab0;

  --md-outline:              #aaa599;
  --md-outline-variant:      #d2cdc0;
  --md-outline-hair:         #e7e3d9;

  --md-surface-1: color-mix(in srgb, var(--md-surface-tint) 5%,  var(--md-surface));
  --md-surface-2: color-mix(in srgb, var(--md-surface-tint) 8%,  var(--md-surface));
  --md-surface-3: color-mix(in srgb, var(--md-surface-tint) 11%, var(--md-surface));
  --md-surface-4: color-mix(in srgb, var(--md-surface-tint) 12%, var(--md-surface));
  --md-surface-5: color-mix(in srgb, var(--md-surface-tint) 14%, var(--md-surface));

  --md-elev-1: 0 1px 2px 0 rgba(20,23,28,.10), 0 1px 3px 1px rgba(20,23,28,.06);
  --md-elev-2: 0 1px 2px 0 rgba(20,23,28,.10), 0 2px 6px 2px rgba(20,23,28,.06);
  --md-elev-3: 0 4px 8px 3px rgba(20,23,28,.08), 0 1px 3px 0 rgba(20,23,28,.10);
  --md-elev-4: 0 6px 10px 4px rgba(20,23,28,.08), 0 2px 3px 0 rgba(20,23,28,.10);
  --md-elev-5: 0 8px 12px 6px rgba(20,23,28,.10), 0 4px 4px 0 rgba(20,23,28,.10);
}

/* =============================================================
   Base
   ============================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--md-font-plain);
  font-size: var(--md-body-m-size);
  line-height: var(--md-body-m-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum","ss01";
}

:focus { outline: none; }
:focus-visible {
  outline: var(--md-focus-ring);
  outline-offset: var(--md-focus-offset);
  border-radius: var(--md-shape-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =============================================================
   M3 Type role utilities
   ============================================================= */
.t-display-l { font: var(--md-w-regular) var(--md-display-l-size)/var(--md-display-l-lh) var(--md-font-brand); letter-spacing: var(--md-display-l-track); }
.t-display-m { font: var(--md-w-regular) var(--md-display-m-size)/var(--md-display-m-lh) var(--md-font-brand); }
.t-display-s { font: var(--md-w-regular) var(--md-display-s-size)/var(--md-display-s-lh) var(--md-font-brand); }
.t-headline-l { font: var(--md-w-medium) var(--md-headline-l-size)/var(--md-headline-l-lh) var(--md-font-brand); }
.t-headline-m { font: var(--md-w-medium) var(--md-headline-m-size)/var(--md-headline-m-lh) var(--md-font-brand); }
.t-headline-s { font: var(--md-w-medium) var(--md-headline-s-size)/var(--md-headline-s-lh) var(--md-font-brand); }
.t-title-l { font: var(--md-w-medium) var(--md-title-l-size)/var(--md-title-l-lh) var(--md-font-plain); }
.t-title-m { font: var(--md-w-medium) var(--md-title-m-size)/var(--md-title-m-lh) var(--md-font-plain); letter-spacing: var(--md-title-m-track); }
.t-title-s { font: var(--md-w-medium) var(--md-title-s-size)/var(--md-title-s-lh) var(--md-font-plain); letter-spacing: var(--md-title-s-track); }
.t-body-l { font: var(--md-w-regular) var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-plain); }
.t-body-m { font: var(--md-w-regular) var(--md-body-m-size)/var(--md-body-m-lh) var(--md-font-plain); }
.t-body-s { font: var(--md-w-regular) var(--md-body-s-size)/var(--md-body-s-lh) var(--md-font-plain); }
.t-label-l { font: var(--md-w-medium) var(--md-label-l-size)/var(--md-label-l-lh) var(--md-font-plain); letter-spacing: var(--md-label-l-track); }
.t-label-m { font: var(--md-w-medium) var(--md-label-m-size)/var(--md-label-m-lh) var(--md-font-plain); letter-spacing: var(--md-label-m-track); text-transform: uppercase; }
.t-label-s { font: var(--md-w-medium) var(--md-label-s-size)/var(--md-label-s-lh) var(--md-font-plain); letter-spacing: var(--md-label-s-track); text-transform: uppercase; }

.t-data { font-family: var(--md-font-data); font-variant-numeric: tabular-nums; font-feature-settings: "tnum","ss01"; }

.muted   { color: var(--md-on-surface-variant); }
.faint   { color: var(--md-on-surface-faint); }
.subtle  { color: var(--md-on-surface-muted); }

/* =============================================================
   M3 Buttons — filled / tonal / outlined / text + FAB + icon-btn
   ============================================================= */
.md-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  letter-spacing: var(--md-label-l-track);
  color: var(--md-on-surface);
  transition: box-shadow var(--md-dur-short-3) var(--md-easing-standard),
              background var(--md-dur-short-3) var(--md-easing-standard);
  text-decoration: none;
}
.md-btn::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  border-radius: inherit;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
  pointer-events: none;
}
.md-btn:hover::before    { opacity: var(--md-state-hover); }
.md-btn:focus-visible::before { opacity: var(--md-state-focus); }
.md-btn:active::before   { opacity: var(--md-state-pressed); }

.md-btn--filled   { background: var(--md-primary); color: var(--md-on-primary); }
.md-btn--filled:hover { box-shadow: var(--md-elev-1); }

.md-btn--tonal    { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-btn--tonal:hover { box-shadow: var(--md-elev-1); }

.md-btn--outlined { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline); }
.md-btn--outlined:hover { box-shadow: inset 0 0 0 1px var(--md-primary); }

.md-btn--text     { background: transparent; color: var(--md-primary); padding: 0 12px; }

.md-btn--elevated { background: var(--md-surface-1); color: var(--md-primary); box-shadow: var(--md-elev-1); }
.md-btn--elevated:hover { box-shadow: var(--md-elev-2); }

.md-btn[disabled], .md-btn--disabled {
  pointer-events: none; opacity: .38; color: var(--md-on-surface);
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}

.md-btn--sm { height: 32px; padding: 0 16px; font-size: var(--md-label-m-size); }
.md-btn--lg { height: 48px; padding: 0 28px; }

.md-icon-btn {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--md-shape-full);
  background: transparent; color: var(--md-on-surface-variant);
  border: 0; cursor: pointer; position: relative;
}
.md-icon-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.md-icon-btn:hover::before { opacity: var(--md-state-hover); }
.md-icon-btn:active::before { opacity: var(--md-state-pressed); }

.md-fab {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--md-shape-lg); border: 0;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  box-shadow: var(--md-elev-3);
  cursor: pointer; position: relative;
}
.md-fab--ext {
  width: auto; padding: 0 20px 0 16px; height: 56px;
  gap: 12px; font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
}

/* =============================================================
   M3 Cards (elevated / filled / outlined)
   ============================================================= */
.md-card {
  border-radius: var(--md-shape-md);
  padding: var(--md-pad-card);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface);
  position: relative;
}
.md-card--elevated  { background: var(--md-surface-1); box-shadow: var(--md-elev-1); }
.md-card--filled    { background: var(--md-surface-container-high); }
.md-card--outlined  { background: var(--md-surface); box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.md-card--tonal-a   { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-card--tonal-b   { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

.md-card__hd { display: flex; align-items: center; gap: 12px; margin-bottom: var(--md-sp-3); }
.md-card__title { font: var(--md-w-medium) var(--md-title-m-size)/var(--md-title-m-lh) var(--md-font-plain); }
.md-card__support { color: var(--md-on-surface-variant); }

/* =============================================================
   M3 Chips (assist / filter / input / suggestion)
   ============================================================= */
.md-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 16px;
  border-radius: var(--md-shape-sm);
  background: transparent; color: var(--md-on-surface);
  box-shadow: inset 0 0 0 1px var(--md-outline);
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  letter-spacing: var(--md-label-l-track);
  position: relative; cursor: default; white-space: nowrap;
}
.md-chip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.md-chip:hover::before { opacity: var(--md-state-hover); }
.md-chip--selected {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  box-shadow: none;
}
.md-chip--filter-a {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: none;
}
.md-chip--sm { height: 24px; padding: 0 10px; font-size: 11px; }

/* Status pills — M3 attention/badge style */
.md-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) var(--md-label-s-size)/1 var(--md-font-plain);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.md-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.md-status--running   { color: var(--p-info);  background: color-mix(in srgb, var(--p-info) 16%, transparent); }
.md-status--converged { color: var(--p-ok);    background: color-mix(in srgb, var(--p-ok) 16%, transparent); }
.md-status--drift     { color: var(--p-warn);  background: color-mix(in srgb, var(--p-warn) 16%, transparent); }
.md-status--errored   { color: var(--p-err);   background: color-mix(in srgb, var(--p-err) 16%, transparent); }
.md-status--idle      { color: var(--p-idle);  background: color-mix(in srgb, var(--p-idle) 24%, transparent); }
.md-status--queued    { color: var(--md-on-surface-faint); background: var(--md-surface-container-high); }

/* =============================================================
   M3 Segmented buttons
   ============================================================= */
.md-seg {
  display: inline-flex; align-items: center;
  border-radius: var(--md-shape-full);
  box-shadow: inset 0 0 0 1px var(--md-outline);
  overflow: hidden;
}
.md-seg__opt {
  height: 40px; padding: 0 20px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--md-on-surface);
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  letter-spacing: var(--md-label-l-track);
  position: relative;
}
.md-seg__opt + .md-seg__opt { box-shadow: inset 1px 0 0 var(--md-outline); }
.md-seg__opt::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.md-seg__opt:hover::before { opacity: var(--md-state-hover); }
.md-seg__opt[aria-selected="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* =============================================================
   M3 Switch
   ============================================================= */
.md-switch {
  width: 52px; height: 32px; border-radius: var(--md-shape-full);
  background: var(--md-surface-container-highest);
  box-shadow: inset 0 0 0 2px var(--md-outline);
  position: relative; cursor: pointer; transition: background var(--md-dur-short-3);
  border: 0; padding: 0;
}
.md-switch::after {
  content: ""; position: absolute; top: 50%; left: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--md-outline);
  transform: translateY(-50%);
  transition: all var(--md-dur-short-3) var(--md-easing-emphasized);
}
.md-switch[aria-checked="true"] {
  background: var(--md-primary); box-shadow: none;
}
.md-switch[aria-checked="true"]::after {
  left: 28px; width: 24px; height: 24px; background: var(--md-on-primary);
}

/* =============================================================
   M3 Top app bar + Navigation rail
   ============================================================= */
.md-appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 24px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-outline-hair);
}
.md-appbar__title { font: var(--md-w-medium) var(--md-title-l-size)/1 var(--md-font-plain); }
.md-appbar__spacer { flex: 1; }

.md-rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  width: var(--md-rail-w);
  background: var(--md-surface-container-low);
  border-right: 1px solid var(--md-outline-hair);
  padding: var(--md-sp-6) 0;
}
.md-rail__brand {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 var(--md-sp-6) var(--md-sp-5);
  border-bottom: 1px solid var(--md-outline-hair);
}
.md-rail__brand h1 {
  margin: 0;
  font: var(--md-w-medium) var(--md-title-l-size)/var(--md-title-l-lh) var(--md-font-brand);
  letter-spacing: -0.01em;
}
.md-rail__brand .v {
  font: var(--md-w-medium) var(--md-label-s-size)/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.md-rail nav {
  display: flex; flex-direction: column;
  padding: var(--md-sp-3) var(--md-sp-3);
  gap: 2px;
}
.md-rail__group-label {
  font: var(--md-w-medium) var(--md-label-s-size)/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  padding: var(--md-sp-4) var(--md-sp-4) var(--md-sp-2);
}
.md-rail nav a {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface-variant);
  text-decoration: none;
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  letter-spacing: var(--md-label-l-track);
}
.md-rail nav a::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.md-rail nav a:hover::before { opacity: var(--md-state-hover); }
.md-rail nav a[aria-current="page"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.md-rail nav a .num {
  font: var(--md-w-medium) var(--md-label-s-size)/1 var(--md-font-data);
  letter-spacing: 0.04em;
  color: var(--md-on-surface-faint);
  min-width: 22px;
}
.md-rail nav a[aria-current="page"] .num { color: var(--md-on-secondary-container); }

/* =============================================================
   M3 Tabs (primary)
   ============================================================= */
.md-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--md-outline-hair);
}
.md-tab {
  position: relative;
  padding: 0 24px; height: 48px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--md-on-surface-variant);
  font: var(--md-w-medium) var(--md-title-s-size)/1 var(--md-font-plain);
}
.md-tab::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
}
.md-tab:hover::before { opacity: var(--md-state-hover); }
.md-tab[aria-selected="true"] { color: var(--md-primary); }
.md-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--md-primary);
  border-radius: 3px 3px 0 0;
}

/* =============================================================
   M3 Modal / Dialog
   ============================================================= */
.md-dialog {
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-3);
  color: var(--md-on-surface);
  padding: var(--md-sp-6);
  box-shadow: var(--md-elev-3);
  max-width: 560px;
}
.md-dialog__icon {
  width: 24px; height: 24px; color: var(--md-primary);
  margin: 0 auto var(--md-sp-4);
}
.md-dialog__title {
  font: var(--md-w-medium) var(--md-headline-s-size)/var(--md-headline-s-lh) var(--md-font-brand);
  margin: 0 0 var(--md-sp-4);
}
.md-dialog__body { color: var(--md-on-surface-variant); margin-bottom: var(--md-sp-6); }
.md-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* =============================================================
   M3 List items
   ============================================================= */
.md-list { display: flex; flex-direction: column; }
.md-list__item {
  display: flex; align-items: center; gap: 16px;
  min-height: 72px; padding: 8px 16px;
  border-bottom: 1px solid var(--md-outline-hair);
  position: relative;
}
.md-list__item::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.md-list__item:hover::before { opacity: var(--md-state-hover); }
.md-list__lead { color: var(--md-on-surface-variant); }
.md-list__body { flex: 1; min-width: 0; }
.md-list__overline { font: var(--md-w-medium) var(--md-label-m-size)/1 var(--md-font-plain); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-on-surface-faint); margin-bottom: 4px; }
.md-list__headline { font: var(--md-w-regular) var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-plain); }
.md-list__support { color: var(--md-on-surface-variant); }

/* =============================================================
   M3 Divider
   ============================================================= */
.md-divider { border: 0; border-top: 1px solid var(--md-outline-hair); margin: 0; }
.md-divider--inset { margin-left: var(--md-sp-6); }

/* =============================================================
   Spec layout — appbar + rail + main grid
   ============================================================= */
.ds-shell {
  display: grid;
  grid-template-columns: var(--md-rail-w) 1fr;
  min-height: 100vh;
}
.ds-main {
  padding: var(--md-sp-10) var(--md-sp-12) var(--md-sp-20);
  max-width: var(--md-content-max);
  width: 100%;
}

/* Section heading row — M3 large-headline style */
.ds-section { margin: var(--md-sp-16) 0; scroll-margin-top: 80px; }
.ds-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--md-sp-4);
  padding-bottom: var(--md-sp-4);
  margin-bottom: var(--md-sp-6);
  border-bottom: 1px solid var(--md-outline-hair);
}
.ds-section__title  {
  font: var(--md-w-medium) var(--md-headline-m-size)/var(--md-headline-m-lh) var(--md-font-brand);
  margin: 0; color: var(--md-on-surface);
}
.ds-section__index {
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.ds-section__lede {
  max-width: 720px;
  color: var(--md-on-surface-variant);
  font: var(--md-w-regular) var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-plain);
  margin: 0 0 var(--md-sp-6);
}

/* Hero */
.ds-hero { margin: var(--md-sp-6) 0 var(--md-sp-16); }
.ds-hero .label {
  font: var(--md-w-medium) var(--md-label-m-size)/1 var(--md-font-plain);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--md-primary);
}
.ds-hero h2 {
  font: var(--md-w-regular) var(--md-display-s-size)/var(--md-display-s-lh) var(--md-font-brand);
  letter-spacing: -0.01em;
  margin: var(--md-sp-3) 0 var(--md-sp-4);
  text-wrap: pretty; max-width: 22ch;
  color: var(--md-on-surface);
}
.ds-hero p {
  font: var(--md-w-regular) var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-plain);
  max-width: 720px; color: var(--md-on-surface-variant);
  margin: 0 0 var(--md-sp-4);
}
.ds-hero .meta {
  display: flex; gap: var(--md-sp-6); flex-wrap: wrap;
  margin-top: var(--md-sp-4);
  color: var(--md-on-surface-variant);
}
.ds-hero .meta b { color: var(--md-on-surface); font-weight: var(--md-w-medium); }

/* Two- and three-column grids (responsive) */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-gap-col); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--md-gap-col); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--md-gap-col); }

/* Showcase frame (for component examples) */
.show {
  background:
    radial-gradient(1200px 200px at 50% -10%, color-mix(in srgb, var(--md-surface-tint) 6%, transparent), transparent 70%),
    var(--md-surface-container-low);
  border-radius: var(--md-shape-lg);
  padding: var(--md-sp-8);
  border: 1px solid var(--md-outline-hair);
}
.show--padless { padding: 0; overflow: hidden; }

/* Spec note */
.note {
  display: flex; align-items: flex-start; gap: 12px;
  padding: var(--md-sp-4);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  border-radius: var(--md-shape-md);
}
.note .ic { width: 20px; height: 20px; flex: 0 0 auto; color: currentColor; }

/* =============================================================
   Responsive — two buckets per user spec.
   Bucket 1 (≥1500px wide): full layout, rail open, comfortable.
   Bucket 2 (<1500px):       rail collapses to icons, dense grid, hero shrinks.
   ============================================================= */
@media (max-width: 1499px) {
  :root {
    --md-rail-w: 80px;
    --md-pad-card: var(--md-sp-4);
    --md-gap-row: var(--md-sp-6);
    --md-gap-col: var(--md-sp-4);
    --md-content-max: 1200px;
  }
  .md-rail__brand h1, .md-rail__brand .v { display: none; }
  .md-rail__brand { padding: var(--md-sp-3); align-items: center; }
  .md-rail nav a { padding: 14px; justify-content: center; }
  .md-rail nav a .label-text { display: none; }
  .md-rail__group-label { font-size: 9px; text-align: center; padding: var(--md-sp-3) 0 var(--md-sp-1); }
  .ds-main { padding: var(--md-sp-8) var(--md-sp-8) var(--md-sp-16); }
  .ds-hero h2 { font-size: var(--md-headline-l-size); line-height: var(--md-headline-l-lh); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ds-shell { grid-template-columns: 1fr; }
  .md-rail { display: none; }
  .ds-main { padding: var(--md-sp-6); }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .ds-hero h2 { font-size: var(--md-headline-m-size); line-height: var(--md-headline-m-lh); }
}

/* =============================================================
   Misc helpers
   ============================================================= */
.row { display: flex; align-items: center; gap: var(--md-sp-3); flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--md-sp-3); }
.stack-1 { display: flex; flex-direction: column; gap: var(--md-sp-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--md-sp-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--md-sp-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--md-sp-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--md-sp-6); }

.hairline { height: 1px; background: var(--md-outline-hair); width: 100%; }

/* Swatch grid */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--md-sp-3); }
.sw {
  background: var(--md-surface-container);
  border-radius: var(--md-shape-md);
  overflow: hidden;
  border: 1px solid var(--md-outline-hair);
}
.sw__chip { height: 72px; }
.sw__body { padding: var(--md-sp-3); }
.sw__name { font: var(--md-w-medium) var(--md-title-s-size)/1.2 var(--md-font-plain); }
.sw__token { font: var(--md-w-regular) 11px/1.2 var(--md-font-data); color: var(--md-on-surface-faint); margin-top: 4px; }

/* Code chip */
.code {
  font-family: var(--md-font-data); font-size: 12px;
  padding: 2px 6px; border-radius: var(--md-shape-xs);
  background: var(--md-surface-container-high); color: var(--md-on-surface);
}