/* SkyCanvass Design System — Foundational Tokens
 * Personality: Technical & precise · forensic · evidence-grade
 * Last updated: May 2026
 */

:root {
  /* === COLOR · BRAND SCALE (Sky Blue 50–950) ============================= */
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;   /* Primary interactive */
  --sky-700: #0369a1;   /* Primary brand */
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;

  /* === COLOR · NEUTRALS (Slate, cool, rendering well alongside sky) ====== */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* === COLOR · SUPPORTING ACCENTS (for charts, hail intensities, status) = */
  --hail-100: #fef3c7;  /* trace */
  --hail-300: #fcd34d;  /* 0.75" */
  --hail-500: #f59e0b;  /* 1.25" */
  --hail-700: #b45309;  /* 1.75" */
  --hail-900: #78350f;  /* 2"+ */

  /* Semantic — feedback */
  --success-50:  #ecfdf5;
  --success-500: #10b981;
  --success-700: #047857;
  --warning-50:  #fffbeb;
  --warning-500: #f59e0b;
  --warning-700: #b45309;
  --danger-50:   #fef2f2;
  --danger-500:  #ef4444;
  --danger-700:  #b91c1c;
  --info-50:     #eff6ff;
  --info-500:    #3b82f6;
  --info-700:    #1d4ed8;

  /* Domain — code-of-the-day (citation block accent) */
  --code-bg:     #0c4a6e;
  --code-fg:     #e0f2fe;
  --code-accent: #38bdf8;

  /* === SEMANTIC TOKENS (light theme) ===================================== */
  --bg:           #ffffff;
  --bg-muted:     var(--slate-50);
  --bg-subtle:    var(--slate-100);
  --bg-inverse:   var(--slate-900);
  --surface:      #ffffff;
  --surface-raised: #ffffff;
  --fg:           var(--slate-900);
  --fg-muted:     var(--slate-600);
  --fg-subtle:    var(--slate-500);
  --fg-inverse:   var(--slate-50);
  --border:       var(--slate-200);
  --border-strong:var(--slate-300);
  --ring:         var(--sky-600);

  --primary:           var(--sky-700);
  --primary-hover:     var(--sky-800);
  --primary-active:    var(--sky-900);
  --primary-fg:        #ffffff;
  --primary-soft:      var(--sky-50);
  --primary-soft-fg:   var(--sky-800);

  /* === RADII ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* default — subtle, technical */
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;
  --radius:      var(--radius-md);

  /* === SPACING (4px base) =============================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === TYPOGRAPHY ======================================================= */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.8125rem;   /* 13 — captions, labels */
  --text-base: 0.875rem;    /* 14 — body */
  --text-md:   0.9375rem;   /* 15 — long-form body */
  --text-lg:   1.0625rem;   /* 17 — lede */
  --text-xl:   1.25rem;     /* 20 — h3 */
  --text-2xl:  1.5rem;      /* 24 — h2 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 — h1 */
  --text-5xl:  3rem;        /* 48 — display sm */
  --text-6xl:  3.75rem;     /* 60 — display */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;

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

  /* === SHADOWS — restrained, technical =================================== */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 10px 24px -6px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 20px 40px -8px rgb(15 23 42 / 0.12);
  --shadow-focus: 0 0 0 3px rgb(2 132 199 / 0.20);

  /* === MOTION =========================================================== */
  --duration-instant: 75ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  --ease-linear: linear;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX ========================================================== */
  --z-base:    0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* === DARK THEME — opt in with [data-theme="dark"] ========================= */
[data-theme="dark"] {
  --bg:           #060d18;
  --bg-muted:     #0b1424;
  --bg-subtle:    #11192b;
  --bg-inverse:   #ffffff;
  --surface:      #0b1424;
  --surface-raised: #11192b;
  --fg:           #e2e8f0;
  --fg-muted:     #94a3b8;
  --fg-subtle:    #64748b;
  --fg-inverse:   #0f172a;
  --border:       #1f2a44;
  --border-strong:#2c3a5a;
  --primary:        var(--sky-500);
  --primary-hover:  var(--sky-400);
  --primary-active: var(--sky-300);
  --primary-fg:     #061425;
  --primary-soft:   rgb(56 189 248 / 0.10);
  --primary-soft-fg: var(--sky-300);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 10px 24px -6px rgb(0 0 0 / 0.50);
  --shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.60);
}

/* === DOCS-CHROME RESET ==================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* === DOCS LAYOUT ========================================================== */
.ds-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.ds-sidebar {
  background: var(--bg-muted);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.ds-sidebar h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-subtle);
  margin: 20px 8px 8px;
  font-weight: var(--weight-semibold);
}
.ds-sidebar h4:first-child { margin-top: 0; }
.ds-nav { display: flex; flex-direction: column; gap: 1px; }
.ds-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.ds-nav a:hover { background: var(--bg-subtle); color: var(--fg); }
.ds-nav a.active { background: var(--primary-soft); color: var(--primary-soft-fg); }

.ds-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 16px;
  font-weight: var(--weight-semibold);
  color: var(--fg);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.ds-brand-mark {
  width: 24px; height: 24px;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
}
.ds-brand-tag {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin-left: auto;
}

.ds-main { padding: 48px 56px 96px; max-width: 1080px; }
.ds-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--primary);
  font-weight: var(--weight-semibold);
  margin: 0 0 8px;
}
.ds-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 12px;
  line-height: var(--leading-tight);
}
.ds-lede {
  font-size: var(--text-lg);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 32px;
  max-width: 64ch;
}
.ds-section { margin: 64px 0 0; }
.ds-section:first-of-type { margin-top: 48px; }
.ds-h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 8px;
}
.ds-h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin: 32px 0 8px;
}
.ds-desc { color: var(--fg-muted); margin: 0 0 24px; max-width: 70ch; line-height: var(--leading-relaxed); }

/* anchors */
.ds-anchor {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  margin-left: 8px;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.ds-h2:hover .ds-anchor, .ds-h3:hover .ds-anchor { opacity: 1; }

/* example surface */
.ds-example {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin: 16px 0;
}
.ds-example-body {
  padding: 32px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgb(15 23 42 / 0.015) 12px 13px);
}
.ds-example-meta {
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ds-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* token row */
.ds-tokens { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ds-token-row { display: grid; grid-template-columns: 32px 1fr 220px 120px; gap: 16px; padding: 12px 16px; align-items: center; background: var(--surface); }
.ds-token-row.head { background: var(--bg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-subtle); font-weight: var(--weight-semibold); }
.ds-token-swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid rgb(15 23 42 / 0.08); }
.ds-token-name { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.ds-token-value { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.ds-token-usage { font-size: 12px; color: var(--fg-subtle); }

/* color scale strip */
.ds-scale { display: grid; grid-template-columns: repeat(11, 1fr); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.ds-step { aspect-ratio: 1 / 1.4; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; font-family: var(--font-mono); font-size: 10px; line-height: 1.2; }
.ds-step-name { font-weight: var(--weight-semibold); }
.ds-step-hex { opacity: 0.85; }

/* small util */
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* code block */
.ds-code {
  background: var(--slate-900);
  color: var(--slate-100);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid var(--slate-800);
}
.ds-code .c-key { color: #7dd3fc; }
.ds-code .c-val { color: #fde68a; }
.ds-code .c-com { color: #64748b; font-style: italic; }

/* pill */
.ds-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: var(--primary-soft);
  color: var(--primary-soft-fg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* do/don't */
.ds-do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.ds-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); }
.ds-card.do { border-left: 3px solid var(--success-500); }
.ds-card.dont { border-left: 3px solid var(--danger-500); }
.ds-card-label { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 8px; }
.ds-card.do .ds-card-label { color: var(--success-700); }
.ds-card.dont .ds-card-label { color: var(--danger-700); }
.ds-card-body { font-size: var(--text-base); color: var(--fg-muted); line-height: var(--leading-relaxed); }
/* SkyCanvass Design System — Component Styles
 * All components are token-driven; tweak tokens.css to retheme the system.
 */

/* === BUTTON ============================================================== */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  outline: none;
}
.sc-btn:focus-visible { box-shadow: var(--shadow-focus); }
.sc-btn[disabled], .sc-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.sc-btn .lucide { width: 16px; height: 16px; }

/* sizes */
.sc-btn-xs { height: 24px; padding: 0 8px;  font-size: var(--text-xs); border-radius: var(--radius-sm); gap: 4px; }
.sc-btn-sm { height: 30px; padding: 0 10px; font-size: var(--text-sm); }
.sc-btn-lg { height: 44px; padding: 0 18px; font-size: var(--text-md); }
.sc-btn-xs .lucide { width: 12px; height: 12px; }
.sc-btn-sm .lucide { width: 14px; height: 14px; }

/* variants */
.sc-btn-primary { background: var(--primary); color: var(--primary-fg); }
.sc-btn-primary:hover { background: var(--primary-hover); }
.sc-btn-primary:active { background: var(--primary-active); }

.sc-btn-secondary {
  background: var(--bg-subtle);
  color: var(--fg);
  border-color: var(--border);
}
.sc-btn-secondary:hover { background: var(--bg-muted); border-color: var(--border-strong); }

.sc-btn-outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.sc-btn-outline:hover { background: var(--bg-subtle); }

.sc-btn-ghost {
  background: transparent;
  color: var(--fg-muted);
}
.sc-btn-ghost:hover { background: var(--bg-subtle); color: var(--fg); }

.sc-btn-link {
  background: transparent;
  color: var(--primary);
  height: auto;
  padding: 0;
  border-radius: 0;
}
.sc-btn-link:hover { text-decoration: underline; }

.sc-btn-danger { background: var(--danger-500); color: white; }
.sc-btn-danger:hover { background: var(--danger-700); }

.sc-btn-icon { width: 36px; padding: 0; }
.sc-btn-icon.sc-btn-sm { width: 30px; }
.sc-btn-icon.sc-btn-xs { width: 24px; }

/* === METADATA CHIP (Tier 1) ============================================= */
/* Neutral chip + small colored dot. For type/role/category — describes, doesn't decide. */
.sc-meta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.sc-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #94a3b8; flex-shrink: 0;
}
.sc-meta-neutral .dot { background: #64748b; }
.sc-meta-primary .dot { background: #0284c7; }
.sc-meta-success .dot { background: #059669; }
.sc-meta-warning .dot { background: #d97706; }
.sc-meta-danger  .dot { background: #dc2626; }
.sc-meta-info    .dot { background: #2563eb; }
.sc-meta-purple  .dot { background: #7c3aed; }

/* Backwards compat — old .sc-badge classes route to metadata chips */
.sc-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: var(--weight-semibold); line-height: 1; height: 22px; padding: 0 9px; border-radius: 6px; background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; white-space: nowrap; }
.sc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; }
.sc-badge-neutral::before { background: #64748b; }
.sc-badge-primary::before { background: #0284c7; }
.sc-badge-success::before { background: #059669; }
.sc-badge-warning::before { background: #d97706; }
.sc-badge-danger::before  { background: #dc2626; }
.sc-badge-info::before    { background: #2563eb; }
.sc-badge-outline { background: transparent; border-color: var(--border-strong); }
.sc-badge-outline::before { display: none; }

/* === STATE INDICATOR (Tier 2) ========================================== */
/* No chip — just a 7px square dot + text inline. Lightest possible touch.
   For lifecycle/severity/activity that lives inside table cells. */
.sc-state {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: #0f172a;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.sc-state::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 1.5px;
  background: #64748b;
  flex-shrink: 0;
}
.sc-state-neutral::before { background: #64748b; }
.sc-state-primary::before { background: #0284c7; }
.sc-state-success::before { background: #059669; }
.sc-state-warning::before { background: #d97706; }
.sc-state-danger::before  { background: #dc2626; }
.sc-state-info::before    { background: #2563eb; }

/* Compact variant for very dense tables */
.sc-state-sm { font-size: 11.5px; gap: 6px; }
.sc-state-sm::before { width: 6px; height: 6px; }

/* === DECISION CHIP (Tier 3) ============================================= */
/* Confident filled chip with leading icon. Reserved for terminal outcomes. */
.sc-decision {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.sc-decision .icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.sc-decision-approved { background: #047857; color: #fff; border-color: #047857; }
.sc-decision-pending  { background: #b45309; color: #fff; border-color: #b45309; }
.sc-decision-denied   { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.sc-decision-archived { background: var(--slate-700); color: #fff; border-color: var(--slate-700); }

/* Quieter outline variant of decision — for lighter contexts */
.sc-decision-outline.sc-decision-approved { background: #fff; color: #047857; border-color: #047857; }
.sc-decision-outline.sc-decision-pending  { background: #fff; color: #b45309; border-color: #b45309; }
.sc-decision-outline.sc-decision-denied   { background: #fff; color: #b91c1c; border-color: #b91c1c; }
.sc-decision-outline.sc-decision-archived { background: #fff; color: var(--slate-700); border-color: var(--slate-400); }

/* Backwards compat — old .sc-status classes route to decision chips */
.sc-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; font-weight: var(--weight-semibold); line-height: 1; height: 24px; padding: 0 10px 0 8px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; letter-spacing: -0.005em; }
.sc-status .dot { display: none; }
.sc-status::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,0.25); flex-shrink: 0;
}
.sc-status-active   { background: #047857; color: #fff; border-color: #047857; }
.sc-status-pending  { background: #b45309; color: #fff; border-color: #b45309; }
.sc-status-rejected { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.sc-status-archived { background: var(--slate-700); color: #fff; border-color: var(--slate-700); }

/* === INPUT =============================================================== */
.sc-field { display: flex; flex-direction: column; gap: 6px; }
.sc-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg);
}
.sc-help { font-size: var(--text-xs); color: var(--fg-subtle); }
.sc-error { font-size: var(--text-xs); color: var(--danger-700); }

.sc-input,
.sc-textarea,
.sc-select {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.sc-input::placeholder, .sc-textarea::placeholder { color: var(--fg-subtle); }
.sc-input:hover, .sc-select:hover, .sc-textarea:hover { border-color: var(--slate-400); }
.sc-input:focus, .sc-select:focus, .sc-textarea:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.sc-input[aria-invalid="true"] { border-color: var(--danger-500); }
.sc-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(239 68 68 / 0.18); }
.sc-textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: var(--leading-normal); }

/* input with icon */
.sc-input-group { position: relative; }
.sc-input-group .sc-input { padding-left: 36px; }
.sc-input-group > .lucide {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--fg-subtle); pointer-events: none;
}

/* select native chevron */
.sc-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,6 8,10 12,6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

/* checkbox / radio */
.sc-check, .sc-radio {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-base);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.sc-check input, .sc-radio input {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.sc-check input { border-radius: var(--radius-xs); }
.sc-radio input { border-radius: 50%; }
.sc-check input:hover, .sc-radio input:hover { border-color: var(--slate-400); }
.sc-check input:checked, .sc-radio input:checked { background: var(--primary); border-color: var(--primary); }
.sc-check input:checked::after {
  content: ""; width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5,6.5 5,9 9.5,3.5'/></svg>") center/contain no-repeat;
}
.sc-radio input:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: white; }
.sc-check input:focus-visible, .sc-radio input:focus-visible { box-shadow: var(--shadow-focus); }

/* toggle */
.sc-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sc-toggle-track {
  width: 32px; height: 18px;
  background: var(--slate-300);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--duration-fast);
}
.sc-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-out);
}
.sc-toggle input:checked + .sc-toggle-track { background: var(--primary); }
.sc-toggle input:checked + .sc-toggle-track::after { transform: translateX(14px); }

/* === CARD ================================================================ */
.sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sc-card-pad { padding: 20px; }
.sc-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.sc-card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; }
.sc-card-body { padding: 20px; }
.sc-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* === TABLE =============================================================== */
.sc-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.sc-table th, .sc-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.sc-table thead th {
  background: var(--bg-muted);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
}
.sc-table tbody tr:last-child td { border-bottom: none; }
.sc-table tbody tr:hover { background: var(--bg-muted); }
.sc-table td.num, .sc-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* === NAVIGATION ========================================================== */
.sc-topnav {
  display: flex; align-items: center; gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sc-topnav-brand { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-semibold); font-size: 0.9375rem; }
.sc-topnav-links { display: flex; gap: 4px; margin-left: 24px; }
.sc-topnav-link {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.sc-topnav-link:hover { background: var(--bg-subtle); color: var(--fg); }
.sc-topnav-link.active { color: var(--primary); }
.sc-topnav-spacer { flex: 1; }

.sc-sidenav {
  background: var(--bg-muted);
  border-right: 1px solid var(--border);
  width: 240px;
  padding: 16px 12px;
}
.sc-sidenav-section { margin-bottom: 12px; }
.sc-sidenav-label { font-size: 10px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-subtle); padding: 4px 8px; }
.sc-sidenav a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.sc-sidenav a:hover { background: var(--bg-subtle); color: var(--fg); }
.sc-sidenav a.active { background: var(--primary-soft); color: var(--primary-soft-fg); }
.sc-sidenav .lucide { width: 16px; height: 16px; }

.sc-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--text-base); color: var(--fg-subtle); }
.sc-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.sc-breadcrumb a:hover { color: var(--fg); }
.sc-breadcrumb .sep { color: var(--slate-400); }
.sc-breadcrumb .current { color: var(--fg); font-weight: var(--weight-medium); }

/* === MODAL =============================================================== */
.sc-modal-backdrop {
  position: fixed; inset: 0; background: rgb(15 23 42 / 0.5);
  display: grid; place-items: center;
  z-index: var(--z-modal);
  padding: 24px;
}
.sc-modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 480px;
  overflow: hidden;
}
.sc-modal-header { padding: 20px 24px 8px; }
.sc-modal-title { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 4px; }
.sc-modal-desc { font-size: var(--text-base); color: var(--fg-muted); margin: 0; }
.sc-modal-body { padding: 16px 24px; }
.sc-modal-footer { padding: 16px 24px; background: var(--bg-muted); display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); }

/* === TOOLTIP ============================================================= */
.sc-tooltip {
  display: inline-block;
  background: var(--slate-900);
  color: var(--slate-50);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  position: relative;
}
.sc-tooltip::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  border: 5px solid transparent;
  border-top-color: var(--slate-900);
  transform: translateX(-50%);
}

/* === COMBOBOX ============================================================ */
.sc-combobox {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 320px;
}
.sc-combobox-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.sc-combobox-search input {
  flex: 1; border: none; outline: none; font-size: var(--text-base);
  background: transparent; color: var(--fg);
}
.sc-combobox-search .lucide { width: 16px; height: 16px; color: var(--fg-subtle); }
.sc-combobox-list { max-height: 280px; overflow-y: auto; padding: 4px; }
.sc-combobox-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
}
.sc-combobox-item:hover, .sc-combobox-item[aria-selected="true"] { background: var(--bg-subtle); }
.sc-combobox-item .check { margin-left: auto; color: var(--primary); width: 14px; height: 14px; }
.sc-combobox-empty { padding: 20px; text-align: center; color: var(--fg-subtle); font-size: var(--text-base); }

/* === SKELETON ============================================================ */
.sc-skel {
  background: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 50%, var(--slate-100) 100%);
  background-size: 200% 100%;
  animation: sc-shimmer 1.5s infinite var(--ease-in-out);
  border-radius: var(--radius-sm);
}
@keyframes sc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sc-skel-line { height: 12px; }
.sc-skel-circle { border-radius: 50%; }

/* === CODE BLOCK ========================================================== */
.sc-code {
  background: var(--slate-900);
  color: var(--slate-100);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  position: relative;
}
.sc-code-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--slate-800);
  color: var(--slate-300);
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sc-code-header + .sc-code { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* === CODE CITATION ======================================================= */
.sc-citation {
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px 16px;
}
.sc-citation-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 8px;
}
.sc-citation-section { color: var(--primary); font-weight: var(--weight-semibold); }
.sc-citation-quote {
  font-size: var(--text-md);
  color: var(--fg);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.sc-citation-source {
  display: flex; gap: 12px; align-items: center;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}
.sc-citation-source a { color: var(--primary); text-decoration: none; }

/* === DATE PICKER ========================================================= */
.sc-datepicker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 12px;
  width: 280px;
}
.sc-dp-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 8px; }
.sc-dp-month { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.sc-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sc-dp-dow { font-size: 10px; font-weight: var(--weight-semibold); color: var(--fg-subtle); text-align: center; padding: 6px 0; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sc-dp-day {
  height: 32px; display: grid; place-items: center;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.sc-dp-day:hover { background: var(--bg-subtle); }
.sc-dp-day.muted { color: var(--fg-subtle); }
.sc-dp-day.today { box-shadow: inset 0 0 0 1px var(--primary); }
.sc-dp-day.selected { background: var(--primary); color: var(--primary-fg); }
.sc-dp-day.in-range { background: var(--primary-soft); color: var(--primary-soft-fg); border-radius: 0; }

/* === TIMELINE ============================================================ */
.sc-timeline { position: relative; padding-left: 24px; }
.sc-timeline::before {
  content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border);
}
.sc-timeline-item { position: relative; padding-bottom: 20px; }
.sc-timeline-item::before {
  content: ""; position: absolute; left: -21px; top: 4px;
  width: 12px; height: 12px;
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: 50%;
}
.sc-timeline-item.past::before { background: var(--primary); }
.sc-timeline-time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sc-timeline-title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 2px 0 4px; }
.sc-timeline-body { font-size: var(--text-sm); color: var(--fg-muted); }

/* === HAIL LEGEND ========================================================= */
.sc-hail-legend {
  display: flex; align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
}
.sc-hail-step {
  flex: 1;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  color: var(--slate-900);
}
.sc-hail-step .sz { font-weight: var(--weight-semibold); }
.sc-hail-step .lb { opacity: 0.75; font-size: 10px; }

/* ============================================================================
   LAYOUT + TYPOGRAPHY + MODIFIER HELPERS  (added 2026-05-07)
   These extend the .sc-* API so consumer markup never needs utility classes.
   Every rule is token-driven; no literal color/spacing values except where
   the source pages already use literals.
   ========================================================================== */

/* === STACK (vertical flex with gap) ====================================== */
.sc-stack    { display: flex; flex-direction: column; gap: var(--space-3); }
.sc-stack-1  { gap: var(--space-1); }
.sc-stack-2  { gap: var(--space-2); }
.sc-stack-3  { gap: var(--space-3); }
.sc-stack-4  { gap: var(--space-4); }
.sc-stack-5  { gap: var(--space-5); }
.sc-stack-6  { gap: var(--space-6); }
.sc-stack-8  { gap: var(--space-8); }
.sc-stack-12 { gap: var(--space-12); }

/* === ROW (horizontal flex; centered items + gap by default) ============== */
.sc-row              { display: flex; align-items: center; gap: var(--space-3); }
.sc-row-1            { gap: var(--space-1); }
.sc-row-2            { gap: var(--space-2); }
.sc-row-3            { gap: var(--space-3); }
.sc-row-4            { gap: var(--space-4); }
.sc-row-6            { gap: var(--space-6); }
.sc-row-8            { gap: var(--space-8); }
.sc-row-start        { align-items: flex-start; }
.sc-row-end          { align-items: flex-end; }
.sc-row-baseline     { align-items: baseline; }
.sc-row-stretch      { align-items: stretch; }
.sc-row-between      { justify-content: space-between; }
.sc-row-center       { justify-content: center; }
.sc-row-justify-end  { justify-content: flex-end; }
.sc-row-wrap         { flex-wrap: wrap; }

/* === CLUSTER (chips/pills with wrap) ===================================== */
.sc-cluster   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sc-cluster-1 { gap: var(--space-1); }
.sc-cluster-3 { gap: var(--space-3); }

/* === GRID =============================================================== */
.sc-grid       { display: grid; gap: var(--space-3); }
.sc-grid-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-grid-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-grid-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-grid-5     { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-grid-auto  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sc-grid-asym1 { grid-template-columns: 1fr 0.75fr; }
.sc-grid-asym2 { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr); }
.sc-grid-gap-2 { gap: var(--space-2); }
.sc-grid-gap-4 { gap: var(--space-4); }
.sc-grid-gap-6 { gap: var(--space-6); }
.sc-grid-gap-8 { gap: var(--space-8); }

/* responsive variants — Tailwind-aligned breakpoints (640/768/1024) */
@media (min-width: 640px) {
  .sc-row-sm-row     { flex-direction: row; }
  .sc-row-sm-between { justify-content: space-between; }
  .sc-grid-sm-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-grid-sm-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-hidden-sm      { display: none; }
  .sc-show-sm        { display: revert; }
}
@media (min-width: 768px) {
  .sc-grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-grid-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc-grid-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sc-row-md-row { flex-direction: row; }
}
@media (min-width: 1024px) {
  .sc-row-lg              { display: flex; }
  .sc-row-lg-row          { flex-direction: row; }
  .sc-row-lg-col          { flex-direction: column; }
  .sc-row-lg-between      { justify-content: space-between; }
  .sc-row-lg-end          { justify-content: flex-end; }
  .sc-row-lg-items-end    { align-items: flex-end; }
  .sc-row-lg-items-start  { align-items: flex-start; }
  .sc-grid-lg-2           { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-grid-lg-3           { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-grid-lg-4           { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc-grid-lg-5           { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sc-grid-lg-asym1       { grid-template-columns: 1fr 0.75fr; }
  .sc-grid-lg-asym2       { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr); }
  .sc-hidden-lg           { display: none; }
  .sc-show-lg             { display: revert; }
}

/* === PAGE WRAPPERS ====================================================== */
.sc-page         { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.sc-page-narrow  { max-width:  768px; margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.sc-page-wide    { max-width: 1536px; margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.sc-section      { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.sc-section-sm   { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
@media (min-width: 1024px) {
  .sc-page, .sc-page-narrow, .sc-page-wide { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* === TYPOGRAPHY LADDER ================================================== */
.sc-h1       { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold);     margin: 0; }
.sc-h2       { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug);  font-weight: var(--weight-semibold); margin: 0; }
.sc-h3       { font-size: var(--text-xl);  line-height: var(--leading-tight); letter-spacing: var(--tracking-snug);  font-weight: var(--weight-semibold); margin: 0; }
.sc-h4       { font-size: var(--text-md);  line-height: var(--leading-snug);                                          font-weight: var(--weight-semibold); margin: 0; }
.sc-h5       { font-size: var(--text-base);line-height: var(--leading-snug);                                          font-weight: var(--weight-semibold); margin: 0; }
.sc-display  { font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold);     margin: 0; }
.sc-lede     { font-size: var(--text-lg);  line-height: var(--leading-relaxed); color: var(--fg-muted); }
.sc-body     { font-size: var(--text-md);  line-height: var(--leading-relaxed); color: var(--fg); }
.sc-body-sm  { font-size: var(--text-base);line-height: var(--leading-normal);  color: var(--fg); }
.sc-caption  { font-size: var(--text-xs);  line-height: var(--leading-normal);  color: var(--fg-subtle); }
.sc-overline { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-subtle); }
.sc-micro    { font-size: 11px; line-height: 1.4; color: var(--fg-muted); }
.sc-nano     { font-size: 10px; line-height: 1.4; color: var(--fg-subtle); }

/* === TEXT MODIFIERS ===================================================== */
.sc-mute        { color: var(--fg-muted); }
.sc-subtle      { color: var(--fg-subtle); }
.sc-emphasize   { color: var(--fg); font-weight: var(--weight-semibold); }
.sc-mono        { font-family: var(--font-mono); }
.sc-tabular     { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.sc-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-text-center { text-align: center; }
.sc-text-left   { text-align: left; }
.sc-text-right  { text-align: right; }
.sc-text-success { color: var(--success-700); }
.sc-text-warning { color: var(--warning-700); }
.sc-text-danger  { color: var(--danger-700); }
.sc-text-info    { color: var(--info-700); }
.sc-text-primary { color: var(--primary); }
.sc-uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.sc-italic      { font-style: italic; }
.sc-nowrap      { white-space: nowrap; }
.sc-break-all   { word-break: break-all; }
.sc-break-words { overflow-wrap: break-word; word-break: break-word; }
.sc-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* === SURFACE STATE MODIFIERS (extend .sc-card) =========================== */
.sc-card-warning { background: var(--warning-50); border-color: rgb(217 119 6 / 0.30); }
.sc-card-danger  { background: var(--danger-50);  border-color: rgb(239 68 68 / 0.30); }
.sc-card-success { background: var(--success-50); border-color: rgb( 16 185 129 / 0.30); }
.sc-card-info    { background: var(--info-50);    border-color: rgb( 59 130 246 / 0.30); }
.sc-card-primary { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-soft-fg); }
.sc-card-pad-0   { padding: 0; }
.sc-card-pad-sm  { padding: var(--space-3); }
.sc-card-pad-md  { padding: var(--space-4); }
.sc-card-pad-lg  { padding: var(--space-6); }
.sc-card-pad-xl  { padding: var(--space-8); }
.sc-card-elev-sm { box-shadow: var(--shadow-sm); }
.sc-card-elev-md { box-shadow: var(--shadow-md); }
.sc-card-elev-lg { box-shadow: var(--shadow-lg); }
.sc-card-flat    { box-shadow: none; }
.sc-card-hover   { transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.sc-card-hover:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }

/* === MARGIN/PADDING UTILITIES (use sparingly; prefer .sc-stack) ========= */
.sc-mt-0 { margin-top: 0; }
.sc-mt-1 { margin-top: var(--space-1); }
.sc-mt-2 { margin-top: var(--space-2); }
.sc-mt-3 { margin-top: var(--space-3); }
.sc-mt-4 { margin-top: var(--space-4); }
.sc-mt-6 { margin-top: var(--space-6); }
.sc-mt-8 { margin-top: var(--space-8); }
.sc-mt-12 { margin-top: var(--space-12); }
.sc-mb-0 { margin-bottom: 0; }
.sc-mb-1 { margin-bottom: var(--space-1); }
.sc-mb-2 { margin-bottom: var(--space-2); }
.sc-mb-3 { margin-bottom: var(--space-3); }
.sc-mb-4 { margin-bottom: var(--space-4); }
.sc-mb-6 { margin-bottom: var(--space-6); }
.sc-mb-8 { margin-bottom: var(--space-8); }
.sc-mb-12 { margin-bottom: var(--space-12); }
.sc-mx-auto { margin-left: auto; margin-right: auto; }
.sc-ml-auto { margin-left: auto; }

/* === SIZE / DISPLAY UTILITIES =========================================== */
.sc-w-full     { width: 100%; }
.sc-h-full     { height: 100%; }
.sc-min-w-0    { min-width: 0; }
.sc-max-w-prose { max-width: 65ch; }
.sc-hidden     { display: none; }
.sc-inline     { display: inline; }
.sc-inline-block { display: inline-block; }
.sc-inline-flex  { display: inline-flex; align-items: center; }
.sc-block      { display: block; }
.sc-flex-1     { flex: 1 1 0%; }
.sc-flex-none  { flex: none; }
.sc-shrink-0   { flex-shrink: 0; }
.sc-grow       { flex-grow: 1; }

/* === POSITION + STACKING ================================================ */
.sc-relative { position: relative; }
.sc-absolute { position: absolute; }
.sc-sticky   { position: sticky; }
.sc-z-10     { z-index: 10; }
.sc-z-30     { z-index: 30; }
.sc-z-40     { z-index: 40; }
.sc-z-50     { z-index: 50; }

/* === SR-ONLY (a11y) ===================================================== */
.sc-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; }

/* === OVERFLOW =========================================================== */
.sc-overflow-hidden { overflow: hidden; }
.sc-overflow-x-auto { overflow-x: auto; }
.sc-overflow-y-auto { overflow-y: auto; }

/* === SCROLL ============================================================= */
.sc-scroll-mt-24 { scroll-margin-top: 96px; }

/* === ROUNDING UTILITIES ================================================= */
.sc-rounded-sm   { border-radius: var(--radius-sm); }
.sc-rounded-md   { border-radius: var(--radius-md); }
.sc-rounded-lg   { border-radius: var(--radius-lg); }
.sc-rounded-xl   { border-radius: var(--radius-xl); }
.sc-rounded-2xl  { border-radius: var(--radius-2xl); }
.sc-rounded-full { border-radius: var(--radius-full); }

/* === BORDER UTILITIES =================================================== */
.sc-border    { border: 1px solid var(--border); }
.sc-border-t  { border-top: 1px solid var(--border); }
.sc-border-b  { border-bottom: 1px solid var(--border); }
.sc-border-l  { border-left: 1px solid var(--border); }
.sc-border-r  { border-right: 1px solid var(--border); }
.sc-border-strong { border-color: var(--border-strong); }
.sc-divide-y > * + * { border-top: 1px solid var(--border); }

/* === BACKGROUND UTILITIES =============================================== */
.sc-bg-surface { background: var(--surface); }
.sc-bg-subtle  { background: var(--bg-subtle); }
.sc-bg-muted   { background: var(--bg-muted); }
.sc-bg-primary-soft { background: var(--primary-soft); color: var(--primary-soft-fg); }

/* === TRANSITIONS ======================================================== */
.sc-transition  { transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.sc-transition-transform { transition: transform var(--duration-fast) var(--ease-out); }

/* === FOCUS RING ========================================================= */
.sc-focus:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

/* ============================================================================
   UTILITY ADDITIONS — added 2026-05-08 per Tailwind→.sc-* migration
   Spec: docs/research/2026-05-08-leptos-tailwind-inventory.md §Gap analysis
   ADR: docs/adrs/ADR-012-leptos-responsive-strategy.md
   Tasks: #67-#71, #73 (this block) — many proposed utilities turned out to
   already exist in the 2026-05-07 helpers section above; only the truly-new
   ones are added here.
   ========================================================================== */

/* === FONT WEIGHT (#67) =================================================== */
.sc-font-medium   { font-weight: 500; }
.sc-font-semibold { font-weight: 600; }
.sc-font-bold     { font-weight: 700; }

/* === PADDING UTILITIES (#68) ============================================= */
/* sc-mt-*/sc-mb-*/sc-mx-auto already exist above; this batch adds padding. */
.sc-p-0 { padding: var(--space-0); }
.sc-p-1 { padding: var(--space-1); }
.sc-p-2 { padding: var(--space-2); }
.sc-p-3 { padding: var(--space-3); }
.sc-p-4 { padding: var(--space-4); }
.sc-p-6 { padding: var(--space-6); }
.sc-p-8 { padding: var(--space-8); }
.sc-px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.sc-px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.sc-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.sc-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.sc-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.sc-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.sc-py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.sc-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.sc-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.sc-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.sc-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.sc-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.sc-pt-0 { padding-top: var(--space-0); }
.sc-pt-1 { padding-top: var(--space-1); }
.sc-pt-2 { padding-top: var(--space-2); }
.sc-pt-3 { padding-top: var(--space-3); }
.sc-pt-4 { padding-top: var(--space-4); }
.sc-pb-0 { padding-bottom: var(--space-0); }
.sc-pb-1 { padding-bottom: var(--space-1); }
.sc-pb-2 { padding-bottom: var(--space-2); }
.sc-pb-3 { padding-bottom: var(--space-3); }
.sc-pb-4 { padding-bottom: var(--space-4); }
.sc-pl-0 { padding-left: var(--space-0); }
.sc-pl-2 { padding-left: var(--space-2); }
.sc-pl-3 { padding-left: var(--space-3); }
.sc-pl-4 { padding-left: var(--space-4); }
.sc-pr-0 { padding-right: var(--space-0); }
.sc-pr-2 { padding-right: var(--space-2); }
.sc-pr-3 { padding-right: var(--space-3); }
.sc-pr-4 { padding-right: var(--space-4); }

/* === ROW JUSTIFY EXTENSIONS (#69) ======================================== */
/* sc-row-{start,end,wrap,baseline,stretch,between,center,justify-end} exist above. */
.sc-row-around   { justify-content: space-around; }
.sc-row-evenly   { justify-content: space-evenly; }

/* === DEFAULT RADIUS + DECORATION (#70) =================================== */
/* sc-rounded-{sm,md,lg,xl,2xl,full} exist above; adding bare alias + decoration. */
.sc-rounded        { border-radius: var(--radius-md); }
.sc-rounded-none   { border-radius: var(--radius-none); }
.sc-rounded-xs     { border-radius: var(--radius-xs); }
.sc-underline      { text-decoration: underline; }
.sc-no-underline   { text-decoration: none; }
.sc-line-through   { text-decoration: line-through; }

/* === SHADOW UTILITIES (#70) ============================================== */
/* sc-card-elev-{sm,md,lg} exist above (card-scoped); adding standalone variants. */
.sc-shadow-none { box-shadow: none; }
.sc-shadow-xs   { box-shadow: var(--shadow-xs); }
.sc-shadow-sm   { box-shadow: var(--shadow-sm); }
.sc-shadow-md   { box-shadow: var(--shadow-md); }
.sc-shadow-lg   { box-shadow: var(--shadow-lg); }
.sc-shadow-xl   { box-shadow: var(--shadow-xl); }

/* === FONT SIZE UTILITIES (#71) =========================================== */
/* Prefer .sc-h{1..5} / .sc-body / .sc-body-sm / .sc-caption (semantic, exist above).
 * Use these utilities only when the surrounding element's semantic class doesn't
 * carry the right font-size (one-off overrides). */
.sc-text-xs   { font-size: var(--text-xs); line-height: 1.5; }
.sc-text-sm   { font-size: var(--text-sm); line-height: 1.5; }
.sc-text-base { font-size: var(--text-base); line-height: 1.65; }
.sc-text-md   { font-size: var(--text-md); line-height: 1.65; }
.sc-text-lg   { font-size: var(--text-lg); line-height: 1.65; }
.sc-text-xl   { font-size: var(--text-xl); line-height: 1.3; }
.sc-text-2xl  { font-size: var(--text-2xl); line-height: 1.2; }
.sc-text-3xl  { font-size: var(--text-3xl); line-height: 1.15; }
.sc-text-4xl  { font-size: var(--text-4xl); line-height: 1.1; }
.sc-font-mono { font-family: var(--font-mono); }
.sc-font-sans { font-family: var(--font-sans); }

/* === RESPONSIVE EXTENSIONS (#73, per ADR-012) ============================ */
/* Existing responsive utilities (sc-grid-{sm,md,lg}-N, sc-row-{sm,md,lg}-row,
 * sc-hidden-{sm,lg}, sc-show-{sm,lg}) are above. This block adds the 3 new
 * variants used in source: sc-md-text-left, sc-sm-px-6, sc-lg-px-8. Per
 * ADR-012, do NOT add xl/2xl variants without amending the ADR. */
@media (min-width: 640px) {
  .sc-sm-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (min-width: 768px) {
  .sc-md-text-left { text-align: left; }
}
@media (min-width: 1024px) {
  .sc-lg-px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* ============================================================================
   UTILITY ADDITIONS — PART 2 (added 2026-05-08, address_profile migration)
   Small set of additional primitives surfaced by the per-file migrations
   following the initial gap analysis. Each addition is one of:
     - flex/width/justify primitive used by 5+ files
     - animation utility needed by skeleton/loading patterns
     - breakpoint variant authorized by ADR-012 amendment-by-precedent
   ========================================================================== */

/* === FLEX / DISPLAY PRIMITIVES =========================================== */
/* sc-row covers flex+items-center+gap; sc-stack covers flex-column+gap.
 * These are the bare primitives for cases where neither composite fits. */
.sc-flex     { display: flex; }
.sc-flex-col { flex-direction: column; }
.sc-contents { display: contents; }

/* === WIDTH / HEIGHT EXTENSIONS =========================================== */
/* sc-w-full / sc-h-full exist above; adding the remaining two used in source. */
.sc-w-auto { width: auto; }
.sc-h-auto { height: auto; }

/* === JUSTIFY / ALIGN PRIMITIVES ========================================== */
/* For non-row flex containers (sc-stack-* etc.) that need explicit justify. */
.sc-justify-start   { justify-content: flex-start; }
.sc-justify-center  { justify-content: center; }
.sc-justify-end     { justify-content: flex-end; }
.sc-justify-between { justify-content: space-between; }
.sc-items-start  { align-items: flex-start; }
.sc-items-center { align-items: center; }
.sc-items-end    { align-items: flex-end; }

/* === ANIMATION =========================================================== */
/* Skeleton/pulse loading state used by SectionSkeleton + Suspense fallbacks. */
@keyframes sc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.sc-animate-pulse { animation: sc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* === RESPONSIVE WIDTH (per ADR-012, bounded extension) =================== */
/* sm:w-auto pattern on CTAs that should be full-width on mobile, auto on tablet+. */
@media (min-width: 640px) {
  .sc-sm-w-auto { width: auto; }
}

/* === MOBILE TAB NAV (semantic, per ADR-012 hover/focus pattern) ========== */
/* Sticky horizontal scrollable nav shown only on screens < lg. Mirrors the
 * .sc-sidenav pattern: container class + child <a> rules + .active modifier. */
.sc-tab-nav {
  position: sticky;
  top: 64px;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-4);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 1024px) {
  .sc-tab-nav { display: none; }
}
.sc-tab-nav-rail {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  overflow-x: auto;
}
.sc-tab-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  border-radius: var(--radius-md);
  padding: 6px var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.sc-tab-nav-link:hover {
  color: var(--fg);
  background: var(--bg-subtle);
}
.sc-tab-nav-link.active {
  color: var(--primary);
  background: var(--primary-soft);
}
.sc-tab-nav-overflow {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: var(--space-1);
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-1) 0;
  box-shadow: var(--shadow-lg);
  z-index: 40;
}
.sc-tab-nav-overflow a {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.sc-tab-nav-overflow a:hover {
  color: var(--fg);
  background: var(--bg-subtle);
}
.sc-tab-nav-overflow a.active {
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: var(--weight-medium);
}

/* === JURISDICTION DISAMBIGUATION (semantic, per ADR-012) ================= */
/* Amber-themed candidate-pick buttons inside a .sc-card-warning banner.
 * Used by JurisdictionFollowUpPrompt — distinct hover/active rules so it
 * gets its own semantic class rather than utility soup. */
.sc-jurisdiction-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid rgb(252 211 77);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--warning-700);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.sc-jurisdiction-pick:hover {
  border-color: rgb(217 119 6);
  background: var(--warning-50);
}
.sc-jurisdiction-pick:disabled {
  cursor: wait;
  opacity: 0.6;
}
.sc-jurisdiction-pick-share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--warning-50);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--warning-700);
}

/* === DELIVERABLE / NAV CARD LINK (semantic, per ADR-012 sample) ========== */
/* Hoverable card-shaped <a>. Replaces the recurring Tailwind pattern:
 *   "group sc-card sc-card-pad shadow-sm transition-all hover:shadow-md
 *    hover:border-[var(--primary)] hover:-translate-y-0.5"
 * Encapsulates the lift + arrow-fade + cta-underline state in CSS rules
 * so callers carry only `.sc-card-link` (and optionally `.disabled`). */
.sc-card-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.sc-card-link:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sc-card-link.disabled,
.sc-card-link[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
}
.sc-card-link-arrow {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  color: var(--fg-subtle);
}
.sc-card-link:hover .sc-card-link-arrow { opacity: 1; }
.sc-card-link-cta {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--primary);
}
.sc-card-link:hover .sc-card-link-cta { text-decoration: underline; }
.sc-card-link-cta-disabled {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--fg-subtle);
}

/* === WORKFLOW STEPPER (semantic) ========================================= */
/* Numbered circle chips with connector lines between them. State variants:
 *   .sc-step-circle              → pending   (muted bg + subtle text)
 *   .sc-step-circle.active       → primary   (sky-blue bg + white text)
 *   .sc-step-circle.completed    → completed (emerald bg + white text + check) */
.sc-step-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  background: var(--bg-muted);
  color: var(--fg-subtle);
}
.sc-step-circle.active    { background: var(--primary); color: var(--primary-fg); }
.sc-step-circle.completed { background: var(--success-500); color: white; }
.sc-step-label            { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-subtle); }
.sc-step-label.active     { color: var(--fg); }
.sc-step-label.completed  { color: var(--fg); }
.sc-step-connector        { width: var(--space-8); height: 1px; margin: 0 var(--space-1); background: var(--border); }
.sc-step-connector.completed { background: var(--success-300, #6ee7b7); }

/* === ACTION CARDS (semantic) ============================================= */
/* Used in NextActionBar — primary highlight or neutral row, both with arrow
 * that translates on hover. Same idiom as .sc-card-link, with explicit
 * primary variant (filled) and neutral variant (bordered). */
.sc-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.sc-action:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.sc-action.primary {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.sc-action.primary:hover { background: var(--primary-soft-strong, var(--primary-soft)); }
.sc-action-arrow {
  flex-shrink: 0;
  color: var(--fg-subtle);
  transition: transform var(--duration-fast) var(--ease-out);
}
.sc-action:hover .sc-action-arrow  { transform: translateX(2px); }
.sc-action.primary .sc-action-arrow { color: var(--primary); }

/* === ADDRESS PAGE LEFT RAIL (semantic) ==================================== */
/* Desktop-only sticky sidebar with grouped section anchors and a primary
 * gradient CTA at the bottom. Similar to .sc-sidenav but the address page
 * needs a different width and a footer affordance. */
.sc-address-rail {
  display: none;
  width: 288px;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-muted);
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .sc-address-rail { display: flex; }
}
.sc-address-rail-header { padding: var(--space-5); border-bottom: 1px solid var(--border); }
.sc-address-rail-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-subtle); }
.sc-address-rail-nav     { flex: 1; padding: var(--space-3) 0; }
.sc-address-rail-group   { margin-bottom: var(--space-2); }
.sc-address-rail-label   { padding: 6px var(--space-5); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-subtle); }
.sc-address-rail-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-base);
  border-left: 2px solid transparent;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.sc-address-rail-link:hover { background: var(--bg-subtle); color: var(--fg); }
.sc-address-rail-link.active {
  border-left-color: var(--primary);
  background: var(--primary-soft);
  color: var(--fg);
  font-weight: var(--weight-medium);
}
.sc-address-rail-footer { padding: var(--space-4); border-top: 1px solid var(--border); }
.sc-address-rail-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary), var(--sky-blue-700, var(--primary-active)));
  color: white;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.sc-address-rail-cta:hover { box-shadow: var(--shadow-md); }

/* === DELIVERABLES SIDEBAR LIST (semantic) ================================ */
/* Categorized clickable list of deliverables. Each row has emoji icon,
 * title (color-shifts to primary on hover), description, optional tier pill. */
.sc-deliverable-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: var(--space-2) 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.sc-deliverable-link:hover { background: var(--bg-subtle); }
.sc-deliverable-link-icon  { flex-shrink: 0; color: var(--fg-subtle); margin-top: 2px; transition: color var(--duration-fast) var(--ease-out); }
.sc-deliverable-link:hover .sc-deliverable-link-icon { color: var(--primary); }
.sc-deliverable-link-title { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg); transition: color var(--duration-fast) var(--ease-out); }
.sc-deliverable-link:hover .sc-deliverable-link-title { color: var(--primary); }
.sc-deliverable-link-desc  { font-size: 11px; line-height: 1.4; color: var(--fg-subtle); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-deliverable-tier-pill {
  border: 1px solid rgb(252 211 77 / 0.6);
  background: var(--warning-50);
  border-radius: var(--radius-xs);
  padding: 2px var(--space-1);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--warning-700);
}
.sc-deliverable-storm-banner {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: rgb(254 243 199 / 0.5);
}

/* === EXPANDABLE BUTTON ROW (semantic) ==================================== */
/* Used by ManufacturerSection's CategoryGroup + ManufacturerCard expand
 * toggles, and other "click row to expand" patterns. Subtle hover shading
 * over a transparent base; transition on the background only. */
.sc-expand-row {
  transition: background-color var(--duration-fast) var(--ease-out);
}
.sc-expand-row:hover { background: var(--bg-subtle); }
.sc-expand-row:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

/* === CORRECTABLE ROW (semantic) ========================================= */
/* Used by PropertySection — each parcel data cell that's user-correctable
 * shows a pencil button on row hover. Inactive: opacity 0; row-hover or
 * pencil-focus: opacity 1; pencil-hover: primary color. */
.sc-correctable-row .sc-correctable-pencil {
  opacity: 0;
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 0;
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.sc-correctable-row:hover .sc-correctable-pencil { opacity: 1; }
.sc-correctable-pencil:focus-visible { opacity: 1; outline: none; }
.sc-correctable-pencil:hover { color: var(--primary); }

/* === FILTER PILL (semantic) ============================================= */
/* Toggle button used by StormTimeline + similar filter rows. Active state
 * uses primary-soft background; inactive hovers to bg-subtle. */
.sc-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: none;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.sc-filter-pill:hover { background: var(--bg-subtle); }
.sc-filter-pill.active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* === CHIP / PILL (general-purpose) ======================================= */
/* Bordered rounded-pill chip used for warranty wind ratings, secondary tags.
 * Sibling of .sc-badge / .sc-state. Use when neither dot-prefix (.sc-badge)
 * nor state-color (.sc-state-*) fit. */
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
}

/* ============================================================================
   SHOWCASE CHROME — .ds-* classes used inside the design-system docs site
   These should ONLY appear inside the /design-system route.
   Mirrors the per-page <style> blocks in the source HTML files.
   ========================================================================== */

/* === SHELL ============================================================== */
.ds-shell    { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.ds-sidebar  { border-right: 1px solid var(--border); padding: var(--space-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--bg); }
.ds-main     { padding: var(--space-8); max-width: 980px; }

/* === HERO =============================================================== */
.ds-hero        { padding: 64px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.ds-hero-grid   { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.ds-version-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* === SPEC + LINK CARDS ================================================== */
.ds-spec-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--bg-muted); }
.ds-spec-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.ds-spec-row:last-child { border-bottom: none; }
.ds-spec-row .k { color: var(--fg-subtle); font-family: var(--font-mono); font-size: 11px; }
.ds-spec-row .v { color: var(--fg); font-weight: var(--weight-medium); }
.ds-cards-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
.ds-link-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; background: var(--surface); text-decoration: none; color: var(--fg); display: flex; flex-direction: column; gap: 4px; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.ds-link-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.ds-link-card .ds-link-card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ds-link-card .ds-link-card-desc  { font-size: var(--text-sm); color: var(--fg-muted); }

/* === SECTION HEADER ===================================================== */
.ds-section-header { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); margin-bottom: var(--space-8); }
.ds-section-header h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-2); letter-spacing: var(--tracking-tight); }
.ds-section-header p  { font-size: var(--text-md); color: var(--fg-muted); margin: 0; }

/* === EYEBROWS / TAGS ==================================================== */
.ds-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: var(--primary-soft);
  color: var(--primary-soft-fg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* === DO/DON'T (for showcase guidance) =================================== */
.ds-do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.ds-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); }
.ds-card.do { border-left: 3px solid var(--success-500); }
.ds-card.dont { border-left: 3px solid var(--danger-500); }
.ds-card-label { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 8px; }
.ds-card.do .ds-card-label { color: var(--success-700); }
.ds-card.dont .ds-card-label { color: var(--danger-700); }
.ds-card-body { font-size: var(--text-base); color: var(--fg-muted); line-height: var(--leading-relaxed); }

/* === TOKEN INSPECTOR ==================================================== */
.ds-token-row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: center; }
.ds-token-row:last-child { border-bottom: none; }
.ds-token-key   { font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); }
.ds-token-value { font-size: var(--text-sm); color: var(--fg); }
.ds-token-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); vertical-align: -4px; margin-right: 8px; }

/* === COLOR SWATCH GRID ================================================== */
.ds-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ds-swatch      { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ds-swatch-fill { height: 64px; }
.ds-swatch-meta { padding: 8px 10px; font-size: var(--text-sm); display: flex; justify-content: space-between; }
.ds-swatch-meta .name { color: var(--fg); font-weight: var(--weight-medium); }
.ds-swatch-meta .hex  { color: var(--fg-subtle); font-family: var(--font-mono); font-size: 11px; }

/* === ICON GRID (for /design-system/iconography) ========================= */
.ds-icon-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ds-icon-cell  { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--surface); }
.ds-icon-cell svg { width: 24px; height: 24px; color: var(--fg-muted); }
.ds-icon-cell .name { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); }

/* === TYPE SPECIMEN ====================================================== */
.ds-type-row    { padding: 16px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: baseline; }
.ds-type-row:last-child { border-bottom: none; }
.ds-type-key    { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }
.ds-type-sample { color: var(--fg); }

/* === SPACING SPECIMEN =================================================== */
.ds-space-row   { display: grid; grid-template-columns: 80px 1fr 60px; gap: 16px; align-items: center; padding: 6px 0; }
.ds-space-row .key { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }
.ds-space-bar  { background: var(--primary-soft); height: 12px; border-radius: 2px; }
.ds-space-row .val { font-size: var(--text-sm); color: var(--fg-subtle); text-align: right; }

/* === RADIUS / SHADOW SPECIMEN =========================================== */
.ds-shadow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.ds-shadow-tile { background: var(--surface); border: 1px solid var(--border); padding: 24px; text-align: center; }
.ds-shadow-tile .name { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin-top: 8px; }

/* === MOTION DEMO ======================================================== */
.ds-motion-tile { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 18px; background: var(--primary); color: var(--primary-fg); border-radius: var(--radius-md); cursor: pointer; }
.ds-motion-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* === CODE BLOCK FOR DOCS ================================================ */
.ds-code-snippet { background: var(--code-bg); color: var(--code-fg); padding: 16px; border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12px; overflow-x: auto; line-height: 1.5; white-space: pre; }

/* === KEYFRAMES — used by inline animations on auth/maintenance/verify pages ===== */
@keyframes sc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sc-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}