/* ══════════════════════════════════════════════════════════════
   STRVue Component System
   Reusable patterns built on tokens.css. Every component uses
   token variables — no raw color/spacing values.

   Components:
   1. MetricCard      — key financial values (3 variants)
   2. SectionHeader   — consistent section titles
   3. TableCard       — data table wrapper
   4. ChartCard       — chart wrapper (Chart.js)
   5. DecisionCard    — recommendation display
   6. ReturnBridgeCard — cash flow → total return progression
   ══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. METRIC CARD
   Three variants: primary, default, compact.
   Primary = hero metric (Total Return). Visually dominant.
   Default = supporting metrics. Smaller, subordinate.
   Compact = inline rows (capital position, tax detail).

   Usage:
     <div class="mc mc--primary mc--accent">
       <span class="mc__label">Total Economic Return</span>
       <span class="mc__value">$47,200</span>
       <span class="mc__meta">12.4% return on equity</span>
     </div>
   ───────────────────────────────────────────── */

/* DEFAULT: Flat metric. No border, no card. Just label + number.
   Stripe-style: the number IS the hierarchy. */
.mc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3) 0;
}

.mc__label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: var(--lh-tight);
}

.mc__value {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
}

.mc__meta {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    font-weight: var(--fw-normal);
    margin-top: 2px;
}

/* ── Primary: hero metric. Larger number, navy, more space. ── */
.mc--primary {
    padding: var(--sp-6) 0;
}

.mc--primary .mc__label {
    font-size: var(--fs-body-sm);
    color: var(--c-text-secondary);
}

.mc--primary .mc__value {
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}

/* Page-level hero: the single dominant number */
.mc--hero .mc__value {
    font-size: var(--fs-display-lg);
}

/* Gold accent — thin left border, the only gold on the page */
.mc--accent {
    padding-left: var(--sp-4);
    border-left: 2px solid var(--c-gold);
}

/* Bordered variant — when metrics need visual containment (inside cards, grids) */
.mc--bordered {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
}

/* ── Metric row: responsive grid for metric cards ── */
.mc-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

/* Column count modifiers for metric rows */
.mc-row--3col { grid-template-columns: repeat(3, 1fr); }
.mc-row--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .mc-row--3col, .mc-row--4col { grid-template-columns: repeat(2, 1fr); }
}

/* Hero wrapper — breathing room, no heavy border */
.mc-hero-wrap {
    margin-bottom: var(--sp-8);
}

@media (max-width: 768px) {
    .mc-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}

@media (max-width: 480px) {
    .mc-row { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────
   2. SECTION HEADER
   Consistent section titles with optional eyebrow and action.

   Usage:
     <div class="sh">
       <div class="sh__text">
         <span class="sh__eyebrow">Portfolio Overview</span>
         <h2 class="sh__title">Financial Position</h2>
         <p class="sh__subtitle">Capital invested and current equity</p>
       </div>
       <div class="sh__action">
         <a href="#" class="btn btn-sm btn-secondary">View Details</a>
       </div>
     </div>
   ───────────────────────────────────────────── */

.sh {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-divider);
}

.sh__text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.sh__eyebrow {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sh__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    line-height: var(--lh-tight);
    margin: 0;
}

.sh__subtitle {
    font-size: var(--fs-body);
    color: var(--c-text-secondary);
    margin: 0;
}

.sh__action {
    flex-shrink: 0;
    margin-left: var(--sp-4);
}

/* Large variant for page-level headings */
.sh--lg .sh__title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
}

/* No border variant */
.sh--flat {
    border-bottom: none;
    padding-bottom: 0;
}


/* ─────────────────────────────────────────────
   3. TABLE CARD
   White card with header + data table inside.
   Table styling: gray header row, clean borders,
   readable spacing. No navy backgrounds on headers.
   No gold anywhere.

   Usage:
     <div class="tc">
       <div class="tc__header">
         <h3 class="tc__title">Capital Position</h3>
       </div>
       <div class="tc__body">
         <table class="tc__table">
           <thead><tr><th>Metric</th><th>Value</th></tr></thead>
           <tbody><tr><td>Purchase Price</td><td class="tc__val">$450,000</td></tr></tbody>
         </table>
       </div>
     </div>
   ───────────────────────────────────────────── */

.tc {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.tc__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.tc__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    margin: 0;
}

.tc__body {
    padding: 0;
    overflow-x: auto;
}

/* Padded body variant (for non-table content) */
.tc__body--padded {
    padding: var(--sp-4);
}

.tc__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
}

.tc__table thead {
    background: var(--c-bg);
}

.tc__table th {
    padding: var(--sp-2) var(--sp-4);
    text-align: left;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--c-border);
}

.tc__table td {
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--c-divider);
    color: var(--c-text);
}

.tc__table tbody tr:last-child td {
    border-bottom: none;
}

.tc__table tbody tr:hover {
    background: var(--c-bg);
}

/* Right-align values column */
.tc__table .tc__val,
.tc__table .text-right {
    text-align: right;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

/* Key value — bold, near-black */
.tc__table .tc__val--key {
    color: var(--c-text);
    font-weight: var(--fw-bold);
}

/* Positive / negative value colors */
.tc__table .tc__val--pos { color: var(--c-positive); }
.tc__table .tc__val--neg { color: var(--c-negative); }

/* Total / summary row */
.tc__table .tc__row--total {
    background: var(--c-bg);
    border-top: 2px solid var(--c-border-strong);
}

.tc__table .tc__row--total td {
    font-weight: var(--fw-bold);
    color: var(--c-text);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
}

/* Collapsible table card */
.tc--collapsible .tc__header {
    cursor: pointer;
    user-select: none;
}

.tc--collapsible .tc__toggle {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    transition: background var(--ease);
}

.tc--collapsible .tc__toggle:hover {
    background: var(--c-bg);
}

.tc--collapsible .tc__toggle:focus-visible {
    outline: 2px solid var(--c-navy);
    outline-offset: 2px;
}

.tc--collapsible .tc__header:focus-visible {
    outline: 2px solid var(--c-navy);
    outline-offset: -2px;
}

.tc--collapsible .tc__body--collapsed {
    display: none;
}

/* Compact row variant — tighter padding for detail tables */
.tc__table--compact td,
.tc__table--compact th {
    padding: var(--sp-1) var(--sp-4);
    font-size: var(--fs-body-sm);
}

@media (max-width: 768px) {
    .tc__table { font-size: var(--fs-body-sm); }
    .tc__table th, .tc__table td { padding: var(--sp-2) var(--sp-3); }
}


/* ─────────────────────────────────────────────
   4. CHART CARD
   White card with title + Chart.js canvas.
   Charts use navy + grays only. No gold. No bright colors.
   Chart.js config should reference these CSS custom properties
   for consistency.

   Usage:
     <div class="cc">
       <div class="cc__header">
         <h3 class="cc__title">Cash Flow vs Total Return</h3>
         <span class="cc__subtitle">Trailing 12 months</span>
       </div>
       <div class="cc__body">
         <canvas id="chart-cashflow"></canvas>
       </div>
     </div>
   ───────────────────────────────────────────── */

.cc {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;

    /* Chart color tokens — reference in Chart.js via getComputedStyle */
    --chart-line-1:     var(--c-navy);
    --chart-line-2:     var(--c-text-muted);
    --chart-line-3:     var(--c-border-strong);
    --chart-fill-1:     var(--c-navy-muted);
    --chart-fill-2:     rgba(156, 163, 175, 0.06);
    --chart-grid:       var(--c-divider);
    --chart-axis:       var(--c-text-muted);
}

.cc__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.cc__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    margin: 0;
}

.cc__subtitle {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
}

.cc__body {
    padding: var(--sp-4);
    position: relative;
}

.cc__body canvas {
    width: 100% !important;
    max-height: 280px;
}

.cc__legend {
    display: flex;
    gap: var(--sp-4);
    padding: 0 var(--sp-4) var(--sp-3);
}

.cc__legend-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-body-sm);
    color: var(--c-text-secondary);
}

.cc__legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Legend dot color modifiers */
.cc__legend-dot--navy { background: var(--c-navy); }
.cc__legend-dot--gray { background: var(--c-text-muted); }

/* Fixed chart body height */
.cc__body--fixed { height: 240px; }

@media (max-width: 768px) {
    .cc__body canvas { max-height: 220px; }
    .cc__body--fixed { height: 200px; }
}


/* ─────────────────────────────────────────────
   5. DECISION CARD
   Recommendation display — calm, credible, no AI tone.
   Navy background on recommendation badge. White text.
   Supporting metrics below in neutral card.

   Usage:
     <div class="dc">
       <div class="dc__banner dc__banner--hold">
         <span class="dc__signal">HOLD</span>
         <p class="dc__rationale">Equity growth and tax benefits exceed sale proceeds through 2028.</p>
       </div>
       <div class="dc__body">
         <div class="dc__indicator">
           <span class="dc__ind-label">DSCR</span>
           <span class="dc__ind-value">1.24</span>
         </div>
         <div class="dc__indicator">
           <span class="dc__ind-label">After-Tax ROE</span>
           <span class="dc__ind-value">8.2%</span>
         </div>
       </div>
     </div>
   ───────────────────────────────────────────── */

.dc {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dc__banner {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--c-divider);
}

/* All signal states use the same restrained treatment.
   Differentiated by the signal text, not background color.
   Fundrise-style: calm, not alarming. */
.dc__banner--hold,
.dc__banner--sell,
.dc__banner--monitor {
    background: var(--c-surface);
    color: var(--c-text);
}

.dc__signal {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-navy);
}

.dc__rationale {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
    color: var(--c-text-secondary);
    margin: 0;
}

.dc__body {
    padding: var(--sp-4);
    display: flex;
    gap: var(--sp-6);
    flex-wrap: wrap;
}

.dc__indicator {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.dc__ind-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dc__ind-value {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

/* Recommendation items list (for dashboard panel with multiple recs) */
.dc__recs {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    border-top: 1px solid var(--c-divider);
}

.dc__rec {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}

.dc__rec-priority {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: var(--sp-2);
}

.dc__rec-priority--high { background: var(--c-negative); }
.dc__rec-priority--medium { background: var(--c-warning); }
.dc__rec-priority--low { background: var(--c-text-muted); }

.dc__rec-text {
    flex: 1;
}

.dc__rec-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    margin: 0 0 var(--sp-1);
}

.dc__rec-desc {
    font-size: var(--fs-body-sm);
    color: var(--c-text-secondary);
    margin: 0;
    line-height: var(--lh-normal);
}

.dc__footer {
    padding: 0 var(--sp-4) var(--sp-3);
}

/* Compact variant — sidebar-style, less horizontal padding */
.dc--compact .dc__banner {
    padding: var(--sp-3) var(--sp-4);
}

.dc--compact .dc__signal {
    font-size: var(--fs-body-sm);
}

.dc--compact .dc__rationale {
    font-size: var(--fs-body-sm);
}

.dc--compact .dc__body {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-4);
}

.dc--compact .dc__ind-value {
    font-size: var(--fs-h3);
}

@media (max-width: 768px) {
    .dc__body { flex-direction: column; gap: var(--sp-3); }
}


/* ─────────────────────────────────────────────
   6. RETURN BRIDGE CARD
   The product's proof. Shows the progression:
   Cash Flow → Tax Savings → Principal Paydown →
   Appreciation → Total Return.

   Horizontal stepped layout. Each step shows label + value.
   Connector arrows between steps. Total is visually dominant.
   White card. Navy for total. Gray for intermediate values.
   Gold accent ONLY on the left border of the total step.

   Usage:
     <div class="rb">
       <div class="rb__header">
         <h3 class="rb__title">Return Bridge</h3>
         <span class="rb__subtitle">How your total return is built</span>
       </div>
       <div class="rb__flow">
         <div class="rb__step">
           <span class="rb__step-label">Cash Flow</span>
           <span class="rb__step-value">$8,400</span>
         </div>
         <span class="rb__connector">+</span>
         <div class="rb__step">...</div>
         <span class="rb__connector">+</span>
         <div class="rb__step">...</div>
         <span class="rb__connector">+</span>
         <div class="rb__step">...</div>
         <span class="rb__connector">=</span>
         <div class="rb__step rb__step--total">
           <span class="rb__step-label">Total Return</span>
           <span class="rb__step-value">$47,200</span>
         </div>
       </div>
     </div>
   ───────────────────────────────────────────── */

.rb {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.rb__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.rb__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    margin: 0;
}

.rb__subtitle {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
}

.rb__flow {
    display: flex;
    align-items: stretch;
    padding: var(--sp-6) var(--sp-4);
    gap: 0;
    overflow-x: auto;
}

.rb__step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
    background: var(--c-bg);
    border-radius: var(--radius);
    text-align: center;
}

.rb__step-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    color: var(--c-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rb__step-value {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

.rb__step-value--pos { color: var(--c-positive); }
.rb__step-value--neg { color: var(--c-negative); }

/* Connector between steps */
.rb__connector {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--c-text-muted);
    flex-shrink: 0;
}

/* Total step — visually dominant */
.rb__step--total {
    background: var(--c-navy-muted);
    border-left: 3px solid var(--c-gold);
}

.rb__step--total .rb__step-label {
    color: var(--c-navy);
}

.rb__step--total .rb__step-value {
    font-size: var(--fs-h2);
    color: var(--c-navy);
}

/* Running total below each step */
.rb__step-running {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    margin-top: var(--sp-1);
    font-variant-numeric: tabular-nums;
}

/* Emphasized variant — subtle, not heavy */
.rb--emphasis {
    border-color: var(--c-border-strong);
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .rb__flow {
        flex-direction: column;
        gap: 0;
        padding: var(--sp-4);
    }

    .rb__step {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        min-width: unset;
    }

    .rb__connector {
        min-width: unset;
        padding: var(--sp-1) 0;
        justify-content: flex-start;
        padding-left: var(--sp-4);
    }
}


/* ─────────────────────────────────────────────
   LAYOUT UTILITIES
   Grids and wrappers used with components above.
   ───────────────────────────────────────────── */

/* Two-column split: 65/35 for bridge + decision */
.split-65-35 {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: var(--sp-6);
}

/* Two-column split: 50/50 for secondary modules */
.split-50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
}

/* Two-column chart row */
.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
}

@media (max-width: 1024px) {
    .split-65-35 { grid-template-columns: 1fr; }
    .split-50-50 { grid-template-columns: 1fr; }
    .chart-row { grid-template-columns: 1fr; }
}

/* Trust footer */
.trust-footer {
    display: flex;
    gap: var(--sp-6);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-divider);
    margin-top: var(--sp-6);
}

.trust-footer__item {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
}

.trust-footer__label {
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: var(--sp-1);
}

@media (max-width: 768px) {
    .trust-footer { flex-direction: column; gap: var(--sp-2); }
}


/* ─────────────────────────────────────────────
   UTILITY: Perception Gap Callout
   Standalone callout for the "aha moment."
   ───────────────────────────────────────────── */

/* Plain text, not a card. The insight speaks for itself. */
.perception-gap {
    font-size: var(--fs-body);
    color: var(--c-text-secondary);
    line-height: var(--lh-relaxed);
    margin-top: var(--sp-2);
}

.perception-gap strong {
    color: var(--c-text);
    font-weight: var(--fw-semibold);
}

.perception-gap .pg-highlight {
    color: var(--c-navy);
    font-weight: var(--fw-semibold);
}


/* ─────────────────────────────────────────────
   UTILITY: Section separator
   ───────────────────────────────────────────── */

.section-break {
    margin-bottom: var(--sp-6);
}

/* Major section break — between conceptual groups */
.section-break--lg {
    margin-bottom: var(--sp-10);
}


/* ─────────────────────────────────────────────
   UTILITY: Breadcrumb spacing override
   ───────────────────────────────────────────── */

.breadcrumb--tight {
    margin-bottom: var(--sp-2);
}


/* ─────────────────────────────────────────────
   UTILITY: Empty state card
   ───────────────────────────────────────────── */

.tc--empty {
    text-align: center;
    padding: var(--sp-12);
}

.tc--empty h3 {
    color: var(--c-navy);
    margin-bottom: var(--sp-2);
}

.tc--empty p {
    color: var(--c-text-secondary);
    margin-bottom: var(--sp-4);
}


/* ─────────────────────────────────────────────
   UTILITY: Warning value color
   ───────────────────────────────────────────── */

.tc__val--warn {
    color: var(--c-warning);
}


/* ─────────────────────────────────────────────
   UTILITY: Signal badges (projection table)
   ───────────────────────────────────────────── */

.signal-badge {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.signal-badge--hold { color: var(--c-positive); }
.signal-badge--sell { color: var(--c-warning); }


/* ─────────────────────────────────────────────
   UTILITY: Prose body (rationale text)
   ───────────────────────────────────────────── */

.tc__body--prose {
    padding: var(--sp-4);
    font-size: var(--fs-body);
    color: var(--c-text-secondary);
    line-height: var(--lh-relaxed);
}

.tc__body--prose p {
    margin: 0 0 var(--sp-3);
}

.tc__body--prose p:last-child {
    margin-bottom: 0;
}

.tc__body--prose strong {
    color: var(--c-text);
}


/* ─────────────────────────────────────────────
   UTILITY: Recommendation item separator
   ───────────────────────────────────────────── */

.dc__rec + .dc__rec {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-divider);
}


/* ─────────────────────────────────────────────
   UTILITY: Callout divider (for multi-alert banners)
   ───────────────────────────────────────────── */

.callout__divider {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--c-warning-border, rgba(217, 119, 6, 0.15));
}


/* ─────────────────────────────────────────────
   UTILITY: Icon colors
   ───────────────────────────────────────────── */

.icon--warning { color: var(--c-warning); }


/* ─────────────────────────────────────────────
   UTILITY: Spacing modifiers
   ───────────────────────────────────────────── */

.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }

/* Full-width button */
.btn--full { width: 100%; text-align: center; }

/* Inline action link (small, navy, next to content) */
.link-action {
    margin-left: var(--sp-2);
    color: var(--c-navy);
    font-size: var(--fs-body-sm);
}

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

/* Readonly field display */
.field-readonly {
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-size: var(--fs-body);
    color: var(--c-text-secondary);
}

/* Metric card inside a table card body (needs margin) */
.tc .mc { margin: var(--sp-4); margin-bottom: var(--sp-3); }

/* Padded content inside tc__body (footnotes, mc-rows, descriptions) */
.tc__body-inset { padding: var(--sp-3) var(--sp-4); }

/* Centered callout inside a card (e.g., suspended losses note) */
.tc__callout-center {
    text-align: center;
    padding: 0 var(--sp-4);
    margin-bottom: var(--sp-3);
}

.tc__prose {
    font-size: var(--fs-body);
    color: var(--c-text-secondary);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--sp-3);
}

/* Perception gap when following hero card */
.mc-hero-wrap .perception-gap { margin-top: var(--sp-3); }

/* Disclaimer spacing */
.callout--spaced { margin-top: var(--sp-4); }


/* ─────────────────────────────────────────────
   UTILITY: Estimated badge
   ───────────────────────────────────────────── */

.badge-est {
    display: inline-block;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-warning);
    background: var(--c-warning-bg);
    border: 1px solid var(--c-warning);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-2);
}


/* ─────────────────────────────────────────────
   UTILITY: Property link in tables
   ───────────────────────────────────────────── */

.prop-link {
    color: var(--c-navy);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

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

.prop-meta {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
}


/* ──────────────────────────────────────────────────────────────
   NAMING CONVENTION NOTE — Phase 8 onward

   Phase 8 uses unabbreviated BEM names (.metric-card, .hero-card,
   .nav-rail, etc.) per the design wireframes at
   .superpowers/brainstorm/1798-1776549313/content/.

   The legacy abbreviated namespace (.mc, .sh, .tc, etc.) is
   deprecated for new work but preserved for the 13 surviving
   infrastructure templates. Do NOT extend the legacy classes.
   When updating a legacy template, migrate it to the Phase 8
   classes if the surrounding work permits it.
   ────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   PHASE 8 COMPONENTS (spec §1–§11)
   ══════════════════════════════════════════════════════════════ */

/* ── App shell ───────────────────────────────────── */
.app-shell { display: grid; grid-template-columns: var(--rail-width) 1fr; min-height: 100vh; background: var(--color-bg-app); }
.app-shell > main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: 12px 20px; flex: 1; }

/* ── Nav rail (Phase 13 — hover-to-expand, labels visible on expand) ─ */
.nav-rail {
  background: var(--color-navy);
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* rows span full width when expanded */
  width: var(--rail-width);
  transition: width 200ms ease;
  overflow: hidden;       /* hides labels when collapsed */
  z-index: 30;
}

/* Hover-to-expand only when a real pointer with hover is present (gate out
   touch hybrids that lie about :hover). */
@media (hover: hover) and (pointer: fine) {
  .nav-rail:hover,
  .nav-rail:focus-within {
    width: 180px;
  }
}

.nav-rail .rail-spacer { height: var(--topbar-height); flex-shrink: 0; }
.nav-rail .rail-flex-spacer { flex: 1; }

.nav-rail .rail-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  margin: 2px 6px;
  border-radius: var(--radius-button);
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.nav-rail .rail-btn:hover,
.nav-rail .rail-btn.active {
  background: rgba(255,255,255,0.2);
  color: var(--ivory);
}
.nav-rail .rail-btn__icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-rail .rail-btn__icon svg {
  width: 18px; height: 18px;
  stroke: rgba(255,255,255,0.8);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-rail .rail-btn.active .rail-btn__icon svg,
.nav-rail .rail-btn:hover .rail-btn__icon svg { stroke: var(--ivory); }

.nav-rail .rail-btn__label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 150ms ease 60ms;  /* fade in slightly after width */
}
@media (hover: hover) and (pointer: fine) {
  .nav-rail:hover .rail-btn__label,
  .nav-rail:focus-within .rail-btn__label { opacity: 1; }
}

/* ── Mobile top-bar hamburger (hidden on desktop) ───── */
.top-bar__hamburger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
}
.top-bar__hamburger span {
  width: 20px; height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  display: block;
}

/* ── Mobile scrim (hidden until drawer opens) ───────── */
.mobile-scrim {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 29;   /* below .nav-rail's z-index of 30 */
  opacity: 0;
  transition: opacity 200ms ease;
}
body.drawer-open .mobile-scrim { opacity: 1; }

/* ── Mobile breakpoint — drawer takes over ───────────── */
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;   /* rail column collapses */
  }

  .top-bar__hamburger { display: flex; }

  /* Rail becomes a fixed-position off-canvas drawer */
  .nav-rail {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 250ms ease;
    padding-top: 12px;
  }
  .nav-rail .rail-spacer { display: none; }
  .nav-rail .rail-btn__label { opacity: 1; }   /* always visible in drawer */

  body.drawer-open .nav-rail { transform: translateX(0); }
  body.drawer-open .mobile-scrim { display: block; }
  body.drawer-open { overflow: hidden; }        /* lock body scroll */

  /* Hide desktop-only nav entries in the drawer.
     (JS/Python filter would require template logic; CSS filter is sufficient
     because the mobile state doesn't need the sale / intake entries clickable
     at all.)
     Apply by matching the entry's target route path. */
  .nav-rail .rail-btn[href^="/client/sale-modeler"],
  .nav-rail .rail-btn[href="#"],                 /* Sale Modeler placeholder href */
  .nav-rail .rail-btn[href*="/client/intake/"] { display: none; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .nav-rail,
  .mobile-scrim,
  .rail-btn__label {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .nav-rail { transform: translateX(0); opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
  body.drawer-open .nav-rail { opacity: 1; pointer-events: auto; }
}

.top-bar { height: var(--topbar-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 24px; gap: 16px; }
.top-bar__logo { display: flex; align-items: center; gap: 12px; }
.top-bar__divider { width: 1px; height: 32px; background: var(--color-border); }
.top-bar__wordmark { font-family: var(--font-wordmark); font-size: 1.6rem; color: var(--color-text); line-height: 1; }
.top-bar__wordmark .vue { color: var(--color-gold); }
.top-bar__tagline { color: var(--color-text-secondary); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }

/* ── Metric card (Option C — info-chip drawer) ────── */
.metric-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 12px 14px; box-shadow: var(--shadow-card); position: relative; }
.metric-card.dimmed { opacity: var(--opacity-dimmed); }
.metric-card__label { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; }
.metric-card__value { font-size: 28px; font-weight: 700; color: var(--color-text); line-height: 1.1; }
.metric-card__caption { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }

.info-chip { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: var(--color-text-secondary); padding: 0; }
.info-chip:hover { background: var(--color-bg-app); }
.info-drawer { max-height: 0; overflow: hidden; transition: max-height 200ms ease; margin-top: 0; }
.info-drawer.open { max-height: 400px; margin-top: 12px; }
.info-drawer__body { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); padding: 12px; background: var(--color-bg-app); border-radius: 8px; }

/* ── Persona tabs ─────────────────────────────────── */
.persona-tabs { display: flex; gap: 4px; padding: 4px; background: var(--color-bg-app); border-radius: var(--radius-button); width: fit-content; }
.persona-tabs__tab { padding: 8px 16px; font-size: 13px; color: var(--color-text-secondary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-family: var(--font-ui); }
.persona-tabs__tab.active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* ── Hero card (dashboard) ────────────────────────── */
/* Lifted from .superpowers/brainstorm/1798-1776549313/content/dashboard-v5.html
   .hero-card / .hero-* rules. Token-backed where equivalents exist. */
.hero-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 24px 28px 22px; box-shadow: var(--shadow-card); }
.hero-card__top-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; gap: 16px; flex-wrap: wrap; }
.hero-card__eyebrow { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.hero-card__greeting { font-size: 12px; color: var(--color-text-muted); }
.hero-card__greeting strong { color: var(--color-text-secondary); font-weight: 600; }
.hero-card__value { font-size: 42px; font-weight: 800; color: var(--color-gold); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.hero-card__caption { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 16px; }
.hero-card__rule { height: 1px; background: #f0f1f3; margin: 0 0 16px; border: 0; }
.hero-card__mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
.mini-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; }
.mini-stat__value { font-size: 18px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }
.mini-stat__value.dimmed { opacity: var(--opacity-dimmed); color: var(--color-text-muted); }

/* ── Tax-profile row (top bar, right-aligned) ─────── */
.tax-profile-row { display: flex; align-items: center; gap: 8px; }
.tax-profile-row__label { font-size: 11px; color: var(--color-text-muted); }
.tax-profile-row__sentence { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.tax-profile-row__why { font-size: 11px; font-weight: 600; color: var(--color-navy); background: #eef1fb; border: 1px solid #d4dcf7; padding: 2px 8px; border-radius: 10px; cursor: help; }

/* ── Section row / labels ─────────────────────────── */
.section-row { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; margin-top: 8px; }
.section-row__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); font-weight: 700; }

/* ── Property grid + card (dashboard) ─────────────── */
.property-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.property-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 16px 18px; box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: minmax(160px, 1fr) 2fr 16px; gap: 16px; align-items: center;
  text-decoration: none; color: inherit; transition: box-shadow 0.12s, border-color 0.12s;
}
.property-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: #d1d5db; }
.property-card__name { font-size: 15px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; margin-bottom: 2px; }
.property-card__address { font-size: 12px; color: var(--color-text-muted); }
.property-card__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0; }
.property-card__arrow { color: #d1d5db; font-size: 18px; text-align: right; }
.metric-chip { padding: 0 12px; border-right: 1px solid #f0f1f3; }
.metric-chip:first-child { padding-left: 0; }
.metric-chip:last-child { border-right: none; }
.metric-chip.dimmed { opacity: var(--opacity-dimmed); }
.metric-chip__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 3px; }
.metric-chip__value { font-size: 15px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }
.metric-chip__value.gold { color: var(--color-gold); }

.add-property-card {
  background: var(--color-surface); border: 1.5px dashed #d1d5db; border-radius: var(--radius-card);
  padding: 22px; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; color: var(--color-text-muted); font-size: 13px; font-weight: 600;
  transition: all 0.12s; text-decoration: none;
}
.add-property-card:hover { border-color: var(--color-navy); color: var(--color-navy); }

/* ── Auth shell + card ────────────────────────────── */
.auth-shell { min-height: 100vh; background: var(--color-bg-app); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-shell__logo { margin-bottom: 32px; display: flex; align-items: center; gap: 16px; }
.auth-shell__logo .top-bar__wordmark { font-size: 2rem; }
.auth-card { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card); padding: 32px; }
.auth-trust { display: flex; gap: 24px; margin-top: 24px; color: var(--color-text-muted); font-size: 12px; }


/* ══════════════════════════════════════════════════════════════
   Property Detail (Phase 8 Task 7)
   Lifted from .superpowers/brainstorm/1798-1776549313/content/
   property-detail-v3.html — token-backed where equivalents exist.
   ══════════════════════════════════════════════════════════════ */

/* Property header strip — back-link · title · year/upload actions */
.prop-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.prop-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); text-decoration: none; font-weight: 500; }
.prop-back:hover { color: var(--color-navy); }
.prop-title-block { flex: 1; min-width: 0; }
.prop-name { font-size: 18px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; margin: 0; }
.prop-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.prop-address { font-size: 12px; color: var(--color-text-muted); }
.prop-badge { font-size: 10px; font-weight: 700; background: #eef1fb; color: var(--color-navy); padding: 3px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.prop-actions { display: flex; gap: 8px; align-items: center; }
.prop-year-pill { font-size: 12px; font-weight: 600; color: var(--color-text); background: var(--color-bg-app); border: 1px solid var(--color-border); padding: 6px 10px; border-radius: 6px; }

/* 4-up metric grid (responsive — collapses on narrow viewports) */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 12px; }
@media (max-width: 880px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .metric-grid { grid-template-columns: 1fr; } }

/* Monthly activity card — tabbed table (Income / Expenses / Tax Impact) */
.monthly-activity { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.monthly-activity__head { padding: 10px 14px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.monthly-activity__title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.monthly-activity__sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.tab-bar { display: flex; gap: 2px; }
.tab-bar__tab { font-size: 12px; font-weight: 500; color: var(--color-text-muted); padding: 6px 12px; border-radius: 6px; cursor: pointer; background: transparent; border: 0; font-family: var(--font-ui); }
.tab-bar__tab.active { background: var(--color-bg-app); color: var(--color-text); font-weight: 600; }
.monthly-table { width: 100%; border-collapse: collapse; }
.monthly-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); font-weight: 600; padding: 10px 16px; text-align: right; border-bottom: 1px solid var(--color-border); }
.monthly-table thead th:first-child { text-align: left; }
.monthly-table tbody td { font-size: 12px; padding: 8px 16px; text-align: right; color: var(--color-text-secondary); border-bottom: 1px solid #f9fafb; }
.monthly-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--color-text); }
.monthly-table tbody tr:last-child td { border-bottom: 0; }
.monthly-table .empty { padding: 18px 16px; text-align: center; color: var(--color-text-muted); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   Sale Modeler (Phase 8 Task 7)
   Lifted from .superpowers/brainstorm/1798-1776549313/content/
   sale-modeler.html — token-backed where equivalents exist.
   ══════════════════════════════════════════════════════════════ */

.property-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--color-bg-app); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }

/* Two-column layout — inputs (left, fixed) + results (right, fluid) */
.sale-modeler { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 880px) { .sale-modeler { grid-template-columns: 1fr; } }

/* Inputs panel */
.sale-inputs { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow-card); }
.sale-inputs__title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; }
.scenario-toggle { display: flex; gap: 4px; background: var(--color-bg-app); border-radius: 8px; padding: 3px; margin-bottom: 14px; }
.scenario-btn { flex: 1; text-align: center; padding: 6px; border: 0; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; background: transparent; font-family: var(--font-ui); }
.scenario-btn.active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.sale-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sale-field label { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.sale-field input, .sale-field select { border: 1px solid var(--color-border); border-radius: 7px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--color-text); outline: none; }
.sale-field input:focus, .sale-field select:focus { border-color: var(--color-navy); box-shadow: 0 0 0 3px rgba(22,39,112,0.08); }
.sale-locked { background: var(--color-bg-app); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 7px; padding: 8px 10px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.sale-locked__hint { font-size: 11px; color: var(--color-text-muted); }

/* Results panel — vertical stack of cards */
.sale-results { display: flex; flex-direction: column; gap: 14px; }

/* Headline card — 3 KPI columns */
.sale-headline { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 22px 24px; box-shadow: var(--shadow-card); }
.sale-headline__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.sale-headline__cell { padding: 4px 0; }
.sale-headline__cell + .sale-headline__cell { padding-left: 20px; border-left: 1px solid var(--color-border); }
.sale-headline__label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.sale-headline__value { font-size: 26px; font-weight: 800; color: var(--color-text); letter-spacing: -0.03em; line-height: 1; }
.sale-headline__value.positive { color: var(--color-success, #059669); }
.sale-headline__value.caution { color: var(--color-warning, #d97706); }
.sale-headline__sub { font-size: 11px; color: var(--color-text-muted); margin-top: 5px; }

/* Waterfall breakdown */
.waterfall-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.waterfall-card__head { padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.waterfall-card__title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.waterfall-card__sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.waterfall { width: 100%; border-collapse: collapse; }
.waterfall th { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; padding: 8px 18px; text-align: left; border-bottom: 1px solid var(--color-border); }
.waterfall th:last-child { text-align: right; }
.waterfall td { font-size: 12px; color: var(--color-text-secondary); padding: 9px 18px; border-bottom: 1px solid #f9fafb; }
.waterfall td:last-child { text-align: right; font-weight: 600; color: var(--color-text); }
.waterfall tr:last-child td { border-bottom: 0; }
.waterfall tr.subtotal td { background: var(--color-bg-app); font-weight: 700; color: var(--color-text); }
.waterfall tr.total td { background: #f0f4ff; font-weight: 700; color: var(--color-navy); font-size: 13px; }
.waterfall .pos { color: var(--color-success, #059669); }
.waterfall .neg { color: var(--color-danger, #dc2626); }
.waterfall .neutral { color: var(--color-text-muted); }

/* Exit-strategy comparison grid — 4 options */
.exit-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow-card); }
.exit-card__title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 14px; }
.exit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .exit-grid { grid-template-columns: 1fr; } }
.exit-strategy-card { border: 1.5px solid var(--color-border); border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color 0.12s, background 0.12s; background: var(--color-surface); }
.exit-strategy-card:hover { border-color: var(--color-navy); }
.exit-strategy-card.active { border-color: var(--color-navy); background: #f0f4ff; }
.exit-strategy-card__name { font-size: 12px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.exit-strategy-card__net { font-size: 18px; font-weight: 700; color: var(--color-navy); letter-spacing: -0.02em; }
.exit-strategy-card__caption { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.4; }

/* 5-year cumulative bars — horizontal bar rows */
.timeline-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow-card); }
.timeline-card__title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 14px; }
.cumulative-bars { display: flex; flex-direction: column; gap: 10px; }
.cumulative-bars__row { display: grid; grid-template-columns: 60px 1fr 84px; gap: 10px; align-items: center; }
.cumulative-bars__year { font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.cumulative-bars__track { background: var(--color-bg-app); border-radius: 4px; height: 8px; overflow: hidden; }
.cumulative-bars__fill { height: 100%; border-radius: 4px; background: var(--color-navy); }
.cumulative-bars__amount { font-size: 11px; font-weight: 700; text-align: right; color: var(--color-success, #059669); }

/* ── Utility ──────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Upload Documents ──────────────────────────────── */
.upload-sources { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.upload-source-group { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; padding: 14px 16px; }
.upload-source-group__label { font-size: 10px; font-weight: 700; color: var(--color-muted, #9ca3af); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.upload-source-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.source-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.source-chip--auto { background: #d1fae5; color: #065f46; }
.source-chip--auto::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #059669; }
.source-chip--ai { background: #ede9fe; color: #5b21b6; }
.source-chip--ai::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8b5cf6; }

.upload-zone { border: 2px dashed var(--color-border, #d1d5db); border-radius: 14px; background: var(--color-surface, #fff); padding: 40px 24px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 20px; position: relative; }
.upload-zone:hover, .upload-zone--drag { border-color: var(--color-navy, #162770); background: #f0f4ff; }
.upload-zone__icon { width: 48px; height: 48px; border-radius: 12px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.upload-zone__icon svg { width: 22px; height: 22px; stroke: var(--color-muted, #6b7280); }
.upload-zone__heading { font-size: 16px; font-weight: 700; color: var(--color-text, #111827); margin-bottom: 6px; }
.upload-zone__sub { font-size: 12px; color: var(--color-muted, #6b7280); margin-bottom: 14px; }
.upload-zone__browse { margin-bottom: 6px; }
.upload-zone__submit { margin-top: 10px; display: none; }

.upload-history__heading { font-size: 11px; font-weight: 700; color: var(--color-muted, #9ca3af); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.upload-history__list { display: flex; flex-direction: column; gap: 8px; }
.upload-history__item { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; }
.upload-history__name { font-size: 13px; font-weight: 600; color: var(--color-text, #111827); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-history__meta { font-size: 11px; color: var(--color-muted, #6b7280); white-space: nowrap; }
.upload-history__actions { flex-shrink: 0; }
.status-badge--done { display: inline-flex; align-items: center; gap: 4px; background: #d1fae5; color: #065f46; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }

.flash { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.flash--success { background: #d1fae5; color: #065f46; }
.flash--error { background: #fee2e2; color: #991b1b; }

/* ── Desktop-only gate (Phase 13) ──────────────────────
   Shown below 768 px on write-heavy pages. Desktop hides it.
   The gated page content gets class .hide-on-mobile, which is hidden
   below 768 px. Between the two, exactly one renders per viewport. */
.desktop-only-gate { display: none; }
.hide-on-mobile { display: block; }

@media (max-width: 768px) {
  .desktop-only-gate {
    display: flex;
    justify-content: center;
    padding: 24px 16px;
    min-height: 70vh;
    align-items: center;
  }
  .hide-on-mobile { display: none !important; }
}

.desktop-only-gate__card {
  max-width: 340px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
}
.desktop-only-gate__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0369a1;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.desktop-only-gate__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.3;
}
.desktop-only-gate__reason {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
}
.desktop-only-gate__help {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.desktop-only-gate__back {
  display: inline-block;
  background: var(--color-navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-button);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* ── Dashboard mobile (Phase 13) ───────────────────── */
@media (max-width: 768px) {
  .hero-card { padding: 16px; }
  .hero-card__value { font-size: 30px; }
  .hero-card__mini-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .property-card {
    grid-template-columns: 1fr;   /* single column */
    gap: 10px;
    padding: 14px;
  }
  .property-card__chips { grid-template-columns: repeat(2, 1fr); }
  .property-card__arrow { display: none; }   /* desktop-only affordance */
  .add-property-card { padding: 16px; }
}
.desktop-only-gate__back:hover { background: var(--color-navy-deep); }


/* ─────────────────────────────────────────────
   7. DASHBOARD v3 — Fundrise light style
   Warm cream canvas (#F5F0E8). White elevated
   cards. Numbers dominate. No heavy borders.
   ───────────────────────────────────────────── */

/* ── White canvas (scoped to .db wrapper) ── */
.db {
    background: #fff;
    margin: -20px -24px -20px -24px;
    padding: 32px 28px 80px;
    min-height: calc(100vh - var(--topbar-height));
}

/* ── Analytical Layers ── */
.layers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.layer {
    background: #F8F9FB;
    border: 1px solid #e8eaee;
    border-radius: 14px;
    padding: 28px 32px 8px;
}

.layer__header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #F0EDE7;
    margin-bottom: 0;
}

.layer__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-gold);
}

.layer__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: -0.01em;
}

.metric-rows { display: flex; flex-direction: column; }

.metric-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #F5F2EC;
    gap: 40px;
}

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

.metric-row__name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1f36;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

/* Info chip — inline with metric name */
.metric-info-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: transparent;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.metric-info-btn:hover  { border-color: var(--c-navy); color: var(--c-navy); background: var(--c-navy-muted); }
.metric-info-btn[aria-expanded="true"] { border-color: var(--c-navy); color: #fff; background: var(--c-navy); }

/* Collapsible description drawer */
.metric-row__drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease, padding-top 0.22s ease;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.55;
    padding-top: 0;
}
.metric-row__drawer.open {
    max-height: 80px;
    padding-top: 8px;
}

/* The hero number — Fundrise stat size */
.metric-row__value {
    font-size: 32px;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: -0.03em;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.metric-row__value--gold     { color: var(--c-gold); }
.metric-row__value--muted    { color: #d1d5db; font-weight: 400; font-size: 24px; }
.metric-row__value--positive { color: #16a34a; }

/* ── Property List ── */
.props-section { margin-top: 4px; }

.props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.props-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9ca3af;
}

.props-add {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-navy);
    text-decoration: none;
    opacity: 0.55;
    transition: opacity 0.12s;
}
.props-add:hover { opacity: 1; }

.prop-list {
    background: #F8F9FB;
    border: 1px solid #e8eaee;
    border-radius: 14px;
    overflow: hidden;
}

.prop-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: 20px 24px;
    gap: 24px;
    border-bottom: 1px solid #F5F2EC;
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
}

.prop-row:hover { background: #FDFAF6; }
.prop-row:last-of-type { border-bottom: none; }

.prop-row__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 3px;
}

.prop-row__addr { font-size: 12px; color: #9ca3af; }

.prop-row__arrow { color: #d1d5db; font-size: 18px; }

.prop-row-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    text-decoration: none;
    border-top: 1.5px dashed #E8E2D8;
    transition: color 0.12s;
    background: #FDFAF6;
}
.prop-row-add:hover { color: var(--c-navy); }

@media (max-width: 760px) {
    .layer { padding: 20px 20px 4px; }
    .metric-row__value { font-size: 26px; }
}

/* ── Utility ── */
.flex-1 { flex: 1; }

/* ── Ledger page ── */
.ledger-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ledger-back { font-size: 13px; color: var(--color-text-muted); text-decoration: none; }
.ledger-back:hover { color: var(--color-text); }
.ledger-title { font-size: 18px; font-weight: 600; color: var(--color-text); }
.ledger-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.ledger-summary { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ledger-kpi { background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-card, 8px); padding: 16px 20px; min-width: 160px; }
.ledger-kpi__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 4px; }
.ledger-kpi__value { font-size: 20px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ledger-flash { margin-bottom: 20px; }
.ledger-note { font-size: 11px; color: var(--color-text-muted); margin-top: 16px; line-height: 1.5; }
.ledger-bonus-marker { font-size: 10px; color: var(--color-text-muted); }
.tc__row--dim { opacity: .45; }
.tc__val--zero { color: var(--color-text-muted); }
@media (max-width: 640px) {
    .ledger-summary { flex-direction: column; }
    .ledger-kpi { min-width: 0; }
}

/* ── Button size modifier ── */
.btn-tonal--sm { font-size: 12px; padding: 6px 14px; }