/* Stoa — Phase 1E shell stylesheet.
 * Palette: A2 (off-white card-on-grey), locked 2026-05-05.
 * Layout: mobile-first; one desktop bump at 768px (C1).
 * Typography: system sans for prose, mono with tabular-nums for figures (.num).
 * Light theme only per spec §5.4.
 *
 * Design tokens v1 (2026-05-24) — landed by UX-AUDIT.md Phase 3 slice.
 * The block below is the new token surface: full type scale, 4px spacing
 * scale, semantic color tones, radii, elevation, focus ring. Existing
 * single-word tokens (--bg-page, --text, --sev-*) are preserved as aliases
 * at the bottom so nothing in the existing ~6.8k lines of rules breaks.
 */

:root {
  /* ── Sticky chrome heights (measured by JS in base.html) ──────────────
     --header-h  = dark banner height (≈161px desktop / 78px mobile)
     --tx-head-h = sticky title row on Thesis/Goal pages (0 elsewhere)
     --tx-rail-h = mobile section chip strip (sticky, above content); 0 on desktop
     Fallbacks below cover the brief pre-JS first paint on desktop. */
  --header-h: 161px;
  --tx-head-h: 0px;
  --tx-rail-h: 0px;
  /* ── Color: neutrals (Stoa warm-gray ramp, 2026-05-27) ───────────── */
  --surface-page:     #f5f5f4;
  --surface-card:     #ffffff;
  --surface-sunken:   #fafaf9;
  --surface-overlay:  rgba(10, 10, 10, 0.55);

  --border-subtle:    #e7e5e4;
  --border-default:   #d6d3d1;
  --border-emphasis:  #a8a29e;

  --ink:              #0a0a0a;   /* prose */
  --ink-soft:         #404040;   /* secondary prose */
  --ink-muted:        #737373;   /* captions — passes AA on both surfaces */
  --ink-disabled:     #a8a29e;

  /* ── Color: brand & accent (Stoa emerald) ─────────────────────────── */
  --accent-default:   #047857;
  --accent-hover-v1:  #065f46;
  --accent-soft-bg:   #ecfdf5;
  --accent-on-soft:   #064e3b;
  --accent-bright:    #34d399;   /* for dark surfaces only (dark bar etc.) */

  /* ── Color: semantic tones ───────────────────────────────────────── */
  /* fg passes WCAG AA (≥4.5:1) on both --surface-card and --surface-page. */
  --tone-positive-fg:     #15803d;
  --tone-positive-bg:     #dcfce7;
  --tone-positive-border: #86efac;
  --tone-positive-strong: #16a34a;

  --tone-caution-fg:      #a16207;
  --tone-caution-bg:      #fef3c7;
  --tone-caution-border:  #fcd34d;
  --tone-caution-strong:  #d97706;

  --tone-danger-fg:       #b91c1c;
  --tone-danger-bg:       #fee2e2;
  --tone-danger-border:   #fca5a5;
  --tone-danger-strong:   #dc2626;

  /* Info re-points at emerald so it tracks the new brand accent. */
  --tone-info-fg:         #064e3b;
  --tone-info-bg:         #ecfdf5;
  --tone-info-border:     #a7f3d0;
  --tone-info-strong:     #047857;

  --tone-neutral-fg:      #404040;
  --tone-neutral-bg:      #fafaf9;
  --tone-neutral-border:  #d6d3d1;
  --tone-neutral-strong:  #737373;

  /* Money-up / -down decoupled from tone so growth-good vs loss-bad
     can re-skin independent of severity. */
  --money-up:             #15803d;
  --money-up-bg:          #dcfce7;
  --money-down:           #b91c1c;
  --money-down-bg:        #fee2e2;
  --money-flat:           #737373;

  /* ── Dark bar (persistent top, used from Phase B onward) ──────────── */
  --bar-bg:               #0a0a0a;
  --bar-bg-secondary:     #1a1d22;
  --bar-text:             #ffffff;
  --bar-text-soft:        #a8b0bc;
  --bar-accent:           #34d399;

  /* ── Pillar category chips ───────────────────────────────────────── */
  --cat-thematic-bg:      #f3e8ff;
  --cat-thematic-fg:      #6b21a8;
  --cat-structural-bg:    #e0f2fe;
  --cat-structural-fg:    #075985;

  /* ── Typography (Stoa: Geist Sans + Geist Mono + Source Serif Pro) ── */
  --font-sans-v1: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono-v1: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
                  "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-serif:   "Source Serif Pro", "Iowan Old Style", "Apple Garamond",
                  Georgia, serif;

  /* Modular scale, 1.125, anchored at 14px body. H1/H2 bumped per Stoa
     design system §4. Display tokens added for hero numbers. */
  --type-caption:    11px;
  --type-meta:       13px;
  --type-body:       14px;
  --type-body-lg:    16px;
  --type-h4:         16px;
  --type-h3:         18px;
  --type-h2:         24px;
  --type-h1:         32px;
  --type-display:    26px;   /* legacy — tuned for 8-figure money in 200px tiles */
  --type-display-lg: 30px;
  --type-display-xl: 48px;   /* Stoa hero numbers in tiles */
  --type-display-2xl: 64px;  /* Stoa dedicated hero (login splash, welcome) */

  --line-tight:  1.15;
  --line-snug:   1.30;
  --line-base:   1.50;
  --line-loose:  1.65;

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

  /* ── Spacing — 4px base scale ────────────────────────────────────── */
  --space-0:  0px;
  --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: 56px;

  --pad-page-mobile:  var(--space-4);
  --pad-page-desktop: var(--space-7);
  --pad-card-mobile:  var(--space-4);
  --pad-card-desktop: var(--space-5);

  --tap-min: 40px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-card:   14px;   /* Stoa card default */
  --radius-xl:     16px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ── Elevation (Stoa: lighter shadows, updated for new ink) ──────── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(10, 10, 10, 0.04),
            0 1px 1px rgba(10, 10, 10, 0.03);
  --elev-2: 0 4px 12px rgba(10, 10, 10, 0.05),
            0 2px 4px rgba(10, 10, 10, 0.03);
  --elev-3: 0 12px 32px rgba(10, 10, 10, 0.06),
            0 4px 8px rgba(10, 10, 10, 0.03);

  /* ── Focus ───────────────────────────────────────────────────────── */
  --focus-color:   var(--accent-default);
  --focus-offset:  2px;
  --focus-ring:    0 0 0 2px var(--surface-card),
                   0 0 0 4px var(--focus-color);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --bp-md: 640px;
  --bp-lg: 900px;
  --container-max: 1280px;

  /* ── Backwards-compat aliases (old token names → new values) ─────── */
  --bg-page:       var(--surface-page);
  --bg-card:       var(--surface-card);
  --border:        var(--border-subtle);
  --border-strong: var(--border-default);
  --text:          var(--ink);
  --text-muted:    var(--ink-muted);   /* now passes AA on both surfaces */
  --accent:        var(--accent-default);
  --accent-hover:  var(--accent-hover-v1);
  --sev-green:     var(--tone-positive-fg);
  --sev-amber:     var(--tone-caution-fg);
  --sev-red:       var(--tone-danger-fg);
  --font-sans:     var(--font-sans-v1);
  --font-mono:     var(--font-mono-v1);
  --pad-page:      var(--pad-page-mobile);
  --pad-card:      var(--pad-card-mobile);
  --gap:           var(--space-3);
  --radius:        var(--radius-md);
}

/* ── Global focus default — fixes WCAG 2.4.7 in one place ─────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
  border-radius: var(--radius-md);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 1px;
  border-color: var(--focus-color);
}

/* ── DS v1 components — additive, do not affect existing rules ────── */

/* CHIP — one component for all 11 badge/pill classes. Old classes
   coexist; new code uses .chip exclusively. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.chip--sm { padding: 0 var(--space-2); font-size: 11px; height: 18px; }
.chip--md { padding: var(--space-1) var(--space-3); height: 22px; }
.chip--lg { padding: var(--space-2) var(--space-4); font-size: var(--type-meta); height: 26px; }

.chip--positive { background: var(--tone-positive-bg); color: var(--tone-positive-fg); border-color: var(--tone-positive-border); }
.chip--caution  { background: var(--tone-caution-bg);  color: var(--tone-caution-fg);  border-color: var(--tone-caution-border); }
.chip--danger   { background: var(--tone-danger-bg);   color: var(--tone-danger-fg);   border-color: var(--tone-danger-border); }
.chip--info     { background: var(--tone-info-bg);     color: var(--tone-info-fg);     border-color: var(--tone-info-border); }
.chip--neutral  { background: var(--tone-neutral-bg);  color: var(--tone-neutral-fg);  border-color: var(--tone-neutral-border); }
.chip--ghost    { background: transparent; color: var(--ink-soft); border-color: var(--border-default); }
.chip--accent   { background: var(--accent-soft-bg); color: var(--accent-on-soft); border-color: var(--tone-info-border); }

.chip-icon  { display: inline-flex; line-height: 1; }
.chip-label { display: inline-block; }
.chip-value { font-family: var(--font-mono-v1); font-variant-numeric: tabular-nums lining-nums; opacity: 0.85; }

/* STAT — display unit for KPIs. */
.stat {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);   /* tighter — 6-up desktop is dense */
  display: flex; flex-direction: column;
  gap: var(--space-1);
  min-height: 76px;
  min-width: 0;              /* allow shrink inside grid track */
  position: relative;
  overflow: hidden;          /* belt-and-suspenders for runaway children */
}
@media (min-width: 900px) {
  .stat { padding: var(--space-3); min-height: 80px; }
}
.stat--bucket { border-top: 3px solid var(--stat-bucket-color, var(--border-default)); }
.stat-label {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-value {
  font-family: var(--font-mono-v1);
  font-variant-numeric: tabular-nums lining-nums;
  /* Sized to fit an 8-figure dollar amount ("$12,345,678" = 11 mono
     chars) inside a 6-per-row desktop tile (~150px content width after
     padding). 20px mono ≈ 11px/char × 11 chars ≈ 121px → fits with
     room. Smaller-than-display on purpose: dense KPI bar.            */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: var(--line-tight);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  letter-spacing: -0.03em;
  min-width: 0;
  overflow-wrap: anywhere;   /* safety: never let a long number escape the tile */
}
.stat--display .stat-value { font-size: clamp(18px, 1.8vw, 24px); }
.stat--sm .stat-value      { font-size: clamp(15px, 1.2vw, 18px); }
.stat-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}
.stat-meta-chunk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.stat-meta-label { color: var(--ink-muted); font-weight: var(--weight-semibold); letter-spacing: 0.02em; }
.stat-meta-chunk.change-up   { color: var(--money-up);   background: var(--tone-positive-bg); }
.stat-meta-chunk.change-down { color: var(--money-down); background: var(--tone-danger-bg); }
.stat-meta-chunk.change-flat { color: var(--money-flat); }
.stat-foot { font-size: var(--type-caption); color: var(--ink-muted); margin-top: auto; }
.stat--loading .stat-value { color: var(--ink-disabled); }
.stat--stale::after {
  content: "";
  position: absolute; left: var(--space-5); right: var(--space-5); bottom: 8px;
  border-bottom: 1px dashed var(--tone-caution-border);
}

/* STAT BAR — grid container for KPI rows. Replaces .kpi-bar's flex+wrap
   so the display value never shrinks when more tiles arrive. */
.statbar {
  display: grid;
  /* Explicit column count per breakpoint (Sam's KPI bar runs ~6 tiles):
       mobile  (<640px): 2 per row
       tablet  (640-899): 3 per row
       desktop (≥900px) : 6 per row
     minmax(0, 1fr) is required so tiles can shrink narrower than their
     intrinsic content (the long mono dollar number); without it the
     grid would expand to fit the number and overflow the viewport. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
@media (min-width: 640px) {
  .statbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (min-width: 900px) {
  .statbar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
}

/* STATUS BANNER — one shape for stale, error, success, info, cost. */
.status-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--type-meta);
  margin: 0 0 var(--space-4);
  min-height: var(--tap-min);
}
.status-banner-icon { font-size: var(--type-h4); line-height: 1; flex-shrink: 0; }
.status-banner-body { flex: 1; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.status-banner-title { font-weight: var(--weight-semibold); color: inherit; }
.status-banner-detail { color: var(--ink-muted); }
.status-banner-cta {
  margin-left: auto;
  font-size: var(--type-meta);
  font-weight: var(--weight-medium);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-height: 32px;
}
.status-banner--stale   { background: var(--tone-caution-bg); color: var(--tone-caution-fg); border-color: var(--tone-caution-border); }
.status-banner--error   { background: var(--tone-danger-bg);  color: var(--tone-danger-fg);  border-color: var(--tone-danger-border); }
.status-banner--success { background: var(--tone-positive-bg); color: var(--tone-positive-fg); border-color: var(--tone-positive-border); }
.status-banner--info    { background: var(--tone-info-bg); color: var(--tone-info-fg); border-color: var(--tone-info-border); }
.status-banner--cost    { background: var(--surface-sunken); color: var(--ink-soft); border-color: var(--border-default); }

/* REC CARD v1 — replaces three duplicate ~130-line blocks in
   partials/advisor_items.html. The macro `rec_card(item, state)` in
   server/templates/macros/components.html renders this shape. */
.rec {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rec:hover { border-color: var(--border-default); }
.rec[data-state="rebutted"] { border-left: 3px solid var(--tone-danger-strong); }
.rec[data-state="debating"] { border-left: 3px solid var(--tone-info-strong); }
.rec[data-state="proposed"] { border-left: 3px solid transparent; }

.rec-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.rec-ticker {
  font-size: var(--type-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rec-head-spacer { flex: 1 1 auto; }

/* Secondary metadata line (goal · pillar · tax · created-at) — demoted from
   header chips so the action identity reads first, esp. on mobile. */
.rec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 10px;
  font-size: var(--type-caption);
  color: var(--text-muted);
  line-height: 1.6;
}
.rec-meta > * { white-space: nowrap; }
.rec-meta > * + *::before {
  content: "·";
  margin: 0 7px;
  opacity: 0.55;
}
.rec-meta-pillar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.rec-meta-pillar:hover,
.rec-meta-pillar:focus-visible {
  color: var(--ink);
  text-decoration-style: solid;
}
.rec-state-chip { /* "Debating…" or "Pushing back" */
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rec-action {
  margin: 0;
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: var(--line-base);
  color: var(--ink);
}

.rec-meta-row {
  display: flex;
  gap: var(--space-3);
  font-size: var(--type-meta);
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.rec-meta-row strong { color: var(--ink-soft); font-weight: var(--weight-semibold); }

.rec-tax-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-meta);
  background: var(--surface-sunken);
  padding: 4px 10px;
  border-radius: var(--radius-md);
  align-self: flex-start;
  color: var(--ink-soft);
}
.rec-tax-line strong { color: var(--ink); font-weight: var(--weight-semibold); }

.rec-reasoning {
  font-size: var(--type-meta);
  color: var(--ink-soft);
}
.rec-reasoning-summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  list-style: none;
  color: var(--ink-muted);
  font-weight: var(--weight-medium);
  padding: var(--space-1) 0;
}
.rec-reasoning-summary::-webkit-details-marker { display: none; }
.rec-reasoning-summary::after {
  content: "More ▾";
  margin-left: auto;
  font-size: var(--type-caption);
  color: var(--accent-default);
  font-weight: var(--weight-medium);
}
details[open] > .rec-reasoning-summary::after { content: "Less ▴"; }
.rec-reasoning-body {
  padding: var(--space-3) 0;
  line-height: var(--line-loose);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}
.rec-reasoning-body p { margin: 0 0 var(--space-3); }
.rec-invalidation { font-size: var(--type-meta); color: var(--ink-muted); border-left: 2px solid var(--tone-caution-border); padding-left: var(--space-3); margin-top: var(--space-3); }
.rec-funding {
  margin: 0;
  font-size: var(--type-meta);
  background: var(--tone-caution-bg);
  color: var(--tone-caution-fg);
  border-left: 3px solid var(--tone-caution-strong);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.rec-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.rec-actions .rec-actions-spacer { flex: 1 1 auto; }

/* Inline form containers re-used inside the rec card — keep existing
   advisor-item form classes working while we wrap them in the new chrome. */
.rec .accept-form,
.rec .decline-form,
.rec .edit-adopt-form,
.rec .accept-rebuttal-form,
.rec .hard-decline-form,
.rec .debate-verdict-form {
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rec-rebuttal-text,
.rec-decline-reason {
  margin: 0;
  font-size: var(--type-meta);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.rec-rebuttal-text { background: var(--tone-info-bg); color: var(--tone-info-fg); border-left: 2px solid var(--tone-info-strong); }
.rec-decline-reason { background: var(--surface-sunken); color: var(--ink-muted); font-style: italic; }

/* Recommendation empty state. */
.rec-empty {
  padding: var(--space-7);
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-default);
}
.rec-empty-title { font-size: var(--type-h4); color: var(--ink-soft); margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); }
.rec-empty-body  { margin: 0; font-size: var(--type-meta); }

@media (min-width: 900px) {
  .rec { padding: var(--space-5); }
  .statbar { gap: var(--space-5); }
}

/* DRIFTBAR — Phase B. Shared shape for "where is this pillar vs its band?"
   Appears on Portfolio Allocations (full variant, expandable card) and the
   Status page drift tile (compact variant, one-line rows). The visual
   core (track + band rectangle + current marker) sits in the same DOM
   as the existing .alloc-bar / .alloc-band / .alloc-current classes,
   dual-classed so existing tests + sparkline JS keep working. */

.driftbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.driftbar-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.driftbar-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--type-meta);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.driftbar-name strong { font-weight: var(--weight-semibold); }
.driftbar-name-context { color: var(--ink-muted); font-weight: var(--weight-regular); }

.driftbar-track-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
/* The track itself — dual-classed with .alloc-bar so existing tests
   ("alloc-bar" in body) still pass and the marker CSS at
   .alloc-current-marker / .drift-marker-* keeps applying. */
.driftbar-track {
  flex: 1 1 auto;
  position: relative;
  height: 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 0;
}
.driftbar-track .alloc-band {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--tone-positive-bg);
  border-left: 1px dashed var(--tone-positive-border);
  border-right: 1px dashed var(--tone-positive-border);
}
.driftbar-track .alloc-current {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  opacity: 0.55;
}
.driftbar-track .alloc-current-marker {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
}

.driftbar-readout {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--type-meta);
  min-width: max-content;
}
.driftbar-current {
  font-weight: var(--weight-semibold);
  color: var(--ink);
  font-family: var(--font-mono-v1);
  font-variant-numeric: tabular-nums lining-nums;
}
.driftbar-target {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  font-family: var(--font-mono-v1);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Bottom row under the bar: amount held (left) on the same line as the target
   dollar range (right), so the held figure sits tight under the bar instead of
   a whitespace gap below. */
.driftbar-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.driftbar-held {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  font-weight: var(--weight-medium, 500);
  font-family: var(--font-mono-v1);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Dollar value of the target band edges (right of the foot row). */
.driftbar-target-usd {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  font-family: var(--font-mono-v1);
  font-variant-numeric: tabular-nums lining-nums;
  opacity: 0.85;
}

.driftbar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-caption);
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.driftbar-meta .num { font-size: inherit; }

/* DRIFTBAR-WRAPPER — outer card chrome. Two variants. */
.driftbar-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.driftbar-wrapper:hover { border-color: var(--border-default); }

/* Left-edge tone stripe so each row reads its state pre-attentively */
.driftbar-wrapper[data-drift="ok"]          { border-left: 3px solid var(--tone-positive-strong); }
.driftbar-wrapper[data-drift="near"]        { border-left: 3px solid var(--border-default); }
.driftbar-wrapper[data-drift="under_amber"],
.driftbar-wrapper[data-drift="over_amber"]  { border-left: 3px solid var(--tone-caution-strong); }
.driftbar-wrapper[data-drift="under_red"],
.driftbar-wrapper[data-drift="over_red"]    { border-left: 3px solid var(--tone-danger-strong); }
.driftbar-wrapper[data-drift="no_data"]     { border-left: 3px solid var(--border-subtle); }

/* Compact (Status page) — even tighter than the base wrapper. */
.driftbar-wrapper--compact {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-1);
}
.driftbar-wrapper--compact .driftbar-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Action buttons rendered inside the wrapper (e.g. Status row Edit/View). */
.driftbar-action {
  font-size: var(--type-caption);
  color: var(--accent-default);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.driftbar-action:hover {
  background: var(--accent-soft-bg);
  border-color: var(--tone-info-border);
  color: var(--accent-on-soft);
}

/* Full variant (Portfolio Pillars) — when used as a <details> the
   summary holds the head + bar + readout. Row-flex with `flex-wrap`
   so the chevron sits to the left of (and aligned with) the Pillar
   Name row, the driftbar fills the remaining width, and the meta
   cluster ($value + sparkline) wraps to its own row below — indented
   to line up with the driftbar. */
details.driftbar-wrapper > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
  outline: none;
}
details.driftbar-wrapper > summary > .driftbar {
  flex: 1 1 0;
  min-width: 0;
}
details.driftbar-wrapper > summary > .driftbar-meta {
  flex: 0 0 100%;
  padding-left: calc(18px + var(--space-2));
}
details.driftbar-wrapper > summary::-webkit-details-marker { display: none; }
details.driftbar-wrapper .driftbar-arrow {
  display: inline-block;
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-out);
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.1;
  margin: 0;
}
details.driftbar-wrapper[open] .driftbar-arrow { transform: rotate(90deg); }

/* No-data variant — band shading replaced with neutral diagonal hatch
   hint so the "no snapshot yet" state reads visually distinct. */
.driftbar-track--no-data {
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-sunken),
    var(--surface-sunken) 6px,
    var(--border-subtle) 6px,
    var(--border-subtle) 7px
  );
}

/* ACTION-PLAN ARCHIVE — Phase C P1-7. Reuses the existing
   .ap-recently-completed chrome shape; just a separate section for
   older / closed-incomplete items. */
.ap-archive {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}
.ap-archive > summary {
  cursor: pointer;
  font-size: var(--type-meta);
  color: var(--ink-muted);
  padding: var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ap-archive > summary strong { color: var(--ink-soft); font-weight: var(--weight-semibold); }
.ap-archive-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
  color: var(--ink-muted);
  font-size: 10px;
}
.ap-archive[open] .ap-archive-arrow { transform: rotate(90deg); }
.ap-archive-body {
  opacity: 0.85;
  padding-top: var(--space-2);
}

/* PILLAR ALLOC compact row — Goal Editor (2026-05-24). Three info
   columns + Save action, all on one row. The Target Band cell hosts
   two narrow inputs and a single % unit so the band reads "5 – 9 %"
   inline. */
.pillar-alloc-table .pillar-alloc-band {
  white-space: nowrap;
}
.pillar-alloc-table .pillar-alloc-band .pillar-min,
.pillar-alloc-table .pillar-alloc-band .pillar-max {
  width: 60px;
  display: inline-block;
  vertical-align: middle;
}
.pillar-alloc-table .pillar-alloc-band-sep {
  display: inline-block;
  margin: 0 6px;
  color: var(--ink-muted);
  vertical-align: middle;
}
.pillar-alloc-table .pillar-alloc-band-unit {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-muted);
  vertical-align: middle;
}

/* AI BUTTON (sparkle icon variant of .btn-refresh) — Phase E follow-up.
   Renders the Anthropic-mark glyph inline before the label. Applied
   to the AI Refresh buttons on /advisor/recommendations + /intelligence
   (was the muted-outlined .btn-intel-refresh). */
.btn-refresh.btn-ai {
  /* Same padding as base .btn-refresh so spark-icon buttons sit at
     the exact same height as plain blue buttons. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: var(--weight-medium);
}
/* Spark icon comes from CSS, not HTML — adding `btn-ai` to a button
   is sufficient to get the ✦. JS-driven textContent swaps don't
   wipe it. */
.btn-refresh.btn-ai::before {
  content: '✦';
  display: inline-block;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}
/* `display:inline-flex` above outranks the UA `[hidden]{display:none}`, so an
   AI button with the `hidden` attribute would still show. Restore it. */
.btn-refresh.btn-ai[hidden] { display: none; }

/* Intel column header — "titleless" variant after the page-titles drop. */
.intel-col-header.intel-col-header--titleless {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-3);
  justify-content: flex-end;
}

/* Tighten intel legend dead space below it — Phase E follow-up. */
.intel-legend { margin-bottom: var(--space-3) !important; }

/* PRIVACY LOCK ICON — Phase E. Replaces 🔓/🔒 emoji with SVG. */
.btn-privacy-lock .privacy-icon {
  display: block;       /* default — JS toggles which one shows */
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.btn-privacy-lock .privacy-icon-locked { display: none; }   /* JS shows when active */
.btn-privacy-lock:hover .privacy-icon { color: var(--ink); }
.btn-privacy-lock.privacy-active .privacy-icon { color: var(--accent-default); }
.btn-privacy-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-size: 0;          /* kill the legacy 13px so any leftover textContent doesn't render */
  border-radius: var(--radius-md);
}
.btn-privacy-lock:hover { background: var(--surface-sunken); }

/* HEADER POLISH — Phase E. Subtle separator between brand/net-worth row
   and tab nav so the two read as distinct strips. */
.app-header .header-row {
  padding-bottom: var(--space-3);
}
.app-header .tab-nav {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-1);
}

/* Cost-chip ::after retired 2026-05-25 per Sam — the leading ✦ from
   `.btn-refresh.btn-ai::before` is now the only AI-call marker.
   `data-cost` attributes left on buttons for now (cheap; can drive
   future tooltips); the chip itself no longer renders. */

/* SPARKLINE MICRO-AXIS — Phase E. Small min/max labels at right edge. */
.alloc-sparkline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.alloc-sparkline-axis {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  height: 16px;
  font-size: 9px;
  color: var(--ink-muted);
  font-family: var(--font-mono-v1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ── End DS v1 components ─────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* App-shell: the document itself is locked to the viewport and does NOT scroll;
   only #app-scroll scrolls. This is the reliable iOS fix — overscroll-behavior
   on the root is ignored by iOS WebKit, so the whole viewport rubber-banded on
   overscroll and dragged the fixed bottom nav up into white space. With the
   document non-scrollable there's nothing to rubber-band, and the bottom nav
   (now a flex child of body) is a true bottom anchor. */
html { height: 100%; }
body {
  height: 100vh;          /* fallback for browsers without dvh */
  height: 100dvh;         /* dynamic viewport: tracks the iOS toolbar */
  display: flex;
  flex-direction: column;
  overflow: hidden;       /* the body never scrolls; #app-scroll does */
}
.app-scroll {
  flex: 1 1 auto;
  min-height: 0;          /* let the flex child shrink so it can scroll */
  overflow-y: auto;
  overflow-x: hidden;     /* kill stray left/right scroll: with overflow-y set,
                             overflow-x would otherwise compute to auto and let
                             any slightly-too-wide element scroll sideways */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* honored on this nested scroller (unlike root) */
}
/* Custom pull-to-refresh indicator (re-adds PTR lost when the document stopped
   scrolling). Slides down from the top as the user drags; spins on reload. */
.ptr {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -48px);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-card);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  z-index: 60;            /* above the sticky header during the pull */
  pointer-events: none;
}
.ptr-ring {
  width: 18px; height: 18px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-default);
  border-radius: 50%;
}
.ptr.is-refreshing .ptr-ring { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Mono with tabular figures — apply to any element rendering currency/share/price.
 * Spec §5.4 ("mono for numbers"). */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Header --- */
.app-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 8px var(--pad-page) 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Mobile: brand top-left (level with the net worth figure) and the
   lock/sign-out actions tucked under the brand, so net worth + deltas use the
   right column and the header stays two rows tall instead of four. */
.header-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "brand   networth"
    "actions networth";
  align-items: start;
  column-gap: 12px;
  row-gap: 3px;
  padding-bottom: 6px;
}
.header-row .brand { grid-area: brand; }
.header-row .header-right { grid-area: networth; justify-self: end; }
.header-row .header-actions { grid-area: actions; justify-self: start; }

.brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Subtle action row under the net worth/deltas: privacy lock + sign-out. */
.header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}
.header-actions .btn-privacy-lock,
.header-actions .header-settings-gear,
.header-actions .header-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: rgba(250, 250, 249, 0.5);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.header-actions .btn-privacy-lock:hover,
.header-actions .header-settings-gear:hover,
.header-actions .header-logout:hover {
  color: #fafaf9;
  background: rgba(250, 250, 249, 0.1);
}

/* Settings gear lives in the header on mobile only; desktop reaches Settings
   via the top tab-nav (mockup 11). Swaps at 768px, matching the nav breakpoint. */
.header-actions .header-settings-gear { display: inline-flex; }
@media (min-width: 768px) {
  .header-actions .header-settings-gear { display: none; }
}

.net-worth {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.nw-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.btn-privacy-lock {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  color: var(--text-muted);
}

.nw-changes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.nw-change-row {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
}

.nw-change-label {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.6;
}

.nw-change-pct {
  font-size: 10px;
  opacity: 0.8;
}

.date-stamp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.header-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}

.btn-icon[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Tab nav: lives inside .app-header as third row --- */
.tab-nav {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--pad-page));
  padding: 0 var(--pad-page);
}

.tab-nav::-webkit-scrollbar { display: none; }

.tab {
  flex: 1 1 0;
  text-align: center;
  padding: 10px 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.tab:hover {
  color: var(--text);
}

.tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────
   STOA DARK BAR — Phase A (2026-05-27)
   Reskins the existing .app-header brand/NW strip into the persistent dark
   bar from design system §8: Three Strokes mark + "Stoa" wordmark on the
   left, net worth + 1D/1M/YTD deltas on the right, tab nav below. The
   mobile bottom tab bar and the 5-tab IA restructure (Home tab, gear,
   dropping the Market Intel top-tab) land in Phase B with the Home route.
   Overrides sit after the legacy header rules so equal-specificity wins.
   ───────────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--bar-bg);
  border-bottom: 1px solid #000;
  padding-top: 10px;
}
.app-header .header-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--bar-text);
}
.brand .brand-mark { display: block; flex: none; }
.brand-word {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 20px;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--bar-text);
}
.net-worth,
.net-worth .num { color: var(--bar-text); }
.btn-privacy-lock { color: var(--bar-text-soft); }
.btn-privacy-lock:hover { background: var(--bar-bg-secondary); }

/* Delta chips on the dark bar — tinted pills + brightened text (Option A) so
   pos/neg read clearly on near-black (the old red blended in). */
.app-header .nw-change-row {
  border: 0;
  border-radius: 999px;
  gap: 5px;
  padding: 3px 10px;
  font-size: 12px;
}
.app-header .nw-change-label { opacity: 0.85; font-weight: 700; letter-spacing: 0.03em; }
.app-header .nw-change-pct { opacity: 0.95; font-weight: 600; font-size: 11px; }
.app-header .nw-change-row.change-pos { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.app-header .nw-change-row.change-neg { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }

/* Tab nav rides on the dark bar. */
.app-header .tab-nav { border-top: 1px solid var(--bar-bg-secondary); }
.tab { color: var(--bar-text-soft); }
.tab:hover { color: var(--bar-text); }
.tab.is-active {
  color: var(--bar-accent);
  border-bottom-color: var(--bar-accent);
}

/* --- Main content --- */
.main {
  padding: var(--pad-page);
}

.main h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 var(--gap) 0;
}

/* Stub card used by every Phase 1E tab body. */
.stub {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.stub code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-page);
  padding: 1px 4px;
  border-radius: 4px;
  color: var(--text);
}

/* --- Footer --- */
.app-footer {
  margin-top: 24px;
  padding: var(--pad-page) var(--pad-page) 32px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.app-footer .disclaimer {
  margin-top: 4px;
  opacity: 0.85;
}

/* The bare `.sev-{severity} { color }` text-tinting utility was removed
   2026-05-22 — it had no actual consumers, and the only caller was a
   <details class="holding-rec-item sev-amber"> on /holdings/{ticker}
   that was unintentionally inheriting it AND the background rule below.
   Background rule is now scoped to `.badge.sev-*` and
   `.severity-badge.sev-*` (the legit consumers). For future container-
   level severity accents (e.g., a colored left-stripe), add a
   per-component rule like `.holding-rec-item.sev-amber { border-left: ... }`. */

/* --- Portfolio tab (Phase 2C.5) --------------------------------------- */

/* New-accounts banner — compact, left-rule accent, uppercase title,
   with a yellow fill + red rule for emphasis. */
.new-accounts-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px var(--pad-card);
  margin-bottom: var(--gap);
  border-radius: var(--radius);
  border-left: 3px solid #ef4444;
  background: #fef3cd;
  color: #92400e;
  text-decoration: none;
  transition: background 120ms ease;
}
.new-accounts-banner:hover { background: #fde68a; }
.new-accounts-banner-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.new-accounts-banner-arrow {
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

/* Stale-data banner */
.stale-banner {
  background: #fef3cd;
  border: 1px solid #fbbf24;
  border-radius: var(--radius);
  padding: 10px var(--pad-card);
  font-size: 13px;
  color: #92400e;
  margin-bottom: var(--gap);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stale-banner-error {
  background: #fee2e2;
  border-color: #f87171;
  color: #991b1b;
}
.stale-retry-btn {
  margin-left: auto;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: inherit;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
  opacity: 0.8;
}
.stale-retry-btn:hover { opacity: 1; }

.btn-refresh-inline {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  white-space: nowrap;
}
.btn-refresh-inline:disabled { opacity: 0.5; cursor: default; }

.portfolio-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: var(--gap);
}

.portfolio-refresh-status-bar {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  min-height: 0;
  line-height: 1;
}
/* "Save" button shared by the Connections + Schedule forms (named for the
   retired concentration-thresholds form it originally served). */
.btn-save-thresholds {
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}
.btn-save-thresholds:hover { opacity: 0.85; }
a.btn-save-thresholds { display: inline-block; text-decoration: none; }
a.btn-save-thresholds:hover { color: #fff; }
.settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Mis-tickered USD funds — fund chips on pillar cards + untagged banner rows */
.hm-meta { color: var(--text-muted); font-size: 12px; margin-left: var(--space-2, 8px); }
.pillar-ticker-fund .pillar-ticker-link { font-style: italic; }

/* Classify-holdings suggestion cards in Advisor → Recommendations */
.hs-card {
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent, #047857);
  border-radius: var(--radius-card, 12px);
  padding: var(--space-4, 16px);
  margin-bottom: var(--space-3, 12px);
  background: var(--surface-card, #fff);
}
.hs-head { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.hs-split { font-weight: 600; margin: var(--space-2, 8px) 0 var(--space-1, 4px); }
.hs-actions { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; margin-top: var(--space-2, 8px); }

/* Fund drawer: "not yet mapped" suggestion banner + on-demand AI button */
.fund-suggest-banner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2, 8px); margin-top: var(--space-2, 8px);
}
.fund-suggest-banner-text { margin: 0; font-size: 0.85rem; line-height: 1.4; }
.fund-suggest-btn-spinner { display: none; }
.fund-suggest-btn.htmx-request { opacity: 0.7; pointer-events: none; }
.fund-suggest-btn.htmx-request .fund-suggest-btn-label { display: none; }
.fund-suggest-btn.htmx-request .fund-suggest-btn-spinner { display: inline; }
.fund-suggestion-rationale { margin: 0 0 var(--space-1, 4px); font-size: 0.85rem; line-height: 1.4; }
/* Per-account goal badge / inline assign dropdown, right-aligned at name level */
.fund-account-name-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.fund-account-goal { flex: none; }
.fund-account-goal-select {
  flex: none; cursor: pointer; max-width: 55%;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  padding: 4px 8px; border-radius: 6px;
  color: var(--accent, #047857);
  background: #fff; border: 1px solid var(--accent, #047857);
}
/* Assigned: tint so a set goal still reads like a badge (but stays clickable). */
.fund-account-goal-select.is-assigned { background: #f0fdf4; }
.fund-suggest-error { color: var(--danger, #b91c1c); margin-top: var(--space-2, 8px); }

/* Per-goal pillar-allocation block in the fund drawer */
.fund-goal-block { padding: var(--space-3, 12px) 0; }
.fund-goal-block + .fund-goal-block { border-top: 1px dashed var(--border, #e5e7eb); }
.fund-goal-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: var(--space-2, 8px);
}
.fund-unassigned-note { font-size: 0.8rem; margin-top: var(--space-2, 8px); }

/* KPI bar — 3 tiles side-by-side on phone, auto-wrap if needed */
.kpi-bar {
  display: flex;
  gap: var(--gap);
  margin-bottom: var(--gap);
  flex-wrap: wrap;
}

.kpi-tile {
  flex: 1 1 120px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
}

.kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 20px;
  font-weight: 600;
}

/* KPI change rows (1D / 1M badges under the KPI value) */
.kpi-change-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
}

.kpi-change-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
}

.kpi-change-row.change-pos,
.kpi-change-row.change-neg,
.nw-change-row.change-pos,
.nw-change-row.change-neg {
  background: none;
}

.kpi-change-label {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  min-width: 18px;
}

.kpi-change-pct {
  font-size: 10px;
  opacity: 0.85;
}

/* Compact KPI bar — when 5+ tiles, shrink so they still fit */
.kpi-bar--compact .kpi-tile {
  flex-basis: 90px;
}
.kpi-bar--compact .kpi-value {
  font-size: 16px;
}

/* Bucket KPI tile — colored left border */
.kpi-tile--bucket {
  border-left: 4px solid var(--bucket-color, #6b7280);
}

/* KPI badges (e.g. Dry Powder Taxable / Tax-Adv split).
   Mirrors .kpi-change-row sizing/weights but stays neutral grey. */
.kpi-badges {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
  color: var(--text-muted);
}

.kpi-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
}

.kpi-badge-label {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  min-width: 18px;
}

.kpi-badge-value {
  font-size: 10px;
  opacity: 0.85;
}

/* Pillars (Phase A) — Settings → Pillars management. */
.pillars-section { display: flex; flex-direction: column; gap: 16px; }
.pillars-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pillars-goal-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.pillars-goal-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
}
.pillars-parse-spinner { color: var(--text-muted); font-size: 12px; font-style: italic; }
.pillars-parse-spinner.htmx-indicator { display: none; }
.pillars-parse-spinner.htmx-request,
.htmx-request .pillars-parse-spinner { display: inline; }

/* "Thesis changed since pillars reviewed" nudge banner (Phase 2). */
.pillars-thesis-changed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--tone-caution-border, #e6c45e);
  background: var(--tone-caution-bg, #fdf6e3);
  border-radius: 10px;
  font-size: 13px;
}
.pillars-thesis-changed-text { color: var(--text); }
.pillars-thesis-changed-actions { display: inline-flex; gap: 8px; flex-shrink: 0; }

/* Undo toast after an All-Goals soft-delete. Neutral/dark so it reads as a
   transient confirmation, distinct from the caution-yellow thesis banner. */
.pillars-undo-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--bar-bg-secondary, #1a1d22);
  background: var(--bar-bg, #0a0a0a);
  color: var(--bar-text, #fff);
  border-radius: 10px;
  font-size: 13px;
}
.pillars-undo-text { color: var(--bar-text, #fff); }
.pillars-undo-text strong { font-weight: 600; }

.pillars-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Two columns on desktop: thematic | structural (read + edit views). */
.pillars-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pillars-column { min-width: 0; }
.pillars-col-empty { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 899px) { .pillars-columns { grid-template-columns: 1fr; gap: 6px; } }

/* Inline info-icon tooltip — replaces the section-header helper text. */
.info-tip-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
.info-tip-btn {
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-sunken, #f3f4f6);
  color: var(--ink-muted, #6b7280); font: italic 700 11px/1 Georgia, serif;
  cursor: help; display: inline-flex; align-items: center; justify-content: center;
}
.info-tip-btn:hover, .info-tip-btn:focus-visible { color: var(--ink, #111); border-color: var(--ink-muted, #6b7280); }
.info-tip {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 30; width: max-content; max-width: 240px;
  background: var(--ink, #111827); color: #fff;
  font: 400 12px/1.4 inherit; padding: 7px 10px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.info-tip-wrap:hover .info-tip, .info-tip-btn:focus-visible + .info-tip { opacity: 1; visibility: visible; }

/* Triggers edit section — slot-swapped into the Thesis page (Pillars-style
   tiles). Reuses .pillar-card / .pillar-edit-inline chrome. */
.triggers-grid { display: flex; flex-direction: column; gap: 10px; }
.trigger-card { border-left: 3px solid var(--border); }
.trigger-card.severity-major { border-left-color: #dc2626; }
.trigger-card.severity-moderate { border-left-color: #d97706; }
.trigger-card.severity-minor { border-left-color: #4f46e5; }
.trigger-card-sev { margin-left: auto; }
/* Clickable colored severity chips (radio group) — same colors as the
   read-view badges; the selected one is full-opacity with a ring. */
.trig-sev-pick { display: inline-flex; gap: 6px; }
.pillar-edit-inline .trig-sev-radio {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.trig-sev-chip {
  cursor: pointer; opacity: .4; text-transform: capitalize;
  outline: 2px solid transparent; outline-offset: 1px; transition: opacity .1s ease;
}
.trig-sev-chip:hover { opacity: .75; }
.trig-sev-radio:checked + .trig-sev-chip { opacity: 1; outline-color: currentColor; }
.trig-sev-radio:focus-visible + .trig-sev-chip { box-shadow: 0 0 0 2px var(--accent, #4a90e2); }
/* Goal-pill filter row (replaces the legacy goal <select>). Reuses the
   .alloc-goal-pill token from the Portfolio allocations view. */
.pillars-goal-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pillars-toolbar-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.pillars-section-header {
  margin: 18px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong, #111);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.pillars-section-header:first-of-type { margin-top: 8px; }
/* Expandable pillar tile (Phase 4 — Pillars on the Thesis page).
   `.pillar-card` is now a <details>; the <summary> is the clickable header
   (collapsed = name + band), the body holds description/reasoning/tickers. */
.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.pillar-card-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.pillar-card-summary::-webkit-details-marker { display: none; }
.pillar-caret {
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 0.12s ease;
}
.pillar-card[open] .pillar-caret { transform: rotate(90deg); }
.pillar-band {
  margin-left: auto;
  font-family: var(--font-mono-v1, monospace);
  font-size: 12px;
  color: var(--ink-soft, #404040);
  background: var(--surface-sunken, #fafaf9);
  border: 1px solid var(--border-subtle, #e7e5e4);
  border-radius: 6px;
  padding: 2px 8px;
}
.pillar-card-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border-subtle, #e7e5e4);
}
.pillar-card-tools { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; }
.pillar-field { margin: 12px 0; }
.pillar-field:first-child { margin-top: 0; }
.pillar-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, #737373);
  margin-bottom: 3px;
}
.pillar-field-text { font-size: 13.5px; color: var(--ink-soft, #404040); }
.pillar-field-text.pillar-lead { font-size: 14.5px; color: var(--ink, #0a0a0a); }
.pillar-reasoning {
  background: var(--surface-sunken, #fafaf9);
  border: 1px solid var(--border-subtle, #e7e5e4);
  border-radius: 8px;
  padding: 9px 11px;
  white-space: pre-wrap;
}
.pillar-card-preview {
  border-style: dashed;
  border-color: var(--accent, #4a90e2);
}
.pillar-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pillar-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
/* reading-mode pillar name opens the unified pillar drawer (§3.16a U1) */
.pillar-name-link { cursor: pointer; }
.pillar-name-link:hover { color: var(--accent-default); }
.pillar-target-band {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}
.btn-pillar-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: auto;
}
.btn-pillar-delete:hover { color: var(--sev-red); }
.pillar-description { font-size: 12px; margin: 0; }
.pillar-tickers { display: flex; flex-wrap: wrap; gap: 4px; }
.pillar-ticker-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.pillar-ticker-gap {
  background: color-mix(in srgb, var(--sev-amber, #d49a1a) 18%, transparent);
  color: var(--sev-amber, #d49a1a);
}
.pillar-ticker-secondary { opacity: 0.55; font-style: italic; }
.pillar-ticker-chip { display: inline-flex; align-items: center; gap: 2px; }
.pillar-ticker-link {
  color: inherit;
  text-decoration: none;
}
.pillar-ticker-link:hover { text-decoration: underline; }
.pillar-ticker-manual {
  background: color-mix(in srgb, var(--accent, #4a90e2) 14%, transparent);
  color: var(--accent, #4a90e2);
  border: 1px dashed color-mix(in srgb, var(--accent, #4a90e2) 45%, transparent);
  padding-right: 4px;
}
.pillar-ticker-action-form { display: inline; margin: 0; }
.pillar-ticker-action {
  font-size: 11px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: none;
  opacity: 0.55;
}
.pillar-ticker-action:hover { opacity: 1; }
.pillar-ticker-remove:hover { color: var(--sev-red); }
/* Parser chips: × hidden by default, fades in on hover/focus so the chip
   row stays visually quiet. Manual chips already render their actions
   always-visible via .pillar-ticker-manual above. */
.pillar-ticker-chip:not(.pillar-ticker-manual) .pillar-ticker-action {
  opacity: 0;
  transition: opacity 120ms ease;
}
.pillar-ticker-chip:not(.pillar-ticker-manual):hover .pillar-ticker-action,
.pillar-ticker-chip:not(.pillar-ticker-manual):focus-within .pillar-ticker-action {
  opacity: 0.55;
}
.pillar-ticker-chip:not(.pillar-ticker-manual):hover .pillar-ticker-action:hover {
  opacity: 1;
}
.pillar-quick-add { display: inline-flex; margin: 0; }
.pillar-quick-add-input {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
  background: transparent;
  color: var(--text);
  width: 64px;
  outline: none;
  transition: width 120ms ease, border-color 120ms ease;
}
.pillar-quick-add-input::placeholder {
  color: color-mix(in srgb, var(--text) 50%, transparent);
  font-weight: 600;
}
.pillar-quick-add-input:focus {
  width: 96px;
  border-style: solid;
  border-color: var(--accent, #4a90e2);
}
.pillars-empty { padding: 20px 0; text-align: center; }
.pillars-parse-preview-panel {
  border: 1px dashed var(--accent, #4a90e2);
  border-radius: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--accent, #4a90e2) 5%, transparent);
}
.pillars-parse-preview-header h3 { margin: 0 0 4px; font-size: 14px; }
.pillars-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.pillars-apply-form { display: flex; gap: 8px; margin-top: 8px; }
.btn-pillars-apply {
  background: var(--accent, #4a90e2);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-pillars-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.pillar-add-form { margin-top: 16px; }
.pillar-add-form summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.pillar-add-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.pillar-add-form input, .pillar-add-form textarea {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.pillar-add-form textarea { margin-top: 8px; min-height: 60px; resize: vertical; font-family: inherit; }
.pillar-add-form button[type="submit"] {
  margin-top: 8px;
  padding: 6px 14px;
  background: var(--accent, #4a90e2);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pillars-parse-error {
  padding: 12px;
  border: 1px solid var(--sev-red);
  background: color-mix(in srgb, var(--sev-red) 8%, transparent);
  color: var(--sev-red);
  border-radius: 8px;
  font-size: 13px;
}

/* Asset bucket settings */
.asset-buckets-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.bucket-section-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0 0;
  color: var(--text);
}
.bucket-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 4px solid var(--bucket-color, #6b7280);
  padding: var(--pad-card);
}
.bucket-tile-form {
  display: contents;
}
.bucket-tile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bucket-tile-color-bar { display: none; }
.bucket-tile-name {
  flex: 1 1 140px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  color: var(--text);
}
.bucket-kpi-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.btn-bucket-remove {
  padding: 4px 10px;
  font-size: 12px;
  background: transparent;
  color: var(--red, #be123c);
  border: 1px solid var(--red, #be123c);
  border-radius: var(--radius);
  cursor: pointer;
  margin-left: auto;
}
.btn-bucket-remove:hover {
  background: var(--red, #be123c);
  color: #fff;
}
.bucket-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bucket-color-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-right: 4px;
}
.bucket-color-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.bucket-color-swatch:has(input:checked) {
  border-color: var(--text);
}
.bucket-color-swatch input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.bucket-pages-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.bucket-pages-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bucket-page-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.bucket-page-value {
  font-size: 12px;
  margin-left: auto;
}
.bucket-add-form {
  padding: var(--pad-card);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bucket-add-name {
  font-size: 14px;
}
.kpi-tiles-section {
  padding: var(--pad-card);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.kpi-tiles-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.kpi-tiles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 8px;
}
.kpi-tile-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Account list */
.account-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.account-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-card);
  gap: var(--gap);
  border-bottom: 1px solid var(--border);
}

/* Collapsible account tiles (accounts with holdings) */
details.account-card > summary.account-header {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.account-card > summary.account-header::-webkit-details-marker { display: none; }
details.account-card > summary.account-header::marker { display: none; }

/* No bottom border when collapsed — nothing to separate from */
details.account-card:not([open]) > summary.account-header {
  border-bottom: none;
}

.account-toggle-arrow {
  font-size: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
  display: inline-block;
}
details[open] > summary .account-toggle-arrow {
  transform: rotate(90deg);
}

.account-name {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-inst {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-value {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.account-subtype {
  padding: 8px var(--pad-card);
  font-size: 12px;
}

/* Holdings rows inside account card */
.holdings-list {
  display: flex;
  flex-direction: column;
}

/* Holdings grid: Ticker | Name | Price | Change | Value */
.holding-header {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 1fr 90px 90px;
  gap: 8px;
  padding: 6px var(--pad-card) 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
}

.holding-row {
  display: flex;
  flex-direction: column;
  padding: 7px var(--pad-card);
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.holding-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 1fr 90px 90px;
  align-items: start;
  gap: 8px;
}

.holding-col-ticker {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.holding-name-row {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-word;
}

/* Approved Holdings v2 (2026-06-10): name + shares merged into ONE
   truncating sub line under the ticker. */
.holding-sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.holding-qty {
  font-size: 11px;
  white-space: nowrap;
}

.holding-col-price {
  text-align: right;
  font-size: 13px;
  white-space: nowrap;
}

.holding-col-change {
  text-align: right;
  white-space: nowrap;
}

.holding-col-value {
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.account-settings-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0.6;
  transition: background 0.12s, opacity 0.12s;
}
.account-settings-link:hover {
  background: var(--bg-page);
  opacity: 1;
}

/* Account value block (right side of collapsed tile) */
.account-value-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.account-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-as-of {
  font-size: 10px;
}

/* Change badges — account tile and holding row */
.account-change-badge,
.holding-change-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.change-pos {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.change-neg {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* Ticker badge */
.badge {
  display: inline-block;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Text utilities */
.text-muted {
  color: var(--text-muted);
}

.portfolio-timestamp {
  font-size: 11px;
  text-align: right;
  margin-top: 8px;
}

/* --- Advisor item cards (Phase 2F) --- */
.advisor-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  margin-bottom: var(--gap);
}

.item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.severity-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}
/* Scoped to badge contexts: the bare selectors were painting whole
   container elements (e.g., <details class="holding-rec-item sev-amber">
   on /holdings/{ticker}) since `sev-{severity}` gets reused as a tag
   on non-badge elements too. `.severity-badge` already declares
   `color: #fff`; `.badge` doesn't, so we explicitly set white text on
   the severity backgrounds for it. */
.badge.sev-red,
.severity-badge.sev-red   { background: var(--sev-red);   color: #fff; }
.badge.sev-amber,
.severity-badge.sev-amber { background: var(--sev-amber); color: #fff; }
.badge.sev-green,
.severity-badge.sev-green { background: var(--sev-green); color: #fff; }

.item-ticker { font-size: 15px; font-weight: 600; }

.phase-tag {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
  text-transform: capitalize;
}

.item-action       { margin: 0 0 4px; font-weight: 500; }
.item-reasoning    { margin: 0 0 6px; font-size: 14px; }
.item-invalidation { margin: 0 0 10px; font-size: 13px; border-left: 2px solid var(--border); padding-left: 8px; }
.item-account-row { margin: 2px 0 6px; }
.item-suggested-account { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; display: inline-block; }
.item-funding-note { margin: 0 0 10px; font-size: 13px; border-left: 3px solid #d97706; padding-left: 8px; color: var(--text-muted); }
.ap-funding-note { margin: 0 0 8px; font-size: 12px; border-left: 3px solid #d97706; padding-left: 8px; }

.item-actions { display: flex; gap: 8px; }
.item-actions form { display: contents; }

.btn-accept,
.btn-edit-accept,
.btn-decline-toggle,
.btn-decline-confirm,
.btn-debate,
.btn-cancel {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  font-size: 14px;
  cursor: pointer;
  background: var(--bg-card);
}
.btn-accept          { color: var(--sev-green); border-color: var(--sev-green); }
.btn-edit-accept     { color: #3b82f6; border-color: #3b82f6; }
.btn-decline-toggle  { color: var(--sev-red);   border-color: var(--sev-red); }
.btn-decline-confirm { color: var(--sev-red);   border-color: var(--sev-red); }
.btn-debate          { color: var(--sev-amber);  border-color: var(--sev-amber); }
.btn-cancel          { color: var(--text-muted); }

.decline-form {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.decline-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 8px;
  font-family: var(--font-sans);
}

.decline-actions { display: flex; gap: 8px; }

.advisor-item-resolved {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--pad-card);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--gap);
  opacity: 0.65;
}

.resolved-badge   { font-size: 13px; font-weight: 500; }
.resolved-accept  { color: var(--sev-green); }
.resolved-decline { color: var(--text-muted); }
.resolved-ack     { color: var(--text-muted); }
.resolved-debate  { color: var(--sev-amber); }

.advisor-item-debating {
  display: block;
  opacity: 1;
}
.debate-verdict-form {
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--sev-amber) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--sev-amber) 25%, var(--border));
  border-radius: var(--radius);
}
.debate-verdict-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sev-amber);
  margin: 0 0 8px;
}
.verdict-row {
  margin-bottom: 8px;
}
.verdict-select {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  width: 100%;
  max-width: 240px;
}
.debate-field-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.debate-textarea {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}
.debate-edit-fields,
.debate-account-fields,
.debate-reasoning-field {
  margin-bottom: 8px;
}
.btn-debate-verdict {
  margin-top: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--sev-amber);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-debate-verdict:hover { opacity: 0.88; }
.debating-section { margin-bottom: 12px; }

/* --- Settings (Phase 2G) --- */
/* Settings layout: horizontal nav on mobile, sidebar on desktop */
.settings-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: calc(-1 * var(--pad-page));
}

.settings-sidebar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  /* Mobile: pin the section strip directly under the dark banner so the section
     switcher stays reachable while scrolling. Desktop (≥768px) re-pins it as a
     vertical sidebar (with a small gap). Heights come from --header-h (measured). */
  position: sticky;
  top: var(--header-h);
  z-index: 9;
}
.settings-sidebar::-webkit-scrollbar { display: none; }

.settings-nav {
  display: flex;
  flex-direction: row;
  padding: 10px 12px;
  gap: 8px;
}

.settings-nav-link {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 20px;
  border: 1px solid var(--border);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.settings-nav-link:hover { color: var(--text); border-color: var(--text-muted); }
.settings-nav-link.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.settings-content-area {
  flex: 1;
  min-width: 0;
  padding: var(--pad-page);
}

@media (min-width: 768px) {
  .settings-layout {
    flex-direction: row;
    align-items: flex-start;
    margin: calc(-1 * var(--pad-page));
  }
  .settings-sidebar {
    width: 168px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-h) + 12px);
    background: transparent;
    border-bottom: none;
    border-right: 1px solid var(--border);
    overflow-x: visible;
    align-self: flex-start;
    padding: 12px 0;
  }
  .settings-nav {
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
  }
  .settings-nav-link {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    display: block;
  }
  .settings-nav-link:hover { background: var(--bg-card); color: var(--text); }
  .settings-nav-link.is-active {
    background: var(--bg-card);
    color: var(--accent);
  }
  .settings-content-area {
    padding: 0 var(--pad-page) var(--pad-page);
  }
}

.settings-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.settings-section:last-child { border-bottom: none; }

.settings-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 14px;
}

.settings-subsection-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.settings-section > .settings-subsection-heading:first-of-type { margin-top: 0; }

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  margin-bottom: var(--gap);
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.settings-card-header h3 { margin: 0; font-size: 15px; }

.settings-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 10px;
}

.thesis-input {
  width: 100%;
  min-height: 100px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  resize: vertical;
  display: block;
}

.settings-number {
  width: 80px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 14px;
}

.connection-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.connection-field-row .settings-label {
  min-width: 150px;
  margin: 0;
}

.connection-input-wrap {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.connection-input {
  flex: 1;
  min-width: 0;
}

.btn-show-secret {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.ai-feedback-block {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg-subtle, #f8f9fa);
  border-radius: 8px;
  border-left: 3px solid var(--accent, #2563eb);
}

.ai-feedback-prose {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body, #374151);
  white-space: pre-wrap;
  margin-top: 6px;
}

.ai-feedback-ts {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: normal;
  margin-left: 8px;
}

.saved-indicator {
  font-size: 12px;
  color: var(--sev-green);
  opacity: 0;
  transition: opacity 0.2s;
  margin-left: 6px;
}
.saved-indicator.visible { opacity: 1; }

/* Restrictions */
.restriction-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.restriction-row:last-of-type { border-bottom: none; }

.restriction-display {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.restriction-subjects { font-size: 14px; font-weight: 600; flex-shrink: 0; }
.restriction-type     { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.restriction-notes    { font-size: 13px; flex: 1; min-width: 0; }
.restriction-inactive { opacity: 0.6; }

.badge-inactive {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-page);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}

.restriction-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.btn-restriction-edit,
.btn-restriction-remove,
.btn-restriction-cancel {
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}
.btn-restriction-remove { color: var(--sev-red); border-color: var(--sev-red); }

.restriction-edit-form { margin-top: 8px; }

.add-restriction-form { margin-top: 12px; }

.restriction-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.settings-input {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-sans);
  flex: 1;
  min-width: 120px;
}
/* Goal editor's Horizon + Target Outcome inputs span the card width
   (mobile + desktop), instead of sitting at the flex-1 default that
   only consumes the parent's width when inside a flex container. */
.goal-editor-input--wide {
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.settings-select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-card);
  flex-shrink: 0;
}

.btn-add-restriction {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Desktop bump (C1: 768px). Phone-first stays the design target;
 * desktop just gets more breathing room and a max-width container. */
@media (min-width: 768px) {
  :root {
    --pad-page: 24px;
    --pad-card: 16px;
    --gap: 12px;
  }

  .main {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Desktop banner — two rows that share the dark bar:
       row 1:  brand (left)                       net-worth NUMBER (right, large)
       row 2:  nav (left, spread out)             1D/1M deltas · lock/sign-out
     The nav sits on the SAME level as the deltas + icons. To get there we
     flatten the header wrappers with `display: contents` so the brand, the
     net-worth number, its delta badges, the icons, AND the tab-nav all become
     direct items of one grid on `.app-header`. (Mobile <768px is untouched —
     it keeps the `.header-row` grid + bottom tab bar.) */
  .app-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "brand  networth actions"
      "tabnav deltas   actions";
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
  }
  .app-header > .header-row,
  .header-right,
  .net-worth,
  .nw-content { display: contents; }

  .brand { grid-area: brand; font-size: 20px; align-self: center; }

  /* The big net-worth number (direct child of .nw-content — NOT the small
     delta amounts, which are .num spans nested inside .nw-changes). */
  .nw-content > .num {
    grid-area: networth;
    justify-self: end;
    align-self: center;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.1;
  }
  .nw-changes { grid-area: deltas; justify-self: end; align-self: center; }
  /* Net-worth number (row 1) right-aligns to the deltas column, i.e. to the 1M
     chip's right edge. The lock/sign-out icons span both rows on the far right,
     stacked vertically (privacy above sign-out). */
  .header-actions {
    grid-area: actions;
    justify-self: end;
    align-self: center;
    flex-direction: column;
    gap: 2px;
  }

  /* Nav shares row 2 with the deltas/icons; spread across the left column and
     compress as the window narrows (below 768px it swaps to the bottom bar). */
  .app-header .tab-nav {
    grid-area: tabnav;
    justify-self: start;       /* pack the tabs to the LEFT, don't stretch */
    align-self: center;
    border-top: none;
    /* the base rule pulls the strip full-bleed (margin: 0 -pad-page) for the
       mobile scroller; reset it so the nav starts at the grid edge and "Home"
       lines up with the brand logo. */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    gap: 2px;
    max-width: 500px;          /* never spread wider than this */
  }
  .tab {
    flex: 0 0 auto;
    text-align: center;
    padding: 6px 10px;
    font-size: 14px;
  }
  .app-header .tab-nav .tab:first-child { padding-left: 0; }
}

/* Intel feed (Phase 2H) */
.intel-section { margin-top: 24px; }  /* legacy — not used in 2-col layout */

.intel-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.intel-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  margin-bottom: var(--gap);
}

.intel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.intel-tickers    { font-size: 12px; }
.intel-source     { font-size: 12px; }
.intel-source-row { margin-top: 6px; }
.intel-source-link { font-size: 12px; text-decoration: none; }
.intel-source-link:hover { text-decoration: underline; }

.intel-headline {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.intel-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}
.intel-link:hover { border-bottom-color: var(--accent); color: var(--accent); }

.intel-col-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
}
.intel-col-header .intel-col-title {
  margin: 0;
  padding: 0;
  border: none;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.intel-col-header .intel-col-actions { flex: 0 0 auto; flex-wrap: nowrap; }
.intel-refresh-time { font-size: 11px; }
/* AI-refresh progress/outcome line next to the Recommendations / Market Intel
   Refresh buttons. Empty until a run starts. */
.intel-refresh-status { font-size: 11px; color: var(--text-muted); }
.intel-refresh-status.is-busy { color: var(--text-muted); }
.intel-refresh-status.is-ok { color: var(--accent); }
.intel-refresh-status.is-err { color: var(--sev-red); }
/* Refresh failures render as a small card with a retry action, never a bare
   red line (UX Audit v2 / design contract §3.10). */
.refresh-fail-card {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 8px; background: rgba(220, 38, 38, 0.06);
  color: var(--sev-red); font-size: 11px;
}
.refresh-fail-retry {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-card); color: var(--text);
  font-size: 11px; font-weight: 600; padding: 2px 8px; cursor: pointer;
  white-space: nowrap;
}
.refresh-fail-retry:hover { border-color: var(--text-muted); }

.intel-source-link {
  font-size: 12px;
  margin-left: auto;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}
.intel-source-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Intel badges — urgency = pill, sentiment = colored icon. */
.intel-urgency-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  line-height: 1.5;
  min-width: 42px;
  text-align: center;
  vertical-align: middle;
}
.urg-high   { background: var(--sev-red); }
.urg-medium { background: var(--sev-amber); }
.urg-low    { background: var(--text-muted); }

.intel-sentiment-icon {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  width: 18px;
  text-align: center;
  vertical-align: middle;
}
.sent-positive { color: var(--sev-green); }
.sent-negative { color: var(--sev-red); }
.sent-neutral  { color: var(--sev-amber); }

.intel-legend {
  font-size: 11px;
  margin: 0 0 12px;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-muted);
}
.intel-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.6;
}
.intel-legend-label { margin-right: 2px; }

.intel-published-at { font-size: 11px; }

.intel-why-it-matters {
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  margin: 8px 0 0;
  padding-top: 6px;
}

/* Per-variant framing + hard-rules card on the experiment results page. */
.variant-manifest-card {
  background: color-mix(in srgb, var(--bg-card) 70%, var(--border) 30%);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.variant-manifest-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--accent);
}
.variant-framing {
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 8px;
}
.variant-hard-rules {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.variant-hard-rules li { margin: 2px 0; }
.variant-hard-rules code {
  background: color-mix(in srgb, var(--bg-card) 50%, transparent);
  padding: 0 3px;
  border-radius: 2px;
  font-size: 10px;
}

/* Per-item feedback pills: outlined by default, filled when active. */
.intel-feedback {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.intel-fb-pill {
  display: inline-block;
  padding: 1px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  min-width: 36px;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.intel-fb-up   { color: var(--sev-green); border-color: var(--sev-green); }
.intel-fb-down { color: var(--sev-red);   border-color: var(--sev-red); }
.intel-fb-up:hover:not(.is-active)   { background: color-mix(in srgb, var(--sev-green) 14%, transparent); }
.intel-fb-down:hover:not(.is-active) { background: color-mix(in srgb, var(--sev-red) 14%, transparent); }
.intel-fb-up.is-active   { background: var(--sev-green); color: #fff; }
.intel-fb-down.is-active { background: var(--sev-red);   color: #fff; }

/* Per-item action row: feedback pills on the left, archive on the right. */
.intel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.intel-actions .intel-feedback { margin-top: 0; }
.intel-actions-right { display: flex; gap: 6px; }
.intel-archive-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.intel-archive-btn:hover {
  background: var(--bg-card-hover, color-mix(in srgb, var(--text) 6%, transparent));
  color: var(--text);
  border-color: var(--text-muted);
}

/* Collapsed Archive section — sits below the live feed, click summary to expand. */
.intel-archive {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.intel-archive-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 4px 0;
  user-select: none;
}
.intel-archive-summary:hover { color: var(--text); }
.intel-archive-body { margin-top: 10px; }
.intel-item-archived { opacity: 0.65; }
.intel-item-archived:hover { opacity: 0.9; }

/* Action Plan (Phase 2I) */
.ap-goal-section { margin-bottom: 24px; }

.ap-goal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.ap-phase-block { margin-bottom: 16px; }

.ap-phase-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.ap-phase-empty { font-size: 13px; margin: 0; }

.action-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--pad-card);
  margin-bottom: 8px;
}

/* Fix 111 — bulk-select checkbox (inline w/ direction badge) + Delete Selected button.
   Checkbox sits as the first flex child of `.ai-row-ticker` (a row-flex container
   with `align-items: center`), so it lines up vertically with the dir-badge and
   ticker text automatically regardless of any state banner above the header. */
.ap-bulk-select {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ap-bulk-checkbox {
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}
.ap-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0;
}
.ap-bulk-delete-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
}
.ap-bulk-delete-btn:not(:disabled):hover {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}
.ap-bulk-delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ap-bulk-selected-count {
  font-size: 12px;
}

.action-item-executed {
  opacity: 0.5;
}

/* In Progress state (Fix 083) — subtle left-edge accent on the card and a
   small badge under the header. Distinct from .action-item-executed so the
   two states stack visually (an executed card no longer renders the badge). */
.action-item-in-progress {
  border-left: 3px solid var(--accent, #4a90e2);
  padding-left: calc(var(--pad-card) - 3px);
}
.ap-in-progress-row {
  margin: 4px 0 8px;
}
.ap-in-progress-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent, #4a90e2) 14%, transparent);
  color: var(--accent, #4a90e2);
  letter-spacing: 0.02em;
}
.ap-in-progress-toggle {
  display: inline-flex;
  align-items: center;
}
.ap-progress-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px 3px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ap-progress-checkbox:hover {
  border-color: var(--accent, #4a90e2);
  color: var(--text);
}
.ap-progress-checkbox.is-checked {
  background: color-mix(in srgb, var(--accent, #4a90e2) 14%, transparent);
  border-color: var(--accent, #4a90e2);
  color: var(--accent, #4a90e2);
}
.ap-progress-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.ap-progress-checkbox.is-checked .ap-progress-check-box {
  background: currentColor;
}
.ap-progress-checkbox.is-checked .ap-progress-check-box::before {
  content: "✓";
  color: var(--bg-card, #fff);
  font-size: 10px;
  font-weight: 700;
}
.ap-progress-checkbox.is-checked .ap-progress-check-box {
  font-size: 0;  /* hide the inline "✓" — the ::before takes over */
}

/* Two-column action item header */
.ai-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.ai-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.ai-row-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-row-bucket {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}
.ai-row-days {
  padding-left: 2px;
}
.ai-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.ai-row-badges {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ai-row-account {
  text-align: right;
}
.ai-account-text {
  font-size: 11px;
  color: var(--text-muted);
}
.ap-deviation-row {
  margin-bottom: 6px;
}
/* keep legacy class name harmless (used elsewhere) */
.action-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.action-item-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Timeframe context line — sentence-style hint like "Tonight
   post-earnings — act within 48 hrs". Moved out of the left
   column's bucket row to its own full-width row so long text
   doesn't crowd the 2-col header. */
.action-item-timeframe {
  display: block;
  width: 100%;
  clear: both;
  margin: 10px 0 2px;
  font-size: 13px;
  line-height: 1.4;
  font-style: italic;
}

.action-item-action {
  /* Full-width row, clear separation from the 2-column header above.
     Top margin + small padding give visual breathing room so the
     description isn't crowded by the header's right column when that
     column has multiple rows (badges + account name). */
  display: block;
  width: 100%;
  clear: both;
  margin: 4px 0 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

/* Pillar rec on action plan — different chrome (no ticker symbol,
   no tax-bucket, no account row). Action text reads more like prose
   so use slightly looser line-height and a normal weight. */
.action-item-pillar .action-item-action {
  font-weight: 400;
  line-height: 1.5;
}
.item-pillar-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong, #111);
}
.dir-badge.dir-pillar {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}

.action-item-details { margin: 0; }

.action-item-reasoning-toggle {
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.action-item-reasoning-toggle::-webkit-details-marker { display: none; }
.action-item-reasoning-toggle::before { content: '▸ '; }
details[open] .action-item-reasoning-toggle::before { content: '▾ '; }

.action-item-reasoning {
  font-size: 13px;
  margin: 4px 0 0;
  line-height: 1.4;
}

.action-item-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Direction badge (action_direction-driven, replaces severity badge on action plan) */
.dir-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.dir-sell   { background: var(--sev-red); }
.dir-reduce { background: var(--sev-amber); }
.dir-buy    { background: var(--sev-green); }
.dir-open   { background: var(--accent); }
.dir-hold,
.dir-other  { background: #6b7280; }

/* Execute toggle — Open / Close segment control */
.execute-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.exec-btn {
  padding: 5px 14px;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.exec-btn:last-child { border-right: none; }
.exec-btn.is-active {
  background: var(--accent);
  color: #fff;
  cursor: default;
}
.exec-btn-close.is-active { background: var(--sev-green); }

/* Remove button and form */
.item-action-btns {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-ap-remove,
.btn-ap-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-ap-remove:hover { color: var(--sev-red); }
.btn-ap-edit:hover { color: var(--accent); }

.remove-form {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.remove-form-hint {
  font-size: 12px;
  margin: 0 0 8px;
}
.remove-reason-input {
  width: 100%;
  box-sizing: border-box;
  height: 60px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-body);
  margin-bottom: 8px;
}
.remove-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-remove-confirm {
  background: var(--sev-red);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
}
.btn-remove-confirm:hover { opacity: 0.85; }

/* keep old btn-execute / executed-badge for any legacy references */
.btn-execute {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
.btn-execute:hover { opacity: 0.85; }
.executed-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--sev-green);
}

/* ==========================================================================
   Research tab — Phase 2J-A
   ========================================================================== */

.tab-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tab-header h1 { margin: 0; flex: 1; }

/* Per-page toolbar (Portfolio, etc.) */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 0 6px 0;
}

/* Primary refresh button (Research, Portfolio) */
.btn-refresh {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-refresh:hover:not(:disabled) { background: var(--accent-hover); }
.btn-refresh:disabled { opacity: 0.6; cursor: default; }

/* Small inline refresh buttons used inside column headers */
.btn-intel-refresh {
  padding: 3px 10px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.btn-intel-refresh:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-intel-refresh:disabled { opacity: 0.6; cursor: default; }

/* Intel column header — title + actions side by side */
.intel-col-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* "Last updated" freshness line shown near data */
.data-freshness {
  font-size: 12px;
  margin: 0 0 10px;
}

.refresh-status {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}

.research-meta {
  font-size: 12px;
  margin: 0 0 12px;
}

.research-feedback-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.research-feedback-input {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--font-sans);
  resize: vertical;
  box-sizing: border-box;
  color: var(--text);
  background: var(--bg-page);
}
.research-feedback-input:focus {
  outline: none;
  border-color: var(--accent);
}

.research-markdown-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 32px;
}

.research-markdown {
  max-width: 800px;
  line-height: 1.7;
  color: var(--text);
  font-size: 15px;
}
.research-markdown h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 34px 0 12px;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--accent);
  border-bottom: none;
  color: var(--text);
  letter-spacing: -0.01em;
}
.research-markdown h2:first-child { margin-top: 0; }
.research-markdown h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 20px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.research-markdown p { margin: 0 0 12px; }
.research-markdown ul {
  padding-left: 18px;
  margin: 0 0 12px;
}
.research-markdown ul > li { margin-bottom: 6px; }
/* Ordered lists (e.g. "Top 3 Actionable Implications") as numbered callout cards */
.research-markdown ol {
  padding-left: 0;
  list-style: none;
  counter-reset: research-counter;
  margin: 0 0 14px;
}
.research-markdown ol > li {
  counter-increment: research-counter;
  position: relative;
  padding: 10px 14px 10px 42px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
}
.research-markdown ol > li::before {
  content: counter(research-counter);
  position: absolute;
  left: 14px;
  top: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  line-height: 1;
}
.research-markdown strong { font-weight: 600; }
.research-markdown a {
  color: var(--accent);
  text-decoration: none;
}
.research-markdown a:hover { text-decoration: underline; }
.research-markdown code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-page);
  padding: 2px 4px;
  border-radius: 3px;
}
.research-markdown hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

@media (min-width: 768px) {
  .research-markdown { font-size: 15px; }
}

/* ── Phase 2K — Account settings rows ─────────────────────────────── */
.account-settings-card { padding: 12px 14px; }
.account-settings-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.account-settings-name { font-weight: 500; flex: 1; min-width: 120px; }
.account-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.settings-label-inline { min-width: 50px; font-size: 13px; color: var(--text-muted); }
.settings-select-sm {
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-primary);
}
.account-flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.flag-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.flag-label input[type=checkbox] { cursor: pointer; }
.account-notes-input {
  width: 100%;
  min-height: 48px;
  font-size: 13px;
  font-family: var(--font-sans);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-primary);
  resize: vertical;
  box-sizing: border-box;
}
.badge-muted {
  font-size: 11px;
  font-weight: 400;
  background: var(--bg-page);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Phase 2L — Account type class badges on action plan items ─────── */
.badge-taxable {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
}
.badge-tax-adv {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
}
.badge-goal {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── Phase 2N — Action Plan account picker ──────────────────────────── */
.accept-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.accept-actions {
  display: flex;
  gap: 8px;
}
.btn-accept-confirm {
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.btn-accept-confirm:hover { background: #15803d; }
.account-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* ── Phase 2O — Intelligence tab polish ──────────────────────────────── */
.item-age {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}
.item-age-stale {
  color: var(--sev-amber);
  font-weight: 500;
}
.action-plan-link {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.action-plan-link:hover { text-decoration: underline; }

/* ── Phase 2Q — UC-2 multi-goal ──────────────────────────────────────── */
.goal-badge {
  font-size: 11px;
  font-weight: 500;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 1px 6px;
  border-radius: 4px;
}
.goal-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.goal-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.goal-name-input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text);
}
.btn-goal-delete {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 8px;
  font-size: 16px;
  line-height: 1;
}
.btn-goal-delete:hover { color: var(--sev-red); border-color: var(--sev-red); }
.add-goal-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
/* ── Phase 2R — Accounts sub-page + nickname ─────────────────────────── */
.accounts-page-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.accounts-back-link {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}
.accounts-back-link:hover { color: var(--accent); text-decoration: underline; }

.manage-accounts-link-row {
  margin-top: 4px;
}
.btn-manage-accounts {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  background: transparent;
}
.btn-manage-accounts:hover {
  background: var(--accent);
  color: #fff;
}

.account-kubera-name {
  font-size: 12px;
  color: var(--text-muted);
}
.account-nickname-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.account-nickname-error {
  font-size: 11px;
  color: var(--sev-red);
  min-height: 14px;
}

/* ── Phase 2U — Multi-column desktop layout ──────────────────────────── */

/* Intelligence tab: advisor + intel side-by-side on desktop */
.intel-columns {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.intel-col-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

@media (min-width: 900px) {
  .intel-columns {
    flex-direction: row;
    align-items: flex-start;
  }
  .intel-col-advisor {
    flex: 1 1 0;
    min-width: 0;
  }
  .intel-col-market {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Portfolio tab: 2-column account grid on desktop */
@media (min-width: 900px) {
  .account-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* ── Phase 2U — Accounts settings left-nav + right-pane ─────────────── */

/* Mobile: full-page list → detail navigation */
.accounts-nav-layout { position: relative; }

.accounts-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.accounts-nav-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.1s;
}
.accounts-nav-btn:hover  { border-color: var(--accent); }
.accounts-nav-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.acct-nav-label  { font-weight: 500; }
.acct-nav-inst   { font-size: 11px; color: var(--text-muted); }

/* Mobile pane container: hidden by default, slides in on account select */
.accounts-nav-pane-container {
  display: none;
}
.accounts-nav-pane-container.mobile-visible {
  display: block;
}
.accounts-nav-list.mobile-hidden { display: none; }

.accounts-nav-pane { display: none; }
.accounts-nav-pane.active { display: block; }

.acct-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}
.acct-back-btn:hover { color: var(--accent); }

/* Account-list sections (New / Configured / Hidden) */
.accounts-nav-section { display: flex; flex-direction: column; gap: 4px; }
.accounts-nav-section + .accounts-nav-section { margin-top: 14px; }
.accounts-nav-section--new {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.accounts-nav-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 4px 0 6px;
}
.accounts-nav-section-label--new { color: #b91c1c; }
.accounts-nav-btn--new {
  border-left: 3px solid #ef4444;
}

.accounts-nav-hidden-group {
  margin-top: 8px;
}
.accounts-nav-hidden-summary {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
  list-style: none;
}
.accounts-nav-hidden-summary::-webkit-details-marker { display: none; }
.accounts-nav-btn-hidden { opacity: 0.6; }

@media (min-width: 900px) {
  .accounts-nav-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }

  /* Resizable sidebar via CSS resize — user drags right edge */
  .accounts-nav-list {
    flex-shrink: 0;
    width: 220px;
    min-width: 140px;
    max-width: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 3px solid var(--border);
    padding-right: 8px;
    gap: 2px;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 16px;
    resize: horizontal;  /* browser-native drag handle on right edge */
  }

  .accounts-nav-btn {
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Desktop: pane container always visible; back button hidden */
  .accounts-nav-pane-container {
    display: block !important;
    flex: 1;
    min-width: 0;
    padding-left: 20px;
  }
  .accounts-nav-list.mobile-hidden { display: flex !important; }
  .acct-back-btn { display: none !important; }
}

/* ── Phase 2V — Cost table ──────────────────────────────────────────── */
.cost-section {
  margin-bottom: 28px;
}
.cost-section:last-child {
  margin-bottom: 0;
}
.cost-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.cost-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cost-section-h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}
.btn-cost-reset {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-cost-reset:hover { background: var(--bg-card); color: var(--text); }
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}
.cost-table th,
.cost-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.cost-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cost-table th.num,
.cost-table td.num { text-align: right; }
.cost-total-row td {
  font-weight: 600;
  border-top: 2px solid var(--border);
  border-bottom: none;
}
.cost-empty-row {
  font-style: italic;
  padding: 12px 10px;
}
.cost-since {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Privacy mode ───────────────────────────────────────────────────── */
body.privacy-on .num,
body.privacy-on .account-value,
body.privacy-on .kpi-value,
/* Holdings: share count */
body.privacy-on .holding-qty,
/* Portfolio: account/holding % change badges */
body.privacy-on .account-change-badge,
body.privacy-on .holding-change-badge,
/* Portfolio: KPI change % labels */
body.privacy-on .kpi-change-pct,
body.privacy-on .nw-change-pct,
/* Advisor items: action text, target, funding note */
body.privacy-on .item-action,
body.privacy-on .item-target-desc,
body.privacy-on .item-funding-note,
/* Action plan: action text, target, funding note */
body.privacy-on .action-item-action,
body.privacy-on .ap-target-label,
body.privacy-on .ap-funding-note {
  filter: blur(6px);
  user-select: none;
}

/* Net worth gets a stronger blur — it's large text and still legible at 6px */
body.privacy-on .net-worth .num {
  filter: blur(10px);
}

/* Lock button glows slightly when privacy is active */
#btn-privacy.privacy-active {
  background: rgba(0, 0, 0, 0.07);
}

/* ── Phase 2X — Onboarding wizard ─────────────────────────────────── */
.ob-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 12px var(--pad-page) 0;
  font-size: 14px;
}
.ob-banner-link {
  margin-left: auto;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.onboarding-body {
  background: var(--bg-page);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px var(--pad-page) 48px;
}
.ob-wrap {
  width: 100%;
  max-width: 540px;
}
.ob-header {
  margin-bottom: 24px;
}
.ob-brand {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ob-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

/* Progress dots */
.ob-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}
.ob-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.ob-dot.active {
  background: var(--accent);
  color: #fff;
}
.ob-dot.done {
  background: #16a34a;
  color: #fff;
}
.ob-dot-line {
  flex: 1;
  height: 2px;
  background: var(--border);
}

/* Steps */
.ob-step { }
.ob-step.hidden { display: none; }

.ob-step-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
}
.ob-step-desc {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.ob-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ob-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0 4px;
}
.ob-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.ob-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}
.ob-input {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  width: 100%;
}
.ob-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.ob-textarea {
  resize: vertical;
  min-height: 120px;
}

.ob-validate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.ob-status {
  font-size: 13px;
  color: var(--text-muted);
}
.ob-status.ok  { color: var(--sev-green); }
.ob-status.err { color: var(--sev-red); }
/* P0-6: in-progress validation is neutral, never red */
.ob-status.pending { color: var(--text-muted); }

.ob-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
.ob-btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ob-btn-primary:hover { background: var(--accent-hover); }
.ob-btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.ob-btn-secondary:hover { background: #eff6ff; }

.ob-checklist {
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.ob-skip {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 28px;
}

/* ── Phase H-2 — Prompt editor ────────────────────────────────────── */
.prompt-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--bg-card);
  overflow: hidden;
}
.prompt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}
.prompt-card-label { font-size: 14px; font-weight: 600; }
.btn-prompt-toggle {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}
.btn-prompt-toggle:hover { color: var(--text); }
.prompt-toggle-arrow { display: inline-block; margin-left: 2px; }
.prompt-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-prompt-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.btn-prompt-download:hover { color: var(--text); background: var(--bg-card); }
/* Upload chip — same shape as the download chip, sits next to it.
   The native file input is hidden; the <label> is the visual control. */
.prompt-upload-form { display: inline-flex; margin: 0; }
.btn-prompt-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.btn-prompt-upload:hover { color: var(--text); background: var(--bg-card); }
.prompt-template-view { border-bottom: 1px solid var(--border); }
.prompt-code {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: var(--bg-page);
  max-height: 400px;
  overflow-y: auto;
}

/* Variant picker — Market Intelligence row only. Sits on its own row
   below the card header, left-aligned. Auto-saves on change via HTMX. */
.prompt-variant-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.prompt-variant-label {
  font-size: 12px;
  color: var(--text-muted);
}
.prompt-variant-select {
  font-size: 13px;
  padding: 3px 8px;
}

/* ── Phase 2Y — Activity Logs panel ───────────────────────────────── */
.logs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.btn-load-logs {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-load-logs:hover { background: var(--accent-hover); }

.logs-container {}
.logs-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 0;
}
.logs-count {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.logs-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  padding: 5px 8px;
  text-align: left;
  white-space: nowrap;
}
.logs-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.log-col-time  { width: 56px; }
.log-col-level { width: 62px; }

.log-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.log-date, .log-clock {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.log-event-cell { min-width: 0; }
.log-event {
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-all;
  margin-bottom: 3px;
}
.log-msg {
  font-size: 13px;
  line-height: 1.45;
  max-height: calc(4 * 1.45em);
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

.log-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.log-badge-info    { background: #dbeafe; color: #1e40af; }
.log-badge-warning { background: #fef3c7; color: #92400e; }
.log-badge-error   { background: #fee2e2; color: #991b1b; }
.log-badge-debug   { background: #f3f4f6; color: #6b7280; }

.log-row-error td { background: #fff5f5; }
.log-row-warning td { background: #fffbeb; }

.log-payload {
  margin-top: 4px;
  font-size: 11px;
}
.log-payload summary {
  cursor: pointer;
  color: var(--text-muted);
  user-select: none;
}
.log-payload-json {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  margin: 4px 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.log-payload-error summary { color: var(--sev-red); }

/* === Phase 2Z: Portfolio type filter bar === */
/* Type group tiles — collapsible containers grouping accounts by type */
.type-group-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.type-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--pad-card);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.type-group-header::-webkit-details-marker { display: none; }
.type-group-header::marker { display: none; }
.type-group-card:not([open]) > .type-group-header { border-bottom: none; }
.type-group-arrow {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
  display: inline-block;
}
.type-group-card[open] > summary .type-group-arrow { transform: rotate(90deg); }
.type-group-label-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.type-group-label {
  font-size: 13px;
  font-weight: 600;
}
.type-group-cash {
  font-size: 11px;
}
/* Cash + Dry Powder stats side by side under the type-group label;
   wraps onto a second line on narrow screens. */
.type-group-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 1px;
}
.tg-stat { white-space: nowrap; }
.tg-stat-accent {
  color: var(--accent-on-soft);
  font-weight: 600;
}
.type-group-total {
  font-size: 16px;
  font-weight: 600;
}
.type-group-accounts {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
}

/* === Phase 2Z: Intel mobile section toggle === */
.intel-mobile-toggle {
  display: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
/* Mobile toggle visible whenever columns are stacked (matches the 900px
   breakpoint where `.intel-columns` switches to flex-row). Covers phone
   landscape (up to ~932px on current iPhones). */
@media (max-width: 899px) {
  .intel-mobile-toggle { display: flex; }
  .intel-tab-hidden { display: none !important; }
  .intel-columns { display: block; }
}
.intel-toggle-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.intel-toggle-btn:last-child { border-right: none; }
.intel-toggle-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* === Phase 2Z: Intel recommendation filter bar === */
.intel-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.intel-phase-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.phase-pill {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.phase-pill.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.intel-goal-filter {
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--bg-card);
  color: var(--text-body);
  cursor: pointer;
}

/* (Legacy Action Plan goal-button-bar + .ap-filter-btn rules retired
   2026-05-26 — no templates referenced .ap-goal-btn or .ap-filter-btn
   anymore. Current filter chrome lives below at "Smart Action Plan v2".) */

/* === Accounts bulk-edit view === */
.accounts-view-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.accounts-bulk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) {
  .accounts-bulk-grid { grid-template-columns: 1fr; }
}

.bulk-acct-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bulk-acct-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.bulk-acct-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bulk-acct-name {
  font-size: 14px;
  font-weight: 500;
}

.bulk-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bulk-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bulk-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bulk-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bulk-input {
  width: 100%;
  box-sizing: border-box;
}
.bulk-select {
  width: 100%;
  box-sizing: border-box;
}
.bulk-flags-row {
  flex-wrap: wrap;
}
.bulk-notes {
  height: 52px;
  resize: vertical;
}

/* ── Refresh Schedule section ───────────────────────────────────────────── */
.schedule-config-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.schedule-subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.schedule-subsection-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.schedule-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}
.schedule-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.schedule-slot-label {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 60px;
  cursor: pointer;
}
.schedule-time-input {
  /* Override .settings-input { flex: 1; min-width: 120px } so the time picker
     stays compact and doesn't stretch to fill the row. */
  flex: 0 0 auto;
  width: 130px;
  min-width: 0;
  font-size: 13px;
}
.schedule-time-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.schedule-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.schedule-day:hover {
  border-color: var(--text-muted);
}
.schedule-day.is-checked {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}
.schedule-day-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.schedule-day-input:focus-visible + span {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
  border-radius: 3px;
}
.schedule-select {
  font-size: 13px;
}
.schedule-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Smart Action Plan v2 (Fix 032) ─────────────────────────────────── */

/* Filter bar — left-aligned. Goal-filter select sits at the leading
   edge (Sam's 2026-05-26 spec); time/phase pills follow it on the
   same row. Both children share a min-height so the dropdown chrome
   and pill height visually match. */
.ap-filter-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ap-bucket-pills {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  min-height: 30px;
}
.ap-bucket-pill {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.ap-bucket-pill:last-child { border-right: none; }
.ap-bucket-pill:not(.is-active):hover { background: var(--bg-hover); }

/* Goal filter dropdown — left-aligned, height matched to the bucket
   pills row. */
.ap-goal-filter {
  margin-left: 0;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  min-height: 30px;
  height: 30px;
  line-height: 1;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .ap-goal-filter { width: 100%; }
}

/* Active pill colors per bucket */
.ap-bucket-pill[data-bucket="all"].is-active    { background: var(--accent);  color: #fff; font-weight: 600; }
.ap-bucket-pill[data-bucket="next_7"].is-active   { background: #dc2626; color: #fff; font-weight: 600; }
.ap-bucket-pill[data-bucket="next_30"].is-active  { background: #d97706; color: #fff; font-weight: 600; }
.ap-bucket-pill[data-bucket="next_90"].is-active  { background: #2563eb; color: #fff; font-weight: 600; }
.ap-bucket-pill[data-bucket="next_180"].is-active { background: #7c3aed; color: #fff; font-weight: 600; }
.ap-bucket-pill[data-bucket="ongoing"].is-active  { background: #059669; color: #fff; font-weight: 600; }

/* Completion / expiry banner */
.ap-state-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.ap-banner-complete {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  color: #166534;
}
.ap-banner-expired {
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.4);
  color: #854d0e;
}
.ap-banner-text { flex: 1; font-weight: 500; }
.ap-banner-actions { display: flex; gap: 8px; }
.btn-banner-archive {
  background: #166534;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn-banner-archive:hover { opacity: 0.85; }
.btn-banner-keep {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn-banner-keep:hover { opacity: 0.85; }
.btn-banner-close-incomplete {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}
.btn-banner-close-incomplete:hover { border-color: var(--sev-red); color: var(--sev-red); }

/* Timeframe row */
.ap-timeframe-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ap-bucket-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 7px;
  border-radius: 10px;
}
/* Per-bucket tag colors */
.ap-bucket-tag.ap-bucket-next_7   { background: rgba(220,38,38,0.12);  color: #dc2626; }
.ap-bucket-tag.ap-bucket-next_30  { background: rgba(217,119,6,0.12);  color: #b45309; }
.ap-bucket-tag.ap-bucket-next_90  { background: rgba(37,99,235,0.12);  color: #1d4ed8; }
.ap-bucket-tag.ap-bucket-next_180 { background: rgba(124,58,237,0.12); color: #6d28d9; }
.ap-bucket-tag.ap-bucket-ongoing  { background: rgba(5,150,105,0.12);  color: #047857; }
.ap-timeframe-label {
  font-size: 12px;
  color: var(--text-muted);
}
.ap-schedule-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.ap-badge-amber {
  background: rgba(251,191,36,0.15);
  color: #854d0e;
}
.ap-badge-green {
  background: rgba(34,197,94,0.1);
  color: #166534;
}
.ap-days-remaining {
  font-size: 11px;
  font-weight: 500;
}
.ap-days-normal { color: var(--text-muted); }
.ap-days-urgent { color: var(--sev-amber); font-weight: 600; }
.ap-days-expired { color: var(--sev-red); font-weight: 600; }

/* Progress bar */
.ap-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
}
.ap-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.ap-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ap-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 34px;
  text-align: right;
}
.ap-target-label {
  font-size: 12px;
  margin: 0 0 6px;
}

/* Edit form — timeframe bucket selector */
.edit-bucket-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.edit-field-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.edit-bucket-select {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Time-elapsed progress bar (shown when no target is set) */
.ap-time-bar { background: var(--border); }
.ap-time-label { color: var(--text-muted); font-weight: 500; }
.ap-time-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; opacity: 0.65; }
.ap-bucket-fill-next_7   { background: #dc2626; }
.ap-bucket-fill-next_30  { background: #d97706; }
.ap-bucket-fill-next_90  { background: #2563eb; }
.ap-bucket-fill-next_180 { background: #7c3aed; }
.ap-bucket-fill-ongoing  { background: #059669; }

/* Intelligence tab timeframe + target meta row */
.item-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 6px;
  flex-wrap: wrap;
}
.item-timeframe-label {
  font-size: 12px;
  color: var(--text-muted);
}
.item-target-desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════
 * Fix 091.5 — Portfolio Allocations sub-panel (Phase B, Part 2).
 * Side-by-side Holdings / Allocations on desktop; mobile toggle below 900px.
 * Drift bars, ticker chips, and sparklines for per-pillar allocation tracking.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Drift color palette ──────────────────────────────────────────────── */
:root {
  --drift-ok-fill: #2ecc71;
  --drift-ok-bg: rgba(46, 204, 113, 0.12);
  --drift-amber-fill: #f0a020;
  --drift-amber-bg: rgba(240, 160, 32, 0.12);
  --drift-red-fill: #e0563b;
  --drift-red-bg: rgba(224, 86, 59, 0.12);
  --drift-no-data-fill: var(--text-muted);
  --drift-no-data-bg: rgba(127, 127, 127, 0.10);
  /* "Near band" — within the 2pp cushion either side. Logical state stays
     'ok' so r1_advisor's quiet-drop filter doesn't fire; the UI just tells
     the user honestly that this pillar isn't literally inside the band. */
  --drift-near-fill: #4a6fa5;
  --drift-near-bg: rgba(74, 111, 165, 0.12);
}

/* ── Side-by-side layout (Holdings + Allocations) ─────────────────────── */
.portfolio-columns {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-top: 12px;
}

.portfolio-col {
  min-width: 0;
}

.portfolio-col-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.portfolio-col-title {
  font-size: 11px;
  font-weight: 600;
  margin: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (min-width: 900px) {
  .portfolio-columns {
    flex-direction: row;
    align-items: flex-start;
  }
  .portfolio-col-holdings,
  .portfolio-col-allocations {
    flex: 1 1 0;
    min-width: 0;
  }
  /* When inside the side-by-side parent, the inner 2-col account grid
     collapses to single-column so each column doesn't compete. */
  .portfolio-col-holdings .account-list {
    display: block;
  }
}

.portfolio-mobile-toggle {
  display: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 12px 0 8px;
}
@media (max-width: 899px) {
  .portfolio-mobile-toggle { display: flex; }
  .portfolio-tab-hidden { display: none !important; }
}
.portfolio-toggle-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.portfolio-toggle-btn:last-child { border-right: none; }
.portfolio-toggle-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* ── Allocations empty state ──────────────────────────────────────────── */
.alloc-empty-state {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.alloc-empty-headline { font-weight: 600; margin: 0 0 4px; }
.alloc-empty-help { margin: 0; font-size: 13px; }

/* ── Goal-grouped pillar list ─────────────────────────────────────────── */
.alloc-goal-group {
  margin-bottom: 16px;
}
/* Goal filter pills — standard rounded filter pill, neutral (un-shaded)
   active state (no category/hue tint, unlike .ap-pillar-pill). */
.alloc-goal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.alloc-goal-pill {
  padding: 4px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-muted);
  white-space: nowrap;
}
.alloc-goal-pill:hover:not(.is-active) { background: var(--surface-sunken); color: var(--ink); }
.alloc-goal-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-card);
  font-weight: 500;
}

/* ── Single pillar card ──────────────────────────────────────────────── */
.alloc-pillar {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: 8px;
  overflow: hidden;
}
.alloc-pillar[open] { background: var(--bg-card); }
.alloc-pillar-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alloc-pillar-summary::-webkit-details-marker { display: none; }

/* Portfolio pillar tile (2026-05-25): stack the readout so the target
   band drops to the row below current %. Scoped to the Portfolio
   "full" variant so the Status page's compact rows are untouched. */
.driftbar-wrapper--full .driftbar-readout {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.alloc-pillar-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alloc-arrow {
  display: inline-block;
  transition: transform 0.12s ease-out;
  color: var(--text-muted);
  font-size: 11px;
}
.alloc-pillar[open] .alloc-arrow { transform: rotate(90deg); }
.alloc-pillar-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}

.alloc-drift-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.drift-pill-ok          { background: var(--drift-ok-bg);      color: var(--drift-ok-fill); }
.drift-pill-near        { background: var(--drift-near-bg);    color: var(--drift-near-fill); }
.drift-pill-under_amber,
.drift-pill-over_amber  { background: var(--drift-amber-bg);   color: var(--drift-amber-fill); }
.drift-pill-under_red,
.drift-pill-over_red    { background: var(--drift-red-bg);     color: var(--drift-red-fill); }
.drift-pill-no_data     { background: var(--drift-no-data-bg); color: var(--drift-no-data-fill); }

/* ── Drift bar ─────────────────────────────────────────────────────────
 * The bar maps 0–100% of portfolio along its X axis.
 * - .alloc-band  = lighter shaded rectangle covering [target_min, target_max]
 * - .alloc-current = solid bar from 0 to current_pct (drift-state colored)
 * - .alloc-current-marker = thin vertical line at exact current_pct
 */
.alloc-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alloc-bar {
  flex: 1;
  position: relative;
  height: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.alloc-band {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(120, 120, 120, 0.18);
  border-left: 1px dashed rgba(120, 120, 120, 0.45);
  border-right: 1px dashed rgba(120, 120, 120, 0.45);
}
.alloc-current {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  opacity: 0.65;
}
.drift-fill-ok          { background: var(--drift-ok-fill); }
.drift-fill-under_amber,
.drift-fill-over_amber  { background: var(--drift-amber-fill); }
.drift-fill-under_red,
.drift-fill-over_red    { background: var(--drift-red-fill); }
.drift-fill-no_data     { background: var(--drift-no-data-fill); }

.alloc-current-marker {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  margin-left: -1px;
}
.drift-marker-ok          { background: var(--drift-ok-fill); }
.drift-marker-under_amber,
.drift-marker-over_amber  { background: var(--drift-amber-fill); }
.drift-marker-under_red,
.drift-marker-over_red    { background: var(--drift-red-fill); }

.alloc-bar-numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 72px;
}
.alloc-current-pct {
  font-weight: 600;
  font-size: 14px;
}
.alloc-target-pct {
  font-size: 10px;
}

.alloc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.alloc-usd {
  font-weight: 500;
  color: var(--text-muted);
}

.alloc-sparkline {
  width: 80px;
  height: 16px;
}
.spark-band  { fill: rgba(120, 120, 120, 0.20); }
.spark-path  { stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

/* ── Drill-down body ──────────────────────────────────────────────────── */
.alloc-pillar-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.alloc-pillar-desc {
  font-size: 12px;
  margin: 0 0 8px;
}
.alloc-ticker-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alloc-ticker-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 6px;
}
.alloc-ticker-row.is-secondary { opacity: 0.55; }
/* Name flexes; value + pct are fixed right-aligned columns so every row's
   numbers line up — ticker rows and fund rows alike. */
.alloc-ticker-name {
  font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0;
}
.alloc-primary-star { color: var(--accent); font-size: 12px; }
.alloc-gap-flag { color: var(--text-muted); font-size: 12px; }
.alloc-ticker-value {
  font-size: 13px; font-weight: 500;
  flex: 0 0 auto; min-width: 76px; text-align: right;
}
.alloc-ticker-pct {
  font-size: 11px;
  flex: 0 0 auto; min-width: 96px; text-align: right;
}
/* Mis-tickered fund mapped to a pillar — plain italic name (not a ticker badge),
   allowed to wrap/truncate so long fund names don't overflow the row. */
.alloc-fund-name {
  font-style: italic; color: var(--text-muted); font-size: 13px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alloc-fund-name.js-fund-link { cursor: pointer; }
.alloc-fund-name.js-fund-link:hover { text-decoration: underline; color: var(--text); }
/* Fund drawer (mis-tickered funds) — alias editor + 3-col pillar rows. */
.fund-alias-form { display: flex; gap: 8px; }
.fund-alias-input {
  flex: 1 1 auto; min-width: 0; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-card); color: var(--text); font-size: 14px;
}
.fund-alias-hint { font-size: 12px; margin: 6px 0 0; }
.fund-pillar-row-top { grid-template-columns: 1.5fr 0.6fr 0.9fr; }
/* Goals filter on the ticker detail — sits above the value tile. In the drawer
   it's between the sticky head and the content; pad it to align with content. */
.drawer-panel > .hd-goal-filter-bar { padding: 12px 16px 0; margin: 0; }
.hd-goal-filter-bar { margin-bottom: 4px; }
.alloc-no-tickers { font-size: 12px; margin: 0 0 10px; }

.alloc-pillar-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
}
.alloc-edit-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.alloc-edit-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
 * Fix 093 — Phase C UI: pillar badges, filter chip, drift banner.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Pillar badge on rec cards ────────────────────────────────────────── */
.pillar-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: rgba(120, 80, 200, 0.12);
  color: #7850c8;
  border: 1px solid rgba(120, 80, 200, 0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.trigger-fired-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  background: rgba(224, 86, 59, 0.12);
  color: var(--drift-red-fill);
  border: 1px solid rgba(224, 86, 59, 0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Pillar filter chip strip ─────────────────────────────────────────── */
.ap-pillar-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.ap-pillar-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.ap-pillar-pill {
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  white-space: nowrap;
}
.ap-pillar-pill:hover { background: var(--bg); color: var(--text); }
.ap-pillar-pill.is-active {
  background: rgba(120, 80, 200, 0.15);
  color: #7850c8;
  border-color: rgba(120, 80, 200, 0.4);
  font-weight: 500;
}

/* ── Action Plan drift banner ─────────────────────────────────────────── */
.ap-drift-banner {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.ap-drift-banner-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ap-drift-banner-summary::-webkit-details-marker { display: none; }
.ap-drift-arrow {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.12s ease-out;
}
.ap-drift-banner:not([open]) .ap-drift-arrow { transform: rotate(-90deg); }
.ap-drift-title {
  flex: 1;
  font-size: 13px;
}
.ap-drift-counts {
  display: flex;
  gap: 6px;
  font-size: 11px;
}
.ap-drift-counts .drift-pill-under_red,
.ap-drift-counts .drift-pill-under_amber {
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ap-drift-banner-body {
  border-top: 1px solid var(--border);
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-drift-row {
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--border);
}
.ap-drift-row.drift-under_amber,
.ap-drift-row.drift-over_amber { border-left-color: var(--drift-amber-fill); }
.ap-drift-row.drift-under_red,
.ap-drift-row.drift-over_red   { border-left-color: var(--drift-red-fill); }

.ap-drift-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.ap-drift-row-name { font-size: 13px; }
.ap-drift-row-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ap-drift-row-target {
  font-size: 10px;
  font-weight: 400;
}
.ap-drift-row-detail {
  font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════════
 * Fix 094 — Pillar diff preview panel (Phase D).
 * ════════════════════════════════════════════════════════════════════════ */

.pillars-diff-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 14px;
  margin: 12px 0;
}
.pillars-diff-header { margin-bottom: 10px; }
.pillars-diff-header h3 { margin: 0 0 4px; font-size: 14px; }
.pillars-diff-subhead {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pillars-diff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  margin-bottom: 4px;
  border-left: 3px solid var(--border);
}
.pillars-diff-add    { border-left-color: var(--drift-ok-fill); }
.pillars-diff-remove { border-left-color: var(--drift-red-fill); }
.pillars-diff-update { border-left-color: var(--drift-amber-fill); }
.pillars-diff-row-label {
  flex: 1;
  font-size: 13px;
}
.pillars-diff-apply-form { margin: 0; }
.btn-diff-apply {
  padding: 4px 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.btn-diff-apply:hover { filter: brightness(1.1); }
.btn-diff-apply-destructive { background: var(--drift-red-fill); }
.pillars-diff-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Fix 095 — Plan-level pillar-review badge on rec cards. */
.plan-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: rgba(80, 140, 200, 0.12);
  color: #4a8dc8;
  border: 1px solid rgba(80, 140, 200, 0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Fix 131 — Holdings sub-view toggle + "By ticker" flat list. */
.portfolio-col-holdings .portfolio-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.holdings-grouping-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-card);
}
.holdings-grouping-btn {
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.holdings-grouping-btn:hover:not(.is-active) {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}
.holdings-grouping-btn.is-active {
  background: var(--accent, #4a90e2);
  color: #fff;
}

/* By-ticker view reuses the by-account row classes for shape consistency.
   Just need to make the whole row clickable as a link without losing
   the inherited typography. */
.holdings-by-ticker-list { padding: 0; }
.holding-by-ticker-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  transition: background 120ms ease;
}
.holding-by-ticker-row-link:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

/* ── Holdings activity dots + goal/activity filters (Option D, 2026-06-09).
   Lettered 15px circular dots inline after the ticker badge:
   R = open recommendation (emerald), A = action-plan item (amber),
   i = market intel (indigo). Two segmented controls above the holdings
   card filter by goal (server-pre-grouped blocks) and by activity kind
   (client-side, via data-act). No legend by design. ─────────────────── */
.holdings-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 10px;
  max-width: 100%;
}
.seg {
  display: inline-flex;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  max-width: 100%;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  line-height: 1;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover:not(.is-active) {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}
.seg-btn.is-active {
  background: var(--accent-soft-bg);
  color: var(--accent-on-soft);
  font-weight: 600;
}
.act-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  flex: none;
  align-items: center;
}
.act-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  flex: none;
}
/* Account-header dots: smaller + quieter so they don't compete with names. */
.account-name .act-dot { width: 13px; height: 13px; font-size: 7.5px; opacity: .92; }
.act-dot--rec    { background: var(--accent-default); }
.act-dot--action { background: #d97706; }
.act-dot--intel  { background: #6366f1; }

/* Keep ticker badge + dots on one line inside the flex-column ticker cell. */
.holding-ticker-line {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* Rows / account cards / type groups hidden by the activity filter. */
.act-filtered { display: none !important; }
@media (max-width: 480px) {
  .seg-btn { padding: 0 9px; font-size: 12px; }
}
/* Approved Holdings v2 mobile (2026-06-10): icons → price → value columns;
   change badge under the value; sub line truncates — nothing can bunch. */
@media (max-width: 540px) {
  .holding-header { display: none; }
  .holding-row-top {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 1px;
  }
  .holding-col-ticker { grid-column: 1; grid-row: 1; }
  .holding-col-price { grid-column: 2; grid-row: 1; align-self: center; color: var(--text-muted); font-size: 12.5px; }
  .holding-col-value { grid-column: 3; grid-row: 1; font-weight: 600; font-size: 14px; align-self: center; }
  .holding-col-change { grid-column: 3; grid-row: 2; }
  .holding-col-change.is-empty { display: none; }
  .type-group-stats { flex-basis: 100%; }
}

/* Fix 130 — Per-ticker holding detail page (/holdings/<ticker>). */
.holding-ticker-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.holding-ticker-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}


.holding-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.holding-detail-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.holding-detail-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.holding-detail-ticker {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.holding-detail-name {
  font-size: 14px;
}
.holding-detail-external {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent, #4a90e2);
  text-decoration: none;
  white-space: nowrap;
}
.holding-detail-external:hover { text-decoration: underline; }
.holding-detail-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.holding-detail-summary-cell { font-size: 13px; }
.holding-detail-summary-cell .text-muted {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.holding-detail-summary-value { font-size: 18px; font-weight: 700; }
.holding-detail-return-pct { font-size: 11px; margin-left: 4px; }
.holding-detail-note {
  font-size: 11px;
  margin: 10px 0 0;
  font-style: italic;
}
@media (max-width: 720px) {
  .holding-detail-summary { grid-template-columns: repeat(2, 1fr); }
  /* Total return is the 5th cell; let it span both columns on mobile
     so the pair of pos/neg pills has breathing room. */
  .holding-detail-summary > .holding-detail-summary-cell:nth-child(5) {
    grid-column: 1 / -1;
  }
}

.holding-detail-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.holding-detail-section-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.holding-accounts-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.holding-accounts-header,
.holding-account-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.9fr 0.9fr 1.1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
}
.holding-accounts-header {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
}
.holding-account-row + .holding-account-row {
  border-top: 1px dashed var(--border);
}
.holding-account-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.holding-account-name-line {
  font-weight: 600;
  word-break: break-word;
}
.holding-account-inst {
  font-size: 11px;
  font-weight: 400;
}
.holding-account-cell { display: flex; flex-direction: column; gap: 2px; }
.holding-account-cell-label {
  /* hidden on desktop (column header carries the label); visible on mobile */
  display: none;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .holding-accounts-header { display: none; }
  .holding-accounts-table .holding-account-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 12px 0;
  }
  .holding-account-name { grid-column: 1 / span 2; }
  .holding-account-cell-label { display: block; }
}

/* Ticker detail rendered inside the slide-over drawer (~440px on desktop):
   force the compact stacked layout regardless of viewport so the wide tables
   don't overflow the panel. Mirrors the max-width:720px rules above. */
.holding-detail-in-drawer { padding: 14px 16px 24px; }
/* In the drawer only the .drawer-head (ticker · name · Yahoo link) stays fixed;
   the aggregate-holdings tile scrolls with the rest (it's sticky on the full
   page). Without this it would pin over the drawer head. */
.holding-detail-in-drawer .holding-detail-header { position: static; z-index: auto; }
.holding-detail-in-drawer .holding-detail-summary { grid-template-columns: repeat(2, 1fr); }
.holding-detail-in-drawer .holding-detail-summary > .holding-detail-summary-cell:nth-child(5) {
  grid-column: 1 / -1;
}
.holding-detail-in-drawer .holding-accounts-header { display: none; }
.holding-detail-in-drawer .holding-account-row {
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 12px 0;
}
.holding-detail-in-drawer .holding-account-name { grid-column: 1 / span 2; }
.holding-detail-in-drawer .holding-account-cell-label { display: block; }

/* Pill-shaped return badges — one per number, side by side. */
.return-pill {
  display: inline-flex;
  align-items: baseline;
  padding: 2px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.return-pill.pos {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
.return-pill.neg {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}
.return-pill-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
}

.holding-pillar-group + .holding-pillar-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.holding-pillar-group-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.holding-pillar-row { padding: 6px 0; }
.holding-pillar-row + .holding-pillar-row {
  border-top: 1px dashed var(--border);
}
.holding-pillar-row-top {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 0.7fr 0.9fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.holding-pillar-name { font-weight: 600; }
.holding-pillar-band { font-size: 11px; }
.holding-pillar-weight {
  font-weight: 700;
  color: var(--accent, #4a90e2);
  text-align: right;
}
.holding-pillar-desc { font-size: 12px; margin: 4px 0 0; }
.holding-pillar-actions { margin-top: 10px; }
.btn-holding-edit-weights {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--accent, #4a90e2);
  color: var(--accent, #4a90e2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-holding-edit-weights:hover {
  background: color-mix(in srgb, var(--accent, #4a90e2) 12%, transparent);
}
.btn-holding-edit-weights.is-active {
  background: var(--accent, #4a90e2);
  color: #fff;
}

.holding-detail-collapse {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 16px;
}
.holding-detail-summary-row {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 700;
  font-size: 14px;
  list-style: none;
  user-select: none;
}
.holding-detail-summary-row::-webkit-details-marker { display: none; }
.holding-detail-summary-row::before {
  content: "▸";
  font-size: 10px;
  margin-right: 6px;
  display: inline-block;
  transition: transform 120ms ease;
}
.holding-detail-collapse[open] > .holding-detail-summary-row::before {
  transform: rotate(90deg);
}
.holding-detail-collapse[open] {
  padding-bottom: 14px;
}

.holding-intel-list,
.holding-rec-list,
.holding-action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.holding-intel-item,
.holding-rec-item,
.holding-action-item {
  border-top: 1px dashed var(--border);
  padding: 8px 0;
}
.holding-intel-headline,
.holding-rec-headline,
.holding-action-headline {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.holding-intel-headline::-webkit-details-marker,
.holding-rec-headline::-webkit-details-marker,
.holding-action-headline::-webkit-details-marker { display: none; }
.holding-intel-headline::before,
.holding-rec-headline::before,
.holding-action-headline::before {
  content: "▸";
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 120ms ease;
}
.holding-intel-item[open] > .holding-intel-headline::before,
.holding-rec-item[open] > .holding-rec-headline::before,
.holding-action-item[open] > .holding-action-headline::before {
  transform: rotate(90deg);
}
.holding-intel-why,
.holding-rec-reasoning,
.holding-action-reasoning {
  font-size: 13px;
  margin: 6px 0 4px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  white-space: pre-wrap;
}
.in-progress-badge {
  background: color-mix(in srgb, var(--accent, #4a90e2) 16%, transparent);
  color: var(--accent, #4a90e2);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

/* Fix 127 — Untagged holdings banner + classification preview UI. */
.pillars-untagged-banner {
  border: 1px solid color-mix(in srgb, var(--sev-amber, #d97706) 30%, transparent);
  background: color-mix(in srgb, var(--sev-amber, #d97706) 6%, transparent);
  border-radius: 8px;
  padding: 10px 14px;
}
.pillars-untagged-summary {
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  user-select: none;
}
.pillars-untagged-summary::-webkit-details-marker,
.pillars-untagged-summary::marker { display: none; content: ''; }
.pillars-untagged-help { font-size: 12px; margin: 10px 0; }
.pillars-untagged-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pillars-classify-spinner {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.pillars-classify-spinner.htmx-indicator { display: none; }
.pillars-classify-spinner.htmx-request,
.htmx-request .pillars-classify-spinner { display: inline; }
.pillars-untagged-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pillars-untagged-row {
  display: grid;
  grid-template-columns: 80px 60px 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
/* Fund rows carry extra controls (Suggest / Split / Add) — flow them inline
   and content-sized instead of stretching across the ticker grid's 1fr column. */
.pillars-untagged-row--fund {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pillars-untagged-row--fund .pillars-untagged-ticker { flex: 1 1 180px; }
.pillars-untagged-row--fund .btn-refresh,
.pillars-untagged-row--fund .pillars-untagged-assign { flex: 0 0 auto; }
.pillars-untagged-ticker a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.pillars-untagged-ticker a:hover { text-decoration: underline; }
.pillars-untagged-mv {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.pillars-untagged-assign select,
.pillars-classify-manual select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 12px;
  width: 100%;
}
.pillars-classify-error {
  padding: 10px 14px;
  border: 1px solid var(--sev-amber, #d97706);
  background: color-mix(in srgb, var(--sev-amber, #d97706) 10%, transparent);
  border-radius: 6px;
  font-size: 13px;
  margin: 10px 0;
}
.pillars-classify-results { margin: 10px 0; }
.pillars-classify-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillars-classify-row {
  display: grid;
  grid-template-columns: 70px 20px 1fr auto;
  grid-template-areas:
    "ticker arrow pillar action"
    "reason reason reason reason";
  gap: 6px 8px;
  align-items: center;
  font-size: 13px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pillars-classify-ticker { grid-area: ticker; font-weight: 600; }
.pillars-classify-arrow { grid-area: arrow; color: var(--text-muted); }
.pillars-classify-pillar,
.pillars-classify-no-match { grid-area: pillar; }
.pillars-classify-apply,
.pillars-classify-manual { grid-area: action; }
.pillars-classify-reasoning {
  grid-area: reason;
  font-size: 12px;
  margin-top: 4px;
}
.btn-pillars-classify-apply {
  padding: 4px 12px;
  background: var(--accent, #4a90e2);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

/* Fix 125 — Per-ticker weight editor (the "split" modal) + visual
   treatment of split-ticker chips. Editor renders into
   #pillars-weight-editor-slot via HTMX swap; ✎ button on each chip
   triggers the fetch. Live JS total (in pillars_weight_editor.html)
   enables/disables the Save button when sum = 100% or 0%. */
.pillar-ticker-edit-weight {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  margin: 0;
  line-height: 1;
}
.pillar-ticker-edit-weight:hover { color: var(--accent, #4a90e2); }
.pillar-ticker-split { border: 1px solid color-mix(in srgb, var(--accent, #4a90e2) 35%, transparent); }
.pillar-ticker-weight {
  font-weight: 700;
  font-size: 10px;
  margin-left: 3px;
  color: var(--accent, #4a90e2);
}
.pillar-weight-editor {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  max-width: 480px;
}
.pillar-weight-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 14px;
}
.pillar-weight-editor-hint { font-size: 12px; margin: 0 0 12px 0; }
.pillar-weight-editor-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar-weight-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.pillar-weight-editor-row {
  display: grid;
  grid-template-columns: 1fr 80px auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}
.pillar-weight-editor-name { color: var(--text); }
.pillar-weight-editor-input {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pillar-weight-editor-pct {
  font-size: 12px;
  width: 14px;
  text-align: left;
}
.pillar-weight-editor-total {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.pillar-weight-editor-total-pct {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.pillar-weight-editor-total-state { font-size: 12px; }
.pillar-weight-editor-save {
  padding: 8px 16px;
  background: var(--accent, #4a90e2);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
}
.pillar-weight-editor-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Per-pillar-card edit popover (✎ icon on each pillar card opens
   this absolute-positioned form). Sibling `+ Add Pillar` button +
   popover were retired 2026-05-25 in favor of a plain
   `<button class="btn-refresh">` + a JS-toggled `.settings-card`
   panel; their CSS was dead and has been removed. */
.pillar-edit-toggle {
  position: relative;
  display: inline-block;
}
.btn-pillar-edit {
  display: inline-block;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  list-style: none;
  user-select: none;
}
.btn-pillar-edit::-webkit-details-marker,
.btn-pillar-edit::marker { display: none; content: ''; }
.btn-pillar-edit:hover { color: var(--accent, #4a90e2); }
.pillar-edit-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  width: 280px;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar-edit-popover input,
.pillar-edit-popover textarea {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.pillar-edit-popover textarea {
  min-height: 50px;
  resize: vertical;
}
/* Inline editable fields in the expanded tile (Edit mode on the Thesis page —
   no pencil popover; the fields are already editable). */
.pillar-edit-inline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.pillar-edit-inline input,
.pillar-edit-inline textarea,
.pillar-edit-inline select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.pillar-edit-inline textarea { min-height: 50px; resize: vertical; }
.pillar-edit-actions { display: flex; gap: 8px; align-items: center; }
.pillar-edit-actions .btn-pillar-delete {
  margin-left: auto;
  font-size: 13px;
  padding: 6px 10px;
}
.pillar-edit-band-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pillar-edit-band-row label,
.pillar-edit-label {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pillar-edit-popover button[type="submit"] {
  padding: 6px 14px;
  background: var(--accent, #4a90e2);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
}
.pillar-edit-close-btn {
  /* Hidden on desktop (the anchored popover toggles via the ✎ summary);
     shown on mobile where the popover is a centered modal. */
  display: none;
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}
.pillar-edit-close-btn:hover { color: var(--text); background: var(--border); }

@media (max-width: 899px) {
  .pillar-edit-popover {
    /* Center as a modal on phones/tablets — the anchored dropdown (right:0,
       width:280px) ran off the left/bottom edge of the card grid. */
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin-top: 0;
    width: min(92vw, 380px);
    max-height: 85vh;
    overflow-y: auto;
    padding-top: 30px;
    z-index: 100;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  }
  .pillar-edit-close-btn { display: block; }
  /* Backdrop while the ✎ details is open (native CSS — no JS needed). */
  .pillar-edit-toggle[open]::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 90;
    pointer-events: none;
  }
}

/* ─────────────────────── Advisor → Status ─────────────────────── */
/* IA reorg + Triggers Slice 1-3 (May 2026): tile-style chrome for
   the Status sub-page. Mirrors the .settings-card pattern. */

.advisor-section-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}

/* Advisor Status goal-filter chip-row retired 2026-05-26 — the
   Status page now uses the standard `.ap-goal-filter` dropdown
   (same component as /advisor/recommendations + /advisor/action-plan).
   The dead chip rules (.advisor-goal-filter-bar, .advisor-goal-pill*)
   were removed in the same change. */

/* Tile grid + cards. <details> elements so each tile collapses.
   One tile per row on mobile + desktop. */
/* Status health-summary band (redesign) — Triggers / Drift. */
.advisor-health { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 18px; }
.ahealth-tile { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 15px; }
.ahealth-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.ahealth-val { font-size: 18px; font-weight: var(--weight-semibold); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.ahealth-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.ahealth-dot.g { background: #16a34a; } .ahealth-dot.a { background: #d97706; } .ahealth-dot.r { background: #dc2626; }
@media (max-width: 560px) { .advisor-health { gap: 8px; } .ahealth-tile { padding: 10px 11px; } .ahealth-val { font-size: 15px; } }

/* ── Advisor / Intel page header (redesign 2026-05-28) ──────────────────
   Shared chrome across Status / Recommendations / Action Plan / Market
   Intel: big title + count subtitle on the left, action (Refresh) on
   the right. Top margin matches `.main { padding: var(--pad-page) }`
   so Advisor sub-pages sit at the same vertical position as Goals /
   Portfolio / etc. (the Advisor shell's `.settings-content-area` has
   no top padding on desktop, so the breathing-room above the header
   comes from this margin). */
.advisor-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: var(--pad-page) 0 18px;
}
.advisor-page-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; }
.advisor-page-sub { margin: 3px 0 0; font-size: 13px; }
.advisor-page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Driver / status / urgency group sections. The header reuses
   .ap-phase-title (uppercase muted). A small count sits after the label. */
.rec-group, .intel-group, .ap-group { margin: 0 0 20px; }
.rec-group-title, .intel-group-title { margin-top: 0; }
.rec-group-count {
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 6px;
  letter-spacing: 0;
}

/* Intel card: pillar badge pushed to the right edge of the header. */
.intel-header-spacer { flex: 1 1 auto; }
.intel-pillar-badge { flex: 0 0 auto; }

/* Archive footer — calm full-width card instead of a thin rule. */
.intel-archive-card {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-card, 12px);
  background: var(--surface-card, var(--bg-card));
  padding: 14px 16px;
}
.intel-archive-card > .intel-archive-summary {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.intel-archive-caret { font-size: 11px; transition: transform 0.15s ease; }
.intel-archive-card[open] .intel-archive-caret { transform: rotate(180deg); }

.advisor-status-tiles {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.advisor-status-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;  /* clip the summary background within border-radius */
}
/* Tame the default <summary> chrome so our header looks clean */
.advisor-status-tile > summary { list-style: none; cursor: pointer; }
.advisor-status-tile > summary::-webkit-details-marker { display: none; }

.advisor-status-tile-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}
.advisor-status-tile:not([open]) .advisor-status-tile-header {
  border-bottom: none;
}
.advisor-status-tile-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
}
.advisor-tile-arrow {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.advisor-status-tile:not([open]) .advisor-tile-arrow {
  transform: rotate(-90deg);
}
.advisor-tile-count {
  font-size: 13px;
  margin-left: 2px;
}
.advisor-tile-state-breakdown {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.advisor-tile-state-breakdown > span {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.advisor-status-tile-body {
  padding: 14px 16px;
}
.advisor-tile-scope {
  font-size: 12px;
  margin-left: auto;
  padding: 2px 8px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.advisor-tile-empty .advisor-status-tile-header {
  background: transparent;
  border-bottom-style: dashed;
}
.advisor-tile-summary {
  margin: 0 0 10px;
  font-size: 13px;
}
.advisor-tile-filter-empty {
  margin: 8px 0 0;
  font-style: italic;
}

/* Pillar drift rows inlined in the drift tile (vs the old ap-drift-
   banner partial). Match the trigger-firing-card severity tinting. */
.advisor-drift-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.advisor-drift-row {
  padding: 10px 12px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sev-amber);
  border-radius: 6px;
}
.advisor-drift-row.drift-over_red,
.advisor-drift-row.drift-under_red { border-left-color: var(--sev-red); }
.advisor-drift-row-main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.advisor-drift-row-name { font-size: 14px; }
.advisor-drift-row-pill {
  font-size: 13px;
  font-weight: 500;
}
.advisor-drift-row-target {
  font-size: 12px;
  font-weight: 400;
  margin-left: 4px;
}
.advisor-drift-row-detail { font-size: 12px; }
.advisor-drift-row-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-drift-action {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.btn-drift-edit:hover  { color: var(--accent); border-color: var(--accent); }
.btn-drift-view:hover  { color: var(--text-strong, #111); border-color: var(--border-strong); }

/* Hide rows the goal filter excludes */
.is-goal-hidden { display: none !important; }

/* ─────────────────── Trigger firing cards ─────────────────── */
/* Inner-card style matched to the rest of the app's interactive
   surfaces. Each card stacks: header (icon + label) → meta (goal +
   when) → evidence prose → action button row. */

.trigger-firings-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trigger-firing-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sev-amber);
  border-radius: 6px;
  padding: 12px 14px;
}
.trigger-firing-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.trigger-firing-icon { font-size: 16px; }
.trigger-firing-label {
  font-weight: 600;
  font-size: 14px;
}
.trigger-firing-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 0 0 8px;
}
.trigger-firing-evidence {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.4;
}
.trigger-firing-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trigger-firing-action-form { margin: 0; }

/* Action buttons — match the rec-card .btn-* pattern */
.btn-trigger-act,
.btn-trigger-update-policy,
.btn-trigger-snooze,
.btn-trigger-dismiss {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  font-size: 13px;
  cursor: pointer;
  background: var(--bg-card);
  text-decoration: none;
}
.btn-trigger-act {
  color: var(--sev-green);
  border-color: var(--sev-green);
  font-weight: 600;
}
.btn-trigger-update-policy { color: var(--accent); border-color: var(--accent); }
.btn-trigger-snooze        { color: var(--text-muted); }
.btn-trigger-dismiss       { color: var(--sev-red); border-color: var(--sev-red); }

/* ─────────────────── Slice 4 action consolidation ─────────────────── */
/* Chevron menus replace the old multi-button rows on rec cards and
   action-plan cards. Pattern: <details> with <summary> styled as the
   trigger button; <div> inside positioned absolutely as the menu. */

/* Proposed rec card: reasoning collapsible (Discuss + Edit moved
   out to the actions row as real buttons; the legacy in-expand
   .rec-discuss-link / .rec-edit-link / .item-reasoning-actions
   classes are no longer used). */
.item-reasoning-details > summary {
  list-style: none;
  cursor: pointer;
  margin: 6px 0 4px;
  font-size: 12px;
  padding: 4px 0;
}
.item-reasoning-details > summary::-webkit-details-marker { display: none; }
.item-reasoning-toggle::before { content: '▸ '; color: var(--text-muted); font-size: 10px; }
.item-reasoning-details[open] .item-reasoning-toggle::before { content: '▾ '; }

/* Accept ▾ chevron menu (mirrors Dismiss ▾ pattern). Single menu
   with Accept / Edit & Accept; Edit & Accept opens the existing
   edit-adopt-form. */
.rec-accept-toggle {
  position: relative;
  display: inline-block;
}
.rec-accept-toggle > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.rec-accept-toggle > summary::-webkit-details-marker,
.rec-accept-toggle > summary::marker { display: none; content: ''; }
.rec-accept-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.rec-accept-option {
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  color: inherit;
}
.rec-accept-option:hover {
  background: var(--bg-page);
  color: var(--sev-green);
}

/* Discuss — on the right side of the actions row, visually
   separated from Accept/Dismiss with margin-left:auto. Subtle
   styling (low-frequency action). */
.btn-discuss {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.btn-discuss:hover {
  color: var(--sev-amber);
  border-color: var(--sev-amber);
}

/* Dismiss ▾ chevron menu on rec cards */
.rec-dismiss-toggle {
  position: relative;
  display: inline-block;
}
.btn-dismiss {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--sev-red);
  color: var(--sev-red);
  background: var(--bg-card);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.btn-dismiss::-webkit-details-marker,
.btn-dismiss::marker { display: none; content: ''; }
.btn-dismiss:hover { background: #fef2f2; }
.rec-dismiss-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.rec-dismiss-option {
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-muted);
}
.rec-dismiss-option:hover {
  background: var(--bg-page);
  color: inherit;
}
.rec-dismiss-with-reason {
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 10px;
  font-style: italic;
}

/* Action plan item: Status ▾ chevron + Edit + state pills */
.ap-status-toggle {
  position: relative;
  display: inline-block;
}
.btn-ap-status {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: inherit;
}
.btn-ap-status::-webkit-details-marker,
.btn-ap-status::marker { display: none; content: ''; }
.btn-ap-status:hover { background: var(--bg-page); }
.ap-status-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.ap-status-option {
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  color: inherit;
}
.ap-status-option:hover { background: var(--bg-page); }
.ap-status-option-danger {
  color: var(--sev-red);
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 10px;
}
.ap-status-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
.ap-status-done {
  background: #ecfdf5;
  color: var(--sev-green);
  border: 1px solid var(--sev-green);
}
.ap-status-reopen {
  margin-left: 6px;
  padding: 5px 10px;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Hold review-by chrome (Slice 4 Ship 3) — accept form date input
   + action plan badge. The badge is amber-tinted to draw attention
   without alarming (it's informational, not urgent). */
.hold-review-by-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  font-size: 13px;
}
.hold-review-by-label > span:first-child {
  font-weight: 500;
}
.hold-review-by-input {
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 14px;
  max-width: 200px;
}
.hold-review-by-hint {
  font-size: 12px;
}

.ap-review-by-row {
  margin: 4px 0 8px;
}
.ap-review-by-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}
.ap-review-by-missing {
  background: transparent;
  border-style: dashed;
  font-style: italic;
  color: var(--text-muted);
}

/* Recently-completed section on /advisor/action-plan. Collapsed by
   default so completed items stay out of view but are still
   accessible. After 7 days the loader stops including them at all. */
.ap-recently-completed {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-page);
}
.ap-recently-completed > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
}
.ap-recently-completed > summary::-webkit-details-marker { display: none; }
.ap-recently-completed-arrow {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px;
  transition: transform 0.15s ease;
}
.ap-recently-completed[open] .ap-recently-completed-arrow {
  transform: rotate(90deg);
}
.ap-recently-completed-body {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

/* Make-default button on goal cards (Settings → Goals) */
.btn-goal-make-default {
  margin-left: auto;
  margin-right: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.btn-goal-make-default:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Thesis version badge (Settings → Goals → Investment Thesis label).
   Sits inline with the label as a small monospace chip + history link. */
.thesis-version-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  vertical-align: middle;
}
.thesis-version-history-link {
  margin-left: 6px;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  vertical-align: middle;
}
.thesis-version-history-link:hover {
  text-decoration: underline;
}
/* Make the version badge itself clickable when it's a link — picks
   up the accent color on hover and shows the pointer cursor. */
.thesis-version-badge-link {
  color: var(--text-muted);
  transition: color 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.thesis-version-badge-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Goal detail header — line 1: name + Back. Line 2: badges (left) +
   AI Refine / Edit fields (right). Replaces the prior flat tab-header. */
.goal-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.goal-detail-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.goal-detail-title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.goal-detail-back { flex: 0 0 auto; }
.goal-detail-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.goal-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Thesis detail header mirrors the goal-detail pattern but without a
   Back button (Thesis is its own top-level nav section). */
.thesis-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.thesis-detail-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.thesis-detail-title { margin: 0; }

/* Inline warning hint (legacy thesis editor banner, etc.) */
.settings-hint-warn {
  color: #b3531a;
  background: #fff7eb;
  border-left: 3px solid #f5a623;
  padding: 6px 10px;
  border-radius: 4px;
}
.settings-hint-warn a { color: var(--accent); }

/* Settings → Thesis (new singleton editor, Slice B.1) */
.thesis-settings-page .tab-header h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-banner {
  padding: 10px 14px;
  border-radius: 6px;
  margin: 12px 0 16px;
  font-size: 14px;
  line-height: 1.4;
}
.settings-banner.banner-info {
  background: #eef5ff;
  border-left: 3px solid var(--accent);
  color: var(--text);
}
.thesis-defaults-table {
  width: 100%;
  border-collapse: collapse;
}
.thesis-defaults-table th,
.thesis-defaults-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.thesis-defaults-table th { font-weight: 600; width: 200px; }
.thesis-pillar-list {
  list-style: disc;
  margin: 0 0 0 20px;
  padding: 0;
}
.thesis-pillar-list li { padding: 3px 0; font-size: 14px; }

/* ── /thesis/detail — expandable section tiles (Slice 2) ────────── */
.thesis-tile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 20px;
}
.thesis-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.thesis-tile[open] {
  border-color: var(--text-muted);
}
.thesis-tile-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}
.thesis-tile-summary::-webkit-details-marker { display: none; }
.thesis-tile-summary::before {
  content: "▸";
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  width: 12px;
  transition: transform 120ms ease;
}
.thesis-tile[open] > .thesis-tile-summary::before {
  transform: rotate(90deg);
}
.thesis-tile-title { flex: 1; }
.thesis-tile-manage-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.thesis-tile-manage-btn:hover,
.thesis-tile-manage-btn:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}
.thesis-tile.is-readonly { background: color-mix(in srgb, var(--bg-card) 92%, var(--text-muted) 8%); }
.thesis-tile-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--border);
}
.thesis-section-pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0;
  padding: 0;
  background: transparent;
  color: var(--text);
}
.thesis-section-empty { font-style: italic; }
.thesis-tile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.thesis-tile-cross-link {
  margin: 10px 0 0;
  font-size: 13px;
}
.thesis-tile-cross-link a { color: var(--accent); text-decoration: none; }
.thesis-tile-cross-link a:hover { text-decoration: underline; }
.thesis-tile-textarea {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.thesis-refine-panel { margin-bottom: 12px; }

/* ── /thesis/pillars — per-card ⓘ click-popover (Slice 3) ─────────── */
.pillar-prose-anchor {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  margin-left: 4px;
}
.pillar-prose-info-btn {
  appearance: none;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
  border-radius: 50%;
}
.pillar-prose-info-btn:hover,
.pillar-prose-info-btn:focus-visible {
  color: var(--accent);
  outline: none;
}
.pillar-prose-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 30;
  width: max-content;
  max-width: 340px;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.pillar-prose-popover[hidden] { display: none; }
.pillar-prose-close-btn {
  /* Hidden on desktop — click-outside / Esc handle dismissal. Shown
     on mobile where the popover is a centered modal. */
  display: none;
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}
.pillar-prose-close-btn:hover { color: var(--text); background: var(--border); }

@media (max-width: 899px) {
  .pillar-prose-popover {
    /* On phones + tablets (incl. landscape, up to the desktop breakpoint),
       render as a centered modal so the popover is always fully visible
       regardless of which card opened it. Above 640px the old anchored
       dropdown overflowed the right/bottom edge of multi-column grids. */
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin-top: 0;
    max-width: min(92vw, 380px);
    max-height: 75vh;
    z-index: 100;
    padding: 28px 14px 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  }
  .pillar-prose-close-btn { display: block; }
  /* Backdrop appears via a body-level pseudo-element when any popover
     is open (toggled by JS), so the modal reads as a proper overlay
     on mobile. */
  body.pillar-prose-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 90;
    pointer-events: none;
  }
}

/* ── /thesis/triggers — per-trigger tiles (Slice 4) ──────────────── */
.thesis-triggers-page { padding: 0; }
.trigger-add-details summary { cursor: pointer; }
.trigger-add-form {
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 540px;
}
.triggers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.trigger-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.trigger-tile.severity-major { border-left-color: #dc2626; }
.trigger-tile.severity-moderate { border-left-color: #d97706; }
.trigger-tile.severity-minor { border-left-color: #6b7280; }

/* /thesis/triggers page-level chrome (header, copy, actions row). */
.triggers-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 6px;
}
.triggers-page-title {
  margin: 0;
  white-space: nowrap;
  overflow: visible;
}
.triggers-page-version {
  /* Same chip look as the inline version badge, just stacked under
     the title now. */
  align-self: flex-start;
}
.triggers-page-copy {
  margin: 4px 0 12px;
}
.triggers-actions-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
/* AI Propose narrower — content-sized. The btn-ai variant already
   handles the sparkle styling; we just constrain the width. */
.triggers-action-ai { white-space: nowrap; }
.triggers-action-add { white-space: nowrap; }
/* Trigger tile summary — chevron (left, vertically centered) + stacked
   content (Name line 1, severity badge line 2). Redesigned 2026-05-25
   per Sam's spec. */
.trigger-tile-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  list-style: none;
}
.trigger-tile-summary::-webkit-details-marker { display: none; }
.trigger-tile-arrow {
  flex: 0 0 auto;
  display: inline-block;
  align-self: center;
  font-size: 10px;
  color: var(--text-muted);
  width: 10px;
  transition: transform 120ms ease;
}
.trigger-tile[open] > .trigger-tile-summary .trigger-tile-arrow {
  transform: rotate(90deg);
}
.trigger-tile-summary-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trigger-tile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* (Authoritative `.trigger-tile-name` rule lives further down the
   file in the goal_editor section; see "Trigger tile: name on left,
   …".) */
.trigger-tile-severity-row {
  display: flex;
  align-items: center;
}
.trigger-severity-pill {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}
.trigger-severity-major   { background: #fee2e2; color: #991b1b; }
.trigger-severity-moderate { background: #fef3c7; color: #92400e; }
.trigger-severity-minor   { background: #e5e7eb; color: #374151; }
.trigger-tile-condition {
  flex: 1;
  font-weight: 500;
  color: var(--text);
}
/* Expanded body — Condition + Action each render as their own
   sub-tile inside the parent trigger tile. Label sits at the top
   of the sub-tile; value (or edit control) below. */
.trigger-tile-field {
  margin: 8px 0;
  line-height: 1.45;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.trigger-tile-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.trigger-tile-field-value {
  font-size: 14px;
  margin: 0;
  color: var(--text);
}

/* Field display ↔ edit swap. Default = view mode (edit controls
   hidden). `.trigger-tile.is-editing` flips it. Inputs/textareas
   fill the body content column on all viewport widths. */
.trigger-tile .trigger-field-edit { display: none; }
.trigger-tile.is-editing .trigger-field-display { display: none; }
.trigger-tile.is-editing .trigger-field-edit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.trigger-tile.is-editing textarea.trigger-field-edit { resize: vertical; }
/* Severity select sizes to content; everything else fills width. */
.trigger-tile.is-editing .trigger-edit-severity {
  display: inline-block;
  width: auto;
}

/* View-mode vs edit-mode action buttons. Save+Revert appear only
   in edit mode; ✎ Edit only in view mode. */
.trigger-tile .trigger-action-edit { display: none; }
.trigger-tile.is-editing .trigger-action-view { display: none; }
.trigger-tile.is-editing .trigger-action-edit { display: inline-flex; }
.trigger-tile-source-pill {
  font-size: 10px;
  color: var(--text-muted);
  background: transparent;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-shrink: 0;
}
.trigger-tile-body {
  /* Left padding aligns Condition + Action with the Name/severity
     column in the summary (14px tile padding + 10px chevron + 12px
     gap = 36px). Top/right/bottom unchanged. */
  padding: 4px 14px 14px 36px;
  border-top: 1px solid var(--border);
}
.trigger-tile-action {
  font-size: 14px;
  margin: 8px 0;
  line-height: 1.45;
}
.trigger-tile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.trigger-edit-btn { font-size: 13px; }
.trigger-remove-btn {
  /* Sits at the left of the actions row so it doesn't crowd
     the primary action (Edit / Save) which lives far-right. */
}
/* Status span has `margin-left: auto`, which pushes itself and every
   following sibling (Edit in view mode, or Revert+Save in edit mode)
   to the far right of Line 5. Remove × stays at the left. */
.trigger-tile-actions .trigger-edit-status { margin-left: auto; }
.trigger-tile-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.trigger-edit-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.trigger-edit-label textarea,
.trigger-edit-label select,
.trigger-edit-label input[type="text"],
.trigger-add-form textarea,
.trigger-add-form select,
.trigger-add-form input[type="text"] {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  resize: vertical;
  margin-top: 2px;
  box-sizing: border-box;
}
.trigger-propose-panel { margin: 12px 0; }
.trigger-propose-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--bg-card);
}
.trigger-propose-row.is-applied {
  opacity: 0.55;
}
.trigger-propose-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* ── /thesis/builder — chat wizard + paste-back (Slice 5) ────────── */
.thesis-builder { padding: 0; }
.builder-wizard-card { padding: 0; }
.builder-wizard-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.builder-wizard-header > h3 { flex-shrink: 0; }
.builder-saved-stamp {
  flex: 1;
  font-size: 12px;
  font-style: italic;
}
.builder-chat {
  height: 380px;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-chat-empty { margin: auto; text-align: center; }
.builder-bubble {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.builder-bubble-role {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.builder-bubble-content { white-space: pre-wrap; }
.builder-bubble-assistant {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.builder-bubble-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}
.builder-bubble-user .builder-bubble-role { color: rgba(255, 255, 255, 0.85); }
.builder-bubble-content .gb-md-list { margin: 4px 0 4px 4px; padding-left: 18px; }
.builder-bubble-content .gb-md-list li { margin: 1px 0; }
/* Plain-English proposal summary above the review grid */
.builder-review-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.builder-review-summary .gb-md-list { margin: 4px 0 4px 4px; padding-left: 18px; }
.builder-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
}
.builder-input {
  width: 100%;
  min-height: 140px;
  font-size: 14px;
  font-family: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  resize: vertical;
  line-height: 1.5;
}
.builder-input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.builder-synth-card { margin: 12px 0; padding: 14px; }
.builder-prose {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}
.builder-parse-errors {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #92400e;
}
.builder-parse-errors ul { margin: 4px 0 0 18px; padding: 0; }
.builder-paste-card,
.builder-mcp-card {
  margin-top: 12px;
}
.builder-paste-card summary,
.builder-mcp-card summary {
  cursor: pointer;
  padding: 6px 0;
}
.builder-paste-body { padding-top: 8px; }
.builder-prompt-block { margin: 8px 0; }
.builder-prompt-block summary { padding: 4px 0; }
.builder-prompt-pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  max-height: 360px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  margin: 8px 0;
}

/* ── /goals/{id}/build — Goals Builder review grid (Slice 5b) ───── */
.goal-builder { padding: 0; }
.builder-review-card { margin-top: 12px; padding: 14px; }
.builder-review-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.builder-review-grid h4 {
  margin: 12px 0 4px;
  font-size: 14px;
}
.builder-review-grid label { font-size: 13px; color: var(--text-muted); }
.builder-review-grid label > input,
.builder-review-grid label > textarea {
  width: 100%;
  margin-top: 2px;
}
.builder-review-liq-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
#review-caps-table input,
#review-pillars-table input,
#review-triggers-table input { font-size: 13px; }

/* Mobile: the review tables (pillar target bands, caps, triggers, accounts)
   are dense multi-column grids — on a phone let them scroll horizontally
   inside the card instead of overflowing the viewport, and drop the fixed
   200px header width so columns size to their content. */
@media (max-width: 700px) {
  .builder-review-grid .thesis-defaults-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .builder-review-grid .thesis-defaults-table th { width: auto; }
}

/* ── /goals tile config-summary footer (Slice 5b polish) ───────── */
.goal-tile-config-summary {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.goal-tile-name-link {
  color: inherit;
  text-decoration: none;
}
.goal-tile-name-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ── /goals/{id} read-only detail view (Slice 5b polish) ───────── */
.goal-detail { padding: 0; }
.goal-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.goal-detail-dl {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 6px 16px;
  margin: 0;
}
.goal-detail-dl dt {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
}
.goal-detail-dl dd {
  margin: 0;
  font-size: 14px;
}
.goal-detail-prose {
  white-space: pre-wrap;
  font-family: inherit;
}
.goal-detail-prose-block {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.goal-detail-direction-pill {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
}
.goal-detail-direction-tighter { background: #dcfce7; color: #166534; }
.goal-detail-direction-looser  { background: #fee2e2; color: #991b1b; }
.goal-detail-justification {
  font-style: italic;
  color: var(--text-muted);
  font-size: 12px;
}

/* Expandable inner tiles inside Overview + Cap overrides sections
   (2026-05-25). Each sub-field / cap row collapses to a one-line
   summary; click to reveal the prose / justification beneath. */
.goal-detail-inner-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.goal-detail-inner-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
}
.goal-detail-inner-summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.goal-detail-inner-summary::-webkit-details-marker { display: none; }
.goal-detail-inner-summary::before {
  content: "▸";
  font-size: 10px;
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--text-muted);
}
.goal-detail-inner-tile[open] > .goal-detail-inner-summary::before {
  transform: rotate(90deg);
}
.goal-detail-inner-body {
  padding: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
/* Cap-row summary: name / pct / direction pill — left-aligned cluster. */
.goal-detail-cap-summary .goal-detail-cap-kind { flex: 0 0 auto; }
.goal-detail-cap-summary .goal-detail-cap-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-default, inherit);
}
.goal-detail-cap-justification {
  font-style: italic;
  color: var(--text-muted);
}
.goal-detail-cap-denom { font-size: 12px; margin-top: 6px; }
/* Name + short-description summary row used by Success metrics +
   Execution notes tiles on /goals/{id}. */
.goal-detail-namedrow-summary {
  flex-wrap: wrap;
}
.goal-detail-namedrow-name { font-weight: 600; }
.goal-detail-namedrow-short {
  font-size: 13px;
  font-weight: 400;
}
/* Deep-link landing: when /goals/{id}#section-name jumps to the
   structured editor, leave room under the sticky .app-header so the
   section title + Save/Revert buttons stay visible after scroll. */
#overview,
#cap-overrides,
#pillar-allocations,
#trigger-exemptions,
#success-metrics,
#execution-notes {
  scroll-margin-top: 120px;
}

/* Header row for each goal-detail section: title left, Edit button
   top-right. Replaces the old bottom-right .goal-detail-section-actions
   placement (2026-05-25). */
.goal-detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.goal-detail-section-header h3 {
  margin: 0;
}

/* Cap overrides on /settings/goals/{id}: two-row tile per cap kind.
   Row 1: cap name (full width, can flow). Row 2: chevron +
   "Justification" label (left) and Default + Override input (right,
   aligned vertically across tiles). Click the row-2 summary to expand
   the justification textarea. (2026-05-25) */
.cap-override-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cap-override-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.cap-override-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cap-override-summary::-webkit-details-marker { display: none; }
.cap-override-row-name {
  font-weight: 600;
  font-size: 14px;
}
.cap-override-row-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.cap-override-justification-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.cap-override-chevron {
  font-size: 11px;
  display: inline-block;
  transition: transform 120ms ease;
}
.cap-override-tile[open] .cap-override-chevron {
  transform: rotate(90deg);
}
/* Fixed widths on the right-aligned values so they line up across
   tiles. Default cell is right-aligned text; Override cell wraps a
   64px input + unit. */
.cap-override-values {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cap-override-default-value {
  width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.cap-override-input-cell {
  width: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.cap-override-input-cell .cap-pct-input {
  width: 64px !important;
  min-width: 64px !important;
  flex: 0 0 64px;
  padding: 2px 6px;
  font-size: 13px;
  text-align: right;
}
.cap-override-pct-unit { color: var(--text-muted); font-size: 13px; }
.cap-override-body {
  padding: 8px 0 0;
}
.cap-override-body .cap-justification-input {
  min-height: 48px;
  font-size: 13px;
}
@media (max-width: 768px) {
  .goal-editor-page .cap-override-input-cell .cap-pct-input {
    width: 64px !important;
    min-width: 64px !important;
    flex: 0 0 64px;
    margin-top: 0;
  }
}

/* Pillar allocations: Included + Available zones with draggable tiles
   on /settings/goals/{id} (2026-05-25). Replaces the prior table. */
.pillar-zone-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
}
.pillar-zone, .trigger-zone {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px;
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.pillar-zone-dragover {
  background: color-mix(in srgb, var(--accent, #4a90e2) 6%, transparent);
  border-color: var(--accent, #4a90e2);
  border-style: solid;
}
.pillar-zone-empty {
  font-size: 13px;
  padding: 6px 4px;
  width: 100%;
}
/* Scoped to the goal_editor's draggable zones. Without `.pillar-zone`/
   `.trigger-zone` ancestor, this rule was applying globally and
   turning /thesis/triggers tiles into a flex row that pushed the
   body into a column to the right of the summary. */
.pillar-zone .pillar-tile,
.trigger-zone .trigger-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: grab;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Trigger tile: name on left, severity pill + buttons on right.
   `white-space: nowrap` keeps the name on a single line; sized to
   content (no flex/min-width clamp) so it flows freely to the right
   as Sam types longer labels. If a label is wider than the tile,
   the text overflows visually — Sam's choice; keep names short. */
.trigger-tile-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
}
/* Zone-conditional visibility for triggers (mirrors pillar pattern). */
.trigger-zone[data-zone="active"] .pillar-tile-remove { display: none; }
.trigger-zone[data-zone="exempted"] .pillar-tile-add { display: none; }
/* Exempted zone uses a column layout so each trigger tile gets a
   full row (condition text can be long). */
.trigger-zone[data-zone="exempted"],
.trigger-zone[data-zone="active"] {
  flex-direction: column;
  align-items: stretch;
}
.trigger-zone .trigger-tile { width: 100%; }

/* View-side compact trigger row on /goals/{id}. */
.goal-detail-trigger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.goal-detail-trigger-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.goal-detail-trigger-row:last-child { border-bottom: none; }
.goal-detail-trigger-name {
  flex: 1 1 auto;
  font-weight: 600;
}
/* Included tiles take a full row each so the pillar name has room
   alongside the band inputs. */
.pillar-zone[data-zone="included"] {
  flex-direction: column;
  align-items: stretch;
}
.pillar-zone[data-zone="included"] .pillar-tile {
  width: 100%;
}
/* Available tiles stay compact pills (just name + Add). */
.pillar-zone[data-zone="available"] .pillar-tile {
  flex: 0 1 auto;
}
.pillar-tile:active { cursor: grabbing; }
.pillar-tile-dragging { opacity: 0.45; }
.pillar-tile-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.pillar-tile-band-inputs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
/* Wide enough for an `xx.x` value plus padding (~64px). Overrides
   .settings-input's flex:1/min-width:120px and the mobile media-query's
   width:100% rule. */
.pillar-tile-band-inputs .pillar-min,
.pillar-tile-band-inputs .pillar-max {
  width: 64px;
  min-width: 64px;
  flex: 0 0 64px;
  padding: 2px 6px;
  font-size: 13px;
}
@media (max-width: 768px) {
  .goal-editor-page .pillar-tile-band-inputs .pillar-min,
  .goal-editor-page .pillar-tile-band-inputs .pillar-max {
    width: 64px !important;
    min-width: 64px !important;
    flex: 0 0 64px;
    margin-top: 0;
  }
  /* Mobile only: name gets its own row above the bands + × cluster.
     Bands stay on the right via margin-left:auto on the band-inputs. */
  .pillar-zone[data-zone="included"] .pillar-tile {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .pillar-zone[data-zone="included"] .pillar-tile .pillar-tile-name {
    flex: 0 0 100%;
  }
  .pillar-zone[data-zone="included"] .pillar-tile .pillar-tile-band-inputs {
    margin-left: auto;
  }
}
.pillar-tile-remove,
.pillar-tile-add {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
}
.pillar-tile-remove { font-size: 16px; padding: 0 8px; }
.pillar-tile-remove:hover { color: var(--ink-danger, #991b1b); border-color: var(--ink-danger, #991b1b); }
.pillar-tile-add:hover { color: var(--accent, #4a90e2); border-color: var(--accent, #4a90e2); }
/* Zone-conditional visibility: tiles only show the controls relevant
   to their current zone. */
.pillar-zone[data-zone="available"] .pillar-tile-band-inputs,
.pillar-zone[data-zone="available"] .pillar-tile-remove {
  display: none;
}
.pillar-zone[data-zone="included"] .pillar-tile-add {
  display: none;
}
/* Section-level Save / Revert actions. Stacked: buttons on top,
   feasibility warning underneath when sum(lower bands) > 100%. */
.pillar-section-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pillar-section-actions-buttons {
  display: flex;
  gap: 8px;
}
.pillar-save-warning {
  font-size: 12px;
  color: var(--ink-danger, #991b1b);
  max-width: 280px;
  text-align: right;
}
.pillar-save-warning:empty { display: none; }

/* Compact read-only pillar rows on /goals/{id} — single line per
   pillar: name (left) + band (right). */
.goal-detail-pillar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.goal-detail-pillar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.goal-detail-pillar-row:last-child { border-bottom: none; }
.goal-detail-pillar-name { font-weight: 600; }
.goal-detail-pillar-band {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Per-row editor tiles for Success metrics + Execution notes on
   /settings/goals/{id} (migration 074). One tile per row; expand to
   reveal the name / short / full inputs + Save / Delete. */
.namedrow-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.namedrow-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
}
.namedrow-summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 14px;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.namedrow-summary::-webkit-details-marker { display: none; }
.namedrow-summary::before {
  content: "▸";
  font-size: 10px;
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--text-muted);
}
.namedrow-tile[open] > .namedrow-summary::before {
  transform: rotate(90deg);
}
.namedrow-summary-name { font-weight: 600; }
.namedrow-summary-short { font-size: 13px; }
.namedrow-body { padding: 0 0 12px; }
.namedrow-body .settings-label { margin-top: 8px; }
.namedrow-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.namedrow-delete { color: var(--ink-danger, #991b1b); }
.goal-detail-exemption-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.goal-detail-exemption-list li {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
}

/* /thesis/history page — version timeline */
.thesis-history-page {
  padding: 16px 0;
}
.thesis-history-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.thesis-history-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.thesis-history-entry:last-child { border-bottom: none; }
.thesis-history-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
}
.thesis-history-dot.bump-major   { background: #e64545; }
.thesis-history-dot.bump-minor   { background: #f5a623; }
.thesis-history-dot.bump-patch   { background: #9aa1ad; }
.thesis-history-dot.bump-initial { background: var(--accent); }
.thesis-history-version-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
}
.thesis-history-bumped-at { color: var(--text-muted); font-size: 12px; }
.thesis-history-diff-summary {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text);
}
.thesis-history-diff-summary ul { margin: 4px 0 0 18px; padding: 0; }
.thesis-history-snapshot {
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 420px;
  overflow: auto;
}
.thesis-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.thesis-history-restore-btn { font-size: 13px; }

/* ── Records-aware restore (R-008) ── */
.thesis-history-current {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #4a90e2);
  border: 1px solid var(--accent, #4a90e2);
  border-radius: 4px;
  padding: 0 6px;
  margin-left: 4px;
}
.thesis-history-snapshot-counts { font-size: 12px; margin-top: 6px; }
.thesis-restore { margin-top: 8px; }
.thesis-restore-btn { font-size: 13px; }
.thesis-restore-confirm {
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
}
.thesis-restore-diff { margin: 8px 0; }
.thesis-restore-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.thesis-restore-changed { font-weight: 600; color: var(--accent, #4a90e2); }
.thesis-restore-actions { margin-top: 8px; display: flex; gap: 8px; }
.text-error { color: var(--danger, #d9534f); }

/* ── Goals tile grid (/goals page) ──────────────────────────────── */
.goals-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 8px 0;
}
.goal-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.goal-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.goal-tile-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.goal-tile-fields { margin: 0; font-size: 13px; }
.goal-tile-fields dt {
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 6px;
}
.goal-tile-fields dd { margin: 2px 0 0; }
.goal-tile-bio { line-height: 1.4; }

/* Compact tile (2026-05-24): single target-outcome row between the
   header and the action row. */
.goal-tile-target {
  margin: 0;
  font-size: var(--type-meta);
  color: var(--ink-soft);
  line-height: var(--line-base);
}

/* Action row: Edit + View primary (left, blue) — Make default +
   Delete secondary (right, when not primary). margin-left: auto on
   the secondary group pushes it to the far edge. */
.goal-tile-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.goal-tile-actions-primary,
.goal-tile-actions-secondary {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.goal-tile-actions-secondary { margin-left: auto; }
.goal-tile-feedback summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Goal editor mobile responsive ──────────────────────────────── */
.goal-editor-page .settings-card { overflow-x: auto; }
.goal-editor-page .thesis-defaults-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.goal-editor-page .thesis-defaults-table th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.goal-editor-page .thesis-defaults-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

@media (max-width: 768px) {
  .goal-editor-page .thesis-defaults-table,
  .goal-editor-page .thesis-defaults-table thead,
  .goal-editor-page .thesis-defaults-table tbody,
  .goal-editor-page .thesis-defaults-table tr,
  .goal-editor-page .thesis-defaults-table td,
  .goal-editor-page .thesis-defaults-table th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .goal-editor-page .thesis-defaults-table thead { display: none; }
  .goal-editor-page .thesis-defaults-table tr {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 8px;
  }
  .goal-editor-page .thesis-defaults-table td {
    border-bottom: 1px dashed var(--border);
    padding: 6px 4px;
  }
  .goal-editor-page .thesis-defaults-table td:last-child { border-bottom: none; }
  .goal-editor-page .thesis-defaults-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 6px;
  }
  .goal-editor-page input[type="number"],
  .goal-editor-page input[type="text"],
  .goal-editor-page .settings-input {
    width: 100% !important;
    box-sizing: border-box;
    margin-top: 4px;
  }
  .goal-editor-page select {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ── Thesis page: read-only view, mode buttons, refine UI ──────── */
.thesis-page-root .tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.thesis-mode-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.thesis-mode-btn.is-active-mode {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.thesis-view-pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 720px;
  overflow: auto;
}
.settings-banner.banner-warn {
  background: #fff7eb;
  border-left: 3px solid #f5a623;
  color: #6b3a0a;
}
.settings-banner.banner-warn code {
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* ── Goal tiles polish ────────────────────────────────────────── */
.goal-tile {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.goal-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.goal-tile-name { line-height: 1.2; }
.goal-tile-name .badge {
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 4px;
}
.goal-tile .thesis-version-badge {
  font-size: 11px;
  background: var(--bg-card);
}
.goal-tile-fields dd {
  color: var(--text);
  line-height: 1.4;
}
.goal-tile-bio {
  color: var(--text-muted);
  font-size: 12px;
}
/* Goal Edit/View use the standard action-button box (see the standard block
   at the end of this file) — no per-tile size override. */

/* ─────────────────────────────────────────────────────────────────────
   STOA HOME — Phase B2 (2026-05-27)
   "What needs your attention": severity-ranked signals + KPI tiles. Renders
   inside base.html's content block (dark bar + nav already provided). Mobile-
   first single column; 2-col at ≥900px. Mockup tokens mapped to app tokens.
   ───────────────────────────────────────────────────────────────────── */
.signals-col h1 {
  font-size: var(--type-h1); font-weight: var(--weight-bold);
  letter-spacing: -0.018em; margin: 0;
}
.home-sub { font-size: var(--type-body); color: var(--ink-muted); margin: 4px 0 18px; }
.kpi-col .home-sub { margin: 0 0 14px; }

.group-h { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 10px; }
.group-h h3 {
  margin: 0; font-size: var(--type-caption); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted);
}
.group-h .count { font-size: var(--type-meta); color: var(--ink-muted); }

.signal-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 10px;
  display: grid; grid-template-columns: 4px 1fr auto; gap: 14px;
  align-items: center; box-shadow: var(--elev-1);
}
.signal-card .stripe { width: 4px; align-self: stretch; border-radius: 4px; }
.signal-card.sig-urgent .stripe { background: var(--money-down); }
.signal-card.sig-warn .stripe   { background: var(--tone-caution-fg); }
.signal-card.sig-calm .stripe   { background: var(--money-up); }
.signal-body { min-width: 0; }
.signal-card h3 { margin: 0 0 2px; font-size: 15px; font-weight: var(--weight-semibold); }
.signal-card p { margin: 0; font-size: var(--type-meta); color: var(--ink-soft); line-height: 1.45; }
.sig-pill {
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-semibold);
  padding: 4px 10px; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; align-self: flex-start;
}
.signal-card.sig-urgent .sig-pill { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
.signal-card.sig-warn .sig-pill   { background: var(--tone-caution-bg); color: var(--tone-caution-fg); }
.signal-card.sig-calm .sig-pill   { background: var(--money-up-bg);     color: var(--money-up); }
.signal-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sig-btn {
  font-size: var(--type-meta); font-weight: var(--weight-semibold);
  padding: 7px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--surface-card);
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.sig-btn-primary { background: var(--accent-default); color: #fff; border-color: var(--accent-default); }
.sig-btn-ghost   { background: var(--surface-sunken); border-color: transparent; }

.more-link {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 18px;
  background: var(--surface-card); border: 1px dashed var(--border-default);
  border-radius: var(--radius-card); font-size: var(--type-meta);
  color: var(--ink-soft); margin-top: 6px; text-decoration: none;
}
.more-link strong { color: var(--accent-default); font-weight: var(--weight-semibold); }

.kpi-col h2 {
  font-size: var(--type-h3); font-weight: var(--weight-bold); margin: 0 0 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.kpi-col .customize { font-size: var(--type-meta); color: var(--accent-default); font-weight: var(--weight-semibold); text-decoration: none; }
/* At-a-glance grid mirrors the Portfolio KPI bar (.statbar): compact stat
   tiles, 2-up mobile → 3 tablet → up to 6 desktop. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi-tile {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--elev-1);
  min-width: 0; min-height: 76px;
}
.kpi-tile-wide { grid-column: span 2; }
.kpi-tile-lbl { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-tile-goal {
  font-family: var(--font-sans); font-size: 9px; font-weight: var(--weight-semibold);
  text-transform: none; letter-spacing: 0; color: var(--accent-on-soft);
  background: var(--accent-soft-bg); padding: 2px 7px; border-radius: var(--radius-pill);
  margin-left: 6px; vertical-align: middle; white-space: nowrap;
}
.kpi-tile-val { font-size: clamp(16px, 1.4vw, 20px); font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin: 3px 0 2px; line-height: var(--line-tight); font-variant-numeric: tabular-nums lining-nums; }
.kpi-tile-suffix { font-size: 14px; color: var(--ink-muted); font-weight: var(--weight-medium); }
.kpi-tile-delta { font-size: 13px; font-weight: var(--weight-semibold); }
.kpi-tile-delta.is-up { color: var(--money-up); }
.kpi-tile-delta.is-down { color: var(--money-down); }
.kpi-tile-sub { font-size: var(--type-meta); color: var(--ink-muted); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kpi-tile-pill {
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-semibold);
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--tone-caution-bg); color: var(--tone-caution-fg);
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.kpi-tile-spark { padding: 14px 16px 16px; }
.kpi-tile-spark .kpi-tile-val { font-size: 20px; }
.kpi-spark { display: block; margin-top: 10px; height: 50px; width: 100%; }
.kpi-spark-line { stroke-width: 2; }
.kpi-spark.is-up .kpi-spark-line   { stroke: var(--money-up); }
.kpi-spark.is-down .kpi-spark-line { stroke: var(--money-down); }
.kpi-spark.is-up .kpi-spark-area   { fill: var(--money-up-bg); opacity: 0.6; }
.kpi-spark.is-down .kpi-spark-area { fill: var(--tone-danger-bg); opacity: 0.5; }

/* At-a-glance is the top section; This-week signals stack below it. */
.home-body { display: flex; flex-direction: column; gap: 22px; }
.kpi-col { order: -1; }
.kpi-col h2 { margin-bottom: 10px; }

/* ── Settings → KPIs editor (Stoa Phase B3) ──────────────────────────── */
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kpi-head h2 { margin: 0; }
.kpi-editor { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.kpi-editor-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 12px; align-items: center;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px 14px;
}
.kpi-remove {
  border: 1px solid var(--border-default); background: var(--surface-card);
  border-radius: var(--radius-sm); width: 24px; height: 24px; line-height: 1;
  cursor: pointer; color: var(--ink-muted); font-size: 15px; padding: 0;
}
.kpi-remove:hover { background: var(--sev-red); color: #fff; border-color: var(--sev-red); }
.kpi-remove.is-confirming { width: auto; padding: 0 8px; font-size: 11px; background: var(--sev-red); color: #fff; border-color: var(--sev-red); }
.kpi-remove-spacer { width: 24px; }
/* Add-tile builder */
.kpi-add-panel { margin: 4px 0 14px; border: 1px dashed var(--accent); background: var(--accent-soft-bg); }
.kpi-add-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.kpi-add-field { display: flex; flex-direction: column; gap: 4px; font-weight: var(--weight-semibold); font-size: var(--type-meta); }
.kpi-add-field .settings-input { font-weight: 400; }
.kpi-add-scope { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; }
.kpi-add-scope legend { font-size: var(--type-meta); font-weight: var(--weight-semibold); padding: 0 4px; }
.kpi-add-scope .drawer-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.kpi-add-goal { display: inline-block; width: auto; min-width: 140px; }
.kpi-add-actions { display: flex; align-items: center; gap: 10px; }
.kpi-editor-row.is-off { opacity: 0.55; }
.kpi-editor-reorder { display: flex; flex-direction: column; gap: 2px; }
.kpi-move {
  border: 1px solid var(--border-default); background: var(--surface-card);
  border-radius: var(--radius-sm); width: 24px; height: 18px; line-height: 1;
  cursor: pointer; color: var(--ink-soft); font-size: 11px; padding: 0;
}
.kpi-move:hover { background: var(--surface-sunken); }
.kpi-editor-meta { display: flex; flex-direction: column; min-width: 0; }
.kpi-editor-name { font-size: var(--type-body); font-weight: var(--weight-medium); color: var(--ink); }
.kpi-editor-tag {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-on-soft); background: var(--accent-soft-bg);
  padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 4px; vertical-align: middle;
}
.kpi-editor-cat { font-size: var(--type-caption); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-editor-size { max-width: 110px; }
.kpi-editor-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-meta); color: var(--ink-soft); white-space: nowrap; }
.kpi-editor-actions { display: flex; align-items: center; gap: 12px; }

/* ── Stoa mobile bottom tab bar (Phase B4) ───────────────────────────── */
.bottom-tab-bar {
  display: flex;
  flex: 0 0 auto;              /* fixed-height flex child at the bottom of body */
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 50;
}
.btab {
  flex: 1; text-align: center;
  font-size: 11px; font-weight: var(--weight-medium);
  color: var(--ink-muted); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 0;
}
.btab.is-active { color: var(--accent-default); }
.btab-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.btab-icon svg { width: 24px; height: 24px; }
/* The bottom bar is a flex child of body now (not fixed), so it never overlays
   content — no padding reserve needed. The bar and the top tab-nav swap at the
   SAME width as the desktop header (768px) — otherwise 768–899px desktop windows
   show the desktop header with NO top nav (the old 900px split left that dead zone). */
@media (min-width: 768px) {
  .bottom-tab-bar { display: none; }
}

/* ── Mobile: drop the redundant top tab-nav (Phase B4) ───────────────── */
/* The bottom tab bar handles primary nav on mobile (6 tabs incl. Settings),
   so the top tab row is redundant and wastes vertical space. Hide it on
   mobile; only the slim dark bar (brand + net worth + deltas) stays up top.
   Desktop keeps the full top tab-nav (shown from 768px, matching the desktop
   header + the bottom-bar swap above). */
.app-header .tab-nav { display: none; }
@media (min-width: 768px) {
  .app-header .tab-nav { display: flex; }
}

/* ── Goals page v3 (2026-06-10): reading dashboard + section drawers ── */
/* One reading dashboard per the approved goal-page-v3 mockup: header chips,
   4-up stat strip, 2-col card grid (1-col mobile, stats 2×2). Every card
   opens its structured editor in the shared .drawer-host slide-over (right
   panel desktop / bottom sheet mobile). */
.gd-page { max-width: 1200px; } /* matches .main — the app's standard content width */
.gd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gd-title { margin: 0; font-size: 26px; font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.gd-vchip {
  font-size: var(--type-caption); font-weight: var(--weight-semibold); color: var(--ink-muted);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 2px 9px; text-decoration: none; white-space: nowrap;
}
.gd-vchip:hover { color: var(--accent-on-soft); background: var(--accent-soft-bg); border-color: var(--tone-info-border); }
.gd-dchip {
  font-size: var(--type-caption); font-weight: var(--weight-bold); color: var(--accent-on-soft);
  background: var(--accent-soft-bg); border-radius: var(--radius-pill); padding: 2px 9px;
}
.gd-actions { margin-left: auto; display: flex; gap: 8px; }
.gd-btn {
  border: 1px solid var(--border-default); background: var(--surface-card);
  border-radius: 10px; padding: 7px 13px; font-size: var(--type-meta);
  font-weight: var(--weight-semibold); color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.gd-btn:hover { background: var(--surface-sunken); }
.gd-btn-ai { color: var(--accent-default); border-color: var(--tone-info-border); }
.gd-sub { color: var(--ink-muted); font-size: 13.5px; margin: 6px 0 0; }

.gd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.gd-stat {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 11px 14px;
}
.gd-stat .v { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.gd-stat .l {
  font-size: var(--type-caption); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); margin-top: 1px;
}
/* Clickable stat tile (accounts → opens the Accounts drawer) — same hover
   affordance as the section cards. */
.gd-stat-btn { cursor: pointer; }
.gd-stat-btn:hover { border-color: var(--border-default); box-shadow: var(--elev-2); }
.gd-stat-btn:hover .l { color: var(--accent-default); }

.gd-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.gd-sec {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--elev-1);
  padding: 14px 16px; position: relative; cursor: pointer;
}
.gd-sec:hover { border-color: var(--border-default); box-shadow: var(--elev-2); }
/* Anchor target for the rail links on /goals/{id}/build
   (#read-<key>) — must clear the sticky dark bar when jumped to. */
.gd-anchor { position: absolute; top: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.gd-sh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gd-sh b { font-size: var(--type-body); letter-spacing: -0.01em; }
.gd-meta { font-size: 12px; color: var(--ink-muted); }
.gd-pen { margin-left: auto; color: var(--ink-muted); font-size: var(--type-meta); }
.gd-sec:hover .gd-pen { color: var(--accent-default); }
/* Overview prose — desktop shows the FULL text (card auto-grows, no clamp or
   inner scroll); mobile keeps a 6-line clamp, the card still opens the drawer
   for the rest. */
.gd-prose {
  font-size: var(--type-meta); color: var(--ink-soft); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) {
  .gd-prose { display: block; overflow: visible; }
}
/* pillar mini band bars */
.gd-pb { display: grid; grid-template-columns: 1fr 90px 84px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.gd-pb .n { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pillar name opens the unified pillar drawer (contract §3.16a U1) */
.gd-pb .n.gd-pname { cursor: pointer; }
.gd-pb .n.gd-pname:hover { color: var(--accent-default); }
.gd-pb .bar { height: 5px; border-radius: 3px; background: var(--surface-sunken); position: relative; overflow: hidden; }
.gd-pb .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent-default); opacity: 0.85; }
.gd-pb .bar u { position: absolute; top: -2px; bottom: -2px; border-left: 2px solid var(--tone-caution-strong); }
.gd-pb .r { text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-pb .r b { color: var(--ink); }
/* account mini rows */
.gd-am { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; }
.gd-am .adv { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-positive-strong); flex: none; }
.gd-am .adv.off { background: var(--border-default); }
.gd-am .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-am .v { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: var(--weight-semibold); }
.gd-more { font-size: 12px; color: var(--accent-default); font-weight: var(--weight-semibold); margin-top: 6px; }
/* chips + list bits */
.gd-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-capchip {
  font-size: 11.5px; font-weight: var(--weight-semibold); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  padding: 3px 10px; color: var(--ink-soft);
}
.gd-capchip em { font-style: normal; color: var(--ink-muted); font-weight: var(--weight-medium); }
.gd-li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 12.5px; color: var(--ink-soft); }
.gd-li::before { content: "•"; color: var(--ink-muted); flex: none; }
.gd-li-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gd-li-clamp::before { content: none; }
.gd-faint { color: var(--ink-muted); }
.gd-empty { font-size: 12.5px; color: var(--ink-muted); margin: 0; }

@media (min-width: 768px) {
  .gd-grid { grid-template-columns: 1fr 1fr; }
  .gd-sec-wide { grid-column: 1 / -1; }
  .gd-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .gd-actions { margin-left: 0; width: 100%; }
}

/* drawer internals (reuses .drawer-overlay/.drawer-host/.drawer-head shell).
   Unlike the account drawer (whose host is EMPTY when closed), this host
   always contains its head/foot, so the shared translateY(120%) — 120% of a
   short element — isn't enough to clear `bottom: var(--nav-h)` on mobile and
   the head would peek above the tab bar. Push it fully past the viewport. */
#gd-drawer-host { transform: translateY(calc(100% + var(--nav-h, 0px) + 30px)); }
#gd-drawer-host.is-open { transform: translateY(0); }
@media (min-width: 769px) {
  #gd-drawer-host { transform: translateX(100%); }
  #gd-drawer-host.is-open { transform: translateX(0); }
}
.gd-drawer-crumb { font-size: 11.5px; color: var(--ink-muted); display: block; }
.gd-drawer-h { margin: 0; font-size: var(--type-h3); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.gd-drawer-body { padding: 8px 18px 20px; flex: 1; }
.gd-drawer-foot {
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle); display: flex; gap: 10px; align-items: center;
  position: sticky; bottom: 0; background: var(--surface-card); margin-top: auto;
}
.gd-savehint { font-size: 11.5px; color: var(--ink-muted); }
.gd-savehint:empty { display: none; }
.gd-foot-spacer { flex: 1; }
.gd-donebtn {
  border: 0; border-radius: var(--radius-lg); background: var(--ink);
  color: #fff; font-size: var(--type-body); font-weight: var(--weight-semibold);
  padding: 10px 22px; cursor: pointer;
}
/* While a staged drawer has pending changes, Save (green) becomes the primary
   and Close demotes to a secondary outline button. */
.gd-donebtn.is-secondary {
  background: var(--surface-card); color: var(--ink-soft);
  border: 1px solid var(--border-default); padding: 9px 21px;
}
.gd-donebtn.is-secondary:hover { background: var(--surface-sunken); }
.gd-savebtn {
  border: 0; border-radius: var(--radius-lg); background: var(--accent);
  color: #fff; font-size: var(--type-body); font-weight: var(--weight-semibold);
  padding: 10px 22px; cursor: pointer;
}
.gd-savebtn:hover:not(:disabled) { background: var(--accent-hover); }
.gd-savebtn:disabled { opacity: 0.5; cursor: default; }
.gd-revertbtn {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--ink-soft);
  font-size: var(--type-body); font-weight: var(--weight-semibold);
  padding: 9px 18px; cursor: pointer;
}
.gd-revertbtn:hover { background: var(--surface-sunken); }
.gd-editor-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 4px 0 8px; }
/* .btn-goal-make-default carries margin-left:auto for its card-header homes;
   inside the drawer action row the buttons stay grouped on the right. */
.gd-editor-actions .btn-goal-make-default { margin-left: 0; margin-right: 0; }
.gd-seclabel {
  font-size: var(--type-caption); font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-muted); margin: 16px 0 6px;
}
.gd-tgh {
  display: flex; align-items: baseline; font-size: 10.5px; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); padding: 10px 0 4px;
}
.gd-tgh .v { margin-left: auto; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.gd-arow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.gd-adv { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-positive-strong); flex: none; }
.gd-adv.off { background: var(--border-default); }
.gd-arow .nm { font-size: 13.5px; font-weight: var(--weight-medium); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-arow .bal { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--ink-soft); }
.gd-arow .rm {
  width: 24px; height: 24px; border-radius: 7px; border: 0; background: transparent;
  color: var(--ink-muted); font-size: var(--type-body); flex: none; cursor: pointer;
}
.gd-arow .rm:hover { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
/* Staged removal: row struck + dimmed until Save; the ✕ becomes an undo ↩. */
.gd-arow.is-pending-remove .nm,
.gd-arow.is-pending-remove .bal { text-decoration: line-through; opacity: 0.45; }
.gd-arow.is-pending-remove .gd-adv { opacity: 0.35; }
.gd-arow.is-pending-remove .rm { color: var(--accent-default); }
/* Group-by control at the top of the Accounts drawer — mirrors the Net Worth
   balance sheet's "Group" select (Type / Name / Institution). */
.gd-groupby { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gd-groupby-label {
  font-size: var(--type-caption); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted);
}
.gd-search {
  display: flex; align-items: center; gap: 8px; background: var(--surface-sunken);
  border: 1px solid var(--border-default); border-radius: 10px; padding: 8px 12px; margin-bottom: 4px;
}
.gd-search svg { width: 14px; height: 14px; color: var(--ink-muted); flex: none; }
.gd-search input { border: 0; outline: 0; font-size: 13.5px; flex: 1; background: transparent; color: var(--ink); }
.gd-prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.gd-prow[hidden] { display: none; }
.gd-prow input { width: 16px; height: 16px; accent-color: var(--accent-default); flex: none; }
.gd-prow .nm { font-size: var(--type-meta); font-weight: var(--weight-medium); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-prow .cur { font-size: var(--type-caption); color: var(--ink-muted); }
.gd-prow .cur.goal { color: var(--tone-caution-fg); }
.gd-prow .bal { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-muted); }
.gd-note { font-size: 11.5px; color: var(--ink-muted); margin: 12px 0 0; }
/* The version chip is a <button> now (opens the history drawer). */
button.gd-vchip { cursor: pointer; font-family: inherit; }
/* "N unsaved changes" footer indicator while a staged drawer is dirty. */
.gd-savehint.is-dirty { color: var(--tone-caution-fg); font-weight: var(--weight-semibold); }

/* ── Pillar drawer band editor (2026-06-10, pillar-edit-drawer mockup) ──
   Drawer-specific edit tiles (collapsed row → expandable band editor with
   draggable handles + steppers). The Portfolio page keeps the shared
   .alloc-pillar read tiles — these classes are drawer-only. */
.pa-tile { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; background: var(--surface-card); }
.pa-row { display: flex; align-items: center; gap: 9px; padding: 11px 13px; cursor: pointer; }
.pa-arr { color: var(--ink-muted); font-size: 11px; flex: none; }
.pa-nm { font-weight: var(--weight-semibold); font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-cur { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: var(--weight-bold); }
.pa-rng { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pa-rm {
  min-width: 24px; height: 24px; border-radius: 7px; border: 0; background: transparent;
  color: var(--ink-muted); font-size: var(--type-body); flex: none; cursor: pointer;
  padding: 0 4px; white-space: nowrap;
}
.pa-rm:hover { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
/* Staged removal: struck + dimmed until Save; ✕ becomes ↩ undo. */
.pa-tile.is-staged-rm { border-style: dashed; }
.pa-tile.is-staged-rm .pa-nm,
.pa-tile.is-staged-rm .pa-cur,
.pa-tile.is-staged-rm .pa-rng { text-decoration: line-through; opacity: 0.45; }
.pa-tile.is-staged-rm .alloc-drift-pill { opacity: 0.35; }
.pa-tile.is-staged-rm .pa-rm { color: var(--accent-default); font-size: 12px; }
.pa-tile.is-staged-rm .pa-rm:hover { background: var(--surface-sunken); color: var(--accent-default); }
/* expanded band editor */
.pa-edit { border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); padding: 14px 16px 16px; }
.pa-trackwrap { margin: 28px 8px 6px; }
.pa-track { position: relative; height: 8px; border-radius: 4px; background: var(--border-default); }
.pa-bandfill { position: absolute; top: 0; bottom: 0; background: var(--accent-default); opacity: 0.28; border-radius: 4px; }
.pa-handle {
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface-card); border: 2.5px solid var(--accent-default);
  box-shadow: var(--elev-1); cursor: grab; touch-action: none;
}
.pa-handle .hv {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: var(--weight-bold); color: var(--accent-on-soft);
  background: var(--accent-soft-bg); border-radius: 6px; padding: 1px 6px;
  white-space: nowrap; pointer-events: none;
}
.pa-curmark { position: absolute; top: -5px; bottom: -5px; width: 2.5px; background: var(--tone-caution-strong); border-radius: 2px; }
.pa-curmark .cv {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: var(--weight-bold); color: var(--tone-caution-strong); white-space: nowrap;
}
.pa-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-muted); margin-top: 24px; }
.pa-numrow { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.pa-numrow label { font-size: 11.5px; color: var(--ink-muted); }
.pa-dash, .pa-unit { font-size: 12px; color: var(--ink-muted); }
.pa-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: 9px; overflow: hidden; background: var(--surface-card); }
.pa-stepper button { border: 0; background: transparent; width: 26px; height: 28px; font-size: 14px; color: var(--ink-muted); cursor: pointer; }
.pa-stepper button:hover { background: var(--surface-sunken); }
.pa-stepper input {
  width: 46px; border: 0; text-align: center; font-size: 13px; font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; background: transparent; outline: none; color: var(--ink);
}
.pa-heldline { font-size: 11.5px; color: var(--ink-muted); margin-top: 10px; }
/* available pillars (staged adds) */
.pa-avrow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.pa-avrow input { width: 16px; height: 16px; accent-color: var(--accent-default); flex: none; }
.pa-avrow .nm { font-size: 13px; font-weight: var(--weight-medium); flex: 1; min-width: 0; }
.pa-avrow .hint { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }

/* ── Goal version history drawer (2026-06-10, version-history-drawer
   mockup) — read-only timeline; chip color = bump kind. ── */
.gvh-legend { font-size: var(--type-caption); color: var(--ink-muted); margin: 10px 0 4px; }
.gvh-tl { position: relative; margin-left: 6px; }
.gvh-tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--border-subtle); }
.gvh-ve { position: relative; padding: 10px 0 12px 26px; }
.gvh-ve::before {
  content: ""; position: absolute; left: 0; top: 16px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface-card); border: 3px solid var(--border-default);
}
.gvh-ve.is-minor::before { border-color: var(--tone-caution-strong); }
.gvh-ve.is-major::before { border-color: var(--tone-danger-strong); }
.gvh-ve.is-initial::before { border-color: var(--tone-info-strong); }
.gvh-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gvh-chip {
  font-size: 11.5px; font-weight: var(--weight-bold); border-radius: var(--radius-pill);
  padding: 1px 9px; font-variant-numeric: tabular-nums;
  background: var(--surface-sunken); color: var(--ink-muted);
}
.gvh-chip.is-minor { background: var(--tone-caution-bg); color: var(--tone-caution-fg); }
.gvh-chip.is-major { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.gvh-chip.is-initial { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.gvh-when { font-size: 12px; color: var(--ink-muted); }
.gvh-cur {
  font-size: 10px; font-weight: var(--weight-bold); color: var(--tone-info-fg);
  background: var(--tone-info-bg); border-radius: var(--radius-pill); padding: 1px 8px;
}
.gvh-changes { margin-top: 6px; }
.gvh-chg { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 3px 0; }
.gvh-chg .sec { font-weight: var(--weight-semibold); color: var(--ink-soft); white-space: nowrap; flex: none; }
.gvh-chg .what { color: var(--ink-muted); font-size: 12.5px; }

/* ── Stoa Phase D: Thesis reading view ───────────────────────────────── */
.thesis-view-toggle { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.tv-seg {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: var(--type-meta); font-weight: var(--weight-medium);
  color: var(--ink-soft); padding: 5px 12px; border-radius: var(--radius-sm);
}
.tv-seg.is-active { background: var(--surface-card); color: var(--ink); box-shadow: var(--elev-1); font-weight: var(--weight-semibold); }

.thesis-reading-prose {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.7;
  color: var(--ink); max-width: 720px;
}
.thesis-reading-prose h2 { font-family: var(--font-sans); font-size: var(--type-h2); font-weight: var(--weight-bold); margin: 1.6em 0 0.5em; letter-spacing: -0.01em; scroll-margin-top: 100px; }
.thesis-reading-prose h3 { font-family: var(--font-sans); font-size: var(--type-h3); font-weight: var(--weight-semibold); margin: 1.3em 0 0.4em; scroll-margin-top: 100px; }
.thesis-reading-prose p { margin: 0 0 1em; }
.thesis-reading-prose ul, .thesis-reading-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.thesis-reading-prose li { margin: 0.3em 0; }
.thesis-reading-prose blockquote {
  margin: 1em 0; padding: 0.5em 1em; border-left: 3px solid var(--accent-default);
  background: var(--accent-soft-bg); color: var(--ink-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.thesis-reading-prose strong { font-weight: 700; }
.thesis-reading-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }

.thesis-toc { margin: 0 0 18px; }
.thesis-toc-title { font-size: var(--type-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: var(--weight-semibold); margin-bottom: 6px; }
.thesis-toc nav { display: flex; flex-direction: column; gap: 2px; }
.thesis-toc nav a { font-size: var(--type-meta); color: var(--ink-soft); text-decoration: none; padding: 4px 8px; border-radius: var(--radius-sm); }
.thesis-toc nav a:hover { background: var(--surface-sunken); color: var(--ink); }

@media (min-width: 900px) {
  .thesis-reading-view { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 32px; align-items: start; }
  .thesis-reading-prose { order: 1; }
  .thesis-toc { order: 2; position: sticky; top: 88px; margin: 0; }
}

/* ── STOA THESIS — structured section editors (Stage 2) ─────────────── */
/* `display:` rules below override the `hidden` attribute, so the toggle's
   `hidden` would be ignored — restore it explicitly (higher specificity wins
   over the .class and the @media grid rule). Mirrors .pillar-prose-popover. */
.thesis-reading-view[hidden], .thesis-edit-view[hidden] { display: none; }
.thesis-editor-main { display: flex; flex-direction: column; gap: 16px; }
.te-section { scroll-margin-top: 120px; }
.thesis-edit-toc .thesis-toc-title { margin-bottom: 6px; }
@media (min-width: 900px) {
  .thesis-editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 32px; align-items: start; }
  .thesis-editor-main { order: 1; }
  .thesis-edit-toc { order: 2; position: sticky; top: 88px; margin: 0; }
}
@media (max-width: 899px) { .thesis-edit-toc { display: none; } }
/* Hard Constraints — editable cap rows */
.te-caps-edit { display: flex; flex-direction: column; gap: 8px; }
.te-cap-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.te-cap-row .te-cap-label { flex: 1 1 160px; color: var(--ink-soft); }
.te-cap-input { width: 90px; min-height: 0; height: auto; }
.te-cap-pct { color: var(--ink-muted); }
.te-cap-nocap { display: inline-flex; align-items: center; gap: 5px; font-size: var(--type-meta); color: var(--ink-soft); white-space: nowrap; }
.te-cap-nocap input { width: auto; }

/* ── STOA THESIS — rail-navigated page (Stage 2 redesign) ─────────── */
.tx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tx-head .tx-title { margin: 0; }
.tx-head .badge-ver { font-size: 12px; color: var(--ink-muted); border: 1px solid var(--border-soft); border-radius: 6px; padding: 2px 8px; text-decoration: none; }
.thesis-view-toggle { margin-left: auto; }

.tx-rail-link { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 14px; }
.tx-rail-link.on { background: var(--surface-sunken); color: var(--accent); font-weight: 600; }
.tx-rail-div { display: block; border-top: 1px solid var(--border-soft); margin: 12px 8px; }
.tx-rail-util { display: block; }
.tx-rail-util a { display: block; padding: 6px 12px; color: var(--ink-muted); font-size: 13px; text-decoration: none; }
.tx-rail-util a:hover { color: var(--ink); }

.trd-sec { margin-bottom: 34px; scroll-margin-top: calc(var(--header-h) + var(--tx-head-h) + 16px); }
.trd-sec > h2 { font-size: 20px; border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; margin: 0 0 14px; }
.trd-h3 { font-size: 16px; margin: 0 0 4px; }
.trd-h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 14px 0 6px; }
.trd-block { margin-bottom: 16px; }
.trd-sec .prose { font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.65; color: var(--ink); max-width: 680px; }
.trd-sec .prose p { margin: 0 0 10px; }
.trd-list { margin: 0; padding-left: 20px; } .trd-list li { margin: 5px 0; line-height: 1.5; }
.trd-notes { display: flex; flex-direction: column; gap: 10px; }
.trd-note { padding: 12px 14px; background: var(--surface-sunken); border: 1px solid var(--border-soft); border-radius: 10px; }
.trd-note-date { font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.trd-note-body { line-height: 1.55; }
.trd-caps { list-style: none; padding: 0; margin: 0; max-width: 420px; }
.trd-caps li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.trd-caps .mono { font-family: var(--font-mono); font-weight: var(--weight-semibold); }

.pl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pl-col h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.pl-col ul { margin: 0; padding-left: 18px; } .pl-col li { margin: 5px 0; }
.pl-col .band { color: var(--ink-muted); font-size: 12.5px; }

/* No overflow:hidden — it would break the sticky (frozen) header row. */
.tg { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-card); }
.tg-row { display: grid; grid-template-columns: 1.3fr 1.4fr 120px; }
.tg-row.tg-h { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.tg-row:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
/* Zebra striping on the data rows (header is child 1; stripe even data rows). */
.tg-row:nth-child(even):not(.tg-h) { background: var(--surface-sunken); }
.tg-row > div { padding: 11px 13px; border-top: 1px solid var(--border-soft); font-size: 13.5px; }
.tg-row.tg-h { background: var(--surface-sunken); }
.tg-row.tg-h > div { border-top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); font-weight: var(--weight-semibold); }
.tg-scope { font-size: 11px; color: var(--ink-muted); }
.tg-action { display: flex; align-items: baseline; gap: 7px; }
.tg-arrow { color: var(--accent); font-weight: var(--weight-semibold); flex: none; }
.te-pct-wrap { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
/* Custom-constraint row = single row (name + % + actions), like the default caps.
   Higher specificity than `.te-item, .te-add { display:grid }` (defined later). */
.te-item.te-cstr, .te-add.te-cstr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.te-cstr .te-title { flex: 1 1 220px; min-height: 0; height: auto; }
.te-cstr .te-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Standard inline delete-confirm armed state — app-wide (see armConfirm in
   base.html). Works on any button class; transient state, so !important is OK. */
.is-confirming { color: #b91c1c !important; border-color: #b91c1c !important; font-weight: var(--weight-semibold); }
/* FILLED buttons (e.g. the green .btn-refresh / .btn-primary) must flip to a
   SOLID red "Confirm?" — red text on a green fill is unreadable. More specific
   than the rule above, so it wins the !important tie. */
.btn-refresh.is-confirming,
.btn-primary.is-confirming,
.btn-auth-primary.is-confirming,
.v2c .btn-primary.is-confirming { background: #b91c1c !important; color: #fff !important; border-color: #b91c1c !important; }
.bdg { display: inline-block; font-size: 11px; font-weight: var(--weight-semibold); padding: 3px 9px; border-radius: 999px; }
.bdg-major { background: #fde7e7; color: #b91c1c; } .bdg-moderate { background: #fdf0e0; color: #b45309; } .bdg-minor { background: #eaeefe; color: #4338ca; }

.ted-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ted-head h2 { margin: 0; font-size: 20px; }

@media (min-width: 900px) {
  .thesis-railed { display: grid; grid-template-columns: 204px minmax(0,1fr); gap: 32px; align-items: start; }
  /* Pin the title+toggle under the dark bar, then the rail under that, so both
     stay visible while the document scrolls. Heights are measured (see base.html
     --header-h / --tx-head-h) so the offsets can't drift from the real chrome. */
  .tx-head { position: sticky; top: var(--header-h); z-index: 9; background: var(--bg-page); padding: 8px 0; margin-bottom: 10px; }
  .thesis-rail { position: sticky; top: calc(var(--header-h) + var(--tx-head-h)); max-height: calc(100vh - var(--header-h) - var(--tx-head-h) - 24px); overflow-y: auto; }
  /* Triggers table header freezes while scrolling the table (below the pinned title bar). */
  .tg-row.tg-h { position: sticky; top: calc(var(--header-h) + var(--tx-head-h)); z-index: 5; }
}
@media (max-width: 899px) {
  /* Mobile: pin the title+toggle and the chip strip under the dark bar so they
     stay visible while the document scrolls (scrollspy highlights chips). */
  .tx-head { position: sticky; top: var(--header-h); z-index: 9; background: var(--bg-page); padding: 8px 0; margin-bottom: 0; }
  .thesis-rail { position: sticky; top: calc(var(--header-h) + var(--tx-head-h)); z-index: 8; background: var(--bg-page);
    display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border-soft); -webkit-overflow-scrolling: touch; }
  .tx-rail-link { white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--surface-sunken); }
  .tx-rail-link.on { background: var(--accent); color: #fff; }
  .tx-rail-div { display: none; }
  .tx-rail-util { display: contents; }
  .tx-rail-util a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--surface-sunken); }
  /* The chip strip stacks above the content on mobile, so a jumped-to section
     must clear the banner + title row + the strip itself (--tx-rail-h). */
  .trd-sec { scroll-margin-top: calc(var(--header-h) + var(--tx-head-h) + var(--tx-rail-h) + 12px); }
  .pl-cols { grid-template-columns: 1fr; gap: 14px; }
  .tg-row { grid-template-columns: 1fr; padding: 8px 0; border-top: 1px solid var(--border-soft); }
  .tg-row.tg-h { display: none; }
  .tg-row > div { border-top: 0; padding: 3px 13px; }
}
.te-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.te-section-head h3 { margin: 0 0 4px; }
.te-subhead { margin: 16px 0 6px; font-size: var(--type-body); }
.te-subhead .settings-hint { font-weight: var(--weight-regular); }
.te-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.te-item, .te-add {
  display: grid; gap: 8px; padding: 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.te-add { background: transparent; border-style: dashed; }
/* The shared .thesis-input is sized for textareas (min-height:100px); reset
   single-line controls so the title input + location select aren't giant. */
.te-title { min-height: 0; height: auto; font-weight: var(--weight-semibold); resize: none; }
.te-loc { min-height: 0; height: auto; max-width: 260px; resize: none; }
.te-body { min-height: 84px; resize: vertical; line-height: 1.5; }
.te-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.te-move {
  border: 1px solid var(--border-soft); background: var(--surface);
  border-radius: var(--radius-sm); width: 28px; height: 28px; cursor: pointer;
  color: var(--ink-soft); line-height: 1;
}
.te-move:hover { background: var(--surface-sunken); color: var(--ink); }
.te-date { font-size: var(--type-meta); margin-left: auto; }
.te-caps { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.te-caps li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.te-cap-label { color: var(--ink-soft); }
.te-cap-val { font-family: var(--font-mono); font-weight: var(--weight-semibold); }

/* ============================================================================
   MULTI-USER AUTH PAGES (Phase 0) — standalone /login + forced change-password.
   Scoped under .auth-body so nothing leaks into the app shell. Tokens reuse the
   Stoa :root palette; literals only where the mockup diverges.
   ============================================================================ */
.auth-body { margin: 0; background: var(--surface-page); color: var(--ink);
  font-family: var(--font-sans, "Geist", system-ui, sans-serif); min-height: 100vh; }

/* --- Login --- */
.auth-body .login { min-height: 100vh; background: linear-gradient(180deg,#fafaf9 0%,#f5f5f4 100%);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-body .login-card { width: 100%; max-width: 380px; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  padding: 40px 36px; box-shadow: var(--shadow-md, 0 4px 12px rgba(15,18,23,.06)); }
.auth-body .lb { text-align: center; margin-bottom: 28px; }
.auth-body .lb .mark { display: inline-flex; margin-bottom: 10px; }
.auth-body .lb h1 { font-size: 30px; margin: 0 0 4px; font-weight: 600; letter-spacing: -0.02em; }
.auth-body .lb .tag { color: var(--ink-muted); font-style: italic;
  font-family: "Source Serif 4", Georgia, serif; font-size: 14px; }
.auth-body .gbtn { width: 100%; background: var(--surface-card); border: 1px solid var(--border-default);
  color: var(--ink); padding: 11px; border-radius: 8px; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  font-family: inherit; text-decoration: none; }
.auth-body .gbtn:hover { background: var(--surface-sunken); }
.auth-body .div-or { display: flex; align-items: center; gap: 12px; color: var(--ink-muted);
  font-size: 11px; margin: 22px 0; text-transform: uppercase; letter-spacing: .1em; }
.auth-body .div-or::before, .auth-body .div-or::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.auth-body .login-form .fr { margin-bottom: 12px; }
.auth-body .login-actions { margin-top: 8px; }
.auth-body .login-actions .btn-auth-primary { width: 100%; }
.auth-body .lhelp { text-align: center; margin-top: 18px; font-size: 12px; color: var(--ink-muted); }

/* --- Shared form bits --- */
.auth-body .fr { margin-bottom: 14px; }
.auth-body .fr label.lbl { display: block; font-size: 12.5px; color: var(--ink-soft);
  margin-bottom: 6px; font-weight: 500; }
/* Login form uses uppercase tracked labels; the change-password form keeps
   sentence case (matches mockups 01 vs 08). */
.auth-body .login-form .fr label.lbl { font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-muted); }
.auth-body .fr input[type=text], .auth-body .fr input[type=email], .auth-body .fr input[type=password] {
  width: 100%; border: 1px solid var(--border-default); border-radius: 6px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: var(--surface-card); }
.auth-body .fr input:focus { outline: none; border-color: var(--accent-default);
  box-shadow: 0 0 0 3px var(--accent-soft-bg); }
.auth-body .help { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }
.auth-body .btn-auth-primary { background: var(--accent-default); color: #fff;
  border: 1px solid var(--accent-default); border-radius: 6px; padding: 11px 16px;
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; }
.auth-body .btn-auth-primary:hover { background: var(--accent-hover-v1); border-color: var(--accent-hover-v1); }
.auth-body .auth-error { background: var(--tone-danger-bg, #fee2e2); border: 1px solid var(--tone-danger-border, #fca5a5);
  color: var(--tone-danger-fg, #b91c1c); padding: 9px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }

/* --- Forced password change --- */
.auth-body .auth-darkbar { background: var(--dark, #18181b); color: var(--surface-card);
  padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.auth-body .auth-darkbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.auth-body .auth-darkbar .brand-word { color: var(--surface-card); }
.auth-body .auth-darkbar-email { color: var(--dark-fg-muted, #a1a1aa); font-size: 14px; }
.auth-body .pwbg { background: var(--surface-page); display: flex; align-items: flex-start;
  justify-content: center; padding: 60px 24px 0; min-height: calc(100vh - 49px); }
.auth-body .pwc { width: 100%; max-width: 480px; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,18,23,.04)); }
.auth-body .pwc h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.auth-body .pwc .sb { color: var(--ink-muted); margin: 0 0 22px; font-size: 14px; }
.auth-body .pwc .why { background: var(--tone-caution-bg); border: 1px solid var(--tone-caution-border);
  color: var(--tone-caution-fg); padding: 11px 14px; border-radius: 6px; font-size: 13px;
  margin-bottom: 24px; display: flex; gap: 10px; align-items: flex-start; }
.auth-body .pwc .why svg { flex-shrink: 0; margin-top: 1px; }
.auth-body .pwc .strength { height: 4px; border-radius: 2px; background: var(--surface-sunken); margin-top: 6px; overflow: hidden; }
.auth-body .pwc .strength .bar { height: 100%; background: var(--tone-positive-fg); border-radius: 2px; transition: width .15s; }
.auth-body .pwc .fa { display: flex; justify-content: flex-end; padding-top: 14px;
  border-top: 1px solid var(--border-subtle); margin-top: 18px; }

/* ============================================================================
   STOA ADMINISTRATOR — Users management (Multi-User Phase 0, patch #5b).
   Scoped under .admin-users-section. Adapted from the Phase 0 mockups; reuses
   the Stoa :root tokens.
   ============================================================================ */
.admin-users-section { margin-bottom: 28px; }
/* The `hidden` attribute must win over the flex/block display rules below. */
.admin-users-section [hidden] { display: none !important; }
.admin-users-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.admin-users-head .settings-subhead { margin: 0; }
.admin-count { font-size: 13px; color: var(--ink-muted); font-weight: 400; margin-left: 8px; }
.btn-admin-new, .btn-admin-create { background: var(--accent-default); color: #fff;
  border: 1px solid var(--accent-default); border-radius: 6px; padding: 8px 14px;
  font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-admin-new:hover, .btn-admin-create:hover { background: var(--accent-hover-v1); border-color: var(--accent-hover-v1); }
.btn-uc-sm { background: var(--surface-card); color: var(--ink-soft); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-uc-sm:hover { background: var(--surface-sunken); }
.btn-uc-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.btn-uc-ghost:hover { background: var(--surface-sunken); }
.btn-uc-danger { background: var(--tone-danger-fg, #b91c1c); color: #fff; border: 1px solid var(--tone-danger-fg, #b91c1c);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }

/* User card */
.admin-users-section .uc { background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,18,23,.04)); }
.admin-users-section .uc.armed { border-color: var(--tone-danger-border, #fca5a5); background: #fef7f7; }
.admin-users-section .uc .um { flex: 1; min-width: 0; }
.admin-users-section .uc .email { font-weight: 500; font-size: 14.5px; color: var(--ink); margin: 0 0 3px; }
.admin-users-section .uc .meta { font-size: 12.5px; color: var(--ink-muted); display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; }
.admin-users-section .uc .meta .sep { color: var(--border-default); }
.admin-users-section .uc-reset-link { color: var(--accent-default); text-decoration: none; font-weight: 500; }
.admin-users-section .uc-reset-link:hover { text-decoration: underline; }
.admin-users-section .uc-audit-link { color: var(--accent-default); text-decoration: none; font-weight: 500; }
.admin-users-section .uc-audit-link:hover { text-decoration: underline; }
.admin-users-section .uc-deactivated-note { color: var(--tone-warn-fg, #92400e); font-weight: 500; }
.admin-users-section .uc-active-toggle { background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 6px 12px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.admin-users-section .uc-active-toggle:hover { background: var(--surface-sunken); }
/* Audit timeline (lazy-loaded into a card) */
.admin-users-section .uc-audit { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); width: 100%; }
.admin-users-section .audit-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.admin-users-section .audit-tab { background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--ink-muted); cursor: pointer; font-family: inherit; }
.admin-users-section .audit-tab.is-active { background: var(--accent-soft-bg); color: var(--accent-on-soft); border-color: transparent; font-weight: 600; }
.admin-users-section .audit-group { margin-bottom: 12px; }
.admin-users-section .audit-group-label { font: 600 11px var(--font-mono, monospace); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; }
.admin-users-section .audit-row { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; color: var(--ink-soft); }
.admin-users-section .audit-time { flex: 0 0 64px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.admin-users-section .audit-text { flex: 1; }
.admin-users-section .audit-empty { font-size: 12.5px; color: var(--ink-muted); padding: 4px 0; }
.admin-users-section .uc-reset-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.admin-users-section .uc-reset-input { border: 1px solid var(--border-default); border-radius: 6px;
  padding: 7px 10px; font-size: 13px; font-family: inherit; min-width: 220px; }
.admin-users-section .uc-reset-input:focus { outline: none; border-color: var(--accent-default);
  box-shadow: 0 0 0 3px var(--accent-soft-bg); }
.admin-users-section .uc-inline-err { color: var(--tone-danger-fg, #b91c1c); font-size: 12px; }
.admin-users-section .uc-controls { display: flex; align-items: center; gap: 10px; }
.admin-users-section .you-tag { background: var(--accent-soft-bg); color: var(--accent-on-soft);
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: .06em; }
.admin-users-section .role-dd { background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 6px 10px; font-size: 13px; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.admin-users-section .role-dd:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-sunken); }
.admin-users-section .uc-x { width: 32px; height: 32px; border: 1px solid var(--border-default);
  border-radius: 6px; background: var(--surface-card); color: var(--ink-muted); cursor: pointer; font-size: 14px; line-height: 1; }
.admin-users-section .uc-x:hover { background: #fef7f7; color: var(--tone-danger-fg, #b91c1c); border-color: var(--tone-danger-border, #fca5a5); }
.admin-users-section .uc-arm { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }
.admin-users-section .arm-q { color: var(--tone-danger-fg, #b91c1c); font-size: 13px; font-weight: 500;
  text-align: right; padding-right: 4px; }

/* Add-user form card */
.admin-users-section .form-card { background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 14px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,18,23,.04)); }
.admin-users-section .form-card .fh { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.admin-users-section .form-card .fh h3 { margin: 0; font-size: 16px; font-weight: 600; }
.admin-users-section .form-card .fh-x { border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; font-size: 16px; }
.admin-users-section .form-card .fr { margin-bottom: 14px; }
.admin-users-section .form-card label.lbl { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 500; }
.admin-users-section .form-card input[type=text], .admin-users-section .form-card input[type=email] {
  width: 100%; border: 1px solid var(--border-default); border-radius: 6px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: var(--surface-card); }
.admin-users-section .form-card input:focus { outline: none; border-color: var(--accent-default); box-shadow: 0 0 0 3px var(--accent-soft-bg); }
.admin-users-section .form-card .ir { display: flex; gap: 8px; }
.admin-users-section .form-card .ir input { flex: 1; }
.admin-users-section .form-card .help { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }
.admin-users-section .form-card .radio { display: flex; gap: 24px; padding-top: 4px; }
.admin-users-section .form-card .radio label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.admin-users-section .form-card .radio input { accent-color: var(--accent-default); }
.admin-users-section .form-card .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.admin-users-section .form-card .check input { accent-color: var(--accent-default); }
.admin-users-section .form-card .fa { display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--border-subtle); margin-top: 18px; padding-top: 14px; }
.admin-users-section .admin-form-err { color: var(--tone-danger-fg, #b91c1c); font-size: 13px; margin-bottom: 10px; }

/* One-time password reveal */
.admin-users-section .reveal { background: linear-gradient(180deg,#ecfdf5 0%,#fff 100%);
  border: 1px solid #a7f3d0; border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,18,23,.04)); }
.admin-users-section .reveal .rh { display: flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--accent-on-soft); font-size: 14px; margin-bottom: 10px; }
.admin-users-section .reveal .pwbox { background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 10px 14px; font-family: var(--font-mono, monospace); font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-users-section .reveal .one-time { font-size: 12px; color: var(--ink-muted); margin-top: 8px; }

/* Phase 0 caveat notice */
.admin-users-section .notice { margin-top: 18px; padding: 12px 14px; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-default);
  border-radius: var(--radius-md); color: var(--ink-soft); font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.admin-users-section .notice-ic { color: var(--accent-default); flex-shrink: 0; }

/* ============================================================================
   STANDARD ACTION BUTTONS — single source of truth (2026-06-04).
   ----------------------------------------------------------------------------
   Save / Edit / View / Add / Make-default / Delete all share ONE box: a fixed
   height, font, and shape so they never drift. Only WIDTH grows with longer
   text. Canonical reference: the Investor Profile editor's Edit/Save button.
   This block is last in the file on purpose so it wins over the legacy
   per-component button rules above.

   NEW buttons — use one of:
     .btn-action   → primary, filled accent     (Save / Edit / View / Add / …)
     .btn-neutral  → secondary, outlined         (Make default / Cancel / Dismiss)
     .btn-delete   → destructive, filled red     (Delete / Remove)
   Do NOT set height / font-size / border-radius / padding on action buttons
   anywhere else — change them here. The big selector below only normalizes the
   BOX (height/font/shape/padding) of the legacy per-component button classes; it
   deliberately does NOT touch their background/border, so each keeps its own
   semantic color (accept = green, decline/dismiss = red outline, etc.). Only the
   canonical .btn-action / .btn-neutral / .btn-delete classes get an explicit
   color below, and every clear delete/remove shares the one red.
   ============================================================================ */
.btn-action, .btn-neutral, .btn-delete,
.btn-refresh, .btn-goal-make-default, .btn-drift-action, .sig-btn,
.btn-primary, .btn-secondary, .btn-ghost, .btn-cancel,
.btn-save-thresholds, .btn-load-logs, .btn-diff-apply, .btn-diff-apply-destructive,
.btn-pillars-classify-apply, .btn-pillars-cancel, .btn-apply-one, .btn-apply-all,
.btn-accept, .btn-accept-confirm, .btn-edit-accept,
.btn-decline-toggle, .btn-decline-confirm, .btn-remove-confirm,
.btn-discuss, .btn-dismiss, .btn-discard, .btn-ap-status,
.btn-trigger-act, .btn-trigger-update-policy, .btn-trigger-snooze, .btn-trigger-dismiss,
.btn-uc-sm, .btn-uc-ghost, .btn-uc-danger,
.btn-cost-reset, .btn-banner-keep, .btn-banner-archive, .btn-banner-close-incomplete,
.btn-manage-accounts, .btn-bucket-remove, .btn-holding-edit-weights,
.btn-admin-new, .btn-admin-create, .btn-debate, .btn-debate-verdict,
.btn-prompt-toggle, .ap-bulk-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;              /* fixed — the anti-drift lever */
  padding: 0 12px;           /* horizontal only; width grows with text */
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border-radius: 6px;        /* uniform shape (overrides legacy pills/4px) */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}

/* primary — filled accent (canonical classes only; folded legacy classes keep
   their own background/border, just normalized box above). */
.btn-action, .btn-refresh, .sig-btn-primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.btn-action:hover:not(:disabled), .btn-refresh:hover:not(:disabled),
.sig-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover);
}

/* secondary / neutral — outlined */
.btn-neutral, .btn-goal-make-default, .btn-drift-action, .sig-btn {
  background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);
}
.btn-neutral:hover:not(:disabled), .btn-goal-make-default:hover:not(:disabled),
.btn-drift-action:hover:not(:disabled), .sig-btn:hover:not(:disabled) {
  color: var(--text); border-color: var(--border-strong, var(--text-muted));
}
.sig-btn-ghost { background: var(--surface-sunken); color: var(--ink); border-color: transparent; }

/* destructive — ONE red for every delete/remove (the High-urgency badge red) */
.btn-delete, .btn-remove-confirm, .btn-uc-danger, .btn-diff-apply-destructive,
.btn-bucket-remove, .btn-danger, .ap-bulk-delete-btn {
  background: var(--sev-red); color: #fff; border: 1px solid var(--sev-red);
}
.btn-delete:hover:not(:disabled), .btn-remove-confirm:hover:not(:disabled),
.btn-uc-danger:hover:not(:disabled), .btn-diff-apply-destructive:hover:not(:disabled),
.btn-bucket-remove:hover:not(:disabled), .btn-danger:hover:not(:disabled),
.ap-bulk-delete-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--sev-red) 88%, #000);
  border-color: color-mix(in srgb, var(--sev-red) 88%, #000);
  color: #fff;
}

/* shared disabled state */
.btn-action:disabled, .btn-neutral:disabled, .btn-delete:disabled,
.btn-refresh:disabled, .btn-goal-make-default:disabled, .btn-drift-action:disabled,
.ap-bulk-delete-btn:disabled { opacity: 0.6; cursor: default; }

/* Right-align Delete in the action rows where it sat right before (it used to
   inherit margin-left:auto from the old shared .btn-goal-make-default class). */
.te-actions .btn-delete, .namedrow-actions .btn-delete,
.pillar-edit-actions .btn-delete { margin-left: auto; }

/* ──────────────────────────────────────────────────────────────────────
   Balance sheet — Net Worth page (Chunk 6C)
   Dense, filterable Assets/Liabilities list. Liabilities render red/negative;
   the value sign comes from the server (leading − + .change-neg).
   ────────────────────────────────────────────────────────────────────── */
.bs-view-toggle { display: inline-flex; gap: 4px; }

.bs-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 16px;
}
.bs-header .stat { min-height: 0; padding: 10px 12px; }
.bs-header .stat-value { font-size: clamp(14px, 4.4vw, 19px); white-space: nowrap; }

.bs-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 0; margin-bottom: 8px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.bs-seg { display: inline-flex; background: var(--surface-sunken); border-radius: 8px; padding: 2px; }
.bs-seg-opt {
  position: relative; font-size: 13px; padding: 4px 12px; border-radius: 6px;
  cursor: pointer; color: var(--text-muted); user-select: none;
}
.bs-seg-opt.is-active { background: var(--surface-card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: var(--weight-semibold); }
.bs-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bs-group { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.bs-group select { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-card); color: var(--ink); }
.bs-search { font-size: 13px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; min-width: 200px; flex: 1 1 200px; background: var(--surface-card); color: var(--ink); }
.bs-synced { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.bs-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bs-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); color: var(--text-muted); user-select: none;
}
.bs-chip.is-active { background: var(--accent-soft, #ecfdf5); border-color: var(--accent-default, #34d399); color: var(--ink); font-weight: var(--weight-semibold); }
.bs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bs-chip-n { opacity: 0.6; margin-left: 2px; }

.bs-empty { padding: 24px 0; }
.bs-list { display: flex; flex-direction: column; gap: 16px; }

/* Collapsed "Hidden accounts" section at the bottom of the balance sheet —
   excluded from totals but listed here so they can be reopened + unhidden. */
.bs-hidden { margin-top: 20px; border-top: 1px solid var(--border-soft); }
.bs-hidden-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 4px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted);
}
.bs-hidden-summary::-webkit-details-marker { display: none; }
.bs-hidden-chevron { font-size: 10px; transition: transform 0.15s ease; }
.bs-hidden[open] .bs-hidden-chevron { transform: rotate(90deg); }
.bs-hidden-label { font-weight: var(--weight-semibold); }
.bs-hidden-count { font-size: 11px; }
.bs-hidden-hint { text-transform: none; letter-spacing: 0; font-size: 11px; }
.bs-hidden-subtotal { margin-left: auto; font-size: 13px; color: var(--ink-muted); }
.bs-hidden-list { margin-top: 4px; }
.bs-hidden-list .bs-row { opacity: 0.7; }
.bs-hidden-list .bs-row:hover { opacity: 1; }
.bs-group-section { display: flex; flex-direction: column; }
.bs-group-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border-soft);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.bs-group-name { font-weight: var(--weight-semibold); color: var(--ink-muted); }
.bs-group-count { font-size: 11px; }
.bs-group-subtotal { margin-left: auto; font-size: 13px; }

.bs-row {
  display: grid;
  grid-template-columns: 20px 14px 1fr auto auto;
  grid-template-areas: "check health name meta value";
  align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.bs-row:hover { background: var(--surface-sunken); }
.bs-row:focus-visible { outline: 2px solid var(--accent-default, #34d399); outline-offset: -2px; }
.bs-batch-checkbox { grid-area: check; cursor: pointer; justify-self: center; }
.bs-row-health { grid-area: health; width: 8px; height: 8px; border-radius: 999px; }
.bs-row-health.hd-manual, .bs-row-health.hd-never { background: #9ca3af; }
.bs-row-name {
  grid-area: name; min-width: 0; font-weight: var(--weight-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-row-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.bs-row-value { grid-area: value; text-align: right; font-size: 13px; }

.bs-total-row {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 12px 14px;
  background: var(--bar-bg, #0c0a09); color: var(--bar-text, #fafaf9);
  border-radius: 10px;
}
.bs-total-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.bs-total-value { font-size: 18px; font-weight: var(--weight-semibold); }

@media (max-width: 768px) {
  .bs-row {
    grid-template-columns: 20px 12px 1fr auto;
    grid-template-areas:
      "check health name value"
      "check health meta meta";
    row-gap: 3px;
  }
  .bs-batch-checkbox { align-self: center; }
  .bs-row-value { align-self: center; }
  .bs-search { min-width: 140px; }
  .bs-hidden-hint { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Batch-select bar (Chunk 6D) — appears when ≥1 balance-sheet row is ticked.
   ────────────────────────────────────────────────────────────────────── */
.batch-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 12px; padding: 8px 12px;
  background: var(--surface-card); border: 1px solid var(--accent-default, #34d399);
  border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.batch-count { font-weight: var(--weight-semibold); font-size: 13px; }
.batch-sep { width: 1px; align-self: stretch; background: var(--border-soft); }
.batch-group { display: inline-flex; align-items: center; gap: 6px; }
.batch-group-label { font-size: 12px; color: var(--text-muted); }
.batch-btn {
  font-size: 13px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-sunken); color: var(--ink);
}
.batch-btn:hover { background: var(--surface-card); border-color: var(--accent-default, #34d399); }
.batch-btn-danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.batch-select {
  font-size: 13px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-card); color: var(--ink);
}
.batch-clear {
  margin-left: auto; font-size: 12px; color: var(--text-muted);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────
   Slide-over drawer (Chunk 6D) — side-aware account editor.
   ────────────────────────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 10, 9, 0.38);
}
/* Mobile-FIRST: the editor is a thumb-reachable BOTTOM SHEET that slides up with
   the account list dimmed behind it (mockup "06 — Mobile · list + bottom sheet").
   Defining the sheet as the base (rather than overriding the desktop side panel)
   keeps the mobile rule from ever inheriting the desktop `top:0`, which on iOS
   Safari could snap the sheet to full height. Desktop becomes a side panel via
   the min-width override below. `dvh` tracks the dynamic viewport so the URL bar
   collapsing doesn't grow the sheet toward full-screen. */
.drawer-host {
  position: fixed; left: 0; right: 0; z-index: 61;
  /* Sit ABOVE the bottom tab bar: the sheet's bottom edge is the nav's top, so
     the Save/Cancel actions always clear the nav (padding-inside didn't work —
     .drawer-panel min-height:100% absorbed it). --nav-h is measured in base.html
     and already includes the home-indicator safe-area inset; 0 on desktop. */
  bottom: var(--nav-h, 0px);
  width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  background: var(--surface-card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.24);
  transform: translateY(120%); transition: transform 0.2s ease, visibility 0s linear 0.2s;
  /* P0-4 (UX Audit v2): a translated-but-visible sheet can paint as an empty
     shell mid-page when the document itself scrolls (iOS Safari URL-bar /
     overflow edge cases). Keep it truly hidden until invoked; the 0s-delayed
     visibility flip preserves the slide-out animation. */
  visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer-host.is-open { transform: translateY(0); visibility: visible; transition: transform 0.2s ease; }
/* Grabber handle (mobile sheet). */
.drawer-host .drawer-head::before {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 999px; background: var(--border);
}
@media (prefers-reduced-motion: reduce) {
  .drawer-host { transition: none; }
}
/* Desktop: a full-height right-side slide-over. */
@media (min-width: 769px) {
  .drawer-host {
    top: 0; right: 0; left: auto; bottom: 0;
    width: min(440px, 92vw);
    max-height: none;
    border-radius: 0;
    box-shadow: -8px 0 28px rgba(0,0,0,0.18);
    transform: translateX(100%);
  }
  .drawer-host.is-open { transform: translateX(0); }
  .drawer-host .drawer-head::before { display: none; }
}

.drawer-panel { display: flex; flex-direction: column; min-height: 100%; }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--surface-card); z-index: 1;
}
.drawer-title { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.drawer-name { font-weight: var(--weight-semibold); font-size: 15px; }
.drawer-inst { font-size: 12px; }
.drawer-source-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap;
}
.drawer-source-badge.is-manual { background: var(--accent-soft, #ecfdf5); color: var(--accent-strong, #047857); }
.drawer-close {
  font-size: 22px; line-height: 1; background: none; border: none;
  color: var(--text-muted); cursor: pointer; padding: 0 4px;
}
.drawer-close:hover { color: var(--ink); }

.drawer-form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 24px; }
.drawer-row { display: flex; flex-direction: column; gap: 4px; }
.drawer-label { font-size: 12px; color: var(--text-muted); font-weight: var(--weight-medium); }
.drawer-static { font-size: 13px; }
.drawer-input {
  font-size: 14px; padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-card); color: var(--ink);
  width: 100%;
}
.drawer-notes { min-height: 64px; resize: vertical; }
.drawer-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); font-weight: var(--weight-semibold);
}
.drawer-liability-fields { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.drawer-liability-fields[hidden] { display: none; }
.drawer-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-field { display: flex; flex-direction: column; gap: 4px; }
.drawer-scope { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
/* iOS-style switch: label on the left, toggle on the right (mockup 06/10). The
   markup is unchanged — we restyle the existing checkbox as a switch. */
.drawer-toggle {
  display: flex; flex-direction: row-reverse; align-items: center;
  justify-content: space-between; gap: 8px; font-size: 14px; cursor: pointer;
}
.drawer-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 42px; height: 25px; border-radius: 999px; cursor: pointer;
  background: var(--border); position: relative; transition: background 0.15s ease;
}
.drawer-toggle input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.15s ease;
}
.drawer-toggle input[type="checkbox"]:checked { background: var(--accent-strong, #047857); }
.drawer-toggle input[type="checkbox"]:checked::after { transform: translateX(17px); }
.drawer-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-default, #34d399); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .drawer-toggle input[type="checkbox"],
  .drawer-toggle input[type="checkbox"]::after { transition: none; }
}
.drawer-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.drawer-actions .btn-primary {
  background: var(--accent-strong, #047857); color: #fff; border-color: var(--accent-strong, #047857);
  margin-left: auto;
}
.drawer-actions .btn-primary:hover { filter: brightness(1.06); }
.drawer-err { font-size: 12px; color: #c0392b; }

/* Manual-account value updater inside the drawer (Chunk 6E). */
.drawer-value-form {
  margin: 16px 18px 0; padding: 12px; border-radius: 8px;
  background: var(--surface-sunken); display: flex; flex-direction: column; gap: 6px;
}
.drawer-value-row { display: flex; align-items: center; gap: 8px; }
.drawer-value-row .drawer-input { flex: 1; }
.drawer-value-saved { font-size: 12px; color: var(--accent-strong, #047857); }

/* ──────────────────────────────────────────────────────────────────────
   Manual account add-panel (Chunk 6E).
   ────────────────────────────────────────────────────────────────────── */
.add-panel {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--surface-card); border: 1px solid var(--accent-default, #34d399);
  border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; gap: 12px;
}
.add-head { display: flex; align-items: center; }
.add-title { font-weight: var(--weight-semibold); font-size: 14px; margin-right: auto; }
.add-seg { display: inline-flex; background: var(--surface-sunken); border-radius: 8px; padding: 2px; align-self: flex-start; }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.add-col-2 { grid-column: 1 / -1; }
.add-actions { display: flex; align-items: center; gap: 10px; }
.add-actions .btn-primary {
  background: var(--accent-strong, #047857); color: #fff; border-color: var(--accent-strong, #047857);
  margin-left: auto;
}
.add-actions .btn-primary:hover { filter: brightness(1.06); }
@media (max-width: 540px) {
  .add-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────
   Prompt version history (P15 / R-005) — Settings → AI Advisor → Prompts.
   ────────────────────────────────────────────────────────────────────── */
.prompt-history-view { margin-top: 10px; }
.ph-empty { padding: 8px 0; }
.ph-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ph-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px; border-bottom: 1px solid var(--border-soft);
}
.ph-row.is-current { background: var(--surface-sunken); border-radius: 6px; }
.ph-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.ph-ts { font-weight: var(--weight-medium); }
.ph-actor {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-muted);
}
.ph-current-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft, #ecfdf5); color: var(--accent-strong, #047857);
}
.ph-actions { display: inline-flex; gap: 6px; flex: none; }
.ph-btn {
  font-size: 12px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-card); color: var(--ink);
}
.ph-btn:hover { border-color: var(--accent-default, #34d399); }
.ph-btn-restore:hover { background: var(--accent-strong, #047857); color: #fff; border-color: var(--accent-strong, #047857); }
.ph-diff { margin-top: 8px; }
.ph-diff-same { padding: 8px 0; }
.ph-diff-pre {
  overflow-x: auto; font-size: 12px; line-height: 1.5;
  background: var(--surface-sunken); border-radius: 8px; padding: 10px 12px;
  border: 1px solid var(--border-soft);
}
.ph-diff-pre code { font-family: var(--font-mono, monospace); white-space: pre; }
.ph-diff-pre span { display: block; }
.ph-add { background: rgba(16,163,74,0.12); color: #15803d; }
.ph-del { background: rgba(220,38,38,0.10); color: #b91c1c; }
.ph-hunk { color: var(--text-muted); }

/* ──────────────────────────────────────────────────────────────────────
   Goal debt-payoff targets (Chunk 7) — goal editor section.
   ────────────────────────────────────────────────────────────────────── */
.dt-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px;
  background: var(--surface-sunken); font-size: 14px;
}
.dt-row-text { min-width: 0; }
.dt-read-row { display: flex; flex-direction: column; gap: 2px; }
.dt-remove {
  flex: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-card);
  color: var(--text-muted); font-size: 16px; line-height: 1;
}
.dt-remove:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.dt-add-form { display: flex; flex-direction: column; gap: 10px; }
.dt-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dt-field { display: flex; flex-direction: column; gap: 4px; }
.dt-field-wide { grid-column: 1 / -1; }
@media (max-width: 768px) { .dt-add-grid { grid-template-columns: 1fr; } }

/* ──────────────────────── Trusted Voices ──────────────────────── */
.voices-settings {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-card);
}
.voice-add { margin-bottom: 18px; }
/* The disclosure toggle is styled as the standard green button (matches the
   "+ Add Trigger" btn-refresh look). */
.voice-add > summary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  cursor: pointer; list-style: none;
}
.voice-add > summary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.voice-add[open] > summary { margin-bottom: 12px; }
.voice-add > summary::-webkit-details-marker { display: none; }
.voice-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 10px; }
.voice-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.voice-input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-card); color: var(--text); font-size: 14px;
}
.voice-kind { flex: 0 0 140px; }
.voice-pillars { min-height: 88px; }
.voice-field-label { font-size: 12px; color: var(--text-muted); }
.voice-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Colour the voice action buttons (the global .btn-primary/.btn-ghost only carry
   box geometry — their fill is scoped per-feature, like .drawer-actions). Primary
   = standard green accent; secondary = neutral outline; delete hovers red. */
.voice-btn { font-size: 13px; }
.voice-btn.btn-primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.voice-btn.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.voice-btn.btn-ghost {
  background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);
}
.voice-btn.btn-ghost:hover:not(:disabled) {
  color: var(--text); border-color: var(--border-strong, var(--text-muted));
}
.voice-btn.voice-btn-danger:hover:not(:disabled) {
  background: var(--sev-red); color: #fff; border-color: var(--sev-red);
}

.voices-group { margin-top: 22px; }
.voices-group-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin: 0 0 10px;
}
.voice-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-card); margin-bottom: 8px; padding: 0 12px;
}
.voice-card > summary {
  cursor: pointer; padding: 12px 0; list-style: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.voice-card > summary::-webkit-details-marker { display: none; }
.voice-name { font-weight: 600; color: var(--text); }
/* P0-5 (UX Audit v2): standard small mono-caps chip. Inside the suggested
   cards' column flexbox the tag used to stretch full-width and read as a
   disabled text input — voice-suggest-head keeps it inline with the name. */
.voice-kind-tag {
  font-size: 10.5px; font-family: var(--font-mono-v1);
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
  align-self: center; white-space: nowrap;
}
.voice-suggest-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voice-themes { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.voice-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-sunken, rgba(127,127,127,0.12)); color: var(--text-muted);
}
.voice-chip-general { font-style: italic; }
.voice-source { font-size: 12px; color: var(--text-muted); }
.voice-note { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }

.voices-group-suggested .voice-suggest {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px dashed var(--border); border-radius: 10px;
  padding: 12px; margin-bottom: 8px;
}
.voice-suggest-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.voice-suggest-text .voice-name { display: inline; margin-right: 6px; }
.voice-suggest-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 768px) {
  .voice-kind { flex: 1 1 auto; }
  .voice-suggest { flex-direction: column; }
  .voice-suggest-actions { width: 100%; }
}

/* Holding data controls (ticker drawer) — Sam 2026-06-15. */
.hd-menu { position: relative; }
.hd-menu > summary { list-style: none; cursor: pointer; }
.hd-menu > summary::-webkit-details-marker { display: none; }
.hd-menu-pop { position: absolute; top: 34px; right: 0; min-width: 168px; background: #fff; border: 1px solid #e7e5e4; border-radius: 11px; box-shadow: 0 12px 30px rgba(0,0,0,.16); padding: 5px; z-index: 20; }
.hd-menu-pop button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 10px; font: 500 13px system-ui, sans-serif; color: #0a0a0a; cursor: pointer; }
.hd-menu-pop button:hover { background: #fafaf9; }
.hd-menu-pop button.danger { color: #b91c1c; }
.hd-ignored { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; background: #fafaf9; border: 1px dashed #a8a29e; font-size: 12.5px; color: #404040; margin-bottom: 14px; }
.hd-ignored svg { width: 15px; height: 15px; color: #737373; flex: none; }
.hd-ignored .hd-restore { margin-left: auto; background: none; border: 0; color: #047857; font-weight: 700; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.hd-flag { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #a16207; margin-bottom: 12px; flex-wrap: wrap; }
.hd-flag svg { width: 14px; height: 14px; flex: none; }
.hd-flag a, .hd-flag .hd-linkbtn { color: #a16207; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: 0; font-size: 12.5px; padding: 0; }
.hd-fix { border: 1px solid #e7e5e4; border-radius: 12px; padding: 13px; background: #fafaf9; margin-bottom: 14px; }
.hd-fix label { display: block; font-size: 11.5px; color: #737373; margin-bottom: 6px; }
.hd-fix input { width: 100%; box-sizing: border-box; border: 1px solid #d6d3d1; border-radius: 9px; padding: 9px 11px; font: 500 13px ui-monospace, Menlo, monospace; background: #fff; }
.hd-fix-hint { font-size: 11.5px; color: #737373; margin-top: 7px; }
.hd-fix-row { display: flex; gap: 8px; margin-top: 10px; }
.hd-btn { border-radius: 9px; padding: 7px 13px; font: 600 12.5px system-ui, sans-serif; cursor: pointer; border: 1px solid transparent; background: #047857; color: #fff; }
.hd-btn.ghost { background: #fff; border: 1px solid #d6d3d1; color: #404040; }