/* After-Tax Performance panel — matches metrics-panel aesthetic */

:root {
  /* CANONICAL SURFACE TOKENS (2026-05-19 site-wide unification —
     CANONICAL-DARK-SURFACE-SPEC.md). This section had 7 different inset
     surface treatments; now there is exactly ONE elevated-card surface
     (--atp-bg-card) and ONE subtle well (--atp-well). --atp-bg and
     --atp-bg-soft are retained ONLY so legacy non-surface references keep
     resolving, but every card/panel/section now maps to the two canonical
     tokens or `transparent`. Do not reintroduce per-element surfaces. */
  --atp-bg: #ffffff;
  --atp-bg-soft: #f8fafc;
  --atp-bg-card: #ffffff;          /* THE elevated card surface (light) */
  --atp-well: #f1f3f7;             /* THE subtle well/track surface (light) */
  --atp-card-border: var(--fl-border, #e8e6e1); /* THE card hairline (light) */
  --atp-border: #e2e8f0;
  --atp-border-soft: #eef2f7;
  --atp-text: #0f172a;
  --atp-text-soft: #475569;
  --atp-text-muted: #94a3b8;
  --atp-accent: #2563eb;
  --atp-accent-hover: #1d4ed8;
  --atp-good: #10b981;
  --atp-impact: #ef4444;
  --atp-warn: #f59e0b;
  --atp-info: #0ea5e9;
  --atp-realized: #10b981;
  --atp-unrealized: #94a3b8;
  --atp-pretax: #10b981;
  --atp-aftertax: #64748b;
  --atp-donut-bg: #eef2f7;
  --atp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --atp-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --atp-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.18);
}

body.dark-mode {
  /* CANONICAL dark surfaces (CANONICAL-DARK-SURFACE-SPEC.md):
     elevated card = #1e293b, subtle well/track = rgba(255,255,255,0.04),
     section shell = transparent. --atp-bg / --atp-bg-soft kept only for
     legacy non-surface refs; all surfaces route to --atp-bg-card / --atp-well. */
  --atp-bg: #0f172a;
  --atp-bg-soft: var(--fl-window-mid);   /* v4: legacy soft surface → window tone */
  --atp-bg-card: var(--fl-window-mid);   /* v4: inner zones SINK as windows, not bright floating sub-cards */
  --atp-well: rgba(255, 255, 255, 0.04); /* subtle well/track — kept (reads fine on any dark surface) */
  --atp-card-border: var(--fl-window-border); /* v4: window hairline */
  --atp-border: #334155;
  --atp-border-soft: #2c3a51;
  --atp-text: #f1f5f9;
  --atp-text-soft: #cbd5e1;
  --atp-text-muted: #94a3b8;
  --atp-accent: #60a5fa;
  --atp-accent-hover: #93c5fd;
  --atp-good: #34d399;
  --atp-impact: #f87171;
  --atp-realized: #34d399;
  --atp-unrealized: #94a3b8;
  --atp-pretax: #6ee7b7;
  --atp-aftertax: #94a3b8;
  --atp-donut-bg: #1b2742;
}

/* ---------- Section container ----------
   CANONICAL (2026-05-19, CANONICAL-DARK-SURFACE-SPEC.md): a section is NEVER
   painted and NEVER boxed. Background is transparent so the page surface
   shows through; separation is whitespace + the existing in-content
   hairlines. (Was a green-tinted gradient + bordered rounded box — exactly
   the per-section paint the owner called a "mish-mash".) */
.after-tax-panel {
  background: transparent;
  color: var(--atp-text);
  padding: 24px 0;
  margin-top: 24px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 640px) {
  .after-tax-panel {
    padding: 16px 0;
    margin-top: 16px;
  }
}

/* ---------- Empty state ---------- */
.atp-empty-state {
  text-align: center;
  padding: 48px 24px;
}

.atp-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--atp-well);
  color: var(--atp-text-soft);
  margin-bottom: 20px;
}

.atp-empty-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--atp-text);
  letter-spacing: -0.01em;
}

.atp-empty-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--atp-text-soft);
  max-width: 560px;
  margin: 0 auto 16px;
}

.atp-empty-bullets {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  max-width: 480px;
  text-align: left;
}

.atp-empty-bullets li {
  font-size: 13px;
  color: var(--atp-text-muted);
  padding: 6px 0 6px 20px;
  position: relative;
  line-height: 1.5;
}

.atp-empty-bullets li::before {
  content: '·';
  position: absolute;
  left: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--atp-accent);
}

.atp-empty-disclaimer {
  font-size: 11px;
  color: var(--atp-text-muted);
  margin-top: 16px;
  letter-spacing: 0.02em;
}

/* ---------- Header (v4 — canonical .fl-section-head pattern) ---------- */
.atp-section-head {
  padding-bottom: var(--fl-space-16);
  border-bottom: 1px solid var(--fl-rule);
  margin-bottom: var(--fl-space-20);
  align-items: end;
}

.atp-section-head .fl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.atp-section-head .atp-header-right {
  display: flex;
  align-items: center;
  gap: var(--fl-space-12);
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 800px) {
  .atp-section-head .atp-header-right {
    justify-content: flex-start;
  }
}

/* Legacy classes kept for non-v4 callers (none after the JS edit, but keep CSS
   so an older cache doesn't render garbage). */
.atp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--atp-border-soft);
  margin-bottom: 20px;
}

.atp-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.atp-subtitle {
  font-size: 13px;
  color: var(--atp-text-muted);
  line-height: 1.5;
}

.atp-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.atp-profile-summary {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.atp-profile-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--atp-well);
  border: 1px solid var(--atp-card-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--atp-text-soft);
  font-variant-numeric: tabular-nums;
}

.atp-beta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--fl-accent, var(--atp-accent));
  color: var(--fl-accent-text, #fff);
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1;
  vertical-align: middle;
  margin-left: 0.6em;
}

/* ---------- Tax Drag headline card ----------
   CANONICAL surface (2026-05-19): single elevated card. The old green
   radial + slate/white wash (the "two different green tints" the owner
   flagged) is removed entirely — semantic green now lives only on the
   headline value text (.atp-drag-low/.atp-drag-headline), never the base. */
.atp-drag-card {
  background: var(--atp-bg-card);
  border: 1px solid var(--atp-card-border);
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.atp-drag-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atp-text-muted);
  margin-bottom: 4px;
}

.atp-drag-headline {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.atp-drag-low { color: var(--atp-good); }
.atp-drag-medium { color: var(--atp-warn); }
.atp-drag-high { color: var(--atp-impact); }

.atp-drag-unit {
  font-size: 18px;
  font-weight: 500;
  color: var(--atp-text-muted);
  margin-left: 4px;
  letter-spacing: 0;
}

.atp-drag-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--atp-border-soft);
}

.atp-drag-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.atp-drag-stat-lbl {
  font-size: 11px;
  color: var(--atp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.atp-drag-stat-val {
  font-size: 18px;
  font-weight: 600;
  color: var(--atp-text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .atp-drag-card { padding: 20px 16px; }
  .atp-drag-headline { font-size: 44px; }
  .atp-drag-stat-val { font-size: 16px; }
}

/* ---------- Grid: metric rows + donut ---------- */
.atp-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 880px) {
  .atp-grid { grid-template-columns: 1fr; }
}

/* ---------- Metric rows card ---------- */
.atp-metrics-card,
.atp-donut-card,
.atp-wedge-card {
  background: var(--atp-bg-card);
  border: 1px solid var(--atp-card-border);
  border-radius: 12px;
  padding: 20px;
}

.atp-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--atp-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.atp-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--atp-border-soft);
  flex-wrap: wrap;
  gap: 10px;
}

.atp-metric-row:last-child { border-bottom: none; }

.atp-metric-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--atp-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}

.atp-metric-hint {
  font-size: 11px;
  color: var(--atp-text-muted);
  font-weight: 400;
}

.atp-metric-values {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.atp-metric-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 72px;
}

.atp-metric-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--atp-text-muted);
  font-weight: 600;
}

.atp-metric-pre .atp-metric-tag { color: var(--atp-pretax); }
.atp-metric-post .atp-metric-tag { color: var(--atp-aftertax); }

.atp-metric-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--atp-text);
}

.atp-metric-arrow {
  color: var(--atp-text-muted);
  font-size: 13px;
  margin-top: 12px;
}

.atp-delta {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Tiny inline delta pills (11px text, ≤10% tint) — explicitly allowed as
   small semantic chips; NOT card surfaces. The neutral variant uses the
   canonical well so it doesn't read as a floating mini-card. */
.atp-delta-impact { color: var(--atp-impact); background: rgba(239, 68, 68, 0.08); }
.atp-delta-good { color: var(--atp-good); background: rgba(16, 185, 129, 0.08); }
.atp-delta-flat { color: var(--atp-text-muted); background: var(--atp-well); }

@media (max-width: 480px) {
  .atp-metric-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .atp-metric-values { width: 100%; justify-content: space-between; }
  .atp-metric-cell { min-width: 0; }
}

/* ---------- Donut card ---------- */
.atp-donut-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--atp-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.atp-donut-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.atp-donut-svg { width: 160px; height: 160px; }

.atp-donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}

.atp-donut-realized {
  font-size: 28px;
  font-weight: 700;
  color: var(--atp-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.atp-donut-realized-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--atp-text-muted);
  margin-top: 4px;
}

.atp-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.atp-donut-leg {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.atp-donut-leg-tax {
  border-top: 1px solid var(--atp-border-soft);
  padding-top: 8px;
  margin-top: 4px;
  grid-template-columns: 1fr auto;
}

.atp-donut-leg-tax .atp-donut-leg-label { color: var(--atp-text-muted); }

.atp-donut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.atp-donut-leg-label {
  color: var(--atp-text-soft);
}

.atp-donut-leg-value {
  font-weight: 600;
  color: var(--atp-text);
  font-variant-numeric: tabular-nums;
}

.atp-donut-leg-loss {
  color: var(--atp-impact);
}

/* ---------- Wedge chart card ---------- */
.atp-wedge-card {
  margin-bottom: 16px;
}

.atp-wedge-canvas-wrap {
  position: relative;
  height: 320px;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .atp-wedge-canvas-wrap { height: 240px; }
}

.atp-wedge-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--atp-text-soft);
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--atp-border-soft);
}

.atp-wedge-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.atp-wedge-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.atp-wedge-dot-wedge {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.20) 0%, rgba(239, 68, 68, 0.40) 100%);
}

.atp-wedge-leg-label {
  color: var(--atp-text-soft);
}

/* Wedge tooltip — body-anchored floating card */
.atp-wedge-tt {
  position: absolute;
  pointer-events: none;
  background: var(--atp-bg-card);
  border: 1px solid var(--atp-card-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  box-shadow: var(--atp-shadow-md);
  opacity: 0;
  transition: opacity 0.12s ease, left 0.05s linear, top 0.05s linear;
  z-index: 10000;
  min-width: 180px;
  font-variant-numeric: tabular-nums;
}

.atp-tt-date {
  font-size: 11px;
  color: var(--atp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.atp-tt-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.atp-tt-dot {
  width: 8px; height: 8px; border-radius: 50%;
}

.atp-tt-lbl {
  font-size: 11px;
  color: var(--atp-text-soft);
}

.atp-tt-val {
  font-weight: 600;
  color: var(--atp-text);
}

.atp-tt-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--atp-border-soft);
  font-size: 11px;
  color: var(--atp-impact);
  font-weight: 600;
}

.atp-tt-pct {
  color: var(--atp-text-muted);
  font-weight: 400;
}

/* ---------- Disclaimer foot ---------- */
.atp-disclaimer-foot {
  font-size: 11px;
  color: var(--atp-text-muted);
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--atp-border-soft);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.atp-link {
  color: var(--atp-accent);
  text-decoration: none;
  font-weight: 500;
}

.atp-link:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.atp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  font-family: inherit;
  letter-spacing: 0.005em;
}

.atp-btn-primary {
  background: var(--atp-accent);
  color: #fff;
  border-color: var(--atp-accent);
}

.atp-btn-primary:hover {
  background: var(--atp-accent-hover);
  border-color: var(--atp-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--atp-shadow-md);
}

.atp-btn-secondary {
  background: var(--atp-bg-card);
  color: var(--atp-text);
  border-color: var(--atp-card-border);
}

.atp-btn-secondary:hover {
  background: var(--atp-well);
  border-color: var(--atp-text-muted);
}

.atp-btn-small {
  padding: 6px 12px;
  font-size: 12px;
}

/* ---------- Tax profile form ---------- */
.tax-profile-form { display: flex; flex-direction: column; gap: 16px; }

.tpf-row { display: flex; gap: 12px; flex-wrap: wrap; }

.tpf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 180px;
}

.tpf-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--atp-text);
  letter-spacing: 0.01em;
}

.tpf-input {
  padding: 9px 12px;
  border: 1px solid var(--atp-card-border);
  border-radius: 8px;
  background: var(--atp-well);
  color: var(--atp-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tpf-input:focus {
  outline: none;
  border-color: var(--atp-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.tpf-prefix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tpf-prefix {
  position: absolute;
  left: 12px;
  color: var(--atp-text-muted);
  font-size: 14px;
  pointer-events: none;
}

.tpf-input-currency {
  padding-left: 26px;
  font-variant-numeric: tabular-nums;
}

.tpf-hint {
  font-size: 11px;
  color: var(--atp-text-muted);
  line-height: 1.4;
}

.tpf-hint-good { color: var(--atp-good); }
.tpf-hint-warn { color: var(--atp-warn); }
.tpf-hint-info { color: var(--atp-info); }

.tpf-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--atp-text-soft);
  cursor: pointer;
}

.tpf-checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--atp-accent);
}

.tpf-disclaimer {
  background: var(--atp-bg-card);
  border: 1px solid var(--atp-card-border);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--atp-text-soft);
  line-height: 1.5;
}

.tpf-disclaimer strong { color: var(--atp-text); }

.tpf-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.tpf-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.tpf-btn-primary {
  background: var(--atp-accent);
  color: #fff;
}

.tpf-btn-primary:hover { background: var(--atp-accent-hover); transform: translateY(-1px); }

.tpf-btn-secondary {
  background: var(--atp-bg-card);
  color: var(--atp-text-soft);
  border-color: var(--atp-card-border);
}

.tpf-btn-secondary:hover { background: var(--atp-well); }

.tpf-error {
  background: rgba(239, 68, 68, 0.08);
  color: var(--atp-impact);
  border: 1px solid rgba(239, 68, 68, 0.20);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
}

/* ---------- Modal ---------- */
.tpf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.tpf-modal {
  background: var(--atp-bg-card);
  border: 1px solid var(--atp-card-border);
  border-radius: 14px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--atp-shadow-lg);
}

.tpf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--atp-border-soft);
}

.tpf-modal-header h3 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  color: var(--atp-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tpf-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--atp-text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.tpf-modal-close:hover { color: var(--atp-text); }

.tpf-beta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--atp-accent);
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tpf-modal-body {
  padding: 20px;
}

/* ============================================================================
   TAX-AWARE PERFORMANCE — Editorial Rebuild (2026-05-19, tax2)
   ----------------------------------------------------------------------------
   Centerpiece panel. Built entirely on the canonical --fl-* token system
   (foliolytic-tokens.css) so it is automatically light/dark correct and
   matches the Monthly-Returns editorial voice. This block ONLY adds the
   panel-specific structural classes (.atp-*). It deliberately does NOT
   restyle the shared composed components (.fl-stat / .fl-stat-strip /
   .fl-chip / .fl-segment / .fl-section / .fl-headline ...) — those keep
   their canonical look. It also adds NO .tpf-* rules (wizard is owned by
   another module).

   Section background comes from .fl-section[data-grad="tax"] (already
   defined in foliolytic-tokens.css — the subtle green money tint).
============================================================================ */

.atp-root {
  /* let the canonical .fl-section gradient + padding do the work */
  color: var(--fl-text);
}

.atp-root .atp-headline {
  /* Reality Number — let it breathe; it is the single most important line */
  max-width: 18ch;
  cursor: help;
}
.atp-root .atp-headline strong {
  color: var(--fl-accent);
  font-weight: 600;
}
@media (min-width: 900px) {
  .atp-root .atp-headline { max-width: 22ch; }
}

/* Scoped override (NOT the global token): the canonical .fl-stat-cluster
   uses grid repeat(auto-fit, minmax(0,auto)) + .fl-stat{min-width:0}, which
   collapses to overlapping text when labels are long AND a big headline
   competes for width (exactly this section). Flex-wrap + max-content stats
   can never overlap — they wrap to a second row instead. */
.atp-hero-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--fl-space-16) var(--fl-space-28);
}
.atp-hero-cluster .fl-stat {
  min-width: max-content;
  flex: 0 0 auto;
}
@media (max-width: 760px) {
  .atp-hero-cluster { justify-content: flex-start; gap: var(--fl-space-12) var(--fl-space-20); }
}

/* ---- state views (empty / loading / partial / error) -------------------- */
.atp-state {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-20);
  padding: var(--fl-space-24) 0 var(--fl-space-8);
  max-width: 720px;
}
.atp-state .fl-prose { max-width: 640px; }

.atp-state__cta {
  display: flex;
  align-items: center;
  gap: var(--fl-space-16);
  flex-wrap: wrap;
}
.atp-state__hint {
  font-size: 10.5px;
  color: var(--fl-text-faint);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.atp-chip-cta {
  /* a .fl-chip that reads as the primary action without a saturated fill */
  border-color: var(--fl-accent);
  color: var(--fl-accent);
  font-weight: 600;
  padding: 9px 16px;
}
.atp-chip-cta:hover {
  background: var(--fl-accent-soft);
  border-color: var(--fl-accent);
  color: var(--fl-accent);
}

.atp-state--error .fl-prose { color: var(--fl-neg-text); }

.atp-foot-note { margin-top: var(--fl-space-24); }

/* ---- skeleton ----------------------------------------------------------- */
.atp-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-16);
  padding: var(--fl-space-16) 0 var(--fl-space-24);
}
.atp-skeleton__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fl-space-16);
}
.atp-skeleton__bar {
  height: 18px;
  border-radius: var(--fl-radius-sm);
  background: linear-gradient(
    90deg,
    var(--fl-rule) 0%,
    var(--fl-rule-2) 50%,
    var(--fl-rule) 100%);
  background-size: 200% 100%;
  animation: atpShimmer 1.4s ease-in-out infinite;
}
.atp-skeleton__bar--xl { height: 42px; max-width: 60%; }
.atp-skeleton__bar--lg { height: 20px; max-width: 80%; }
.atp-skeleton__bar--chart { height: 220px; }
@keyframes atpShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atp-skeleton__bar { animation: none; }
}

/* ---- lens bar ----------------------------------------------------------- */
.atp-lens-bar {
  display: flex;
  align-items: center;
  gap: var(--fl-space-24);
  flex-wrap: wrap;
  padding: var(--fl-space-16) 0;
  border-top: 1px solid var(--fl-rule);
  border-bottom: 1px solid var(--fl-rule);
  margin-bottom: var(--fl-space-24);
}
.atp-lens-group {
  display: flex;
  align-items: center;
  gap: var(--fl-space-8);
}
.atp-lens-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
}
.atp-lens-edit { margin-left: auto; }

/* ---- diptych (waterfall + ergodic) -------------------------------------- */
.atp-diptych {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--fl-space-32);
  align-items: stretch;
  margin-bottom: var(--fl-space-28);
}
.atp-block { min-width: 0; }

/* ---- waterfall ---------------------------------------------------------- */
.atp-waterfall { display: flex; flex-direction: column; gap: var(--fl-space-12); }
.atp-wf {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-12);
  margin-top: var(--fl-space-4);
}
.atp-wf-row {
  display: grid;
  grid-template-columns: 116px 1fr 72px;
  align-items: center;
  gap: var(--fl-space-12);
}
.atp-wf-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fl-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atp-wf-track {
  position: relative;
  height: 14px;
  background: var(--fl-rule-2);
  border-radius: 3px;
  overflow: hidden;
}
.atp-wf-bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.atp-wf-bar--base   { background: var(--fl-text-muted); }
.atp-wf-bar--drag   { background: var(--fl-neg); opacity: 0.78; }
.atp-wf-bar--result { background: var(--fl-accent); }
.atp-wf-val {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--fl-text);
  font-variant-numeric: tabular-nums;
}
.atp-wf-val--neg { color: var(--fl-neg); }
.atp-wf-cap { margin-top: var(--fl-space-12); }

/* ---- ergodic card ------------------------------------------------------- */
.atp-ergo-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--fl-space-12);
  padding: var(--fl-space-24);
  border: 1px solid var(--atp-card-border);
  border-radius: var(--fl-radius-lg);
  /* CANONICAL elevated card (2026-05-19): one solid surface, no translucent
     color-mix (banned — read as washed mid-gray over the page base). */
  background: var(--atp-bg-card);
  box-shadow: var(--fl-shadow-sm);
}
.atp-ergo-num {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fl-neg);
  font-variant-numeric: tabular-nums;
}
.atp-ergo-unit {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--fl-text-faint);
  margin-left: 4px;
  letter-spacing: 0;
}
.atp-ergo-body { color: var(--fl-text-2); }
.atp-ergo-body strong { color: var(--fl-text); }

/* ---- cockroach reality bar --------------------------------------------- */
.atp-cockroach-bar {
  padding: var(--fl-space-24) 0;
  border-top: 1px solid var(--fl-rule);
  margin-bottom: var(--fl-space-8);
}
.atp-ck {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-12);
  margin: var(--fl-space-12) 0 var(--fl-space-16);
}
.atp-ck-row {
  display: grid;
  grid-template-columns: 150px 1fr 56px;
  align-items: center;
  gap: var(--fl-space-16);
}
.atp-ck-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fl-text-2);
}
.atp-ck-track {
  position: relative;
  height: 20px;
  background: var(--fl-rule-2);
  border-radius: 4px;
  overflow: hidden;
}
.atp-ck-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.atp-ck-fill--you { background: var(--fl-accent); }
.atp-ck-fill--ref {
  background: var(--fl-warn);
  opacity: 0.85;
}
.atp-ck-val {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--fl-text);
  font-variant-numeric: tabular-nums;
}
.atp-ck-read { max-width: 640px; }
.atp-ck-read strong { color: var(--fl-text); }
.atp-ck-cite { margin-top: var(--fl-space-12); }

/* ---- 4-quadrant matrix -------------------------------------------------- */
.atp-matrix-wrap {
  padding: var(--fl-space-8) 0 var(--fl-space-4);
}
.atp-matrix-scroll { margin: var(--fl-space-12) 0; }
.atp-matrix {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.atp-matrix th,
.atp-matrix td {
  padding: var(--fl-space-12) var(--fl-space-16);
  text-align: right;
}
.atp-matrix thead th {
  border-bottom: 1px solid var(--fl-rule);
}
.atp-mx-rh {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fl-text);
  white-space: nowrap;
}
.atp-mx-rh--corner { border-bottom: 1px solid var(--fl-rule); }
.atp-mx-rh-s {
  display: block;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--fl-text-faint);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.atp-mx-col {
  font-weight: 600;
}
.atp-mx-col-l {
  display: block;
  font-size: 11.5px;
  color: var(--fl-text);
}
.atp-mx-col-s {
  display: block;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fl-text-faint);
  margin-top: 2px;
}
.atp-matrix tbody tr + tr td,
.atp-matrix tbody tr + tr th {
  border-top: 1px solid var(--fl-rule-2);
}
.atp-mx-cell {
  font-size: 14px;
  font-weight: 500;
  color: var(--fl-text);
}
/* Active (lens) column lit; the other three ghosted */
.atp-mx-col--active .atp-mx-col-l { color: var(--fl-accent); }
.atp-mx-col--active .atp-mx-col-s { color: var(--fl-accent); opacity: 0.8; }
.atp-mx-cell--active {
  color: var(--fl-accent);
  font-weight: 700;
  background: var(--fl-accent-soft);
}
.atp-mx-col--ghost .atp-mx-col-l,
.atp-mx-col--ghost .atp-mx-col-s { color: var(--fl-text-faint); }
.atp-mx-cell--ghost { color: var(--fl-text-faint); }
.atp-mx-note { margin-top: var(--fl-space-8); }

/* ---- strips spacing (uses .fl-stat-strip base) -------------------------- */
.atp-strip { margin-top: var(--fl-space-8); }

/* ---- charts ------------------------------------------------------------- */
.atp-chart-card {
  margin: var(--fl-space-28) 0;
  padding: var(--fl-space-20);
  border: 1px solid var(--atp-card-border);
  border-radius: var(--fl-radius-lg);
  /* CANONICAL elevated card (2026-05-19): one solid surface, no translucent
     color-mix (banned). Matches every other card in the section. */
  background: var(--atp-bg-card);
  box-shadow: var(--fl-shadow-sm);
}
.atp-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fl-space-28);
}
.atp-chart-cell {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-8);
  min-width: 0;
}
/* Fixed-height relatively-positioned wrapper — defeats the Chart.js
   responsive+maintainAspectRatio:false infinite-growth bug (canvas was
   rendering ~1600px tall). Mirrors the proven .atp-wedge-canvas-wrap. */
.atp-chart-cell .atp-canvas-wrap {
  position: relative;
  height: 320px;
  width: 100%;
}
.atp-chart-cell .atp-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.atp-chart-cap {
  font-size: 10.5px;
  font-style: italic;
  color: var(--fl-text-faint);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ---- tips (hairline list, NOT cards) ------------------------------------ */
.atp-tips {
  margin: var(--fl-space-32) 0 var(--fl-space-8);
  padding-top: var(--fl-space-20);
  border-top: 1px solid var(--fl-rule);
}
.atp-tip-list {
  list-style: none;
  margin: var(--fl-space-12) 0 0;
  padding: 0;
}
.atp-tip {
  padding: var(--fl-space-16) 0;
  border-bottom: 1px solid var(--fl-rule-2);
}
.atp-tip:last-child { border-bottom: 0; }
.atp-tip-head {
  display: flex;
  align-items: baseline;
  gap: var(--fl-space-12);
  margin-bottom: var(--fl-space-6);
  flex-wrap: wrap;
}
.atp-tip-impact {
  font-size: 13px;
  font-weight: 700;
  color: var(--fl-neg);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
}
.atp-tip-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fl-text);
  letter-spacing: -0.005em;
}
.atp-tip-body {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--fl-text-2);
  margin: 0 0 var(--fl-space-4);
  max-width: 720px;
}
.atp-tip-body strong { color: var(--fl-text); font-weight: 600; }
.atp-tip-lever {
  font-size: 11px;
  font-weight: 500;
  color: var(--fl-accent);
  letter-spacing: 0.005em;
  margin: 0;
}

/* ---- demoted risk strip (uses .fl-stat-strip base) ---------------------- */
.atp-risk-strip {
  margin-top: var(--fl-space-16);
  opacity: 0.92;
}

/* ============================================================================
   RESPONSIVE — tablet + mobile-390
============================================================================ */
@media (max-width: 980px) {
  .atp-diptych { grid-template-columns: 1fr; gap: var(--fl-space-20); }
  .atp-chart-grid { grid-template-columns: 1fr; gap: var(--fl-space-24); }
}

@media (max-width: 640px) {
  .atp-root .atp-headline { max-width: none; }

  .atp-lens-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--fl-space-16);
  }
  .atp-lens-group { justify-content: space-between; }
  .atp-lens-bar .fl-segment { flex: 1; }
  .atp-lens-bar .fl-segment__item { flex: 1; }
  .atp-lens-edit { margin-left: 0; align-self: flex-start; }

  /* matrix scrolls horizontally with a sticky row-header column */
  .atp-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .atp-matrix { min-width: 460px; }
  .atp-matrix th.atp-mx-rh,
  .atp-matrix td:first-child {
    position: sticky;
    left: 0;
    /* must be OPAQUE to occlude cells scrolling underneath — was
       var(--fl-bg)=transparent (broken occlusion). Canonical card surface. */
    background: var(--atp-bg-card);
    z-index: 1;
  }
  .atp-matrix th,
  .atp-matrix td { padding: var(--fl-space-8) var(--fl-space-12); }
  .atp-mx-cell { font-size: 13px; }

  .atp-wf-row { grid-template-columns: 92px 1fr 58px; gap: var(--fl-space-8); }
  .atp-wf-name { font-size: 11px; }
  .atp-wf-val { font-size: 12px; }

  .atp-ck-row { grid-template-columns: 104px 1fr 44px; gap: var(--fl-space-8); }
  .atp-ck-name { font-size: 11px; }

  .atp-tip-head { gap: var(--fl-space-8); }
  .atp-tip-impact { min-width: 56px; font-size: 12px; }
  .atp-tip-title { font-size: 13px; }

  .atp-chart-cell .atp-canvas-wrap { height: 260px; }
}

@media (max-width: 390px) {
  .atp-state__cta { flex-direction: column; align-items: flex-start; }
  .atp-ergo-card { padding: var(--fl-space-16); }
}

/* ============================================================================
   DARK MODE PARITY (CANONICAL 2026-05-19)
   --atp-bg-card / --atp-well / --atp-card-border already flip in
   body.dark-mode, so every surface above is automatically correct. The old
   per-card translucent dark override for .atp-ergo-card / .atp-chart-card is
   deleted — they now use the same single #1e293b card as everything else.
   Only the sticky matrix-column occluder needs a dark rule, and it must match
   the canonical card surface (NOT --fl-card #131c2c, which would scroll past
   as a mismatched navy stripe).
============================================================================ */
body.dark-mode .atp-mx-cell--active {
  background: var(--fl-accent-soft);
}
body.dark-mode .atp-matrix th.atp-mx-rh,
body.dark-mode .atp-matrix td:first-child {
  background: var(--atp-bg-card);
}

/* ============================================================================
   ACCURACY/COHERENCE PASS (2026-05-19, tax11) — geometric waterfall milestone,
   additive lifetime strip, real-$ ranked drags + closer, honest risk block.
   All colors via existing --fl-* tokens (auto dark-mode); no new aesthetic.
============================================================================ */

/* Telescoping middle milestone (After-tax CAGR, nominal) — a true waypoint,
   visually between the muted base and the accent result, never a "drag". */
.atp-wf-bar--mid {
  background: color-mix(in srgb, var(--fl-accent) 42%, var(--fl-text-muted));
}

/* Lifetime total card — it is the SUM of the four components beside it. The
   "this is the parent" signal is carried by the bold value + the dedicated
   .atp-total-banner below; the card base is the SAME canonical surface as
   every other card (the old 7% accent wash was a banned tinted card base). */
.atp-strip-card--total {
  background: var(--atp-bg-card);
  border: 1px solid var(--atp-card-border);
  border-radius: var(--fl-radius-md, 10px);
}
.atp-strip-card--total .fl-strip-card__value { font-weight: 700; }

/* "these add up exactly" proof line under the lifetime strip */
.atp-strip-note {
  margin-top: var(--fl-space-10, 10px);
  color: var(--fl-text-faint);
}

/* second kicker + the actionable levers (lighter than the ranked drags) */
.atp-lever-kicker { margin-top: var(--fl-space-24); }
.atp-lever-list {
  list-style: none;
  margin: var(--fl-space-12) 0 0;
  padding: 0;
}
.atp-lever {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--fl-text-2);
  padding: var(--fl-space-10, 10px) 0;
  border-bottom: 1px solid var(--fl-rule-2);
}
.atp-lever:last-child { border-bottom: 0; }
.atp-lever strong { color: var(--fl-text); font-weight: 600; }

/* the geometric closing verdict — a conclusion, NOT a $-ranked tip */
.atp-tips-closer {
  margin-top: var(--fl-space-24);
  padding-top: var(--fl-space-20);
  border-top: 1px solid var(--fl-rule);
}
.atp-tips-closer .fl-prose {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fl-text-2);
  max-width: 760px;
  margin: 0;
}
.atp-tips-closer .fl-prose strong { color: var(--fl-text); font-weight: 600; }

/* honest risk block (replaces the misleading pre→after delta strip) */
.atp-risk-wrap {
  margin-top: var(--fl-space-32);
  padding-top: var(--fl-space-20);
  border-top: 1px solid var(--fl-rule);
  opacity: 1; /* override the old demoted .atp-risk-strip 0.92 */
}
.atp-risk-wrap .atp-strip { margin-top: var(--fl-space-12); }
/* 2-up risk strip (scoped — global tokens only define --3/--4/--5) */
.atp-risk-wrap .fl-stat-strip--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fl-space-16);
}
@media (max-width: 480px) {
  .atp-risk-wrap .fl-stat-strip--2 { grid-template-columns: 1fr; }
}
.atp-risk-note {
  margin-top: var(--fl-space-12);
  color: var(--fl-text-faint);
  max-width: 760px;
}

/* the headline metric row in the matrix (geometric CAGR) — faint emphasis,
   the active COLUMN highlight still does the primary work */
.atp-mx-row--hero .atp-mx-rh { color: var(--fl-text); }
.atp-mx-row--hero td { font-weight: 600; }

@media (max-width: 640px) {
  .atp-tips-closer .fl-prose { font-size: 13px; }
  .atp-lever { font-size: 12px; }
  .atp-strip-note, .atp-risk-note { font-size: 11.5px; }
}

/* LIFETIME TOTAL banner — the total is unmistakably the PARENT of its four
   components (a skeptical reviewer twice misread the largest component as the
   total). Standalone, dominant, with the equation printed directly under it. */
.atp-total-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-space-16);
  margin-top: var(--fl-space-12);
  padding: var(--fl-space-16) var(--fl-space-20);
  /* CANONICAL card surface (was an 8% accent-tinted base — banned). The
     "this is the PARENT total" emphasis is carried by the large 700-weight
     value (.atp-total-banner__v) + the printed equation below, not a tint. */
  background: var(--atp-bg-card);
  border: 1px solid var(--atp-card-border);
  border-radius: var(--fl-radius-lg, 14px);
}
.atp-total-banner__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--fl-text-2);
}
.atp-total-banner__sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--fl-text-faint);
}
.atp-total-banner__v {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fl-neg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.atp-total-eq {
  margin: var(--fl-space-12) 0 var(--fl-space-4);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fl-text);
  font-variant-numeric: tabular-nums;
}
.atp-strip-sub {
  margin: 0 0 var(--fl-space-12);
  color: var(--fl-text-faint);
}
@media (max-width: 560px) {
  .atp-total-banner { flex-direction: column; align-items: flex-start; gap: var(--fl-space-8); }
  .atp-total-eq { font-size: 11.5px; }
}

/* two semantically-distinct strip groups (tax-paid vs gains) — each headed,
   spaced apart so figures from different groups can't be visually conflated */
.atp-strip-group { margin-top: var(--fl-space-24); }
.atp-strip-group + .atp-strip-group { margin-top: var(--fl-space-28); }
.atp-strip-group .atp-strip { margin-top: var(--fl-space-12); }
/* the forward-looking "unrealized" card reads differently from realized/paid
   via a DASHED hairline (no color, no tint) — base is the SAME canonical
   surface as every other card (was a 5% wash — banned tinted card base). */
.atp-strip-card--unreal {
  background: var(--atp-bg-card);
  border: 1px dashed var(--atp-card-border);
  border-radius: var(--fl-radius-md, 10px);
}

/* sequencing / loss-carryforward narrative (path-dependency made visible) */
.atp-seq {
  margin-top: var(--fl-space-32);
  padding-top: var(--fl-space-20);
  border-top: 1px solid var(--fl-rule);
}
.atp-seq-body {
  font-size: 13px;
  line-height: 1.72;
  color: var(--fl-text-2);
  max-width: 820px;
  margin: var(--fl-space-12) 0 0;
}
.atp-seq-body strong { color: var(--fl-text); font-weight: 600; }
.atp-seq-body em { font-style: italic; color: var(--fl-text); }
.atp-seq-src {
  display: block;
  margin-top: var(--fl-space-10, 10px);
  font-size: 11px;
  color: var(--fl-text-faint);
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .atp-seq-body { font-size: 12px; }
}

/* ============================================================================
   END — Tax-Aware Performance Editorial Rebuild (2026-05-19, tax2 → tax12)
============================================================================ */