/*
* ============================================================================
* Version 1 — Bespoke Design System (V3 foundation layer)
* ============================================================================
*
* Ported from the prototype CSS in ext_docs/claude_design/ (colors_and_type.css,
* app.css, passport.css, dashboard.css, compass.css). See ADR-069 (bespoke V1
* design system, markup rewrite) and ADR-054 (Alpine islands + CSP).
*
* ADDITIVE LAYER — DO NOT use this to override existing GOV.UK-styled pages.
* This file is loaded AFTER styles.css so its tokens win WHERE V1 CLASSES ARE USED.
* To avoid clobbering existing pages, this file does TWO things deliberately:
* 1. ALL design tokens are prefixed `--v1-*`. It never redefines the existing
* bare `--font-display` / `--font-body` / `--color-*` vars from styles.css.
* 2. Element-level baseline styling (body font, heading font, link colour) is
* SCOPED to the `.v1-app` shell — never applied globally — so GOV.UK pages
* that don't opt in are visually untouched.
*
* USAGE
* - A page opts into the V1 look by extending templates/base_v1.html, which
* wraps content in `.v1-app` (the midnight-sidebar app shell). Inside that
* scope, the V1 element baselines and component classes apply.
* - Dark mode: re-maps the semantic tokens below.
* The toggle (base.html) persists the choice to localStorage.
*
* WCAG 2.2 AA
* - Status is NEVER conveyed by colour alone (SC 1.4.1): every status badge /
* score tone pairs colour with a text label and/or a shape/icon.
* - Token pairings are chosen to hold AA contrast in BOTH light and dark themes.
*
* COMPONENT INDEX (see the block comment above each for expected markup)
* .v1-app / .v1-sidebar / .v1-main / .v1-topbar — app shell
* .v1-card / .v1-panel — surfaces
* .v1-pill / .v1-tag — pills & tags
* .v1-btn (--primary / --secondary / --ghost / --teal) — buttons
* .v1-status (--green/--amber/--orange/--red/--neutral) — status badge (label + dot)
* .v1-score — score / number display
* .v1-eyebrow / .v1-tri-bullet — brand text helpers
* ============================================================================
*/
/* ============================================================================
0. WEBFONTS — self-hosted brand typefaces (woff2 in static/fonts/).
The `--v1-font-display` (Figtree) / `--v1-font-body` (Nunito Sans) tokens below
reference these families; without these @font-face rules they silently fell
back to system-ui (DEF-08). Paths are relative to this file (static/css/).
============================================================================ */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/figtree-400.woff2') format('woff2');
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/figtree-600.woff2') format('woff2');
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/figtree-700.woff2') format('woff2');
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/figtree-800.woff2') format('woff2');
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('../fonts/figtree-900.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/nunito-sans-400.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/nunito-sans-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-600.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/nunito-sans-700.woff2') format('woff2');
}
/* ============================================================================
1. DESIGN TOKENS (all `--v1-*` prefixed — never collides with styles.css)
============================================================================ */
:root {
/* ---------- BRAND PALETTE ---------- */
--v1-teal: #00c6c2; /* Pantone 2227C — accent */
--v1-teal-hover: #00a8a4;
--v1-teal-press: #008a87; /* AA text on white (3.0:1 large / use for emphasis) */
--v1-teal-dark: #006e6c; /* AA-safe teal text on light (4.6:1 on white) */
--v1-midnight: #052831; /* Pantone 5463C — primary text/bg */
--v1-midnight-90: #1e3c44;
--v1-midnight-80: #375058;
--v1-midnight-60: #697d83;
--v1-midnight-40: #9babaf;
--v1-midnight-20: #cdd4d6;
--v1-midnight-10: #e8eced;
--v1-midnight-05: rgba(5, 40, 49, 0.04);
--v1-putty: #fdf7ea; /* backgrounds, call-out boxes */
--v1-putty-dark: #f4ecd7;
--v1-putty-line: #ebe1c6;
--v1-white: #ffffff;
--v1-almond: #e0d6cc; /* INFOGRAPHICS ONLY — never text or bg */
/* ---------- STATUS PALETTE ---------- */
/* Base swatches (used for dots/markers and as borders). For TEXT on light
surfaces, use the *-text tokens below which are darkened for AA contrast. */
--v1-status-green: #4a8a5c;
--v1-status-amber: #e0a035;
--v1-status-orange: #d2762f;
--v1-status-red: #c14a3a;
--v1-status-neutral: #cdd4d6;
/* AA-contrast text variants for use on light/putty surfaces */
--v1-status-green-text: #2f6a44; /* 4.6:1 on white */
--v1-status-amber-text: #8a5d0c; /* amber is too light for text — use this */
--v1-status-orange-text: #9a4a18;
--v1-status-red-text: #97291a; /* 6.0:1 on white */
--v1-status-neutral-text: #4f5b5e;
/* Soft tint backgrounds for badges (paired with *-text above) */
--v1-status-green-bg: rgba(74, 138, 92, 0.14);
--v1-status-amber-bg: rgba(224, 160, 53, 0.18);
--v1-status-orange-bg: rgba(210, 118, 47, 0.16);
--v1-status-red-bg: rgba(193, 74, 58, 0.14);
--v1-status-neutral-bg: rgba(105, 125, 131, 0.14);
/* ---------- SEMANTIC TOKENS (light theme — default) ---------- */
--v1-bg: var(--v1-white);
--v1-bg-alt: var(--v1-putty);
--v1-bg-inverse: var(--v1-midnight);
--v1-fg: var(--v1-midnight);
--v1-fg-muted: var(--v1-midnight-80);
--v1-fg-subtle: var(--v1-midnight-60);
--v1-fg-inverse: var(--v1-putty);
--v1-accent: var(--v1-teal);
--v1-accent-fg: var(--v1-midnight); /* teal on midnight reads well */
--v1-accent-text: var(--v1-teal-dark); /* teal AS TEXT on light surfaces (AA) */
--v1-border: var(--v1-midnight-20);
--v1-border-subtle: var(--v1-midnight-10);
--v1-surface: var(--v1-white);
--v1-surface-alt: var(--v1-putty);
/* ---------- TYPEFACES ---------- */
/* Display: Figtree. Body: Nunito Sans. Each with a system-sans fallback so the
app renders fine until the .woff2 binaries are dropped into static/fonts/. */
--v1-font-display: 'Figtree', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--v1-font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--v1-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* ---------- TYPE SCALE ---------- */
--v1-fs-display-xl: 72px;
--v1-fs-display-lg: 56px;
--v1-fs-display: 44px;
--v1-fs-h1: 36px;
--v1-fs-h2: 28px;
--v1-fs-h3: 22px;
--v1-fs-h4: 18px;
--v1-fs-standfirst: 20px;
--v1-fs-body: 16px;
--v1-fs-body-sm: 14px;
--v1-fs-caption: 12px;
--v1-lh-tight: 1.0;
--v1-lh-snug: 1.15;
--v1-lh-standfirst: 1.33;
--v1-lh-body: 1.4;
--v1-lh-quote: 1.3;
--v1-lh-loose: 1.6;
--v1-fw-regular: 400;
--v1-fw-semibold: 600;
--v1-fw-bold: 700;
--v1-fw-black: 900;
/* ---------- SPACING (8pt scale) ---------- */
--v1-sp-0: 0;
--v1-sp-1: 4px;
--v1-sp-2: 8px;
--v1-sp-3: 12px;
--v1-sp-4: 16px;
--v1-sp-5: 24px;
--v1-sp-6: 32px;
--v1-sp-7: 48px;
--v1-sp-8: 64px;
--v1-sp-9: 96px;
--v1-sp-10: 128px;
/* ---------- RADIUS ---------- */
--v1-radius-0: 0;
--v1-radius-1: 2px;
--v1-radius-2: 4px;
--v1-radius-3: 8px;
--v1-radius-pill: 999px;
/* ---------- ELEVATION ---------- */
--v1-shadow-sm: 0 1px 2px rgba(5, 40, 49, 0.06);
--v1-shadow-md: 0 4px 12px rgba(5, 40, 49, 0.08);
--v1-shadow-lg: 0 12px 32px rgba(5, 40, 49, 0.12);
/* ---------- MOTION ---------- */
--v1-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--v1-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--v1-dur-fast: 140ms;
--v1-dur-med: 240ms;
--v1-dur-slow: 400ms;
/* ---------- SHELL DIMENSIONS ---------- */
--v1-sidebar-w: 240px;
}
/* ============================================================================
2. DARK THEME — re-maps semantic tokens; preserves the teal accent.
Applied via (toggle persists to localStorage).
Contrast checked AA: putty text (#fdf7ea) on midnight (#052831) ≈ 13.7:1.
============================================================================ */
[data-theme="dark"] {
--v1-bg: var(--v1-midnight);
--v1-bg-alt: var(--v1-midnight-90);
--v1-bg-inverse: var(--v1-putty);
--v1-fg: var(--v1-putty);
--v1-fg-muted: var(--v1-midnight-20);
--v1-fg-subtle: var(--v1-midnight-40);
--v1-fg-inverse: var(--v1-midnight);
--v1-accent: var(--v1-teal);
--v1-accent-fg: var(--v1-midnight);
--v1-accent-text: var(--v1-teal); /* teal on dark hits AA (5.9:1 on midnight) */
--v1-border: var(--v1-midnight-80);
--v1-border-subtle: var(--v1-midnight-90);
--v1-surface: var(--v1-midnight-90);
--v1-surface-alt: var(--v1-midnight-80);
--v1-midnight-05: rgba(255, 255, 255, 0.05);
/* On dark surfaces the base swatches already meet AA as text — re-point the
*-text tokens to the brighter base swatch so labels stay legible. */
--v1-status-green-text: #6fb585;
--v1-status-amber-text: #e0a035;
--v1-status-orange-text: #e69256;
--v1-status-red-text: #e07a6c;
--v1-status-neutral-text: var(--v1-midnight-20);
--v1-status-green-bg: rgba(74, 138, 92, 0.22);
--v1-status-amber-bg: rgba(224, 160, 53, 0.22);
--v1-status-orange-bg: rgba(210, 118, 47, 0.22);
--v1-status-red-bg: rgba(193, 74, 58, 0.24);
--v1-status-neutral-bg: rgba(205, 212, 214, 0.14);
}
/* ============================================================================
3. ELEMENT BASELINE — SCOPED to `.v1-app` only (never global).
Existing GOV.UK pages do not get the V1 fonts/colours unless they opt in.
============================================================================ */
.v1-app {
font-family: var(--v1-font-body);
font-size: var(--v1-fs-body);
line-height: var(--v1-lh-body);
color: var(--v1-fg);
background: var(--v1-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: grid;
grid-template-columns: var(--v1-sidebar-w) 1fr;
min-height: 100vh;
box-sizing: border-box;
}
.v1-app h1,
.v1-app h2,
.v1-app h3,
.v1-app h4,
.v1-app h5,
.v1-app h6 {
font-family: var(--v1-font-display);
font-weight: var(--v1-fw-bold);
line-height: var(--v1-lh-tight);
color: var(--v1-fg);
margin: 0;
letter-spacing: -0.01em;
}
.v1-app h1 { font-size: var(--v1-fs-h1); }
.v1-app h2 { font-size: var(--v1-fs-h2); }
.v1-app h3 { font-size: var(--v1-fs-h3); }
.v1-app h4 { font-size: var(--v1-fs-h4); font-weight: var(--v1-fw-semibold); }
.v1-app p { margin: 0 0 var(--v1-sp-4); line-height: var(--v1-lh-body); }
.v1-app a { color: var(--v1-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.v1-app a:hover { color: var(--v1-fg); }
/* Display + brand text helpers (opt-in classes, safe to use anywhere in .v1-app) */
.v1-display-xl { font-family: var(--v1-font-display); font-size: var(--v1-fs-display-xl); font-weight: var(--v1-fw-bold); line-height: var(--v1-lh-tight); letter-spacing: -0.02em; }
.v1-display-lg { font-family: var(--v1-font-display); font-size: var(--v1-fs-display-lg); font-weight: var(--v1-fw-bold); line-height: var(--v1-lh-tight); letter-spacing: -0.015em; }
.v1-display { font-family: var(--v1-font-display); font-size: var(--v1-fs-display); font-weight: var(--v1-fw-bold); line-height: var(--v1-lh-tight); letter-spacing: -0.01em; }
.v1-standfirst { font-family: var(--v1-font-body); font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-standfirst); line-height: var(--v1-lh-standfirst); }
.v1-caption { font-size: var(--v1-fs-caption); color: var(--v1-fg-muted); letter-spacing: 0.02em; }
/* Eyebrow / kicker — small-caps header (e.g. BUSINESS CHALLENGES).
Markup: Business challenges */
.v1-eyebrow {
font-family: var(--v1-font-display);
font-weight: var(--v1-fw-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--v1-fs-caption);
color: var(--v1-fg);
}
/* Triangle bullet — brand marker (teal). Markup:
OR inline */
.v1-tri-bullets { list-style: none; padding: 0; margin: 0; }
.v1-tri-bullets li {
position: relative;
padding-left: 22px;
margin-bottom: var(--v1-sp-3);
line-height: var(--v1-lh-body);
}
.v1-tri-bullets li::before,
.v1-tri-bullet {
content: "";
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 9px solid var(--v1-teal);
}
.v1-tri-bullets li::before { position: absolute; left: 0; top: 0.5em; }
.v1-tri-bullet { display: inline-block; margin-right: 10px; vertical-align: 1px; }
/* ============================================================================
4. APP SHELL — fixed midnight sidebar + main column.
Expected markup (provided by templates/base_v1.html):
============================================================================ */
.v1-app *,
.v1-app *::before,
.v1-app *::after { box-sizing: border-box; }
.v1-sidebar {
background: var(--v1-midnight);
color: var(--v1-putty);
font-family: var(--v1-font-body);
padding: var(--v1-sp-5) 20px;
display: flex;
flex-direction: column;
gap: 28px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
/* --- Brandmark (VERSION 1 swoosh + wordmark, inline SVG) --- */
.v1-sidebar .v1-sidebar__logo,
.v1-sidebar .v1-sidebar__logo:link,
.v1-sidebar .v1-sidebar__logo:visited,
.v1-sidebar .v1-sidebar__logo:hover {
display: flex;
align-items: center;
text-decoration: none;
border-radius: var(--v1-radius-2);
}
.v1-sidebar__logo:focus-visible {
outline: 2px solid var(--v1-teal);
outline-offset: 3px;
}
.v1-sidebar__brandmark { display: block; line-height: 0; }
.v1-sidebar__brandmark svg {
display: block;
width: 107px;
height: 22px;
}
/* --- Title block: "Deal Passport" + "Pre-qualification workspace" --- */
.v1-sidebar__title { display: block; margin-top: -10px; }
.v1-sidebar__title-name {
display: block;
font-family: var(--v1-font-display);
font-weight: var(--v1-fw-bold);
font-size: 13px;
letter-spacing: 0.02em;
color: var(--v1-white);
line-height: 1.4;
}
.v1-sidebar__title-sub {
display: block;
font-family: var(--v1-font-body);
font-weight: var(--v1-fw-regular);
font-size: 11px;
/* DEF-10: midnight-40 (#9babaf) on midnight (#052831) ≈ 4.1:1 — meets AA for
small text and matches the mockup's subtitle treatment. */
color: var(--v1-midnight-40);
line-height: 1.4;
margin-top: 2px;
}
/* --- Nav: icon + label, teal-tint active state (matches mockup) --- */
.v1-sidebar__nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--v1-sp-2); }
.v1-sidebar .v1-sidebar__link,
.v1-sidebar .v1-sidebar__link:link,
.v1-sidebar .v1-sidebar__link:visited {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
font-family: var(--v1-font-body);
font-size: 13px;
font-weight: var(--v1-fw-semibold);
color: var(--v1-midnight-20);
text-decoration: none;
border-radius: var(--v1-radius-2);
transition: background var(--v1-dur-fast) var(--v1-ease-out),
color var(--v1-dur-fast) var(--v1-ease-out);
}
.v1-sidebar__icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
color: inherit;
}
.v1-sidebar .v1-sidebar__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--v1-white); }
.v1-sidebar .v1-sidebar__link:focus-visible {
outline: 2px solid var(--v1-teal);
outline-offset: 2px;
}
.v1-sidebar .v1-sidebar__link.is-active {
background: rgba(0, 198, 194, 0.12);
color: var(--v1-white);
}
.v1-sidebar__link.is-active .v1-sidebar__icon { color: var(--v1-teal); }
/* --- Deal-in-context panel: pinned to the bottom of the sidebar --- */
.v1-sidebar__deal {
margin-top: auto;
padding-top: var(--v1-sp-4);
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.v1-sidebar__deal-label {
margin: 0 0 10px;
font-size: 10px;
font-weight: var(--v1-fw-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--v1-midnight-40);
}
.v1-sidebar__deal-name {
margin: 0;
font-family: var(--v1-font-display);
font-size: 13px;
font-weight: var(--v1-fw-bold);
color: var(--v1-white);
line-height: 1.3;
}
.v1-sidebar__deal-client {
margin: 2px 0 0;
font-size: 11px;
color: var(--v1-midnight-20);
line-height: 1.4;
}
.v1-sidebar__deal-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
}
.v1-sidebar__deal-gate {
font-size: 11px;
font-weight: var(--v1-fw-semibold);
color: var(--v1-midnight-20);
}
.v1-sidebar__deal-score {
font-family: var(--v1-font-display);
font-size: 18px;
font-weight: var(--v1-fw-bold);
color: var(--v1-teal);
line-height: 1;
}
.v1-sidebar__deal-score-max {
font-size: 11px;
font-weight: var(--v1-fw-regular);
color: var(--v1-midnight-40);
}
.v1-sidebar__deal-band {
margin: 6px 0 0;
font-size: 11px;
color: var(--v1-midnight-20);
}
/* Spacer that pushes a trailing block (e.g. deals list) to the bottom */
.v1-sidebar__spacer { margin-top: auto; }
/* Active-deals shortlist — sits directly under the primary nav (mockup). */
.v1-sidebar__deals {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--v1-sp-5);
padding-top: var(--v1-sp-4);
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.v1-sidebar__deals-label {
margin: 0 0 8px;
padding-left: 10px;
font-size: 10px;
font-weight: var(--v1-fw-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--v1-midnight-40);
}
.v1-sidebar__deal-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border-radius: var(--v1-radius-2);
font-size: 12px;
line-height: 1.3;
text-decoration: none;
color: var(--v1-midnight-20);
border-left: 2px solid transparent;
transition: background var(--v1-dur-fast) var(--v1-ease-out), color var(--v1-dur-fast) var(--v1-ease-out);
}
.v1-sidebar__deal-row:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--v1-white);
}
.v1-sidebar__deal-row.is-current {
background: rgba(0, 198, 194, 0.12);
border-left-color: var(--v1-teal);
color: var(--v1-white);
}
.v1-sidebar__deal-row-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v1-sidebar__deal-row-val {
flex-shrink: 0;
color: var(--v1-midnight-40);
font-variant-numeric: tabular-nums;
}
.v1-sidebar__deal-row.is-current .v1-sidebar__deal-row-val { color: var(--v1-teal); }
.v1-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.v1-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--v1-sp-4);
padding: 14px 28px;
border-bottom: 1px solid var(--v1-border-subtle);
background: var(--v1-surface);
flex-shrink: 0;
}
.v1-topbar__crumbs {
font-size: 12px;
color: var(--v1-fg-subtle);
display: flex;
align-items: center;
gap: var(--v1-sp-2);
}
.v1-topbar__crumbs strong { color: var(--v1-fg); font-weight: var(--v1-fw-semibold); }
.v1-topbar__crumbs .v1-sep { color: var(--v1-midnight-40); }
.v1-topbar__actions { display: flex; gap: var(--v1-sp-2); align-items: center; }
.v1-content { padding: 28px 36px 56px; }
/* ============================================================================
5. SURFACES — card & panel.
Markup:
…
(alt/putty surface, e.g. call-out)
============================================================================ */
.v1-card {
background: var(--v1-surface);
border: 1px solid var(--v1-border-subtle);
border-radius: var(--v1-radius-3);
padding: 18px 22px;
}
.v1-card--lg { padding: 22px 26px; }
.v1-card__title {
font-family: var(--v1-font-display);
font-weight: var(--v1-fw-bold);
font-size: var(--v1-fs-h4);
letter-spacing: 0.01em;
margin: 0 0 var(--v1-sp-3);
}
.v1-card__sub { font-size: 12.5px; color: var(--v1-fg-subtle); margin-bottom: 14px; }
.v1-panel {
background: var(--v1-surface-alt);
border: 1px solid var(--v1-putty-line);
border-radius: var(--v1-radius-2);
padding: 14px 16px;
}
/* Accent panel — teal hairline rail on the left (used for AI suggestions/call-outs).
Markup: …
*/
.v1-panel--accent {
border-left: 3px solid var(--v1-teal);
border-radius: 0 var(--v1-radius-2) var(--v1-radius-2) 0;
}
/* ============================================================================
6. PILLS & TAGS — neutral metadata chips (NOT status; see §8 for status).
Markup: TCV £4.2m
Public sector (subtle outline tag)
============================================================================ */
.v1-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--v1-surface-alt);
border: 1px solid var(--v1-putty-line);
padding: 3px 10px;
border-radius: var(--v1-radius-pill);
font-weight: var(--v1-fw-semibold);
color: var(--v1-fg);
font-size: 11px;
letter-spacing: 0.02em;
}
.v1-tag {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--v1-border);
color: var(--v1-fg-muted);
padding: 2px 9px;
border-radius: var(--v1-radius-pill);
font-size: 11px;
font-weight: var(--v1-fw-semibold);
}
/* ============================================================================
7. BUTTONS — pill-shaped. Variants: primary, secondary, ghost, teal.
Markup:
Cancel
============================================================================ */
.v1-btn {
font-family: var(--v1-font-body);
font-weight: var(--v1-fw-bold);
font-size: 13px;
line-height: 1.2;
padding: 8px 16px;
border-radius: var(--v1-radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--v1-dur-fast) var(--v1-ease-out),
color var(--v1-dur-fast) var(--v1-ease-out),
border-color var(--v1-dur-fast) var(--v1-ease-out);
display: inline-flex;
align-items: center;
gap: var(--v1-sp-2);
text-decoration: none;
}
.v1-btn:focus-visible {
outline: 3px solid var(--v1-teal);
outline-offset: 2px;
}
.v1-btn--primary { background: var(--v1-midnight); color: var(--v1-white); }
.v1-btn--primary:hover { background: #0a3a45; color: var(--v1-white); }
.v1-btn--primary:active { background: #062a33; }
/* Secondary — outlined neutral */
.v1-btn--secondary { background: var(--v1-surface); color: var(--v1-fg); border-color: var(--v1-border); }
.v1-btn--secondary:hover { border-color: var(--v1-fg); color: var(--v1-fg); }
/* Ghost — transparent, subtle outline */
.v1-btn--ghost { background: transparent; color: var(--v1-fg); border-color: var(--v1-border); }
.v1-btn--ghost:hover { border-color: var(--v1-fg); background: var(--v1-midnight-05); color: var(--v1-fg); }
/* Teal — accent action. Midnight text on teal keeps AA (≈ 4.7:1). */
.v1-btn--teal { background: var(--v1-teal); color: var(--v1-midnight); }
.v1-btn--teal:hover { background: var(--v1-teal-hover); color: var(--v1-midnight); }
.v1-btn--sm { padding: 5px 12px; font-size: 11px; }
/* CC-1/CC-2: an styled as a button or sidebar row must not inherit the in-app
link treatment from `.v1-app a` (underline + accent colour), which outranks the
.v1-btn* rules on specificity. Without these the teal CTA rendered #006e6c on teal
(2.86:1, fails WCAG AA) and every link-button showed an underline. */
.v1-app a.v1-btn { text-decoration: none; }
.v1-app a.v1-btn--primary { color: var(--v1-white); }
.v1-app a.v1-btn--teal { color: var(--v1-midnight); }
.v1-app a.v1-btn--secondary,
.v1-app a.v1-btn--ghost { color: var(--v1-fg); }
.v1-app a.v1-sidebar__deal-row { text-decoration: none; }
/* ============================================================================
8. STATUS BADGE — WCAG 1.4.1: colour is NEVER the sole indicator.
The dot carries colour; the LABEL TEXT carries the meaning. Always include
a text label inside .v1-status. The dot alone is decorative.
Markup:
Ready
At risk
Tones: --green --amber --orange --red --neutral
============================================================================ */
.v1-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: var(--v1-fw-bold);
letter-spacing: 0.04em;
padding: 3px 10px;
border-radius: var(--v1-radius-pill);
}
.v1-status__dot {
width: 8px;
height: 8px;
border-radius: var(--v1-radius-pill);
flex-shrink: 0;
background: currentColor; /* inherits the tone's text colour */
}
.v1-status--green { color: var(--v1-status-green-text); background: var(--v1-status-green-bg); }
.v1-status--amber { color: var(--v1-status-amber-text); background: var(--v1-status-amber-bg); }
.v1-status--orange { color: var(--v1-status-orange-text); background: var(--v1-status-orange-bg); }
.v1-status--red { color: var(--v1-status-red-text); background: var(--v1-status-red-bg); }
.v1-status--neutral { color: var(--v1-status-neutral-text); background: var(--v1-status-neutral-bg); }
/* ============================================================================
9. SCORE / NUMBER DISPLAY — large display-font figure with optional unit
and a tone class. Tone sets the figure colour; ALWAYS pair with a text label
(.v1-score__label) so the meaning is not colour-only.
Markup:
82/100
Current score · On track
============================================================================ */
.v1-score { display: inline-flex; flex-direction: column; gap: 4px; }
.v1-score__value {
font-family: var(--v1-font-display);
font-weight: var(--v1-fw-black);
font-size: 44px;
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--v1-fg);
font-variant-numeric: tabular-nums;
}
.v1-score__unit {
font-size: 0.45em;
font-weight: var(--v1-fw-semibold);
color: var(--v1-fg-subtle);
vertical-align: top;
margin-left: 3px;
}
.v1-score__label {
font-size: 11px;
font-weight: var(--v1-fw-semibold);
color: var(--v1-fg-subtle);
letter-spacing: 0.02em;
}
.v1-score--green .v1-score__value { color: var(--v1-status-green-text); }
.v1-score--amber .v1-score__value { color: var(--v1-status-amber-text); }
.v1-score--orange .v1-score__value { color: var(--v1-status-orange-text); }
.v1-score--red .v1-score__value { color: var(--v1-status-red-text); }
.v1-score--sm .v1-score__value { font-size: 28px; }
.v1-score--xl .v1-score__value { font-size: 72px; }
/* ============================================================================
10. DARK-MODE TOGGLE control (used in topbar/sidebar).
Markup (see base.html):
============================================================================ */
.v1-theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--v1-font-body);
font-size: 12px;
font-weight: var(--v1-fw-semibold);
padding: 6px 12px;
border-radius: var(--v1-radius-pill);
border: 1px solid var(--v1-border);
background: transparent;
color: var(--v1-fg);
cursor: pointer;
}
.v1-theme-toggle:hover { border-color: var(--v1-fg); }
.v1-theme-toggle:focus-visible { outline: 3px solid var(--v1-teal); outline-offset: 2px; }
.v1-theme-toggle::before {
content: "";
width: 12px; height: 12px;
border-radius: var(--v1-radius-pill);
border: 2px solid currentColor;
background: transparent;
}
[data-theme="dark"] .v1-theme-toggle::before { background: currentColor; }
/* ============================================================================
11. V3 PASSPORT PAGE — layout-only composition over the components above.
No new colours: every value resolves to a --v1-* token. Scoped to .pp-*
classes used by templates/passport/. [x-cloak] hides Alpine-only controls
until the island initialises (and stays hidden if Alpine never loads).
============================================================================ */
[x-cloak] { display: none !important; }
.pp-passport { display: flex; flex-direction: column; gap: var(--v1-sp-5); max-width: 1100px; }
/* Header — identity + dual totals */
.pp-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--v1-sp-5); }
.pp-header__id { min-width: 0; }
.pp-header__title { font-size: var(--v1-fs-h1); margin-top: var(--v1-sp-2); }
.pp-header__client { color: var(--v1-fg-muted); font-weight: var(--v1-fw-semibold); margin: var(--v1-sp-1) 0 0; }
.pp-header__meta { display: flex; flex-wrap: wrap; gap: var(--v1-sp-2); margin-top: var(--v1-sp-4); align-items: center; }
.pp-header__scores { display: flex; flex-wrap: wrap; gap: var(--v1-sp-6); align-items: flex-start; }
.pp-header__score .v1-caption { margin-top: var(--v1-sp-1); max-width: 22ch; }
.pp-header__gap { display: flex; flex-direction: column; gap: var(--v1-sp-1); align-self: center; }
/* Win Strategy pin + help */
.pp-ws-pin { display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.pp-ws-pin__top { display: flex; align-items: center; justify-content: space-between; gap: var(--v1-sp-3); }
.pp-ws-pin__statement { margin: 0; font-size: var(--v1-fs-standfirst); line-height: var(--v1-lh-standfirst); }
.pp-ws-pin__empty { margin: 0; }
.pp-ws-pin__provenance { margin: 0; }
.pp-ws-pin__points { margin: var(--v1-sp-1) 0 0; padding-left: var(--v1-sp-5); display: flex; flex-direction: column; gap: var(--v1-sp-1); }
.pp-ws-pin__point { font-size: var(--v1-fs-body-sm); }
.pp-ws-pin__drift { margin: 0; }
.pp-ws-pin__meta { margin: 0; }
.pp-ws-pin__revisions { margin: 0; }
.pp-ws-pin__revisions summary { cursor: pointer; font-size: var(--v1-fs-body-sm); }
.pp-ws-pin__rev-link { display: inline-block; margin-top: var(--v1-sp-2); }
.pp-help__text { margin: 0; color: var(--v1-fg-muted); }
/* Visually-hidden utility (accessibility) */
.v1-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Pillar + dimension list */
.pp-pillar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--v1-sp-3); margin-bottom: var(--v1-sp-4); }
.pp-dims { display: flex; flex-direction: column; gap: var(--v1-sp-4); }
.pp-dim { border: 1px solid var(--v1-border-subtle); border-radius: var(--v1-radius-3); padding: var(--v1-sp-4); background: var(--v1-surface); }
.pp-dim__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--v1-sp-3); flex-wrap: wrap; }
.pp-dim__name { font-size: var(--v1-fs-h4); }
.pp-dim__current { display: flex; align-items: center; gap: var(--v1-sp-2); flex-wrap: wrap; }
.pp-dim__provenance { margin-top: var(--v1-sp-3); display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.pp-dim__anchor { margin: 0; }
.pp-dim__evidence-used { margin: 0; }
.pp-dim__guidance { margin-top: var(--v1-sp-3); display: block; }
.pp-dim__form { display: flex; flex-direction: column; gap: var(--v1-sp-4); margin-top: var(--v1-sp-4); padding-top: var(--v1-sp-4); border-top: 1px solid var(--v1-border-subtle); }
.pp-dim__field { display: flex; flex-direction: column; gap: var(--v1-sp-2); border: 0; padding: 0; margin: 0; }
.pp-dim__legend { font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-body-sm); padding: 0; }
.pp-dim__radios { display: flex; flex-wrap: wrap; gap: var(--v1-sp-3); }
.pp-dim__radio { display: inline-flex; align-items: center; gap: var(--v1-sp-1); font-size: var(--v1-fs-body-sm); }
.pp-dim__check { display: inline-flex; align-items: center; gap: var(--v1-sp-2); font-size: var(--v1-fs-body-sm); }
.pp-dim__input, .pp-dim__textarea {
font-family: var(--v1-font-body); font-size: var(--v1-fs-body-sm);
padding: var(--v1-sp-2) var(--v1-sp-3); border: 1px solid var(--v1-border);
border-radius: var(--v1-radius-2); background: var(--v1-surface); color: var(--v1-fg); width: 100%;
}
.pp-dim__input:focus-visible, .pp-dim__textarea:focus-visible { outline: 3px solid var(--v1-teal); outline-offset: 1px; }
.pp-dim__fallback { border-top: 1px dashed var(--v1-border-subtle); padding-top: var(--v1-sp-3); display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.pp-dim__actions, .pp-dim__save { display: flex; flex-wrap: wrap; gap: var(--v1-sp-2); align-items: center; }
/* Hard stops + readiness + gate control */
.pp-hardstops__list { list-style: none; margin: var(--v1-sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.pp-hardstops__item { display: flex; align-items: center; justify-content: space-between; gap: var(--v1-sp-3); padding: var(--v1-sp-2) 0; border-bottom: 1px solid var(--v1-border-subtle); }
.pp-hardstops__item:last-child { border-bottom: 0; }
.pp-hardstops__label { font-size: var(--v1-fs-body-sm); }
.pp-readiness__current { margin-top: var(--v1-sp-3); }
.pp-readiness__notes { margin: var(--v1-sp-3) 0 0; color: var(--v1-fg-muted); }
/* Activity & governance region (TG-F): annotations, actions, GPM + lifecycle.
Reuses .v1-card / .v1-status / .v1-tag / .v1-btn; only layout helpers below. */
.pp-governance { display: flex; flex-direction: column; gap: var(--v1-sp-5); }
.pp-governance__title { margin: var(--v1-sp-2) 0 0; }
.pp-gov__form {
display: flex; flex-direction: column; gap: var(--v1-sp-3);
margin-top: var(--v1-sp-3); padding-top: var(--v1-sp-3);
border-top: 1px solid var(--v1-border-subtle);
}
.pp-gov__form--lifecycle { border-top-style: dashed; }
.pp-gov__field { display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.pp-gov__label { font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-body-sm); }
.pp-gov__form select,
.pp-gov__form input,
.pp-gov__form textarea {
font-family: var(--v1-font-body); font-size: var(--v1-fs-body-sm);
padding: var(--v1-sp-2) var(--v1-sp-3); border: 1px solid var(--v1-border);
border-radius: var(--v1-radius-2); background: var(--v1-surface); color: var(--v1-fg); width: 100%;
}
.pp-gov__form select:focus-visible,
.pp-gov__form input:focus-visible,
.pp-gov__form textarea:focus-visible { outline: 3px solid var(--v1-teal); outline-offset: 1px; }
.pp-gov__list { list-style: none; margin: var(--v1-sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--v1-sp-3); }
.pp-gov__item {
display: flex; flex-direction: column; gap: var(--v1-sp-2);
padding: var(--v1-sp-3) 0; border-bottom: 1px solid var(--v1-border-subtle);
}
.pp-gov__item:last-child { border-bottom: 0; }
.pp-gov__note { margin: 0; }
.pp-gov__empty { margin: var(--v1-sp-3) 0 0; }
/* ============================================================================
PIPELINE DASHBOARD (TG-E) — additive layout helpers only.
Reuses .v1-card / .v1-panel / .v1-status / .v1-pill / .v1-tag / .v1-btn for all
tone + surface styling; the rules below are layout + two tag tones. WCAG: every
colour cue in the markup is paired with a text label or icon (see the partials).
============================================================================ */
.pl-dash { display: flex; flex-direction: column; gap: var(--v1-sp-5); }
.pl-empty { color: var(--v1-fg-subtle); font-style: italic; }
.pl-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Tag tones used by readiness escalation (the only new tag modifiers). */
.v1-tag--red { color: var(--v1-status-red-text); border-color: var(--v1-status-red); }
.v1-tag--neutral { color: var(--v1-fg-muted); }
/* Summary band */
.pl-band { padding: var(--v1-sp-4) var(--v1-sp-5); }
.pl-band__metrics { display: flex; flex-wrap: wrap; gap: var(--v1-sp-6); }
.pl-band__metric { display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.pl-band__value { font-family: var(--v1-font-display); font-weight: var(--v1-fw-black); font-size: var(--v1-fs-h2); line-height: 1; font-variant-numeric: tabular-nums; }
.pl-band__gates, .pl-band__alerts { display: flex; gap: var(--v1-sp-2); flex-wrap: wrap; }
/* Compass placeholder cards */
.pl-compass { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--v1-sp-4); }
.pl-compass__pending { color: var(--v1-fg-subtle); font-style: italic; margin: 0; }
/* Sector blocks + collapsible subsector panels */
.pl-sector { display: flex; flex-direction: column; gap: var(--v1-sp-4); }
.pl-sector__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--v1-sp-3); }
.pl-sector__actions { display: flex; gap: var(--v1-sp-2); }
.pl-sector__rollup-head { margin: var(--v1-sp-2) 0 0; }
.pl-subsector { padding: var(--v1-sp-4); }
.pl-subsector__head { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--v1-sp-3); flex-wrap: wrap; }
.pl-subsector__head:focus-visible { outline: 3px solid var(--v1-teal); outline-offset: 2px; }
.pl-subsector__title { display: flex; flex-direction: column; gap: 2px; }
.pl-subsector__lead { font-size: var(--v1-fs-body-sm); color: var(--v1-fg-subtle); }
.pl-subsector__counts { display: flex; gap: var(--v1-sp-2); flex-wrap: wrap; align-items: center; }
.pl-subsector__link { margin: var(--v1-sp-3) 0; }
/* Deal table */
.pl-table-wrap { overflow-x: auto; }
.pl-table { width: 100%; border-collapse: collapse; font-size: var(--v1-fs-body-sm); }
.pl-table th, .pl-table td { text-align: left; padding: var(--v1-sp-2) var(--v1-sp-3); border-bottom: 1px solid var(--v1-border-subtle); vertical-align: top; }
.pl-table th { font-weight: var(--v1-fw-bold); white-space: nowrap; }
.pl-row__name { font-weight: var(--v1-fw-bold); display: block; }
.pl-row__client { display: block; font-size: var(--v1-fs-body-sm); color: var(--v1-fg-subtle); }
.pl-row__nocompass { margin-top: 2px; }
.pl-row__gap { color: var(--v1-status-orange-text); font-weight: var(--v1-fw-bold); }
.pl-row__spark { display: block; margin-top: 2px; color: var(--v1-accent-text); }
.pl-sparkline { display: block; }
.pl-flag--red { color: var(--v1-status-red-text); font-weight: var(--v1-fw-bold); }
.pl-flag--amber { color: var(--v1-status-amber-text); font-weight: var(--v1-fw-bold); }
.pl-momentum { display: inline-flex; gap: 2px; font-weight: var(--v1-fw-bold); font-size: 11px; }
.pl-escalate { color: var(--v1-status-red-text); }
/* Alert badges */
.pl-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v1-sp-1); }
.pl-alert { white-space: nowrap; }
.pl-alert__glyph { font-weight: var(--v1-fw-bold); }
/* Filters */
.pl-filters { padding: var(--v1-sp-4); }
.pl-filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--v1-sp-3); }
.pl-filters__field { display: flex; flex-direction: column; gap: var(--v1-sp-1); font-size: var(--v1-fs-body-sm); font-weight: var(--v1-fw-semibold); }
.pl-filters__field select,
.pl-filters__field input {
font-family: var(--v1-font-body); padding: var(--v1-sp-2) var(--v1-sp-3);
border: 1px solid var(--v1-border); border-radius: var(--v1-radius-2);
background: var(--v1-surface); color: var(--v1-fg);
}
.pl-filters__field select:focus-visible,
.pl-filters__field input:focus-visible { outline: 3px solid var(--v1-teal); outline-offset: 1px; }
.pl-filters__actions { display: flex; gap: var(--v1-sp-2); margin-top: var(--v1-sp-3); }
/* Sales Lead cards */
.pl-personal { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--v1-sp-4); }
.pl-personal__metric { display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--v1-sp-4); }
.pl-card { display: flex; flex-direction: column; gap: var(--v1-sp-3); }
.pl-card__head { display: flex; flex-direction: column; gap: var(--v1-sp-1); }
.pl-card__scores { display: flex; gap: var(--v1-sp-5); }
.pl-card__meta { display: flex; flex-direction: column; gap: var(--v1-sp-2); margin: 0; }
.pl-card__meta div { display: flex; justify-content: space-between; gap: var(--v1-sp-3); }
.pl-card__meta dt { color: var(--v1-fg-subtle); font-size: var(--v1-fs-body-sm); margin: 0; }
.pl-card__meta dd { margin: 0; font-weight: var(--v1-fw-semibold); }
.pl-card__foot { margin-top: auto; }
.pl-gov-hint { margin-top: var(--v1-sp-4); }
/* =====================================================================
GATE 3 OUTPUTS — briefing memo, deck, present mode, print/PDF (TG-H, ADR-060)
.g3-* briefing (print-styled deal PDF)
.g3d-* deck (HTML slides)
.g3p-* present mode (full-screen projection)
All tone classes pair colour with a text label elsewhere in the markup.
===================================================================== */
/* ---- Briefing (the pre-read memo / deal PDF) ---- */
.g3-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--v1-sp-7); align-items: start; }
.g3-nav { position: sticky; top: var(--v1-sp-5); align-self: start; display: flex; flex-direction: column; gap: var(--v1-sp-3); }
.g3-nav__title { font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v1-fg-subtle); }
.g3-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.g3-nav__list a { display: block; padding: var(--v1-sp-2) var(--v1-sp-3); border-left: 2px solid var(--v1-border); color: var(--v1-fg-muted); text-decoration: none; font-size: var(--v1-fs-body-sm); }
.g3-nav__list a:hover { border-left-color: var(--v1-teal); color: var(--v1-fg); }
.g3-nav__actions { display: flex; flex-direction: column; gap: var(--v1-sp-2); margin-top: var(--v1-sp-3); }
.g3-nav__lockmsg { margin: 0; }
.g3-doc { max-width: 760px; }
.g3-header { padding-bottom: var(--v1-sp-5); border-bottom: 2px solid var(--v1-fg); margin-bottom: var(--v1-sp-6); }
.g3-eyebrow { font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v1-teal-dark); margin-bottom: var(--v1-sp-2); }
.g3-h1 { font-family: var(--v1-font-display); font-size: var(--v1-fs-display); line-height: var(--v1-lh-tight); margin: 0 0 var(--v1-sp-2); }
.g3-h2 { font-family: var(--v1-font-display); font-size: var(--v1-fs-h2); margin: 0 0 var(--v1-sp-3); }
.g3-customer { font-size: var(--v1-fs-standfirst); color: var(--v1-fg-muted); margin-bottom: var(--v1-sp-3); }
.g3-meta-row { display: flex; flex-wrap: wrap; gap: var(--v1-sp-4); align-items: center; font-size: var(--v1-fs-body-sm); color: var(--v1-fg-muted); }
.g3-status-pill { padding: 2px var(--v1-sp-2); border: 1px solid var(--v1-border); border-radius: var(--v1-radius-3); }
.g3-section { padding: var(--v1-sp-5) 0; border-bottom: 1px solid var(--v1-border); }
.g3-label { font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--v1-fg-subtle); margin-bottom: var(--v1-sp-2); }
.g3-p { line-height: var(--v1-lh-body); }
.g3-intro { color: var(--v1-fg-muted); }
.g3-spacer { margin-top: var(--v1-sp-5); }
.g3-ul { margin: 0 0 var(--v1-sp-3); padding-left: var(--v1-sp-5); line-height: var(--v1-lh-body); }
.g3-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--v1-sp-5); }
.g3-empty { color: var(--v1-fg-subtle); font-style: italic; }
.g3-empty-slot { padding: var(--v1-sp-4); border: 1px dashed var(--v1-border); }
.g3-callout { margin-top: var(--v1-sp-4); }
.g3-pitch-text { font-family: var(--v1-font-display); font-size: var(--v1-fs-h3); line-height: var(--v1-lh-quote); border-left: 3px solid var(--v1-teal); margin: 0 0 var(--v1-sp-4); padding-left: var(--v1-sp-4); color: var(--v1-fg); }
.g3-table { width: 100%; border-collapse: collapse; font-size: var(--v1-fs-body-sm); margin: var(--v1-sp-3) 0; }
.g3-table th, .g3-table td { text-align: left; padding: var(--v1-sp-2) var(--v1-sp-3); border-bottom: 1px solid var(--v1-border); vertical-align: top; }
.g3-table thead th { font-size: var(--v1-fs-caption); letter-spacing: 0.04em; text-transform: uppercase; color: var(--v1-fg-subtle); }
.g3-theme { border: 1px solid var(--v1-border); border-radius: var(--v1-radius-2); padding: var(--v1-sp-4); margin-bottom: var(--v1-sp-4); }
.g3-theme-head { display: flex; gap: var(--v1-sp-3); align-items: baseline; margin-bottom: var(--v1-sp-3); }
.g3-theme-no { font-family: var(--v1-font-display); font-weight: var(--v1-fw-black); color: var(--v1-teal-dark); }
.g3-theme-title { font-family: var(--v1-font-display); font-size: var(--v1-fs-h4); margin: 0; }
.g3-theme-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--v1-sp-3); padding: var(--v1-sp-2) 0; border-top: 1px solid var(--v1-border); }
.g3-theme-row-label { font-size: var(--v1-fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--v1-fg-subtle); }
.g3-hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--v1-sp-3); }
.g3-hs-card { border: 1px solid var(--v1-border); border-left-width: 3px; border-radius: var(--v1-radius-2); padding: var(--v1-sp-3); display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.g3-hs-card.hs-green { border-left-color: var(--v1-status-green); }
.g3-hs-card.hs-red { border-left-color: var(--v1-status-red); }
.g3-hs-card.hs-amber { border-left-color: var(--v1-status-amber); }
.g3-hs-card.hs-neutral { border-left-color: var(--v1-status-neutral); }
.g3-hs-label { font-weight: var(--v1-fw-semibold); }
.g3-comment-form { display: flex; flex-direction: column; gap: var(--v1-sp-2); margin-bottom: var(--v1-sp-4); }
.g3-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v1-sp-3); }
.g3-comment { border-left: 2px solid var(--v1-teal); padding-left: var(--v1-sp-3); }
.g3-comment-meta { font-size: var(--v1-fs-caption); color: var(--v1-fg-subtle); margin-bottom: 2px; }
.g3-foot { padding-top: var(--v1-sp-5); display: flex; justify-content: space-between; gap: var(--v1-sp-4); font-size: var(--v1-fs-caption); color: var(--v1-fg-subtle); }
/* ---- Deck (HTML slides) ---- */
.g3d-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--v1-bg-alt); }
.g3d-topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--v1-sp-4); padding: var(--v1-sp-3) var(--v1-sp-5); background: var(--v1-bg-inverse); color: var(--v1-fg-inverse); }
.g3d-topbar .v1-eyebrow { color: var(--v1-teal); }
.g3d-topbar__deal { display: block; font-weight: var(--v1-fw-semibold); }
.g3d-topbar__r { display: flex; gap: var(--v1-sp-3); align-items: center; }
.g3d-topbar__counter { font-family: var(--v1-font-mono); font-size: var(--v1-fs-body-sm); }
.g3d-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--v1-sp-6); }
.g3d-slide { width: 100%; max-width: 1000px; min-height: 540px; background: var(--v1-bg); border: 1px solid var(--v1-border); border-radius: var(--v1-radius-2); box-shadow: var(--v1-shadow-md); padding: var(--v1-sp-6); }
.g3d-slide.kind-cover { background: var(--v1-bg-inverse); color: var(--v1-fg-inverse); display: flex; flex-direction: column; justify-content: center; }
.g3d-slide.kind-decision { background: var(--v1-bg-inverse); color: var(--v1-fg-inverse); }
.g3d-title-bar { font-family: var(--v1-font-display); font-size: var(--v1-fs-h2); margin-bottom: var(--v1-sp-5); padding-bottom: var(--v1-sp-3); border-bottom: 2px solid var(--v1-teal); }
.g3d-content { font-size: var(--v1-fs-body); }
.g3d-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v1-sp-6); }
.g3d-h-label { font-size: var(--v1-fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--v1-fg-subtle); margin-bottom: var(--v1-sp-2); }
.g3d-ask-headline { font-family: var(--v1-font-display); font-size: var(--v1-fs-h3); margin-bottom: var(--v1-sp-5); }
.g3d-empty { color: var(--v1-fg-subtle); font-style: italic; }
.g3d-empty-slot { padding: var(--v1-sp-5); border: 1px dashed var(--v1-border); border-radius: var(--v1-radius-2); color: var(--v1-fg-muted); }
.g3d-cover-tag { color: var(--v1-teal); font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--v1-fs-caption); }
.g3d-cover-customer { font-size: var(--v1-fs-standfirst); margin-top: var(--v1-sp-3); color: var(--v1-midnight-20); }
.g3d-cover-h1 { font-family: var(--v1-font-display); font-size: var(--v1-fs-display-lg); line-height: var(--v1-lh-tight); margin: var(--v1-sp-2) 0; color: var(--v1-white); }
.g3d-cover-divider { width: 80px; height: 3px; background: var(--v1-teal); margin: var(--v1-sp-4) 0; }
.g3d-cover-meta { display: flex; gap: var(--v1-sp-7); flex-wrap: wrap; }
.g3d-cover-label { font-size: var(--v1-fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--v1-midnight-40); }
.g3d-cover-v { font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-h3); color: var(--v1-white); }
.g3d-pitch { font-family: var(--v1-font-display); font-size: var(--v1-fs-h2); line-height: var(--v1-lh-quote); border-left: 3px solid var(--v1-teal); padding-left: var(--v1-sp-4); margin: 0; }
.g3d-mini-table { width: 100%; border-collapse: collapse; font-size: var(--v1-fs-body-sm); }
.g3d-mini-table th, .g3d-mini-table td { text-align: left; padding: var(--v1-sp-2) var(--v1-sp-3); border-bottom: 1px solid var(--v1-border); }
.g3d-mini-table .num { text-align: right; }
.g3d-themes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--v1-sp-4); }
.g3d-theme-card { border-top: 2px solid var(--v1-teal); padding-top: var(--v1-sp-3); }
.g3d-theme-no { font-family: var(--v1-font-display); font-weight: var(--v1-fw-black); color: var(--v1-teal-dark); }
.g3d-theme-title { font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); margin-top: var(--v1-sp-2); }
.g3d-deep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v1-sp-5); }
.g3d-deep-p { line-height: var(--v1-lh-body); }
.g3d-hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--v1-sp-3); }
.g3d-hs-card { border: 1px solid var(--v1-border); border-left-width: 3px; border-radius: var(--v1-radius-2); padding: var(--v1-sp-3); display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.g3d-hs-card.hs-green { border-left-color: var(--v1-status-green); }
.g3d-hs-card.hs-red { border-left-color: var(--v1-status-red); }
.g3d-hs-card.hs-amber { border-left-color: var(--v1-status-amber); }
.g3d-hs-card.hs-neutral { border-left-color: var(--v1-status-neutral); }
.g3d-hs-label { font-weight: var(--v1-fw-semibold); }
.g3d-hs-foot { margin-top: var(--v1-sp-4); color: var(--v1-fg-muted); font-size: var(--v1-fs-body-sm); }
.g3d-rec-block { border: 1px solid var(--v1-teal); border-radius: var(--v1-radius-2); padding: var(--v1-sp-5); }
.g3d-rec-tag { color: var(--v1-teal); font-weight: var(--v1-fw-bold); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--v1-fs-caption); }
.g3d-rec-headline { font-family: var(--v1-font-display); font-size: var(--v1-fs-h3); margin: var(--v1-sp-2) 0; }
.g3d-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--v1-sp-4); padding: var(--v1-sp-3) var(--v1-sp-5); background: var(--v1-bg); border-top: 1px solid var(--v1-border); }
.g3d-nav-list { display: flex; flex-wrap: wrap; gap: var(--v1-sp-2); list-style: none; margin: 0; padding: 0; }
.g3d-nav-btn { background: none; border: 1px solid var(--v1-border); border-radius: var(--v1-radius-3); padding: 2px var(--v1-sp-2); font-size: var(--v1-fs-caption); cursor: pointer; color: var(--v1-fg-muted); }
.g3d-nav-btn.is-active { background: var(--v1-teal); color: var(--v1-midnight); border-color: var(--v1-teal); }
.g3d-nav-no { font-family: var(--v1-font-mono); }
.g3d-nav-ctrl { display: flex; gap: var(--v1-sp-2); }
/* ---- Present mode (full-screen projection) ---- */
.g3p-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--v1-midnight); color: var(--v1-putty); }
.g3p-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--v1-sp-4); padding: var(--v1-sp-3) var(--v1-sp-6); border-bottom: 1px solid rgba(255,255,255,0.08); }
.g3p-tag { font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--v1-fs-caption); color: var(--v1-teal); }
.g3p-toolbar__deal { margin-left: var(--v1-sp-4); color: var(--v1-midnight-40); font-size: var(--v1-fs-body-sm); }
.g3p-toolbar__r { display: flex; gap: var(--v1-sp-2); align-items: center; }
.g3p-seg { background: transparent; color: var(--v1-putty); border: 1px solid var(--v1-midnight-80); border-radius: var(--v1-radius-3); padding: var(--v1-sp-1) var(--v1-sp-3); font-weight: var(--v1-fw-bold); font-size: var(--v1-fs-body-sm); cursor: pointer; }
.g3p-seg.is-active { background: var(--v1-teal); color: var(--v1-midnight); border-color: var(--v1-teal); }
.g3p-exit { margin-left: var(--v1-sp-3); color: var(--v1-putty); text-decoration: underline; font-size: var(--v1-fs-body-sm); }
.g3p-body { flex: 1; overflow: auto; }
.g3p-panel { padding: var(--v1-sp-8) var(--v1-sp-9); max-width: 1280px; margin: 0 auto; }
.g3p-eyebrow { font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--v1-fs-caption); color: var(--v1-teal); margin-bottom: var(--v1-sp-3); }
.g3p-h1 { font-family: var(--v1-font-display); font-size: var(--v1-fs-display-lg); line-height: var(--v1-lh-tight); color: var(--v1-white); margin: 0; }
.g3p-h2 { font-family: var(--v1-font-display); font-size: var(--v1-fs-h1); color: var(--v1-white); margin: 0 0 var(--v1-sp-5); }
.g3p-lede { font-size: var(--v1-fs-standfirst); color: var(--v1-midnight-20); margin-top: var(--v1-sp-3); }
.g3p-stats { margin-top: var(--v1-sp-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.g3p-stat { padding: var(--v1-sp-5); background: var(--v1-midnight); }
.g3p-stat--accent { background: var(--v1-teal); color: var(--v1-midnight); }
.g3p-stat-v { font-family: var(--v1-font-display); font-weight: var(--v1-fw-black); font-size: var(--v1-fs-display); line-height: 1; }
.g3p-stat-l { font-size: var(--v1-fs-body-sm); margin-top: var(--v1-sp-2); color: var(--v1-midnight-20); }
.g3p-stat--accent .g3p-stat-l { color: var(--v1-midnight); }
.g3p-hs-row { margin-top: var(--v1-sp-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--v1-sp-4); }
.g3p-hs { background: var(--v1-midnight-90); border: 1px solid var(--v1-midnight-80); border-radius: var(--v1-radius-2); padding: var(--v1-sp-3); display: flex; flex-direction: column; gap: var(--v1-sp-2); }
.g3p-hs-label { font-size: var(--v1-fs-body-sm); color: var(--v1-putty); }
.g3p-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--v1-sp-4); }
.g3p-card { background: var(--v1-midnight-90); border: 1px solid var(--v1-midnight-80); border-radius: var(--v1-radius-2); padding: var(--v1-sp-4); }
.g3p-card-head { display: flex; gap: var(--v1-sp-2); align-items: baseline; margin-bottom: var(--v1-sp-3); }
.g3p-card-w { font-family: var(--v1-font-display); font-weight: var(--v1-fw-black); color: var(--v1-teal); }
.g3p-card-t { font-family: var(--v1-font-display); font-weight: var(--v1-fw-bold); color: var(--v1-white); }
.g3p-card-list { list-style: none; margin: 0; padding: 0; }
.g3p-card-list li { display: flex; justify-content: space-between; gap: var(--v1-sp-3); padding: var(--v1-sp-2) 0; border-bottom: 1px solid var(--v1-midnight-80); font-size: var(--v1-fs-body-sm); }
.g3p-dim-score { color: var(--v1-midnight-20); }
.g3p-snap-foot { margin-top: var(--v1-sp-6); display: flex; flex-wrap: wrap; gap: var(--v1-sp-6); padding-top: var(--v1-sp-4); border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--v1-fs-body-sm); }
.g3p-foot-l { color: var(--v1-midnight-40); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--v1-fs-caption); }
.g3p-foot-v { color: var(--v1-white); margin-left: var(--v1-sp-2); }
.g3p-panel--strategy { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; }
.g3p-h2--strategy { font-family: var(--v1-font-display); font-size: var(--v1-fs-display); color: var(--v1-white); margin: 0 0 var(--v1-sp-6); }
.g3p-statement { font-size: var(--v1-fs-h2); line-height: var(--v1-lh-quote); color: var(--v1-putty); max-width: 980px; }
.g3p-empty { color: var(--v1-midnight-40); font-style: italic; }
.g3p-themes { margin-top: var(--v1-sp-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--v1-sp-4); }
.g3p-theme { border-top: 2px solid var(--v1-teal); padding-top: var(--v1-sp-3); }
.g3p-theme-no { font-family: var(--v1-font-display); font-weight: var(--v1-fw-black); color: var(--v1-teal); }
.g3p-theme-t { color: var(--v1-white); margin-top: var(--v1-sp-2); }
.g3p-strategy-foot { margin-top: var(--v1-sp-8); padding-top: var(--v1-sp-4); border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--v1-fs-caption); color: var(--v1-midnight-40); }
@media (max-width: 880px) {
.g3-shell { grid-template-columns: 1fr; }
.g3-nav { position: static; }
.g3d-grid-2, .g3d-deep-grid { grid-template-columns: 1fr; }
}
/* ---- Print / PDF (ADR-060: the briefing IS the deal PDF) ----
Hide the app shell, sidebar, topbar, nav and interactive controls so the browser's
print-to-PDF renders the memo as a clean document. No server PDF library. */
@media print {
.v1-sidebar, .v1-topbar, .flash, .skip-link, .g3-print-hide, .g3-nav, .g3-nav__actions { display: none !important; }
.v1-app, .v1-main, .v1-content { display: block !important; margin: 0 !important; padding: 0 !important; }
.g3-shell { display: block !important; }
.g3-doc { max-width: none !important; }
body { background: #fff !important; color: #000 !important; }
.g3-section { break-inside: avoid; page-break-inside: avoid; }
.g3-theme, .g3-hs-card { break-inside: avoid; page-break-inside: avoid; }
a[href]::after { content: ""; }
}