/* Legacy global stylesheet — slated for deletion in story 15.4.11.
   Story 15.4.9 (2026-04-23) moved the landing-page + footer rules into
   qds.css (backed by QDS tokens). Story 15.4.10b did the same for the nav
   component. What remains here is the Portfolio v2 (Epic 14.4) component
   cascade, which is scoped under .portfolio-v2 and not targeted by 15.4.11.
   Once the remaining consumers of .portfolio-v2 move into qds.css (its own
   story), this file can be deleted per 15.4.11. */
@import url('qds.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    min-height: 100vh;
    /* font-family, color, background, font-size, line-height all inherit
       from the qds.css global body rule (story 15.4.3). */
}

/* ══════════════════════════════════════════════════════════════════ */
/* Portfolio v2 — card-row layout (Epic 14.4)                         */
/* Scoped under .portfolio-v2 to avoid leaking into other pages.      */
/* Reference mock: docs/mocks/portfolio-redesign-v4.html               */
/* ══════════════════════════════════════════════════════════════════ */
.portfolio-v2 {
    /* QDS token aliases — story 15.3.1 */
    --pv-bg: var(--bg-page);
    --pv-bg-elev: var(--bg-card-2);
    --pv-bg-row-hover: var(--hover);
    --pv-text: var(--text-primary);
    --pv-text-2: var(--text-secondary);
    --pv-text-3: var(--text-subtle);
    --pv-divider: var(--divider);
    --pv-green: var(--green);
    --pv-green-bright: var(--green);
    --pv-red: var(--red);
    --pv-amber: var(--amber);
    --pv-blue: var(--blue);
    --pv-blue-dim: var(--blue-soft);
    --pv-conviction-high: var(--green-fg);
    --pv-conviction-med: var(--text-secondary);
    --pv-conviction-low: var(--text-subtle);

    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    background: var(--pv-bg);
    color: var(--pv-text);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Page head + floating grade badge (14.4.7) */
.portfolio-v2 .pv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}
.portfolio-v2 .pv-head h1 {
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--pv-text);
}
.portfolio-v2 .pv-subtitle {
    color: var(--pv-text-2);
    font-size: 14px;
    margin-top: 4px;
}
.portfolio-v2 .pv-grade-float {
    text-align: center;
    padding: 12px 20px;
    border-radius: 14px;
    border: 1.5px solid var(--pv-blue-dim);
    background: rgba(10,132,255,0.04);
    min-width: 92px;
    flex-shrink: 0;
}
.portfolio-v2 .pv-grade-float .mark {
    font-size: 40px;
    font-weight: 700;
    color: var(--pv-blue);
    line-height: 1;
    letter-spacing: -0.02em;
}
.portfolio-v2 .pv-grade-float .sub {
    font-size: 9px;
    color: var(--pv-text-2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 6px;
}

/* 4-metric summary strip (14.4.7) */
.portfolio-v2 .pv-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--pv-divider);
    margin-bottom: 4px;
}
.portfolio-v2 .pv-metric .label {
    font-size: 10px;
    color: var(--pv-text-2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    font-weight: 600;
}
.portfolio-v2 .pv-metric .value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--pv-text);
}
.portfolio-v2 .pv-metric .hint {
    font-size: 11px;
    color: var(--pv-text-2);
    margin-top: 4px;
}
.portfolio-v2 .pv-metric .hint.up { color: var(--pv-green); }
.portfolio-v2 .pv-metric .hint.down { color: var(--pv-red); }
.portfolio-v2 .pv-metric .hint.warn { color: var(--pv-amber); }

/* Section labels — Stocks / ETFs / Uncovered (14.4.8) */
.portfolio-v2 .pv-section-label {
    font-size: 11px;
    color: var(--pv-text-2);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    padding: 28px 0 6px;
}
.portfolio-v2 .pv-section-label .count {
    color: var(--pv-text-3);
    font-weight: 500;
    margin-left: 6px;
}

/* Card row (14.4.1) */
.portfolio-v2 .pv-row {
    display: grid;
    grid-template-columns: 230px 1fr 140px;
    align-items: center;
    padding: 10px 4px;
    gap: 16px;
    border-bottom: 1px solid var(--pv-divider);
    transition: background 120ms ease;
    min-height: 72px;
}
.portfolio-v2 .pv-row:hover {
    background: var(--pv-bg-row-hover);
}
/* Secondary rows (beyond top holdings) collapse to 56px */
.portfolio-v2 .pv-row.pv-row-compact {
    min-height: 56px;
}

/* Left column: ticker + meta-line (14.4.4) */
.portfolio-v2 .pv-left .ticker {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.15;
    color: var(--pv-text);
}
.portfolio-v2 .pv-left .meta-line {
    font-size: 12px;
    color: var(--pv-text-2);
    margin-top: 3px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.portfolio-v2 .pv-left .meta-line .name { color: var(--pv-text-2); }
.portfolio-v2 .pv-left .meta-line .sep { color: var(--pv-text-3); }
.portfolio-v2 .pv-left .meta-line .weight { color: var(--pv-text); font-weight: 500; }
.portfolio-v2 .pv-left .meta-line .upside { color: var(--pv-green); font-weight: 500; }
.portfolio-v2 .pv-left .meta-line .conviction-high {
    color: var(--pv-conviction-high);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 10.5px;
}
.portfolio-v2 .pv-left .meta-line .conviction-med {
    color: var(--pv-conviction-med);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 10.5px;
}
.portfolio-v2 .pv-left .meta-line .conviction-low {
    color: var(--pv-conviction-low);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 10.5px;
}
.portfolio-v2 .pv-left .meta-line .no-research-chip {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1.5px 6px;
    border-radius: 4px;
    color: var(--pv-text-2);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--pv-divider);
    text-transform: uppercase;
}

/* Momentum labels — RSI extended/discounted (14.4.4/14.4.5) */
.portfolio-v2 .pv-left .meta-line .mom-extended {
    color: var(--pv-amber);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10.5px;
}
.portfolio-v2 .pv-left .meta-line .mom-discounted {
    color: var(--pv-green-bright);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10.5px;
}

/* Earnings chip — shown only when earnings ≤ 14 days out (14.4.6) */
.portfolio-v2 .pv-left .meta-line .earnings-chip {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pv-amber);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--amber-soft);
    border: 1px solid rgba(255,159,10,0.25);
    letter-spacing: 0.02em;
}

/* Tooltip — pure-CSS [data-tip]::after (14.4.5).                     */
/* Scoped under .portfolio-v2 so it doesn't leak onto other pages.    */
.portfolio-v2 [data-tip] {
    position: relative;
    cursor: help;
}
.portfolio-v2 [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 400;
    padding: 9px 11px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.08);
    width: 220px;
    white-space: normal;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    text-align: left;
}
.portfolio-v2 [data-tip]:hover::after,
.portfolio-v2 [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Middle column: sparkline placeholder (14.4.2 Part 2) */
.portfolio-v2 .pv-spark {
    display: flex;
    align-items: center;
    justify-content: center;
}
.portfolio-v2 .sparkline-placeholder {
    width: 100%;
    max-width: 200px;
    min-height: 32px;
    height: 32px;
    border-radius: 4px;
    background: transparent;
}
/* Keep the inline SVG responsive — it has a width="200" attribute that
   would otherwise override the placeholder's max-width on narrow viewports. */
.portfolio-v2 .pv-spark svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Right column: price + day-change pill (14.4.3) */
.portfolio-v2 .pv-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.portfolio-v2 .pv-right .price {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--pv-text);
}
.portfolio-v2 .pv-right .pill-row {
    display: flex;
    justify-content: flex-end;
}

/* Day-change pill — solid fill, white text, NO border (14.4.3) */
.portfolio-v2 .pv-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    border: 0;
    color: #ffffff;
    min-width: 62px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.portfolio-v2 .pv-pill.up { background: var(--pv-green); }
.portfolio-v2 .pv-pill.down { background: var(--pv-red); }

/* Mobile */
@media (max-width: 640px) {
    .portfolio-v2 {
        padding: 24px 16px 60px;
    }
    .portfolio-v2 .pv-head h1 { font-size: 26px; }
    .portfolio-v2 .pv-grade-float {
        padding: 8px 14px;
        min-width: 72px;
    }
    .portfolio-v2 .pv-grade-float .mark { font-size: 30px; }
    .portfolio-v2 .pv-summary {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .portfolio-v2 .pv-row {
        grid-template-columns: 1fr 80px auto;
        gap: 10px;
        min-height: 68px;
    }
    .portfolio-v2 .pv-row.pv-row-compact { min-height: 52px; }
    .portfolio-v2 .pv-left .ticker { font-size: 16px; }
    .portfolio-v2 .sparkline-placeholder { max-width: 80px; }
    .portfolio-v2 .pv-spark svg { width: 80px; }
    .portfolio-v2 .pv-right .price { font-size: 15px; }
    .portfolio-v2 .pv-pill {
        min-width: 54px;
        font-size: 11px;
    }
    /* Tooltips: narrower + left-anchored on mobile so they don't overflow viewport */
    .portfolio-v2 [data-tip]::after {
        width: 180px;
        left: 0;
        transform: translateY(4px);
    }
    .portfolio-v2 [data-tip]:hover::after,
    .portfolio-v2 [data-tip]:focus-visible::after {
        transform: translateY(0);
    }
}