/* Portal adapter and Ledger component primitives. Palette is generated from
   designs/ledger_theme_v1/tokens.json into ledger-palette.css. */
@import url('/static/ledger-palette.css');

:root {
  --font-display: var(--lg-font-display); --font-sans: var(--lg-font-sans); --font-mono: var(--lg-font-mono); --font-body: var(--lg-font-sans);
  --fg-1: var(--lg-fg); --fg-2: var(--lg-fg-secondary); --fg-3: var(--lg-fg-muted); --fg-4: var(--lg-fg-muted); --fg-on-accent: var(--lg-on-accent);
  --bg: var(--lg-bg); --bg-2: var(--lg-bg-sunken); --bg-subtle: var(--lg-surface-alt); --bg-sunken: var(--lg-bg-sunken); --bg-inverse: var(--lg-inverse-bg); --surface: var(--lg-surface); --surface-hover: var(--lg-surface-alt);
  --border: var(--lg-border); --border-strong: var(--lg-border-strong); --border-faint: var(--lg-border-faint); --border-focus: var(--lg-accent);
  --accent: var(--lg-accent); --accent-text: var(--lg-accent-text); --accent-hover: var(--lg-accent-hover); --accent-press: var(--lg-accent-press); --accent-subtle: var(--lg-accent-subtle); --accent-border: var(--lg-accent-border); --on-accent: var(--lg-on-accent);
  --success: var(--lg-accent); --success-subtle: var(--lg-accent-subtle); --success-text: var(--lg-accent-text);
  --warning: var(--lg-load); --warning-subtle: var(--lg-load-subtle); --warning-text: var(--lg-load-strong);
  /* Destructive UI stays neutral; rust remains training-load data only. */
  --danger: var(--lg-fg-secondary); --danger-subtle: var(--lg-bg-sunken); --danger-text: var(--lg-fg);
  --info: var(--lg-accent); --info-subtle: var(--lg-accent-subtle); --info-text: var(--lg-accent-text);
  --load: var(--lg-load); --load-strong: var(--lg-load-strong);
  --viz-1: var(--lg-ramp1); --viz-2: var(--lg-load); --viz-3: var(--lg-ramp3); --viz-4: var(--lg-ramp4); --viz-5: var(--lg-fill);
  --ring: var(--lg-ring); --chrome-bg: color-mix(in srgb, var(--lg-bg) 92%, transparent);
  /* Preserve existing portal spacing indices and layout geometry. */
  --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 96px;
  --radius-xs: 4px; --radius-sm: var(--lg-radius-sm); --radius-md: var(--lg-radius-md); --radius-lg: var(--lg-radius-lg); --radius-xl: var(--lg-radius-xl); --radius-2xl: 28px; --radius-full: var(--lg-radius-pill);
  --shadow-xs: var(--lg-shadow-xs); --shadow-sm: var(--lg-shadow-sm); --shadow-md: var(--lg-shadow-md); --shadow-lg: var(--lg-shadow-lg); --shadow-xl: var(--lg-shadow-xl);
  --ease-standard: var(--lg-ease); --ease-emphasis: cubic-bezier(0.2, 0, 0, 1); --dur-fast: var(--lg-dur-fast); --dur-base: var(--lg-dur-base); --dur-slow: var(--lg-dur-slow);
  /* Legacy type aliases retained for templates and downstream portal CSS. */
  --display-1-font: var(--font-display); --display-1-size: 30px; --display-1-lh: 1.08; --display-1-weight: 800; --display-1-tracking: -0.024em; --display-2-size: 27px; --display-2-lh: 1.1; --display-2-weight: 800; --display-2-tracking: -0.022em;
  --h1-font: var(--font-display); --h1-size: 30px; --h1-lh: 1.08; --h1-weight: 800; --h1-tracking: -0.024em; --h2-font: var(--font-display); --h2-size: 27px; --h2-lh: 1.1; --h2-weight: 800; --h2-tracking: -0.022em; --h3-font: var(--font-display); --h3-size: 25px; --h3-lh: 1.12; --h3-weight: 800; --h3-tracking: -0.02em; --h4-font: var(--font-sans); --h4-size: 15.5px; --h4-lh: 1.3; --h4-weight: 700; --h4-tracking: -0.01em;
  --body-lg-font: var(--font-sans); --body-lg-size: 18px; --body-lg-lh: 1.6; --body-lg-weight: 400; --body-font: var(--font-sans); --body-size: 14px; --body-lh: 1.6; --body-weight: 400; --body-sm-font: var(--font-sans); --body-sm-size: 13px; --body-sm-lh: 1.55; --body-sm-weight: 500;
  --label-font: var(--font-sans); --label-size: 14px; --label-lh: 1.3; --label-weight: 600; --label-tracking: 0; --caption-font: var(--font-sans); --caption-size: 12.5px; --caption-lh: 1.4; --caption-weight: 500; --overline-font: var(--font-sans); --overline-size: 10.5px; --overline-lh: 1.4; --overline-weight: 600; --overline-tracking: 0.08em; --mono-font: var(--font-mono); --mono-size: 10.5px; --mono-lh: 1.4; --mono-weight: 600;
}

html { background: var(--lg-bg); }
body { margin: 0; background: var(--lg-bg); color: var(--lg-fg); font-family: var(--lg-font-sans); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--lg-accent-text); text-decoration: none; } a:hover { color: var(--lg-accent-text); text-decoration: underline; opacity: .82; }
:focus-visible { outline: none; box-shadow: var(--lg-ring); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lg-space-4); min-height: var(--lg-tap-min); padding: 0 var(--lg-space-7); border: 0; border-radius: var(--lg-radius-md); background: var(--lg-accent); color: var(--lg-on-accent); font: 700 15.5px var(--lg-font-sans); cursor: pointer; transition: background var(--lg-dur-fast) var(--lg-ease); }
.lg-btn:hover { background: var(--lg-accent-hover); } .lg-btn:active { background: var(--lg-accent-press); transform: translateY(1px); } .lg-btn[disabled] { opacity: .45; pointer-events: none; }
.lg-btn--secondary { background: var(--lg-bg-sunken); color: var(--lg-fg); border: 1px solid var(--lg-border-strong); } .lg-btn--secondary:hover { background: var(--lg-surface-alt); }
.lg-btn--ghost { background: transparent; color: var(--lg-accent-text); } .lg-btn--ghost:hover { background: var(--lg-accent-subtle); color: var(--lg-accent-text); }
.lg-card { background: var(--lg-surface); border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); box-shadow: var(--lg-shadow-sm); } .lg-card--raised { box-shadow: var(--lg-shadow-lg); }
.lg-card--today { position: relative; overflow: hidden; } .lg-card--today::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--lg-accent); }
.lg-input { min-height: var(--lg-tap-min); padding: 0 var(--lg-space-5); background: var(--lg-surface); color: var(--lg-fg); border: 1px solid var(--lg-border-strong); border-radius: var(--lg-radius-md); font: 14px var(--lg-font-sans); } .lg-input::placeholder { color: var(--lg-fg-muted); }
.lg-chip { display: inline-flex; align-items: center; gap: var(--lg-space-3); padding: 4px 9px; border-radius: var(--lg-radius-pill); font: 700 10px var(--lg-font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.lg-chip--state { background: var(--lg-accent-subtle); color: var(--lg-accent-text); } .lg-chip--load { background: var(--lg-load-subtle); color: var(--lg-load); } .lg-chip--load-hard { background: var(--lg-load-subtle-strong); color: var(--lg-load-strong); } .lg-chip--neutral { background: var(--lg-bg-sunken); color: var(--lg-fg-muted); }
.lg-dot { width: 6px; height: 6px; border-radius: var(--lg-radius-pill); flex-shrink: 0; } .lg-dot--state { background: var(--lg-accent); } .lg-dot--load { background: var(--lg-load); } .lg-dot--idle { background: var(--lg-fill); }
.lg-bar { height: 5px; border-radius: var(--lg-radius-pill); background: var(--lg-track); overflow: hidden; } .lg-bar > i { display: block; height: 100%; border-radius: inherit; }
.lg-ramp-1 { background: var(--lg-ramp1); } .lg-ramp-2 { background: var(--lg-ramp2); } .lg-ramp-3 { background: var(--lg-ramp3); } .lg-ramp-4 { background: var(--lg-ramp4); }
.lg-row { padding: var(--lg-space-5) var(--lg-space-6); border-bottom: 1px solid var(--lg-border-faint); } .lg-row:hover { background: var(--lg-surface-alt); } .lg-row[aria-selected='true'] { background: var(--lg-accent-subtle); box-shadow: inset 2px 0 0 var(--lg-accent); } .lg-row--done { background: var(--lg-accent-subtle); }
.lg-meta { font: 600 10.5px var(--lg-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-fg-muted); } .lg-figure { font: 700 1em var(--lg-font-mono); color: var(--lg-load); font-variant-numeric: tabular-nums; }
.lg-inverse { background: var(--lg-inverse-bg); color: var(--lg-inverse-fg); } .lg-inverse .lg-meta { color: var(--lg-inverse-muted); } .lg-inverse p, .lg-inverse .lg-body { color: var(--lg-inverse-body); } .lg-inverse a { color: var(--lg-inverse-accent); }