/* EV charts — standalone stylesheet for the two widgets in js/emea-ev-charts.js
   (#ev-over-time, the cumulative unicorn / enterprise-value time series, and
   #ev-constellation, the circle-packed EV bubbles).

   WHY THIS FILE EXISTS
   The widgets were born on /regions/emea/, which loads css/entity-profile.css
   and gets their styling from there. /guides/npa/ runs the same JS but has its
   own self-contained page CSS — dropping a 4,700-line entity-profile.css onto
   it would restyle the whole guide. This sheet carries exactly what the two
   widgets need and nothing else, so any page can mount them with one <link>.

   KEEP IN SYNC: the `.vc-*` card chrome below is copied from the canonical
   block in css/entity-profile.css (~L2804-2915, L3197+). Same pattern, and same
   reason, as scripts/lib/funnel-mobile-strip.mjs's scoped copy of the hf-strip
   styles. Change one, change the other.

   Light mode comes from css/dealroom-theme-3da7d8e.css (it already overrides
   .vc-flows-card and .vc-control-pill globally); the rules here are the dark
   base, same as in entity-profile.css. */

/* ── Card chrome (copied from css/entity-profile.css) ───────────────────── */
.vc-loading,
.vc-empty {
    color: var(--text-lighter);
    font-size: 0.875rem;
    padding: 2.5rem 0.5rem;
    text-align: center;
}
.vc-empty a,
.vc-loading a { color: var(--blue); text-decoration: none; }
.vc-empty a:hover { text-decoration: underline; }

.vc-flows-card {
    position: relative;
    max-width: 100%;
    overflow-x: clip;
    background: rgba(0,0,0,0.22); /* theme-guardrail-allow: dark-only card surface, light mode via dealroom-theme */
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1.4rem 1.5rem 1.15rem;
}
.vc-flows-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.85rem;
}
.vc-control-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    flex: 0 1 auto; /* each cluster takes its natural width, then flows */
    min-height: 34px;
}
.vc-control-label {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.vc-control-pill {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.11); /* theme-guardrail-allow: dark control border */
    border-radius: 999px;
    background: rgba(255,255,255,0.04); /* theme-guardrail-allow: dark control surface */
    color: var(--text-light);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.52rem 0.72rem;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.vc-control-pill:hover {
    background: rgba(255,255,255,0.09); /* theme-guardrail-allow: dark control hover */
    color: var(--white);
}
.vc-control-pill.is-on {
    background: rgba(255,255,255,0.16); /* theme-guardrail-allow: dark selected control */
    border-color: rgba(255,255,255,0.28); /* theme-guardrail-allow: dark selected border */
    color: var(--white);
}
.vc-control-pill:focus-visible {
    outline: 2px solid rgba(96,165,250,0.8); /* theme-guardrail-allow: dark focus ring */
    outline-offset: 2px;
}

/* ── Legend + footnote (shared with the metro-areas widget) ─────────────── */
.mxr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.95rem;
}
.mxr-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-lighter);
    font-size: 0.7rem;
    font-weight: 600;
}
.mxr-key i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.mxr-note {
    color: var(--text-lighter);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 0.75rem 0 0;
}

/* ── The two EV charts ──────────────────────────────────────────────────── */
/* Chart caption — states metric + unit even with filters collapsed. */
.evx-caption {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0.2rem 0 0.4rem;
}
.evx-plot { margin-top: 0.4rem; }
.evx-plot svg text { font-family: inherit; }
.evx-hint {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* EV constellation interactivity: hovered bubbles light up, a tooltip names
   them (small bubbles have no room for an in-bubble label). */
.evx-pack { margin-top: 0.4rem; min-height: 320px; position: relative; }
.evx-pack [data-evc-bubbles] circle { transition: filter 0.15s ease, fill-opacity 0.15s ease; }
.evx-pack [data-evc-bubbles] circle:hover { filter: brightness(1.18) saturate(1.08); fill-opacity: 1; }
.evx-pack [data-evc-decor] { pointer-events: none; }
.evx-tip {
    position: absolute;
    z-index: 30; /* above bubbles, group labels and any hovered-filter stacking contexts */
    pointer-events: none;
    background: var(--navy);
    border: 1px solid var(--logo-tile-border);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 7px;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .vc-flows-card {
        padding: 1.1rem 1rem 1rem;
    }
    .vc-control-row {
        /* One cluster per line on phones — no side-by-side packing. */
        flex-basis: 100%;
    }
    .vc-control-label {
        flex-basis: 100%;
    }
    .vc-control-pill {
        font-size: 0.7rem;
        padding: 0.48rem 0.62rem;
    }
}

/* ── .dr-light-surface: pin a subtree to the light palette ───────────────
   For light-only pages (the /guides/ family: their :root palette is a frozen
   light one and the sitewide toggle only repaints the injected nav). These
   components ship a dark base with the light treatment gated on
   html[data-theme="light"] in css/dealroom-theme-3da7d8e.css, so on a light
   page switched to dark they would be the only dark blocks on a light page.
   Put this class on the section and the subtree stays light under any theme.
   Values mirror the light token block + the widget overrides in the theme
   sheet; the theme's own light rules carry !important, so under light they
   still win and these are a no-op. Same precedent as the guide variant in
   scripts/lib/funnel-mobile-strip.mjs. */
.dr-light-surface { /* theme-guardrail-allow: deliberate light pin for light-only guide pages */
    --navy: #ffffff; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --white: #101828; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --surface-card: #ffffff; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --panel: #ffffff; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --border-light: rgba(16, 24, 40, 0.11); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --border-mid: rgba(16, 24, 40, 0.2); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --text-light: rgba(16, 24, 40, 0.72); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --text-lighter: rgba(16, 24, 40, 0.7); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --text-faint: rgba(16, 24, 40, 0.62); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --logo-tile-border: rgba(16, 24, 40, 0.1); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --blue: #3E64E0; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    --shadow-md: 0 8px 20px rgba(16, 24, 40, 0.08); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
}
.dr-light-surface .vc-flows-card { /* theme-guardrail-allow: deliberate light pin */
    background: #ffffff; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    border-color: rgba(16, 24, 40, 0.11); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
}
.dr-light-surface .vc-control-pill { /* theme-guardrail-allow: deliberate light pin */
    background: #f2f4f7; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    border-color: #e4e7ec; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    color: #475467; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
}
.dr-light-surface .vc-control-pill:hover { /* theme-guardrail-allow: deliberate light pin */
    background: #e4e7ec; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    color: #101828; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
}
.dr-light-surface .vc-control-pill.is-on { /* theme-guardrail-allow: deliberate light pin */
    background: #ffffff; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    border-color: #d0d5dd; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    color: #101828; /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); /* theme-guardrail-allow: light-palette pin, mirrors css/dealroom-theme-3da7d8e.css */
}