/*
 * Vantage Reports - client-area report view styling.
 *
 * Design tokens ported from jamf-upgrade/tools/proposal-server/public/styles.css
 * (Inter / JetBrains Mono, dark severity palette, spacing scale). Fonts are
 * NOT loaded from a CDN (WHMCS CSP) -- the stack falls back to system fonts
 * that visually match Inter/JetBrains Mono closely (-apple-system/Segoe UI
 * and ui-monospace/SFMono/Consolas respectively).
 *
 * Contrast (WCAG 2.2 AA): every text/background and chip pairing below was
 * computed (relative-luminance formula, WCAG 2.x) and meets >=4.5:1 for body
 * text, >=3:1 for large text / UI boundaries / focus indicators. Severity
 * and tone are never color-alone (1.4.1) -- every chip carries a text label
 * in the markup (see partials/_cves.tpl, _risk.tpl, _prose.tpl).
 *
 *   Light theme                                        Ratio
 *   --vr-text on --vr-bg (#1a1a25 / #fff)               17.24:1
 *   --vr-text-secondary on --vr-bg (#4b5563 / #fff)      7.56:1
 *   vr-sev-critical text on chip bg (#7f1d1d / #fee2e2)   8.20:1
 *   vr-sev-high text on chip bg (#7c2d12 / #ffedd5)       8.18:1
 *   vr-sev-medium text on chip bg (#1e3a8a / #dbeafe)     8.49:1
 *   vr-sev-low/info text on chip bg (#334155 / #f1f5f9)   9.45:1
 *   vr-tone-good text on chip bg (#065f46 / #d1fae5)      derived >7:1
 *   focus ring --vr-focus (#2563eb) on --vr-bg (#fff)     5.17:1
 *
 *   Dark theme
 *   --vr-text on --vr-bg (#f0f0f0 / #0a0a0f)             17.33:1
 *   --vr-text-secondary on --vr-bg (#b7b7c2 / #0a0a0f)    9.94:1
 *   vr-sev-critical (#f87171) on --vr-bg (#0a0a0f)         7.14:1
 *   vr-sev-high (#fb923c) on --vr-bg (#0a0a0f)             8.73:1
 *   vr-tone-good (#4ade80) on --vr-bg (#0a0a0f)           11.33:1
 *   accent-gold (#f5c518) on --vr-bg (#0a0a0f)            12.12:1
 *   focus ring --vr-focus-dark (#f5c518) on --vr-bg       12.12:1
 */

:root {
    --vr-bg: #ffffff;
    --vr-bg-secondary: #f6f7f9;
    --vr-bg-elevated: #ffffff;
    --vr-text: #1a1a25;
    --vr-text-secondary: #4b5563;
    --vr-border: #d8dce3;
    --vr-accent: #b8860b;
    --vr-focus: #2563eb;

    --vr-sev-critical-bg: #fee2e2; --vr-sev-critical-text: #7f1d1d;
    --vr-sev-high-bg: #ffedd5; --vr-sev-high-text: #7c2d12;
    --vr-sev-medium-bg: #dbeafe; --vr-sev-medium-text: #1e3a8a;
    --vr-sev-low-bg: #f1f5f9; --vr-sev-low-text: #334155;
    --vr-sev-info-bg: #f1f5f9; --vr-sev-info-text: #334155;

    --vr-tone-good-bg: #d1fae5; --vr-tone-good-text: #065f46;
    --vr-tone-risk-bg: #fee2e2; --vr-tone-risk-text: #7f1d1d;
    --vr-tone-warning-bg: #ffedd5; --vr-tone-warning-text: #7c2d12;
    --vr-tone-neutral-bg: #f1f5f9; --vr-tone-neutral-text: #334155;

    --vr-status-draft-bg: #f1f5f9; --vr-status-draft-text: #334155;
    --vr-status-issued-bg: #dbeafe; --vr-status-issued-text: #1e3a8a;
    --vr-status-under_review-bg: #ffedd5; --vr-status-under_review-text: #7c2d12;
    --vr-status-approved-bg: #d1fae5; --vr-status-approved-text: #065f46;
    --vr-status-superseded-bg: #fef3c7; --vr-status-superseded-text: #7c2d12;
    --vr-status-archived-bg: #f1f5f9; --vr-status-archived-text: #334155;

    --vr-cve-open-bg: #fee2e2; --vr-cve-open-text: #7f1d1d;
    --vr-cve-remediated-bg: #d1fae5; --vr-cve-remediated-text: #065f46;
    --vr-cve-mitigated-bg: #dbeafe; --vr-cve-mitigated-text: #1e3a8a;
    --vr-cve-accepted-bg: #f1f5f9; --vr-cve-accepted-text: #334155;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --vr-bg: #0a0a0f;
        --vr-bg-secondary: #12121a;
        --vr-bg-elevated: #1a1a25;
        --vr-text: #f0f0f0;
        --vr-text-secondary: #b7b7c2;
        --vr-border: #2a2a3a;
        --vr-accent: #f5c518;
        --vr-focus: #f5c518;

        --vr-sev-critical-bg: #3f1414; --vr-sev-critical-text: #f87171;
        --vr-sev-high-bg: #402410; --vr-sev-high-text: #fb923c;
        --vr-sev-medium-bg: #10244a; --vr-sev-medium-text: #93c5fd;
        --vr-sev-low-bg: #1e2532; --vr-sev-low-text: #cbd5e1;
        --vr-sev-info-bg: #1e2532; --vr-sev-info-text: #cbd5e1;

        --vr-tone-good-bg: #0f2e21; --vr-tone-good-text: #4ade80;
        --vr-tone-risk-bg: #3f1414; --vr-tone-risk-text: #f87171;
        --vr-tone-warning-bg: #402410; --vr-tone-warning-text: #fb923c;
        --vr-tone-neutral-bg: #1e2532; --vr-tone-neutral-text: #cbd5e1;

        --vr-status-draft-bg: #1e2532; --vr-status-draft-text: #cbd5e1;
        --vr-status-issued-bg: #10244a; --vr-status-issued-text: #93c5fd;
        --vr-status-under_review-bg: #402410; --vr-status-under_review-text: #fb923c;
        --vr-status-approved-bg: #0f2e21; --vr-status-approved-text: #4ade80;
        --vr-status-superseded-bg: #402410; --vr-status-superseded-text: #fbbf24;
        --vr-status-archived-bg: #1e2532; --vr-status-archived-text: #cbd5e1;

        --vr-cve-open-bg: #3f1414; --vr-cve-open-text: #f87171;
        --vr-cve-remediated-bg: #0f2e21; --vr-cve-remediated-text: #4ade80;
        --vr-cve-mitigated-bg: #10244a; --vr-cve-mitigated-text: #93c5fd;
        --vr-cve-accepted-bg: #1e2532; --vr-cve-accepted-text: #cbd5e1;
    }
}

.vantage-reports.vr-report {
    color: var(--vr-text);
    background: var(--vr-bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
}

/* ==== OPEN-DESIGN-PORT A START — pin dark palette, ONE DARK SYSTEM ====
   The :root block above only flips to the dark --vr-* values under
   @media (prefers-color-scheme: dark). The client-area shell is a single
   dark system regardless of OS preference (approved architecture,
   2026-08-05) -- with a light OS the report surface previously rendered
   its light palette (#ffffff bg, dark text) inside the dark shell, or in
   the worst case painted text colours from the dark shell against a light
   background it didn't also flip, producing near-invisible contrast.
   A class selector has higher specificity than the bare :root the media
   query targets, so this wins unconditionally in both OS colour modes.
   Values are the same dark set already audited above (WCAG 2.2 AA table
   at the top of this file) -- no new colours introduced. Revert = delete
   this block; the media-query-gated block still exists as a fallback for
   any -- currently none -- .vr-report-scoped markup rendered outside this
   selector. ==== */
[data-theme="strategic"] .vantage-reports.vr-report {
    --vr-bg: #0a0a0f;
    --vr-bg-secondary: #12121a;
    --vr-bg-elevated: #1a1a25;
    --vr-text: #f0f0f0;
    --vr-text-secondary: #b7b7c2;
    --vr-border: #2a2a3a;
    --vr-accent: #f5c518;
    --vr-focus: #f5c518;

    --vr-sev-critical-bg: #3f1414; --vr-sev-critical-text: #f87171;
    --vr-sev-high-bg: #402410; --vr-sev-high-text: #fb923c;
    --vr-sev-medium-bg: #10244a; --vr-sev-medium-text: #93c5fd;
    --vr-sev-low-bg: #1e2532; --vr-sev-low-text: #cbd5e1;
    --vr-sev-info-bg: #1e2532; --vr-sev-info-text: #cbd5e1;

    --vr-tone-good-bg: #0f2e21; --vr-tone-good-text: #4ade80;
    --vr-tone-risk-bg: #3f1414; --vr-tone-risk-text: #f87171;
    --vr-tone-warning-bg: #402410; --vr-tone-warning-text: #fb923c;
    --vr-tone-neutral-bg: #1e2532; --vr-tone-neutral-text: #cbd5e1;

    --vr-status-draft-bg: #1e2532; --vr-status-draft-text: #cbd5e1;
    --vr-status-issued-bg: #10244a; --vr-status-issued-text: #93c5fd;
    --vr-status-under_review-bg: #402410; --vr-status-under_review-text: #fb923c;
    --vr-status-approved-bg: #0f2e21; --vr-status-approved-text: #4ade80;
    --vr-status-superseded-bg: #402410; --vr-status-superseded-text: #fbbf24;
    --vr-status-archived-bg: #1e2532; --vr-status-archived-text: #cbd5e1;

    --vr-cve-open-bg: #3f1414; --vr-cve-open-text: #f87171;
    --vr-cve-remediated-bg: #0f2e21; --vr-cve-remediated-text: #4ade80;
    --vr-cve-mitigated-bg: #10244a; --vr-cve-mitigated-text: #93c5fd;
    --vr-cve-accepted-bg: #1e2532; --vr-cve-accepted-text: #cbd5e1;
}
/* ==== OPEN-DESIGN-PORT A END ==== */

.vr-skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--vr-bg);
    color: var(--vr-text);
    border: 2px solid var(--vr-focus);
    border-radius: 4px;
}
.vr-skip-link:focus {
    left: 8px;
    top: 8px;
}

.vantage-reports.vr-report *:focus-visible {
    outline: 3px solid var(--vr-focus);
    outline-offset: 2px;
}

.vr-back-link {
    display: inline-block;
    margin: 8px 0 16px;
    color: var(--vr-text-secondary);
    text-decoration: none;
}
.vr-back-link:hover,
.vr-back-link:focus {
    text-decoration: underline;
}

.vr-header {
    border-bottom: 1px solid var(--vr-border);
    padding-bottom: 16px;
    margin-bottom: 24px;
}
.vr-header-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.vr-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px;
}
.vr-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.vr-brand-divider {
    display: block;
    width: 1px;
    height: 28px;
    margin: 0 12px;
    background: currentColor;
    opacity: 0.25;
}
.vr-client-logo {
    display: block;
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: 6px;
}
.vr-priority {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--vr-accent);
    margin: 0 0 6px;
}
.vr-header h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--vr-text);
}
.vr-subtitle {
    color: var(--vr-text-secondary);
    margin: 0;
    max-width: 60ch;
}
.vr-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.vr-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--vr-border);
    background: var(--vr-bg-secondary);
    color: var(--vr-text);
    white-space: nowrap;
}
/* ==== OPEN-DESIGN-PORT C START — colour-coded typed chips ====
   Only .vr-chip-reference carried a colour before this; .vr-chip-ref and
   .vr-chip-classification fell back to the neutral base .vr-chip (grey),
   so the three chip TYPES weren't visually distinguishable at a glance,
   only by their text. Each type now gets its own hue from the existing
   --vr-* token set (no new colours): reference = gold/accent (flagship),
   ref = informational blue (status-issued), classification = tone
   variants applied per-value by the template (defaults to neutral grey
   when no tone class is present). Revert = delete this block. ==== */
.vr-chip-reference {
    background: color-mix(in srgb, var(--vr-accent) 18%, var(--vr-bg-elevated));
    color: var(--vr-accent);
    border-color: color-mix(in srgb, var(--vr-accent) 40%, var(--vr-border));
}
.vr-chip-ref { background: var(--vr-status-issued-bg); color: var(--vr-status-issued-text); }
.vr-chip-classification {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .3px;
    background: var(--vr-tone-neutral-bg);
    color: var(--vr-tone-neutral-text);
}
.vr-chip-classification.vr-tone-risk { background: var(--vr-tone-risk-bg); color: var(--vr-tone-risk-text); }
.vr-chip-classification.vr-tone-warning { background: var(--vr-tone-warning-bg); color: var(--vr-tone-warning-text); }
.vr-chip-classification.vr-tone-good { background: var(--vr-tone-good-bg); color: var(--vr-tone-good-text); }
/* ==== OPEN-DESIGN-PORT C END ==== */

.vr-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 16px 0 0;
}
.vr-header-meta-item dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vr-text-secondary);
    margin: 0;
}
.vr-header-meta-item dd {
    margin: 2px 0 0;
    font-weight: 600;
}

.vr-header-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.vr-audience-pills {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--vr-border);
    border-radius: 8px;
    background: var(--vr-bg-secondary);
}
.vr-pill {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--vr-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.vr-pill:hover { color: var(--vr-text); }
.vr-pill-active,
.vr-pill[aria-selected="true"] {
    background: var(--vr-bg-elevated);
    color: var(--vr-text);
    border-color: var(--vr-border);
}

.vr-export-menu-wrap { position: relative; }
.vr-utility-btn {
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid var(--vr-border);
    border-radius: 6px;
    background: var(--vr-bg-secondary);
    color: var(--vr-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.vr-export-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 160px;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--vr-border);
    border-radius: 8px;
    background: var(--vr-bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.vr-export-menu[hidden] { display: none; }
.vr-export-menu li { margin: 0; }
.vr-export-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--vr-text);
    text-decoration: none;
    font-size: 13px;
}
.vr-export-menu a:hover,
.vr-export-menu a:focus {
    background: var(--vr-bg-secondary);
}

.vr-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--vr-border);
}
.vr-section:last-child { border-bottom: none; }
.vr-section h2 {
    font-size: 1.25rem;
    margin: 0 0 4px;
}
.vr-section-subtitle {
    color: var(--vr-text-secondary);
    margin: 0 0 16px;
    max-width: 70ch;
}

.vr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 0;
}
.vr-metric-card {
    padding: 14px 16px;
    border: 1px solid var(--vr-border);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--vr-bg-secondary);
}
.vr-metric-card.vr-tone-good { border-left-color: var(--vr-tone-good-text); }
.vr-metric-card.vr-tone-risk { border-left-color: var(--vr-tone-risk-text); }
.vr-metric-card.vr-tone-warning { border-left-color: var(--vr-tone-warning-text); }
.vr-metric-card.vr-tone-neutral { border-left-color: var(--vr-border); }
.vr-metric-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--vr-text-secondary);
    margin: 0;
}
.vr-metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 4px 0 0;
}
.vr-metric-unit { font-size: .8rem; font-weight: 500; color: var(--vr-text-secondary); }
.vr-metric-detail {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--vr-text-secondary);
}

/* Tables: caption/th-scope semantics come from the .tpl; here just visual +
   reflow (1.4.10 -- the wrapper scrolls, the page body never does). */
.vr-table-scroll { max-width: 100%; }
.vr-table { width: 100%; border-collapse: collapse; }
.vr-table caption {
    text-align: left;
    font-weight: 600;
    padding: 4px 0 8px;
    color: var(--vr-text-secondary);
}
.vr-table th, .vr-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--vr-border);
    text-align: left;
    vertical-align: top;
}
.vr-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--vr-text-secondary); }

/* Badges (severity / tone / status / CVE status) -- ALWAYS paired with a
   text label in markup; color is a reinforcing signal, never the only one. */
.va-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.vr-sev-critical, .vr-cve-open { background: var(--vr-sev-critical-bg); color: var(--vr-sev-critical-text); }
.vr-sev-high { background: var(--vr-sev-high-bg); color: var(--vr-sev-high-text); }
.vr-sev-medium { background: var(--vr-sev-medium-bg); color: var(--vr-sev-medium-text); }
.vr-sev-low, .vr-sev-info { background: var(--vr-sev-low-bg); color: var(--vr-sev-low-text); }
.vr-cve-remediated { background: var(--vr-cve-remediated-bg); color: var(--vr-cve-remediated-text); }
.vr-cve-mitigated { background: var(--vr-cve-mitigated-bg); color: var(--vr-cve-mitigated-text); }
.vr-cve-accepted { background: var(--vr-cve-accepted-bg); color: var(--vr-cve-accepted-text); }
.vr-tone-good { background: var(--vr-tone-good-bg); color: var(--vr-tone-good-text); }
.vr-tone-risk { background: var(--vr-tone-risk-bg); color: var(--vr-tone-risk-text); }
.vr-tone-warning { background: var(--vr-tone-warning-bg); color: var(--vr-tone-warning-text); }
.vr-tone-neutral { background: var(--vr-tone-neutral-bg); color: var(--vr-tone-neutral-text); }
.va-badge-status-draft { background: var(--vr-status-draft-bg); color: var(--vr-status-draft-text); }
.va-badge-status-issued { background: var(--vr-status-issued-bg); color: var(--vr-status-issued-text); }
.va-badge-status-under_review { background: var(--vr-status-under_review-bg); color: var(--vr-status-under_review-text); }
.va-badge-status-approved { background: var(--vr-status-approved-bg); color: var(--vr-status-approved-text); }
.va-badge-status-superseded { background: var(--vr-status-superseded-bg); color: var(--vr-status-superseded-text); }
.va-badge-status-archived { background: var(--vr-status-archived-bg); color: var(--vr-status-archived-text); }

.vr-finding-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vr-finding-card {
    padding: 12px 14px;
    border: 1px solid var(--vr-border);
    border-radius: 8px;
    background: var(--vr-bg-secondary);
}
.vr-finding-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vr-finding-title { font-weight: 600; }
.vr-finding-detail { margin: 4px 0; }
.vr-finding-controls { margin: 6px 0 0; font-size: 12px; }

.vr-reasons { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vr-reason-card { padding: 12px 14px; border: 1px solid var(--vr-border); border-radius: 8px; background: var(--vr-bg-secondary); }
.vr-reason-card h3 { margin: 0 0 6px; font-size: 1rem; }

.vr-diagram { margin-bottom: 20px; }
.vr-diagram-caption { color: var(--vr-text-secondary); margin: 0 0 10px; max-width: 70ch; }
.vr-diagram-flow, .vr-diagram-decision {
    margin: 0;
    padding-left: 22px;
}
.vr-diagram-flow li, .vr-diagram-decision li { margin-bottom: 6px; }
.vr-diagram-stage-detail { color: var(--vr-text-secondary); }
.vr-diagram-root { margin: 0 0 8px; }

.vr-deliverables, .vr-assumptions, .vr-prose-list { margin: 6px 0; padding-left: 20px; }
.vr-totals { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 0; }
.vr-totals-item dt { font-size: 11px; text-transform: uppercase; color: var(--vr-text-secondary); margin: 0; }
.vr-totals-item dd { margin: 2px 0 0; font-weight: 700; }

.vr-authorization dl.vr-auth-meta { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 16px; }
.vr-auth-meta-item dt { font-size: 11px; text-transform: uppercase; color: var(--vr-text-secondary); margin: 0; }
.vr-auth-meta-item dd { margin: 2px 0 0; font-weight: 600; }
.vr-auth-note { margin-top: 12px; }

.vr-cve-headline, .vr-cve-rollup { margin: 0 0 10px; }
.vr-caveat { font-size: 13px; margin-top: 12px; }

.vr-prose-freeform { white-space: normal; }

/* Upsell band (UpsellCalculator + _upsell.tpl): honesty-gated, only ever
   rendered when the bundle is genuinely cheaper (U4) -- styled as a
   positive/informational callout, never as a false alarm. */
.vr-upsell-band {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--vr-tone-good-text);
    border-radius: 8px;
    background: var(--vr-tone-good-bg);
}
.vr-upsell-heading { margin: 0 0 6px; font-size: 1rem; color: var(--vr-tone-good-text); }
.vr-upsell-copy { margin: 0 0 10px; }
.vr-upsell-table td, .vr-upsell-table th { padding: 4px 8px; }
.vr-upsell-note { margin: 8px 0 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reflow (1.4.10): at narrow widths the body never scrolls horizontally;
   only table/diagram wrappers (.vr-table-scroll, overflow-x:auto inline
   style applied alongside) do. */
.vr-journey-nav { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.vr-stepper { margin: 0 0 28px; overflow-x: auto; padding: 4px 2px 12px; }
.vr-stepper ol { display: flex; min-width: 720px; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vr-step { flex: 1 1 0; min-width: 112px; border: 1px solid var(--vr-border); border-radius: 8px; background: var(--vr-bg-secondary); }
.vr-step a { display: block; min-height: 76px; padding: 10px; color: var(--vr-text); text-decoration: none; }
.vr-step a:hover, .vr-step a:focus { text-decoration: underline; background: var(--vr-bg-elevated); }
.vr-step-number { display: block; font-weight: 700; color: var(--vr-text-secondary); }
.vr-step-label { display: block; margin-top: 4px; font-weight: 600; }
.vr-step-status { margin: 0; padding: 0 10px 10px; color: var(--vr-text-secondary); font-size: .8rem; }
.vr-step-complete { border-color: var(--vr-tone-good-text); }
.vr-step-pending { border-color: var(--vr-accent); }
.vr-step-blocked { border-color: var(--vr-tone-risk-text); }
.vr-journey-card { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--vr-border); border-left-width: 5px; border-radius: 8px; background: var(--vr-bg-secondary); }
.vr-journey-card h3 { margin: 0 0 6px; }
.vr-journey-card-complete { border-left-color: var(--vr-tone-good-text); }
.vr-journey-card-pending { border-left-color: var(--vr-accent); }
.vr-journey-card-blocked { border-left-color: var(--vr-tone-risk-text); }
.vr-journey-status { margin: 0 0 6px; }
.vr-journey-evidence-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.vr-journey-context { margin: 10px 0 0; }

@media (max-width: 480px) {
    .vr-header-top { flex-direction: column; }
    .vr-header-controls { flex-direction: column; align-items: stretch; }
    .vr-metrics-grid { grid-template-columns: 1fr; }
    .vr-journey-nav { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* ------------------------------------------------------------------ */
/* Narrative variant (strategic-report-v2 FY2025 port) + 403 gate.    */
/* ------------------------------------------------------------------ */
.vr-narrative-h {
    margin: 20px 0 8px;
    font-weight: 600;
    color: var(--vr-accent);
}
.vr-narrative-p { margin: 0 0 12px; line-height: 1.6; }
.vr-narrative-note {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: var(--vr-bg-secondary);
    border-left: 3px solid var(--vr-border);
    border-radius: 4px;
}
.vr-narrative-diagram { margin: 12px 0; }
.vr-diagram-source {
    background: var(--vr-bg-elevated);
    border: 1px solid var(--vr-border);
    border-radius: 6px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}

/* ==== MERMAID RENDERED STATE (19P-210, 2026-08-10) ====
   .vr-diagram-source above is the pre-render / fallback presentation and
   stays exactly as it was: readable monospace diagram source, which is what
   this view showed before Mermaid was wired up and what it still shows if
   the vendored runtime fails to load or a diagram fails to parse.

   Once Mermaid has swapped the element's contents for an <svg> it sets
   data-processed="true" on that element, so keying off that attribute means
   the styling can never disagree with the actual rendered state.
   Revert = delete this block. */
.vr-diagram-source.mermaid[data-processed="true"] {
    background: none;
    border: none;
    padding: 0;
    text-align: center;
    white-space: normal;
    overflow-x: auto;
}
.vr-diagram-source.mermaid[data-processed="true"] svg {
    max-width: 100%;
    height: auto;
}
/* Failed parse: explicitly hold the source-text presentation. */
.vr-diagram-source.mermaid[data-vr-mermaid-error] {
    white-space: pre;
}

/* 403 access-denied page. Text-first (never colour-alone): the heading
   states the denial explicitly, meeting WCAG 1.4.1. */
.vr-403 {
    max-width: 640px;
    margin: 48px auto;
    padding: 28px 32px;
    background: var(--vr-bg-secondary);
    border: 1px solid var(--vr-sev-high-text);
    border-radius: 10px;
    text-align: center;
}
.vr-403-title { margin: 0 0 12px; font-size: 1.5rem; color: var(--vr-sev-high-text); }
.vr-403-body { margin: 0 0 10px; line-height: 1.6; }
.vr-403-reason { margin: 0 0 18px; font-size: 0.875rem; }

/* ==== DESIGN-FIX 4 START — journey stepper ==== */
/* clientjourney.tpl:44-70 emits .vr-journey-steps/.vr-journey-step/
   .vr-journey-step-heading/.vr-journey-status-{status}; no rule for any of
   them existed in any stylesheet, so the list rendered as a UA-default <ol>.
   Ports the intent of the orphaned .vr-journey-card* rules (:471-475) onto the
   classes actually emitted. Revert = delete this block. */
.vr-journey-steps {
    list-style: none;
    counter-reset: vr-step;
    margin: 0;
    padding: 0 0 0 2.25rem;
    position: relative;
    display: grid;
    gap: 12px;
}
.vr-journey-steps::before {
    content: "";
    position: absolute;
    left: 0.6875rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    background: var(--vr-border);
}
.vr-journey-step {
    counter-increment: vr-step;
    position: relative;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--vr-border);
    border-left-width: 5px;
    border-left-color: var(--vr-border);
    border-radius: 8px;
    background: var(--vr-bg-secondary);
}
.vr-journey-step::before {
    content: counter(vr-step);
    position: absolute;
    left: -2.25rem;
    top: 0.75rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--vr-bg);
    background: var(--vr-accent);
    border: 2px solid var(--vr-bg);
}
.vr-journey-step-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.vr-journey-step-heading h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vr-text);
}
.vr-journey-step > p {
    margin: 4px 0 0;
    color: var(--vr-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Status pills. The template emits vr-journey-status-{status}; the existing
   colour table is keyed va-badge-status-{status}. Map the journey vocabulary
   onto the same tokens rather than duplicating values. */
.vr-journey-status { flex: 0 0 auto; }
.vr-journey-status-available,
.vr-journey-status-not_started,
.vr-journey-status-draft     { background: var(--vr-status-draft-bg);    color: var(--vr-status-draft-text); }
.vr-journey-status-issued,
.vr-journey-status-active,
.vr-journey-status-in_progress { background: var(--vr-status-issued-bg); color: var(--vr-status-issued-text); }
.vr-journey-status-pending,
.vr-journey-status-under_review { background: var(--vr-status-under_review-bg); color: var(--vr-status-under_review-text); }
.vr-journey-status-approved,
.vr-journey-status-complete,
.vr-journey-status-completed { background: var(--vr-status-approved-bg);  color: var(--vr-status-approved-text); }
.vr-journey-status-superseded { background: var(--vr-status-superseded-bg); color: var(--vr-status-superseded-text); }
.vr-journey-status-archived  { background: var(--vr-status-archived-bg);  color: var(--vr-status-archived-text); }
.vr-journey-status-blocked,
.vr-journey-status-failed    { background: var(--vr-tone-risk-bg);        color: var(--vr-tone-risk-text); }

/* Rail accent mirrors the pill so state is readable at a glance without
   relying on colour alone (the text label is always present). */
.vr-journey-step:has(.vr-journey-status-approved),
.vr-journey-step:has(.vr-journey-status-complete),
.vr-journey-step:has(.vr-journey-status-completed) { border-left-color: var(--vr-tone-good-text); }
.vr-journey-step:has(.vr-journey-status-pending),
.vr-journey-step:has(.vr-journey-status-under_review) { border-left-color: var(--vr-accent); }
.vr-journey-step:has(.vr-journey-status-blocked),
.vr-journey-step:has(.vr-journey-status-failed) { border-left-color: var(--vr-tone-risk-text); }
.vr-journey-step:has(.vr-journey-status-issued),
.vr-journey-step:has(.vr-journey-status-active) { border-left-color: var(--vr-status-issued-text); }
/* ==== DESIGN-FIX 4 END ==== */

/* ==== DESIGN-FIX 5 START — spec card primitive ==== */
/* REPORT-DESIGN-SPEC.md §4 card primitive, expressed in the deployed --vr-*
   namespace. Registers the spec's class names as aliases of the existing
   report card shapes; .vr-section stays flat by design (prose, not cards).
   Revert = delete this block.

   OPEN-DESIGN-PORT G (2026-08-05, measured live): the parent theme's
   templates/twenty-one/css/custom.css ships its OWN
   ".card, .vantage-card, .vantage-widget, .panel" rule with every
   property !important. That selector list and this one both resolve to
   specificity (0,1,0) for the shared ".vantage-card" class, and a normal
   declaration never beats an !important one regardless of source order --
   measured computed style on a live .vantage-card probe showed
   box-shadow:none / background:var(--card) / border:var(--border), i.e.
   the PARENT's values, not these. Added !important here so the tie
   resolves by source order instead (this module's <link> is emitted in
   the page body, after the parent's <head> <link>, so it now wins). Only
   ".vantage-card" collides with that parent rule today (.kpi-card /
   .vr-metric-card / .feature-card / .vr-finding-card are not in the
   parent's selector list) -- !important is applied to the whole shared
   block anyway so all five stay immune to the same class of collision. */
.vantage-card,
.feature-card,
.kpi-card,
.vr-metric-card,
.vr-finding-card {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    background: var(--vr-bg-elevated) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
    padding: 16px 18px;
}
.vantage-card > :first-child,
.feature-card > :first-child,
.kpi-card > :first-child,
.vr-metric-card > :first-child,
.vr-finding-card > :first-child { margin-top: 0; }
.vantage-card > :last-child,
.feature-card > :last-child,
.kpi-card > :last-child,
.vr-metric-card > :last-child,
.vr-finding-card > :last-child { margin-bottom: 0; }

.kpi-card,
.vr-metric-card { display: flex; flex-direction: column; gap: 4px; }
.kpi-card .vr-metric-label,
.vr-metric-card .vr-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--vr-text-secondary);
}
.kpi-card .vr-metric-value,
.vr-metric-card .vr-metric-value {
    /* Literal family, not var(--font-mono) -- that custom property is
       declared by the client-area theme (report-tokens.css / child
       vantage.css), not this module, so a KPI card rendered before either
       loads (or on a theme that never declares it) fell back straight to
       the browser default rather than JetBrains Mono. This module now
       loads JetBrains Mono itself (see clientjourney.tpl /
       clientreportdetail.tpl <link>), so the literal family always
       resolves. */
    font-family: "JetBrains Mono", var(--font-mono, ui-monospace), monospace;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--vr-text);
}

/* Journey steps adopt the same primitive (elevation + shadow) on top of the
   Fix 4 geometry, so the two surfaces read as one system. */
.vr-journey-step {
    background: var(--vr-bg-elevated);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
    border-top-color: rgba(255, 255, 255, 0.08);
    border-right-color: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Section rule stays flat but gets a token-driven divider so sections read as
   deliberate, not undesigned. */
.vr-section { border-bottom-color: var(--vr-border); }
/* ==== DESIGN-FIX 5 END ==== */

/* ==== OPEN-DESIGN-PORT B START — eleven-step lifecycle stepper + context strip ====
   Ported from Open Design's whmcs-child-theme/templates/vantage-guided/
   includes/vantage-journey-stepper.tpl (.vg-shell/.vg-top/.vg-stepper/
   .vg-context), reskinned onto this file's own --vr-* namespace instead of
   the source's oklch() --vg-* palette so it themes identically to the rest
   of the report surface (light default / forced-dark under
   .vantage-reports.vr-report, see OPEN-DESIGN-PORT A). Reconciled from the
   source's 8 steps up to the canonical 11 (added Records, Compatibility,
   Embeds). This is a distinct, ADDITIVE navigational component -- it does
   NOT replace .vr-journey-steps (Fix 4 above), which renders the real
   per-ticket step data returned by the controller; this stepper is the
   fixed lifecycle map the ticket's steps are a subset of. Revert = delete
   this block plus the markup in clientjourney.tpl between the "OPEN-DESIGN
   PORT B" comments. ==== */
.vr-lifecycle {
    margin: 0 0 28px;
    border: 1px solid var(--vr-border);
    border-radius: 10px;
    background: var(--vr-bg-elevated);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}
.vr-lifecycle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--vr-border);
    font-size: 12px;
    color: var(--vr-text-secondary);
}
.vr-lifecycle-top strong { color: var(--vr-text); }
.vr-lifecycle-progress {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--vr-accent);
}
.vr-lifecycle-stepper {
    display: grid;
    grid-template-columns: repeat(11, minmax(140px, 1fr));
    overflow-x: auto;
    scrollbar-width: thin;
}
.vr-lifecycle-step {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 8px 10px 8px 12px;
    border-right: 1px solid var(--vr-border);
    color: var(--vr-text-secondary);
    text-decoration: none;
}
.vr-lifecycle-step:last-child { border-right: none; }
.vr-lifecycle-step:hover,
.vr-lifecycle-step[aria-current="step"] { color: var(--vr-text); background: var(--vr-bg-secondary); }
.vr-lifecycle-step[aria-current="step"]::after {
    content: "";
    position: absolute;
    inset: auto 8px 0 12px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--vr-accent);
}
.vr-lifecycle-step-num {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--vr-border);
    border-radius: 999px;
    background: var(--vr-bg);
    color: var(--vr-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
}
.vr-lifecycle-step.is-complete .vr-lifecycle-step-num {
    border-color: var(--vr-accent);
    background: var(--vr-accent);
    color: var(--vr-bg);
}
.vr-lifecycle-step[aria-current="step"] .vr-lifecycle-step-num {
    border-color: var(--vr-accent);
    color: var(--vr-accent);
}
.vr-lifecycle-step-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.01em;
}
.vr-lifecycle-step-hint {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    color: var(--vr-text-secondary);
    opacity: .8;
}
@media (max-width: 900px) {
    .vr-lifecycle-stepper { grid-template-columns: repeat(11, minmax(190px, 1fr)); }
}

/* Mirror/Cutover: no backend data source exists for either yet (no table,
   no Artifact::TYPES value, no route). Distinct dashed/badge treatment so
   "unavailable" reads differently from a live, faded/hint-only step rather
   than relying on hint text alone. */
.vr-lifecycle-step-unavailable {
    border-style: dashed;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 6px,
        var(--vr-bg-secondary) 6px,
        var(--vr-bg-secondary) 12px
    );
    cursor: not-allowed;
}
.vr-lifecycle-step-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border: 1px dashed var(--vr-border);
    border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vr-text-secondary);
}
.vr-lifecycle-step-loading { opacity: .6; pointer-events: none; }
.vr-lifecycle-step.is-active-fragment { color: var(--vr-text); background: var(--vr-bg-secondary); }
#vr-journey-content-pane { transition: opacity .12s ease; }
.vr-fragment-hint { color: var(--vr-text-secondary); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; }
.vr-fragment-restore { margin-top: 12px; }

/* ==== JOURNEY SIDE-RAIL + RESPONSIVE + FRAGMENT CARD (design-queue pass 2)
   ====
   1) .vr-journey-shell: two-column grid (rail + content) at desktop widths,
      collapsing to a single stacked column with the existing horizontal
      stepper at <=900px -- the .vr-lifecycle-stepper markup itself is
      unchanged, only its layout direction and the shell's grid respond.
      Rail pattern (bordered container, left-accent active row, indent-on-
      hover) is the same language as strategic-report-v2's .sidebar/.nav-item
      and jamf-proposal's .sidebar .nav .nav-item -- reused via the existing
      --vr-* tokens, not a new palette.
   2) .vr-fragment.vr-card: bordered/elevated card container for async
      fragment content (Authorization, Proposal, etc.) instead of flat text,
      matching the .vr-lifecycle container's own card treatment
      (border + radius + shadow + elevated background).
*/
.vr-journey-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}
@media (min-width: 901px) {
    .vr-journey-shell {
        grid-template-columns: 260px minmax(0, 1fr);
    }
    .vr-lifecycle {
        position: sticky;
        top: 16px;
        margin: 0;
        align-self: start;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }
    .vr-lifecycle-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .vr-lifecycle-stepper {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        overflow-x: visible;
    }
    .vr-lifecycle-step {
        grid-template-columns: 24px minmax(0, 1fr);
        border-right: none;
        border-left: 3px solid transparent;
        min-height: 48px;
    }
    .vr-lifecycle-step:hover { padding-left: 14px; }
    .vr-lifecycle-step[aria-current="step"] {
        border-left-color: var(--vr-accent);
        background: linear-gradient(90deg, color-mix(in srgb, var(--vr-accent) 15%, transparent), transparent);
    }
    .vr-lifecycle-step[aria-current="step"]::after { display: none; }
    .vr-lifecycle-step-label,
    .vr-lifecycle-step-hint { white-space: normal; }
    .vr-context-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Fragment card: matches the .vr-lifecycle card treatment (border, radius,
   soft shadow, elevated background) instead of the previous flat block. */
.vr-fragment.vr-card {
    padding: 18px 20px;
    border: 1px solid var(--vr-border);
    border-radius: 10px;
    background: var(--vr-bg-elevated);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}
.vr-fragment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.vr-fragment-head h2 { margin: 0; }
.vr-fragment-badge {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    background: color-mix(in srgb, var(--vr-accent) 18%, var(--vr-bg-elevated));
    color: var(--vr-accent);
    border: 1px solid color-mix(in srgb, var(--vr-accent) 40%, var(--vr-border));
}
.vr-fragment-meta {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
}
.vr-fragment-meta > div {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px;
    align-items: baseline;
}
.vr-fragment-meta dt {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--vr-text-secondary);
}
.vr-fragment-meta dd {
    margin: 0;
    color: var(--vr-text);
}
.vr-fragment-empty {
    padding: 14px 16px;
    border: 1px dashed var(--vr-border);
    border-radius: 8px;
    background: var(--vr-bg-secondary);
    color: var(--vr-text-secondary);
}
.vr-fragment-empty strong { display: block; margin-bottom: 4px; color: var(--vr-text); }
.vr-fragment-empty p { margin: 0; }

/* Mobile responsiveness (design-queue item 1): verified at 375px/768px. */
@media (max-width: 768px) {
    .vr-header { padding-right: 0; }
    .vr-lifecycle-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .vr-lifecycle-stepper { grid-template-columns: repeat(11, minmax(160px, 1fr)); }
    .vr-context-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
    .vr-fragment-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .vr-lifecycle-stepper { grid-template-columns: repeat(11, minmax(150px, 1fr)); }
    .vr-lifecycle-step-hint { display: none; }
    .vr-fragment.vr-card { padding: 14px 16px; }
    .vr-fragment-meta > div { grid-template-columns: 1fr; gap: 2px; }
}

.vr-context-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 10px 16px;
    background: var(--vr-bg-secondary);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--vr-text-secondary);
    border-top: 1px solid var(--vr-border);
}
.vr-context-strip strong {
    margin-right: 5px;
    color: var(--vr-text);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* ==== OPEN-DESIGN-PORT B END ==== */

/* ==== IN-REPORT SECTION NAV (PART 1, 2026-08-09) ====
   Reuses the .vr-lifecycle/.vr-journey-shell rail treatment above verbatim
   (same tokens, same sticky/scroll behaviour, same responsive breakpoint at
   901px) for clientreportdetail.tpl's own .vr-section-nav-rail so the two
   navigation surfaces (guided journey vs. report detail) read as the same
   component family. Additive only -- revert = delete this block plus the
   "IN-REPORT SECTION NAV" markup in clientreportdetail.tpl and
   initSectionNav() in vantage-report.js. */
.vr-detail-shell { align-items: start; }
.vr-section-nav-rail { margin: 0 0 28px; }
@media (min-width: 901px) {
    .vr-detail-shell .vr-section-nav-rail {
        position: sticky;
        top: 16px;
        margin: 0;
        align-self: start;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }
}
.vr-section-nav {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    overflow-x: visible;
}
.vr-section-nav-group + .vr-section-nav-group {
    border-top: 1px solid var(--vr-border);
}
.vr-section-nav-group-label {
    display: block;
    padding: 10px 12px 4px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vr-text-secondary);
    opacity: .8;
}
.vr-section-nav-item {
    grid-template-columns: 24px minmax(0, 1fr);
    border-right: none;
    border-left: 3px solid transparent;
    min-height: 40px;
}
.vr-section-nav-item:hover { padding-left: 14px; }
.vr-section-nav-item.is-active-fragment,
.vr-section-nav-item[aria-current="true"] {
    color: var(--vr-text);
    background: linear-gradient(90deg, color-mix(in srgb, var(--vr-accent) 15%, transparent), transparent);
    border-left-color: var(--vr-accent);
}
.vr-section-nav-item .vr-lifecycle-step-label { white-space: normal; }

.vr-section-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--vr-border);
    border-radius: 10px;
    background: var(--vr-bg-elevated);
    /* Pagination must stay reachable while reading a long report. As the
       last child of #vr-main, sticky-bottom pins it to the viewport for the
       whole span of the report body, then it settles into flow at the end. */
    position: sticky;
    bottom: 16px;
    z-index: 20;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.vr-section-pager #vr-section-counter {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--vr-accent);
}
.vr-section-pager button:disabled {
    opacity: .4;
    cursor: not-allowed;
}
@media (max-width: 600px) {
    .vr-section-pager { flex-direction: column; align-items: stretch; }
}
/* ==== IN-REPORT SECTION NAV END ==== */

/* ==== OPEN-DESIGN-PORT D START — report footer (recovered from the
   pre-shrink clientreportdetail.tpl.bak-20260804T104900Z) ====
   The layout-shell rewrite that flattened the 3-column
   sidebar/main/inspector document-inspector structure (correctly -- that
   structure over-fit strategic-report-v2's document-inspector parity onto
   a SaaS dashboard page) also dropped this footer along with it, even
   though it isn't part of the 3-column structure and carries useful,
   low-risk information (preparer + report reference + generation date).
   Recovered verbatim in intent, restyled onto --vr-* tokens. Revert =
   delete this block plus the <footer> markup in clientreportdetail.tpl. ==== */
.vr-report-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--vr-border);
    color: var(--vr-text-secondary);
    font-size: 12px;
}
.vr-footer-author { color: var(--vr-text); font-weight: 600; }
.vr-footer-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vr-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--vr-border);
    border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
}
/* ==== OPEN-DESIGN-PORT D END ==== */

/* ==== OPEN-DESIGN-PORT E START — executive summary card primitive ====
   Applies the Fix 5 card primitive (.vantage-card) to the Executive
   Summary block in clientreportdetail.tpl so it reads as a distinct
   surface rather than bare paragraphs inside the flat .vr-section.
   Padding/typography only; .vantage-card's shape rules already apply via
   the shared selector list above. Revert = delete this block plus the
   class on the <div> in clientreportdetail.tpl. ==== */
.vr-summary-card { margin-top: 4px; }
.vr-summary-card p { margin: 0 0 10px; }
.vr-summary-card p:last-child { margin-bottom: 0; }
/* ==== OPEN-DESIGN-PORT E END ==== */

/* ==== OPEN-DESIGN-PORT F START — heading typography self-sufficiency ====
   Measured live (2026-08-05): .vr-section h2 computed to font-weight:300,
   font-size:20px, font-family:Inter -- the parent theme's
   templates/twenty-one/css/custom.css:~1610 sets
   `h1,h2,h3,h4,h5,h6 { font-weight:300 !important }` globally, and nothing
   in this module contested it (.vr-section h2 only set font-size, no
   !important). This module must render its target typography (JetBrains
   Mono 600 28px for h2, Inter 700 for h1) REGARDLESS of which client-area
   theme is active or whether the vantage-twenty-one child theme has been
   promoted yet -- the child theme's own fix (report-tokens.css /
   vantage.css) covers the rest of the portal, not this module's markup.
   `.vantage-reports.vr-report h2` at specificity (0,2,1) beats the
   parent's bare `h2` (0,0,1); !important is required to beat the parent's
   own !important at that lower specificity, per normal cascade rules for
   competing !important declarations (specificity still decides among
   them). Revert = delete this block; .vr-section h2's plain font-size
   rule above is unaffected. ==== */
.vantage-reports.vr-report h1 {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
.vantage-reports.vr-report h2 {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: var(--vr-text) !important;
}
.vantage-reports.vr-report h3 {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
}
/* ==== OPEN-DESIGN-PORT F END ==== */

/* ==== OPEN-DESIGN-PORT H START — work authorization / approval-parties
   craft parity (report-workauth-ui-polish-20260809, Plane 19P-189).
   CSS-only restyle: _authorization.tpl's .vr-auth-hero / .vr-auth-brand-row
   / .vr-wa-signatories-grid / .vr-wa-signatory-card markup, and
   _authorization_modal.tpl's .wa-authorize-trigger-wrap / .wa-authorize-btn
   / .wa-confirmation-modal / .wa-modal-* markup, were emitted with ZERO
   matching rules anywhere in this file -- every one of those selectors
   fell through to unstyled browser defaults (flat text list, unstyled
   <button>, no dialog surface), which is what "still lacks design" was
   reporting. No markup, no {if}/{assign}, no data-wa-authorize-url / CSRF
   token / SSO auth-state conditional was touched -- restyle only, built
   from this file's own --vr-* tokens (both light and dark stay correct)
   and the existing .vantage-card / .va-badge primitives so the section
   reads as the same system as the rest of the report, not a bespoke
   sub-theme. Revert = delete this block; markup/behavior unaffected. */

/* Hero: id + title + one-line summary + status/effort/cap on the right. */
.vr-auth-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: var(--vr-bg-elevated);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
}
.vr-auth-id {
    display: inline-block;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--vr-accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.vr-auth-hero-title { margin: 0 0 6px; }
.vr-auth-hero p { margin: 0; color: var(--vr-text-secondary); max-width: 60ch; }
.vr-auth-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    flex-shrink: 0;
}
.vr-auth-status span {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--vr-status-under_review-bg);
    color: var(--vr-status-under_review-text);
}
.vr-auth-status strong {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1.1rem;
    color: var(--vr-text);
}
.vr-auth-status small { color: var(--vr-text-secondary); font-size: 11px; }

/* Authorizing-org / provider strip. */
.vr-auth-brand-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}
.vr-auth-party {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid var(--vr-border);
    border-radius: 8px;
    background: var(--vr-bg-secondary);
}
.vr-auth-party strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.vr-auth-party span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--vr-text-secondary); }
.vr-auth-party-provider { text-align: right; }
.vr-auth-party-connector {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    border: 1px solid var(--vr-border);
    border-radius: 999px;
    background: var(--vr-bg);
}
.vr-auth-party-connector b {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--vr-accent);
}
@media (max-width: 640px) {
    .vr-auth-brand-row { flex-direction: column; align-items: stretch; }
    .vr-auth-party-provider { text-align: left; }
    .vr-auth-party-connector { align-self: center; }
}

/* Approval-party signatory cards. */
.vr-wa-signatories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 8px;
}
.vr-wa-signatory-card {
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: var(--vr-bg-elevated);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
    text-align: center;
}
.vr-wa-signatory-avatar {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--vr-accent);
    background: color-mix(in srgb, var(--vr-accent) 16%, transparent);
    border: 2px solid color-mix(in srgb, var(--vr-accent) 40%, transparent);
    overflow: hidden;
    position: relative;
}
/* report-party-photos-track1-20260809: real signatory photo, same size/
   radius/border as the initials fallback it replaces. object-fit:cover
   keeps non-square Workspace/Gravatar thumbnails from distorting. */
.vr-wa-signatory-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.vr-wa-signatory-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.vr-wa-signatory-role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vr-accent);
    margin-bottom: 6px;
}
.vr-wa-signatory-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.vr-wa-signatory-title { font-size: 12px; color: var(--vr-text-secondary); margin-bottom: 12px; line-height: 1.4; }
.vr-wa-signatory-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--vr-status-draft-bg);
    color: var(--vr-status-draft-text);
}
.vr-wa-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* journey-view-parity-20260809: inline avatar for the guided-journey
   "Approval parties" step content (vantage_reports.php's
   vantage_reports_journey_step_content()). Same visual language as
   .vr-wa-signatory-avatar (accent-tinted circle, photo-or-initials) but
   sized for an inline <dd> row rather than a standalone grid card --
   additive-only, does not modify .vr-wa-signatory-avatar or its layout. */
.vr-journey-party-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--vr-accent);
    background: color-mix(in srgb, var(--vr-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--vr-accent) 40%, transparent);
}
.vr-journey-party-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.vr-journey-party-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.vr-journey-party {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Trigger + hint above the modal. */
.wa-authorize-trigger-wrap {
    margin: 24px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--vr-border);
    text-align: center;
}
.wa-authorize-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 32px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: var(--vr-accent);
    color: var(--vr-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wa-authorize-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.wa-authorize-btn:active { transform: translateY(0); }
.wa-btn-icon { font-size: 15px; }
.wa-authorize-hint {
    margin: 10px auto 0;
    max-width: 56ch;
    font-size: 12px;
    color: var(--vr-text-secondary);
}

/* Confirmation modal. */
.wa-confirmation-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}
.wa-confirmation-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.wa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wa-modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--vr-border);
    border-radius: 12px;
    background: var(--vr-bg-elevated);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.wa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--vr-border);
}
.wa-modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--vr-accent); }
.wa-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--vr-text-secondary);
    cursor: pointer;
    padding: 2px 6px;
}
.wa-modal-close:hover { color: var(--vr-text); }
.wa-modal-body { padding: 20px 22px; }
.wa-modal-body h4 { margin: 0 0 10px; font-size: 13px; }
.wa-modal-summary {
    border: 1px solid var(--vr-border);
    border-radius: 8px;
    padding: 2px 0;
    margin-bottom: 16px;
    background: var(--vr-bg-secondary);
}
.wa-modal-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--vr-border);
}
.wa-modal-summary-row:last-child { border-bottom: none; }
.wa-modal-summary-row span:first-child { color: var(--vr-text-secondary); }
.wa-modal-summary-row span:last-child {
    font-weight: 600;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    text-align: right;
}
.wa-modal-summary-row.wa-modal-total {
    border-top: 1px solid var(--vr-border);
    margin-top: 2px;
}
.wa-modal-summary-row.wa-modal-total span:last-child { color: var(--vr-accent); font-size: 15px; font-weight: 700; }
.wa-modal-legal { font-size: 12px; line-height: 1.6; color: var(--vr-text-secondary); margin: 0 0 4px; }
.wa-modal-note { margin-top: 8px; }
.wa-authorize-status {
    padding: 0 22px;
    min-height: 1px;
}
.wa-authorize-recorded {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--vr-tone-good-text);
    font-weight: 600;
}
.wa-modal-actions {
    display: flex;
    gap: 10px;
    padding: 18px 22px;
    border-top: 1px solid var(--vr-border);
}
.wa-modal-cancel {
    flex: 1;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--vr-border);
    border-radius: 8px;
    background: transparent;
    color: var(--vr-text-secondary);
    cursor: pointer;
}
.wa-modal-cancel:hover { color: var(--vr-text); border-color: var(--vr-text-secondary); }
.wa-modal-authorize {
    flex: 2;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    background: var(--vr-accent);
    color: var(--vr-bg);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.wa-modal-authorize:hover:not(:disabled) { transform: translateY(-1px); }
.wa-modal-authorize:disabled {
    background: var(--vr-bg-secondary);
    color: var(--vr-text-secondary);
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 640px) {
    .wa-modal-actions { flex-direction: column; }
}
/* ==== OPEN-DESIGN-PORT H END ==== */

/* ============================================================================
   Document-viewer modal (journey-modals-20260809)
   Real quote / invoice / engagement-agreement viewers, projected live.
   ========================================================================== */
.vr-doc-trigger {
    display: inline-block;
    font: 600 0.85rem/1.2 'Inter', system-ui, sans-serif;
    color: #0b5cff;
    background: rgba(11, 92, 255, 0.08);
    border: 1px solid rgba(11, 92, 255, 0.25);
    border-radius: 6px;
    padding: 0.35em 0.75em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vr-doc-trigger:hover,
.vr-doc-trigger:focus {
    background: rgba(11, 92, 255, 0.16);
    border-color: rgba(11, 92, 255, 0.5);
    text-decoration: none;
}
.vr-doc-modal[hidden] { display: none; }
.vr-doc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    overflow-y: auto;
}
.vr-doc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 14, 30, 0.55);
    backdrop-filter: blur(2px);
}
.vr-doc-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    background: var(--vr-bg-elevated, #fff);
    color: var(--vr-text, #0b1220);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(9, 14, 30, 0.35);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vr-doc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e6e9f0;
}
.vr-doc-modal-head h2 {
    margin: 0;
    font: 700 1.05rem/1.2 'Inter', system-ui, sans-serif;
    color: #0b1220;
}
.vr-doc-modal-close {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 0.25rem;
}
.vr-doc-modal-close:hover,
.vr-doc-modal-close:focus { color: #0b1220; }
.vr-doc-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}
.vr-doc-modal-body:focus { outline: none; }
.vr-doc-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.vr-doc-head-row h3 {
    margin: 0;
    font: 700 1rem/1.2 'Inter', system-ui, sans-serif;
}
.vr-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
    font: 500 0.9rem/1.4 'Inter', system-ui, sans-serif;
}
.vr-doc-table th,
.vr-doc-table td {
    text-align: left;
    padding: 0.55em 0.65em;
    border-bottom: 1px solid #edf0f5;
    vertical-align: top;
}
.vr-doc-table thead th {
    font-weight: 700;
    color: #4b5563;
    border-bottom: 2px solid #e6e9f0;
}
.vr-doc-table tfoot th {
    font-weight: 700;
    border-top: 2px solid #e6e9f0;
    border-bottom: none;
}
.vr-doc-amt {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.vr-doc-empty { color: #6b7280; font-style: italic; }
.vr-doc-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1.25rem;
    margin: 0 0 1rem;
}
.vr-doc-meta > div { display: flex; flex-direction: column; }
.vr-doc-meta dt {
    font: 600 0.72rem/1.2 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}
.vr-doc-meta dd {
    margin: 0.1rem 0 0;
    font: 600 0.95rem/1.3 'Inter', system-ui, sans-serif;
    color: #0b1220;
}
.vr-doc h4 {
    margin: 1.25rem 0 0.5rem;
    font: 700 0.85rem/1.2 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4b5563;
}
.vr-doc-sub { color: #6b7280; font-weight: 500; font-size: 0.82rem; }
.vr-doc-gates { margin: 0.25rem 0 1rem 1.25rem; }
.vr-doc-gates li { margin: 0.2rem 0; }
.vr-doc-foot { margin: 0.75rem 0 0; }
.vr-doc-loading,
.vr-doc-error { color: #6b7280; font-style: italic; }
.vr-doc-error { color: #b42318; }
@media (prefers-color-scheme: dark) {
    .vr-doc-modal-dialog { background: #141a2b; }
    .vr-doc-modal-head { border-bottom-color: #26304a; }
    .vr-doc-modal-head h2 { color: #f3f5fa; }
    .vr-doc-head-row h3 { color: #f3f5fa; }
    .vr-doc-meta dd { color: #f3f5fa; }
    .vr-doc-table th,
    .vr-doc-table td { border-bottom-color: #26304a; }
    .vr-doc-table thead th,
    .vr-doc-table tfoot th { border-color: #313d5c; color: #b6c0d6; }
}

/* ==== OPEN-DESIGN-PORT B START — document modal, ONE DARK SYSTEM [19P-208] ====
   The .vr-doc-modal-* rules above hardcode a light surface (#fff, #0b1220
   text, #e6e9f0/#edf0f5 rules) and flip to dark ONLY under
   @media (prefers-color-scheme: dark). The client area is a single dark
   system regardless of OS preference, so on a light-OS client the document
   preview (quote/invoice line items) painted dark-on-light inside the dark
   shell and was effectively unreadable.

   Same remedy already applied to the report surface in OPEN-DESIGN-PORT A:
   scope to the class, not the OS. The modal markup is nested inside
   <div class="vantage-reports vr-report vr-journey"> in clientjourney.tpl
   (verified 2026-08-10), so these descendant selectors match, and their
   higher specificity beats both the base rules and the media query.

   Values are the existing audited --vr-* tokens defined in OPEN-DESIGN-PORT A;
   no new colours are introduced. The media-query block above is retained
   deliberately as a fallback for any .vr-doc-modal markup rendered outside a
   .vantage-reports.vr-report root. Revert = delete this block. ==== */
.vantage-reports.vr-report .vr-doc-modal-dialog {
    background: var(--vr-bg-elevated);
    color: var(--vr-text);
}
.vantage-reports.vr-report .vr-doc-modal-head {
    border-bottom-color: var(--vr-border);
}
.vantage-reports.vr-report .vr-doc-modal-head h2,
.vantage-reports.vr-report .vr-doc-head-row h3,
.vantage-reports.vr-report .vr-doc-meta dd {
    color: var(--vr-text);
}
.vantage-reports.vr-report .vr-doc-modal-close {
    color: var(--vr-text-secondary);
}
.vantage-reports.vr-report .vr-doc-modal-close:hover,
.vantage-reports.vr-report .vr-doc-modal-close:focus {
    color: var(--vr-text);
}
.vantage-reports.vr-report .vr-doc-table th,
.vantage-reports.vr-report .vr-doc-table td {
    border-bottom-color: var(--vr-border);
}
.vantage-reports.vr-report .vr-doc-table thead th,
.vantage-reports.vr-report .vr-doc-table tfoot th {
    border-color: var(--vr-border);
    color: var(--vr-text-secondary);
}
.vantage-reports.vr-report .vr-doc-meta dt,
.vantage-reports.vr-report .vr-doc h4,
.vantage-reports.vr-report .vr-doc-sub,
.vantage-reports.vr-report .vr-doc-empty,
.vantage-reports.vr-report .vr-doc-loading {
    color: var(--vr-text-secondary);
}
.vantage-reports.vr-report .vr-doc-error {
    color: var(--vr-sev-critical-text);
}
/* ==== OPEN-DESIGN-PORT B END ==== */