/* ============================================================
   Azoth — Design System (D1 tokens + component vocabulary)
   ------------------------------------------------------------
   Authority: canon/azoth-design-system.md (ai-os) §3–§5, §7–§8.
   Built for the redesign/design-system branch (Brief-Azoth-
   Design-Implementation D1). This file is the single token +
   component stylesheet every redesigned surface inherits; the
   shared shell (D2) and each module (D3–D6) compose from here.

   Coexistence: the legacy assets/azoth-theme.css (--azoth-* /
   --az-* tokens + the old top nav) stays live until D7. To avoid
   collision, every token and class here is prefixed:
     tokens  --ds-*      classes  .ds-*
   No selector here touches a legacy .az* / --azoth-* / --az-*
   name, so a page can load both files during migration.

   ------------------------------------------------------------
   TOKEN NAMING MAP  (canon value → meaning → --ds- token)
   ------------------------------------------------------------
   Neutrals (§4.1)
     #020619  app background ............... --ds-bg
     #071126  surface / one lift ........... --ds-surface
     #050b1a  secondary strip .............. --ds-surface-strip
     #0a1424  row/card hover ............... --ds-surface-hover
     #0B1729  inputs / chips / wells ....... --ds-field
     #111A2E  progress track ............... --ds-track
     #1D2638  default border ............... --ds-border
     #2C3B4D  interactive/hover border ..... --ds-border-strong
     #0d1626  in-list hairline ............. --ds-divider-faint
     #F3F2D7  primary text (warm cream) .... --ds-text
     #F6F5E8  serif display text ........... --ds-text-display
     #B8B9AE  secondary text ............... --ds-text-2
     #7F837E  tertiary / meta / mono ....... --ds-text-3
     #4E554F  disabled / faint ............. --ds-text-mute
     #C7CFD6  AZOTH wordmark ............... --ds-text-wordmark
     #8AA0B5  muted category / T1 / PER .... --ds-muted-blue
     #020619  text on accent fills ......... --ds-on-accent
   Accents (§4.2) — base / light / rgb triplet
     Ember  #C2702E / #D98A4E  Nexus · IMP · warning
     Rose   #C58598 / #D8A6B4  Publishing · Observations
     Blue   #5B92D6 / #7EAAE4  Academy · Practice · bridge
     Violet #9A7CFF /   —      Network · SCI
     Gold   #DCAA5E / #EBCB85  Capture · Inbox · PRA
     Teal   #66A9A0 /   —      done · T0 · positive
   Tint alphas (§4.2): fill .08–.14, border .35–.5,
     active-nav .10, ::selection .30, selected bg .06–.07.

   Module theming: a module scope class (.ds-mod-nexus, …) sets
   --ds-accent / --ds-accent-light / --ds-accent-rgb; accent-
   driven components (buttons, selection, progress, tags, active
   nav/chip) read those vars, so "one module, one accent" (§8.1)
   is enforced by scope, not by per-component color. Fixed data
   colors (context codes, tiers, channels, states) never change.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root {
  /* ---- Neutrals (§4.1) ---- */
  --ds-bg: #020619;
  --ds-surface: #071126;
  --ds-surface-strip: #050b1a;
  --ds-surface-hover: #0a1424;
  --ds-field: #0B1729;
  --ds-track: #111A2E;
  --ds-border: #1D2638;
  --ds-border-strong: #2C3B4D;
  --ds-divider-faint: #0d1626;
  --ds-text: #F3F2D7;
  --ds-text-display: #F6F5E8;
  --ds-text-2: #B8B9AE;
  --ds-text-3: #7F837E;
  --ds-text-mute: #4E554F;
  --ds-text-wordmark: #C7CFD6;
  --ds-muted-blue: #8AA0B5;
  --ds-on-accent: #020619;

  /* ---- Accents (§4.2): base / light / rgb ---- */
  --ds-ember: #C2702E;        --ds-ember-light: #D98A4E;  --ds-ember-rgb: 194,112,46;
  --ds-rose: #C58598;         --ds-rose-light: #D8A6B4;   --ds-rose-rgb: 197,133,152;
  --ds-blue: #5B92D6;         --ds-blue-light: #7EAAE4;   --ds-blue-rgb: 91,146,214;
  --ds-violet: #9A7CFF;       --ds-violet-light: #9A7CFF; --ds-violet-rgb: 154,124,255;
  --ds-gold: #DCAA5E;         --ds-gold-light: #EBCB85;   --ds-gold-rgb: 220,170,94;
  --ds-teal: #66A9A0;         --ds-teal-light: #66A9A0;   --ds-teal-rgb: 102,169,160;

  /* ---- Semantic state colors (§5.4) ---- */
  --ds-warn: var(--ds-ember-light);   /* at-risk / warning / due-soon / overdue */
  --ds-done: var(--ds-teal);          /* done / success / positive */
  --ds-bridge: var(--ds-blue-light);  /* cross-domain link (§5.5) */

  /* ---- Fixed context-code colors (§5.2) ---- */
  --ds-ctx-per: #8AA0B5;   /* Personal */
  --ds-ctx-pai: #66A9A0;   /* PAI */
  --ds-ctx-imp: #C2702E;   /* Impetus */
  --ds-ctx-sci: #9A7CFF;   /* Scientist */
  --ds-ctx-pra: #DCAA5E;   /* Private Practice */

  /* ---- Fixed tier colors (§5.3) ---- */
  --ds-tier-t0: #66A9A0;
  --ds-tier-t1: #8AA0B5;
  --ds-tier-t2: #D98A4E;

  /* ---- Fonts (§4.3) ---- */
  --ds-font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --ds-font-mono: "DM Mono", "Courier New", monospace;
  --ds-font-serif: "Newsreader", Georgia, serif;

  /* ---- Radii (§4.4) ---- */
  --ds-radius-sm: 4px;      /* small buttons / tags / list-checkbox */
  --ds-radius-ctrl: 5px;    /* nav items / inputs */
  --ds-radius-card: 7px;    /* cards / rows (6–8) */
  --ds-radius-panel: 10px;  /* panels / large cards (9–10) */
  --ds-radius-pill: 12px;   /* pills / chips (12–14) */
  --ds-radius-round: 50%;   /* FAB / avatar / help */

  /* ---- Spacing rhythm (§4.4) ---- */
  --ds-space-1: 6px;   --ds-space-2: 8px;   --ds-space-3: 10px;
  --ds-space-4: 12px;  --ds-space-5: 14px;  --ds-space-6: 16px;
  --ds-space-7: 18px;  --ds-space-8: 20px;  --ds-space-9: 22px;
  --ds-space-10: 26px;

  /* ---- Borders (§4.4) ---- */
  --ds-hairline: 1px solid var(--ds-divider-faint);
  --ds-rule: 1px solid var(--ds-border);
  --ds-rule-strong: 1px solid var(--ds-border-strong);

  /* ---- The two permitted shadows (§4.4) ---- */
  --ds-shadow-fab: 0 10px 30px rgba(220,170,94,0.4);
  --ds-shadow-panel: 0 26px 64px rgba(1,3,13,0.85);

  /* ---- Motion (§4.4): short, color/background only ---- */
  --ds-transition: 120ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Grid metrics (§3) ---- */
  --ds-sidebar-w: 262px;
  --ds-rightpane-w: 344px;
  --ds-facet-w: 178px;
  --ds-read-max: 720px;

  /* ---- Default active accent (Nexus/ember). Every real surface
         re-sets this via a .ds-mod-* scope; this default only keeps
         accent-driven components sane if a scope is missing. ---- */
  --ds-accent: var(--ds-ember);
  --ds-accent-light: var(--ds-ember-light);
  --ds-accent-rgb: var(--ds-ember-rgb);
}

/* ============================================================
   Module accent scopes (§5.1, §8.1)
   Put one of these on a surface root; components inherit the accent.
   ============================================================ */
.ds-mod-nexus      { --ds-accent: var(--ds-ember);  --ds-accent-light: var(--ds-ember-light);  --ds-accent-rgb: var(--ds-ember-rgb); }
.ds-mod-publishing { --ds-accent: var(--ds-rose);   --ds-accent-light: var(--ds-rose-light);   --ds-accent-rgb: var(--ds-rose-rgb); }
.ds-mod-academy    { --ds-accent: var(--ds-blue);   --ds-accent-light: var(--ds-blue-light);   --ds-accent-rgb: var(--ds-blue-rgb); }
.ds-mod-network    { --ds-accent: var(--ds-violet); --ds-accent-light: var(--ds-violet-light); --ds-accent-rgb: var(--ds-violet-rgb); }
.ds-mod-inbox      { --ds-accent: var(--ds-gold);   --ds-accent-light: var(--ds-gold-light);   --ds-accent-rgb: var(--ds-gold-rgb); }
.ds-mod-capture    { --ds-accent: var(--ds-gold);   --ds-accent-light: var(--ds-gold-light);   --ds-accent-rgb: var(--ds-gold-rgb); }

/* Per-module ::selection (§4.2 — active accent at ~0.30) */
.ds-mod-nexus ::selection      { background: rgba(var(--ds-ember-rgb), 0.30);  color: var(--ds-text); }
.ds-mod-publishing ::selection { background: rgba(var(--ds-rose-rgb), 0.30);   color: var(--ds-text); }
.ds-mod-academy ::selection    { background: rgba(var(--ds-blue-rgb), 0.30);   color: var(--ds-text); }
.ds-mod-network ::selection    { background: rgba(var(--ds-violet-rgb), 0.30); color: var(--ds-text); }
.ds-mod-inbox ::selection,
.ds-mod-capture ::selection    { background: rgba(var(--ds-gold-rgb), 0.30);   color: var(--ds-text); }

/* ============================================================
   Typography (§4.3) — three families, three jobs. Never mix.
   ============================================================ */
.ds-serif-display {
  font-family: var(--ds-font-serif); font-weight: 500;
  font-size: 40px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ds-text-display);
}
.ds-serif-dek {
  font-family: var(--ds-font-serif); font-weight: 400; font-style: italic;
  font-size: 21px; line-height: 1.5; color: var(--ds-text-2);
}
.ds-serif-body {
  font-family: var(--ds-font-serif); font-weight: 400;
  font-size: 18px; line-height: 1.75; color: var(--ds-text);
}
.ds-title {
  font-family: var(--ds-font-sans); font-weight: 600;
  font-size: 16px; line-height: 1.3; color: var(--ds-text);
}
.ds-nav-text {
  font-family: var(--ds-font-sans); font-weight: 500;
  font-size: 14.5px; color: var(--ds-text);
}
.ds-body {
  font-family: var(--ds-font-sans); font-weight: 400;
  font-size: 13.5px; line-height: 1.5; color: var(--ds-text);
}
.ds-secondary {
  font-family: var(--ds-font-sans); font-weight: 400;
  font-size: 12.5px; line-height: 1.5; color: var(--ds-text-2);
}
/* DM Mono "instrument readout" — labels, eyebrows, counts, codes */
.ds-eyebrow {
  font-family: var(--ds-font-mono); font-weight: 500;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ds-text-3);
}
.ds-mono-label {
  font-family: var(--ds-font-mono); font-weight: 400;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ds-text-3);
}
.ds-meta {
  font-family: var(--ds-font-mono); font-weight: 400;
  font-size: 10.5px; color: var(--ds-text-3);
}

/* ============================================================
   Context chips (§5.2, §7.10)
   Bordered mono chip in the item's fixed context color. Border
   follows the mocks (context color at ~0.4 alpha) rather than a
   neutral border — the doc's "--border-strong" is superseded by
   the visual spec here.
   ============================================================ */
.ds-ctx {
  display: inline-block; vertical-align: middle;
  font-family: var(--ds-font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  padding: 1px 6px; border-radius: 2px; white-space: nowrap;
  color: var(--ds-ctx-color, var(--ds-text-3));
  border: 1px solid var(--ds-ctx-border, var(--ds-border-strong));
}
.ds-ctx--per { --ds-ctx-color: var(--ds-ctx-per); --ds-ctx-border: rgba(138,160,181,0.4); }
.ds-ctx--pai { --ds-ctx-color: var(--ds-ctx-pai); --ds-ctx-border: rgba(102,169,160,0.4); }
.ds-ctx--imp { --ds-ctx-color: var(--ds-ctx-imp); --ds-ctx-border: rgba(194,112,46,0.4); }
.ds-ctx--sci { --ds-ctx-color: var(--ds-ctx-sci); --ds-ctx-border: rgba(154,124,255,0.4); }
.ds-ctx--pra { --ds-ctx-color: var(--ds-ctx-pra); --ds-ctx-border: rgba(220,170,94,0.4); }

/* ============================================================
   Tier badges (§5.3, §7.10) — mono, tier color. T2 pairs with a
   small lock glyph supplied in markup.
   ============================================================ */
.ds-tier {
  font-family: var(--ds-font-mono); font-size: 9px;
  letter-spacing: 0.06em; line-height: 1; white-space: nowrap;
}
.ds-tier--t0 { color: var(--ds-tier-t0); }
.ds-tier--t1 { color: var(--ds-tier-t1); }
.ds-tier--t2 { color: var(--ds-tier-t2); }

/* ============================================================
   Tag (§7.10) — accent-tint fill, mono, radius 2. Accent-driven:
   inherits the module accent unless a channel modifier overrides.
   ============================================================ */
.ds-tag {
  display: inline-block; font-family: var(--ds-font-mono); font-size: 9px;
  letter-spacing: 0.04em; line-height: 1; padding: 2px 7px; border-radius: 2px;
  color: var(--ds-accent);
  background: rgba(var(--ds-accent-rgb), 0.12);
}
/* Fixed channel tags (Publishing, §11) — used as data anywhere */
.ds-tag--obs  { color: var(--ds-rose);   background: rgba(var(--ds-rose-rgb), 0.12); }
.ds-tag--di   { color: var(--ds-ember);  background: rgba(var(--ds-ember-rgb), 0.12); }
.ds-tag--prac { color: var(--ds-blue);   background: rgba(var(--ds-blue-rgb), 0.12); }
.ds-tag--book { color: var(--ds-violet); background: rgba(var(--ds-violet-rgb), 0.12); }

/* ============================================================
   Bridge chip (§5.5, §7.10) — bordered (not filled) blue-light.
   ============================================================ */
.ds-bridge {
  display: inline-block; font-family: var(--ds-font-mono); font-size: 9px;
  letter-spacing: 0.04em; line-height: 1; padding: 2px 7px; border-radius: 2px;
  color: var(--ds-bridge); border: 1px solid rgba(126,170,228,0.45);
  white-space: nowrap;
}

/* ============================================================
   Count pill (§7.10) — gold unread badge, near-black text.
   ============================================================ */
.ds-count {
  display: inline-block; min-width: 16px; text-align: center;
  font-family: var(--ds-font-mono); font-size: 10px; line-height: 16px;
  color: var(--ds-on-accent); background: var(--ds-gold);
  border-radius: 8px; padding: 0 6px; letter-spacing: 0;
}

/* ============================================================
   Card (§7.5)
   ============================================================ */
.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card); padding: 14px;
  transition: background var(--ds-transition), border-color var(--ds-transition);
}
.ds-card:hover {
  background: var(--ds-surface-hover); border-color: var(--ds-border-strong);
}
/* Ownership / channel accent — 2px left border */
.ds-card--own { border-left: 2px solid var(--ds-accent); }
/* Selected (§5.4) */
.ds-card.is-selected {
  background: rgba(var(--ds-accent-rgb), 0.07);
  border-color: rgba(var(--ds-accent-rgb), 0.30);
}
.ds-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ds-card-title { font-family: var(--ds-font-sans); font-size: 14.5px; font-weight: 500; color: var(--ds-text); }
.ds-card-body { font-family: var(--ds-font-sans); font-size: 12.5px; line-height: 1.5; color: var(--ds-text-3); margin-top: 8px; }
.ds-card-foot { display: flex; align-items: center; gap: 9px; margin-top: 12px; }

/* Placeholder / CTA card (§7.5, §8.6) — dashed, centered mono */
.ds-card--cta {
  border: 1px dashed var(--ds-border-strong); background: transparent;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 72px; padding: 16px;
  font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ds-text-mute); cursor: pointer;
}
.ds-card--cta:hover { color: var(--ds-text-3); border-color: var(--ds-border-strong); background: transparent; }

/* ============================================================
   List row (§7.6) — flush rows on faint hairlines.
   ============================================================ */
.ds-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-bottom: 1px solid var(--ds-divider-faint);
  transition: background var(--ds-transition), border-color var(--ds-transition);
}
.ds-row:hover { background: var(--ds-surface-hover); }
.ds-row.is-selected {
  border-radius: var(--ds-radius-sm); border: 1px solid rgba(var(--ds-accent-rgb), 0.30);
  background: rgba(var(--ds-accent-rgb), 0.07);
}
.ds-row-check {
  width: 17px; height: 17px; flex: none; box-sizing: border-box;
  border: 1.5px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: transparent; cursor: pointer;
  transition: background var(--ds-transition), border-color var(--ds-transition);
}
.ds-row-check.is-done {
  border-color: var(--ds-accent); background: var(--ds-accent); color: var(--ds-on-accent);
}
.ds-row-label { flex: 1; font-family: var(--ds-font-sans); font-size: 14px; color: var(--ds-text); }
.ds-row.is-done .ds-row-label { color: var(--ds-text-3); text-decoration: line-through; }
.ds-row-right { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   Progress bar (§7.9) — track + accent fill.
   ============================================================ */
.ds-progress {
  flex: 1; height: 4px; background: var(--ds-track);
  border-radius: 2px; overflow: hidden;
}
.ds-progress-fill { height: 100%; width: 0; background: var(--ds-accent); }

/* ============================================================
   Filter / facet chips (§7.4) — two styles.
   ============================================================ */
/* (a) Segmented taxonomy chips — accent text, active = accent fill */
.ds-chip {
  display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1;
  color: var(--ds-accent); background: transparent;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-pill);
  padding: 4px 9px; transition: background var(--ds-transition), color var(--ds-transition), border-color var(--ds-transition);
}
.ds-chip:hover { border-color: var(--ds-accent); }
.ds-chip.is-active {
  color: var(--ds-on-accent); background: var(--ds-accent); border-color: var(--ds-accent);
}
/* The "All" chip active uses neutral, not accent (§7.4) */
.ds-chip--all.is-active {
  color: var(--ds-on-accent); background: var(--ds-muted-blue); border-color: var(--ds-muted-blue);
}
/* Fixed channel chips (Publishing) — colored as data even off-module */
.ds-chip--obs  { color: var(--ds-rose); }
.ds-chip--obs.is-active  { color: var(--ds-on-accent); background: var(--ds-rose);   border-color: var(--ds-rose); }
.ds-chip--di   { color: var(--ds-ember); }
.ds-chip--di.is-active   { color: var(--ds-on-accent); background: var(--ds-ember);  border-color: var(--ds-ember); }
.ds-chip--prac { color: var(--ds-blue); }
.ds-chip--prac.is-active { color: var(--ds-on-accent); background: var(--ds-blue);   border-color: var(--ds-blue); }
.ds-chip--book { color: var(--ds-violet); }
.ds-chip--book.is-active { color: var(--ds-on-accent); background: var(--ds-violet); border-color: var(--ds-violet); }

/* (b) Dropdown filter pills (Academy) — field bg; applied = accent tint + × */
.ds-pill {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--ds-text-2); background: var(--ds-field);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-pill);
  padding: 4px 11px; transition: color var(--ds-transition), border-color var(--ds-transition);
}
.ds-pill:hover { color: var(--ds-text); }
.ds-pill.is-applied {
  color: var(--ds-accent); background: rgba(var(--ds-accent-rgb), 0.10);
  border-color: rgba(var(--ds-accent-rgb), 0.40);
}

/* ============================================================
   Buttons (§7.2, §7.7) — primary accent fill / secondary bordered.
   Mono uppercase; text on fill is always near-black.
   ============================================================ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; font-family: var(--ds-font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  color: var(--ds-on-accent); background: var(--ds-accent);
  border: 1px solid var(--ds-accent); border-radius: var(--ds-radius-sm);
  padding: 10px 16px; transition: background var(--ds-transition), border-color var(--ds-transition);
}
.ds-btn:hover { background: var(--ds-accent-light); border-color: var(--ds-accent-light); }
.ds-btn--secondary {
  color: var(--ds-text-2); background: transparent; border-color: var(--ds-border-strong);
}
.ds-btn--secondary:hover { color: var(--ds-text); background: transparent; border-color: var(--ds-border-strong); }

/* ============================================================
   Segmented toggle (§7.2) — DS skin for the shared toggle.js
   primitive. Emitted when createToggle is called with { ds:true }
   (adds .ds-toggle to the group). Active segment = accent bg +
   cream text, per §7.2 (the top-bar view toggle is the documented
   exception to the near-black-on-accent rule; the brief specifies
   "active = accent bg + cream"). The chips variant separates the
   segments for multi-select filters.
   ============================================================ */
.ds-toggle {
  display: inline-flex; align-items: stretch; overflow: hidden;
  background: var(--ds-surface); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-ctrl);
}
.ds-toggle .az-toggle-opt {
  font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1;
  background: transparent; color: var(--ds-text-2);
  border: none; border-right: 1px solid var(--ds-border);
  padding: 6px 13px; cursor: pointer;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.ds-toggle .az-toggle-opt:last-child { border-right: none; }
.ds-toggle .az-toggle-opt:hover { color: var(--ds-text); }
.ds-toggle .az-toggle-opt:focus-visible { outline: 2px solid var(--ds-accent-light); outline-offset: -2px; }
.ds-toggle .az-toggle-opt[aria-checked="true"],
.ds-toggle .az-toggle-opt[aria-pressed="true"] {
  background: var(--ds-accent); color: var(--ds-text);
}
/* Chips variant: separated pills for multi-select filters. */
.ds-toggle.az-toggle--chips {
  gap: 6px; border: none; background: transparent; overflow: visible; flex-wrap: wrap;
}
.ds-toggle.az-toggle--chips .az-toggle-opt {
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-pill);
  padding: 5px 11px; color: var(--ds-accent);
}
.ds-toggle.az-toggle--chips .az-toggle-opt[aria-pressed="true"] {
  background: var(--ds-accent); color: var(--ds-text); border-color: var(--ds-accent);
}

/* ============================================================
   State classes (§8.6) — empty / loading / at-risk.
   ============================================================ */
/* Empty: reuse the dashed CTA card with a mono invitation. */
.ds-empty {
  border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius-card);
  padding: 28px 16px; text-align: center;
  font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ds-text-mute);
}
/* At-risk: ember-light meta (never repurposed, §8.5). */
.ds-at-risk { color: var(--ds-warn); }
/* Loading: skeleton rows shimmering on --track. */
.ds-skeleton {
  height: 14px; border-radius: var(--ds-radius-sm); background: var(--ds-track);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  background-size: 200% 100%; animation: ds-shimmer 1.2s ease-in-out infinite;
}
.ds-skeleton + .ds-skeleton { margin-top: 10px; }
.ds-skeleton--sm { width: 40%; }
.ds-skeleton--md { width: 70%; }
@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-skeleton { animation: none; }
}