/* ============================================================================
   QUIVIDI FLOW — design tokens + app shell
   Indigo/violet design system from the vidiflow mockup. Fonts: vendored
   Open Sans substitutes for the mockup's Poppins/Source Sans 3.
   ============================================================================ */

:root {
    color-scheme: light; /* native controls (checkboxes, scrollbars) render light */

    /* brand indigo ramp */
    --vf-indigo-900: #15143A;
    --vf-indigo-700: #282860;
    --vf-indigo-600: #2F2C6E;
    --vf-indigo-500: #423E8C;
    --vf-indigo-400: #5C58A8;
    --vf-indigo-300: #8884C4;
    --vf-indigo-200: #BCB9DF;
    --vf-indigo-100: #E4E3F2;
    --vf-indigo-50: #F4F3FB;

    /* accents — monochrome indigo-violet, no warm hues */
    --vf-violet: #7350A8;
    --vf-violet-bg: #F1ECF8;
    --vf-blue-violet: #5A57C9;
    /* saturated accent fill (primary button, selected chip, chat bubble). Tracks
       indigo-600 so light themes stay themed; only the dark theme overrides it
       (there indigo-600 flips light for accent text, so the fill needs its own). */
    --vf-accent-strong: var(--vf-indigo-600);
    /* gender pairing — mockup_v2 palette: blue male vs. magenta female */
    --vf-male: #4472C4;
    --vf-female: #EB095B;
    --vf-grad-violet: linear-gradient(90deg, var(--vf-blue-violet) 0%, #8253A8 100%);

    /* neutrals — indigo-tinted, never pure grey */
    --vf-bg-subtle: #EFEFF6;
    --vf-white: #FFFFFF; /* stays white in every theme: text on accent fills */
    --vf-surface: #FFFFFF;
    --vf-surface-2: #FBFAFE;
    --vf-topbar-bg: rgba(255, 255, 255, .86); /* frosted content top bar */
    --vf-border: #E7E6F1;
    --vf-border-strong: #D4D2E6;
    --vf-fg-1: #1B1A33;
    --vf-fg-2: #4A4866;
    --vf-fg-3: #6E6C8A;
    --vf-fg-faint: #9D9BB5;
    --vf-on-dark: #ECEBF5;
    --vf-on-dark-2: #B9B7D6;
    /* state colors legible on the accent gradient (lighter than --vf-positive/negative) */
    --vf-on-dark-positive: #6EE7A8;
    --vf-on-dark-negative: #FF9DA6;

    /* per-metric chart ramp (rollups.KPI_RAMP reads these by name; web only, the PDF
       passes literal hex) */
    --vf-kpi-impressions: #1E6443;
    --vf-kpi-watchers: #78D278;
    --vf-kpi-rate: #3FA46A;
    --vf-kpi-presence: #FF6600;
    --vf-kpi-attention: #FF9933;
    --vf-kpi-multiplier: #D4515F;

    /* semantic state */
    --vf-positive: #2E9B6B;
    --vf-positive-bg: #E6F4ED;
    --vf-negative: #D4515F;
    --vf-negative-bg: #FBEAEC;
    --vf-warning: #D9882F;
    --vf-warning-bg: #FBF1E3;

    /* type */
    --vf-font-display: 'Open Sans', system-ui, -apple-system, sans-serif;
    --vf-font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
    --vf-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

    /* radii */
    --vf-r-sm: 6px;
    --vf-r-md: 10px;
    --vf-r-lg: 14px;
    --vf-r-pill: 999px;

    /* elevation — soft, low, indigo-tinted */
    --vf-shadow-xs: 0 1px 2px rgba(27, 26, 51, .06);
    --vf-shadow-sm: 0 1px 3px rgba(27, 26, 51, .08), 0 1px 2px rgba(27, 26, 51, .04);
    --vf-shadow-md: 0 4px 16px rgba(27, 26, 51, .08);
    --vf-shadow-lg: 0 16px 40px rgba(43, 42, 107, .14);
    --vf-shadow-focus: 0 0 0 3px rgba(92, 88, 168, .35);

    --vf-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- alternate themes -----------------------------------------------------
   Each block re-tints the tone-defining tokens (indigo ramp + accents +
   neutrals); everything else inherits from :root. Add a theme = one block here
   + one entry in themes.py THEMES. "default" is the base :root, no block. */

/* Re-declares the default accent locally so the "Default" menu swatch keeps its
   own tone even while an alternate theme is active on the <html> ancestor. */
[data-vf-theme="default"] {
    --vf-indigo-400: #5C58A8;
}

/* Forest: evergreen chrome, warm honey accent, sunlit pine->moss gradient. */
[data-vf-theme="forest"] {
    --vf-indigo-900: #123320;
    --vf-indigo-700: #1C4A2E;
    --vf-indigo-600: #235A38;
    --vf-indigo-500: #2C7A48;
    --vf-indigo-400: #479760;
    --vf-indigo-300: #79BA8F;
    --vf-indigo-200: #AFD8BE;
    --vf-indigo-100: #D7EBDD;
    --vf-indigo-50: #E9F4EC;
    --vf-violet: #8A5A10;
    --vf-violet-bg: #F6ECD6;
    --vf-blue-violet: #2F8F63;
    --vf-grad-violet: linear-gradient(90deg, #2F8F63 0%, #86AF3A 100%);
    --vf-bg-subtle: #E7F0E8;
    --vf-surface-2: #F3F9F4;
    --vf-border: #D8E5DA;
    --vf-border-strong: #C1D4C5;
}

/* Plum: deep grape chrome, magenta pop accent, grape->berry gradient. */
[data-vf-theme="plum"] {
    --vf-indigo-900: #26123F;
    --vf-indigo-700: #3F2065;
    --vf-indigo-600: #4C2875;
    --vf-indigo-500: #663A96;
    --vf-indigo-400: #8A54B6;
    --vf-indigo-300: #B182D2;
    --vf-indigo-200: #D3B7E4;
    --vf-indigo-100: #EBDCF4;
    --vf-indigo-50: #F5EDFB;
    --vf-violet: #B4267A;
    --vf-violet-bg: #FBE4F0;
    --vf-blue-violet: #7A44C4;
    --vf-grad-violet: linear-gradient(90deg, #7A44C4 0%, #C13E9A 100%);
    --vf-bg-subtle: #F0E6F7;
    --vf-surface-2: #FAF5FD;
    --vf-border: #E7D8F0;
    --vf-border-strong: #D5C1E6;
}

/* Summer: turquoise sea chrome, warm sand backgrounds, coral accents. */
[data-vf-theme="summer"] {
    --vf-indigo-900: #0F3A42;
    --vf-indigo-700: #155760;
    --vf-indigo-600: #1A6A74;
    --vf-indigo-500: #157580;
    --vf-indigo-400: #38A9B4;
    --vf-indigo-300: #6FC8CF;
    --vf-indigo-200: #A9DEE3;
    --vf-indigo-100: #D3EFF1;
    --vf-indigo-50: #E8F7F8;
    --vf-violet: #B04418;
    --vf-violet-bg: #FCEBE2;
    --vf-blue-violet: #1E9AA6;
    --vf-grad-violet: linear-gradient(90deg, #1E9AA6 0%, #F2B45C 100%);
    --vf-bg-subtle: #FBF5E8;
    --vf-surface-2: #FEFCF6;
    --vf-border: #ECE3D2;
    --vf-border-strong: #DCCEB4;
}

/* Tomato: ripe-red chrome, leafy-green pop accent, tomato->orange gradient. */
[data-vf-theme="tomato"] {
    --vf-indigo-900: #3D110F;
    --vf-indigo-700: #6B1F19;
    --vf-indigo-600: #822620;
    --vf-indigo-500: #C43A2E;
    --vf-indigo-400: #D95F4F;
    --vf-indigo-300: #E88F82;
    --vf-indigo-200: #F2BEB6;
    --vf-indigo-100: #F9DED9;
    --vf-indigo-50: #FDEEEB;
    --vf-violet: #2A7038;
    --vf-violet-bg: #E7F3E9;
    --vf-blue-violet: #C43A2E;
    --vf-grad-violet: linear-gradient(90deg, #C43A2E 0%, #F0913E 100%);
    --vf-bg-subtle: #F8ECE9;
    --vf-surface-2: #FEF7F5;
    --vf-border: #F0DDD8;
    --vf-border-strong: #E4C6BF;
}

/* Dark indigo: unlike the light themes (which only re-tint), this flips content
   surfaces + text to dark. The ramp's light tint stops go dark and the accent-text
   stops (indigo-600/700) go light; the saturated accent fill lives in
   --vf-accent-strong so it stays vivid. The sidebar (indigo-900 + on-dark) is
   already dark in every theme, so it and its white-alpha overlays are left as-is. */
[data-vf-theme="dark"] {
    color-scheme: dark; /* native checkboxes / radios / scrollbars follow dark */

    /* accent-text stops -> light lavender (readable on dark) */
    --vf-indigo-700: #C9C6EA;
    --vf-indigo-600: #B6B2E0;
    /* mid accents: kept vivid for chart series / accent bars on dark */
    --vf-indigo-500: #8B87CE;
    --vf-indigo-400: #6F6BB2;
    --vf-indigo-300: #565284;
    /* tint-surface stops -> dark elevated tints (hovers, tag / kpi backgrounds) */
    --vf-indigo-200: #3B3A62;
    --vf-indigo-100: #2B2A49;
    --vf-indigo-50: #23223A;
    --vf-indigo-900: #100F26;

    --vf-accent-strong: #5A56C4; /* vivid button / chip fill; white text passes */
    --vf-violet: #BBA0E4; /* violet accent as text on dark */
    --vf-violet-bg: #2C2449;
    --vf-blue-violet: #8E8BEA;
    --vf-grad-violet: linear-gradient(90deg, #8E8BEA 0%, #B87FD8 100%);

    /* neutrals flipped to dark indigo */
    --vf-bg-subtle: #131228;
    --vf-surface: #1E1D3A;
    --vf-surface-2: #262547;
    --vf-topbar-bg: rgba(19, 18, 40, .86);
    --vf-border: #322F54;
    --vf-border-strong: #454168;
    --vf-fg-1: #ECEBF5;
    --vf-fg-2: #C4C2DE;
    --vf-fg-3: #9C9AC0;
    --vf-fg-faint: #6E6C92;

    /* semantic: brighten the text colours, darken their tint backgrounds */
    --vf-positive: #4EC78D;
    --vf-positive-bg: #123324;
    --vf-negative: #F07A86;
    --vf-negative-bg: #3A171B;
    --vf-warning: #E6A24C;
    --vf-warning-bg: #33260E;

    /* drop-shadows vanish on dark; deepen them (borders carry most elevation) */
    --vf-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --vf-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --vf-shadow-md: 0 6px 18px rgba(0, 0, 0, .5);
    --vf-shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
    --vf-shadow-focus: 0 0 0 3px rgba(142, 139, 234, .45);
}

html, body {
    margin: 0;
    height: 100%;
}

body.vf-body {
    font-family: var(--vf-font-sans);
    background: var(--vf-indigo-900);
    color: var(--vf-fg-1);
    -webkit-font-smoothing: antialiased;
}

/* ---- shell ------------------------------------------------------------- */
.vf-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.vf-main {
    flex: 1;
    min-width: 0;
    background: var(--vf-bg-subtle);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

/* Compact (default): a centred, fixed-width reading column. The "relaxed"
   density widens it to fill the window; see the [data-vf-density] block below. */
.vf-content {
    padding: 26px 30px 64px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    flex: 1;
}

[data-vf-density="relaxed"] .vf-content {
    padding: 28px 6% 64px;
    max-width: none;
    margin: 0;
}

/* ---- topbar ------------------------------------------------------------ */
.vf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 28px;
    background: var(--vf-topbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vf-border);
    position: sticky;
    top: 0;
    /* above in-content stacking contexts (filter bar z-20, filter popover z-40) and
       above the Expert View panel (z-60) so the topbar dropdowns (theme / network /
       bell) open over it, not behind it; below the search palette (z-100) */
    z-index: 70;
}

.vf-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--vf-fg-3);
    min-width: 0;
}

.vf-crumb a {
    color: var(--vf-fg-3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vf-crumb .vf-crumb-current {
    color: var(--vf-fg-1);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vf-crumb-sep {
    font-size: 10px;
    color: var(--vf-border-strong);
}

.vf-iconbtn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vf-r-md);
    border: 1px solid var(--vf-border);
    background: var(--vf-surface);
    cursor: pointer;
    color: var(--vf-fg-2);
    transition: background .15s, color .15s;
}

.vf-iconbtn:hover {
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-600);
}

/* ---- topbar search + bell -------------------------------------------------- */
.vf-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--vf-bg-subtle);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    padding: 8px 13px;
    min-width: 240px;
    font-size: 13.5px;
    color: var(--vf-fg-faint);
    cursor: pointer;
}

.vf-search-trigger:hover {
    border-color: var(--vf-indigo-300);
}

.vf-kbd {
    margin-left: auto;
    font-family: var(--vf-font-mono);
    font-size: 11px;
    color: var(--vf-fg-faint);
    border: 1px solid var(--vf-border);
    border-radius: 4px;
    padding: 1px 5px;
}

.vf-pop-wrap {
    position: relative;
}

/* theme trigger carries the active theme's name, so it's wider than a square icon */
.vf-theme-btn {
    width: auto;
    gap: 8px;
    padding: 0 12px;
}

.vf-theme-btn-name {
    font-size: 13px;
    font-weight: 600;
}

/* shared popover panel shell (theme / bell / netsel); each rule below adds its
   own offset, width, padding and z-index */
.vf-pop {
    position: absolute;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    box-shadow: var(--vf-shadow-lg);
}

.vf-theme-pop {
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    z-index: 40;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vf-theme-pop form {
    margin: 0;
}

.vf-theme-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--vf-r-sm);
    cursor: pointer;
    font-family: var(--vf-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-2);
    text-align: left;
    transition: background .15s, color .15s;
}

.vf-theme-item:hover {
    background: var(--vf-indigo-50);
    color: var(--vf-fg-1);
}

/* the data-vf-theme attribute re-scopes the ramp, so each dot shows its own tone */
.vf-theme-swatch {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--vf-border-strong);
    background: var(--vf-indigo-400);
}

.vf-theme-glyph {
    width: 16px;
    flex: none;
    text-align: center;
    font-size: 13px;
    color: var(--vf-fg-3);
}

.vf-theme-cap {
    padding: 6px 10px 2px;
    font-family: var(--vf-font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-fg-3);
}

.vf-theme-sep {
    height: 1px;
    margin: 6px 4px 2px;
    background: var(--vf-border);
}

.vf-theme-name {
    flex: 1;
}

.vf-theme-check {
    flex: none;
    font-size: 11px;
    color: var(--vf-indigo-500);
}

.vf-theme-item[aria-checked="true"] {
    color: var(--vf-fg-1);
}

.vf-bell-wrap .vf-iconbtn {
    position: relative;
}

.vf-bell-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vf-warning);
    border: 1.5px solid var(--vf-surface);
    animation: vfPulse 1.6s var(--vf-ease) infinite;
}

.vf-bell-pop {
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    z-index: 40;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vf-palette-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(21, 20, 58, .45);
    display: flex;
    justify-content: center;
    padding-top: 12vh;
}

.vf-palette {
    width: min(560px, 92vw);
    align-self: flex-start;
    background: var(--vf-surface);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-shadow-lg);
    overflow: hidden;
}

.vf-palette-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vf-border);
    color: var(--vf-fg-faint);
}

.vf-palette-head input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: var(--vf-font-sans);
    font-size: 15px;
    color: var(--vf-fg-1);
}

.vf-search-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px;
}

.vf-search-group {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    padding: 8px 10px 4px;
}

.vf-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    font-family: var(--vf-font-sans);
    font-size: 14px;
    color: var(--vf-fg-1);
    background: none;
    border: none;
    border-radius: var(--vf-r-sm);
    padding: 8px 10px;
    cursor: pointer;
    text-decoration: none;
}

.vf-search-item:hover,
.vf-search-item.vf-search-active {
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-700);
}

.vf-search-item i {
    color: var(--vf-indigo-400);
    width: 16px;
    text-align: center;
}

.vf-search-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--vf-fg-faint);
}

/* ---- sidebar ------------------------------------------------------------ */
.vf-sidebar {
    flex: none;
    width: 268px;
    background: var(--vf-indigo-900);
    color: var(--vf-on-dark);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid rgba(255, 255, 255, .06);
    transition: width .22s var(--vf-ease);
}

.vf-sidebar.vf-collapsed {
    width: 76px;
}

.vf-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: 24px;
}

.vf-brand img {
    height: 20px;
    transition: opacity .15s;
}

.vf-collapsed .vf-brand img {
    opacity: 0;
    width: 0;
}

.vf-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: 6px;
    color: var(--vf-on-dark-2);
}

.vf-netsel-wrap {
    margin: 12px 12px 4px;
}

.vf-netsel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--vf-r-md);
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}

.vf-netsel:hover {
    background: rgba(255, 255, 255, .09);
}

.vf-netsel-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vf-netsel-text {
    min-width: 0;
    text-align: left;
}

.vf-netdot-off {
    background: var(--vf-fg-faint);
    box-shadow: none;
}

.vf-netsel-pop {
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 8px;
}

.vf-netsel-search {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--vf-font-sans);
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-sm);
    outline: none;
    color: var(--vf-fg-1);
}


.vf-net-results {
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.vf-net-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-family: var(--vf-font-sans);
    font-size: 13px;
    color: var(--vf-fg-1);
    background: none;
    border: none;
    border-radius: var(--vf-r-sm);
    padding: 7px 10px;
    cursor: pointer;
}


.vf-net-opt-on {
    color: var(--vf-indigo-600);
    font-weight: 600;
}

.vf-net-opt-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vf-net-empty,
.vf-net-more {
    font-size: 12px;
    color: var(--vf-fg-faint);
    padding: 8px 10px;
}

.vf-netsel .vf-netname {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vf-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vf-netsel .vf-netsub {
    font-size: 11px;
    color: var(--vf-on-dark-2);
    margin-top: 1px;
    white-space: nowrap;
}

.vf-netdot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vf-positive);
    flex: none;
    box-shadow: 0 0 0 3px rgba(46, 155, 107, .2);
}

.vf-nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 12px 20px;
}

.vf-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border-radius: var(--vf-r-md);
    font-family: var(--vf-font-sans);
    font-size: 14px;
    color: var(--vf-on-dark-2);
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 3px;
    text-align: left;
    text-decoration: none;
    transition: background .15s, color .15s;
    box-sizing: border-box;
}

.vf-collapsed .vf-nav-item {
    justify-content: center;
    padding: 11px 0;
}

.vf-nav-item:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--vf-white);
}

.vf-nav-item.vf-active {
    background: var(--vf-accent-strong);
    color: var(--vf-white);
    font-weight: 600;
}

.vf-nav-item .vf-num {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vf-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vf-on-dark-2);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--vf-r-sm);
}

.vf-nav-item.vf-active .vf-num {
    color: var(--vf-white);
    border-color: rgba(255, 255, 255, .5);
}

.vf-nav-item .vf-stage {
    font-size: 10.5px;
    font-weight: 500;
    margin-top: 1px;
    letter-spacing: .02em;
    color: var(--vf-on-dark-2);
}

.vf-nav-item.vf-active .vf-stage {
    color: rgba(255, 255, 255, .7);
}

.vf-subnav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px 30px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.vf-subnav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--vf-r-sm);
    font-size: 12.5px;
    color: var(--vf-on-dark-2);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.vf-subnav-item i {
    font-size: 13px;
    width: 15px;
    text-align: center;
}

.vf-subnav-item:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--vf-white);
}

.vf-subnav-on {
    background: rgba(255, 255, 255, .1);
    color: var(--vf-white);
    font-weight: 600;
}

.vf-journey-cap {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vf-on-dark-2);
    padding: 0 11px;
    margin: 20px 0 10px;
}

.vf-divider {
    height: 1px;
    background: rgba(255, 255, 255, .1);
    margin: 16px 8px;
}

/* No bootstrap d-flex here: its !important display beats Alpine's x-show. */
.vf-nav-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.vf-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vf-icon-wrap {
    position: relative;
    display: inline-flex;
    font-size: 16px;
}

.vf-mini-dot {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.vf-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    margin-left: auto;
}

.vf-dot-healthy {
    background: var(--vf-positive);
}

.vf-dot-attention {
    background: var(--vf-warning);
}

.vf-dot-live {
    background: var(--vf-violet);
    animation: vfPulse 1.6s var(--vf-ease) infinite;
}

.vf-journey {
    position: relative;
}

.vf-journey-line {
    position: absolute;
    left: 24px;
    top: 14px;
    bottom: 26px;
    width: 2px;
    background: linear-gradient(var(--vf-accent-strong), var(--vf-violet));
    opacity: .35;
    border-radius: 2px;
}

.vf-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    gap: 10px;
    font-size: 12px;
    color: var(--vf-on-dark-2);
}

.vf-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--vf-grad-violet);
    color: var(--vf-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    border: none;
    cursor: pointer;
    padding: 0;
}

.vf-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--vf-font-sans);
    font-size: 12.5px;
    color: var(--vf-indigo-300);
}

.vf-link-btn:hover {
    color: var(--vf-white);
}

.vf-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vf-positive);
    display: inline-block;
    animation: vfPulse 2s var(--vf-ease) infinite;
}

/* ---- focus ring, shared by every text input and input wrapper ------------ */
.vf-netsel-search:focus,
.vf-chat-input input:focus,
.vf-report-template:focus,
.vf-tpl-select:focus,
.vf-tpl-input:focus,
.vf-login-card .form-control:focus,
.vf-cp-date-input:focus,
.vf-cp-amount:focus-within,
.vf-cp-name:focus-within {
    border-color: var(--vf-indigo-300);
    box-shadow: var(--vf-shadow-focus);
}

/* keyboard focus ring for the custom controls that have no native one */
.vf-fchip:focus-visible,
.vf-seg-btn:focus-visible,
.vf-scopeseg-btn:focus-visible,
.vf-fw:focus-visible,
.vf-cp-obj:focus-visible,
.vf-step:focus-visible,
.vf-rec-row:focus-visible,
.vf-kpi-link:focus-visible,
.vf-btn-primary:focus-visible,
.vf-btn-accent:focus-visible,
.vf-btn-secondary-sm:focus-visible,
.vf-iconbtn:focus-visible {
    outline: none;
    box-shadow: var(--vf-shadow-focus);
}

/* ---- hover tint, shared by every selectable row / option ----------------- */
.vf-net-opt:hover,
.vf-trow:hover,
.vf-act-row:hover,
.vf-ms-opt:hover,
.vf-fopt:hover,
.vf-rec-row:hover {
    background: var(--vf-indigo-50);
}

/* ---- page primitives ----------------------------------------------------- */
.vf-eyebrow {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vf-indigo-400);
    margin-bottom: 8px;
}

.vf-h1 {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -.02em;
    color: var(--vf-fg-1);
    margin: 0;
}

.vf-page-sub {
    font-size: 14.5px;
    color: var(--vf-fg-3);
    margin: 8px 0 0;
    max-width: 780px;
    line-height: 1.5;
}

.vf-page-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.vf-panel {
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-shadow-sm);
    padding: 20px;
}

.vf-grad-text {
    background: var(--vf-grad-violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--vf-r-pill);
    white-space: nowrap;
    color: var(--vf-fg-3);
    background: var(--vf-indigo-50);
}

/* Network pill — neutral shared base (page-head context pill + the saved-plans network picker) */
.vf-pill-net {
    font-size: 13px;
    font-weight: 700;
    color: var(--vf-fg-1);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    box-shadow: var(--vf-shadow-xs);
    padding: 6px 14px;
}

.vf-pill-net i {
    color: var(--vf-indigo-500);
    font-size: 12px;
}

/* Current-network context chip — the passive "which network" indicator sat beside the
   period selector; a solid accent fill makes it stand out as key context. Its own class
   (not .vf-pill-net) so it stays out of the header height-lock and off the saved-plans picker. */
.vf-netchip {
    font-size: 13px;
    font-weight: 700;
    color: var(--vf-white);
    background: var(--vf-accent-strong);
    border: 1px solid transparent;
    box-shadow: var(--vf-shadow-sm);
    padding: 6px 14px;
}

.vf-netchip i {
    color: var(--vf-white);
    font-size: 12px;
}

.vf-page-actions,
.vf-sec-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: none;
}

.vf-page-actions .vf-btn-primary {
    width: auto;
}

/* every control in the header row shares one height */
.vf-page-actions .vf-btn-primary,
.vf-page-actions .vf-pill-net,
.vf-page-actions .vf-ci-search {
    height: 38px;
}

.vf-page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-accent-strong);
    text-decoration: none;
}

.vf-page-back:hover {
    text-decoration: underline;
}

/* ---- KPI cards ------------------------------------------------------------ */
.vf-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.vf-kpi {
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    padding: 16px 18px;
    box-shadow: var(--vf-shadow-sm);
    flex: 1 1 200px;
    min-width: 0;
}

.vf-kpi-accent {
    border-color: var(--vf-indigo-200);
}

.vf-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vf-kpi-label {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vf-fg-3);
}

.vf-kpi-icon {
    color: var(--vf-indigo-400);
    font-size: 16px;
}

.vf-kpi-value {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.02em;
    margin-top: 12px;
    color: var(--vf-fg-1);
    font-feature-settings: 'tnum' 1;
}

.vf-kpi-accent .vf-kpi-value {
    color: var(--vf-indigo-700);
}

.vf-kpi-value-big {
    font-size: 38px;
}

.vf-kpi-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.vf-kpi-note {
    font-size: 11.5px;
    color: var(--vf-fg-faint);
}

.vf-kpi-spark {
    margin-top: 10px;
}

.vf-delta {
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.vf-delta-up {
    color: var(--vf-positive);
}

.vf-delta-down {
    color: var(--vf-negative);
}

/* pill variant (Executive Overview KPI deltas) — tinted rounded chip */
.vf-delta-pill {
    padding: 2px 8px;
    border-radius: var(--vf-r-pill);
    font-size: 11.5px;
}

.vf-delta-pill.vf-delta-up {
    background: var(--vf-positive-bg);
}

.vf-delta-pill.vf-delta-down {
    background: var(--vf-negative-bg);
}

/* ---- section titles -------------------------------------------------------- */
/* Section heading: sits above its panel(s); controls for the section go on its right. */
.vf-sec-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 18px 0 8px;
    gap: 12px;
}

.vf-sec-left {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
}

/* a headed panel keeps the same 18px rhythm as .vf-row-2 / .vf-kpi-row (the .vf-col
   reset below must come after it: inside a column the row's own margin does the job) */
.vf-sec-row + .vf-panel {
    margin-bottom: 18px;
}

/* the panel's first row: description on the left, section controls on the right */
.vf-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.vf-panel-head > .vf-sec-sub {
    font-size: 13px;
    font-style: italic;
    margin-top: 0;
}

.vf-panel-head > .vf-sec-actions {
    margin-left: auto;
}

.vf-panel-flush > .vf-panel-head {
    padding: 14px 20px 0;
    margin-bottom: 8px;
}

/* two headed panels side by side: each cell is a heading + a panel that fills the row */
.vf-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vf-col > .vf-panel {
    flex: 1;
    margin-bottom: 0;
}

/* first in a column, or kept inside a card (chat charts, report document + its editor):
   no top gap, and the in-card ones stay compact */
.vf-col > .vf-sec-row,
.vf-panel > .vf-sec-row,
.vf-report-editor > .vf-sec-row {
    margin-top: 0;
}

/* after a block that already ends with the 18px rhythm the heading adds nothing, so the
   gap never doubles */
.vf-page-head + .vf-sec-row,
.vf-kpi-row + .vf-sec-row,
.vf-row-2 + .vf-sec-row,
.vf-cp-hero-row + .vf-sec-row,
.vf-sec-row + .vf-panel + .vf-sec-row {
    margin-top: 0;
}

.vf-panel > .vf-sec-row .vf-sec-title,
.vf-report-editor > .vf-sec-row .vf-sec-title {
    font-size: 16px;
}

.vf-panel > .vf-sec-row .vf-sec-sub,
.vf-report-editor > .vf-sec-row .vf-sec-sub {
    font-size: 12.5px;
    font-style: normal;
}

.vf-sec-icon {
    color: var(--vf-indigo-500);
    font-size: 15px;
}

.vf-sec-title {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--vf-fg-1);
    letter-spacing: -.01em;
}

.vf-sec-sub {
    font-size: 12.5px;
    color: var(--vf-fg-3);
    margin-top: 2px;
}

.vf-sec-left .vf-sec-sub {
    font-size: 13px;
    font-style: italic;
}

.vf-sec-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-2);
    text-decoration: none;
    white-space: nowrap;
}

.vf-sec-link:hover {
    color: var(--vf-indigo-600);
}

/* size="lg": page-level section dividers between groups of panels */
.vf-sec-row-lg .vf-sec-title {
    font-family: var(--vf-font-sans);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vf-fg-2);
    white-space: nowrap;
}

.vf-sec-row-lg .vf-sec-sub {
    max-width: 780px;
}

/* ---- segmented control ------------------------------------------------------ */
.vf-segmented {
    display: inline-flex;
    background: var(--vf-indigo-50);
    border-radius: var(--vf-r-md);
    padding: 3px;
    gap: 3px;
}

.vf-segmented form {
    display: contents;
}

.vf-seg-btn {
    font-family: var(--vf-font-sans);
    font-weight: 500;
    font-size: 13px;
    padding: 6px 13px;
    border-radius: var(--vf-r-sm);
    background: none;
    border: none;
    color: var(--vf-fg-3);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}

.vf-seg-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.vf-seg-on {
    background: var(--vf-surface-2);
    color: var(--vf-indigo-700);
    font-weight: 600;
    box-shadow: var(--vf-shadow-xs), inset 0 0 0 1px var(--vf-border-strong);
}

/* ---- filter bar -------------------------------------------------------------- */
.vf-filterbar-cap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin-left: 8px;
}

.vf-filterbar-cap i {
    font-size: 10px;
}

.vf-loctype-select {
    font-family: var(--vf-font-sans);
    font-size: 13px;
    color: var(--vf-fg-2);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-pill);
    padding: 4px 10px;
    cursor: pointer;
    outline: none;
}

.vf-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--vf-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--vf-fg-2);
    background: var(--vf-bg-subtle);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-pill);
    padding: 5px 12px;
    cursor: pointer;
}

.vf-fchip .fa-chevron-down {
    font-size: 10px;
    color: var(--vf-fg-faint);
}


.vf-fchip-on {
    background: var(--vf-accent-strong);
    border-color: var(--vf-accent-strong);
    color: var(--vf-white);
}

.vf-fchip-sm {
    font-size: 12px;
    padding: 4px 10px;
}

/* ---- layout rows -------------------------------------------------------------- */
/* two-column content grid; .vf-flow-grid is the same layout without the margin */
.vf-row-2,
.vf-flow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.vf-row-2 {
    margin-bottom: 18px;
}

.vf-row-2-stretch {
    align-items: stretch;
}

.vf-row-2-eq {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1080px) {
    .vf-row-2 {
        grid-template-columns: 1fr;
    }
}

.vf-panel-flush {
    padding: 0;
    overflow: hidden;
}

/* ---- legend / chart annexes ------------------------------------------------------ */
.vf-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--vf-fg-3);
}

.vf-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vf-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

/* Chart labels: fixed-size HTML overlaid on the responsive SVG (charts/_axis_labels.html,
   scatter.html), so every chart's text reads at the same physical size regardless of panel
   width. The tag emits each label's anchor as a % point; the per-class transform below picks
   which edge of the label sits on that point. Each label class adds only its size/weight/color
   and its transform. */
.vf-axis-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vf-axis-y,
.vf-axis-x,
.vf-scatter-axis,
.vf-scatter-point,
.vf-scatter-quad {
    position: absolute;
    font-family: var(--vf-font-sans);
    white-space: nowrap;
}

.vf-axis-y,
.vf-axis-x,
.vf-scatter-axis {
    font-size: 12px;
    line-height: 1;
    color: var(--vf-fg-faint);
    font-variant-numeric: tabular-nums;
}

/* line/area ticks: Y right-aligned at the plot's left edge, X centered under its column */
.vf-axis-y {
    transform: translate(-100%, -50%);
}

.vf-axis-x {
    transform: translate(-50%, -50%);
}

/* scatter axis titles: X centred just under the tick row, Y centred over the left axis line */
.vf-scatter-axis {
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-3);
}

.vf-scatter-axis-x {
    transform: translate(-50%, 10px);
}

.vf-scatter-axis-y {
    transform: translate(-50%, -100%);
}

/* the median tick, where the dashed lines cross */
.vf-scatter-tick-med {
    font-weight: 700;
    color: var(--vf-indigo-500);
}

/* quadrant names, pinned inside the plot corners */
.vf-scatter-quad {
    margin: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
}

.vf-scatter-quad-prio {
    color: var(--vf-indigo-600);
}

.vf-scatter-quad-n {
    font-weight: 500;
    opacity: .8;
}

/* the names are fixed-size text over a scaling plot: below this width they run into the points */
.vf-scatter-wrap {
    container-type: inline-size;
}

@container (max-width: 760px) {
    .vf-scatter-quad {
        display: none;
    }
}

/* scatter point labels, right of their dot; left of it near the right edge */
.vf-scatter-point {
    font-size: 12px;
    font-weight: 600;
    color: var(--vf-fg-2);
    transform: translate(8px, -50%);
}

.vf-scatter-point-left {
    transform: translate(calc(-100% - 8px), -50%);
}

.vf-donut-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0 14px;
}

.vf-donut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vf-donut-ring {
    position: relative;
}

.vf-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vf-donut-value {
    font-family: var(--vf-font-display);
    font-weight: 600;
    color: var(--vf-fg-1);
    line-height: 1;
    font-feature-settings: 'tnum' 1;
}

.vf-donut-sub {
    font-size: 11px;
    color: var(--vf-fg-3);
    margin-top: 4px;
}

.vf-donut-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
}

.vf-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--vf-border);
}

.vf-mini {
    text-align: center;
}

.vf-mini-value {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 22px;
    color: var(--vf-fg-1);
    font-feature-settings: 'tnum' 1;
}

.vf-mini-label {
    font-size: 11.5px;
    color: var(--vf-fg-3);
    margin-top: 3px;
}

/* ---- progress / fill bars --------------------------------------------- */
.vf-progress {
    background: var(--vf-indigo-100);
    border-radius: var(--vf-r-pill);
    overflow: hidden;
}

.vf-progress-fill {
    height: 100%;
    border-radius: var(--vf-r-pill);
    transition: width .6s var(--vf-ease);
}

.vf-fillbars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vf-fillbar-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

.vf-fillbar-label {
    color: var(--vf-fg-2);
    font-weight: 500;
}

.vf-fillbar-value {
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    color: var(--vf-fg-1);
}

.vf-fillbar-sub {
    color: var(--vf-fg-faint);
}

.vf-ai-orb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--vf-grad-violet);
    color: var(--vf-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.vf-hero-stat {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 26px;
    color: var(--vf-indigo-700);
    margin-top: 12px;
}

.vf-hero-sub {
    font-size: 13px;
    color: var(--vf-fg-3);
    margin-top: 6px;
}

.vf-metric-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.vf-coverage {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--vf-fg-3);
    margin: -6px 0 16px;
}

.vf-chat {
    display: flex;
    flex-direction: column;
    /* grow with the viewport (less vertical scrolling) but capped so it never
       dominates the screen; floored so it stays usable on short windows. */
    height: clamp(520px, calc(100vh - 200px), 700px);
    /* the scroll area shares the page's tint, so lean on a stronger frame to set
       the chat window apart from the page. */
    border: 2px solid var(--vf-indigo-200);
    box-shadow: var(--vf-shadow-lg);
}

.vf-chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    /* tinted so the white answer bubbles and chart cards read as cards on it,
       matching the rest of VidiFlow (white panels on a subtle page ground) */
    background: var(--vf-bg-subtle);
}

.vf-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.vf-chat-row-user {
    justify-content: flex-end;
}

.vf-chat-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
    flex: none;
}

.vf-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: var(--vf-r-lg);
    font-size: 13.5px;
    line-height: 1.55;
}

.vf-bubble-bot {
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    color: var(--vf-fg-2);
    border-top-left-radius: 4px;
}

.vf-bubble-bot b {
    color: var(--vf-fg-1);
}

.vf-bubble-user {
    background: var(--vf-accent-strong);
    color: var(--vf-white);
    border-top-right-radius: 4px;
}

/* The composer (suggestions + input) is one white block, split from the tinted
   conversation above by a single divider on the suggestions row. */
.vf-chat-suggest {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: var(--vf-surface);
    border-top: 1px solid var(--vf-border);
}

.vf-chat-input {
    display: flex;
    gap: 10px;
    padding: 4px 20px 14px;
    background: var(--vf-surface);
}

.vf-chat-input input,
.vf-cpb-composer textarea {
    flex: 1;
    font-family: var(--vf-font-sans);
    font-size: 14px;
    padding: 9px 14px;
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    outline: none;
    color: var(--vf-fg-1);
    background: var(--vf-surface);
}

.vf-chat-input input::placeholder,
.vf-cpb-composer textarea::placeholder {
    color: var(--vf-fg-faint);
}


.vf-chat-input .vf-btn-accent {
    border: none;
}

/* Locked while the answer is in flight (htmx disables it via hx-disabled-elt). */
.vf-chat-input input:disabled,
.vf-cpb-composer textarea:disabled {
    background: var(--vf-bg-subtle);
    color: var(--vf-fg-faint);
    cursor: not-allowed;
}

/* In-flight submit button (AI Workspace "Ask", Report Builder "Generate"): swap
   the idle label for a spinner + busy label and sweep a shimmer across it while
   the request runs. Both forms disable the button via hx-disabled-elt, so
   :disabled == in-flight; keep the accent look rather than the greyed default. */
.vf-inflight-btn {
    position: relative;
    overflow: hidden;
}

.vf-inflight-btn:disabled {
    cursor: default;
    opacity: 1;
}

.vf-inflight-busy {
    display: none;
}

.vf-inflight-btn:disabled .vf-inflight-idle {
    display: none;
}

.vf-inflight-btn:disabled .vf-inflight-busy {
    display: inline-block;
}

.vf-inflight-btn:disabled::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            100deg,
            transparent 30%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 70%
    );
    transform: translateX(-100%);
    animation: vf-inflight-shimmer 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vf-inflight-shimmer {
    to {
        transform: translateX(100%);
    }
}

/* AI Workspace: saved-conversation rail beside the chat panel. */
.vf-chat-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.vf-chat-layout .vf-chat {
    flex: 1;
    min-width: 0;
}

.vf-conv-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 240px;
    flex: none;
}

.vf-conv-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--vf-r-md);
    border: 1px solid var(--vf-border-strong);
    background: var(--vf-surface);
    color: var(--vf-fg-1);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.vf-conv-new:hover {
    background: var(--vf-bg-subtle);
}

.vf-conv-scroll {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* flex:1 + min-height:0 so the rail scrolls within the stretched column
       height instead of growing past the chat panel when chats pile up. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.vf-conv-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.vf-conv-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* flex:1 + min-width:0 so the row fills the rail and the title ellipsis
       works inside the flex item alongside the delete control. */
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 9px 12px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    /* white cards so they read against the tinted page ground */
    background: var(--vf-surface);
    color: var(--vf-fg-2);
    cursor: pointer;
}

.vf-conv-item:hover {
    border-color: var(--vf-border-strong);
}

.vf-conv-on .vf-conv-item {
    background: var(--vf-indigo-50);
    border-color: var(--vf-indigo-300);
}

.vf-conv-on .vf-conv-title {
    color: var(--vf-indigo-700);
}

.vf-conv-del-form {
    display: flex;
}

.vf-conv-del {
    width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
    color: var(--vf-fg-faint);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s var(--vf-ease), background .15s var(--vf-ease), color .15s var(--vf-ease);
}

.vf-conv-row:hover .vf-conv-del,
.vf-conv-row:focus-within .vf-conv-del,
.vf-conv-del:focus-visible {
    opacity: 1;
}

.vf-conv-del:hover {
    background: var(--vf-negative);
    border-color: var(--vf-negative);
    color: var(--vf-white);
}

.vf-conv-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-conv-when {
    font-size: 11px;
    color: var(--vf-fg-faint);
}

.vf-conv-empty {
    font-size: 12px;
    color: var(--vf-fg-faint);
    padding: 4px 12px;
}

/* The bot answer: a text bubble that hugs its content, with white chart cards
   stacked full-width beneath it (the cards need more room than a chat bubble). */
.vf-chat-botcol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    max-width: 88%;
}

.vf-chat-botcol .vf-bubble-bot {
    align-self: flex-start;
    max-width: 100%;
}

.vf-chat-charts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Chart cards sit closer-packed than full page panels. */
.vf-chat-charts .vf-panel {
    padding: 16px;
}

.vf-chat-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

/* Inline data tables inside an answer (benchmark you-vs-peer, ranked locations). */
.vf-chat-table-wrap {
    overflow-x: auto;
}

.vf-chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vf-chat-table th,
.vf-chat-table td {
    padding: 7px 10px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--vf-border);
}

.vf-chat-table th:first-child,
.vf-chat-table td:first-child {
    text-align: left;
}

.vf-chat-table th {
    font-size: 11px;
    font-weight: 600;
    color: var(--vf-fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vf-chat-table tbody tr:last-child td {
    border-bottom: none;
}

/* Auto-generated reading under the opportunity scatter. */
.vf-chat-reading {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--vf-fg-2);
}

.vf-chat-reading strong {
    color: var(--vf-fg-1);
}

/* Model-suggested follow-up questions under an answer (reuse .vf-fchip, but
   white so they stand out against the tinted chat scroll rather than blending
   into it like the composer chips do on their white footer). */
.vf-chat-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vf-chat-followups .vf-fchip {
    background: var(--vf-surface);
    border-color: var(--vf-border-strong);
    color: var(--vf-fg-1);
}

.vf-chat-suggest .vf-fchip:hover,
.vf-chat-followups .vf-fchip:hover {
    border-color: var(--vf-indigo-300);
    color: var(--vf-indigo-700);
}

@media (max-width: 720px) {
    .vf-chat-layout {
        flex-direction: column;
    }

    .vf-conv-list {
        width: 100%;
    }
}

/* Report Builder: template editor stacked above the full-width preview. */
.vf-report-builder {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
}

.vf-report-template {
    width: 100%;
    min-height: 260px;
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--vf-fg-1);
    background: var(--vf-bg-subtle);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    padding: 14px;
    outline: none;
    resize: vertical;
}

/* Locked while a report is generating (htmx disables it via hx-disabled-elt). */
.vf-report-template:disabled {
    color: var(--vf-fg-faint);
    cursor: not-allowed;
    opacity: .7;
}

/* Positioning context for the floated confirmation toast. */
#vf-tpl-picker {
    position: relative;
}

/* Transient confirmation shown after a template is saved / updated / deleted. Floated
   in the picker's top-right so it never shifts the layout; a fresh element is rendered
   on each write, so this CSS-only fade replays every time. */
.vf-tpl-toast {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-indigo-700);
    background: var(--vf-indigo-50);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    box-shadow: var(--vf-shadow-sm);
    animation: vf-tpl-toast 2.6s ease forwards;
}

.vf-tpl-toast-error {
    color: var(--vf-negative);
    background: var(--vf-negative-bg);
}

@keyframes vf-tpl-toast {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }
    8%, 82% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(-4px);
        visibility: hidden;
    }
}

/* "Save as new" uses a native <details> for open/close state (reset to closed by every
   server re-render), styled as a button + floating popover. */
.vf-tpl-save-details > summary {
    list-style: none;
    cursor: pointer;
}

.vf-tpl-save-details > summary::-webkit-details-marker {
    display: none;
}

.vf-tpl-save-details > summary::marker {
    content: "";
}

/* Built-in template buttons, above the saved-templates row. */
.vf-tpl-builtins {
    margin-bottom: 12px;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Template picker bar above the template editor: the saved-templates dropdown plus
   the save / update / delete controls. */
.vf-tpl-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.vf-tpl-select {
    flex: 1 1 200px;
    min-width: 160px;
    font-family: var(--vf-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--vf-fg-1);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    padding: 7px 10px;
    cursor: pointer;
    outline: none;
}

/* The update/delete forms exist only to carry CSRF + pk; they must not break the
   bar's flex layout. */
.vf-tpl-inline-form {
    display: contents;
}

.vf-btn-secondary-sm:disabled,
.vf-tpl-del:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.vf-tpl-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
    color: var(--vf-fg-3);
    border: 1px solid var(--vf-border-strong);
    cursor: pointer;
}

.vf-tpl-del:not(:disabled):hover {
    background: var(--vf-bg-subtle);
    color: var(--vf-fg-1);
}

/* Save-as-new popover. */
.vf-tpl-save-pop {
    top: calc(100% + 8px);
    left: 0;
    width: 300px;
    max-width: 90vw;
    z-index: 40;
    padding: 14px;
}

.vf-tpl-save-pop form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.vf-tpl-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
}

.vf-tpl-opt {
    font-weight: 400;
    color: var(--vf-fg-3);
}

.vf-tpl-input {
    font-family: var(--vf-font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--vf-fg-1);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    padding: 7px 10px;
    outline: none;
}

.vf-tpl-scope {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12.5px;
    color: var(--vf-fg-2);
}

.vf-tpl-scope legend {
    padding: 0;
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
}

.vf-tpl-scope label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.vf-tpl-save-btn {
    margin-top: 2px;
    justify-content: center;
}

/* Hint under the template editor listing the chart placeholder tokens. */
.vf-report-hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--vf-fg-3);
}

.vf-report-hint code {
    font-family: var(--vf-font-mono);
    font-size: 12px;
    color: var(--vf-indigo-600);
    background: var(--vf-indigo-50);
    padding: 1px 5px;
    border-radius: var(--vf-r-sm);
}

/* Report body: narrative text and chart panels interleaved by the template's
   [[tokens]], on a consistent vertical rhythm. */
.vf-report-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vf-report-body .vf-kpi-row {
    margin-bottom: 0;
}

/* Preview toolbar (Download PDF + Edit toggle) and the collapsible editor. */
.vf-report-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.vf-report-editor {
    margin-bottom: 18px;
}


.vf-report h2 {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -.01em;
    color: var(--vf-fg-1);
    margin: 0 0 8px;
}

.vf-report h3 {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--vf-fg-1);
    margin: 18px 0 4px;
}

.vf-report p,
.vf-report li {
    font-size: 13.5px;
    color: var(--vf-fg-2);
    line-height: 1.6;
    margin: 0 0 8px;
}

.vf-report b {
    color: var(--vf-indigo-700);
}

/* Realistic on-screen preview — a "document" sheet mirroring the PDF. */
.vf-report-doc {
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    overflow: hidden;
    box-shadow: var(--vf-shadow-sm);
    background: var(--vf-surface);
}

.vf-report-doc-head {
    background: var(--vf-indigo-900);
    padding: 24px 28px 20px;
    color: var(--vf-white);
}

.vf-report-doc-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vf-indigo-300);
}

.vf-report-doc-title {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 26px;
    margin: 6px 0 4px;
}

.vf-report-doc-meta {
    font-size: 12px;
    color: var(--vf-on-dark-2);
}

.vf-report-doc-accent {
    height: 4px;
    background: var(--vf-grad-violet);
}

.vf-report-doc-body {
    padding: 28px;
}

@media print {
    .vf-sidebar,
    .vf-topbar,
    .vf-page-head,
    .vf-report-form,
    .vf-xv,
    .vf-xv-tab {
        display: none !important;
    }

    .vf-main,
    .vf-content {
        overflow: visible;
        padding: 0;
    }

    .vf-panel {
        border: none;
        box-shadow: none;
    }
}

/* ---- tables ----------------------------------------------------------------------- */
.vf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.vf-table th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-fg-3);
    padding: 9px 18px;
    border-top: 1px solid var(--vf-border);
    border-bottom: 1px solid var(--vf-border);
    background: var(--vf-surface-2);
}

.vf-table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--vf-border);
    color: var(--vf-fg-2);
}

.vf-table tbody tr:last-child td {
    border-bottom: none;
}

/* Staff-only User Chats: single-page master-detail browser (rail + reader).
   The layout reuses .vf-chat-layout (flex row) from the AI Workspace; only the
   rail is bespoke. The rail cards below intentionally mirror the .vf-conv-*
   conversation-list chrome (card + indigo active state); a shared card base
   isn't extracted because the markup differs (anchor + 3 meta lines here vs the
   button + delete form there). */
.vf-chats-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    flex: none;
    /* match the reader pane's height so the rail scrolls in step with it */
    height: clamp(520px, calc(100vh - 200px), 700px);
}

.vf-chats-listwrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.vf-chats-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.vf-chats-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
    color: var(--vf-fg-2);
    text-decoration: none;
    cursor: pointer;
}

.vf-chats-item:hover {
    border-color: var(--vf-border-strong);
}

.vf-chats-on {
    background: var(--vf-indigo-50);
    border-color: var(--vf-indigo-300);
}

.vf-chats-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-chats-on .vf-chats-item-title {
    color: var(--vf-indigo-700);
}

.vf-chats-item-user {
    font-size: 12px;
    color: var(--vf-fg-3);
}

.vf-chats-item-meta {
    font-size: 11px;
    color: var(--vf-fg-faint);
}

.vf-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 4px 2px;
}

.vf-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
    color: var(--vf-fg-1);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vf-pager-btn:hover {
    background: var(--vf-bg-subtle);
}

.vf-pager-off {
    color: var(--vf-fg-faint);
    cursor: default;
    opacity: .55;
}

.vf-pager-off:hover {
    background: var(--vf-surface);
}

.vf-pager-info {
    font-size: 12px;
    color: var(--vf-fg-3);
}

.vf-chats-reader-head {
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--vf-border);
}

.vf-chats-reader-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--vf-fg-1);
}

.vf-chats-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    font-size: 12.5px;
    color: var(--vf-fg-2);
}

.vf-chats-meta-k {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin-right: 6px;
}


.vf-td-num {
    text-align: right;
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
}

.vf-cell-name {
    font-weight: 600;
    color: var(--vf-fg-1);
    font-family: var(--vf-font-sans);
}

/* ---- Opportunity matrix (scatter) ---- */
.vf-scatter-dot {
    cursor: pointer;
    transition: r .1s ease, fill-opacity .1s ease;
}

.vf-scatter-dot:hover {
    r: 9;
    fill-opacity: 1;
}

/* ---- Key Places: location performance table (metric-matrix heat-grid look) ---- */
.vf-loc-colhd {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.vf-loc-colhd:hover {
    color: var(--vf-fg-1);
}

.vf-loc-sort {
    font-size: 10px;
    margin-left: 2px;
}

.vf-loc-rowhd {
    line-height: 1.35;
}

.vf-loc-name {
    display: block;
}

.vf-loc-site {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--vf-fg-3);
}

.vf-loc-id {
    color: var(--vf-fg-3);
    font-weight: 400;
    font-family: var(--vf-font-mono);
    font-size: 11.5px;
}

.vf-loc-link {
    margin-left: 6px;
    color: var(--vf-fg-3);
    font-size: 11px;
    text-decoration: none;
}

.vf-loc-link:hover {
    color: var(--vf-indigo-500);
}

.vf-cell-mono {
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    color: var(--vf-fg-3);
}

/* ---- status pill variants ------------------------------------------------------------
   positive / attention / negative share their tint with the metric-matrix cells,
   so those three live with the .vf-tone-cell-* rules below. */
.vf-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.vf-pill-live {
    color: var(--vf-violet);
    background: var(--vf-violet-bg);
}

.vf-pill-live .vf-pill-dot {
    animation: vfPulse 1.6s var(--vf-ease) infinite;
}


/* ---- home: hero ------------------------------------------------------------ */
.vf-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: right center;
    box-shadow: var(--vf-shadow-lg);
}

.vf-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(21, 20, 58, .97) 0%, rgba(21, 20, 58, .86) 34%, rgba(21, 20, 58, .4) 72%, rgba(21, 20, 58, .15) 100%);
}

.vf-hero-inner {
    position: relative;
    z-index: 2;
    padding: 46px 48px;
    max-width: 680px;
}

.vf-hero-eyebrow {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vf-indigo-300);
    margin-bottom: 18px;
}

.vf-hero-h1 {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 46px;
    line-height: 1.04;
    letter-spacing: -.025em;
    color: var(--vf-white);
    margin: 0;
}

.vf-hero-p {
    font-size: 16px;
    color: var(--vf-on-dark-2);
    line-height: 1.6;
    margin: 20px 0 26px;
    max-width: 500px;
}

.vf-hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.vf-btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vf-font-sans);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: var(--vf-r-md);
    cursor: pointer;
    border: none;
    background: var(--vf-grad-violet);
    color: var(--vf-white);
    text-decoration: none;
    /* negative spread keeps the glow under the button, not bleeding sideways */
    box-shadow: 0 6px 14px -6px rgba(90, 87, 201, .55);
    transition: transform .1s, box-shadow .15s;
}

.vf-btn-accent:hover {
    color: var(--vf-white);
    box-shadow: 0 8px 18px -6px rgba(90, 87, 201, .7);
}

.vf-btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: var(--vf-r-md);
    color: var(--vf-white);
    text-decoration: none;
}

.vf-btn-ghost-light:hover {
    color: var(--vf-indigo-200);
}

.vf-focal-row {
    display: flex;
    gap: 28px;
    margin-top: 38px;
}

.vf-focal + .vf-focal {
    border-left: 1px solid rgba(255, 255, 255, .16);
    padding-left: 28px;
}

.vf-focal-value {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 30px;
    color: var(--vf-white);
    line-height: 1;
    letter-spacing: -.02em;
    font-feature-settings: 'tnum' 1;
}

.vf-focal-label {
    font-size: 12px;
    color: var(--vf-on-dark-2);
    margin-top: 7px;
}

/* ---- home: journey steps ------------------------------------------------------ */
.vf-journey-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin: 34px 0 22px;
    flex-wrap: wrap;
    scroll-margin-top: 80px;
}

.vf-journey-title {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -.02em;
    color: var(--vf-fg-1);
    margin: 8px 0 0;
}

.vf-journey-lede {
    font-size: 14px;
    color: var(--vf-fg-3);
    line-height: 1.6;
    max-width: 440px;
    margin: 0;
}

.vf-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

@media (max-width: 1080px) {
    .vf-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vf-step {
    display: flex;
    flex-direction: column;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    padding: 16px 16px 14px;
    cursor: pointer;
    box-shadow: var(--vf-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform .18s var(--vf-ease), box-shadow .18s, border-color .18s;
}

.vf-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--vf-shadow-lg);
    border-color: var(--vf-indigo-200);
    color: inherit;
}

.vf-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vf-step-marker {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--vf-surface);
    border: 2px solid var(--vf-indigo-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vf-indigo-600);
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    transition: all .18s;
}

.vf-step:hover .vf-step-marker,
.vf-cp-step-on .vf-cp-step-marker {
    background: var(--vf-accent-strong);
    border-color: var(--vf-accent-strong);
    color: var(--vf-white);
}

.vf-step-icon {
    color: var(--vf-indigo-400);
    font-size: 16px;
    transition: color .18s;
}

.vf-step:hover .vf-step-icon {
    color: var(--vf-indigo-600);
}

.vf-step-stage {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vf-violet);
    text-align: right;
}

.vf-step-name {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--vf-fg-1);
    margin-top: 14px;
    line-height: 1.2;
}

.vf-step-tagline {
    font-size: 12px;
    color: var(--vf-fg-3);
    margin: 4px 0 14px;
    line-height: 1.4;
}

.vf-step-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--vf-border);
    font-size: 11.5px;
    color: var(--vf-fg-3);
}

.vf-mini-dot-inline {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

/* ---- home: activity + next best actions ------------------------------------------ */

@media (max-width: 1080px) {
    .vf-flow-grid {
        grid-template-columns: 1fr;
    }
}

.vf-activity {
    display: flex;
    flex-direction: column;
    padding: 0 8px 8px;
}

.vf-act-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--vf-r-md);
    text-decoration: none;
    transition: background .15s;
}


.vf-act-icon {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--vf-r-sm);
    background: var(--vf-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.vf-act-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vf-act-text {
    font-size: 13.5px;
    color: var(--vf-fg-1);
    line-height: 1.4;
}

.vf-act-meta {
    font-size: 11.5px;
    color: var(--vf-fg-faint);
    margin-top: 2px;
}

.vf-nba-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vf-nba {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface-2);
}

.vf-nba-icon {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--vf-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--vf-indigo-50);
}

.vf-nba-body {
    flex: 1;
    min-width: 0;
}

.vf-nba-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-nba-desc {
    font-size: 12px;
    color: var(--vf-fg-3);
    margin-top: 2px;
}

.vf-btn-secondary-sm {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
    color: var(--vf-indigo-700);
    border: 1px solid var(--vf-border-strong);
    text-decoration: none;
    white-space: nowrap;
}

.vf-btn-secondary-sm:hover {
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-700);
}

.vf-tone-live {
    color: var(--vf-violet);
}

.vf-tone-positive {
    color: var(--vf-positive);
}

.vf-tone-attention {
    color: var(--vf-warning);
}

.vf-tone-neutral {
    color: var(--vf-fg-faint);
}

/* Tone as a solid swatch (legend dots) and as a tinted cell (status grids), so a state
   maps to a colour through the tone vocabulary rather than a per-feature class. */
.vf-tone-bg-positive {
    background: var(--vf-positive);
}

.vf-tone-bg-attention {
    background: var(--vf-warning);
}

.vf-tone-bg-negative {
    background: var(--vf-negative);
}

.vf-pill-healthy,
.vf-pill-positive,
.vf-tone-cell-positive {
    background: var(--vf-positive-bg);
    color: var(--vf-positive);
}

.vf-pill-attention,
.vf-tone-cell-attention {
    background: var(--vf-warning-bg);
    color: var(--vf-warning);
}

.vf-pill-negative,
.vf-tone-cell-negative {
    background: var(--vf-negative-bg);
    color: var(--vf-negative);
}

.vf-tone-cell-neutral {
    background: var(--vf-surface-2);
    color: var(--vf-fg-faint);
}

/* ---- module cards (home) ------------------------------------------------- */


/* ---- empty state --------------------------------------------------------- */
.vf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 6px;
}

.vf-empty .vf-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 8px;
}

.vf-empty .vf-empty-title {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--vf-fg-1);
}

.vf-empty .vf-empty-sub {
    font-size: 13.5px;
    color: var(--vf-fg-3);
    max-width: 340px;
    line-height: 1.5;
}

.vf-empty-cta {
    margin-top: 10px;
}

/* reload-failure toast (Bootstrap .toast, shown from vidiflow.js) */
.vf-toast {
    --bs-toast-bg: var(--vf-indigo-900);
    --bs-toast-color: var(--vf-on-dark);
    --bs-toast-border-width: 0;
    --bs-toast-box-shadow: var(--vf-shadow-lg);
}

/* ---- login --------------------------------------------------------------- */
.vf-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(640px 420px at 18% 8%, rgba(90, 87, 201, .22), transparent 65%),
    radial-gradient(560px 400px at 86% 92%, rgba(130, 83, 168, .2), transparent 65%),
    var(--vf-indigo-900);
    padding: 32px 16px;
    box-sizing: border-box;
}

.vf-login-box {
    width: 100%;
    max-width: 400px;
}

.vf-login-brand {
    text-align: center;
    margin-bottom: 26px;
}

.vf-login-brand img {
    height: 26px;
}

.vf-login-brand .vf-login-product {
    margin-top: 12px;
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--vf-white);
}

.vf-login-brand .vf-login-tagline {
    margin-top: 4px;
    font-size: 13px;
    color: var(--vf-on-dark-2);
}

.vf-login-card {
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-shadow-lg);
    padding: 28px;
}

.vf-login-card .form-control {
    font-size: 14px;
    padding: 10px 13px;
    border-color: var(--vf-border-strong);
    border-radius: var(--vf-r-md);
}


.vf-login-card label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
    margin-bottom: 5px;
}

.vf-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-family: var(--vf-font-sans);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: var(--vf-r-md);
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--vf-accent-strong);
    color: var(--vf-white);
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
}

.vf-btn-primary:hover {
    background: var(--vf-indigo-500);
    color: var(--vf-white);
}

.vf-login-foot {
    margin-top: 18px;
    text-align: center;
    font-size: 12.5px;
    color: var(--vf-on-dark-2);
}

.vf-login-foot a {
    color: var(--vf-indigo-300);
    text-decoration: none;
}

.vf-login-foot a:hover {
    color: var(--vf-white);
}

/* ---- misc ----------------------------------------------------------------- */
[x-cloak] {
    display: none !important;
}


.vf-main::-webkit-scrollbar,
.vf-nav-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.vf-main::-webkit-scrollbar-thumb,
.vf-nav-scroll::-webkit-scrollbar-thumb {
    background: var(--vf-border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.vf-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
}

@keyframes vfPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .25;
    }
}

.vf-skeleton {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--vf-indigo-50) 25%, var(--vf-indigo-100) 37%, var(--vf-indigo-50) 63%);
    background-size: 400% 100%;
    animation: vfShimmer 1.4s ease infinite;
}

.vf-skeleton-dark {
    background: linear-gradient(90deg, rgba(255, 255, 255, .08) 25%, rgba(255, 255, 255, .16) 37%, rgba(255, 255, 255, .08) 63%);
    background-size: 400% 100%;
}

/* {% skeleton %} shapes: bars sized like the label / value / title / chart they stand in for */
.vf-sk + .vf-sk {
    margin-top: 18px;
}

.vf-sk-label {
    width: 40%;
    height: 10px;
}

.vf-sk-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.vf-sk-value {
    width: 50%;
    height: 28px;
    margin-top: 14px;
}

.vf-sk-foot {
    width: 65%;
    height: 12px;
    margin-top: 12px;
}

.vf-sk-title {
    width: 160px;
    height: 14px;
}

.vf-sk-sub {
    width: 240px;
    height: 11px;
    margin-top: 6px;
}

.vf-sk-body {
    width: 100%;
    height: 220px;
}

.vf-sk-cell {
    width: 70%;
    height: 12px;
}

.vf-sk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
}

.vf-sk-chip {
    width: 96px;
    height: 26px;
    border-radius: var(--vf-r-pill);
}

.vf-sk-chip:first-child {
    width: 160px;
    height: 16px;
    border-radius: 6px;
}

.vf-sk-line {
    height: 13px;
}

.vf-sk-line + .vf-sk-line {
    margin-top: 8px;
}

.vf-sk-line:nth-child(1) {
    width: 70%;
}

.vf-sk-line:nth-child(2) {
    width: 55%;
}

.vf-sk-line:nth-child(3) {
    width: 62%;
}

.vf-sk-line:nth-child(n+4) {
    width: 48%;
}

/* A region whose content htmx swaps in place (it is the request's source, or its
   hx-indicator): a thin loadbar rides its top edge until the swap lands, unless a
   skeleton is already standing in. Reduced-motion leaves the static track as the cue. */
.vf-swap {
    position: relative;
    counter-reset: vf-sec;
    /* htmx inserts the new fragment above the old one before removing it; scroll anchoring
       follows the old content down, then clamps to the page bottom once it is gone */
    overflow-anchor: none;
}

.vf-swap.htmx-request > * {
    pointer-events: none;
}

.vf-swap.htmx-request:not(:has(> .vf-sk, > .vf-swap-sk))::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 5px;
    border-radius: var(--vf-r-pill);
    background: linear-gradient(90deg, transparent 0%, var(--vf-blue-violet) 40%, var(--vf-violet) 60%, transparent 100%) 0 0 / 60% 100% no-repeat,
    var(--vf-indigo-100);
    animation: vfLoadbar 1.1s linear infinite;
}

@keyframes vfLoadbar {
    0% {
        background-position: -60% 0, 0 0;
    }
    100% {
        background-position: 160% 0, 0 0;
    }
}

/* Optional skeleton inside a .vf-swap: shown during the request, and the siblings
   after it (the outgoing content) hide, so the region reads as "next step loading". */
.vf-swap-sk {
    display: none;
}

.vf-swap.htmx-request .vf-swap-sk {
    display: block;
}

.vf-swap.htmx-request > .vf-swap-sk ~ * {
    display: none;
}

@keyframes vfShimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 1080px) {
    .vf-content {
        padding: 22px 18px 56px;
    }
}

/* ============================================================================
   Audience Hub insight sections (sc-3943): filter popovers, metric matrix,
   age pyramid, provenance tag. Reuses the --vf-* tokens above.
   ============================================================================ */

/* --- insights filter widgets (mockup_v2 Period / Places / Scope cards) --- */
/* row of separate pill widgets; must not clip dropdowns and must stack above
   the panels that follow it. */
/* Current-network pill sits on its own line above the filter row (a long network
   name would otherwise wrap the flex row). */
.vf-insights-network {
    margin-bottom: 12px;
}

.vf-insights-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    overflow: visible;
    position: relative;
    z-index: 20;
}

.vf-fpop {
    display: inline-flex;
}

.vf-fw {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-pill);
    padding: 6px 14px 6px 7px;
    cursor: pointer;
    font-family: var(--vf-font-sans);
    color: var(--vf-fg-1);
    box-shadow: var(--vf-shadow-xs);
    transition: border-color .15s, box-shadow .15s;
}

.vf-fw:hover {
    border-color: var(--vf-indigo-200);
    box-shadow: var(--vf-shadow-sm);
}

.vf-fw-on {
    border-color: var(--vf-indigo-300);
}

.vf-fw-icon {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.vf-fw-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
}

.vf-fw-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-fw-chev {
    font-size: 9px;
    color: var(--vf-fg-faint);
    margin-left: 2px;
}

.vf-fw:focus-within {
    border-color: var(--vf-accent-strong);
    box-shadow: var(--vf-shadow-focus);
}

/* period options rendered as full-width buttons inside the popover */
.vf-fopt-btn {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--vf-font-sans);
    text-align: left;
    color: var(--vf-fg-2);
}

.vf-fopt-on {
    background: var(--vf-surface-2);
    color: var(--vf-indigo-700);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--vf-border-strong);
}

.vf-fpanel {
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 260px;
    max-width: 340px;
    padding: 14px;
}

.vf-fpanel-wide {
    min-width: 300px;
}

/* pills at the right end of a row hang their panel leftward */
.vf-fpanel-end {
    left: auto;
    right: 0;
}

/* Custom-range section inside the Period popover (below the 7/30/90 presets) */
.vf-period-custom {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--vf-border);
}

/* the date field + Apply share the presets' left gutter (the .vf-fopt 6px inset) so all
   four options and the controls line up in one column */
.vf-period-custom-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 6px 0;
}

/* flatpickr wraps the input in a .flatpickr-wrapper once initialised */
.vf-period-custom .flatpickr-wrapper {
    display: block;
    width: 100%;
}

.vf-period-custom .vf-cp-date-input {
    width: 100%;
    font-size: 12.5px;
    padding: 7px 10px;
    cursor: pointer;
    background: var(--vf-surface);
}

/* flatpickr calendar themed to the vf-* palette (Monday-first + DD/MM/YY come from JS);
   token-based so it holds up in light and dark. */
.flatpickr-calendar {
    font-family: var(--vf-font-sans);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    box-shadow: var(--vf-shadow-lg);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-weekday {
    color: var(--vf-fg-1);
    fill: var(--vf-fg-1);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: var(--vf-fg-3);
}

.flatpickr-day {
    color: var(--vf-fg-2);
}

.flatpickr-day:hover {
    background: var(--vf-indigo-50);
    border-color: var(--vf-indigo-50);
}

.flatpickr-day.today {
    border-color: var(--vf-indigo-300);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--vf-accent-strong);
    border-color: var(--vf-accent-strong);
    color: var(--vf-white);
}

/* days between the two endpoints -- override flatpickr's default light band + its
   gap-filling box-shadow so it stays readable in dark mode */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
    background: var(--vf-indigo-50);
    border-color: var(--vf-indigo-50);
    color: var(--vf-fg-1);
    box-shadow: -5px 0 0 var(--vf-indigo-50), 5px 0 0 var(--vf-indigo-50);
}

.flatpickr-day.flatpickr-disabled {
    color: var(--vf-fg-faint);
}

.vf-period-hint {
    font-size: 11.5px;
    color: var(--vf-negative);
}

.vf-period-apply:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Places popover: section label, vertical dimension selector, hint, multi-select */
.vf-pop-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin-bottom: 9px;
}

.vf-pop-label i {
    color: var(--vf-indigo-500);
}

.vf-scopeseg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--vf-indigo-50);
    border-radius: var(--vf-r-md);
    padding: 3px;
}

.vf-scopeseg-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-family: var(--vf-font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vf-fg-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: var(--vf-r-sm);
}

.vf-scopeseg-btn i:first-child {
    color: var(--vf-fg-faint);
    width: 15px;
    text-align: center;
}

.vf-scopeseg-on {
    /* surface-2 (+ ring) sits clearly above the indigo-50 container in both light
       and dark -- plain surface matches the panel too closely on dark to read */
    background: var(--vf-surface-2);
    color: var(--vf-indigo-700);
    font-weight: 600;
    box-shadow: var(--vf-shadow-xs), inset 0 0 0 1px var(--vf-border-strong);
}

.vf-scopeseg-on i:first-child {
    color: var(--vf-indigo-600);
}

.vf-scopeseg-chk {
    margin-left: auto;
    color: var(--vf-indigo-600);
    font-size: 12px;
}

.vf-pop-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vf-fg-3);
    padding: 10px 2px 0;
}

.vf-ms-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 10px;
    background: var(--vf-bg-subtle);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
}

.vf-ms-search i {
    color: var(--vf-fg-faint);
    font-size: 12px;
}

.vf-ms-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: var(--vf-font-sans);
    font-size: 13px;
    color: var(--vf-fg-1);
    min-width: 0;
}

.vf-ms-clear {
    border: none;
    background: none;
    cursor: pointer;
    flex: none;
    font-family: var(--vf-font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--vf-indigo-600);
}

.vf-ms-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 6px;
}

.vf-ms-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--vf-r-sm);
    font-size: 13px;
    color: var(--vf-fg-2);
    cursor: pointer;
}


.vf-ms-opt input {
    accent-color: var(--vf-accent-strong);
}

.vf-ms-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--vf-fg-faint);
}

.vf-fopts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.vf-fopt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vf-fg-2);
    padding: 5px 6px;
    border-radius: var(--vf-r-sm);
    cursor: pointer;
}


.vf-fopt input {
    accent-color: var(--vf-accent-strong);
}

/* --- metric matrix: heat-graded tile grid (mockup_v2 ScopeMetricMatrix) --- */
.vf-mm-scroll {
    overflow-x: auto;
}

.vf-mm-grid {
    display: grid;
    gap: 6px;
    min-width: 620px;
}

.vf-mm-corner {
    display: flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
}

.vf-mm-colhd {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
}

.vf-mm-swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
}

.vf-mm-count-cell {
    background: color-mix(in srgb, var(--vf-indigo-400) 13%, var(--vf-surface));
}

.vf-mm-rowhd {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-mm-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border-radius: var(--vf-r-sm);
    text-align: center;
    color: var(--vf-fg-1);
}

.vf-mm-cell-dark {
    color: var(--vf-white);
}

.vf-mm-val {
    font-family: var(--vf-font-mono);
    font-weight: 600;
    font-size: 13px;
}

.vf-mm-idx {
    font-family: var(--vf-font-mono);
    font-size: 9.5px;
    opacity: .7;
    margin-top: 1px;
}

.vf-mm-total-hd {
    border-top: 2px solid var(--vf-border);
    padding-top: 6px;
    margin-top: 2px;
    font-weight: 700;
}

.vf-mm-total-cell {
    border-top: 2px solid var(--vf-border);
    margin-top: 2px;
    background: var(--vf-surface-2) !important;
    border-radius: 0;
}

/* --- executive network summary strip --- */
.vf-netstat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.vf-netstat:empty {
    display: none;
}

/* --- provenance / resolution tag --- */
.vf-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--vf-fg-3);
    background: var(--vf-surface-2);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-pill);
    padding: 3px 10px;
}

/* --- age & gender pyramid (mockup_v2 layout) --- */
.vf-pyramid {
    padding: 6px 4px 2px;
}

.vf-pyramid-head,
.vf-pyramid-row,
.vf-pyramid-foot {
    display: grid;
    grid-template-columns: 1fr 96px 1fr 56px;
    align-items: center;
}

.vf-pyramid-head {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vf-border);
}

.vf-pyramid-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--vf-border);
}

.vf-pyramid-row {
    padding: 4px 0;
}

.vf-pyramid-side {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vf-pyramid-side-f {
    justify-content: flex-end;
    color: var(--vf-female);
}

.vf-pyramid-side-m {
    justify-content: flex-start;
    color: var(--vf-male);
}

.vf-pyramid-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.vf-pyramid-cap {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
}

.vf-pyramid-band {
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-1);
    font-variant-numeric: tabular-nums;
}

.vf-pyramid-left,
.vf-pyramid-right {
    display: flex;
    align-items: center;
    gap: 9px;
}

.vf-pyramid-pct {
    width: 48px;
    flex: none;
    font-family: var(--vf-font-mono);
    font-size: 12px;
    color: var(--vf-fg-2);
}

.vf-pyramid-left .vf-pyramid-pct {
    text-align: right;
}

.vf-pyramid-track {
    flex: 1;
    display: flex;
}

.vf-pyramid-left .vf-pyramid-track {
    justify-content: flex-end;
}

.vf-pyramid-bar {
    height: 20px;
    transition: width .6s var(--vf-ease);
}

.vf-pyramid-bar-f {
    background: var(--vf-female);
    border-radius: 5px 0 0 5px;
}

.vf-pyramid-bar-m {
    background: var(--vf-male);
    border-radius: 0 5px 5px 0;
}

.vf-pyramid-tot {
    text-align: right;
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vf-fg-1);
}

/* ============================================================================
   Audience Hub Executive Overview (sc-3943): grouped KPI strip, Top Places /
   Main demographic cards, executive synthesis, recommended-analysis rows.
   ============================================================================ */

/* clickable KPI cards */
a.vf-kpi-link {
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

a.vf-kpi-link:hover {
    border-color: var(--vf-indigo-200);
    box-shadow: var(--vf-shadow-sm);
}

/* KPI card caption + secondary total line */
.vf-kpi-cap {
    font-size: 11px;
    color: var(--vf-fg-3);
    margin-top: 3px;
}

.vf-kpi-total {
    font-size: 11.5px;
    color: var(--vf-fg-faint);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.vf-kpi-cmplbl {
    font-size: 11px;
    color: var(--vf-fg-faint);
    margin-top: 5px;
}

/* Top Places card rows */
.vf-tp-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.vf-tp-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid var(--vf-border);
    font-size: 12.5px;
}

.vf-tp-row:last-child {
    border-bottom: none;
}

.vf-tp-kind {
    color: var(--vf-fg-3);
    flex: none;
}

.vf-tp-name {
    color: var(--vf-fg-1);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* executive synthesis */
.vf-synth-headline {
    font-size: 15px;
    font-weight: 600;
    color: var(--vf-fg-1);
    line-height: 1.5;
    margin-bottom: 12px;
}

.vf-synth-insights {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vf-synth-insight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vf-synth-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vf-fg-2);
}

.vf-synth-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.vf-synth-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vf-indigo-700);
    background: var(--vf-indigo-50);
    border: 1px solid var(--vf-indigo-100);
    border-radius: var(--vf-r-pill);
    padding: 6px 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.vf-synth-chip:hover {
    background: var(--vf-indigo-100);
    border-color: var(--vf-indigo-200);
}

.vf-synth-chip i {
    color: var(--vf-indigo-400);
    font-size: 11px;
}

/* recommended-analysis cards */
.vf-rec-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.vf-rec-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.vf-rec-row:hover {
    border-color: var(--vf-indigo-200);
    box-shadow: var(--vf-shadow-md);
}


.vf-rec-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vf-rec-body {
    flex: 1;
    min-width: 0;
}

.vf-rec-dest {
    font-size: 14px;
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-rec-insight {
    font-size: 13px;
    color: var(--vf-fg-3);
    line-height: 1.45;
}

.vf-rec-arrow {
    color: var(--vf-fg-faint);
    font-size: 13px;
}

.vf-rec-explore {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-3);
    white-space: nowrap;
}

.vf-rec-row:hover .vf-rec-explore,
.vf-rec-row:hover .vf-rec-arrow {
    color: var(--vf-indigo-600);
}

/* ============================================================================
   Time Trends — Weekly pattern heatmap (mockup_v2 WeekHeatmapTotals):
   days x hours, shaded by the metric's ramp colour, with marginal rails.
   ============================================================================ */
.vf-wh-scroll {
    overflow-x: auto;
}

.vf-wh {
    min-width: 600px;
}

.vf-wh-row {
    display: grid;
    gap: 3px;
    margin-top: 3px;
    align-items: center;
}

.vf-wh-axis {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--vf-fg-3);
    text-align: center;
}

.vf-wh-axis-rail {
    text-align: right;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vf-wh-rail-lbl {
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
    justify-content: flex-end;
}

.vf-wh-grand {
    border: 1.5px solid var(--vf-indigo-300);
    background: var(--vf-surface);
}

.vf-wh-grand .vf-wh-val {
    color: var(--vf-fg-1);
    font-weight: 700;
}

.vf-wh-daylbl {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--vf-fg-3);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
}

.vf-wh-cell {
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vf-wh-val {
    font-size: 12.5px;
    font-family: var(--vf-font-mono);
    font-weight: 600;
    color: var(--vf-fg-2);
    line-height: 1;
}

.vf-wh-dark, .vf-wh-dark .vf-wh-val {
    color: var(--vf-white);
}

.vf-wh-rail {
    background-clip: padding-box;
}

.vf-wh-rail .vf-wh-val {
    font-size: 11.5px;
}

/* "Audience over the period" hover tooltip */
.vf-area-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    min-width: 180px;
    padding: 10px 12px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    box-shadow: var(--vf-shadow-md);
}

.vf-area-tip-day {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vf-fg-1);
    margin-bottom: 7px;
}

.vf-area-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    margin-top: 3px;
}

.vf-area-tip-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
}

.vf-area-tip-name {
    color: var(--vf-fg-2);
}

.vf-area-tip-val {
    margin-left: auto;
    font-family: var(--vf-font-mono);
    font-weight: 600;
    color: var(--vf-fg-1);
}

/* ============================================================================
   Data Confidence (module 01). Reuses the --vf-* tokens, .vf-panel, .vf-row-2,
   .vf-table and .vf-legend above; only the bespoke score hero, grade bar and
   readiness/completeness cards are styled here.
   ============================================================================ */
.vf-tone-negative {
    color: var(--vf-negative);
}

.vf-dc-min0 {
    flex: 1;
    min-width: 0;
}

/* hero */
.vf-dc-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    position: relative;
    margin-bottom: 8px;
}

.vf-dc-hero-report {
    position: absolute;
    top: 16px;
    right: 16px;
    gap: 6px;
}

.vf-dc-hero-score {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vf-dc-band {
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.01em;
    margin-top: 2px;
}

.vf-dc-hero-note {
    font-size: 12.5px;
    color: var(--vf-fg-3);
    margin: 6px 0 0;
    max-width: 260px;
    line-height: 1.5;
}

.vf-dc-hero-divider {
    width: 1px;
    align-self: stretch;
    background: var(--vf-border);
}

.vf-dc-minor {
    flex: 1;
    display: flex;
    gap: 22px;
    min-width: 220px;
}

.vf-dc-minor-item {
    flex: 1;
    min-width: 0;
}

.vf-dc-minor-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--vf-fg-3);
    margin-bottom: 6px;
    /* reserve both lines so a label that wraps doesn't push its score and bar
       out of line with the neighbouring items */
    line-height: 1.35;
    min-height: 2.7em;
}

.vf-dc-minor-val {
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.vf-dc-minor-den {
    font-size: 13px;
    color: var(--vf-fg-faint);
    font-weight: 600;
}

/* .vf-dc-cfg-foot, tightened to sit under a hero bar */
.vf-dc-minor-note {
    font-size: 11.5px;
    margin-top: 5px;
}

.vf-dc-hero-op {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vf-dc-op-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vf-dc-weight {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--vf-positive);
    background: var(--vf-positive-bg);
    padding: 2px 8px;
    border-radius: var(--vf-r-pill);
}

.vf-dc-loss {
    flex-basis: 100%;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 0;
    padding: 12px 14px;
    border-radius: var(--vf-r-md);
    /* gentle warm wash over the surface (soft cream in light, subtle warm-dark in
       dark) rather than the solid warning tint, which reads muddy at banner size */
    background: color-mix(in srgb, var(--vf-warning) 13%, var(--vf-surface));
    color: var(--vf-fg-2);
    font-size: 13px;
    line-height: 1.55;
}

.vf-dc-loss i {
    color: var(--vf-warning);
    margin-top: 2px;
    flex: none;
}

.vf-dc-loss b {
    color: var(--vf-fg-1);
}

@media (max-width: 900px) {
    .vf-dc-hero-divider {
        display: none;
    }

    .vf-dc-minor {
        flex-basis: 100%;
    }
}

/* improvement recommendations */
/* recommendations — set apart as the page's closing "take action" block. Same
   surface as every other panel; the gradient top strip, gradient icon badge and
   eyebrow header carry the distinction rather than a different fill. */
.vf-dc-advice {
    position: relative;
    overflow: hidden;
    margin-top: 34px;
    padding: 24px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    background: var(--vf-surface);
    box-shadow: var(--vf-shadow-sm);
}

/* gradient strip across the top ties it to the brand */
.vf-dc-advice::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--vf-grad-violet);
}

.vf-dc-advice-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.vf-dc-advice-icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vf-grad-violet);
    color: var(--vf-white);
    font-size: 18px;
    box-shadow: var(--vf-shadow-sm);
}

.vf-dc-advice-eyebrow {
    margin-bottom: 2px;
}

.vf-dc-advice-title {
    font-family: var(--vf-font-sans);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vf-fg-1);
}

.vf-dc-advice-sub {
    margin: 4px 0 0;
    max-width: 780px;
    font-size: 13px;
    color: var(--vf-fg-2);
}

.vf-dc-recs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
}

.vf-dc-rec {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--vf-border);
    border-left: 3px solid var(--rec-accent);
    border-radius: var(--vf-r-md);
    /* base surface (not surface-2) so the surface-2 screen chips read as raised
       tiles against it -- on a surface-2 card they'd blend in, badly in dark mode */
    background: var(--vf-surface);
}

/* tone drives the spine, icon badge and count pill from one accent pair */
.vf-dc-rec-positive {
    --rec-accent: var(--vf-positive);
    --rec-accent-bg: var(--vf-positive-bg);
}

.vf-dc-rec-attention {
    --rec-accent: var(--vf-warning);
    --rec-accent-bg: var(--vf-warning-bg);
}

.vf-dc-rec-negative {
    --rec-accent: var(--vf-negative);
    --rec-accent-bg: var(--vf-negative-bg);
}

.vf-dc-rec-icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rec-accent-bg);
    color: var(--rec-accent);
    font-size: 14px;
}

.vf-dc-rec-body {
    flex: 1;
    min-width: 0;
}

.vf-dc-rec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--vf-fg-1);
}

.vf-dc-rec-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--rec-accent);
    background: var(--rec-accent-bg);
    border-radius: var(--vf-r-pill);
    padding: 2px 9px;
}

.vf-dc-rec-detail {
    margin: 6px 0 10px;
    color: var(--vf-fg-2);
    font-size: 13px;
    line-height: 1.45;
}

.vf-dc-rec-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vf-dc-rec-box {
    /* stronger border + legible text + a touch of lift so each screen reads as a
       distinct, tappable tile (the plain .vf-tag look was too faint, esp. on dark) */
    color: var(--vf-fg-2);
    border-color: var(--vf-border-strong);
    box-shadow: var(--vf-shadow-xs);
    text-decoration: none;
    transition: border-color 0.15s var(--vf-ease), color 0.15s var(--vf-ease),
    box-shadow 0.15s var(--vf-ease);
}

.vf-dc-rec-box:hover {
    border-color: var(--rec-accent);
    color: var(--vf-fg-1);
    box-shadow: var(--vf-shadow-sm);
}

.vf-dc-rec-meta {
    color: var(--vf-fg-faint);
    font-weight: 500;
}

.vf-dc-rec-ext {
    font-size: 9px;
    color: var(--vf-fg-faint);
}

/* "Show N more" disclosure when a recommendation has many screens */
.vf-dc-rec-more {
    margin-top: 8px;
}

.vf-dc-rec-more > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    color: var(--rec-accent);
    list-style: none;
}

.vf-dc-rec-more > summary::-webkit-details-marker {
    display: none;
}

.vf-dc-rec-more > summary:focus-visible {
    outline: 2px solid var(--rec-accent);
    outline-offset: 2px;
    border-radius: var(--vf-r-sm);
}

.vf-dc-rec-morecaret {
    font-size: 9px;
    transition: transform 0.15s var(--vf-ease);
}

.vf-dc-rec-more[open] .vf-dc-rec-morecaret {
    transform: rotate(90deg);
}

.vf-dc-rec-more[open] > summary {
    margin-bottom: 8px;
}

.vf-dc-rec-more-hide {
    display: none;
}

.vf-dc-rec-more[open] .vf-dc-rec-more-show {
    display: none;
}

.vf-dc-rec-more[open] .vf-dc-rec-more-hide {
    display: inline;
}

/* top alert types: ranked list, label + count over a proportional bar */
.vf-dc-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.vf-dc-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.vf-dc-alert-rank {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vf-indigo-100);
    color: var(--vf-indigo-600);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vf-dc-alert-main {
    min-width: 0;
}

.vf-dc-alert-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.vf-dc-alert-label {
    color: var(--vf-fg-1);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vf-dc-alert-count {
    color: var(--vf-fg-3);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* capability checks */
.vf-dc-check {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--vf-border);
}

.vf-dc-check:first-of-type {
    border-top: none;
}

.vf-dc-check-icon {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.vf-dc-check-icon.vf-tone-positive {
    background: var(--vf-positive-bg);
}

.vf-dc-check-icon.vf-tone-attention {
    background: var(--vf-warning-bg);
}

.vf-dc-check-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vf-dc-check-title {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--vf-fg-1);
}

.vf-dc-check-note {
    font-size: 12.5px;
    color: var(--vf-fg-3);
    line-height: 1.5;
    margin-top: 3px;
}

/* stacked rows shared by the extrapolation cards (_ex_row.html) */
.vf-dc-vrc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
}

/* rule only between rows, robust to whatever precedes the list */
.vf-dc-vrc + .vf-dc-vrc {
    border-top: 1px solid var(--vf-border);
}

.vf-dc-vrc-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--vf-fg-1);
}

/* drills to the network's Remote Configurations on the main site */
.vf-dc-vrc-link {
    margin-top: 12px;
}

/* plain-language translation of the active VRCs */
.vf-dc-entitlement-summary {
    margin: 0;
    padding: 0 0 12px;
    list-style: none;
    border-bottom: 1px solid var(--vf-border);
}

.vf-dc-entitlement-summary li {
    position: relative;
    padding-left: 18px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vf-fg-2);
}

.vf-dc-entitlement-summary li:first-child {
    margin-top: 0;
}

.vf-dc-entitlement-summary li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vf-positive);
}

/* metadata completeness */
.vf-dc-cmp-big {
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -.02em;
    color: var(--vf-fg-1);
}

.vf-dc-cmp-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-faint);
    margin-left: 7px;
}

.vf-dc-miss {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.vf-dc-miss-lbl {
    flex: 0 0 120px;
    font-size: 12.5px;
    color: var(--vf-fg-2);
}

.vf-dc-miss-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--vf-indigo-100);
    overflow: hidden;
}

.vf-dc-miss-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.vf-dc-miss-count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
}

/* site / location capability checks appended below the completeness bars */
.vf-dc-cmp-checks {
    margin-top: 16px;
    border-top: 1px solid var(--vf-border);
}

/* configuration grade */
.vf-dc-cfg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.vf-dc-cfg-score {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.vf-dc-cfg-num {
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -.02em;
    color: var(--vf-fg-1);
}

.vf-dc-cfg-den {
    font-size: 15px;
    color: var(--vf-fg-faint);
}

.vf-dc-cfg-note {
    font-size: 12.5px;
    color: var(--vf-fg-3);
    max-width: 340px;
    line-height: 1.45;
}

.vf-dc-cfg-bar {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 16px;
}

.vf-dc-cfg-bar > span {
    display: block;
}

.vf-dc-cfg-foot {
    font-size: 12px;
    color: var(--vf-fg-faint);
    margin: 12px 0 0;
}

/* alerts caption + tips sit as one block, set a little further below the list */
.vf-dc-alerts-foot {
    margin-top: 24px;
}

/* operating: headline block + 30-day delivery trend */
.vf-dc-op-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.vf-dc-trend-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vf-dc-trend-lbl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
}

/* extrapolation + operating summaries */
.vf-dc-ex-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13.5px;
    color: var(--vf-fg-2);
    margin-bottom: 16px;
}

.vf-dc-ex-summary b {
    color: var(--vf-fg-1);
    font-weight: 700;
    font-size: 18px;
}

.vf-dc-dot {
    color: var(--vf-border-strong);
}

.vf-dc-ex-big {
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -.02em;
    line-height: 1;
}

.vf-dc-ex-pct {
    font-size: 17px;
    color: var(--vf-fg-faint);
    margin-left: 2px;
}

.vf-dc-ex-sub {
    font-size: 12.5px;
    color: var(--vf-fg-3);
    margin: 8px 0 12px;
}

/* standalone panels in the extrapolation section, on the same 18px rhythm as .vf-row-2 */
.vf-dc-ex-panel {
    margin-bottom: 18px;
}

/* .vf-dc-trend-lbl as a subsection heading inside a card */
.vf-dc-ex-hd {
    margin: 16px 0 4px;
}

.vf-dc-ex-val {
    font-weight: 700;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

/* .vf-dc-placeholder as a settled "all good" note rather than a pending one */
.vf-dc-ex-ok {
    border-style: solid;
}

.vf-dc-ex-ok i {
    color: var(--vf-positive);
}

/* honest placeholder */
.vf-dc-placeholder {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--vf-r-md);
    background: var(--vf-surface-2);
    border: 1px dashed var(--vf-border-strong);
    font-size: 13px;
    color: var(--vf-fg-3);
    line-height: 1.5;
}

.vf-dc-placeholder i {
    color: var(--vf-indigo-300);
    margin-top: 2px;
    flex: none;
}

/* ============================================================================
   BENCHMARKING (Advanced Analytics) — global-KPI comparison strip + per-
   placement cards. Mirrors mockup_v3 BenchmarkArea, on the shared vf-* tokens.
   ========================================================================== */

.vf-bmk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--vf-violet);
    background: var(--vf-indigo-50);
    border: 1px solid var(--vf-indigo-100);
    border-radius: var(--vf-r-pill);
    padding: 4px 10px;
}

/* Section 1 — two-row comparison strip (scrolls horizontally when narrow) */
.vf-bmk-strip-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.vf-bmk-strip {
    min-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vf-bmk-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(var(--bmk-cols, 8), minmax(120px, 1fr));
}

.vf-bmk-kcard {
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    padding: 13px 14px;
    /* head / value / foot share the row's tracks, so values align across cards
       whose labels wrap to a different number of lines */
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    box-shadow: var(--vf-shadow-sm);
}

/* accent bar (left inset) layered over the card's drop-shadow lift */
.vf-bmk-kcard-bench {
    box-shadow: inset 3px 0 0 var(--vf-border-strong), var(--vf-shadow-sm);
}

.vf-bmk-kcard-you {
    box-shadow: inset 3px 0 0 var(--vf-indigo-400), var(--vf-shadow-sm);
}

.vf-bmk-khead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.vf-bmk-klabel {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--vf-indigo-700);
    line-height: 1.25;
    /* break a long single-word label (e.g. "Impressions") onto a second line in a
       narrow card instead of overflowing under the You/Peer tag */
    overflow-wrap: anywhere;
}

/* card footer: the unit on the left, the You/Peer tag anchored bottom-right */
.vf-bmk-kfoot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.vf-bmk-kicon {
    color: var(--vf-indigo-400);
    font-size: 16px;
}

/* which row a card belongs to -- your network vs the peer benchmark */
.vf-bmk-tag {
    flex: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--vf-r-pill);
    line-height: 1.5;
}

.vf-bmk-tag-you {
    color: var(--vf-white);
    background: var(--vf-indigo-500);
}

.vf-bmk-tag-bench {
    color: var(--vf-fg-3);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
}

.vf-bmk-kval {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -.02em;
    color: var(--vf-fg-1);
    line-height: 1;
    font-feature-settings: 'tnum' 1;
    margin-bottom: 6px;
}

.vf-bmk-kunit {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--vf-fg-3);
    line-height: 1.3;
}

/* Compass-derived value that came back empty: dashed underline signals the hint */
.vf-bmk-na {
    cursor: help;
    color: var(--vf-fg-faint);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.vf-bmk-badgecell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
}

.vf-bmk-badgeicon {
    color: var(--vf-fg-2);
    font-size: 16px;
}

/* Prominent peer-scope banner above both benchmark sections */
.vf-bmk-scope {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    margin: 0 0 22px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-left: 4px solid var(--vf-indigo-500);
    border-radius: var(--vf-r-md);
    box-shadow: var(--vf-shadow-sm);
}

.vf-bmk-scope-icon {
    font-size: 18px;
    color: var(--vf-indigo-500);
    flex: none;
}

.vf-bmk-scope-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vf-bmk-scope-head {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.vf-bmk-scope-lead {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vf-fg-2);
}

.vf-bmk-scope-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--vf-white);
    background: var(--vf-indigo-600);
    border-radius: var(--vf-r-pill);
    padding: 3px 12px;
}

.vf-bmk-scope-sub {
    font-size: 12px;
    color: var(--vf-fg-3);
    line-height: 1.5;
}

/* delta pill — white text on a magnitude-ramped green (over) / red (under)
   background (mockup bmkDeltaColor): neutral within ±10%, then three tiers. */
.vf-bmk-delta {
    display: inline-block;
    color: var(--vf-white);
    font-family: var(--vf-font-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .01em;
    padding: 2px 9px;
    border-radius: var(--vf-r-pill);
    white-space: nowrap;
    line-height: 1.5;
}

.vf-bmk-delta-neutral {
    background: var(--vf-fg-3);
}

.vf-bmk-delta-pos1 {
    background: var(--vf-positive);
}

.vf-bmk-delta-pos2 {
    background: color-mix(in srgb, var(--vf-positive) 80%, black);
}

.vf-bmk-delta-pos3 {
    background: color-mix(in srgb, var(--vf-positive) 60%, black);
}

.vf-bmk-delta-neg1 {
    background: var(--vf-negative);
}

.vf-bmk-delta-neg2 {
    background: color-mix(in srgb, var(--vf-negative) 82%, black);
}

.vf-bmk-delta-neg3 {
    background: color-mix(in srgb, var(--vf-negative) 64%, black);
}

/* Section 2 — per-location-type cards */
.vf-bmk-locgrid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.vf-bmk-card {
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-shadow-sm);
    padding: 18px 20px;
}

.vf-bmk-cardhead {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--vf-border);
}

.vf-bmk-cardicon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--vf-r-md);
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vf-bmk-cardtitle {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -.01em;
    color: var(--vf-fg-1);
    line-height: 1.15;
    min-width: 0;
}

.vf-bmk-cardavg {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.vf-bmk-avglbl {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
}

.vf-bmk-mlist {
    display: flex;
    flex-direction: column;
}

.vf-bmk-mrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--vf-bg-subtle);
}

.vf-bmk-mrow:last-child {
    border-bottom: none;
}

.vf-bmk-mname {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
}

.vf-bmk-mname i {
    color: var(--vf-fg-faint);
    font-size: 12px;
}

.vf-bmk-mright {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    flex: none;
}

.vf-bmk-mval {
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vf-fg-1);
}

.vf-bmk-mpeer {
    font-family: var(--vf-font-mono);
    font-size: 11px;
    color: var(--vf-fg-faint);
}

/* ============================================================================
   Campaign Planner (module 03) — guided builder wizard, review-inventory
   workspace and optimization results. All tokens via --vf-*.
   ============================================================================ */

/* ---- wizard stepper ---- */
.vf-cp-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 20px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.vf-cp-step {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 150px;
    /* reset: reached steps render as <a>/<button> so they can be jumped to */
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    color: inherit;
}

.vf-cp-step-link {
    cursor: pointer;
}

.vf-cp-step-link:hover .vf-cp-step-marker {
    border-color: var(--vf-indigo-400);
    color: var(--vf-indigo-600);
}

.vf-cp-step-link:hover .vf-cp-step-title {
    color: var(--vf-indigo-700);
}

.vf-cp-step-link:focus-visible {
    outline: 2px solid var(--vf-indigo-400);
    outline-offset: 3px;
    border-radius: var(--vf-r-sm);
}

.vf-cp-step-marker {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--vf-surface);
    border: 2px solid var(--vf-border-strong);
    color: var(--vf-fg-faint);
    transition: all .18s var(--vf-ease);
}


.vf-cp-step-done .vf-cp-step-marker {
    background: var(--vf-indigo-100);
    border-color: var(--vf-indigo-300);
    color: var(--vf-indigo-600);
}

.vf-cp-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vf-cp-step-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
    white-space: nowrap;
}

.vf-cp-step-on .vf-cp-step-title,
.vf-cp-step-done .vf-cp-step-title {
    color: var(--vf-fg-1);
}

.vf-cp-step-sub {
    font-size: 11px;
    color: var(--vf-fg-faint);
    white-space: nowrap;
}

.vf-cp-step-line {
    flex: 1;
    height: 2px;
    min-width: 20px;
    margin: 0 4px;
    background: var(--vf-border-strong);
    border-radius: 2px;
}

.vf-cp-step-done .vf-cp-step-line {
    background: var(--vf-indigo-300);
}

.vf-cp-step-off {
    opacity: .5;
}

/* ---- step 1: start chooser + describe-your-campaign brief ----
   (chooser cards reuse the objective-card family: .vf-cp-obj-grid / .vf-cp-obj) */
.vf-cp-start-cards {
    gap: 16px;
    margin-top: 18px;
}

.vf-cp-start-card {
    gap: 8px;
    padding: 20px;
}

.vf-cp-start-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--vf-indigo-50);
    color: var(--vf-indigo-600);
    font-size: 15px;
}

.vf-cp-start-cta {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-indigo-600);
}

.vf-cpb-switch {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--vf-indigo-600);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.vf-cpb-log:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.vf-cpb-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.vf-cpb-box {
    flex: 1;
}

/* colors/border/placeholder/disabled come from the shared .vf-chat-input rules;
   block display drops the inline descender gap that misaligned the Send button */
.vf-cpb-composer textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    resize: vertical;
}

.vf-cpb-hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--vf-fg-2);
}

.vf-cpb-hint i {
    color: var(--vf-indigo-400);
}

.vf-cpb-try {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.vf-cpb-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.vf-cpb-summary .vf-cp-chip i {
    color: var(--vf-positive);
}

.vf-cpb-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-bg-subtle);
}

/* an answered question's widget/recap disappears: only the newest turn keeps one */
.vf-cpb-log .vf-cpb-widget,
.vf-cpb-log .vf-cpb-recap {
    display: none;
}

.vf-cpb-log > .vf-chat-row:last-child .vf-cpb-widget,
.vf-cpb-log > .vf-chat-row:last-child .vf-cpb-recap {
    display: flex;
}

.vf-cpb-recap {
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
}

/* the completed brief retires the free-text composer: edits go through
   "Change something" (the form stays in the DOM — widgets submit through it,
   and it comes back by itself if an edit re-opens a question) */
.vf-cpb-log:has(> .vf-chat-row:last-child .vf-cpb-recap) + .vf-cpb-composer {
    display: none;
}

.vf-cpb-widget .vf-btn-accent,
.vf-cpb-recap .vf-btn-accent {
    font-size: 13px;
    padding: 6px 12px;
}

.vf-cpb-recap-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vf-cpb-recap-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.vf-cpb-recap-label {
    font-weight: 700;
    color: var(--vf-fg-1);
}

.vf-cpb-recap-value {
    color: var(--vf-fg-1);
}

.vf-cpb-recap-src {
    margin-left: auto;
    font-size: 11px;
    color: var(--vf-fg-3);
}

.vf-cpb-widget-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.vf-cpb-widget-hint {
    font-size: 12px;
    color: var(--vf-fg-2);
}

@media (max-width: 900px) {
    .vf-cp-start-cards {
        grid-template-columns: 1fr;
    }
}

/* ---- step 1: guided builder ---- */
.vf-cp-titleblock,
.vf-cp-compare,
.vf-cp-act-kpis,
.vf-cp-hmcard,
.vf-cp-selected {
    margin-bottom: 18px;
}

.vf-cp-note i,
.vf-cp-invnote i,
.vf-cp-site-why i,
.vf-cp-inv-cap i,
.vf-cp-hm-foot i {
    color: var(--vf-indigo-400);
}

.vf-cp-goal,
.vf-cp-start,
.vf-cp-brief {
    margin-bottom: 20px;
}

.vf-cp-goal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vf-indigo-400);
}

.vf-cp-goal-title {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--vf-fg-1);
    margin: 6px 0 2px;
}

.vf-cp-goal-sub {
    font-size: 13.5px;
    color: var(--vf-fg-3);
    margin: 0 0 20px;
}

.vf-cp-name {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
}

.vf-cp-name i {
    color: var(--vf-fg-faint);
    font-size: 12px;
}

.vf-cp-name-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--vf-font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--vf-fg-1);
    padding: 11px 0;
}

.vf-cp-name-input::placeholder {
    font-weight: 400;
    color: var(--vf-fg-faint);
}

.vf-cp-name-hint {
    font-size: 12px;
    color: var(--vf-fg-faint);
    margin: 7px 0 0;
}

/* Step 1 form: two-column grid of labelled field groups */
.vf-cp-goal-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 24px 40px;
}

@media (max-width: 900px) {
    .vf-cp-goal-grid {
        grid-template-columns: 1fr;
    }
}

.vf-cp-goal-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.vf-cp-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin: 0 0 10px;
}

.vf-cp-obj-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 720px) {
    .vf-cp-obj-grid {
        grid-template-columns: 1fr;
    }
}

.vf-cp-obj {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 16px;
    border-radius: var(--vf-r-md);
    background: var(--vf-surface-2);
    border: 1.5px solid var(--vf-border);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.vf-cp-obj:hover {
    border-color: var(--vf-indigo-200);
}

.vf-cp-obj-disabled {
    cursor: not-allowed;
    opacity: .55;
}

.vf-cp-obj-disabled:hover {
    border-color: var(--vf-border);
}

.vf-cp-obj-soon {
    font-family: var(--vf-font-display);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-3);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-sm);
    padding: 1px 5px;
    vertical-align: middle;
}

.vf-cp-obj-on {
    border-color: var(--vf-accent-strong);
    background: var(--vf-indigo-50);
    box-shadow: var(--vf-shadow-xs);
}

.vf-cp-obj-icon {
    font-size: 16px;
    color: var(--vf-indigo-400);
}

.vf-cp-obj-on .vf-cp-obj-icon {
    color: var(--vf-indigo-600);
}

.vf-cp-obj-name {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--vf-fg-1);
}

.vf-cp-obj-desc {
    font-size: 12px;
    color: var(--vf-fg-3);
    line-height: 1.4;
}

.vf-cp-seg {
    margin-bottom: 4px;
}

.vf-cp-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vf-fg-3);
    margin: 12px 0 0;
}


.vf-cp-audience {
    display: flex;
    gap: 16px;
    margin-top: 14px;
}

.vf-cp-audience-ages {
    flex: 1;
    min-width: 0;
}

.vf-cp-agechips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vf-cp-amount {
    display: inline-flex;
    align-items: center;
    flex: 1 1 180px;
    min-width: 0;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    padding: 0 12px;
    max-width: 320px;
}


.vf-cp-amount-affix {
    font-size: 14px;
    font-weight: 600;
    color: var(--vf-fg-faint);
}

.vf-cp-amount-suffix {
    font-size: 12.5px;
    font-weight: 500;
}

.vf-cp-amount-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--vf-font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--vf-fg-1);
    padding: 10px 8px;
}

.vf-cp-dates {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vf-cp-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.vf-cp-amount-sm {
    flex: 0 1 170px;
}

.vf-cp-sov {
    display: block;
    margin-top: 12px;
}

.vf-cp-range {
    width: 100%;
    margin: 8px 0 4px;
    accent-color: var(--vf-indigo-600);
}

.vf-cpb-sov {
    flex: 1 1 220px;
    margin-top: 0;
}

.vf-cp-date-input {
    font-family: var(--vf-font-sans);
    font-size: 13.5px;
    color: var(--vf-fg-1);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    padding: 8px 11px;
    outline: none;
    cursor: pointer;
}


.vf-cp-date-arrow {
    color: var(--vf-fg-faint);
    font-size: 12px;
}

.vf-cp-duration {
    font-size: 12.5px;
    color: var(--vf-fg-3);
    margin-top: 10px;
}

.vf-cp-duration b {
    color: var(--vf-fg-1);
}

.vf-cp-dim {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--vf-border);
}

.vf-cp-dim-cap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vf-indigo-400);
    margin-bottom: 12px;
}

.vf-cp-dim-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 720px) {
    .vf-cp-dim-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.vf-cp-dim-cell {
    background: var(--vf-surface);
    border: 1px solid var(--vf-indigo-100);
    border-radius: var(--vf-r-md);
    padding: 14px 16px;
}

.vf-cp-dim-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-fg-3);
    line-height: 1.3;
}

.vf-cp-dim-value {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.02em;
    color: var(--vf-indigo-700);
    margin-top: 8px;
    font-feature-settings: 'tnum' 1;
}

.vf-cp-dim-note {
    font-size: 11px;
    color: var(--vf-fg-faint);
    margin-top: 4px;
}

.vf-cp-goal-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.vf-cp-generate {
    width: auto;
}

/* ---- saved plans library ---- */
.vf-cp-netpick {
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 300px;
    padding: 6px;
}

.vf-cp-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
    gap: 14px;
}

.vf-cp-saved {
    position: relative;
    padding: 0;
    transition: box-shadow .15s;
}

.vf-cp-saved:hover,
.vf-cp-saved:focus-within {
    box-shadow: var(--vf-shadow-md);
}

.vf-cp-saved-link {
    display: block;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.vf-cp-saved-del {
    position: absolute;
    top: 8px;
    right: 8px;
}

.vf-cp-saved .vf-ci-del {
    width: 32px;
    height: 32px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    box-shadow: var(--vf-shadow-md);
}

.vf-cp-saved-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vf-cp-saved-name {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--vf-fg-1);
    line-height: 1.3;
}

.vf-cp-saved-meta {
    font-size: 12.5px;
    color: var(--vf-fg-3);
    margin-top: 10px;
}

.vf-cp-saved-dates {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
    margin-top: 6px;
}

.vf-cp-saved-dates i {
    color: var(--vf-indigo-400);
    margin-right: 4px;
}

.vf-cp-saved-updated {
    font-size: 11.5px;
    color: var(--vf-fg-faint);
    margin-top: 6px;
}

.vf-cp-saved-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--vf-border);
}

.vf-cp-saved-stat {
    display: block;
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--vf-fg-1);
    font-feature-settings: 'tnum' 1;
}

.vf-cp-saved-lbl {
    display: block;
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin-top: 3px;
}

.vf-cp-saved-places {
    margin-left: 10px;
}

/* ---- goal summary bar (steps 2 & 3) ---- */
.vf-cp-goalbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.vf-cp-goalbar-icon {
    color: var(--vf-indigo-500);
}

.vf-cp-goalbar-name {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--vf-fg-1);
    margin-right: 4px;
}

.vf-cp-goalbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-1);
    background: var(--vf-indigo-50);
    border-radius: var(--vf-r-pill);
    padding: 5px 12px;
}

.vf-cp-goalbar-chip i {
    color: var(--vf-indigo-400);
    font-size: 12px;
}

.vf-cp-goalbar-edit {
    margin-left: auto;
}

/* ---- step title block ---- */

.vf-cp-h2 {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.02em;
    color: var(--vf-fg-1);
    margin: 6px 0 0;
}

.vf-cp-titleblock-sub {
    font-size: 14px;
    color: var(--vf-fg-3);
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 680px;
}

/* ---- live forecast banner ---- */
/* dark forecast surface: the step-2 banner and the step-4 hero card */
.vf-cp-forecast,
.vf-cp-act-fc-hero {
    background: linear-gradient(120deg, var(--vf-indigo-900), var(--vf-indigo-700));
    color: var(--vf-white);
}

.vf-cp-forecast {
    position: sticky;
    top: 70px; /* topbar (60px) + 10px */
    z-index: 5;
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-shadow-md);
    padding: 22px 26px;
    margin-bottom: 16px;
}

.vf-cp-fc-main,
.vf-cp-act-fc-body {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.vf-cp-fc-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.vf-cp-fc-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--vf-r-md);
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.vf-cp-fc-cap {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-on-dark-2);
}

.vf-cp-fc-big {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-feature-settings: 'tnum' 1;
}

.vf-cp-fc-mid {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    flex: 1;
}

.vf-cp-fc-k {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vf-on-dark-2);
}

.vf-cp-fc-v {
    font-family: var(--vf-font-mono);
    font-weight: 700;
    font-size: 17px;
    margin-top: 4px;
}


.vf-cp-fc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--vf-r-pill);
    flex: none;
    background: rgba(255, 255, 255, .14);
}

.vf-cp-fc-badge.vf-cp-fc-ok {
    background: var(--vf-positive);
    color: var(--vf-white);
}

.vf-cp-fc-badge.vf-cp-fc-warn {
    background: var(--vf-warning);
    color: var(--vf-white);
}

.vf-cp-fc-badge.vf-cp-fc-bad {
    background: var(--vf-negative);
    color: var(--vf-white);
}

/* ---- delivery settings (inside the forecast banner) ---- */
.vf-cp-fc-strat {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.vf-cp-fc-strat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.vf-cp-fc-strat-kick {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vf-on-dark-2);
}


.vf-cp-strat-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--vf-r-pill);
    background: rgba(255, 255, 255, .22);
    outline: none;
    cursor: pointer;
}

.vf-cp-strat-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--vf-white);
    border: 3px solid var(--vf-indigo-400);
    cursor: pointer;
    box-shadow: var(--vf-shadow-sm);
}

.vf-cp-strat-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--vf-white);
    border: 3px solid var(--vf-indigo-400);
    cursor: pointer;
}

.vf-cp-strat-range:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.vf-cp-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: end;
}

.vf-cp-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.vf-cp-setting-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--vf-on-dark-2);
}

.vf-cp-setting-lbl b {
    color: var(--vf-white);
}

.vf-cp-setting-note {
    font-size: 11.5px;
    color: var(--vf-on-dark-2);
}

.vf-cp-plan .vf-cp-fc-main,
.vf-cp-plan .vf-cp-sites,
.vf-cp-plan .vf-cp-actions {
    transition: opacity .15s;
}

.vf-cp-plan.htmx-request .vf-cp-fc-main,
.vf-cp-plan.htmx-request .vf-cp-sites,
.vf-cp-plan.htmx-request .vf-cp-actions {
    opacity: .55;
}

@media (max-width: 900px) {
    .vf-cp-settings {
        grid-template-columns: 1fr;
    }
}

/* ---- recommended actions + replacement banner ---- */
.vf-cp-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--vf-warning-bg);
    border: 1px solid var(--vf-warning);
    border-radius: var(--vf-r-md);
    padding: 12px 16px;
    margin-bottom: 14px;
}

.vf-cp-actions-cap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vf-warning);
    margin-right: 4px;
}

.vf-cp-actions-hint {
    font-size: 12.5px;
    color: var(--vf-fg-2);
}

.vf-cp-invnote {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--vf-fg-3);
    margin-bottom: 12px;
}


.vf-cp-invnote b {
    color: var(--vf-fg-1);
}

.vf-cp-invnote-cap {
    color: var(--vf-warning);
}

/* ---- site cards ---- */
.vf-cp-sites {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vf-cp-site {
    padding: 0;
    overflow: hidden;
}

.vf-cp-site-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
}

.vf-cp-site-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vf-fg-faint);
    font-size: 13px;
    padding: 0;
    flex: none;
}

.vf-cp-site-rank {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--vf-accent-strong);
    color: var(--vf-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vf-font-mono);
    font-weight: 700;
    font-size: 13px;
}

.vf-cp-site-id {
    flex: 1;
    min-width: 0;
}

.vf-cp-site-name {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--vf-fg-1);
}

.vf-cp-site-num {
    font-family: var(--vf-font-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--vf-fg-faint);
}

.vf-cp-site-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--vf-fg-3);
}

.vf-cp-site-meta i {
    color: var(--vf-fg-faint);
    margin-right: 4px;
}

.vf-cp-site-why {
    color: var(--vf-indigo-600);
    font-weight: 600;
}


.vf-cp-site-stats {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: none;
}

.vf-cp-site-stat {
    text-align: right;
}

.vf-cp-site-val {
    display: block;
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--vf-fg-1);
    font-feature-settings: 'tnum' 1;
}

.vf-cp-site-lbl {
    display: block;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin-top: 2px;
}

.vf-cp-site-opp {
    text-align: center;
    padding-left: 22px;
    border-left: 1px solid var(--vf-border);
}

.vf-cp-site-opp-val {
    display: block;
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--vf-indigo-600);
}

.vf-cp-site-body {
    padding: 4px 20px 18px;
    border-top: 1px solid var(--vf-border);
}

.vf-cp-inv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 10px;
}

.vf-cp-inv-cap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vf-fg-2);
}


.vf-cp-inv-count {
    font-family: var(--vf-font-mono);
    font-size: 11px;
    background: var(--vf-indigo-100);
    color: var(--vf-indigo-700);
    border-radius: var(--vf-r-pill);
    padding: 1px 8px;
}

.vf-cp-inv-hint {
    font-size: 11.5px;
    color: var(--vf-fg-faint);
}

.vf-cp-inv-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- inventory screen rows ---- */
.vf-cp-screen {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface-2);
}


.vf-cp-screen-bak {
    background: var(--vf-bg-subtle);
    opacity: .82;
}


.vf-cp-screen-check,
.vf-cp-screen-add {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--vf-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.vf-cp-screen-check {
    background: var(--vf-accent-strong);
    color: var(--vf-white);
}

.vf-cp-screen-add {
    background: var(--vf-surface);
    border: 1px dashed var(--vf-border-strong);
    color: var(--vf-fg-faint);
}

.vf-cp-screen-main {
    flex: 1;
    min-width: 0;
}

.vf-cp-screen-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--vf-fg-1);
}

.vf-cp-screen-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.vf-cp-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--vf-fg-2);
    background: var(--vf-indigo-50);
    border-radius: var(--vf-r-sm);
    padding: 2px 8px;
}

.vf-cp-fit {
    font-size: 11px;
    font-weight: 600;
}


.vf-cp-screen-dayparts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.vf-cp-dayparts-cap {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-faint);
}

.vf-cp-daypart {
    font-family: var(--vf-font-mono);
    font-size: 11px;
    color: var(--vf-fg-2);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-sm);
    padding: 2px 7px;
}

.vf-cp-screen-metrics {
    display: flex;
    gap: 22px;
    flex: none;
}

.vf-cp-screen-metric {
    text-align: right;
}

.vf-cp-screen-val {
    display: block;
    font-family: var(--vf-font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--vf-fg-1);
}

.vf-cp-screen-lbl {
    display: block;
    font-size: 10px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin-top: 2px;
}

/* ---- step nav ---- */
.vf-cp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.vf-cp-nav-top {
    margin-top: 0;
    margin-bottom: 18px;
}

.vf-cp-nav form {
    margin: 0;
}

/* ---- step 1: places targeting ---- */
.vf-cp-place-catgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vf-cp-place-cats,
.vf-cp-place-groups,
.vf-cp-place-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.vf-cp-place-groups,
.vf-cp-place-values {
    margin-top: 10px;
}

.vf-cp-place-values {
    padding-top: 10px;
    border-top: 1px solid var(--vf-border);
    max-height: 168px;
    overflow-y: auto;
}

.vf-cp-chip-cap {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
}

.vf-cp-place-empty {
    font-size: 12.5px;
    color: var(--vf-fg-faint);
}

.vf-cp-planscale {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---- step 3: optimization results ---- */
.vf-cp-results-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vf-indigo-400);
}

.vf-cp-hero-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

@media (max-width: 720px) {
    .vf-cp-hero-row {
        grid-template-columns: 1fr;
    }
}

.vf-cp-hero {
    background: var(--vf-surface);
    border: 1px solid var(--vf-indigo-200);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-shadow-sm);
    padding: 20px;
}

.vf-cp-hero-icon {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--vf-r-md);
    background: var(--vf-indigo-100);
    color: var(--vf-indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vf-cp-hero-value {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 34px;
    letter-spacing: -.02em;
    color: var(--vf-indigo-700);
    line-height: 1;
    margin-top: 14px;
    font-feature-settings: 'tnum' 1;
}

.vf-cp-hero-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-cp-hero-note {
    font-size: 12px;
    color: var(--vf-fg-3);
    margin-top: 8px;
}


.vf-cp-compare-legend {
    gap: 18px;
    margin-top: 0;
    margin-bottom: 16px;
}

.vf-cp-legend-loop {
    background: var(--vf-border-strong);
}

.vf-cp-legend-opt {
    background: var(--vf-accent-strong);
}

.vf-cp-compare-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vf-cp-compare-row {
    display: grid;
    grid-template-columns: 180px 1fr 120px;
    gap: 16px;
    align-items: center;
}

.vf-cp-compare-row > .vf-delta {
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .vf-cp-compare-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

.vf-cp-compare-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-fg-2);
}

.vf-cp-compare-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vf-cp-compare-track {
    position: relative;
    height: 22px;
    background: var(--vf-bg-subtle);
    border-radius: var(--vf-r-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.vf-cp-compare-fill {
    height: 100%;
    border-radius: var(--vf-r-sm);
    transition: width .5s var(--vf-ease);
}

.vf-cp-compare-loop {
    background: var(--vf-border-strong);
}

.vf-cp-compare-opt {
    background: var(--vf-accent-strong);
}

.vf-cp-compare-val {
    position: absolute;
    right: 10px;
    font-family: var(--vf-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vf-fg-1);
}

/* the winning bar's fill reaches under the value, so it flips to the on-fill color */
.vf-cp-compare-val-on {
    color: var(--vf-on-dark);
}

/* ---- step 4: activate ---- */
.vf-cp-act-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.vf-cp-act-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -.02em;
    color: var(--vf-fg-1);
    margin: 6px 0 2px;
}

.vf-cp-act-rename {
    color: var(--vf-fg-faint);
    font-size: 14px;
    text-decoration: none;
}

.vf-cp-act-rename:hover {
    color: var(--vf-indigo-600);
}

.vf-cp-act-track {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}


.vf-cp-act-forecast {
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    padding: 16px 18px;
    margin-bottom: 18px;
}

.vf-cp-act-fc-cap {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vf-fg-faint);
    margin-bottom: 12px;
}


.vf-cp-act-fc-hero {
    flex: none;
    border-radius: var(--vf-r-md);
    padding: 16px 20px;
}

.vf-cp-act-fc-hero .vf-cp-fc-big {
    margin: 6px 0 10px;
}

.vf-cp-act-fc-metrics {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
    flex: 1;
}

.vf-cp-act-fc-k {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vf-fg-3);
}

.vf-cp-act-fc-v {
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--vf-fg-1);
    margin-top: 5px;
    font-feature-settings: 'tnum' 1;
}

/* ---- step 3: weekly delivery heatmap ---- */

.vf-cp-hm {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1080px) {
    .vf-cp-hm {
        grid-template-columns: 1fr;
    }
}

.vf-cp-hm-panel {
    min-width: 0;
}

.vf-cp-hm-title {
    display: flex;
    flex-direction: column;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-1);
    margin-bottom: 10px;
}

.vf-cp-hm-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--vf-fg-faint);
    margin-top: 2px;
}

.vf-cp-hm-illus {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-3);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-sm);
    padding: 1px 5px;
    vertical-align: middle;
}

.vf-cp-hm-scroll {
    overflow-x: auto;
}

.vf-cp-hm-grid {
    --vf-cp-hm-cell: 18px;
    display: grid;
    gap: 2px;
    width: max-content;
}

.vf-cp-hm-collbl {
    font-family: var(--vf-font-mono);
    font-size: 8.5px;
    color: var(--vf-fg-faint);
    text-align: center;
}

.vf-cp-hm-daylbl {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--vf-fg-3);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}

.vf-cp-hm-cell {
    height: 17px;
    border-radius: 2px;
}

/* slots the plan skipped: outline only, so the bought slots read as the shape */
.vf-cp-hm-off {
    box-shadow: inset 0 0 0 1px var(--vf-border);
    background: transparent !important;
}

.vf-cp-hm-tip {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    max-width: 260px;
    padding: 7px 10px;
    border-radius: var(--vf-r-sm);
    background: var(--vf-fg-1);
    color: var(--vf-surface-2);
    font-size: 11px;
    line-height: 1.55;
    box-shadow: var(--vf-shadow-lg);
}

.vf-cp-hm-tip > div:first-child {
    font-weight: 600;
}

.vf-cp-hm-legend {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-size: 10px;
    color: var(--vf-fg-faint);
}

.vf-cp-hm-ramp {
    flex: 1;
    height: 6px;
    border-radius: var(--vf-r-pill);
    border: 1px solid var(--vf-border);
}

.vf-cp-hm-swatch {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 2px;
}

.vf-cp-hm-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--vf-border);
    font-size: 12.5px;
    color: var(--vf-fg-3);
}


.vf-cp-hm-foot b {
    color: var(--vf-fg-1);
}


.vf-cp-selected-summary {
    display: flex;
    gap: 24px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: var(--vf-fg-3);
}

.vf-cp-selected-summary b {
    font-family: var(--vf-font-display);
    font-size: 18px;
    color: var(--vf-fg-1);
    margin-right: 4px;
}

.vf-cp-selected-list {
    display: flex;
    flex-direction: column;
}

.vf-cp-selected-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--vf-border);
}

@media (max-width: 720px) {
    .vf-cp-selected-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

.vf-cp-selected-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--vf-fg-1);
}

.vf-cp-selected-region {
    display: block;
    font-size: 12px;
    color: var(--vf-fg-3);
    margin-top: 2px;
}

.vf-cp-selected-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}


/* ── Campaign Insights · Content Setup ─────────────────────────────── */
.vf-ci-select {
    font-family: var(--vf-font-sans);
    font-size: 14px;
    color: var(--vf-fg-1);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    padding: 9px 12px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s var(--vf-ease), box-shadow .15s var(--vf-ease);
}

.vf-ci-select:focus {
    border-color: var(--vf-accent-strong);
    box-shadow: var(--vf-shadow-focus);
}

.vf-ci-manager {
    margin-top: 18px;
}

.vf-ci-planhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.vf-ci-planhead-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--vf-fg-1);
}

.vf-ci-planhead-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--vf-fg-3);
}

.vf-ci-planhead-meta i {
    margin-right: 5px;
    color: var(--vf-fg-faint);
}

.vf-ci-cols {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .vf-ci-cols {
        grid-template-columns: 1fr;
    }
}

.vf-ci-cols > .vf-col:first-child {
    position: sticky;
    top: 16px;
}

.vf-ci-field-label {
    display: block;
    font-family: var(--vf-font-sans);
    font-weight: 600;
    font-size: 12px;
    color: var(--vf-fg-2);
    margin: 14px 0 6px;
}

.vf-ci-optional {
    font-weight: 500;
    font-size: 11px;
    color: var(--vf-fg-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vf-ci-input {
    width: 100%;
    font-family: var(--vf-font-sans);
    font-size: 14px;
    color: var(--vf-fg-1);
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s var(--vf-ease), box-shadow .15s var(--vf-ease);
}

.vf-ci-input:focus {
    border-color: var(--vf-accent-strong);
    box-shadow: var(--vf-shadow-focus);
}

.vf-ci-addform .vf-ci-select {
    width: 100%;
}

.vf-ci-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 12px;
    border: 1.5px dashed var(--vf-border-strong);
    border-radius: var(--vf-r-md);
    background: var(--vf-bg-subtle);
    cursor: pointer;
    transition: border-color .15s var(--vf-ease), background .15s var(--vf-ease);
}

.vf-ci-drop:hover {
    border-color: var(--vf-accent-strong);
}

.vf-ci-drop-has {
    border-style: solid;
    background: var(--vf-surface);
}

.vf-ci-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.vf-ci-drop-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vf-fg-3);
}

.vf-ci-drop-preview {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: var(--vf-r-sm);
}

.vf-ci-drop-name {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--vf-fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-ci-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--vf-fg-3);
}

.vf-ci-hint i {
    color: var(--vf-fg-faint);
    margin-right: 4px;
}

.vf-ci-addbtn {
    margin-top: 18px;
}

.vf-ci-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.vf-ci-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    box-shadow: var(--vf-shadow-xs);
    overflow: hidden;
    transition: box-shadow .15s var(--vf-ease), transform .15s var(--vf-ease);
}

.vf-ci-card:hover {
    box-shadow: var(--vf-shadow-md);
    transform: translateY(-1px);
}

.vf-ci-card-img {
    aspect-ratio: 16 / 10;
    background: var(--vf-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vf-ci-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vf-ci-card-noimg {
    font-size: 26px;
    color: var(--vf-fg-faint);
}

.vf-ci-card-body {
    padding: 10px 12px 12px;
}

.vf-ci-card-name {
    font-family: var(--vf-font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--vf-fg-1);
    line-height: 1.3;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-ci-card-clip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-family: var(--vf-font-mono);
    font-size: 11px;
    color: var(--vf-indigo-600);
    background: var(--vf-indigo-50);
    border-radius: var(--vf-r-pill);
    padding: 3px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-ci-card-unlinked {
    color: var(--vf-fg-3);
    background: var(--vf-bg-subtle);
}

.vf-ci-card-select {
    width: 100%;
    margin-top: 6px;
    padding: 5px 8px;
    font-size: 12px;
}

.vf-ci-card-delform {
    display: contents;
}

.vf-ci-card-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--vf-r-sm);
    background: rgba(0, 0, 0, .45);
    color: var(--vf-white);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s var(--vf-ease), background .15s var(--vf-ease);
}

.vf-ci-card:hover .vf-ci-card-del,
.vf-ci-card-del:focus-visible {
    opacity: 1;
}

.vf-ci-card-del:hover {
    background: var(--vf-negative);
}

/* ── Campaign Insights · Executive Summary ─────────────────────────── */
.vf-ci-later .vf-kpi {
    opacity: .72;
}

.vf-ci-later-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--vf-fg-3);
    background: var(--vf-bg-subtle);
    border-radius: var(--vf-r-pill);
    padding: 2px 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Campaign Insights · campaign chooser table ────────────────────── */
.vf-ci-tablewrap {
    overflow-x: auto;
}

.vf-ci-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--vf-font-sans);
}

.vf-ci-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-faint);
    padding: 8px 12px;
    border-bottom: 1px solid var(--vf-border);
    white-space: nowrap;
}

.vf-ci-table td {
    padding: 12px;
    border-bottom: 1px solid var(--vf-border);
    font-size: 14px;
    color: var(--vf-fg-2);
    vertical-align: middle;
}

.vf-ci-row {
    cursor: pointer;
    transition: background .12s var(--vf-ease);
}

.vf-ci-row:hover, .vf-ci-row:focus-visible {
    background: var(--vf-bg-subtle);
    outline: none;
}

.vf-ci-row:last-child td {
    border-bottom: none;
}

.vf-ci-td-name {
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-ci-td-flight {
    white-space: nowrap;
}

.vf-ci-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* the tables' generic `thead th { text-align: left }` outweighs .vf-ci-num on headers */
.vf-ci-table thead th.vf-ci-num,
.vf-ci-scoretable thead th.vf-ci-num {
    text-align: right;
}

.vf-ci-chev {
    text-align: right;
    color: var(--vf-fg-faint);
    width: 1%;
}

.vf-ci-search {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 320px;
    margin-bottom: 12px;
    padding: 0 13px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-border-strong);
    border-radius: var(--vf-r-md);
}

.vf-page-actions .vf-ci-search {
    width: 220px;
    margin-bottom: 0;
}

.vf-ci-search:focus-within {
    border-color: var(--vf-indigo-300);
    box-shadow: var(--vf-shadow-focus);
}

.vf-ci-search i {
    color: var(--vf-fg-faint);
    font-size: 12px;
}

.vf-ci-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--vf-font-sans);
    font-size: 14px;
    color: var(--vf-fg-1);
    padding: 8px 0;
}

.vf-ci-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.vf-ci-sort:hover {
    color: var(--vf-fg-2);
}

.vf-ci-sort-idle {
    opacity: .35;
}

.vf-ci-td-thumb {
    width: 1%;
}

.vf-ci-td-thumb .vf-ci-thumb {
    width: 36px;
    height: 36px;
}

.vf-ci-td-del {
    width: 1%;
    text-align: right;
}

.vf-ci-del {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--vf-r-sm);
    background: none;
    color: var(--vf-fg-faint);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s var(--vf-ease), background .15s var(--vf-ease), color .15s var(--vf-ease);
}

.vf-ci-row:hover .vf-ci-del,
.vf-ci-row:focus-within .vf-ci-del,
.vf-cp-saved:hover .vf-ci-del,
.vf-cp-saved:focus-within .vf-ci-del,
.vf-ci-del:focus-visible {
    opacity: 1;
}

.vf-ci-del:hover {
    background: var(--vf-negative);
    color: var(--vf-white);
}

.vf-ci-nomatch {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--vf-fg-3);
}

.vf-ci-setup-sub {
    margin: -8px 0 16px;
    font-size: 13px;
    color: var(--vf-fg-3);
}

/* ── Campaign Insights · summary card + plan grid ──────────────────── */
.vf-ci-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vf-ci-summary-contents {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vf-ci-contents-cap {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-faint);
}

.vf-ci-thumbs {
    display: flex;
}

.vf-ci-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--vf-r-sm);
    overflow: hidden;
    background: var(--vf-bg-subtle);
    border: 2px solid var(--vf-surface);
    box-shadow: var(--vf-shadow-xs);
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vf-fg-faint);
}

.vf-ci-thumb:first-child {
    margin-left: 0;
}

.vf-ci-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vf-ci-plangrid {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--vf-border);
}

.vf-ci-plangrid-cap {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-faint);
    margin-bottom: 12px;
}

.vf-ci-plangrid-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.vf-ci-plangrid-cells > div {
    padding: 10px 12px;
    background: var(--vf-bg-subtle);
    border-radius: var(--vf-r-md);
}

.vf-ci-plangrid-cells .vf-ci-pg-v {
    margin-top: 8px;
}

.vf-ci-pg-v-big {
    font-family: var(--vf-font-display);
    font-size: 20px;
}

.vf-ci-pg-k {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vf-fg-faint);
    margin-bottom: 4px;
}

.vf-ci-pg-v {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-ci-against-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--vf-fg-3);
}

.vf-ci-against-note i {
    color: var(--vf-fg-faint);
    margin-right: 5px;
}

/* ── Campaign Insights · content scoreboard + radar ────────────────── */
.vf-ci-sb-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1279px) {
    .vf-ci-sb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .vf-ci-sb-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vf-ci-sb-card {
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    padding: 14px;
    background: var(--vf-surface);
}

.vf-ci-sb-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vf-ci-sb-img {
    width: 40px;
    height: 40px;
    border-radius: var(--vf-r-sm);
    overflow: hidden;
    background: var(--vf-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vf-fg-faint);
    flex: 0 0 auto;
}

.vf-ci-sb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vf-ci-sb-id {
    min-width: 0;
    flex: 1;
}

.vf-ci-sb-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--vf-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-ci-sb-winner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--vf-accent-strong);
}

.vf-ci-sb-index {
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--vf-accent-strong);
    line-height: 1;
    text-align: right;
}

.vf-ci-sb-index span {
    display: block;
    font-family: var(--vf-font-sans);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-faint);
    margin-top: 2px;
}

.vf-ci-radar {
    width: 100%;
    height: auto;
    overflow: visible;
    margin: 8px 0;
}

.vf-ci-radar-ring {
    fill: none;
    stroke: var(--vf-border);
    stroke-width: 1;
}

/* the campaign-average ring (index 100) */
.vf-ci-radar-ring-base {
    stroke: var(--vf-fg-3);
    stroke-width: 1.6;
}

.vf-ci-radar-axis {
    stroke: var(--vf-border);
    stroke-width: 1;
}

.vf-ci-radar-label {
    font-family: var(--vf-font-sans);
    font-size: 9px;
    font-weight: 600;
    fill: var(--vf-fg-3);
    dominant-baseline: middle;
}

.vf-ci-radar-shape {
    fill: var(--vf-accent-strong);
    fill-opacity: .22;
    stroke: var(--vf-accent-strong);
    stroke-width: 2;
    stroke-linejoin: round;
}

.vf-ci-radar-dot {
    fill: var(--vf-accent-strong);
}

.vf-ci-radar-hit {
    fill: transparent;
    cursor: pointer;
}

.vf-ci-radar-tip {
    opacity: 0;
    pointer-events: none;
}

.vf-ci-radar-node:hover .vf-ci-radar-tip {
    opacity: 1;
}

.vf-ci-radar-tip-bg {
    fill: var(--vf-fg-1);
}

.vf-ci-radar-tip-text {
    fill: var(--vf-surface);
    font-family: var(--vf-font-sans);
    font-size: 11px;
    font-weight: 600;
}

/* ── Campaign Insights · delivered-vs-plan scorecard ───────────────── */
.vf-ci-pace {
    margin: 0 0 18px;
}

.vf-ci-pace-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.vf-ci-pace-val {
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 26px;
}

.vf-ci-pace-cap {
    font-size: 13px;
    color: var(--vf-fg-3);
}

.vf-ci-scoretable {
    width: 100%;
    border-collapse: collapse;
}

.vf-ci-scoretable thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--vf-fg-3);
    padding: 8px 12px;
    border-bottom: 1px solid var(--vf-border);
    text-align: left;
    white-space: nowrap;
}

.vf-ci-scoretable td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--vf-border);
    font-size: 14px;
    color: var(--vf-fg-2);
}

.vf-ci-scoretable tr:last-child td {
    border-bottom: none;
}

.vf-ci-st-kpi {
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-ci-st-obj {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-accent-strong);
    background: var(--vf-indigo-50);
    border-radius: var(--vf-r-pill);
    padding: 1px 7px;
    vertical-align: middle;
}

.vf-ci-st-plan {
    color: var(--vf-fg-3);
}

.vf-ci-st-delivered {
    font-weight: 700;
    color: var(--vf-fg-1);
}

.vf-ci-scoretable .vf-delta-up,
.vf-ci-scoretable .vf-delta-down {
    font-weight: 600;
}

/* ── Campaign Insights · content comparison ────────────────────────── */
.vf-ci-lb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.vf-ci-lb-card {
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    padding: 12px;
    background: var(--vf-surface);
}

.vf-ci-lb-cap {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--vf-fg-3);
    margin-bottom: 10px;
}

.vf-ci-lb-img {
    aspect-ratio: 16 / 9;
    border-radius: var(--vf-r-md);
    background: var(--vf-bg-subtle);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vf-fg-faint);
}

.vf-ci-lb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vf-ci-lb-name {
    margin-top: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--vf-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-ci-lb-value {
    margin-top: 4px;
    font-family: var(--vf-font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--vf-indigo-600);
    font-feature-settings: 'tnum' 1;
}

.vf-ci-row-id {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* per-column heat tint, --heat set inline (0 = column min) */
.vf-ci-heat {
    background: color-mix(in srgb, var(--vf-indigo-500) var(--heat, 0%), transparent);
}

/* position strip */
.vf-strip {
    width: 100%;
    height: auto;
    margin-top: 12px;
}

.vf-strip-bar {
    fill: var(--vf-bg-subtle);
    stroke: var(--vf-border);
    stroke-width: 1;
}

.vf-strip-base {
    stroke: var(--vf-fg-faint);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}

.vf-strip-baselabel,
.vf-strip-axis {
    font-family: var(--vf-font-sans);
    font-size: 10px;
    fill: var(--vf-fg-faint);
}

.vf-strip-baselabel {
    text-anchor: middle;
}

.vf-strip-stem {
    stroke: var(--vf-fg-2);
    stroke-width: 2;
}

.vf-strip-dot {
    fill: var(--vf-fg-2);
}

.vf-strip-stem.vf-strip-up {
    stroke: var(--vf-positive);
}

.vf-strip-dot.vf-strip-up {
    fill: var(--vf-positive);
}

.vf-strip-initial {
    font-family: var(--vf-font-sans);
    font-size: 10px;
    font-weight: 700;
    fill: var(--vf-surface);
}

.vf-strip-value {
    font-family: var(--vf-font-mono);
    font-size: 11px;
    font-weight: 700;
    fill: var(--vf-fg-1);
}

.vf-strip-value-up {
    fill: var(--vf-positive);
}

/* audience affinity matrix */
.vf-ci-aff {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.vf-ci-aff th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--vf-fg-3);
    padding: 8px 6px;
    text-align: center;
    white-space: nowrap;
}

.vf-ci-aff th.vf-ci-aff-target {
    color: var(--vf-fg-1);
}

.vf-ci-aff-tag {
    display: block;
    font-size: 9px;
    color: var(--vf-accent-strong);
}

.vf-ci-aff td {
    padding: 5px 6px;
    text-align: center;
}

.vf-ci-aff td.vf-ci-st-kpi {
    text-align: left;
    white-space: nowrap;
}

.vf-ci-aff-cell {
    display: block;
    padding: 9px 0;
    border-radius: var(--vf-r-sm);
    font-family: var(--vf-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    background: color-mix(in srgb, var(--vf-indigo-900) var(--aff-heat), var(--vf-bg-subtle));
    color: var(--vf-fg-1);
}

.vf-ci-aff-cell-dark {
    color: var(--vf-on-dark);
}

.vf-ci-aff-cell-target {
    outline: 2px solid var(--vf-accent-strong);
    outline-offset: -2px;
}

.vf-ci-aff-split {
    display: flex;
    min-width: 120px;
    height: 22px;
    border-radius: var(--vf-r-pill);
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    color: var(--vf-on-dark);
}

.vf-ci-aff-f {
    background: var(--vf-female);
}

.vf-ci-aff-m {
    background: var(--vf-male);
}

.vf-ci-aff-f, .vf-ci-aff-m {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
}

/* ── Campaign Insights · engagement by demographics ────────────────── */
.vf-ed-head {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.vf-ed-head-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.vf-ed-head-item .vf-ci-pg-k {
    display: inline;
    margin-bottom: 0;
}

.vf-ed-head-item .vf-ci-pg-v {
    display: inline;
    font-size: 16px;
}

.vf-ed-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.vf-ed-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-faint);
}

.vf-ed-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--vf-font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--vf-fg-1);
    margin-top: 4px;
}

.vf-ed-kpi-extra {
    font-family: var(--vf-font-sans);
    font-weight: 600;
    font-size: 13px;
    color: var(--vf-fg-3);
}

.vf-ed-pts {
    font-family: var(--vf-font-mono);
    font-weight: 700;
    font-size: 14px;
}

/* points fade toward neutral as they approach the campaign average */
.vf-ed-pts-up {
    color: color-mix(in srgb, var(--vf-positive) var(--pts-heat), var(--vf-fg-3));
}

.vf-ed-pts-down {
    color: color-mix(in srgb, var(--vf-negative) var(--pts-heat), var(--vf-fg-3));
}

.vf-ed-kpi-note {
    font-size: 12px;
    color: var(--vf-fg-3);
    margin-top: 3px;
}

.vf-ci-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 14px;
}

.vf-ed-dot-f {
    background: var(--vf-female);
}

.vf-ed-dot-m {
    background: var(--vf-male);
}

.vf-ed-phead {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vf-fg-faint);
    border-bottom: 1px solid var(--vf-border);
    padding-bottom: 6px;
    margin-bottom: 4px;
}

.vf-ed-phead-side {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vf-ed-phead .vf-ed-pband,
.vf-ed-phead .vf-ed-ptotal {
    font-size: 11px;
    color: var(--vf-fg-faint);
}

.vf-ed-pyramid {
    display: grid;
    gap: 4px;
}

.vf-ed-prow {
    display: grid;
    grid-template-columns: 52px 1fr 96px 1fr 52px 56px;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.vf-ed-pband-target,
.vf-ed-pcount-target {
    font-weight: 700;
    color: var(--vf-fg-1);
}

.vf-ed-pcount {
    font-family: var(--vf-font-mono);
    font-size: 12px;
    color: var(--vf-fg-3);
    text-align: right;
}

.vf-ed-prow .vf-ed-pcount:nth-child(5) {
    text-align: left;
}

.vf-ed-pband {
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vf-fg-2);
}

.vf-ed-pband .vf-ci-aff-tag {
    display: block;
}

.vf-ed-pbar {
    display: flex;
    height: 16px;
}

.vf-ed-pbar span {
    border-radius: var(--vf-r-pill);
    min-width: 2px;
}

.vf-ed-pbar-f {
    justify-content: flex-end;
}

.vf-ed-pbar-f span {
    background: var(--vf-female);
    opacity: .55;
}

.vf-ed-pbar-m span {
    background: var(--vf-male);
    opacity: .55;
}

.vf-ed-pbar-target span {
    opacity: 1;
}

.vf-ed-ptotal {
    font-family: var(--vf-font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--vf-fg-2);
    text-align: right;
}

/* frame around the target age bands; outline paints outside layout, so the
   framed rows' columns stay aligned with the rest of the pyramid */
.vf-ed-ptargetbox {
    display: grid;
    gap: 4px;
    border-radius: var(--vf-r-md);
    outline: 1.5px solid var(--vf-accent-strong);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Expert View right sidebar. Token-only, so dark + all themes work.  *
 * ------------------------------------------------------------------ */
.vf-xv-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: none;
    border-radius: var(--vf-r-md) 0 0 var(--vf-r-md);
    background: var(--vf-accent-strong);
    color: var(--vf-on-dark);
    box-shadow: var(--vf-shadow-md);
    cursor: pointer;
    transition: padding-right .15s var(--vf-ease), background .15s var(--vf-ease);
}

.vf-xv-tab:hover {
    padding-right: 12px;
}

.vf-xv-tab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.vf-xv {
    position: fixed;
    /* start where the topbar ends (measured into --vf-topbar-h by vidiflow.js) so
       the panel doesn't cover the topbar controls */
    top: var(--vf-topbar-h, 61px);
    right: 0;
    z-index: 60;
    width: 420px;
    max-width: 90vw;
    height: calc(100vh - var(--vf-topbar-h, 61px));
    display: flex;
    flex-direction: column;
    background: var(--vf-surface);
    border-left: 1px solid var(--vf-border);
    box-shadow: var(--vf-shadow-lg);
    transform: translateX(100%);
    transition: transform .25s var(--vf-ease);
}

.vf-xv-open {
    transform: translateX(0);
}

.vf-xv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--vf-indigo-900);
    color: var(--vf-on-dark);
}

.vf-xv-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--vf-font-display);
    font-size: 16px;
    font-weight: 700;
}

.vf-xv-head-icon,
.vf-xv-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--vf-r-sm);
    background: rgba(255, 255, 255, .12);
}

.vf-xv-head-icon {
    font-size: 14px;
}

.vf-xv-close {
    border: none;
    color: var(--vf-on-dark);
    cursor: pointer;
    transition: background .15s var(--vf-ease);
}

.vf-xv-close:hover {
    background: rgba(255, 255, 255, .22);
}

.vf-xv-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.vf-xv-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.vf-xv-kpi {
    padding: 7px 12px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface-2);
}

.vf-xv-kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vf-fg-3);
    margin-bottom: 3px;
}

.vf-xv-kpi-value {
    font-family: var(--vf-font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--vf-fg-1);
}

.vf-xv-tone-positive {
    color: var(--vf-positive);
}

.vf-xv-tone-negative {
    color: var(--vf-negative);
}

.vf-xv-tone-warn {
    color: var(--vf-warning);
}

.vf-xv-tone-neutral {
    color: var(--vf-fg-1);
}

.vf-xv-sec,
.vf-xv-unavail,
.vf-xv-foot {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--vf-border);
}

.vf-xv-sec:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.vf-xv-sec-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vf-fg-2);
    margin-bottom: 10px;
}

.vf-xv-sec-head i {
    color: var(--vf-indigo-500);
}

.vf-xv-sec-warn i {
    color: var(--vf-warning);
}

.vf-xv-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vf-xv-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--vf-fg-1);
}

.vf-xv-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: var(--vf-r-pill);
    background: var(--vf-indigo-400);
}

.vf-xv-list-warn li::before {
    background: var(--vf-warning);
}

.vf-xv-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vf-xv-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-md);
    background: var(--vf-surface);
    font-size: 13px;
    line-height: 1.4;
    color: var(--vf-fg-1);
}

.vf-xv-action-icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 12px;
    color: var(--vf-fg-faint);
}

.vf-xv-unavail,
.vf-xv-foot {
    display: flex;
    align-items: center;
}

.vf-xv-unavail {
    gap: 8px;
    font-size: 12px;
    color: var(--vf-fg-3);
}

.vf-xv-foot {
    gap: 6px;
    font-size: 11px;
    color: var(--vf-fg-faint);
}

@media (max-width: 640px) {
    .vf-xv {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ── Campaign Insights · key places ─────────────────────────────────── */
.vf-kp-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}

.vf-kp-row {
    display: grid;
    grid-template-columns: 22px 1fr auto 44px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--vf-border);
    font-size: 13px;
}

.vf-kp-row:last-of-type {
    border-bottom: none;
}

.vf-kp-volume .vf-kp-row {
    grid-template-columns: 22px 1fr auto 48px 44px;
}

.vf-kp-pct {
    font-family: var(--vf-font-mono);
    font-size: 12px;
    color: var(--vf-fg-3);
    text-align: right;
}

.vf-kp-rank {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--vf-bg-subtle);
    color: var(--vf-fg-2);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vf-kp-name {
    font-weight: 600;
    color: var(--vf-fg-1);
}

.vf-kp-value {
    font-family: var(--vf-font-mono);
    font-weight: 700;
    color: var(--vf-fg-1);
}

.vf-kp-heat {
    padding: 2px 8px;
    border-radius: var(--vf-r-sm);
}

/* outrank .vf-kp-value's color, which ties .vf-mm-cell-dark and wins on order */
.vf-kp-heat.vf-mm-cell-dark {
    color: var(--vf-white);
}

.vf-kp-index {
    font-family: var(--vf-font-mono);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.vf-scatter-reading {
    margin-top: 14px;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-r-lg);
    background: var(--vf-bg-subtle);
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}

.vf-scatter-reading-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    font-size: 13px;
    color: var(--vf-fg-2);
}


.vf-sec-num {
    width: 24px;
    height: 24px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vf-indigo-700);
    color: var(--vf-white);
    font-family: var(--vf-font-mono);
    font-size: 12px;
    font-weight: 700;
}

.vf-sec-num::before {
    counter-increment: vf-sec;
    content: counter(vf-sec);
}