/* =====================================================================
   valuator.dev // cyberpunk data-viz dashboard
   Palette: GitHub Dark inspired
   Typography: Commissioner / Space Mono / Inter
   ===================================================================== */

/* ----------- Reset & Base ----------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    background: #161B22;
    color: #E6EDF3;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

/* ----------- Topbar ----------- */
.topbar {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 40px;
    background: #0D1117;
    border-bottom: 1px solid #30363D;
    flex: 0 0 auto;
}

.topbar-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.brand {
    font-family: 'Commissioner', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: #E6EDF3;
}

.brand-dot {
    color: #58A6FF;
    animation: brandBlink 1.6s ease-in-out infinite;
}

@keyframes brandBlink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: 0.25; }
}

.brand-tag {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #484F58;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.topbar-nav {
    display: flex;
    gap: 18px;
}

.nav-link {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #8B949E;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 200ms ease, border-color 200ms ease;
    cursor: pointer;
}

.nav-link:hover {
    color: #E6EDF3;
}

.nav-link.active {
    color: #58A6FF;
    border-bottom-color: #58A6FF;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: #161B22;
    border: 1px solid #30363D;
    border-radius: 999px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #3FB950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3FB950;
    box-shadow: 0 0 8px #3FB950;
}

.status-dot.live {
    animation: livePulse 1.4s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}

.clock {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #8B949E;
    letter-spacing: 0.08em;
}

/* ----------- Scroll container & sections ----------- */
.scroll-container {
    flex: 1 1 auto;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.dash-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: calc(100vh - 40px - 28px); /* topbar 40 + ticker 28 */
    width: 100%;
    padding: 12px;
    position: relative;
    background: #161B22;
}

/* ----------- Dash grids per section ----------- */
.dash-grid {
    height: 100%;
    width: 100%;
    display: grid;
    gap: 8px;
}

/* OVERVIEW grid: hero + 4 metric tiles + chart + heatmap + ratio */
.grid-overview {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1.4fr 1fr 1fr;
    grid-template-areas:
        "hero  hero  hero  chart chart heat"
        "hero  hero  hero  chart chart heat"
        "m1    m2    m3    m4    ratio ratio";
}

/* EQUITY grid */
.grid-equity {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "cap cap cap dilution dilution narrative"
        "cap cap cap dilution dilution narrative"
        "shares pps pref vesting vesting narrative";
}

/* GROWTH grid */
.grid-growth {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "arr     arr     arr     arr     arrnow  ndr"
        "arr     arr     arr     arr     cac     ltvcac"
        "cohorts cohorts funnel  funnel  gnotes  gnotes";
}

/* RISK grid */
.grid-risk {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "rscore rscore rscore rchart rchart rchart"
        "rscore rscore rscore rchart rchart rchart"
        "var    vol    beta   stress stress stress";
}

/* FLOW grid */
.grid-flow {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "flowmap flowmap flowmap flowmap throughput latency"
        "flowmap flowmap flowmap flowmap sources    sources"
        "footer  footer  footer  footer  footer     footer";
}

/* ----------- Panels ----------- */
.panel {
    background: #0D1117;
    border: 1px solid #30363D;
    border-radius: 8px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.dash-section.in-view .panel {
    opacity: 1;
    transform: scale(1);
}

/* staggered entrance per row of panels via animation-delay set in JS */
.panel[data-stagger="0"] { transition-delay: 0ms; }
.panel[data-stagger="1"] { transition-delay: 50ms; }
.panel[data-stagger="2"] { transition-delay: 100ms; }
.panel[data-stagger="3"] { transition-delay: 150ms; }
.panel[data-stagger="4"] { transition-delay: 200ms; }
.panel[data-stagger="5"] { transition-delay: 250ms; }
.panel[data-stagger="6"] { transition-delay: 300ms; }
.panel[data-stagger="7"] { transition-delay: 350ms; }
.panel[data-stagger="8"] { transition-delay: 400ms; }
.panel[data-stagger="9"] { transition-delay: 450ms; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    padding: 0 6px;
    border-bottom: 1px solid #30363D;
    flex: 0 0 24px;
}

.panel-title {
    font-family: 'Commissioner', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #E6EDF3;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: #484F58;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.panel-status-text {
    color: #8B949E;
}

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

.pulse-blue   { background: #58A6FF; box-shadow: 0 0 6px #58A6FF; animation: dotPulse 2s ease-in-out infinite; }
.pulse-green  { background: #3FB950; box-shadow: 0 0 6px #3FB950; animation: dotPulse 2s ease-in-out infinite; }
.pulse-amber  { background: #D29922; box-shadow: 0 0 6px #D29922; animation: dotPulse 2s ease-in-out infinite; }
.pulse-red    { background: #F85149; box-shadow: 0 0 6px #F85149; animation: dotPulse 2s ease-in-out infinite; }

@keyframes dotPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.7); }
}

.panel-body {
    flex: 1 1 auto;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    position: relative;
}

/* ----------- Hero panel ----------- */
.panel-hero .hero-body {
    justify-content: space-between;
    gap: 8px;
}

.hero-metric {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.hero-prefix,
.hero-suffix {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 22px;
    color: #8B949E;
}

.hero-suffix {
    margin-left: 8px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.hero-counter {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(34px, 4.5vw, 56px);
    letter-spacing: -0.01em;
    color: #58A6FF;
    text-shadow: 0 0 24px rgba(88, 166, 255, 0.25);
}

.hero-counter.caution-text {
    color: #D29922;
    text-shadow: 0 0 24px rgba(210, 153, 34, 0.25);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #8B949E;
    letter-spacing: 0.05em;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.meta-sep {
    color: #30363D;
}

.meta-mono {
    color: #484F58;
    text-transform: uppercase;
}

.hero-spark {
    width: 100%;
    flex: 1 1 auto;
    min-height: 60px;
}

/* ----------- Metric body ----------- */
.metric-body {
    justify-content: center;
    padding: 6px 8px;
    gap: 4px;
}

.metric-value {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 30px);
    letter-spacing: -0.01em;
    line-height: 1.05;
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: nowrap;
}

.metric-value.pos     { color: #58A6FF; }
.metric-value.neg     { color: #F85149; }
.metric-value.caution { color: #D29922; }

.metric-prefix {
    font-size: 0.6em;
    color: #8B949E;
    margin-right: 2px;
}

.metric-unit {
    font-size: 0.5em;
    color: #8B949E;
    letter-spacing: 0.04em;
    margin-left: 3px;
}

.metric-delta {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: #8B949E;
}

.delta-pos { color: #3FB950; }
.delta-neg { color: #F85149; }
.delta-neutral { color: #8B949E; }

.arrow {
    font-size: 9px;
    margin-right: 2px;
}

.delta-neg .arrow { transform: rotate(180deg); display: inline-block; }

/* mini sparkline */
.mini-spark {
    margin-top: 4px;
    width: 100%;
    height: 28px;
}

.spark-line {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.draw-line {
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 800ms ease-out;
}

.dash-section.in-view .draw-line {
    stroke-dashoffset: 0;
}

.spark-area {
    opacity: 0;
    transition: opacity 600ms ease-out 600ms;
}

.dash-section.in-view .spark-area {
    opacity: 1;
}

/* ----------- Chart bodies ----------- */
.chart-body {
    padding: 6px 4px;
    flex: 1 1 auto;
    min-height: 0;
}

.big-chart,
.med-chart {
    width: 100%;
    height: 100%;
    min-height: 90px;
    overflow: visible;
}

.chart-labels text {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    fill: #484F58;
    letter-spacing: 0.06em;
}

.grid-lines line {
    opacity: 0.6;
}

/* ----------- Bars (cap, vesting, funnel, etc.) ----------- */
.bars-body {
    justify-content: space-between;
    gap: 6px;
}

.bars-mini {
    gap: 4px;
}

.bar-row {
    display: grid;
    grid-template-columns: 70px 1fr 56px;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
}

.bars-mini .bar-row {
    grid-template-columns: 30px 1fr 38px;
}

.bar-label {
    color: #8B949E;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-bg {
    height: 8px;
    background: #161B22;
    border: 1px solid #30363D;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    width: 0;
    transition: width 600ms ease-out;
    border-radius: 1px;
}

.dash-section.in-view .bar-fill {
    width: var(--target-width, 0%);
}

.bar-value {
    text-align: right;
    color: #E6EDF3;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.bar-value.mono {
    color: #8B949E;
    font-weight: 400;
}

/* When bar-row has no label/value (single fill row in runway tile) */
.metric-body .bar-row {
    grid-template-columns: 1fr;
}

/* ----------- Heatmap ----------- */
.heatmap-body {
    justify-content: center;
    align-items: stretch;
    gap: 6px;
}

.heatmap-grid {
    display: grid;
    gap: 2px;
    width: 100%;
    flex: 1 1 auto;
}

.heat-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1px;
    background: #30363D;
    transition: background-color 300ms ease, transform 200ms ease;
}

.heat-cell:hover {
    transform: scale(1.18);
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: #484F58;
    letter-spacing: 0.06em;
}

.legend-mono {
    flex-shrink: 0;
}

.legend-grad {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 1px;
    background: linear-gradient(to right, #F85149, #D29922, #3FB950);
    opacity: 0.65;
}

/* ----------- Connection overlay ----------- */
.connection-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.4;
    z-index: 1;
}

.connection-line {
    stroke: #30363D;
    stroke-width: 1;
    stroke-dasharray: 4 6;
    fill: none;
    animation: connectionFlow 2s linear infinite;
}

@keyframes connectionFlow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -20; }
}

.connection-node {
    fill: #58A6FF;
    animation: nodePulse 2s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% { opacity: 1; r: 3; }
    50%      { opacity: 0.3; r: 5; }
}

/* ----------- Narrative panels ----------- */
.panel-narrative .narrative-body {
    gap: 8px;
    justify-content: flex-start;
    padding: 10px;
}

.narrative-line {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #8B949E;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.line-marker {
    color: #58A6FF;
    margin-right: 6px;
}

/* ----------- Risk hero specifics ----------- */
.panel-risk-hero .risk-body {
    justify-content: space-between;
    gap: 10px;
}

.risk-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

/* ----------- Sources panel ----------- */
.sources-body {
    gap: 6px;
    justify-content: flex-start;
    padding: 10px 8px;
}

.source-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #8B949E;
}

.src-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.src-name {
    color: #E6EDF3;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.src-stat {
    font-size: 9px;
    color: #484F58;
    letter-spacing: 0.08em;
}

.source-row:nth-child(3) .src-stat { color: #D29922; }
.source-row:nth-child(6) .src-stat { color: #F85149; }
.source-row:nth-child(1) .src-stat,
.source-row:nth-child(2) .src-stat,
.source-row:nth-child(4) .src-stat,
.source-row:nth-child(5) .src-stat { color: #3FB950; }

/* ----------- Flow panel ----------- */
.panel-flowmap .flow-body {
    padding: 0;
    overflow: hidden;
}

.flow-svg {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.flow-edge {
    stroke: #30363D;
    stroke-width: 1.4;
    stroke-dasharray: 4 6;
    fill: none;
    animation: connectionFlow 2s linear infinite;
}

.flow-node rect {
    fill: #161B22;
    stroke: #30363D;
    stroke-width: 1;
}

.flow-node.node-source rect { stroke: #58A6FF; }
.flow-node.node-mid rect    { stroke: #D29922; }
.flow-node.node-out rect    { stroke: #3FB950; box-shadow: 0 0 12px #3FB950; }

.flow-node text {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    fill: #E6EDF3;
    letter-spacing: 0.06em;
}

.flow-node.node-source text { fill: #58A6FF; }
.flow-node.node-mid text    { fill: #D29922; }
.flow-node.node-out text    { fill: #3FB950; }

.flow-pulse {
    filter: drop-shadow(0 0 4px currentColor);
    opacity: 0.9;
}

/* ----------- Ticker strip ----------- */
.ticker-strip {
    flex: 0 0 28px;
    height: 28px;
    background: #0D1117;
    border-top: 1px solid #30363D;
    overflow: hidden;
    position: relative;
    z-index: 25;
}

.ticker-track {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    will-change: transform;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #8B949E;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.ticker-symbol {
    color: #E6EDF3;
    font-weight: 700;
}

.ticker-value {
    color: #E6EDF3;
}

.ticker-delta.pos { color: #3FB950; }
.ticker-delta.neg { color: #F85149; }
.ticker-delta.neutral { color: #8B949E; }

.ticker-sep {
    color: #30363D;
    margin: 0 4px;
}

/* ----------- Section indicator (right rail) ----------- */
.section-indicator {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
}

.ind-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #30363D;
    border: 1px solid #484F58;
    transition: all 250ms ease;
    cursor: pointer;
}

.ind-dot.active {
    background: #58A6FF;
    border-color: #58A6FF;
    box-shadow: 0 0 8px #58A6FF;
    transform: scale(1.3);
}

/* ----------- Generic ----------- */
.mono { font-family: 'Space Mono', monospace; }

/* ----------- Responsive scaling ----------- */
@media (max-width: 1100px) {
    .grid-overview {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1.2fr 1fr 1fr 1fr;
        grid-template-areas:
            "hero hero chart chart"
            "hero hero chart chart"
            "m1   m2   m3    m4"
            "ratio ratio heat heat";
    }
    .grid-equity {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "cap cap dilution dilution"
            "cap cap narrative narrative"
            "shares pps pref vesting"
            "shares pps pref vesting";
    }
    .grid-growth {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "arr     arr     arr     arrnow"
            "arr     arr     arr     ndr"
            "cohorts cohorts funnel  cac"
            "gnotes  gnotes  gnotes  ltvcac";
    }
    .grid-risk {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "rscore rscore rchart rchart"
            "rscore rscore rchart rchart"
            "var    vol    beta   stress"
            "stress stress stress stress";
    }
    .grid-flow {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1.4fr 1fr 1fr;
        grid-template-areas:
            "flowmap flowmap throughput latency"
            "flowmap flowmap sources    sources"
            "footer  footer  footer     footer";
    }
}

@media (max-width: 720px) {
    .topbar-nav { display: none; }
    .section-indicator { display: none; }
    .dash-section { padding: 6px; }
    .dash-grid { gap: 6px; }
    .grid-overview,
    .grid-equity,
    .grid-growth,
    .grid-risk,
    .grid-flow {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, minmax(80px, 1fr));
        grid-template-areas: none;
    }
    .panel { grid-area: auto !important; }
    .hero-counter { font-size: clamp(28px, 9vw, 44px); }
    .metric-value { font-size: clamp(18px, 6vw, 26px); }
}