/* ==========================================================================
   ETF Detail v2 — Variant A (Bento 3×3)
   Spec: memory/project_etf_redesign_v2.md
   Reference: .claude/preview/etf_design_a.html

   All rules scoped under #etfDetailLayoutV2 so nothing leaks into the rest of
   the site (we reuse generic class names like .card, .btn, .tag from the
   reference — keeping the names 1:1 with the spec makes porting easier).

   Feature flag: render this layout when localStorage.etfDetailV2 === '1'
   or URL has ?v2=1. See router.js showETFDetail().
   ========================================================================== */

#etfDetailLayoutV2 {
    /* ─── Design tokens (reference CSS :root) ─── */
    --ink: #0a0b0c;
    --ink-2: #111314;
    --ink-3: #16191b;
    --ink-4: #1e2224;

    --bone: #f2ede3;
    --bone-dim: #d9d3c6;

    --muted: #8c8579;
    --muted-2: #5a544a;

    --rule: #24282b;
    --rule-soft: #1a1d1f;

    --teal: #ccfdfd;
    --teal-2: #79d3d3;
    --teal-dim: rgba(204, 253, 253, .14);
    --teal-faint: rgba(204, 253, 253, .05);

    --up: #8de0a3;
    --down: #e89691;
    --down-2: #d96b64;

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

    /* ─── Layout root ─── */
    background: var(--ink);
    color: var(--bone);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
}

/* Reset within V2 scope only */
#etfDetailLayoutV2 *,
#etfDetailLayoutV2 *::before,
#etfDetailLayoutV2 *::after {
    box-sizing: border-box;
}

#etfDetailLayoutV2 button {
    font-family: inherit;
}

/* ─── Utility classes ─────────────────────────────────────────────────── */

#etfDetailLayoutV2 .num,
#etfDetailLayoutV2 .mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "zero";
}

#etfDetailLayoutV2 .display {
    font-family: var(--display);
    letter-spacing: -0.03em;
}

#etfDetailLayoutV2 .serif {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
}

/* ─── Page container ─────────────────────────────────────────────────── */

#etfDetailLayoutV2 .etf-page {
    padding: 28px 32px 80px;
    max-width: 1600px;
    margin: 0 auto;
}

#etfDetailLayoutV2 .etf-page.w2 {
    max-width: 1720px;
}

/* ─── Top row (Back / ticker / tags / actions) ───────────────────────── */

#etfDetailLayoutV2 .etf-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

#etfDetailLayoutV2 .etf-top .left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

#etfDetailLayoutV2 .back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--muted);
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    transition: 0.15s;
}

#etfDetailLayoutV2 .back:hover {
    color: var(--teal);
    border-color: var(--teal-dim);
}

#etfDetailLayoutV2 .etf-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.03em;
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

#etfDetailLayoutV2 .etf-title .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--teal);
}

#etfDetailLayoutV2 .tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 4px 9px;
    border: 1px solid var(--rule);
    border-radius: 2px;
}

#etfDetailLayoutV2 .tag.emerald {
    color: var(--up);
    border-color: rgba(141, 224, 163, 0.22);
}

#etfDetailLayoutV2 .tag.teal {
    color: var(--teal);
    border-color: var(--teal-dim);
    background: var(--teal-faint);
}

#etfDetailLayoutV2 .etf-actions {
    display: flex;
    gap: 8px;
}

#etfDetailLayoutV2 .btn {
    font-family: var(--display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: -0.005em;
    padding: 9px 14px;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--bone);
    transition: 0.15s;
}

#etfDetailLayoutV2 .btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

#etfDetailLayoutV2 .btn.primary {
    background: transparent;
    color: var(--teal);
    border-color: var(--teal);
    font-weight: 600;
}

#etfDetailLayoutV2 .btn.primary:hover {
    background: var(--teal-faint);
    color: var(--teal);
}

/* ─── Meta strip ─────────────────────────────────────────────────────── */

#etfDetailLayoutV2 .etf-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule-soft);
}

#etfDetailLayoutV2 .etf-meta .sep {
    width: 3px;
    height: 3px;
    background: var(--muted-2);
    transform: rotate(45deg);
}

#etfDetailLayoutV2 .etf-meta .live {
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#etfDetailLayoutV2 .etf-meta .live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 10px var(--teal);
    animation: etfv2-blip 1.6s ease-in-out infinite;
}

@keyframes etfv2-blip {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ─── Cards ─────────────────────────────────────────────────────────── */

#etfDetailLayoutV2 .card {
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

#etfDetailLayoutV2 .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
}

#etfDetailLayoutV2 .card-head .k {
    color: var(--bone-dim);
}

#etfDetailLayoutV2 .card-head .right {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 10px;
}

#etfDetailLayoutV2 .card-head .right a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
}

#etfDetailLayoutV2 .card-head .right a:hover {
    color: var(--teal);
}

#etfDetailLayoutV2 .card-body {
    padding: 18px;
}

#etfDetailLayoutV2 .card-body.pad-sm {
    padding: 14px;
}

#etfDetailLayoutV2 .card-body.pad-lg {
    padding: 22px;
}

/* ─── Price block + chart ─────────────────────────────────────────── */

#etfDetailLayoutV2 .price-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#etfDetailLayoutV2 .price {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 36px;
    color: var(--bone);
    letter-spacing: -0.01em;
    line-height: 1;
}

#etfDetailLayoutV2 .price.sm { font-size: 26px; }

#etfDetailLayoutV2 .price-delta {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--down);
    letter-spacing: 0.02em;
}

#etfDetailLayoutV2 .price-delta.up { color: var(--up); }

#etfDetailLayoutV2 .chart-wrap {
    position: relative;
    height: 300px;
    padding: 8px 4px 0;
}

#etfDetailLayoutV2 .chart-wrap.sm { height: 200px; }
#etfDetailLayoutV2 .chart-wrap.md { height: 240px; }

#etfDetailLayoutV2 .chart-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

#etfDetailLayoutV2 .chart-grid line {
    stroke: var(--rule);
    stroke-width: 1;
    opacity: 0.55;
}

#etfDetailLayoutV2 .chart-grid text {
    fill: var(--muted-2);
    font-family: var(--mono);
    font-size: 9px;
}

#etfDetailLayoutV2 .chart-line {
    fill: none;
    stroke: var(--down-2);
    stroke-width: 1.5;
}

#etfDetailLayoutV2 .chart-line.up {
    stroke: var(--up);
}

#etfDetailLayoutV2 .chart-fill {
    fill: url(#etfv2RedFade);
}

#etfDetailLayoutV2 .chart-fill.up {
    fill: url(#etfv2GreenFade);
}

#etfDetailLayoutV2 .chart-dot {
    fill: var(--down-2);
}

#etfDetailLayoutV2 .chart-tag {
    font-family: var(--mono);
    font-size: 10px;
    fill: var(--bone);
}

#etfDetailLayoutV2 #etfV2Chart .chart-axis {
    font-family: var(--mono);
    font-size: 10px;
    fill: var(--muted);
    font-variant-numeric: tabular-nums;
}

#etfDetailLayoutV2 #etfV2Chart .chart-tag-price {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    fill: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Timeframe selector ─────────────────────────────────────────── */

#etfDetailLayoutV2 .tf {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
}

#etfDetailLayoutV2 .tf button {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 6px 10px;
    cursor: pointer;
    transition: 0.15s;
}

#etfDetailLayoutV2 .tf button:hover {
    color: var(--bone);
}

#etfDetailLayoutV2 .tf button.on {
    background: transparent;
    color: var(--teal);
    box-shadow: inset 0 -1px 0 var(--teal);
}

/* ─── Returns strip (8-col grid) ───────────────────────────────── */

#etfDetailLayoutV2 .returns {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

#etfDetailLayoutV2 .ret-item {
    padding: 16px 18px;
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#etfDetailLayoutV2 .ret-item:last-child { border-right: none; }

#etfDetailLayoutV2 .ret-lbl {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

#etfDetailLayoutV2 .ret-val {
    font-family: var(--mono);
    font-size: 15px;
    color: var(--up);
    letter-spacing: 0.01em;
}

#etfDetailLayoutV2 .ret-val.down { color: var(--down); }

/* ─── KV grid (Key Metrics) ──────────────────────────────────── */

#etfDetailLayoutV2 .kv-grid {
    display: grid;
    gap: 14px 22px;
}

#etfDetailLayoutV2 .kv-grid.c2 { grid-template-columns: repeat(2, 1fr); }
#etfDetailLayoutV2 .kv-grid.c3 { grid-template-columns: repeat(3, 1fr); }
#etfDetailLayoutV2 .kv-grid.c4 { grid-template-columns: repeat(4, 1fr); }

#etfDetailLayoutV2 .kv {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#etfDetailLayoutV2 .kv .k {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#etfDetailLayoutV2 .kv .v {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--bone);
}

/* ─── Weighting rows (sector/country bars) ─────────────────── */

#etfDetailLayoutV2 .w-row {
    display: grid;
    grid-template-columns: 1fr 140px 52px;
    gap: 14px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed var(--rule-soft);
}

#etfDetailLayoutV2 .w-row:last-child { border-bottom: none; }

#etfDetailLayoutV2 .w-row .name {
    font-size: 12.5px;
    color: var(--bone-dim);
}

#etfDetailLayoutV2 .w-bar {
    height: 4px;
    background: var(--ink-4);
    border-radius: 1px;
    overflow: hidden;
    position: relative;
}

#etfDetailLayoutV2 .w-bar .fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--teal);
    border-radius: 1px;
}

#etfDetailLayoutV2 .w-bar .fill.dim {
    background: var(--teal-2);
    opacity: 0.7;
}

#etfDetailLayoutV2 .w-bar .fill.low {
    background: var(--muted);
    opacity: 0.55;
}

#etfDetailLayoutV2 .w-val {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--bone);
    text-align: right;
}

#etfDetailLayoutV2 .w-row.tight {
    grid-template-columns: 1fr 80px 48px;
    gap: 10px;
    padding: 7px 0;
}

#etfDetailLayoutV2 .w-row.tight .w-bar { height: 3px; }

/* ─── Holdings table ─────────────────────────────────────── */

#etfDetailLayoutV2 .hold {
    width: 100%;
    border-collapse: collapse;
}

#etfDetailLayoutV2 .hold th,
#etfDetailLayoutV2 .hold td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: middle;
}

#etfDetailLayoutV2 .hold th {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    background: var(--ink-3);
}

#etfDetailLayoutV2 .hold th.r,
#etfDetailLayoutV2 .hold td.r { text-align: right; }

#etfDetailLayoutV2 .hold td {
    font-size: 13px;
    color: var(--bone-dim);
}

#etfDetailLayoutV2 .hold tr:hover td { background: var(--ink-3); }

#etfDetailLayoutV2 .hold .tkr {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#etfDetailLayoutV2 .hold .tkr .ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

#etfDetailLayoutV2 .hold .tkr .ico img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
    opacity: 0;
    transition: opacity 0.2s;
}

#etfDetailLayoutV2 .hold .tkr .sym {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--bone);
    font-weight: 500;
}

#etfDetailLayoutV2 .hold .weight-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

#etfDetailLayoutV2 .hold .weight-bar .wb {
    flex: 1;
    height: 3px;
    background: var(--ink-4);
    border-radius: 1px;
    overflow: hidden;
    position: relative;
    min-width: 60px;
    max-width: 180px;
}

#etfDetailLayoutV2 .hold .weight-bar .wb .fl {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--teal);
}

#etfDetailLayoutV2 .hold .weight-bar .wt {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--bone);
    min-width: 44px;
}

#etfDetailLayoutV2 .hold .val {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--bone);
}

/* ─── Dividends card ─────────────────────────────────────── */

#etfDetailLayoutV2 .div-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 14px;
}

#etfDetailLayoutV2 .div-yield {
    font-family: var(--display);
    font-weight: 500;
    font-size: 28px;
    color: var(--bone);
    letter-spacing: -0.02em;
    line-height: 1;
}

#etfDetailLayoutV2 .div-yield-lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

#etfDetailLayoutV2 .div-kv {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    line-height: 1.6;
}

#etfDetailLayoutV2 .div-kv b {
    color: var(--bone);
    font-weight: 500;
}

#etfDetailLayoutV2 .div-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rule-soft);
    font-family: var(--mono);
    font-size: 11px;
}

#etfDetailLayoutV2 .div-row:last-child { border-bottom: none; }

#etfDetailLayoutV2 .div-row .d { color: var(--muted); }
#etfDetailLayoutV2 .div-row .v { color: var(--bone); }

/* ─── Strategy prose ────────────────────────────────────── */

#etfDetailLayoutV2 .strategy {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bone-dim);
    font-weight: 300;
    max-width: 70ch;
}

/* ─── Hero row (chart 2/3 + key metrics 1/3) ────────────── */

#etfDetailLayoutV2 .hero-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

/* ─── Composition row (3 equal cards) ───────────────────── */

#etfDetailLayoutV2 .comp-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* ─── Footer row (holdings 2/3 + strategy 1/3) ──────────── */

#etfDetailLayoutV2 .footer-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
}

/* ─── Responsive: collapse grids at breakpoints ─────────── */

@media (max-width: 1100px) {
    #etfDetailLayoutV2 .hero-row,
    #etfDetailLayoutV2 .footer-row {
        grid-template-columns: 1fr;
    }
    #etfDetailLayoutV2 .comp-row {
        grid-template-columns: 1fr;
    }
    #etfDetailLayoutV2 .returns {
        grid-template-columns: repeat(4, 1fr);
    }
    #etfDetailLayoutV2 .ret-item:nth-child(4n) {
        border-right: none;
    }
    #etfDetailLayoutV2 .ret-item:nth-child(-n+4) {
        border-bottom: 1px solid var(--rule);
    }
}

@media (max-width: 768px) {
    /* Top padding must clear the 44px fixed `.mobile-header` (z-index 1100) —
       54px = 44 + 10px buffer, matching the V1 stock-detail mobile rule. */
    #etfDetailLayoutV2 .etf-page {
        padding: 54px 16px 60px;
    }
    #etfDetailLayoutV2 .chart-wrap {
        height: 220px;
    }
    #etfDetailLayoutV2 .card-body {
        padding: 14px;
    }
    #etfDetailLayoutV2 .w-row {
        grid-template-columns: 1fr 90px 48px;
        gap: 10px;
    }
}

@media (max-width: 640px) {
    #etfDetailLayoutV2 .etf-page {
        padding: 54px 10px 50px;
    }
    #etfDetailLayoutV2 .etf-top {
        gap: 12px;
        margin-bottom: 16px;
    }
    #etfDetailLayoutV2 .etf-top .left {
        gap: 8px;
    }
    #etfDetailLayoutV2 .etf-meta {
        gap: 10px;
        font-size: 10px;
    }
    #etfDetailLayoutV2 .returns {
        grid-template-columns: repeat(2, 1fr);
    }
    #etfDetailLayoutV2 .ret-item {
        border-right: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        padding: 12px 14px;
    }
    #etfDetailLayoutV2 .ret-item:nth-child(2n) { border-right: none; }
    #etfDetailLayoutV2 .price { font-size: 28px; }
    #etfDetailLayoutV2 .price-delta { font-size: 11px; }
    #etfDetailLayoutV2 .etf-title { font-size: 20px; }
    #etfDetailLayoutV2 .chart-wrap { height: 200px; }
    #etfDetailLayoutV2 .tf button { padding: 5px 7px; font-size: 10px; }
    #etfDetailLayoutV2 .kv-grid.c2 { gap: 12px 14px; }
    #etfDetailLayoutV2 .kv .v { font-size: 13px; }
    #etfDetailLayoutV2 .hold th,
    #etfDetailLayoutV2 .hold td { padding: 9px 10px; font-size: 12px; }
    #etfDetailLayoutV2 .hold .tkr .sym { font-size: 11.5px; }
    #etfDetailLayoutV2 .hold .weight-bar .wb { min-width: 40px; max-width: 100px; }
    #etfDetailLayoutV2 .strategy { font-size: 12.5px; }
    #etfDetailLayoutV2 .div-yield { font-size: 24px; }
    #etfDetailLayoutV2 .btn { padding: 7px 10px; font-size: 11px; }
    #etfDetailLayoutV2 .back { padding: 6px 10px; font-size: 10px; }
}