/* =========================================================================
   FundOS design system — component styles (templates/fundos/_ds/).
   v3 tokens ONLY (see static/css/ds-tokens.css). No hex literals — enforced
   by tests/test_ds_macros.py. Spec: internal-plans-designs-docs/
   plans/fundos-design-system/01-component-spec.md §2.
   ========================================================================= */

/* ── shared primitives ─────────────────────────────────────────────────── */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-4);
}
.ds-warn { color: var(--status-warn); }
.ds-ok   { color: var(--status-ok); }
.ds-bad  { color: var(--status-bad); }

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ds-chip-sm { font-size: var(--t-2xs); padding: 0 var(--s-2); line-height: 1.6; }
.ds-chip-md { font-size: var(--t-xs);  padding: var(--s-1) var(--s-3); }

/* tones — colour comes only from the machine's semantic */
.ds-tone-ok      { background: var(--ledger-100);  color: var(--ledger-700); }
.ds-tone-warn    { background: var(--brand-on);    color: var(--status-warn); border-color: var(--status-warn); }
.ds-tone-bad     { background: var(--brand-on);    color: var(--status-bad);  border-color: var(--status-bad); }
.ds-tone-brand   { background: var(--brand-soft);  color: var(--signal-700); }
.ds-tone-neutral { background: var(--bg-sunken);   color: var(--fg-2); }
.ds-tone-muted   { background: var(--paper-200);   color: var(--fg-4); }

/* ── record_chip kinds (§2.2) ──────────────────────────────────────────── */
.ds-rc-official   { background: var(--ledger-100); color: var(--ledger-700); }
.ds-rc-shadow     { background: var(--bg-sunken);  color: var(--fg-3); }
.ds-rc-gl         { background: var(--brand-soft); color: var(--signal-700); }
.ds-rc-register   { background: var(--paper-200);  color: var(--fg-2); }
.ds-rc-unset      { background: var(--bg-raised);  color: var(--fg-4); border: 1px dashed var(--line-strong); }
.ds-rc-superseded { background: var(--paper-200);  color: var(--fg-4); }

/* ── value_header (§2.1) ───────────────────────────────────────────────── */
.ds-value-header .ds-vh-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'zero';
  color: var(--fg);
  line-height: var(--lh-tight);
  margin-top: var(--s-1);
}
.ds-vh-lg .ds-vh-amount { font-size: var(--t-3xl); }
.ds-vh-md .ds-vh-amount { font-size: var(--t-xl); }
.ds-vh-sm .ds-vh-amount { font-size: var(--t-lg); }
.ds-vh-md, .ds-vh-sm {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--s-4);
}
.ds-value-header .ds-vh-ccy { font-size: 0.55em; color: var(--fg-3); font-family: var(--font-sans); }
.ds-value-header .ds-vh-unset { color: var(--fg-4); }
.ds-value-header .ds-vh-meta {
  font-size: var(--t-sm);
  color: var(--fg-3);
  margin-top: var(--s-1);
}
.ds-value-header .ds-vh-basis { color: var(--fg-2); }
.ds-value-header .ds-vh-delta { color: var(--brand); text-decoration: none; margin-left: var(--s-2); }
.ds-value-header .ds-vh-delta:hover, .ds-value-header .ds-vh-source:hover { text-decoration: underline; }
.ds-value-header .ds-vh-source { color: var(--fg-3); text-decoration: none; }

/* ── empty_state (§2.3) ────────────────────────────────────────────────── */
.ds-empty {
  background: var(--bg-sunken);
  border-radius: var(--r-4);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  margin: var(--s-6) auto;
  max-width: 640px;
  font-family: var(--font-sans);
}
.ds-empty .ds-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-2xl);
  margin-bottom: var(--s-4);
}
.ds-empty .ds-empty-title { font-size: var(--t-lg); color: var(--fg-2); font-weight: 500; }
.ds-empty .ds-empty-body  { font-size: var(--t-sm); color: var(--fg-3); margin-top: var(--s-2); }
.ds-empty .ds-empty-total { color: var(--fg-4); margin-left: var(--s-3); }
.ds-empty .ds-empty-actions { margin-top: var(--s-5); display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.ds-empty .ds-empty-help { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--fg-4); }
.ds-empty-clean > .bi { color: var(--status-ok); font-size: var(--t-2xl); }
.ds-empty-clean .ds-empty-title a { color: var(--fg-3); }
.ds-empty-failed > .bi { color: var(--status-bad); font-size: var(--t-2xl); }
.ds-filter-chip { background: var(--bg-raised); border: 1px solid var(--line); color: var(--fg-2); text-transform: none; letter-spacing: var(--tr-normal); }
.ds-clear-filters { color: var(--brand); }

.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  border-radius: var(--r-3);
  padding: var(--s-2) var(--s-4);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard);
}
.ds-btn-primary   { background: var(--brand); color: var(--brand-on); }
.ds-btn-primary:hover { background: var(--brand-hover); color: var(--brand-on); }
.ds-btn-secondary { background: var(--bg-raised); color: var(--fg-2); border-color: var(--line-strong); }
.ds-btn-secondary:hover { background: var(--bg-sunken); }

/* ── metric_tile (§2.4) ────────────────────────────────────────────────── */
.ds-metric-tile {
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--s-4);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-sans);
  min-width: 140px;
}
a.ds-metric-tile:hover { box-shadow: var(--shadow-2); transition: box-shadow var(--dur-1) var(--ease-standard); }
.ds-metric-tile .ds-mt-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2xl);
  color: var(--fg-2);
  margin-top: var(--s-1);
}
.ds-metric-tile .ds-mt-value.ds-tone-warn { background: none; border: none; color: var(--status-warn); border-left: 2px solid var(--status-warn); padding-left: var(--s-2); }
.ds-metric-tile .ds-mt-value.ds-tone-bad  { background: none; border: none; color: var(--status-bad);  border-left: 2px solid var(--status-bad);  padding-left: var(--s-2); }
.ds-metric-tile .ds-mt-limit  { font-size: var(--t-xs); color: var(--fg-4); font-family: var(--font-sans); }
.ds-metric-tile .ds-mt-unknown { color: var(--fg-4); }
.ds-metric-tile .ds-mt-reason { font-size: var(--t-xs); color: var(--fg-4); margin-top: var(--s-1); }
.ds-metric-tile .ds-mt-trend  { font-size: var(--t-xs); color: var(--fg-3); margin-top: var(--s-1); }
.ds-metric-tile .ds-mt-meta   { font-size: var(--t-2xs); color: var(--fg-4); margin-top: var(--s-2); }
.ds-metric-tile .ds-mt-meta a { color: var(--fg-3); }

/* ── preview pages ─────────────────────────────────────────────────────── */
.ds-preview {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  padding: var(--s-7);
  margin: 0;
}
.ds-preview h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-2xl); margin: 0 0 var(--s-2); }
.ds-preview .ds-preview-note { font-size: var(--t-sm); color: var(--fg-3); margin-bottom: var(--s-6); }
.ds-preview .ds-variant { margin-bottom: var(--s-6); }
.ds-preview .ds-variant-caption {
  font-size: var(--t-xs);
  color: var(--fg-4);
  font-family: var(--font-mono);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-1);
}
.ds-preview .ds-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-start; }
.ds-swatch { width: 132px; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; font-size: var(--t-2xs); }
.ds-swatch > div:first-child { height: 44px; }
.ds-swatch > div:last-child { padding: var(--s-1) var(--s-2); font-family: var(--font-mono); color: var(--fg-3); background: var(--bg-raised); }

/* ---------- module rail (P12 route-ownership manifest → left rail) ----------
   Rendered by templates/fundos/_ds/subnav.html from app/utils/module_nav.py.
   States: .active (the manifest item that owns request.endpoint; detail pages
   resolve to their parent) · .external (opens another module; carries ↗).
   Groups are the workflow stages; the hub link sits above the first group.
   No disabled state and no count badge — the manifest carries neither yet. */
.ds-rail { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) 0; font-family: var(--font-sans); }
/* The module title is a TITLE, not another eyebrow. Before 2026-08-27 the old
   rail gave the module name and the group headers the same class, so "FUND
   ADMIN" and "SET UP" were typographically identical and the rail read as a
   flat list of four peers. Differentiated on three axes at once — case (title
   vs uppercase eyebrow), size/weight, and a rule beneath it — because any one
   alone still reads as a sibling of the group labels. */
.ds-rail-hub { display: flex; align-items: center; gap: var(--s-2); color: var(--fg); font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tr-snug); line-height: var(--lh-snug); text-decoration: none; padding: var(--s-2) var(--s-3) var(--s-3); margin: 0 0 var(--s-2); border-bottom: 1px solid var(--line); border-radius: var(--r-3) var(--r-3) 0 0; }
.ds-rail-hub .ds-rail-icon { color: var(--brand); }
.ds-rail-hub:hover, .ds-rail-hub:focus-visible { background: var(--bg-sunken); outline: none; }
.ds-rail-group { display: flex; flex-direction: column; gap: 2px; }
.ds-rail-group-label { font-size: var(--t-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-4); padding: var(--s-3) var(--s-3) var(--s-1); }
.ds-rail-divider { height: 1px; background: var(--line); margin: var(--s-2) var(--s-3); }
.ds-rail-item { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); border-radius: var(--r-3); color: var(--fg-2); font-size: var(--t-sm); text-decoration: none; line-height: var(--lh-snug); transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard); }
.ds-rail-item:hover, .ds-rail-item:focus-visible { background: var(--bg-sunken); color: var(--fg); outline: none; }
.ds-rail-item.active { background: var(--brand-soft); color: var(--brand-hover); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand); }
.ds-rail-item.external { color: var(--fg-3); }
.ds-rail-item.external::after { content: "\2197"; font-size: var(--t-2xs); opacity: .7; margin-left: auto; }
.ds-rail-item .ds-rail-icon { width: 1em; text-align: center; color: var(--fg-4); }
.ds-rail-item.active .ds-rail-icon { color: var(--brand); }