/* ══════════════════════════════════════════════════════════════════════════
   VELA INTELLIGENCE — TOOLS STYLESHEET

   Supplementary component styles for the interactive tools under /tools/.
   Loaded *after* assets/css/vela.css, which owns the tokens, page chrome,
   typography and layout. Nothing here redefines a token: every colour below
   resolves through the semantic tokens in vela.css so a palette change
   upstream carries through.

   Scope
     .tool-*   furniture shared by any tool page (header, section heading,
               comparison table, disclaimer)
     .vc-*     the value creator assessment (calculator, evidence, pilot)
     .vp-*     the printable export sheet (light theme, A4)

   Density note: the calculator is a working surface, not a marketing page, so
   .vc-* type runs smaller and tighter than the site scale on purpose — the
   --spacing-xxl rhythm would push a 25-field model over several screens. The
   investment committee case has no components of its own: it is built from
   vela.css (.section, .table-wrap, .stat, .banner, .cta-block) and only
   borrows .tool-header and .tool-disclaimer from here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   SHARED TOOL FURNITURE
   ────────────────────────────────────────────── */

/* Tools sit closer to the header than a marketing hero does. */
.tool-section { padding: calc(80px + var(--spacing-lg)) 0 var(--spacing-lg); }

/* Both tool pages open with the site's post header — .eyebrow, .post-title,
   .post-dek, .post-meta — because that is what they are: documents you hand a
   committee. Two adjustments only, both structural:

   Measure. On the posts, .post-header sits inside .article (720px). These
   pages use the 1200px .container for the model itself, so without a measure
   of its own a 3.75rem title would run the full width.

   Rhythm. The posts' 4rem padding and margin suits a page that opens into
   prose. These open into a dense working surface, so both are halved. */
.tool-header {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
/* Measure on the text, not on the header, so the closing hairline still spans
   the container and lines up with the working surface beneath it. */
.tool-header > * { max-width: 880px; }

/* Section heading on a tool page.

   vela.css offers .headline-section (up to 3.5rem), sized to sit under a
   6.5rem .headline-hero on a marketing page. These pages open with a
   .post-title (3.75rem), so .headline-section would land almost level with
   the h1 and flatten the hierarchy. The posts solve this with .prose h2 —
   the same step, at 2rem — so this is that rule lifted out of the .prose
   scope, where the surrounding content is a table and stat cards rather
   than prose. */
.tool-h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm);
}

/* Comparison table. The first column carries short labels rather than prose,
   so it gets a measure of its own — otherwise "Data-room coverage" wraps onto
   two lines while its neighbours do not, and the column reads ragged. */
.tool-table th:first-child,
.tool-table td:first-child { width: 20%; }

/* Back / forward link between the two pages. */
.tool-pagelink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px solid var(--hairline);
    padding: 0.55rem 0.85rem;
    margin-bottom: var(--spacing-md);
    text-decoration: none;
    transition: all 0.25s ease;
}
.tool-pagelink:hover { color: var(--text-primary); border-color: var(--accent-bright); }

/* Closing legal / caveat paragraph. */
.tool-disclaimer {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.65;
    border-top: 1px solid var(--hairline);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Eyebrow at component scale — vela.css's .eyebrow is 1.5rem, which is a
   page-level device. Inside a panel it needs to read as a label. */
.tool-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.tool-label--accent { color: var(--accent-bright); }
.tool-label--cta    { color: var(--cta); }

/* ══════════════════════════════════════════════════════════════════════════
   VALUE CREATOR ASSESSMENT
   ══════════════════════════════════════════════════════════════════════════ */

/* The running total is the one surface on either page that earns a treatment
   of its own: it has to stay legible against a column of input panels built
   from the same card surface. A gradient lifts it clear of both. */
.vc-focal {
    background: linear-gradient(160deg,
        var(--surface-deep) 0%,
        var(--canvas) 62%,
        color-mix(in srgb, var(--brand-primary-800) 70%, var(--canvas)) 100%);
    border: 1px solid var(--hairline);
}

.vc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 1.625rem;
    align-items: start;
}

/* ── Controls above the model ── */
.vc-controls {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}


/* ── Tab bar ── */
.vc-tabs { display: flex; flex-wrap: wrap; }
.vc-tab {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5625rem 1rem;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--hairline);
    margin-right: -1px;
    transition: all 0.2s ease;
}
.vc-tab:hover               { color: var(--text-primary); }
.vc-tab[aria-selected="true"] {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    position: relative;
}

/* Same chrome as a tab, but an ordinary button — used for the back and export
   controls in the pilot view, which are actions rather than view switches. */
.vc-minor {
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--hairline);
    padding: 0.5625rem 0.875rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
.vc-minor:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent-bright); }
.vc-minor:disabled { opacity: 0.4; cursor: default; }
.vc-minor--cta  { background: var(--cta); color: var(--white); border-color: var(--cta); font-weight: 600; }
.vc-minor--cta:hover:not(:disabled) {
    background: transparent;
    color: var(--cta);
    border-color: var(--cta);
    box-shadow: 0 0 20px color-mix(in srgb, var(--cta) 30%, transparent);
}

/* States the rule the export button follows, so a greyed-out button is never
   a mystery. Always present: appearing and disappearing resized the dialog.
   On its own row — inline it squeezed the narrow footer enough to wrap the
   button label. */
.vc-export-ready {
    flex: 1 0 100%;
    margin: 0 0 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Collapsible panel — native <details> so it works without JS ── */
.vc-panel {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    margin-bottom: var(--spacing-sm);
}
/* Section 09 only. The rule was gold at all times, which read as a status
   stuck on — it looked like a warning about a change that had not happened.
   It is now exactly that status: hairline while the coefficients are ours,
   gold once one has been moved. */
.vc-panel--accent[data-changed="false"] { border-left: 3px solid var(--hairline); }
.vc-panel--accent[data-changed="true"]  { border-left: 3px solid var(--gold-300); }

.vc-panel > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.875rem 1.125rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.vc-panel > summary::-webkit-details-marker { display: none; }
.vc-panel > summary::marker                 { content: ""; }
.vc-panel > summary:hover                   { color: var(--accent-bright); }
.vc-panel[open] > summary                   { border-bottom: 1px solid var(--hairline); }

/* The +/− affordance. Driven by [open] so it needs no script. */
.vc-panel > summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--accent-bright);
    flex-shrink: 0;
}
.vc-panel[open] > summary::after { content: "\2212"; }

.vc-panel-body { padding: 1rem 1.125rem 0.625rem; }
.vc-panel-note {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 0.875rem;
}

/* ── Field ── */
.vc-field { margin-bottom: 0.9375rem; }
.vc-field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.625rem;
    margin-bottom: 0.3125rem;
}
/* Positioning context for the field-definition tooltip. Anchoring the tip to
   the label rather than to the small "i" icon is what keeps it inside the
   panel: a tip pinned to an icon sitting far right would hang off the page
   and widen the document on narrow screens. */
.vc-field-label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    /* Take all the room left of the input. This also fixes the tooltip's
       measuring box: anchored to a shrink-to-fit label, a short field name
       would give a narrow, very tall tip. */
    flex: 1 1 auto;
    min-width: 0;
}
/* Raise the whole label while its tip is up, so the tip paints over the
   fields below it rather than under them. */
.vc-field-label:hover,
.vc-field-label:focus-within { z-index: 60; }
.vc-field-entry { display: flex; align-items: baseline; gap: 0.375rem; flex-shrink: 0; }
/* Fixed width so the number inputs line up down the column; wide enough for
   the longest unit ("per yr") on one line. */
.vc-field-unit  {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    width: 3.25rem;
    white-space: nowrap;
}

.vc-num {
    width: 5.75rem;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    padding: 0.3125rem 0.5rem;
    outline: none;
    text-align: right;
}
.vc-num:focus { border-color: var(--accent-bright); }
/* No OS stepper. These are figures a reader types or drags with the slider,
   not values you nudge one at a time, and the arrows crowd a 5.75rem field. */
.vc-num { -moz-appearance: textfield; appearance: textfield; }
.vc-num::-webkit-outer-spin-button,
.vc-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vc-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: var(--hairline);
    accent-color: var(--accent);
    outline: none;
    margin-bottom: 0.1875rem;
}
.vc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 1px solid var(--accent-bright);
    cursor: pointer;
}
.vc-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 1px solid var(--accent-bright);
    cursor: pointer;
    border-radius: 0;
}

/* Practitioner band under a slider — where our figure sits against what deal
   teams actually report. */
.vc-band {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.vc-band-mid { color: var(--accent-bright); }


/* Origin tag — where a number came from. Colour carries the meaning. */
.vc-origin {
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: 1px solid var(--hairline);
    padding: 1px 5px;
    white-space: nowrap;
    outline-offset: 2px;
    color: var(--text-secondary);
}
.vc-origin[data-origin="benchmark"],
.vc-origin[data-origin="actual"]     { color: var(--accent-bright); }
.vc-origin[data-origin="vela"]       { color: var(--gold-300); }
.vc-origin[data-origin="commercial"] { color: var(--cta); }

/* ── Info icon: field definition on hover or keyboard focus, no JS ── */
.vc-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
    user-select: none;
}
.vc-info:hover, .vc-info:focus, .vc-info:focus-visible {
    color: var(--accent-bright);
    border-color: var(--accent-bright);
    outline: none;
}
.vc-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 260px;
    /* Never wider than the label it hangs from, so it cannot widen the page. */
    max-width: 100%;
    background: var(--surface-deep);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent-bright);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    padding: 0.625rem 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 60;
    pointer-events: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.vc-info:hover .vc-tip,
.vc-info:focus .vc-tip,
.vc-info:focus-visible .vc-tip,
.vc-info[aria-expanded="true"] .vc-tip { opacity: 1; visibility: visible; }

/* The provenance badge, on its own line under the definition. Block so it
   breaks the line rather than trailing the last word, but fit-content so the
   border still hugs the text instead of ruling across the tooltip. Spacing
   only — a divider would make two paragraphs out of one short note. */
.vc-tip .vc-origin {
    display: block;
    width: fit-content;
    margin-top: 0.75rem;
}

/* ── Inline notices ── */
.vc-warning {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--cta);
    background: var(--canvas);
    padding: 0.5625rem 0.75rem;
    margin-bottom: 0.875rem;
}
.vc-warning-mark { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--cta); line-height: 1.5; }
.vc-warning-text { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }

.vc-note {
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    background: var(--canvas);
    padding: 0.6875rem 0.8125rem;
    margin-top: 0.25rem;
}
.vc-note-body {
    font-family: var(--font-body);
    font-size: 0.78125rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.vc-note-body strong { color: var(--text-primary); font-weight: 600; }

.vc-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    margin: 0.25rem 0 0.875rem;
}
.vc-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.vc-check span  { font-family: var(--font-body); font-size: 0.8125rem; color: var(--text-secondary); }

.vc-buildup-echo {
    font-family: var(--font-mono);
    font-size: 0.71875rem;
    color: var(--text-muted);
    border-top: 1px solid var(--hairline);
    padding-top: 0.625rem;
}
.vc-buildup-echo[data-active="true"] { color: var(--accent-bright); }

.vc-reset {
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-300);
    background: transparent;
    border: 1px solid var(--hairline);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    margin-top: 0.25rem;
    transition: all 0.25s ease;
}
.vc-reset:hover:not(:disabled) { border-color: var(--gold-300); }
/* Nothing to reset, so the control says so rather than doing nothing. */
.vc-reset:disabled { color: var(--text-muted); cursor: default; opacity: 0.5; }

.vc-coeff-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.vc-coeff-status {
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.vc-panel--accent[data-changed="true"] .vc-coeff-status { color: var(--gold-300); }

/* ══════════════════════════════════════════════
   RESULTS PANEL
   ══════════════════════════════════════════════ */

/* The panel follows the page: pinned below the header while the reader works
   down the input column, released when the grid ends. It deliberately has no
   scroller of its own — a box that scrolls inside a page that also scrolls
   reads as broken, and whether it happened at all depended on the window
   height. On a short viewport the lower part is simply reached by scrolling
   on, the same as any other content. */
.vc-results {
    position: sticky;
    top: 96px;
}

.vc-results-inner { padding: 1.625rem; }

.vc-total {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.4vw, 3rem);
    line-height: 1;
    color: var(--accent-bright);
    margin-bottom: 0.625rem;
}
.vc-total-sub {
    font-family: var(--font-body);
    font-size: 0.84375rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 0.375rem;
}
.vc-total-sub strong { font-weight: 600; }
.vc-total-basis {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Ladder: the three value pools ── */
.vc-ladder { margin-top: 1.125rem; }

.vc-rung { border-top: 1px solid var(--hairline); padding: 0.875rem 0 0.75rem; }
.vc-rung-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}
.vc-rung-label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.vc-rung-value {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-primary);
}
.vc-rung-value[data-tone="bright"] { color: var(--accent-bright); }
.vc-rung-value[data-tone="accent"] { color: var(--accent-bright); }
.vc-rung-sub {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.1875rem;
}

/* Share-of-total bar. */
.vc-bar {
    height: 5px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    margin-top: 0.5rem;
}
.vc-bar-fill { height: 100%; background: var(--accent-bright); transition: width 0.35s ease; }
.vc-bar-fill[data-tone="accent"] { background: var(--accent); }

.vc-rung-tools { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5625rem; flex-wrap: wrap; }

.vc-chip {
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--hairline);
    padding: 3px 6px;
}
.vc-chip[data-tone="bright"] { color: var(--accent-bright); }
.vc-chip[data-tone="sand"]   { color: var(--gold-300); }

/* "How this is calculated" — a <details> so the working is always reachable. */
.vc-working > summary {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-bright);
    border: 1px solid var(--hairline);
    padding: 4px 8px;
    cursor: pointer;
    list-style: none;
}
.vc-working > summary::-webkit-details-marker { display: none; }
.vc-working > summary::marker                 { content: ""; }
.vc-working > summary:hover                   { border-color: var(--accent-bright); }
.vc-working > summary::after                  { content: "How this is calculated"; }
.vc-working[open] > summary::after            { content: "Hide calculation"; }

/* ── Formula table: the arithmetic, line by line ── */
.vc-formula {
    border: 1px solid var(--hairline);
    background: var(--canvas);
    padding: 0.75rem 0.875rem;
    margin-top: 0.625rem;
}
.vc-formula table { width: 100%; border-collapse: collapse; font-size: inherit; }
.vc-formula td {
    border-bottom: none;
    vertical-align: top;
    padding: 3px 0;
}
.vc-formula .vc-f-label { font-family: var(--font-body); font-size: 0.75rem;    color: var(--text-secondary); padding-right: 0.5rem; }
.vc-formula .vc-f-calc  { font-family: var(--font-mono); font-size: 0.6875rem;  color: var(--text-muted);     padding: 3px 0.5rem; }
.vc-formula .vc-f-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
    padding-left: 0.5rem;
}
.vc-formula tr[data-sub="true"] .vc-f-value { color: var(--text-secondary); }
.vc-formula tr[data-total="true"] .vc-f-label,
.vc-formula tr[data-total="true"] .vc-f-value {
    border-top: 1px solid var(--hairline);
    padding-top: 0.5rem;
    font-weight: 600;
}
.vc-formula tr[data-total="true"] .vc-f-label { color: var(--text-primary); }
.vc-formula tr[data-total="true"] .vc-f-value { color: var(--accent-bright); font-size: 0.8125rem; }
.vc-formula-note {
    font-family: var(--font-body);
    font-size: 0.71875rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0.625rem 0 0;
}

/* ── Metric tiles ── */
.vc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.vc-metric {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    padding: 0.75rem 0.875rem;
}
.vc-metric-label {
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.35;
    margin-bottom: 0.375rem;
}
.vc-metric-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-primary);
}
.vc-metric-value[data-tone="cta"]      { color: var(--cta); }
.vc-metric-value[data-tone="bright"]   { color: var(--accent-bright); }
.vc-metric-value[data-tone="negative"] { color: var(--utility-negative); }
.vc-metric-value[data-big="true"]      { font-size: 1.5rem; }
.vc-metric-sub {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.3125rem;
    line-height: 1.4;
}

/* Summary strip above the pilot view. */
.vc-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.vc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline), transparent);
    margin: 1.125rem 0;
}

.vc-basis {
    font-family: var(--font-body);
    font-size: 0.71875rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0.625rem 0 0;
}
.vc-summary-sentence {
    font-family: var(--font-body);
    font-size: 0.78125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Export button — full-width inside the results panel. */
.vc-export {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1.25rem;
    padding: 0.8125rem 1.125rem;
    font-family: var(--font-mono);
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--cta);
    color: var(--white);
    border: 1px solid var(--cta);
    cursor: pointer;
    transition: all 0.3s ease;
}
.vc-export:hover {
    background: transparent;
    color: var(--cta);
    box-shadow: 0 0 20px color-mix(in srgb, var(--cta) 30%, transparent);
}
.vc-secondary {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.75rem 1.125rem;
    font-family: var(--font-mono);
    font-size: 0.71875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--hairline);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}
.vc-secondary:hover { color: var(--text-primary); border-color: var(--text-secondary); }

.vc-quiet-link {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}
.vc-quiet-link:hover { color: var(--accent-bright); }

.vc-results-foot {
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.75rem;
}

/* ══════════════════════════════════════════════
   EVIDENCE PANEL
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   MODALS — evidence, and the export dialog
   Native <dialog>: the platform gives the backdrop, Esc to close, inertness
   of the page behind and return of focus to the trigger. Only the scroll
   lock is ours, because ::backdrop does not stop the body scrolling.
   ══════════════════════════════════════════════ */

.vc-modal {
    width: min(880px, calc(100vw - 2 * var(--spacing-md)));
    max-height: min(760px, calc(100vh - 2 * var(--spacing-md)));
    padding: 0;
    border: 1px solid var(--hairline);
    background: var(--menu-bg);
    color: var(--text-primary);
    overflow: hidden;
    /* A modal dialog is centred by the UA's margin:auto against inset:0. The
       site reset (* { margin: 0 }) zeroes that, which pins the panel to the
       top-left corner, so it is restored here. */
    margin: auto;
}
/* The dialog can take focus — the UA falls back to it, and Chrome makes a
   scroll container focusable too. Neither is a control, and neither is in the
   tab order, so a ring on either is only ever an opening ring. Suppressed
   unconditionally: :focus-visible cannot express this, because Chrome counts
   dialog-open focus as keyboard-initiated even for a mouse click. */
.vc-modal:focus,
.vc-modal:focus-visible,
.vc-modal-body:focus,
.vc-modal-body:focus-visible { outline: none; }

/* Controls keep a real ring, for Tab. vela.css only covers .btn and a, so
   without this the close button falls back to the browser's default blue.
   .vc-modal-input:focus-visible below is (0,2,0) against this (0,1,1), so
   text fields keep their border-only treatment. */
.vc-modal :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.vc-modal[open] {
    display: flex;
    flex-direction: column;
}
/* ::backdrop dims and blocks pointer events but does not stop the page behind
   from scrolling, so the lock is ours. */
body:has(.vc-modal[open]) { overflow: hidden; }

.vc-modal--narrow { width: min(520px, calc(100vw - 2 * var(--spacing-md))); }
.vc-modal::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(2px); }
.vc-modal > form { display: contents; }

.vc-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 1.25rem var(--spacing-md) 1rem;
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}
.vc-modal-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}
.vc-modal-close {
    font-family: var(--font-body);
    font-size: 1.5rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.25rem;
    flex-shrink: 0;
}
.vc-modal-close:hover { color: var(--text-primary); }

/* The scrolling region. min-height:0 is what lets a flex child shrink below
   its content and actually scroll. */
.vc-modal-body {
    padding: var(--spacing-md);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) var(--menu-bg);
}
.vc-modal-body::-webkit-scrollbar       { width: 8px; }
.vc-modal-body::-webkit-scrollbar-track { background: var(--menu-bg); }
.vc-modal-body::-webkit-scrollbar-thumb { background: var(--hairline); }

.vc-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem var(--spacing-md) 1.25rem;
    border-top: 1px solid var(--hairline);
    flex-shrink: 0;
}

.vc-modal-lede {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-sm);
}

/* ── Export dialog: personalise / do not personalise ── */
.vc-radio {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 0.25rem;
}
.vc-radio input { margin-top: 0.15rem; accent-color: var(--accent); flex-shrink: 0; }
.vc-radio strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}
.vc-radio em {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.2rem;
}

/* Fields belong to the option above them, so they sit inside its indent. */
.vc-fieldset {
    padding: 0 0 0.875rem 1.9rem;
    margin-top: -0.25rem;
}
.vc-fieldset[data-disabled="true"] { opacity: 0.4; pointer-events: none; }
.vc-modal-field { display: block; margin-bottom: 0.625rem; }
.vc-modal-field .tool-label { margin-bottom: 0.3rem; }
.vc-modal-input {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    background: var(--canvas);
    color: var(--text-primary);
    border: 1px solid var(--hairline);
    padding: 0.5rem 0.75rem;
    outline: none;
}
/* The consent checkbox, inside the fieldset it consents to sending. Styled
   like the radio options above it so it reads as part of the same choice. */
.vc-check--send { align-items: flex-start; margin: 0.25rem 0 0; }
.vc-check--send input { margin-top: 0.15rem; }
.vc-check--send span  { font-family: var(--font-body); font-size: 0.8125rem; color: var(--text-primary); }
.vc-check--send em {
    display: block;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.2rem;
}

.vc-modal-input:focus         { border-color: var(--accent-bright); }
.vc-modal-input:focus-visible { outline: none; }

/* ── Evidence content, inside the dialog ── */


.vc-caveat {
    font-family: var(--font-body);
    font-size: 0.78125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-left: 3px solid var(--gold-300);
    padding-left: 0.875rem;
    margin: 0 0 1.125rem;
}

.vc-ev-item { border-top: 1px solid var(--hairline); padding: 1rem 0 0.25rem; }
.vc-ev-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.vc-ev-field { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
.vc-ev-tags  { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.vc-ev-pct   { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--accent-bright); }
.vc-ev-drift {
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold-300);
    border: 1px solid var(--hairline);
    padding: 1px 5px;
    white-space: nowrap;
}
.vc-ev-body { border-left: 3px solid var(--accent); padding-left: 0.875rem; }
.vc-ev-body p {
    font-family: var(--font-body);
    font-size: 0.78125rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 0.375rem;
}
.vc-ev-body p:first-child { font-size: 0.8125rem; }
.vc-ev-body strong        { color: var(--text-primary); font-weight: 600; }
.vc-ev-key                { color: var(--text-muted); }
.vc-ev-source {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0.5rem 0 0;
}
.vc-ev-url { text-transform: none; }

/* ══════════════════════════════════════════════
   PILOT PLAN
   ══════════════════════════════════════════════ */

.vc-pilot-intro {
    border: 1px solid var(--hairline);
    background: var(--card-bg);
    padding: 1.375rem 1.5rem;
    margin-bottom: 1.125rem;
}
.vc-pilot-claim {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0 0 0.625rem;
}
.vc-pilot-lede {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1.125rem;
}
.vc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; }
.vc-step  { border-top: 1px solid var(--hairline); padding-top: 0.75rem; }
.vc-step-n     { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600; color: var(--accent); margin-bottom: 0.4375rem; }
.vc-step-title { font-family: var(--font-display); font-weight: 600; font-size: 0.84375rem; color: var(--text-primary); margin-bottom: 0.375rem; }
.vc-step-body  { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }

.vc-measure-head {
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.375rem 0 0.75rem;
}
.vc-pm {
    border: 1px solid var(--hairline);
    background: var(--card-bg);
    padding: 1rem 1.25rem;
    margin-bottom: 0.625rem;
}
.vc-pm-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.vc-pm-metric { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); line-height: 1.35; }
.vc-pm-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 0.875rem; }
.vc-pm-cell   { border-top: 1px solid var(--hairline); padding-top: 0.5rem; }
.vc-pm-label  {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.3125rem;
}
.vc-pm-value  { font-family: var(--font-body); font-size: 0.78125rem; line-height: 1.45; color: var(--text-secondary); }
.vc-pm-value[data-tone="sand"]   { color: var(--gold-300); }
.vc-pm-value[data-tone="primary"]{ color: var(--text-primary); }
.vc-pm-value[data-tone="bright"] { color: var(--accent-bright); }
.vc-pm-method {
    margin-top: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.vc-pm-method .vc-ev-key { color: var(--text-muted); }

.vc-rollup {
    border: 1px solid var(--hairline);
    background: var(--card-bg);
    padding: 1.25rem 1.5rem;
    margin-top: 1.125rem;
}
.vc-rollup table { width: 100%; border-collapse: collapse; font-size: inherit; }
.vc-rollup td {
    border-bottom: none;
    padding: 0.375rem 0;
    font-family: var(--font-body);
    font-size: 0.78125rem;
    color: var(--text-secondary);
}
.vc-rollup td:last-child {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    text-align: right;
    white-space: nowrap;
    padding-left: 0.5rem;
}
.vc-rollup tr[data-tone="bright"] td:last-child   { color: var(--accent-bright); }
.vc-rollup tr[data-tone="muted"] td:last-child    { color: var(--text-muted); }
.vc-rollup tr[data-tone="negative"] td:last-child { color: var(--utility-negative); }
.vc-rollup tr[data-net="true"] td {
    border-top: 1px solid var(--hairline);
    padding-top: 0.5rem;
    font-weight: 600;
}
.vc-rollup-ratios {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
    border-top: 1px solid var(--hairline);
    padding-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.vc-rollup-ratios b { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); }
.vc-rollup-ratios b[data-tone="cta"] { color: var(--cta); }

.vc-conversion {
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--cta);
    background: var(--card-bg);
    padding: 1.25rem 1.5rem;
    margin-top: 1.125rem;
}
.vc-conversion ul { margin: 0; padding-left: 0; list-style: none; }
.vc-conversion li {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 0.25rem 0 0.25rem 1.25rem;
    position: relative;
}
.vc-conversion li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent-bright); }

/* ══════════════════════════════════════════════════════════════════════════
   PRINTABLE EXPORT SHEET
   A light-theme A4 document, hidden on screen and swapped in for the whole
   dark UI when the reader prints or saves to PDF. Deliberately does not use
   the site tokens: this is ink on paper, not a screen surface.

   It has to land on ONE page. A4 at 12mm margins leaves 273mm of height, and
   the sizes below are set against that: 9px body, 2px cell padding and 8px of
   space above each heading bring the sheet to ~262mm, or ~266mm once a long
   organisation name and contact line are in the header. Anything added here
   spends the remaining few millimetres, so measure the total before growing
   it. The right-hand column is the taller of the two and sets the height.
   ══════════════════════════════════════════════════════════════════════════ */

.vp-sheet { display: none; }

.vp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
}
.vp-title  { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 0 0 2px; color: #000; }
.vp-small  { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: #666; }
/* The coefficient sub-labels carry a practitioner range and an evidence grade,
   and two of the seven wrap. Tightening the leading on a secondary label keeps
   both on the sheet without spending page. */
.vp-sheet td .vp-small { line-height: 1.15; }
.vp-small--ink { color: #000; }
.vp-cols   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vp-h2 {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #444;
    margin: 8px 0 3px;
    border-bottom: 1px solid #bbb;
    padding-bottom: 3px;
}
.vp-p      { font-family: var(--font-body); font-size: 9px; color: #222; line-height: 1.42; margin: 0 0 4px; }
/* Boilerplate — the caveats and the research note. Legible, but it should not
   claim the same weight as the figures. */
.vp-fineprint { font-size: 8px; line-height: 1.38; }
.vp-p--italic { font-style: italic; color: #444; }
.vp-sheet table { width: 100%; border-collapse: collapse; font-size: inherit; }
.vp-sheet td {
    font-family: var(--font-body);
    font-size: 9px;
    color: #222;
    padding: 2px 6px 2px 0;
    vertical-align: top;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.vp-sheet td.vp-num {
    font-family: var(--font-mono);
    color: #000;
    padding: 3px 0;
    text-align: right;
    white-space: nowrap;
}
.vp-sheet tr[data-bold="true"] td { font-weight: 700; }
.vp-foot {
    border-top: 1px solid #000;
    margin-top: 10px;
    padding-top: 6px;
    display: flex;
    justify-content: space-between;
}

/* ── Print rules ── */
/* No @page margin: the sheet supplies its own as padding. Pinning body to
   210mm inside a 186mm content box made it 24mm too wide, and Chrome sent
   that horizontal overflow to a second, empty page. With the content box at
   the full 210mm the two agree exactly. */
@page { size: A4 portrait; margin: 0; }

@media print {
    /* body also carries min-height:100vh and display:flex from vela.css for
       the sticky footer; neither has any business on paper. */
    html, body {
        background: #fff !important;
        width: auto;
        min-height: 0;
        display: block;
    }
    .vp-sheet { padding: 12mm; }

    /* vela.css restacks every table into cards below 768px. A4 is 794px wide,
       so that normally misses — but it is far too close to depend on, and any
       narrower page size would silently turn this sheet into four pages of
       stacked cards. Re-asserted so the sheet's layout cannot depend on the
       paper it lands on. */
    .vp-sheet table  { display: table; width: 100%; }
    .vp-sheet thead  { display: table-header-group; }
    .vp-sheet tbody  { display: table-row-group; }
    .vp-sheet tr     { display: table-row; background: none; border: none; margin: 0; padding: 0; }
    .vp-sheet td     { display: table-cell; }
    .vp-sheet td::before { content: none; }
    /* Everything on screen goes; the export sheet takes the page. */
    .header, .footer, .vc-screen { display: none !important; }
    /* Sections start at opacity 0 and are revealed on scroll. Anything still
       unrevealed must not print blank. */
    .section { opacity: 1 !important; transform: none !important; }
    .vp-sheet { display: block !important; width: 100%; }
    .vp-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .vp-sheet table { page-break-inside: auto; }
    .vp-sheet tr    { page-break-inside: avoid; }
    .vp-h2          { page-break-after: avoid; }

    /* ── The investment committee case ──
       This page has no separate export sheet: it is already a document, so it
       prints itself, and only needs turning from screen-dark to ink-on-paper.

       Every rule is scoped to .tool-doc — the body class that marks a tool
       page which prints its own screen content. Without that scope these
       !important declarations would also land on the assessment's export
       sheet, whose table is tuned to fit A4 and would be re-padded by the
       th/td rule below. */
    .tool-doc .tool-section { padding: 0 !important; }
    .tool-doc .container    { padding: 0 !important; max-width: none; }
    .tool-doc .section      { padding: 0 0 1.5rem !important; }

    .tool-doc .post-title, .tool-doc .post-dek, .tool-doc .tool-h2,
    .tool-doc .body-large, .tool-doc .banner,
    .tool-doc .stat-value, .tool-doc td, .tool-doc td strong { color: #000 !important; }
    .tool-doc .eyebrow, .tool-doc .post-meta, .tool-doc .stat-key,
    .tool-doc .stat-label, .tool-doc .subheadline,
    .tool-doc th, .tool-doc .tool-disclaimer { color: #444 !important; }
    .tool-doc .tool-header, .tool-doc .table-wrap, .tool-doc .stat,
    .tool-doc .banner, .tool-doc th, .tool-doc td,
    .tool-doc .tool-disclaimer { border-color: #bbb !important; }
    .tool-doc .table-wrap, .tool-doc .stat, .tool-doc .banner { background: none !important; }
    /* The site pads table cells for a 1200px dark canvas; tighten for A4. */
    .tool-doc th, .tool-doc td { padding: 0.4rem 0.6rem 0.4rem 0 !important; }
    .tool-doc .banner   { border-left: 2px solid #000 !important; }
    .tool-doc .icon-box { display: none !important; }
    .tool-doc tr, .tool-doc .stat, .tool-doc .banner { page-break-inside: avoid; }
    /* Screen-only affordances that mean nothing on paper. */
    .tool-doc .cta-block, .tool-doc .section-divider { display: none !important; }
    /* The 1.5rem eyebrow is a screen device; on paper it overpowers the title. */
    .tool-doc .eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; margin-bottom: var(--spacing-xs); }
    .tool-doc .tool-h2 { font-size: 1.1rem !important; margin-bottom: 0.5rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .vc-layout  { grid-template-columns: 1fr; }
    /* Single column: the panel follows the inputs, so it does not stick. */
    .vc-results { position: static; }
}

@media (max-width: 900px) {
    .vc-pm-grid, .vc-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .tool-section  { padding-top: calc(80px + var(--spacing-md)); }
    /* vela.css restacks table rows as cards here and accents the leading cell
       via td[data-label="Approach"] — keyed to another page's table. Same
       treatment, keyed to position instead. */
    .tool-table th:first-child,
    .tool-table td:first-child { width: auto; }
    .tool-table td:first-child { border-top: 3px solid var(--accent); margin-top: 0.5rem; }
    .vc-results-inner { padding: var(--spacing-sm); }
    .vc-metrics    { grid-template-columns: 1fr; }
    .vc-pm-grid, .vc-steps { grid-template-columns: 1fr; }
    .vc-controls   { flex-direction: column; align-items: stretch; }
    .vc-field-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .vc-bar-fill, .vc-tab, .vc-export, .vc-secondary, .tool-pagelink { transition: none; }
}