/* Lacy Digital Labs Design System v0.1.0 — GENERATED from tokens/tokens.json. Do not edit by hand. */
/* Accent: Willis Gold (OKLCH hue 72). Modes: [data-mode="light|dark"] (auto via prefers-color-scheme). Density: [data-density="compact|dense"] (default comfortable). */

:root {
  --ldl-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ldl-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --ldl-font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ldl-weight-regular: 400;
  --ldl-weight-medium: 500;
  --ldl-weight-semibold: 600;
  --ldl-weight-bold: 700;
  --ldl-space-0: 0px;
  --ldl-space-1: 4px;
  --ldl-space-2: 8px;
  --ldl-space-3: 12px;
  --ldl-space-4: 16px;
  --ldl-space-5: 20px;
  --ldl-space-6: 24px;
  --ldl-space-8: 32px;
  --ldl-space-10: 40px;
  --ldl-space-12: 48px;
  --ldl-space-16: 64px;
  --ldl-space-24: 96px;
  --ldl-space-px: 1px;
  --ldl-space-0_5: 2px;
  --ldl-space-1_5: 6px;
  --ldl-radius-xs: 4px;
  --ldl-radius-sm: 6px;
  --ldl-radius-md: 9px;
  --ldl-radius-lg: 14px;
  --ldl-radius-xl: 20px;
  --ldl-radius-full: 999px;
  --ldl-radius-icon: 22%;
  --ldl-icon-sm: 16px;
  --ldl-icon-md: 20px;
  --ldl-icon-lg: 24px;
  --ldl-motion-fast: 150ms;
  --ldl-motion-normal: 300ms;
  --ldl-motion-slow: 500ms;
  --ldl-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ldl-motion-easeOut: cubic-bezier(0.16, 1, 0.3, 1);
  --ldl-z-base: 0;
  --ldl-z-dropdown: 1000;
  --ldl-z-sticky: 1100;
  --ldl-z-overlay: 1200;
  --ldl-z-modal: 1300;
  --ldl-z-toast: 1400;
  --ldl-z-tooltip: 1500;
  --ldl-focus-width: 2px;
  --ldl-focus-offset: 2px;
  --ldl-focus-color: var(--ldl-accent);
  --ldl-opacity-hover: 0.06;
  --ldl-opacity-pressed: 0.12;
  --ldl-opacity-dragged: 0.16;
  --ldl-opacity-disabled-content: 0.38;
  --ldl-opacity-disabled-container: 0.12;
  --ldl-maxw: 1200px;
  --ldl-maxw-tight: 920px;
  --ldl-content-w: 720px;
  --ldl-bp-sm: 560px;
  --ldl-bp-md: 760px;
  --ldl-bp-lg: 940px;
  --ldl-bp-xl: 1024px;
  --ldl-series-1: oklch(0.72 0.15 72);
  --ldl-series-2: oklch(0.70 0.14 250);
  --ldl-series-3: oklch(0.75 0.15 150);
  --ldl-series-4: oklch(0.72 0.16 40);
  --ldl-series-5: oklch(0.68 0.14 305);
  --ldl-series-6: oklch(0.78 0.12 195);
  --ldl-series-7: oklch(0.70 0.17 350);
  --ldl-series-8: oklch(0.72 0.10 100);
  --ldl-seq-1: oklch(0.95 0.03 74);
  --ldl-seq-2: oklch(0.88 0.07 73);
  --ldl-seq-3: oklch(0.80 0.11 72);
  --ldl-seq-4: oklch(0.72 0.15 72);
  --ldl-seq-5: oklch(0.58 0.13 68);
  --ldl-seq-6: oklch(0.42 0.09 62);
  --ldl-div-1: oklch(0.55 0.17 27);
  --ldl-div-2: oklch(0.68 0.13 30);
  --ldl-div-3: oklch(0.83 0.07 35);
  --ldl-div-4: oklch(0.93 0.008 250);
  --ldl-div-5: oklch(0.83 0.06 245);
  --ldl-div-6: oklch(0.68 0.11 248);
  --ldl-div-7: oklch(0.55 0.14 250);
  --ldl-type-display1-size: clamp(40px, 6.6vw, 78px);
  --ldl-type-display1-weight: 600;
  --ldl-type-display1-leading: 1.04;
  --ldl-type-display1-tracking: -0.02em;
  --ldl-type-display2-size: clamp(34px, 5vw, 58px);
  --ldl-type-display2-weight: 600;
  --ldl-type-display2-leading: 1.05;
  --ldl-type-display2-tracking: -0.02em;
  --ldl-type-h1-size: clamp(30px, 4vw, 46px);
  --ldl-type-h1-weight: 600;
  --ldl-type-h1-leading: 1.08;
  --ldl-type-h1-tracking: -0.02em;
  --ldl-type-h2-size: clamp(22px, 2.6vw, 30px);
  --ldl-type-h2-weight: 600;
  --ldl-type-h2-leading: 1.15;
  --ldl-type-h2-tracking: -0.015em;
  --ldl-type-h3-size: 20px;
  --ldl-type-h3-weight: 600;
  --ldl-type-h3-leading: 1.25;
  --ldl-type-h3-tracking: -0.01em;
  --ldl-type-body-lg-size: 18px;
  --ldl-type-body-lg-weight: 400;
  --ldl-type-body-lg-leading: 1.55;
  --ldl-type-body-lg-tracking: 0;
  --ldl-type-body-size: 15px;
  --ldl-type-body-weight: 400;
  --ldl-type-body-leading: 1.55;
  --ldl-type-body-tracking: 0;
  --ldl-type-body-sm-size: 13px;
  --ldl-type-body-sm-weight: 400;
  --ldl-type-body-sm-leading: 1.5;
  --ldl-type-body-sm-tracking: 0;
  --ldl-type-label-size: 12px;
  --ldl-type-label-weight: 600;
  --ldl-type-label-leading: 1.3;
  --ldl-type-label-tracking: 0;
  --ldl-type-caption-size: 11px;
  --ldl-type-caption-weight: 400;
  --ldl-type-caption-leading: 1.4;
  --ldl-type-caption-tracking: 0;
  --ldl-type-kicker-size: 12.5px;
  --ldl-type-kicker-weight: 400;
  --ldl-type-kicker-leading: 1.2;
  --ldl-type-kicker-tracking: 0.14em;
  --ldl-type-mono-size: 13px;
  --ldl-type-mono-weight: 400;
  --ldl-type-mono-leading: 1.5;
  --ldl-type-mono-tracking: 0;

  --ldl-fs-scale: 1; /* accessibility zoom — user-overridable, independent of density */
  --ldl-base-font: 17px;
  --ldl-ui-font: 15px;
  --ldl-ui-font-sm: 12px;
  --ldl-control-h: 40px;
  --ldl-control-py: 13px;
  --ldl-control-px: 22px;
  --ldl-control-radius: var(--ldl-radius-full);
  --ldl-card-radius: var(--ldl-radius-lg);
  --ldl-card-pad: 24px;
  --ldl-row-gap: 16px;

  /* light mode (default) */
  --ldl-accent-h: 72;
  --ldl-accent: oklch(0.56 0.15 72);
  --ldl-accent-ink: oklch(0.47 0.15 72);
  --ldl-accent-soft: oklch(0.955 0.032 72);
  --ldl-accent-line: oklch(0.86 0.06 72);
  --ldl-on-accent: #ffffff;
  --ldl-brand-gold: #c5872b;
  --ldl-brand-gold-soft: #f6ead4;
  --ldl-brand-ink: #161b23;
  --ldl-paper: oklch(0.985 0.004 95);
  --ldl-paper2: oklch(0.962 0.006 95);
  --ldl-card: #ffffff;
  --ldl-recessed: oklch(0.945 0.006 95);
  --ldl-overlay: rgba(20,24,40,0.45);
  --ldl-ink: oklch(0.22 0.018 265);
  --ldl-ink2: oklch(0.44 0.02 265);
  --ldl-ink3: oklch(0.60 0.015 265);
  --ldl-ink-dim: oklch(0.70 0.012 265);
  --ldl-line: oklch(0.905 0.006 265);
  --ldl-line2: oklch(0.85 0.008 265);
  --ldl-success: oklch(0.55 0.14 150);
  --ldl-success-soft: oklch(0.95 0.04 150);
  --ldl-on-success: #ffffff;
  --ldl-warning: oklch(0.62 0.16 55);
  --ldl-warning-soft: oklch(0.95 0.05 65);
  --ldl-on-warning: oklch(0.20 0.02 55);
  --ldl-error: oklch(0.55 0.19 27);
  --ldl-error-soft: oklch(0.95 0.04 25);
  --ldl-on-error: #ffffff;
  --ldl-info: oklch(0.55 0.14 250);
  --ldl-info-soft: oklch(0.95 0.03 250);
  --ldl-on-info: #ffffff;
  --ldl-shadow-sm: 0 1px 2px rgba(20,24,40,0.06), 0 2px 6px rgba(20,24,40,0.05);
  --ldl-shadow-md: 0 4px 12px rgba(20,24,40,0.08), 0 8px 24px rgba(20,24,40,0.07);
  --ldl-shadow-lg: 0 8px 24px rgba(20,24,40,0.10), 0 30px 70px rgba(20,24,40,0.12);
  --ldl-shadow-modal: 0 12px 40px rgba(20,24,40,0.22);
  color-scheme: light;
}

:root[data-mode="dark"] {
  --ldl-accent-h: 72;
  --ldl-accent: oklch(0.72 0.15 72);
  --ldl-accent-ink: oklch(0.82 0.13 72);
  --ldl-accent-soft: oklch(0.285 0.06 72);
  --ldl-accent-line: oklch(0.42 0.08 72);
  --ldl-on-accent: oklch(0.16 0.02 265);
  --ldl-brand-gold: #e0a03f;
  --ldl-brand-gold-soft: #3a2e17;
  --ldl-brand-ink: #f2f4f7;
  --ldl-paper: oklch(0.185 0.014 265);
  --ldl-paper2: oklch(0.225 0.017 265);
  --ldl-card: oklch(0.235 0.018 265);
  --ldl-recessed: oklch(0.165 0.013 265);
  --ldl-overlay: rgba(0,0,0,0.6);
  --ldl-ink: oklch(0.965 0.004 95);
  --ldl-ink2: oklch(0.78 0.012 265);
  --ldl-ink3: oklch(0.62 0.012 265);
  --ldl-ink-dim: oklch(0.50 0.012 265);
  --ldl-line: oklch(0.33 0.02 265);
  --ldl-line2: oklch(0.40 0.022 265);
  --ldl-success: oklch(0.75 0.15 150);
  --ldl-success-soft: oklch(0.30 0.06 150);
  --ldl-on-success: oklch(0.16 0.02 265);
  --ldl-warning: oklch(0.78 0.15 60);
  --ldl-warning-soft: oklch(0.32 0.07 55);
  --ldl-on-warning: oklch(0.16 0.02 265);
  --ldl-error: oklch(0.70 0.19 25);
  --ldl-error-soft: oklch(0.30 0.09 25);
  --ldl-on-error: oklch(0.16 0.02 265);
  --ldl-info: oklch(0.75 0.13 250);
  --ldl-info-soft: oklch(0.30 0.06 250);
  --ldl-on-info: oklch(0.16 0.02 265);
  --ldl-shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.35);
  --ldl-shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.4);
  --ldl-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 30px 70px rgba(0,0,0,0.55);
  --ldl-shadow-modal: 0 12px 40px rgba(0,0,0,0.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --ldl-accent-h: 72;
    --ldl-accent: oklch(0.72 0.15 72);
    --ldl-accent-ink: oklch(0.82 0.13 72);
    --ldl-accent-soft: oklch(0.285 0.06 72);
    --ldl-accent-line: oklch(0.42 0.08 72);
    --ldl-on-accent: oklch(0.16 0.02 265);
    --ldl-brand-gold: #e0a03f;
    --ldl-brand-gold-soft: #3a2e17;
    --ldl-brand-ink: #f2f4f7;
    --ldl-paper: oklch(0.185 0.014 265);
    --ldl-paper2: oklch(0.225 0.017 265);
    --ldl-card: oklch(0.235 0.018 265);
    --ldl-recessed: oklch(0.165 0.013 265);
    --ldl-overlay: rgba(0,0,0,0.6);
    --ldl-ink: oklch(0.965 0.004 95);
    --ldl-ink2: oklch(0.78 0.012 265);
    --ldl-ink3: oklch(0.62 0.012 265);
    --ldl-ink-dim: oklch(0.50 0.012 265);
    --ldl-line: oklch(0.33 0.02 265);
    --ldl-line2: oklch(0.40 0.022 265);
    --ldl-success: oklch(0.75 0.15 150);
    --ldl-success-soft: oklch(0.30 0.06 150);
    --ldl-on-success: oklch(0.16 0.02 265);
    --ldl-warning: oklch(0.78 0.15 60);
    --ldl-warning-soft: oklch(0.32 0.07 55);
    --ldl-on-warning: oklch(0.16 0.02 265);
    --ldl-error: oklch(0.70 0.19 25);
    --ldl-error-soft: oklch(0.30 0.09 25);
    --ldl-on-error: oklch(0.16 0.02 265);
    --ldl-info: oklch(0.75 0.13 250);
    --ldl-info-soft: oklch(0.30 0.06 250);
    --ldl-on-info: oklch(0.16 0.02 265);
    --ldl-shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.35);
    --ldl-shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.4);
    --ldl-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 30px 70px rgba(0,0,0,0.55);
    --ldl-shadow-modal: 0 12px 40px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}

:root[data-density="compact"] {
  --ldl-base-font: 14px;
  --ldl-ui-font: 14px;
  --ldl-ui-font-sm: 11px;
  --ldl-control-h: 36px;
  --ldl-control-py: 8px;
  --ldl-control-px: 16px;
  --ldl-control-radius: var(--ldl-radius-md);
  --ldl-card-radius: var(--ldl-radius-md);
  --ldl-card-pad: 16px;
  --ldl-row-gap: 12px;
}

:root[data-density="dense"] {
  --ldl-base-font: 12px;
  --ldl-ui-font: 12px;
  --ldl-ui-font-sm: 10.5px;
  --ldl-control-h: 26px;
  --ldl-control-py: 4px;
  --ldl-control-px: 10px;
  --ldl-control-radius: var(--ldl-radius-xs);
  --ldl-card-radius: var(--ldl-radius-xs);
  --ldl-card-pad: 12px;
  --ldl-row-gap: 8px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body.ldl {
  margin: 0;
  background: var(--ldl-paper);
  color: var(--ldl-ink);
  font-family: var(--ldl-font-body);
  font-size: calc(var(--ldl-base-font) * var(--ldl-fs-scale));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ldl-wrap { max-width: var(--ldl-maxw); margin-inline: auto; padding-inline: var(--ldl-space-6); }
.ldl-wrap-tight { max-width: var(--ldl-maxw-tight); }

/* ---------- type helpers ---------- */
.ldl-display1 { font-family: var(--ldl-font-display); font-size: var(--ldl-type-display1-size); font-weight: var(--ldl-type-display1-weight); line-height: var(--ldl-type-display1-leading); letter-spacing: var(--ldl-type-display1-tracking); text-wrap: balance; }
.ldl-h1 { font-family: var(--ldl-font-display); font-size: var(--ldl-type-h1-size); font-weight: var(--ldl-type-h1-weight); line-height: var(--ldl-type-h1-leading); letter-spacing: var(--ldl-type-h1-tracking); text-wrap: balance; }
.ldl-h2 { font-family: var(--ldl-font-display); font-size: var(--ldl-type-h2-size); font-weight: var(--ldl-type-h2-weight); line-height: var(--ldl-type-h2-leading); letter-spacing: var(--ldl-type-h2-tracking); }
.ldl-h3 { font-family: var(--ldl-font-display); font-size: var(--ldl-type-h3-size); font-weight: var(--ldl-type-h3-weight); line-height: var(--ldl-type-h3-leading); }
.ldl-mono { font-family: var(--ldl-font-mono); }
.ldl-kicker { font-family: var(--ldl-font-mono); font-size: var(--ldl-type-kicker-size); letter-spacing: var(--ldl-type-kicker-tracking); text-transform: uppercase; color: var(--ldl-accent-ink); }
.ldl-kicker::before { content: "// "; opacity: 0.6; }
.ldl-muted { color: var(--ldl-ink3); }

/* ---------- buttons ---------- */
.ldl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ldl-space-2);
  font-family: var(--ldl-font-body); font-weight: var(--ldl-weight-semibold);
  font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale));
  min-height: var(--ldl-control-h);
  padding: var(--ldl-control-py) var(--ldl-control-px);
  border-radius: var(--ldl-control-radius);
  border: 1px solid var(--ldl-line2);
  background: var(--ldl-card); color: var(--ldl-ink);
  cursor: pointer; transition: transform var(--ldl-motion-fast) var(--ldl-motion-ease), background var(--ldl-motion-fast), border-color var(--ldl-motion-fast);
}
.ldl-btn:hover { border-color: var(--ldl-ink); }
.ldl-btn:active { transform: translateY(1px); }
.ldl-btn-primary { background: var(--ldl-accent); color: var(--ldl-on-accent); border-color: transparent; }
.ldl-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ldl-shadow-md); border-color: transparent; }
.ldl-btn-ghost { background: transparent; }

/* ---------- surfaces ---------- */
.ldl-card {
  background: var(--ldl-card); border: 1px solid var(--ldl-line);
  border-radius: var(--ldl-card-radius); padding: var(--ldl-card-pad);
  transition: transform var(--ldl-motion-normal) var(--ldl-motion-ease), box-shadow var(--ldl-motion-normal), border-color var(--ldl-motion-normal);
}
.ldl-card-hover:hover { transform: translateY(-3px); box-shadow: var(--ldl-shadow-md); border-color: var(--ldl-accent-line); }
.ldl-panel { background: var(--ldl-paper2); border: 1px solid var(--ldl-line); border-radius: var(--ldl-card-radius); padding: var(--ldl-card-pad); }

/* ---------- inputs ---------- */
.ldl-input, .ldl-select {
  font-family: var(--ldl-font-body); font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale));
  min-height: var(--ldl-control-h);
  padding: var(--ldl-control-py) var(--ldl-space-3);
  background: var(--ldl-recessed); color: var(--ldl-ink);
  border: 1px solid var(--ldl-line2); border-radius: var(--ldl-control-radius);
}
.ldl-input:focus, .ldl-select:focus { outline: 2px solid var(--ldl-accent); outline-offset: 1px; border-color: var(--ldl-accent); }

/* ---------- badges / pills ---------- */
.ldl-badge {
  display: inline-flex; align-items: center; gap: var(--ldl-space-1);
  font-family: var(--ldl-font-mono); font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale));
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px var(--ldl-space-2); border-radius: var(--ldl-radius-full);
  border: 1px solid var(--ldl-line2); color: var(--ldl-ink2);
}
.ldl-badge-accent  { background: var(--ldl-accent-soft); border-color: var(--ldl-accent-line); color: var(--ldl-accent-ink); }
.ldl-badge-success { background: var(--ldl-success-soft); border-color: transparent; color: var(--ldl-success); }
.ldl-badge-warning { background: var(--ldl-warning-soft); border-color: transparent; color: var(--ldl-warning); }
.ldl-badge-error   { background: var(--ldl-error-soft); border-color: transparent; color: var(--ldl-error); }
.ldl-badge-info    { background: var(--ldl-info-soft); border-color: transparent; color: var(--ldl-info); }

/* ---------- node/diamond motif ---------- */
.ldl-node { display: inline-block; width: 7px; height: 7px; background: var(--ldl-accent); transform: rotate(45deg); }
.ldl-node-rule { display: flex; align-items: center; gap: var(--ldl-space-3); color: var(--ldl-line2); }
.ldl-node-rule::before, .ldl-node-rule::after { content: ""; height: 1px; background: var(--ldl-line); flex: 1; }

/* ---------- nav / header ---------- */
.ldl-nav {
  position: sticky; top: 0; z-index: var(--ldl-z-sticky); display: flex; align-items: center; gap: var(--ldl-space-4);
  padding: var(--ldl-space-3) var(--ldl-space-6); border-bottom: 1px solid var(--ldl-line);
  background: color-mix(in oklch, var(--ldl-paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
}
.ldl-nav .ldl-nav-spacer { flex: 1; }
.ldl-nav a { color: var(--ldl-ink2); text-decoration: none; font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); }
.ldl-nav a:hover, .ldl-nav a[aria-current] { color: var(--ldl-ink); }
.ldl-brand { display: inline-flex; align-items: center; gap: var(--ldl-space-2); font-family: var(--ldl-font-display); font-weight: var(--ldl-weight-bold); color: var(--ldl-ink); text-decoration: none; }
.ldl-brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ldl-radius-md);
  background: var(--ldl-accent); color: var(--ldl-on-accent); font-family: var(--ldl-font-display); font-weight: var(--ldl-weight-bold);
}

/* ---------- tabs ---------- */
.ldl-tabs { display: flex; gap: var(--ldl-space-1); border-bottom: 1px solid var(--ldl-line); }
.ldl-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: var(--ldl-space-2) var(--ldl-space-3); font: inherit; font-weight: var(--ldl-weight-semibold);
  font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); color: var(--ldl-ink3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ldl-tab:hover { color: var(--ldl-ink); }
.ldl-tab[aria-selected="true"] { color: var(--ldl-accent-ink); border-bottom-color: var(--ldl-accent); }

/* ---------- segmented control ---------- */
.ldl-segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--ldl-recessed); border: 1px solid var(--ldl-line); border-radius: var(--ldl-control-radius); }
.ldl-segmented button {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale));
  padding: var(--ldl-space-1) var(--ldl-space-3); border-radius: calc(var(--ldl-control-radius) - 2px);
  background: transparent; color: var(--ldl-ink2);
}
.ldl-segmented button[aria-pressed="true"] { background: var(--ldl-card); color: var(--ldl-ink); box-shadow: var(--ldl-shadow-sm); }

/* ---------- state-tinted buttons (cockpit apps) ---------- */
.ldl-btn-active { background: var(--ldl-success-soft); border-color: transparent; color: var(--ldl-success); }
.ldl-btn-locked { background: var(--ldl-warning-soft); border-color: transparent; color: var(--ldl-warning); }
.ldl-btn-tx     { background: var(--ldl-error-soft); border-color: transparent; color: var(--ldl-error); }

/* ---------- stat / hero numeral ----------
   Big "brag" figures (QSO count, totals). Emphasis = GOLD, never success green.
   Add .ldl-stat-plain for neutral ink when the figure isn't a brand moment. */
.ldl-stat { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.ldl-stat-num {
  font-family: var(--ldl-font-display); font-weight: var(--ldl-weight-bold);
  font-size: calc(var(--ldl-base-font) * 2.4 * var(--ldl-fs-scale));
  letter-spacing: -0.03em; color: var(--ldl-accent); font-variant-numeric: tabular-nums;
}
.ldl-stat-plain .ldl-stat-num { color: var(--ldl-ink); }
.ldl-stat-label {
  font-family: var(--ldl-font-mono); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale)); color: var(--ldl-ink3);
  margin-top: var(--ldl-space-1);
}

/* ---------- status dot (live indicator) ----------
   The canonical home for green: a real-time positive state on a NEUTRAL surface.
   Base dot is neutral/idle; .is-live turns it success-green with a soft halo. */
.ldl-status { display: inline-flex; align-items: center; gap: var(--ldl-space-2); font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale)); color: var(--ldl-ink2); }
.ldl-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ldl-ink3); }
.ldl-status-dot.is-live  { background: var(--ldl-success); box-shadow: 0 0 0 3px var(--ldl-success-soft); }
.ldl-status-dot.is-warn  { background: var(--ldl-warning); box-shadow: 0 0 0 3px var(--ldl-warning-soft); }
.ldl-status-dot.is-error { background: var(--ldl-error);   box-shadow: 0 0 0 3px var(--ldl-error-soft); }

/* ---------- switch ---------- */
.ldl-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.ldl-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ldl-switch .track { position: absolute; inset: 0; background: var(--ldl-line2); border-radius: 999px; transition: background var(--ldl-motion-fast); }
.ldl-switch .thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; background: var(--ldl-card); border-radius: 50%; transition: transform var(--ldl-motion-fast) var(--ldl-motion-ease); box-shadow: var(--ldl-shadow-sm); }
.ldl-switch input:checked ~ .track { background: var(--ldl-accent); }
.ldl-switch input:checked ~ .thumb { transform: translateX(16px); }
.ldl-switch input:focus-visible ~ .track { outline: 2px solid var(--ldl-accent); outline-offset: 2px; }

/* ---------- progress ---------- */
.ldl-progress { height: 8px; background: var(--ldl-recessed); border-radius: 999px; overflow: hidden; }
.ldl-progress > i { display: block; height: 100%; background: var(--ldl-accent); border-radius: inherit; }

/* ---------- kbd ---------- */
.ldl-kbd {
  font-family: var(--ldl-font-mono); font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale)); line-height: 1;
  padding: 3px 6px; background: var(--ldl-recessed); color: var(--ldl-ink2);
  border: 1px solid var(--ldl-line2); border-bottom-width: 2px; border-radius: var(--ldl-radius-xs);
}

/* ---------- table ---------- */
.ldl-table { width: 100%; border-collapse: collapse; font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); }
.ldl-table th { text-align: start; font-weight: var(--ldl-weight-semibold); color: var(--ldl-ink3);
  padding: var(--ldl-space-2) var(--ldl-space-3); border-bottom: 1px solid var(--ldl-line2);
  position: sticky; top: 0; background: var(--ldl-card); text-transform: uppercase; letter-spacing: 0.04em; font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale)); }
.ldl-table td { padding: var(--ldl-space-2) var(--ldl-space-3); border-bottom: 1px solid var(--ldl-line); }
.ldl-table tr:hover td { background: var(--ldl-paper2); }
.ldl-table .num { font-family: var(--ldl-font-mono); text-align: end; }

/* ---------- meter / readout (cockpit) ---------- */
.ldl-readout { font-family: var(--ldl-font-mono); font-size: calc(28px * var(--ldl-fs-scale)); color: var(--ldl-accent); letter-spacing: 1px; font-weight: var(--ldl-weight-bold); }

/* ---------- toast ---------- */
.ldl-toast {
  display: flex; gap: var(--ldl-space-3); align-items: flex-start;
  background: var(--ldl-card); color: var(--ldl-ink); border: 1px solid var(--ldl-line);
  border-inline-start: 3px solid var(--ldl-accent); border-radius: var(--ldl-radius-md);
  padding: var(--ldl-space-3) var(--ldl-space-4); box-shadow: var(--ldl-shadow-md); max-width: 380px; z-index: var(--ldl-z-toast);
}
.ldl-toast-success { border-inline-start-color: var(--ldl-success); }
.ldl-toast-warning { border-inline-start-color: var(--ldl-warning); }
.ldl-toast-error   { border-inline-start-color: var(--ldl-error); }
.ldl-toast-info    { border-inline-start-color: var(--ldl-info); }

/* ---------- modal ---------- */
.ldl-scrim { position: fixed; inset: 0; background: var(--ldl-overlay); display: grid; place-items: start center; padding-top: 10vh; z-index: var(--ldl-z-modal); }
.ldl-modal {
  width: min(560px, 94vw); max-height: 84vh; overflow: auto;
  background: var(--ldl-card); border: 1px solid var(--ldl-line); border-radius: var(--ldl-radius-lg);
  box-shadow: var(--ldl-shadow-modal); padding: var(--ldl-space-6);
}

/* ---------- status bar (cockpit) ---------- */
.ldl-statusbar {
  display: flex; align-items: center; gap: var(--ldl-space-4); flex-wrap: wrap;
  padding: var(--ldl-space-2) var(--ldl-space-4); border-top: 1px solid var(--ldl-line);
  background: var(--ldl-paper2); color: var(--ldl-ink3);
  font-family: var(--ldl-font-mono); font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale));
}

/* ---------- marketing: hero dot-grid, marquee, pricing, footer ---------- */
.ldl-hero { position: relative; padding: var(--ldl-space-16) 0; }
.ldl-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, var(--ldl-line2) 1px, transparent 0);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
}
.ldl-marquee { overflow: hidden; background: var(--ldl-ink); color: var(--ldl-paper); padding: var(--ldl-space-3) 0; }
.ldl-marquee > div { display: inline-flex; gap: var(--ldl-space-8); white-space: nowrap; font-family: var(--ldl-font-mono); font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale)); text-transform: uppercase; letter-spacing: 0.1em; animation: ldl-marquee 32s linear infinite; }
.ldl-marquee:hover > div { animation-play-state: paused; }
@keyframes ldl-marquee { to { transform: translateX(-50%); } }
.ldl-price-feature { border-color: var(--ldl-accent-line); box-shadow: var(--ldl-shadow-md); }
.ldl-footer { border-top: 1px solid var(--ldl-line); padding: var(--ldl-space-12) 0; color: var(--ldl-ink3); }
.ldl-footer h4 { font-family: var(--ldl-font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale)); color: var(--ldl-ink2); }

/* ---------- interaction states: focus ring, state layers, disabled ---------- */

/* Global keyboard-focus ring — accent outline, zero-specificity :where() so authors can
   override. :focus-visible keeps pointer/touch focus quiet while keyboard focus is always
   visible. Modern browsers already clip the outline to the element's own border-radius. */
:where(a[href], area[href], button, input, select, textarea, summary,
  [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible {
  outline: var(--ldl-focus-width) solid var(--ldl-focus-color);
  outline-offset: var(--ldl-focus-offset);
}

/* Opt-in ring for custom/composite widgets that manage their own focus (roving tabindex,
   listboxes, comboboxes, draggable handles). Put .ldl-focus-ring on the focus host. */
.ldl-focus-ring:focus-visible,
.ldl-focus-ring:focus-within {
  outline: var(--ldl-focus-width) solid var(--ldl-focus-color);
  outline-offset: var(--ldl-focus-offset);
}

/* LDL controls opt in explicitly so the accent ring reads identically across them and
   overrides any earlier component :focus rule (e.g. the older .ldl-input:focus). */
.ldl-btn:focus-visible,
.ldl-input:focus-visible,
.ldl-select:focus-visible,
.ldl-tab:focus-visible,
.ldl-segmented button:focus-visible,
.ldl-switch input:focus-visible ~ .track {
  outline: var(--ldl-focus-width) solid var(--ldl-focus-color);
  outline-offset: var(--ldl-focus-offset);
}

/* State layers (Material 3 parity): a currentColor wash on ::after that composes over any
   background. isolation:isolate makes each control its own stacking context so the ::after
   at z-index:-1 paints ABOVE the control's fill but BELOW its label — text stays crisp.
   On .ldl-btn-primary currentColor is on-accent (light wash on gold); on secondary/tab it
   is ink (dark wash on card). Opacities scale hover -> pressed -> dragged. */
.ldl-btn, .ldl-tab, .ldl-segmented button { position: relative; isolation: isolate; }
.ldl-btn::after,
.ldl-tab::after,
.ldl-segmented button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--ldl-motion-fast) var(--ldl-motion-ease);
}
.ldl-btn:hover::after,
.ldl-tab:hover::after,
.ldl-segmented button:hover::after { opacity: var(--ldl-opacity-hover); }
.ldl-btn:active::after,
.ldl-tab:active::after,
.ldl-segmented button:active::after { opacity: var(--ldl-opacity-pressed); }
.ldl-btn.is-dragging::after,
.ldl-tab.is-dragging::after,
.ldl-btn[aria-grabbed="true"]::after { opacity: var(--ldl-opacity-dragged); }

/* ---------- disabled: [disabled] / [aria-disabled="true"] / .is-disabled ---------- */

/* Generic content fade (0.38) + not-allowed. [disabled] matches the native attribute on
   form controls; the ARIA/utility selectors cover <a role="button">, <div>, etc. */
.ldl-btn[disabled], .ldl-btn[aria-disabled="true"], .ldl-btn.is-disabled,
.ldl-input[disabled], .ldl-input[aria-disabled="true"], .ldl-input.is-disabled,
.ldl-select[disabled], .ldl-select[aria-disabled="true"], .ldl-select.is-disabled,
.ldl-tab[disabled], .ldl-tab[aria-disabled="true"], .ldl-tab.is-disabled,
.ldl-segmented button[disabled], .ldl-segmented button[aria-disabled="true"], .ldl-segmented button.is-disabled {
  cursor: not-allowed;
  opacity: var(--ldl-opacity-disabled-content);
  box-shadow: none;
  transform: none;
}
/* Neutralize hover lift + state layers while disabled. */
.ldl-btn[disabled]:hover, .ldl-btn[aria-disabled="true"]:hover, .ldl-btn.is-disabled:hover {
  transform: none; box-shadow: none; border-color: var(--ldl-line2);
}
.ldl-btn[disabled]::after, .ldl-btn[aria-disabled="true"]::after, .ldl-btn.is-disabled::after,
.ldl-tab[disabled]::after, .ldl-tab[aria-disabled="true"]::after, .ldl-tab.is-disabled::after,
.ldl-segmented button[disabled]::after, .ldl-segmented button.is-disabled::after { opacity: 0; }

/* Filled primary: Material-accurate two-level fade — container ink@12%, content ink@38% —
   instead of the flat 0.38 above. Works in both modes because ink flips per theme. */
.ldl-btn-primary[disabled], .ldl-btn-primary[aria-disabled="true"], .ldl-btn-primary.is-disabled {
  opacity: 1;
  background: color-mix(in oklab, var(--ldl-ink) calc(var(--ldl-opacity-disabled-container) * 100%), transparent);
  color: color-mix(in oklab, var(--ldl-ink) calc(var(--ldl-opacity-disabled-content) * 100%), transparent);
  border-color: transparent;
}

/* Disabled switch. */
.ldl-switch input[disabled] { cursor: not-allowed; }
.ldl-switch input[disabled] ~ .track,
.ldl-switch input[disabled] ~ .thumb { opacity: var(--ldl-opacity-disabled-content); }

@media (prefers-reduced-motion: reduce) {
  .ldl-btn::after, .ldl-tab::after, .ldl-segmented button::after { transition: none; }
}

/* ---------- forms & validation ---------- */
.ldl-form { display: flex; flex-direction: column; gap: var(--ldl-row-gap); }

/* field wrapper: label / control / message, stacked with a tight gap */
.ldl-field { display: flex; flex-direction: column; gap: var(--ldl-space-1_5); min-width: 0; border: 0; padding: 0; margin: 0; }
.ldl-field-row { flex-direction: row; align-items: center; gap: var(--ldl-space-2); }

/* label + gold required asterisk */
.ldl-label {
  display: inline-flex; align-items: center; gap: var(--ldl-space-1);
  font-family: var(--ldl-font-body); font-weight: var(--ldl-weight-semibold);
  font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale)); line-height: 1.3;
  color: var(--ldl-ink2);
}
.ldl-required { color: var(--ldl-accent); font-weight: var(--ldl-weight-bold); }
.ldl-required::after { content: "*"; }

/* helper + validation messages */
.ldl-help, .ldl-error-text, .ldl-success-text {
  font-family: var(--ldl-font-body); font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale));
  line-height: 1.4; margin: 0;
}
.ldl-help { color: var(--ldl-ink3); }
.ldl-error-text   { display: flex; align-items: flex-start; gap: var(--ldl-space-1); color: var(--ldl-error); }
.ldl-success-text { display: flex; align-items: flex-start; gap: var(--ldl-space-1); color: var(--ldl-success); }
.ldl-error-text .ldl-node   { background: var(--ldl-error); margin-top: 0.35em; }
.ldl-success-text .ldl-node { background: var(--ldl-success); margin-top: 0.35em; }

/* textarea — mirrors .ldl-input, taller and vertically resizable */
.ldl-textarea {
  font-family: var(--ldl-font-body); font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale));
  width: 100%; min-height: calc(var(--ldl-control-h) * 2.4); line-height: 1.5; resize: vertical;
  padding: var(--ldl-control-py) var(--ldl-space-3);
  background: var(--ldl-recessed); color: var(--ldl-ink);
  border: 1px solid var(--ldl-line2); border-radius: var(--ldl-control-radius);
  transition: border-color var(--ldl-motion-fast), outline-color var(--ldl-motion-fast);
}
.ldl-textarea:focus { outline: 2px solid var(--ldl-accent); outline-offset: 1px; border-color: var(--ldl-accent); }

/* shared placeholder + disabled affordances for text controls */
.ldl-input::placeholder, .ldl-textarea::placeholder { color: var(--ldl-ink-dim); opacity: 1; }
.ldl-input:disabled, .ldl-select:disabled, .ldl-textarea:disabled {
  background: var(--ldl-paper2); color: var(--ldl-ink-dim); cursor: not-allowed; opacity: 0.75;
}

/* validity states — semantic border + matching focus ring (never removes focus) */
.ldl-input.is-invalid, .ldl-select.is-invalid, .ldl-textarea.is-invalid { border-color: var(--ldl-error); }
.ldl-input.is-invalid:focus, .ldl-select.is-invalid:focus, .ldl-textarea.is-invalid:focus { outline-color: var(--ldl-error); border-color: var(--ldl-error); }
.ldl-input.is-valid, .ldl-select.is-valid, .ldl-textarea.is-valid { border-color: var(--ldl-success); }
.ldl-input.is-valid:focus, .ldl-select.is-valid:focus, .ldl-textarea.is-valid:focus { outline-color: var(--ldl-success); border-color: var(--ldl-success); }

/* fieldset grouping */
.ldl-fieldset {
  display: flex; flex-direction: column; gap: var(--ldl-row-gap); min-width: 0; margin: 0;
  border: 1px solid var(--ldl-line); border-radius: var(--ldl-card-radius); padding: var(--ldl-card-pad);
}
.ldl-legend {
  padding: 0 var(--ldl-space-2); margin-inline-start: calc(var(--ldl-space-2) * -1);
  font-family: var(--ldl-font-body); font-weight: var(--ldl-weight-semibold);
  font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); color: var(--ldl-ink);
}

/* accent-tinted checkbox & radio (native rendering tinted via accent-color) */
.ldl-checkbox, .ldl-radio {
  flex: 0 0 auto; margin: 0; cursor: pointer; accent-color: var(--ldl-accent);
  width: calc(var(--ldl-ui-font) * var(--ldl-fs-scale) + 2px);
  height: calc(var(--ldl-ui-font) * var(--ldl-fs-scale) + 2px);
}
.ldl-checkbox:focus-visible, .ldl-radio:focus-visible { outline: 2px solid var(--ldl-accent); outline-offset: 2px; }
.ldl-checkbox:disabled, .ldl-radio:disabled { cursor: not-allowed; opacity: 0.6; }

/* inline option row: checkbox/radio next to its text */
.ldl-option {
  display: inline-flex; align-items: center; gap: var(--ldl-space-2); cursor: pointer;
  font-family: var(--ldl-font-body); font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); color: var(--ldl-ink);
}
.ldl-option input:disabled ~ span { color: var(--ldl-ink-dim); cursor: not-allowed; }

/* ---------- icons ---------- */
.ldl-icon {
  display: inline-block;
  flex: none;
  width: var(--ldl-icon-md);
  height: var(--ldl-icon-md);
  vertical-align: -0.15em;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: miter;
}
.ldl-icon-sm { width: var(--ldl-icon-sm); height: var(--ldl-icon-sm); }
.ldl-icon-lg { width: var(--ldl-icon-lg); height: var(--ldl-icon-lg); }
.ldl-icon-accent { color: var(--ldl-accent); }

/* ---------- loading / skeleton ---------- */
.ldl-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 1em;
  border-radius: inherit;
  background-color: var(--ldl-recessed);
  background-image: linear-gradient(
    90deg,
    var(--ldl-recessed) 0%,
    color-mix(in oklch, var(--ldl-line2) 65%, var(--ldl-recessed)) 50%,
    var(--ldl-recessed) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 200% 0;
  animation: ldl-skeleton-shimmer 1.4s ease-in-out infinite;
}
/* shape helpers — each sets its own radius so `inherit` on the base is overridden intentionally */
.ldl-skeleton-text { height: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); border-radius: var(--ldl-radius-xs); margin-block: 0.35em; }
.ldl-skeleton-text:last-child { width: 72%; }
.ldl-skeleton-title { height: calc(var(--ldl-type-h3-size) * var(--ldl-fs-scale)); width: 45%; border-radius: var(--ldl-radius-sm); margin-block: 0.4em; }
.ldl-skeleton-circle { border-radius: var(--ldl-radius-full); }
.ldl-skeleton-btn { height: var(--ldl-control-h); width: 120px; border-radius: var(--ldl-control-radius); }
@keyframes ldl-skeleton-shimmer { to { background-position: -200% 0; } }

/* ---------- spinner ---------- */
.ldl-spinner {
  display: inline-block; vertical-align: -0.2em;
  width: 1.2em; height: 1.2em;
  border-radius: 50%;
  border: 2px solid var(--ldl-accent-line);
  border-top-color: var(--ldl-accent);
  animation: ldl-spin 0.7s linear infinite;
}
.ldl-spinner-sm { width: 0.9em; height: 0.9em; border-width: 2px; }
.ldl-spinner-lg { width: 2.25em; height: 2.25em; border-width: 3px; }
@keyframes ldl-spin { to { transform: rotate(360deg); } }
@keyframes ldl-spinner-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---------- empty state ---------- */
.ldl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--ldl-space-3);
  padding: var(--ldl-space-10) var(--ldl-space-6);
  color: var(--ldl-ink2);
}
.ldl-empty-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: var(--ldl-space-1);
  border-radius: var(--ldl-radius-full);
  background: var(--ldl-accent-soft); color: var(--ldl-accent-ink);
}
.ldl-empty-icon svg { width: 24px; height: 24px; }
.ldl-empty-icon .ldl-node { width: 14px; height: 14px; }
.ldl-empty-title {
  font-family: var(--ldl-font-display); font-weight: var(--ldl-weight-semibold);
  font-size: calc(var(--ldl-type-h3-size) * var(--ldl-fs-scale));
  line-height: var(--ldl-type-h3-leading); letter-spacing: var(--ldl-type-h3-tracking);
  color: var(--ldl-ink); text-wrap: balance; margin: 0;
}
.ldl-empty-msg {
  color: var(--ldl-ink3); max-width: 46ch; margin: 0 auto;
  font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); line-height: 1.5;
}
.ldl-empty-actions { display: flex; flex-wrap: wrap; gap: var(--ldl-space-2); justify-content: center; margin-top: var(--ldl-space-2); }

/* ---------- error page ---------- */
.ldl-errorpage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--ldl-space-4);
  min-height: 60vh; padding: var(--ldl-space-12) var(--ldl-space-6);
}
.ldl-errorpage-code {
  font-family: var(--ldl-font-display); font-weight: var(--ldl-weight-bold);
  font-size: clamp(72px, 16vw, 160px); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--ldl-brand-gold); margin: 0;
}
.ldl-errorpage-title {
  font-family: var(--ldl-font-display); font-weight: var(--ldl-weight-semibold);
  font-size: calc(var(--ldl-type-h2-size) * var(--ldl-fs-scale));
  line-height: var(--ldl-type-h2-leading); letter-spacing: var(--ldl-type-h2-tracking);
  color: var(--ldl-ink); text-wrap: balance; margin: 0;
}
.ldl-errorpage-msg {
  color: var(--ldl-ink3); max-width: 48ch; margin: 0 auto;
  font-size: calc(var(--ldl-ui-font) * var(--ldl-fs-scale)); line-height: 1.55;
}
.ldl-errorpage-actions { display: flex; flex-wrap: wrap; gap: var(--ldl-space-3); justify-content: center; margin-top: var(--ldl-space-2); }

/* reduced motion: skeleton falls back to a static fill; spinner swaps rotation for a gentle opacity pulse */
@media (prefers-reduced-motion: reduce) {
  .ldl-skeleton { animation: none; background-image: none; background-color: var(--ldl-recessed); }
  .ldl-spinner {
    animation: ldl-spinner-fade 1.3s ease-in-out infinite;
    border-color: var(--ldl-accent-line); border-top-color: var(--ldl-accent);
  }
}

/* ---------- data-viz chart tooltip ---------- */
.ldl-chart-tooltip {
  background: var(--ldl-card);
  border: 1px solid var(--ldl-line);
  border-radius: var(--ldl-card-radius);
  box-shadow: var(--ldl-shadow-md);
  padding: var(--ldl-space-2) var(--ldl-space-3);
  font-family: var(--ldl-font-body);
  font-size: calc(var(--ldl-ui-font-sm) * var(--ldl-fs-scale));
  color: var(--ldl-ink3);
  max-width: 240px;
  pointer-events: none;
}
.ldl-chart-tooltip .title {
  font-family: var(--ldl-font-display);
  font-weight: var(--ldl-weight-semibold);
  color: var(--ldl-ink);
  margin-bottom: var(--ldl-space-1);
}
.ldl-chart-tooltip .row { color: var(--ldl-ink2); display: flex; align-items: center; gap: var(--ldl-space-2); }
.ldl-chart-tooltip .row b { color: var(--ldl-ink); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.ldl-chart-tooltip .units { color: var(--ldl-ink-dim); margin-top: var(--ldl-space-1); }

/* ---------- responsive layout: container, grid, visibility ----------
   The @media pixel values below are HARDCODED copies of tokens.json
   layout.breakpoints (sm 560 / md 760 / lg 940 / xl 1024) — CSS @media
   cannot reference var(). The same values are emitted as reference vars
   --ldl-bp-sm..xl (see build.mjs). If you change the breakpoints in
   tokens, update every @media query in this block to match. */

/* Container: centered, capped width + fluid inline padding.
   Override the cap per-instance via --ldl-container-max, or use the
   modifier classes. Padding steps up from space-4 to space-6 at md. */
.ldl-container {
  width: 100%;
  max-width: var(--ldl-container-max, var(--ldl-maxw));
  margin-inline: auto;
  padding-inline: var(--ldl-space-4);
}
.ldl-container-tight   { --ldl-container-max: var(--ldl-maxw-tight); }
.ldl-container-content { --ldl-container-max: var(--ldl-content-w); }
.ldl-container-fluid   { --ldl-container-max: none; }
@media (min-width: 760px) {
  .ldl-container { padding-inline: var(--ldl-space-6); }
}

/* Auto-fill responsive grid: as many equal columns as fit, each at
   least --ldl-grid-min wide (default 240px). min() clamps the track so
   a card never overflows a container narrower than --ldl-grid-min. */
.ldl-grid {
  display: grid;
  gap: var(--ldl-grid-gap, var(--ldl-space-5));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ldl-grid-min, 240px), 100%), 1fr));
}

/* Explicit column counts. All collapse to a single column below md
   (760px), then step up: cols-2 -> 2 at md; cols-3 -> 2 at md then 3 at
   lg (940px); cols-4 -> 2 at md then 4 at lg. */
.ldl-cols-2,
.ldl-cols-3,
.ldl-cols-4 {
  display: grid;
  gap: var(--ldl-grid-gap, var(--ldl-space-5));
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .ldl-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ldl-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .ldl-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .ldl-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ldl-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Small-screen visibility helpers (breakpoint sm = 560px).
   .ldl-hide-sm  -> hidden below sm, natural display at/above sm.
   .ldl-show-sm  -> visible below sm, hidden at/above sm.
   No rule sets a positive display value, so each element keeps its own
   natural display (block/flex/grid/inline) when shown. */
@media (max-width: 559.98px) {
  .ldl-hide-sm { display: none !important; }
}
@media (min-width: 560px) {
  .ldl-show-sm { display: none !important; }
}

/* ---------- RTL / direction-aware overrides ---------- */
/* Everything else in this layer uses logical properties (margin-inline,
   padding-inline, inset-inline-start, border-inline-start, text-align:start/end)
   and mirrors automatically under [dir="rtl"]. transform: translateX() is the one
   exception — it is physical by definition, so the two inline-axis animations get
   explicitly mirrored here. translateY lifts and rotate() are direction-neutral. */
[dir="rtl"] .ldl-switch input:checked ~ .thumb { transform: translateX(-16px); }
[dir="rtl"] .ldl-marquee > div { animation-name: ldl-marquee-rtl; }
@keyframes ldl-marquee-rtl { to { transform: translateX(50%); } }

@media (prefers-reduced-motion: reduce) {
  .ldl-marquee > div { animation: none; }
  .ldl-btn, .ldl-card, .ldl-switch .thumb { transition: none; }
}