/**
 * SPA typography — shared scale (docs/spa-redesign-agent-brief.md)
 * Loaded globally in index.html; re-appended when lazy tab CSS loads.
 * Selectors use .tab-content#tab-id for specificity over legacy #tab-id rules in styles.css.
 */

:root {
    --spa-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --spa-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --spa-type-eyebrow: 0.6875rem;
    --spa-type-eyebrow-mobile: 0.625rem;
}

/* ── Hero eyebrow — all breakpoints (beats legacy .analytics-header p 1.1rem) ── */
.tab-content#overview p.hero-eyebrow,
.tab-content#lookintopulse p.lookintopulse-hero-eyebrow,
.tab-content#pulsex-stats p.pulsex-hero-eyebrow,
.tab-content#pulse-stats p.pulse-hero-eyebrow,
.tab-content#hex-stats p.hex-hero-eyebrow,
.tab-content#plsx-stats p.plsx-hero-eyebrow,
.tab-content#liquidity-stats p.liquidity-hero-eyebrow,
.tab-content#bridge-stats p.bridge-hero-eyebrow,
.tab-content#pls-supply-stats p.pls-supply-hero-eyebrow,
.tab-content#gas-stats p.gas-hero-eyebrow,
.tab-content#validators p.validators-hero-eyebrow,
.tab-content#bubbles-page p.bubbles-hero-eyebrow,
.tab-content#token-rankings p.token-rankings-hero-eyebrow,
.tab-content#leagues p.leagues-hero-eyebrow,
.tab-content#pumptires-stats p.pumptires-hero-eyebrow,
.tab-content#ecosystem p.ecosystem-hero-eyebrow,
.tab-content#getting-started p.getting-started-eyebrow,
.tab-content#portfolio p.portfolio-hero-eyebrow,
.tab-content#intel p.intel-hero-eyebrow,
.tab-content#token-intel p.token-intel-hero-eyebrow,
.tab-content#pulseai p.pulseai-hero-eyebrow,
.tab-content#rpc p.rpc-hero-eyebrow {
    font-family: var(--spa-font) !important;
    font-size: var(--spa-type-eyebrow) !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-shadow: none !important;
}

@media (max-width: 768px) {
    :root {
        --spa-type-hero: clamp(2rem, 9vw, 2.5rem);
        --spa-type-section: clamp(1.375rem, 4.5vw, 1.625rem);
        --spa-type-body: 0.875rem;
        --spa-type-card-title: 0.875rem;
        --spa-type-label: 0.625rem;
        --spa-type-eyebrow: 0.625rem;
        --spa-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
        --spa-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* ── Page hero h1 ── */
    .tab-content#overview .overview-header h1,
    .tab-content#lookintopulse header h1,
    .tab-content#roi-comparison .roi-header h1,
    .tab-content#pulsex-stats header h1,
    .tab-content#pulse-stats header h1,
    .tab-content#hex-stats header h1,
    .tab-content#plsx-stats header h1,
    .tab-content#liquidity-stats header h1,
    .tab-content#bridge-stats header h1,
    .tab-content#pls-supply-stats header h1,
    .tab-content#gas-stats header h1,
    .tab-content#validators header h1,
    .tab-content#bubbles-page header h1,
    .tab-content#bubbles-page .bubbles-hero-content h1,
    .tab-content#token-rankings header h1,
    .tab-content#leagues header h1,
    .tab-content#pumptires-stats header h1,
    .tab-content#provex-stats header h1,
    .tab-content#ecosystem header h1,
    .tab-content#getting-started header h1,
    .tab-content#portfolio .portfolio-title h1,
    .tab-content#intel header h1,
    .tab-content#token-intel header h1,
    .tab-content#pulseai header h1,
    .tab-content#rpc header h1 {
        font-family: var(--spa-display) !important;
        font-size: var(--spa-type-hero) !important;
        font-weight: 400 !important;
        line-height: 1.1 !important;
        letter-spacing: -0.01em !important;
        text-shadow: none !important;
        margin-bottom: 12px !important;
    }

    /* ── Hero eyebrow (mobile scale — same selectors as global block above) ── */
    .tab-content#overview p.hero-eyebrow,
    .tab-content#lookintopulse p.lookintopulse-hero-eyebrow,
    .tab-content#pulsex-stats p.pulsex-hero-eyebrow,
    .tab-content#pulse-stats p.pulse-hero-eyebrow,
    .tab-content#hex-stats p.hex-hero-eyebrow,
    .tab-content#plsx-stats p.plsx-hero-eyebrow,
    .tab-content#liquidity-stats p.liquidity-hero-eyebrow,
    .tab-content#bridge-stats p.bridge-hero-eyebrow,
    .tab-content#pls-supply-stats p.pls-supply-hero-eyebrow,
    .tab-content#gas-stats p.gas-hero-eyebrow,
    .tab-content#validators p.validators-hero-eyebrow,
    .tab-content#bubbles-page p.bubbles-hero-eyebrow,
    .tab-content#token-rankings p.token-rankings-hero-eyebrow,
    .tab-content#leagues p.leagues-hero-eyebrow,
    .tab-content#pumptires-stats p.pumptires-hero-eyebrow,
    .tab-content#ecosystem p.ecosystem-hero-eyebrow,
    .tab-content#getting-started p.getting-started-eyebrow,
    .tab-content#portfolio p.portfolio-hero-eyebrow,
    .tab-content#intel p.intel-hero-eyebrow,
    .tab-content#token-intel p.token-intel-hero-eyebrow,
    .tab-content#pulseai p.pulseai-hero-eyebrow,
    .tab-content#rpc p.rpc-hero-eyebrow {
        font-size: var(--spa-type-eyebrow) !important;
        margin-bottom: 12px !important;
    }

    /* Fallback for any new tab using *-hero-eyebrow naming */
    .tab-content [class*="-hero-eyebrow"],
    .tab-content [class*="-eyebrow"]:not([class*="chart"]):not([class*="nav"]):not([class*="legend"]),
    .tab-content .hero-eyebrow,
    .tab-content .getting-started-eyebrow {
        font-family: var(--spa-font) !important;
        font-size: var(--spa-type-eyebrow) !important;
        font-weight: 600 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        line-height: 1.3 !important;
        color: rgba(255, 255, 255, 0.45) !important;
        text-shadow: none !important;
    }

    /* ── Hero subtitle ── */
    .tab-content [class*="-hero-subtitle"],
    .tab-content .hero-subtitle,
    .tab-content .portfolio-subtitle,
    .tab-content .portfolio-hero-detail,
    .tab-content .bubbles-subtitle,
    .tab-content .bubbles-instruction,
    .tab-content .roi-header > p,
    .tab-content#hex-stats .hex-hero-subtitle,
    .tab-content#hex-stats header.analytics-header p,
    .tab-content#plsx-stats .plsx-hero-subtitle,
    .tab-content#plsx-stats header.analytics-header .plsx-hero-subtitle,
    .tab-content#pulsex-stats .pulsex-hero-subtitle,
    .tab-content#pulsex-stats header.pulsex-stats-header .pulsex-hero-subtitle,
    .tab-content#ecosystem .ecosystem-hero-subtitle {
        font-family: var(--spa-font) !important;
        font-size: var(--spa-type-body) !important;
        line-height: 1.65 !important;
        font-weight: 400 !important;
        text-shadow: none !important;
    }

    /* ── Section h2 + FAQ titles (tab-scoped beats styles.css #tab h2) ── */
    .tab-content#overview .section-intro__title,
    .tab-content#overview .overview-charts-toolbar__title,
    .tab-content#lookintopulse .section-heading-centered h2,
    .tab-content#pulsex-stats .section-heading-centered h2,
    .tab-content#pulse-stats .section-heading-centered h2,
    .tab-content#hex-stats .section-heading-centered h2,
    .tab-content#hex-stats .section-intro__title,
    .tab-content#plsx-stats .section-heading-centered h2,
    .tab-content#plsx-stats .burn-header h2,
    .tab-content#plsx-stats #plsx-burn-section .burn-header h2,
    .tab-content#liquidity-stats .section-heading-centered h2,
    .tab-content#bridge-stats .section-heading-centered h2,
    .tab-content#pls-supply-stats .section-heading-centered h2,
    .tab-content#gas-stats .section-heading-centered h2,
    .tab-content#validators .section-heading-centered h2,
    .tab-content#bubbles-page .section-intro__title,
    .tab-content#token-rankings .section-heading-centered h2,
    .tab-content#leagues .section-heading-centered h2,
    .tab-content#pumptires-stats .section-heading-centered h2,
    .tab-content#ecosystem .section-heading-centered h2,
    .tab-content#getting-started .section-heading-centered h2,
    .tab-content#intel .intel-section-title,
    .tab-content#token-intel .token-intel-section-title,
    .tab-content#pulsex-stats .pulsex-faq-panel .faq-title,
    .tab-content#pulse-stats .pulse-faq-panel .faq-title,
    .tab-content#hex-stats .hex-faq-panel .faq-title,
    .tab-content#plsx-stats .plsx-faq-panel .faq-title,
    .tab-content#liquidity-stats .liquidity-faq-panel .faq-title,
    .tab-content#bridge-stats .bridge-faq-panel .faq-title,
    .tab-content#pls-supply-stats .pls-supply-faq-panel .faq-title,
    .tab-content#gas-stats .gas-faq-panel .faq-title,
    .tab-content#validators .validators-faq-panel .faq-title,
    .tab-content#token-rankings .rankings-faq-panel .faq-title,
    .tab-content#leagues .leagues-faq-panel .faq-title,
    .tab-content#pumptires-stats .pumptires-faq-panel .faq-title,
    .tab-content#getting-started .getting-started-faq-panel .faq-title,
    .tab-content#lookintopulse .lookintopulse-faq-panel .faq-title,
    .tab-content#overview .overview-faq-panel .faq-title,
    .tab-content#intel .intel-faq-panel .faq-title,
    .tab-content#token-intel .token-intel-faq-panel .faq-title,
    .tab-content#pulseai .pulseai-faq-panel .faq-title,
    .tab-content#rpc .rpc-faq-panel .faq-title,
    .tab-content#bubbles-page .bubbles-faq-panel .faq-title,
    .tab-content .section-header h2,
    .tab-content .chains-header h2,
    .tab-content .burn-section > h2,
    .tab-content .burn-header h2,
    .tab-content .plsx-subsection-title,
    .tab-content .tutorial-header h2,
    .tab-content .token-info-header h2,
    .tab-content .pumptires-section-header h2,
    .tab-content .dex-rankings-section .analytics-header h2 {
        font-family: var(--spa-display) !important;
        font-size: var(--spa-type-section) !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
        text-shadow: none !important;
    }

    /* ── Section descriptions ── */
    .tab-content#overview .section-intro__desc,
    .tab-content#overview .overview-charts-toolbar__desc,
    .tab-content#lookintopulse .chart-section-desc,
    .tab-content#pulsex-stats .chart-section-desc,
    .tab-content#pulse-stats .chart-section-desc,
    .tab-content#hex-stats .chart-section-desc,
    .tab-content#hex-stats .section-intro__desc,
    .tab-content#hex-stats .section-heading-centered p,
    .tab-content#hex-stats header.analytics-header p,
    .tab-content#hex-stats .chart-header p,
    .tab-content#plsx-stats .chart-section-desc,
    .tab-content#plsx-stats #plsx-burn-section .burn-header .chart-section-desc,
    .tab-content#plsx-stats .burn-header p.chart-section-desc,
    .tab-content#liquidity-stats .chart-section-desc,
    .tab-content#bridge-stats .chart-section-desc,
    .tab-content#pls-supply-stats .chart-section-desc,
    .tab-content#gas-stats .chart-section-desc,
    .tab-content#validators .chart-section-desc,
    .tab-content#bubbles-page .section-intro__desc,
    .tab-content#token-rankings .chart-section-desc,
    .tab-content#leagues .chart-section-desc,
    .tab-content#pumptires-stats .chart-section-desc,
    .tab-content#ecosystem .section-heading-centered p,
    .tab-content#getting-started .chart-section-desc,
    .tab-content .section-header p,
    .tab-content .chains-header p,
    .tab-content .burn-section p,
    .tab-content .burn-header p,
    .tab-content .plsx-subsection-desc,
    .tab-content .tutorial-header p,
    .tab-content .dex-rankings-section .analytics-header p,
    .tab-content .faq-section[class*="-faq-panel"] .faq-subtitle {
        font-family: var(--spa-font) !important;
        font-size: var(--spa-type-body) !important;
        line-height: 1.65 !important;
        font-weight: 400 !important;
        text-shadow: none !important;
    }

    /* ── In-panel chart titles ── */
    .tab-content .chart-header h2,
    .tab-content .chart-header h3,
    .tab-content .chart-container > h3,
    .tab-content .chart-title,
    .tab-content .social-chart-title,
    .tab-content .chart-stat-header h4,
    .tab-content .volume-stat-header h4,
    .tab-content .fees-stat-header h4,
    .tab-content .validator-metric-card .metric-content h3,
    .tab-content .holder-growth-header h3,
    .tab-content#ecosystem .ecosystem-section h3,
    .tab-content#getting-started .tutorial-section h3,
    .tab-content#overview .overview-onboarding__card h3 {
        font-family: var(--spa-font) !important;
        font-size: var(--spa-type-card-title) !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-shadow: none !important;
    }

    /* ── Section spacing ── */
    .tab-content .section-heading-centered,
    .tab-content .section-intro {
        margin-top: 24px !important;
        margin-bottom: 14px !important;
    }

    .tab-content .section-heading-centered h2,
    .tab-content .section-intro__title {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }

    .tab-content .section-heading-centered p,
    .tab-content .section-intro__desc,
    .tab-content .chart-section-desc {
        margin-top: 0 !important;
        max-width: 100% !important;
    }

    .tab-content:not(#overview) .overview-header h1 {
        font-family: var(--spa-font) !important;
        font-size: var(--spa-type-card-title) !important;
        font-weight: 600 !important;
        text-shadow: none !important;
    }

    .tab-content:not(#overview) .overview-header p {
        font-size: var(--spa-type-body) !important;
        line-height: 1.5 !important;
    }

    /* ── HEX Stats legacy overrides ── */
    .tab-content#hex-stats .hex-chart-row .section-heading-centered h2,
    .tab-content#hex-stats .hex-top-chart-col .section-heading-centered h2,
    .tab-content#hex-stats .analytics-header h2 {
        font-size: var(--spa-type-section) !important;
    }

    .tab-content#hex-stats .chart-header h2 {
        font-size: var(--spa-type-card-title) !important;
        font-weight: 600 !important;
    }

    .tab-content#hex-stats .hex-chart-row .chart-section-desc,
    .tab-content#hex-stats .hex-top-chart-col .chart-section-desc {
        font-size: var(--spa-type-body) !important;
    }

    .tab-content#hex-stats .hex-day-counter .day-label,
    .tab-content#hex-stats .hex-day-number {
        font-size: 0.75rem !important;
        text-shadow: none !important;
    }

    /* ── Ecosystem ── */
    .tab-content#ecosystem .ecosystem-seo-intro {
        font-size: var(--spa-type-body) !important;
        line-height: 1.65 !important;
    }

    /* ── ROI comparison ── */
    .tab-content#roi-comparison .roi-header h1 {
        font-size: var(--spa-type-hero) !important;
    }

    .tab-content#roi-comparison .roi-header p {
        font-size: var(--spa-type-body) !important;
    }

    /* ── Mobile fluid / decorative heroes — flush under fixed nav (no black gap) ── */
    :root {
        --spa-mobile-nav-clearance: 108px;
    }

    body .main-content {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body .tab-content#overview .overview-header,
    body.overview-active .tab-content#overview .overview-header,
    body .tab-content#pulse-stats .pulse-stats-header,
    body.pulse-active .tab-content#pulse-stats .pulse-stats-header,
    body .tab-content#portfolio .portfolio-header,
    body .tab-content#intel .intel-stats-header,
    body.intel-page-active .tab-content#intel .intel-stats-header,
    body .tab-content#token-intel .token-intel-stats-header,
    body.token-intel-page-active .tab-content#token-intel .token-intel-stats-header,
    body .tab-content#pulsex-stats .pulsex-stats-header,
    body.pulsex-active .tab-content#pulsex-stats .pulsex-stats-header,
    body .tab-content#plsx-stats .plsx-stats-header,
    body.plsx-stats-active .tab-content#plsx-stats .plsx-stats-header,
    body .tab-content#pumptires-stats .pumptires-stats-header,
    body.pumptires-stats-active .tab-content#pumptires-stats .pumptires-stats-header,
    body .tab-content#hex-stats .hex-stats-header,
    body.hex-stats-active .tab-content#hex-stats .hex-stats-header,
    body .tab-content#bridge-stats .bridge-stats-header,
    body.bridge-active .tab-content#bridge-stats .bridge-stats-header,
    body .tab-content#gas-stats .gas-stats-header,
    body.gas-active .tab-content#gas-stats .gas-stats-header,
    body .tab-content#validators .validators-stats-header,
    body.validators-active .tab-content#validators .validators-stats-header,
    body .tab-content#token-rankings .token-rankings-header,
    body.token-rankings-active .tab-content#token-rankings .token-rankings-header,
    body .tab-content#leagues .leagues-header,
    body.leagues-active .tab-content#leagues .leagues-header,
    body .tab-content#lookintopulse .lookintopulse-stats-header,
    body.lookintopulse-active .tab-content#lookintopulse .lookintopulse-stats-header,
    body .tab-content#ecosystem .ecosystem-header,
    body.ecosystem-active .tab-content#ecosystem .ecosystem-header,
    body .tab-content#getting-started .getting-started-header,
    body .tab-content#pulseai .pulseai-header,
    body.pulseai-active .tab-content#pulseai .pulseai-header,
    body .tab-content#rpc .rpc-header,
    body .tab-content#bubbles-page .bubbles-header,
    body.bubbles-active .tab-content#bubbles-page .bubbles-header,
    body .tab-content#pls-supply-stats .pls-supply-stats-header,
    body.pls-supply-active .tab-content#pls-supply-stats .pls-supply-stats-header,
    body .tab-content#liquidity-stats .liquidity-stats-header,
    body.liquidity-stats-active .tab-content#liquidity-stats .liquidity-stats-header {
        position: relative !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding-top: var(--spa-mobile-nav-clearance) !important;
        padding-bottom: 40px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: hidden !important;
        background: #000 !important;
        order: unset !important;
        z-index: 1 !important;
    }

    .tab-content#overview .overview-header {
        padding-top: 120px !important;
        padding-bottom: 48px !important;
    }

    .tab-content#bubbles-page .bubbles-header {
        margin-left: -20px !important;
        margin-right: -20px !important;
        width: calc(100% + 40px) !important;
        max-width: none !important;
    }

    .tab-content [class*="-bg-wrapper"],
    .tab-content .landing-bg-wrapper,
    .tab-content .roi-bg-wrapper,
    .tab-content#bubbles-page .bubbles-decorative-layer {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        overflow: hidden !important;
        /* Show fluid/decorative art from the top of the hero (no black band under nav) */
        mask-image: radial-gradient(ellipse 130% 110% at 50% 8%, black 45%, transparent 88%) !important;
        -webkit-mask-image: radial-gradient(ellipse 130% 110% at 50% 8%, black 45%, transparent 88%) !important;
    }

    .tab-content [class*="-fluid-canvas"],
    .tab-content .landing-fluid-canvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .tab-content [class*="-hero-content"],
    .tab-content .hero-content,
    .tab-content#bubbles-page .bubbles-hero-content {
        position: relative !important;
        z-index: 2 !important;
    }
}