/* ============================================================================
   Stock Detail Page V2 — Tyckon dark + teal redesign
   Scope: ALL rules below scoped under #stockDetailLayout.v2 to coexist with V1.
   Toggle via router.js showStockDetail() — ?v2=1 / ?v2=0 / localStorage.stockDetailV2
   Reference: project_stock_redesign_v2.md
   Lift palette/typography from etf-detail-v2.css (shipped 2026-04-23).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Phase 0 — Design tokens scoped to V2 layout.
   Declared on the layout root so all descendants inherit via var() lookups.
   --------------------------------------------------------------------------- */
#stockDetailLayout.v2 {
    /* Dark scale */
    --ink: #0a0b0c;
    --ink-2: #111314;
    --ink-3: #16191b;
    --ink-4: #1e2224;

    /* Foreground */
    --bone: #f2ede3;
    --bone-dim: #d9d3c6;
    --muted: #8c8579;
    --muted-2: #5a544a;

    /* Borders */
    --rule: #24282b;
    --rule-soft: #1a1d1f;

    /* Accent */
    --teal: #ccfdfd;
    --teal-2: #79d3d3;
    --teal-dim: rgba(204, 253, 253, 0.14);
    --teal-faint: rgba(204, 253, 253, 0.05);

    /* Semantic */
    --up: #8de0a3;
    --down: #e89691;
    --down-2: #d96b64;

    /* Typography */
    --display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
    --serif: 'Fraunces', Georgia, serif;
    --body: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Base page surface */
    background: var(--ink) !important;
    color: var(--bone);
    font-family: var(--body);
    font-feature-settings: "ss01", "cv11";
}

/* Numeric/monospace lock — every number cell should land here.
   Phase 1+ adds explicit class hooks; this is the safety net for inline values. */
#stockDetailLayout.v2 .mono,
#stockDetailLayout.v2 [data-mono] {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "zero";
}

/* (Phase 0 trial marker `::before { content: 'V2' }` removed on cutover 2026-05-19.) */

/* ===========================================================================
   PHASE 1 — Top bar + price hero + chart frame
   =========================================================================== */

/* --- Layout container -------------------------------------------------------
   V1 had width:45%; min-width:900px; fixed 1330px header-content.
   V2 uses fluid max-width 1600, padding pulled out of inline styles via cascade.
   `!important` needed because router.js sets inline width/left/etc. on this
   container; we keep its dimensional behaviour but tighten paddings + colors. */
#stockDetailLayout.v2 {
    padding: 28px 32px 80px;
    background: var(--ink) !important;
    min-width: 0;
}
/* V1 caps `.stock-detail-left-panel` at 1300px. Match the header band to that
   so they line up. (Earlier attempt bumped left-panel to 1600 — user prefers
   the V1 content width preserved, header sized down instead.) */
#stockDetailLayout.v2 .stock-detail-header,
#stockDetailLayout.v2 .stock-detail-content,
#stockDetailLayout.v2 .stock-detail-info-cards {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}
/* Description panel sits inside .stock-detail-left-panel — pin to the same
   1300px band explicitly so any V1 width override doesn't shrink it. */
#stockDetailLayout.v2 .stock-detail-description-panel {
    width: 100%;
    max-width: 1300px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* --- Header (top bar) ------------------------------------------------------- */
#stockDetailLayout.v2 .stock-detail-header {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 18px;
    margin-bottom: 22px;
}
#stockDetailLayout.v2 .stock-detail-header-content {
    width: 100%;
    max-width: none;
}
#stockDetailLayout.v2 .stock-detail-header-left {
    gap: 16px;
}

#stockDetailLayout.v2 .stock-detail-back-btn {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--bone-dim);
    border-radius: 2px;
    padding: 7px 12px;
    font: 500 12px/1 var(--display);
    letter-spacing: 0.02em;
    transition: border-color .15s, color .15s;
}
#stockDetailLayout.v2 .stock-detail-back-btn:hover {
    border-color: var(--teal-dim);
    color: var(--teal);
    background: transparent;
}

#stockDetailLayout.v2 .stock-detail-symbol {
    color: var(--bone);
    font: 600 30px/1 var(--display);
    letter-spacing: -0.02em;
}
#stockDetailLayout.v2 .stock-detail-website {
    color: var(--muted);
    transition: color .15s;
}
#stockDetailLayout.v2 .stock-detail-website:hover { color: var(--teal); }
#stockDetailLayout.v2 .stock-detail-website svg { width: 18px; height: 18px; }

/* Market Cap pill — teal-faint bg + teal-dim border, mono numeric */
#stockDetailLayout.v2 .stock-detail-market-cap {
    display: inline-block;
    background: var(--teal-faint);
    border: 1px solid var(--teal-dim);
    color: var(--teal);
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.04em;
    padding: 5px 9px;
    border-radius: 2px;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

/* Sub-line `NASDAQ · ISIN · CIK · Apple Inc.` — populated by JS */
#stockDetailLayout.v2 .stock-detail-info {
    color: var(--muted);
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.06em;
    margin-top: 6px;
    text-transform: uppercase;
}
#stockDetailLayout.v2 .stock-detail-name {
    display: none; /* merged into .stock-detail-info via JS; hide legacy span */
}

/* Action buttons row: Watch / Portfolio / Share / Pinned */
#stockDetailLayout.v2 .stock-detail-actions {
    gap: 8px;
}
#stockDetailLayout.v2 .stock-detail-btn {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--bone-dim);
    font: 500 11px/1.2 var(--display);
    letter-spacing: 0.04em;
    padding: 9px 12px;
    border-radius: 2px;
    text-transform: none;
    transition: border-color .15s, color .15s, background .15s;
}
#stockDetailLayout.v2 .stock-detail-btn:hover:not(:disabled) {
    border-color: var(--teal-dim);
    color: var(--teal);
    background: var(--teal-faint);
}
#stockDetailLayout.v2 .stock-detail-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Price hero + chart card frame ----------------------------------------- */
#stockDetailLayout.v2 .stock-detail-content {
    /* Existing two-panel grid logic preserved; just paint the surface. */
    color: var(--bone);
}

#stockDetailLayout.v2 .stock-detail-chart-container {
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 22px 24px;
}

#stockDetailLayout.v2 .stock-detail-chart-header {
    padding-bottom: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule-soft);
}

#stockDetailLayout.v2 .stock-detail-chart-current-price {
    color: var(--bone);
    font: 600 48px/1 var(--display);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Chart change — router.js sets inline style.color to V1 colors (#7CC3E4 /
   #FF6B6B). Override with !important. Phase 4 cleanup can convert that JS
   to use class names and drop the !important. */
#stockDetailLayout.v2 .stock-detail-chart-change {
    font: 500 14px/1 var(--mono);
    margin-top: 6px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    text-shadow: none !important;
}
#stockDetailLayout.v2 .stock-detail-chart-change[style*="124, 195, 228"],
#stockDetailLayout.v2 .stock-detail-chart-change[style*="#7CC3E4"],
#stockDetailLayout.v2 .stock-detail-chart-change.positive {
    color: var(--up) !important;
}
#stockDetailLayout.v2 .stock-detail-chart-change[style*="255, 107, 107"],
#stockDetailLayout.v2 .stock-detail-chart-change[style*="#FF6B6B"],
#stockDetailLayout.v2 .stock-detail-chart-change.negative {
    color: var(--down) !important;
}

/* --- Timeframe pills (top-right of chart) ----------------------------------- */
#stockDetailLayout.v2 .stock-detail-chart-timeframes {
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 2px;
    display: inline-flex;
    gap: 0;
    background: var(--ink);
}
#stockDetailLayout.v2 .stock-detail-timeframe-btn {
    background: transparent;
    border: 0;
    color: var(--muted);
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: color .12s, background .12s, box-shadow .12s;
}
#stockDetailLayout.v2 .stock-detail-timeframe-btn:hover {
    color: var(--bone);
}
#stockDetailLayout.v2 .stock-detail-timeframe-btn.active {
    color: var(--ink);
    background: var(--teal);
    box-shadow: inset 0 -1px 0 var(--teal-2);
}

/* --- Chart type selector under chart (Price / Fundamentals / Profitability /
       Valuation) — outlined pills, no fill until active */
#stockDetailLayout.v2 .stock-detail-chart-type-selector {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule-soft);
}
#stockDetailLayout.v2 .stock-detail-chart-type-btn {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--bone-dim);
    font: 500 11px/1 var(--display);
    letter-spacing: 0.04em;
    padding: 8px 14px;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
#stockDetailLayout.v2 .stock-detail-chart-type-btn:hover {
    border-color: var(--teal-dim);
    color: var(--teal);
}
#stockDetailLayout.v2 .stock-detail-chart-type-btn.active {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--teal-faint);
}

/* --- Chart placeholder text re-skin ----------------------------------------- */
#stockDetailLayout.v2 .stock-detail-chart-placeholder {
    color: var(--muted);
    font: 400 12px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===========================================================================
   PHASE 2 — METRICS card + Analyst Ratings + GEX panel
   =========================================================================== */

/* --- METRICS card (line 1479 of index_v5.html) ----------------------------- */
#stockDetailLayout.v2 .stock-detail-metrics-card {
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 18px 20px;
    margin-top: 14px !important; /* beats inline `margin-top: 15px` */
}

#stockDetailLayout.v2 .stock-detail-metrics-header {
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 14px;
    padding-bottom: 12px;
}
#stockDetailLayout.v2 .stock-detail-metrics-header span {
    color: var(--muted);
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#stockDetailLayout.v2 .metrics-edit-btn {
    color: var(--muted);
    border-radius: 2px;
}
#stockDetailLayout.v2 .metrics-edit-btn:hover {
    color: var(--teal);
    background: var(--teal-faint);
}
#stockDetailLayout.v2 .metrics-edit-btn.active {
    color: var(--teal);
    background: var(--teal-faint);
}

#stockDetailLayout.v2 .stock-detail-metrics-grid {
    /* V1 already declares 6-col; V2 keeps it but enforces tighter cell borders */
    grid-template-columns: repeat(6, 1fr);
}

#stockDetailLayout.v2 .stock-detail-metric-item {
    border: 1px solid var(--rule-soft);
    background: transparent;
    padding: 9px 11px;
    min-height: 36px;
    transition: background .15s, border-color .15s;
}
#stockDetailLayout.v2 .stock-detail-metric-item:hover {
    background: var(--ink-3);
    border-color: var(--rule);
}

#stockDetailLayout.v2 .stock-detail-metric-label {
    color: var(--muted);
    font: 500 10.5px/1.2 var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#stockDetailLayout.v2 .stock-detail-metric-value {
    color: var(--bone);
    font: 500 12px/1 var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "zero";
}

/* router.js writes inline:
     <div style="color: #7CC3E4">  // good     → green --up in V2
     <div style="color: #FF6B6B">  // bad      → red --down in V2
     <div style="color: #FFD700">  // warning  → keep gold-ish, but unify to teal-2
     (no color)                    // neutral  → --bone (inherited)
   Plus text-shadow on good/bad — kill it in V2 (too noisy on the new dark). */
#stockDetailLayout.v2 .stock-detail-metric-value > div {
    font-family: var(--mono) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "zero";
    font-size: 12px !important;
    font-weight: 500;
    text-shadow: none !important;
}
#stockDetailLayout.v2 .stock-detail-metric-value > div[style*="#7CC3E4"],
#stockDetailLayout.v2 .stock-detail-metric-value > div[style*="124, 195, 228"] {
    color: var(--up) !important;
}
#stockDetailLayout.v2 .stock-detail-metric-value > div[style*="#FF6B6B"],
#stockDetailLayout.v2 .stock-detail-metric-value > div[style*="255, 107, 107"] {
    color: var(--down) !important;
}
#stockDetailLayout.v2 .stock-detail-metric-value > div[style*="#FFD700"],
#stockDetailLayout.v2 .stock-detail-metric-value > div[style*="255, 215, 0"] {
    color: var(--teal-2) !important;
}

/* --- ANALYST RATINGS (line 1502) -------------------------------------------
   DOM uses inline `grid-template-columns:repeat(6,1fr)` + per-cell inline
   border:1px solid #2a2a2a + margin:-0.5px. We override colors, not layout. */
#stockDetailLayout.v2 .stock-detail-ratings-card {
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 18px 20px;
    margin-top: 14px !important;
}

#stockDetailLayout.v2 .stock-detail-ratings-header {
    color: var(--muted) !important;
    font: 500 10.5px/1 var(--mono) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-soft);
}

#stockDetailLayout.v2 .ratings-list .rating-row {
    border: 1px solid var(--rule-soft) !important;
    background: transparent;
    transition: background .15s, border-color .15s;
}
#stockDetailLayout.v2 .ratings-list .rating-row:hover {
    background: var(--ink-3);
    border-color: var(--rule) !important;
}

#stockDetailLayout.v2 .rating-label {
    color: var(--muted);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#stockDetailLayout.v2 .rating-value {
    color: var(--bone);
    font: 500 13px/1.2 var(--mono);
    font-variant-numeric: tabular-nums;
}

/* Consensus pill — `.consensus-buy` (currently blue) / `.consensus-hold` (gold) */
#stockDetailLayout.v2 .rating-value.consensus-buy,
#stockDetailLayout.v2 .consensus-buy {
    color: var(--up) !important;
    font-weight: 600;
}
#stockDetailLayout.v2 .rating-value.consensus-hold,
#stockDetailLayout.v2 .consensus-hold {
    color: var(--teal-2) !important;
    font-weight: 600;
}
/* Recent grade — italic Fraunces accent (small, decorative) */
#stockDetailLayout.v2 .rating-value.recent-rating {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    color: var(--bone-dim);
}
/* Target upside in green when positive — JS writes plain text, so paint
   the whole #priceUpside span teal/up; bad upsides stay red via the same
   inline-color matcher used for chart change. */
#stockDetailLayout.v2 #priceUpside {
    color: var(--up);
    font-weight: 600;
}

/* --- OPTIONS FLOW & GAMMA EXPOSURE (line 1533) ----------------------------- */
#stockDetailLayout.v2 .stock-detail-gex-container {
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 14px !important;
}

#stockDetailLayout.v2 .stock-detail-gex-header {
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
    border-bottom: 1px solid var(--rule);
    padding: 12px 18px;
}
#stockDetailLayout.v2 .stock-detail-gex-title {
    color: var(--muted);
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
/* "Full Options →" link — set inline to #0A84FF in router.js; override */
#stockDetailLayout.v2 .stock-detail-gex-header a {
    color: var(--teal) !important;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.04em;
    opacity: 1 !important;
}
#stockDetailLayout.v2 .stock-detail-gex-header a:hover {
    color: var(--teal) !important;
    text-decoration: underline;
}

#stockDetailLayout.v2 .stock-detail-gex-state {
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 4px 8px;
    border: 1px solid var(--rule);
}
#stockDetailLayout.v2 .gex-state-sticky {
    background: rgba(141, 224, 163, 0.08);
    color: var(--up);
    border-color: rgba(141, 224, 163, 0.25);
}
#stockDetailLayout.v2 .gex-state-trending {
    background: rgba(232, 150, 145, 0.08);
    color: var(--down);
    border-color: rgba(232, 150, 145, 0.25);
}

#stockDetailLayout.v2 .gex-metrics-row {
    border-bottom: 1px solid var(--rule-soft);
}
#stockDetailLayout.v2 .gex-metric-cell {
    border-right: 1px solid var(--rule-soft);
    padding: 12px 8px;
}
#stockDetailLayout.v2 .gex-metric-cell:last-child {
    border-right: none;
}
#stockDetailLayout.v2 .gex-metric-label {
    color: var(--muted);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: 0.14em;
}
#stockDetailLayout.v2 .gex-metric-value {
    color: var(--bone);
    font: 500 13px/1 var(--mono);
    font-variant-numeric: tabular-nums;
}

/* GEX chart wrapper bg */
#stockDetailLayout.v2 .gex-chart-wrapper {
    background: var(--ink);
}

#stockDetailLayout.v2 .gex-levels-row {
    background: var(--ink-2);
    border-top: 1px solid var(--rule-soft);
    padding: 10px 18px 14px;
}
#stockDetailLayout.v2 .gex-level-item {
    color: var(--muted);
    font: 400 11px/1 var(--mono);
}
#stockDetailLayout.v2 .gex-level-value {
    color: var(--bone-dim);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   PHASE 3 — Data tables (Institutional / Congressional / ETF Exposure / Insider)
   + Company Description prose
   =========================================================================== */

/* --- Shared table-card frame ----------------------------------------------- */
#stockDetailLayout.v2 .stock-detail-info-card,
#stockDetailLayout.v2 .stock-detail-holdings-container,
#stockDetailLayout.v2 .stock-detail-congressional-container {
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
}

#stockDetailLayout.v2 .stock-detail-info-cards {
    gap: 14px;
    margin-top: 14px;
}

/* Holdings + Congressional row sits inside index_v5.html as
   `.stock-detail-holdings-row` flex with 60/40 split. Preserve ratio. */
#stockDetailLayout.v2 .stock-detail-holdings-row {
    gap: 14px;
    margin-top: 14px;
}

/* --- Card headers (title + subtitle/stats row) ------------------------------ */
#stockDetailLayout.v2 .stock-detail-info-card-header,
#stockDetailLayout.v2 .stock-detail-holdings-header,
#stockDetailLayout.v2 .stock-detail-congressional-header {
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
    border-bottom: 1px solid var(--rule);
    padding: 12px 18px;
    margin-bottom: 0;
}

#stockDetailLayout.v2 .stock-detail-info-card-title,
#stockDetailLayout.v2 .stock-detail-holdings-title,
#stockDetailLayout.v2 .stock-detail-congressional-title {
    color: var(--muted) !important;
    font: 500 10.5px/1 var(--mono) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#stockDetailLayout.v2 .stock-detail-info-card-subtitle {
    color: var(--muted-2);
    font: 400 10px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Stats row under holdings/congressional title */
#stockDetailLayout.v2 .stock-detail-holdings-stats,
#stockDetailLayout.v2 .stock-detail-congressional-summary {
    background: var(--ink-2);
    padding: 10px 18px;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--bone-dim);
    font: 400 11px/1.3 var(--mono);
}
#stockDetailLayout.v2 .stock-detail-holdings-stat,
#stockDetailLayout.v2 .stock-detail-congressional-summary-item {
    color: var(--bone-dim);
    font-variant-numeric: tabular-nums;
}

/* --- Shared table interior styling ------------------------------------------ */
#stockDetailLayout.v2 .stock-detail-etf-table,
#stockDetailLayout.v2 .stock-detail-insider-table,
#stockDetailLayout.v2 .stock-detail-holdings-table,
#stockDetailLayout.v2 .stock-detail-congressional-table {
    padding: 0;
}
#stockDetailLayout.v2 .stock-detail-etf-table table,
#stockDetailLayout.v2 .stock-detail-insider-table table,
#stockDetailLayout.v2 .stock-detail-holdings-table table,
#stockDetailLayout.v2 .stock-detail-congressional-table table {
    border-collapse: collapse;
    width: 100%;
}

#stockDetailLayout.v2 .stock-detail-etf-table th,
#stockDetailLayout.v2 .stock-detail-insider-table th,
#stockDetailLayout.v2 .stock-detail-holdings-table th,
#stockDetailLayout.v2 .stock-detail-congressional-table th {
    background: var(--ink);
    border-bottom: 1px solid var(--rule);
    color: var(--muted) !important;
    font: 500 9.5px/1 var(--mono) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 10px 12px !important;
}

#stockDetailLayout.v2 .stock-detail-etf-table td,
#stockDetailLayout.v2 .stock-detail-insider-table td,
#stockDetailLayout.v2 .stock-detail-holdings-table td,
#stockDetailLayout.v2 .stock-detail-congressional-table td {
    color: var(--bone) !important;
    border-bottom: 1px dashed var(--rule-soft) !important;
    padding: 10px 12px !important;
    font: 400 12px/1.3 var(--mono) !important;
    font-variant-numeric: tabular-nums;
}

#stockDetailLayout.v2 .stock-detail-etf-table tbody tr:hover,
#stockDetailLayout.v2 .stock-detail-insider-table tbody tr:hover,
#stockDetailLayout.v2 .stock-detail-holdings-table tbody tr:hover,
#stockDetailLayout.v2 .stock-detail-congressional-table tbody tr:hover {
    background: var(--ink-3) !important;
}

/* Fund/Politician name column (first td) — slightly brighter */
#stockDetailLayout.v2 .stock-detail-holdings-table td:first-child,
#stockDetailLayout.v2 .stock-detail-congressional-table td:first-child,
#stockDetailLayout.v2 .holdings-fund-name {
    color: var(--bone) !important;
    font-family: var(--body) !important;
    font-weight: 500;
    letter-spacing: 0;
}

/* Insider name (similar treatment) */
#stockDetailLayout.v2 .insider-name {
    color: var(--bone) !important;
    font-family: var(--body) !important;
    font-weight: 500;
    letter-spacing: 0;
}
#stockDetailLayout.v2 .insider-position {
    color: var(--muted) !important;
    font: 400 10px/1.2 var(--mono) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Semantic colors: positive/negative change cells ----------------------- */
#stockDetailLayout.v2 td.positive {
    color: var(--up) !important;
}
#stockDetailLayout.v2 td.negative {
    color: var(--down) !important;
}

/* --- Action pills (BUY/SELL) ------------------------------------------------ */
/* Insider action — was text-color-only in V1, upgrade to outlined pill */
#stockDetailLayout.v2 .insider-action-buy,
#stockDetailLayout.v2 .insider-action-sell {
    display: inline-block;
    font: 500 10px/1 var(--mono) !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px solid;
}
#stockDetailLayout.v2 .insider-action-buy {
    color: var(--up) !important;
    background: rgba(141, 224, 163, 0.08);
    border-color: rgba(141, 224, 163, 0.25);
}
#stockDetailLayout.v2 .insider-action-sell {
    color: var(--down) !important;
    background: rgba(232, 150, 145, 0.08);
    border-color: rgba(232, 150, 145, 0.25);
}

/* Congressional type pill (router.js writes `cong-type cong-type-{buy|sell|other}`) */
#stockDetailLayout.v2 .cong-type {
    display: inline-block;
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px solid var(--rule);
    color: var(--bone-dim);
    background: transparent;
}
#stockDetailLayout.v2 .cong-type-buy {
    color: var(--up) !important;
    background: rgba(141, 224, 163, 0.08) !important;
    border-color: rgba(141, 224, 163, 0.25) !important;
}
#stockDetailLayout.v2 .cong-type-sell {
    color: var(--down) !important;
    background: rgba(232, 150, 145, 0.08) !important;
    border-color: rgba(232, 150, 145, 0.25) !important;
}
#stockDetailLayout.v2 .cong-type-other {
    color: var(--muted) !important;
}

/* --- Pagination row (holdings table) ---------------------------------------- */
#stockDetailLayout.v2 .stock-detail-holdings-pagination {
    background: var(--ink-2);
    border-top: 1px solid var(--rule-soft);
    padding: 10px 18px;
    color: var(--muted);
    font: 400 11px/1 var(--mono);
}
#stockDetailLayout.v2 .stock-detail-holdings-pagination button {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--bone-dim);
    font: 500 11px/1 var(--mono);
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
#stockDetailLayout.v2 .stock-detail-holdings-pagination button:hover:not(:disabled),
#stockDetailLayout.v2 .stock-detail-holdings-pagination button.active {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--teal-faint);
}

/* --- Congressional show-all button ------------------------------------------ */
#stockDetailLayout.v2 .stock-detail-congressional-show-all {
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    color: var(--bone-dim) !important;
    font: 500 11px/1 var(--mono) !important;
    letter-spacing: 0.04em;
    border-radius: 2px;
    padding: 7px 14px;
    transition: border-color .12s, color .12s, background .12s;
}
#stockDetailLayout.v2 .stock-detail-congressional-show-all:hover {
    border-color: var(--teal) !important;
    color: var(--teal) !important;
    background: var(--teal-faint) !important;
}

/* Empty/loading states for tables */
#stockDetailLayout.v2 .stock-detail-congressional-empty,
#stockDetailLayout.v2 .stock-detail-congressional-loading {
    color: var(--muted) !important;
    font: 400 12px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Company Description prose --------------------------------------------- */
#stockDetailLayout.v2 .stock-detail-description-panel {
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 18px 22px;
    margin-top: 14px;
}
#stockDetailLayout.v2 .stock-detail-description-title {
    color: var(--muted) !important;
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
#stockDetailLayout.v2 .stock-detail-description-content {
    color: var(--bone-dim);
    font: 400 13px/1.65 var(--body);
    letter-spacing: 0;
    /* No max-width — prose spans the full panel width to match
       the other cards. (Earlier 78ch readability cap removed
       at user request.) */
}
#stockDetailLayout.v2 .stock-detail-description-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-soft);
}
#stockDetailLayout.v2 .stock-detail-description-toggle {
    color: var(--teal) !important;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Scrollbars for inner scrolling tables — re-tint to V2 */
#stockDetailLayout.v2 .stock-detail-holdings-table::-webkit-scrollbar-thumb,
#stockDetailLayout.v2 .stock-detail-congressional-table::-webkit-scrollbar-thumb {
    background: var(--rule);
}
#stockDetailLayout.v2 .stock-detail-holdings-table::-webkit-scrollbar-thumb:hover,
#stockDetailLayout.v2 .stock-detail-congressional-table::-webkit-scrollbar-thumb:hover {
    background: var(--muted-2);
}

/* ===========================================================================
   PHASE 4 — Mobile + cutover (next).
   =========================================================================== */