/* ─────────────────────────────────────────────────────────
cobank.ai — Design System v1
The single source of truth. Read DESIGN-SYSTEM.md first.
Last updated: 2026-04-07
───────────────────────────────────────────────────────── */
/*
Font loading: this file does NOT @import Inter (unreliable across browsers).
Every HTML page that uses this stylesheet MUST include in BEFORE this css:
And import this file with a RELATIVE path (no leading slash):
*/
/* ── 1. TOKENS ───────────────────────────────────────────── */
:root {
/*
* FOUNDATION PASS 2026-04 — palette reconciled with cobank-brand SKILL.md §1.
* Previous values (--paper #F7F6F3, --ink #0E1A14, --ink-3 #6B736E, --rule #E6E4DD)
* were warm-leaning system tokens that diverged from the brand bible. Realigned
* to the seven palette colours defined in the bible. Tints recomputed on the new
* neutrals. See DESIGN-AUDIT-2026-04.md §1 for the full rationale.
*/
/* Color — ink (brand bible: DARK #1A1A1A, MUTED #666666) */
--ink: #1A1A1A;
--ink-2: #3A3A3A; /* derived: 60% mix of ink + muted */
--ink-3: #666666; /* brand bible MUTED */
--ink-4: #A0A0A0; /* derived placeholder neutral */
/* Color — surfaces (brand bible: CREAM #F5F3EE, LINE #D9D6CF) */
--paper: #F5F3EE;
--card: #FFFFFF; /* tolerated for cards on cream; never a page surface */
--rule: #D9D6CF;
--rule-2: #ECE9E2; /* derived: 50% rule on paper */
/* Color — brand (bible: GREEN #0F4A28, MOSS #97BC62) */
--green: #0F4A28;
--green-ink: #0A3A1F;
--green-tint: #E7EFE9; /* retuned: 8% green on new paper */
--green-glow: rgba(15, 74, 40, 0.10);
--moss: #97BC62; /* added: brand bible §1 — was missing entirely */
--moss-tint: #EDF1E0; /* derived: 20% moss on paper */
/* Color — chart ramp (monochrome green) */
--chart-1: #0F4A28;
--chart-2: #2C6B43;
--chart-3: #6BA17F;
/*
* Color — functional / alert (brand bible: ALERT #B23A2E)
* The previous --amber #D97706 violated brand §1 ("no orange"). Renamed to
* --alert and pointed at the bible's alert red. Old --amber / --amber-tint kept
* as aliases so existing rules compile; do not introduce new --amber references.
*/
--alert: #B23A2E;
--alert-ink: #8C2D24; /* derived darken for solid hover */
--alert-tint: #FBEDEB; /* derived: 8% alert on paper */
--alert-rule: #EBC8C3; /* derived: 30% alert on paper */
--amber: var(--alert); /* DEPRECATED — alias for back-compat */
--amber-tint: var(--alert-tint); /* DEPRECATED — alias for back-compat */
/* Color — audit surface (replaces amber overload) */
--audit-blue: #1B3A5B;
--audit-blue-ink: #122943;
--audit-blue-tint: #EBF0F6;
--audit-blue-rule: rgba(27, 58, 91, 0.20);
/* Color — locked / sealed (cross-surface) */
--locked-grey: #5C6670;
--locked-grey-ink: #404953;
--locked-grey-tint: #EFF1F3;
--locked-grey-rule: rgba(92, 102, 112, 0.20);
/* ── Status semantics ──────────────────────────────────────
neutral — informational, no action
info — informational, system action complete (blue)
success — positive state, validated (green)
warning — soft attention, no error (warm tan, not amber)
danger — error or required action (alert red, brand bible §1)
frozen — sealed / locked / archived (cool grey)
draft — unsaved / pending / placeholder (ink-3 on rule-2)
───────────────────────────────────────────────────────── */
--status-info: #2E5AAC;
--status-info-tint: #EAF0FB;
--status-info-rule: #C8D5EE;
--status-success: var(--green);
--status-success-tint:var(--green-tint);
--status-success-rule:#D2E6D8;
--green-rule: #D2E6D8; /* alias — used by auth/badges */
--status-warning: #8A6D2A;
--status-warning-tint:#FBF4E2;
--status-warning-rule:#E8DBB5;
--status-danger: var(--alert);
--status-danger-tint: var(--alert-tint);
--status-danger-rule: var(--alert-rule);
--status-frozen: var(--locked-grey);
--status-frozen-tint: var(--locked-grey-tint);
--status-frozen-rule: #D6DADF;
--status-draft: var(--ink-3);
--status-draft-tint: var(--rule-2);
--status-draft-rule: var(--rule);
/* Spacing (8pt grid) */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
--space-9: 64px;
--space-10: 96px;
--space-11: 128px;
/* Containers */
--container-text: 680px;
--container-form: 480px;
--container-app: 1480px;
--container-edge: 1680px;
/* Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-full: 9999px;
/* Borders */
--border: 1px solid var(--rule);
--border-2: 1px solid var(--rule-2);
/* Mono stack — single source of truth (foundation pass 2026-04, F7) */
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/*
* On-green / on-audit-blue chrome text colours (foundation pass 2026-04, F6)
* Sidebar previously used six hardcoded hex values. Tokenised here so any
* dark-surface chrome can pull the same readable, non-vibrating tints.
*/
--on-green-body: #CFE0D3; /* near-cream, primary body on green */
--on-green-muted: #9BB2A3; /* secondary on green */
--on-green-accent: #97BC62; /* MOSS — accent text on green */
--on-audit-body: #C8D2E0;
--on-audit-muted: #95A6BE;
--on-audit-accent: #6B95C8;
/* Elevation — exactly two shadows exist */
--shadow: 0 1px 2px rgba(15, 74, 40, 0.04), 0 4px 16px rgba(15, 74, 40, 0.05);
--shadow-lg: 0 2px 8px rgba(15, 74, 40, 0.06), 0 24px 48px rgba(15, 74, 40, 0.10);
/* Motion */
--motion-fast: 120ms ease-out;
--motion-base: 200ms cubic-bezier(.2,.7,.2,1);
--motion-slow: 320ms cubic-bezier(.2,.7,.2,1);
/* Type */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-feat: "cv11", "ss01", "ss03", "tnum", "calt", "kern";
/* Type scale (px / unitless line-height / weight / tracking) */
--t-display-1-size: 88px; --t-display-1-lh: 0.95; --t-display-1-tr: -0.035em;
--t-display-2-size: 64px; --t-display-2-lh: 1.00; --t-display-2-tr: -0.030em;
--t-display-3-size: 48px; --t-display-3-lh: 1.05; --t-display-3-tr: -0.025em;
--t-h1-size: 32px; --t-h1-lh: 1.15; --t-h1-tr: -0.020em;
--t-h2-size: 24px; --t-h2-lh: 1.25; --t-h2-tr: -0.015em;
--t-h3-size: 18px; --t-h3-lh: 1.35; --t-h3-tr: -0.010em;
--t-h4-size: 15px; --t-h4-lh: 1.40; --t-h4-tr: -0.005em;
--t-body-size: 15px; --t-body-lh: 1.55; --t-body-tr: 0;
--t-body-sm-size: 13.5px;--t-body-sm-lh: 1.55; --t-body-sm-tr: 0;
--t-caption-size: 12px; --t-caption-lh: 1.45; --t-caption-tr: 0;
--t-eyebrow-size: 11px; --t-eyebrow-lh: 1.30; --t-eyebrow-tr: 0.06em;
}
/* ── 2. RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-sans);
font-feature-settings: var(--font-feat);
font-size: var(--t-body-size);
line-height: var(--t-body-lh);
color: var(--ink);
background: var(--paper);
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-ink); }
input, textarea, select { font: inherit; color: inherit; }
hr { border: none; border-top: var(--border); margin: var(--space-6) 0; }
::selection { background: var(--green-tint); color: var(--ink); }
/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ── 3. TYPOGRAPHY UTILITIES ─────────────────────────────── */
.t-display-1 { font-size: var(--t-display-1-size); line-height: var(--t-display-1-lh); letter-spacing: var(--t-display-1-tr); font-weight: 600; }
.t-display-2 { font-size: var(--t-display-2-size); line-height: var(--t-display-2-lh); letter-spacing: var(--t-display-2-tr); font-weight: 600; }
.t-display-3 { font-size: var(--t-display-3-size); line-height: var(--t-display-3-lh); letter-spacing: var(--t-display-3-tr); font-weight: 600; }
.t-h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-tr); font-weight: 600; }
.t-h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-tr); font-weight: 600; }
.t-h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-tr); font-weight: 600; }
.t-h4 { font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-tr); font-weight: 600; }
.t-body { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: 400; }
.t-body-sm { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); font-weight: 400; }
.t-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-weight: 500; color: var(--ink-3); }
.t-eyebrow { font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh); letter-spacing: var(--t-eyebrow-tr); font-weight: 600; text-transform: uppercase; color: var(--ink-3); }
.t-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ink { color: var(--ink); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.ink-4 { color: var(--ink-4); }
/* ── 4. LAYOUT PRIMITIVES ────────────────────────────────── */
.container { width: 100%; max-width: var(--container-app); margin-inline: auto; padding-inline: var(--space-7); }
.container-text { width: 100%; max-width: var(--container-text); margin-inline: auto; padding-inline: var(--space-7); }
.container-form { width: 100%; max-width: var(--container-form); margin-inline: auto; padding-inline: var(--space-7); }
.container-edge { width: 100%; max-width: var(--container-edge); margin-inline: auto; padding-inline: var(--space-9); }
.stack > * + * { margin-top: var(--space-4); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-tight { display: flex; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }
/* ── 5. CARD ─────────────────────────────────────────────── */
.card {
background: var(--card);
border: var(--border);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow: var(--shadow);
}
.card-lg { padding: var(--space-7); border-radius: var(--radius-lg); }
.card-flat { box-shadow: none; }
.card-title { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-tr); font-weight: 600; }
.card-hint { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-1); }
.card > .card-title + .card-hint { margin-bottom: var(--space-5); }
/* ── Data card (extends .card with header + body slot) ───── */
.card__header {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.card__header .card__title { /* shorter than .card-title, lives inside header row */
font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-tr);
font-weight: 600;
}
.card__header .card__hint {
font-size: var(--t-caption-size); color: var(--ink-3);
}
.card__header-actions { display: inline-flex; gap: var(--space-2); }
.card__body { display: flex; flex-direction: column; gap: var(--space-4); }
.card__meta { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-3); line-height: 1.5; }
.card__meta a { color: var(--surface-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.card__footer {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: var(--border-2);
}
/* ── 6. BUTTONS ──────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 40px;
padding: 0 var(--space-5);
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-tint); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--green); color: var(--card); }
.btn-primary:hover:not(:disabled) { background: var(--green-ink); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--rule); }
.btn-secondary:hover:not(:disabled) { background: var(--paper); border-color: var(--ink-4); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--rule-2); }
/* Fourth variant. Use sparingly — destructive actions only:
delete, irreversibly close period, withdraw engagement, etc. */
.btn-danger {
background: var(--card);
color: var(--amber);
border-color: var(--status-danger-rule);
}
.btn-danger:hover:not(:disabled) {
background: var(--amber-tint);
border-color: var(--amber);
}
.btn-danger.btn-solid {
background: var(--amber);
color: var(--card);
border-color: var(--amber);
}
.btn-danger.btn-solid:hover:not(:disabled) {
/* foundation pass 2026-04: was #B0600B (orange darken). Now derived from --alert. */
background: var(--alert-ink);
border-color: var(--alert-ink);
}
.btn-sm { height: 32px; padding: 0 var(--space-4); font-size: 13px; }
.btn-lg { height: 48px; padding: 0 var(--space-6); font-size: 15px; }
/* foundation pass 2026-04 (F3): .nav__cta promoted from six pages of inline CSS.
Was duplicated identically across index/pricing/enterprise/compliance/methodology/about
and used hardcoded #ffffff on var(--ink). Now a single primitive.
Selector is doubled (.nav__cta.nav__cta) to outweigh .nav__links a (0,1,1)
without forcing every consumer to qualify. See index.html:37-38 historical note. */
.nav__cta.nav__cta {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 var(--space-4);
background: var(--ink);
color: var(--card);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
transition: background var(--motion-fast);
}
.nav__cta.nav__cta:hover { background: var(--green); color: var(--card); }
/* ── 7. INPUTS ───────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-2); }
.field .helper { font-size: var(--t-caption-size); color: var(--ink-3); }
.field .helper.error { color: var(--amber); }
.input, .textarea, .select {
width: 100%;
height: 40px;
padding: 0 var(--space-3);
background: var(--card);
border: var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--ink);
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.input::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px var(--green-tint);
}
.textarea { height: auto; padding: var(--space-3); min-height: 96px; resize: vertical; line-height: var(--t-body-lh); }
.select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B736E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
/* ── Form row ────────────────────────────────────────────── */
.formrow {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-4) var(--space-6);
align-items: start;
padding: var(--space-5) 0;
border-bottom: var(--border-2);
}
.formrow:last-child { border-bottom: none; }
.formrow__label {
display: flex; flex-direction: column; gap: 2px;
padding-top: 10px; /* aligns with input baseline */
}
.formrow__label-text {
font-size: var(--t-body-sm-size); font-weight: 500; color: var(--ink);
}
.formrow__label-hint {
font-size: var(--t-caption-size); color: var(--ink-3);
}
.formrow__control { display: flex; flex-direction: column; gap: var(--space-2); }
.formrow__control-row { display: flex; align-items: center; gap: var(--space-2); }
.formrow__addon {
font-size: var(--t-body-sm-size); color: var(--ink-3);
white-space: nowrap;
}
.formrow__error { color: var(--amber); font-size: var(--t-caption-size); }
@media (max-width: 820px) {
.formrow { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-4) 0; }
.formrow__label { padding-top: 0; }
}
/* ── Combobox (searchable custom select) ─────────────────── */
.cbox {
position: relative;
width: 100%;
}
.cbox__trigger {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
height: 40px;
padding: 0 var(--space-3);
background: var(--card);
border: var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.cbox__trigger:hover { border-color: var(--ink-4); }
.cbox.is-open .cbox__trigger,
.cbox__trigger:focus-visible {
outline: none;
border-color: var(--surface-accent);
box-shadow: 0 0 0 3px var(--surface-accent-tint);
}
.cbox__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.cbox__trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbox__trigger-label--placeholder { color: var(--ink-4); }
.cbox__chevron { width: 12px; height: 12px; color: var(--ink-3); flex-shrink: 0; margin-left: var(--space-2); }
.cbox__panel {
position: absolute;
top: calc(100% + 4px); left: 0; right: 0;
background: var(--card);
border: var(--border);
border-radius: var(--radius-md);
}
.cbox__panel[hidden] { display: none; }
.cbox__panel:not([hidden]) {
box-shadow: var(--shadow);
z-index: 50;
display: flex;
flex-direction: column;
max-height: 360px;
animation: lift var(--motion-base);
}
.cbox__search {
padding: var(--space-3);
border-bottom: var(--border-2);
}
.cbox__search input {
width: 100%;
height: 32px;
padding: 0 var(--space-3);
border: var(--border);
border-radius: var(--radius-sm);
font-size: 13.5px;
background: var(--paper);
}
.cbox__search input:focus {
outline: none;
border-color: var(--surface-accent);
box-shadow: 0 0 0 2px var(--surface-accent-tint);
background: var(--card);
}
.cbox__list { overflow-y: auto; padding: var(--space-2) 0; }
.cbox__group {
padding: var(--space-2) var(--space-3) var(--space-1);
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-tr);
text-transform: uppercase;
font-weight: 600;
color: var(--ink-3);
}
.cbox__option {
display: flex; align-items: baseline;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
font-size: var(--t-body-sm-size);
color: var(--ink);
cursor: pointer;
}
.cbox__option:hover,
.cbox__option.is-active {
background: var(--surface-accent-tint);
}
.cbox__option.is-selected { font-weight: 500; color: var(--surface-accent-deep); }
.cbox__option-meta { margin-left: auto; font-size: var(--t-caption-size); color: var(--ink-3); white-space: nowrap; }
.cbox__empty {
padding: var(--space-5) var(--space-4);
text-align: center;
font-size: var(--t-body-sm-size);
color: var(--ink-3);
}
/* ── Toast ───────────────────────────────────────────────── */
.toast-region {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: 200;
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: var(--space-3);
background: var(--card);
border: var(--border);
border-left: 3px solid var(--ink-3);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-3) var(--space-4);
min-width: 280px;
max-width: 420px;
pointer-events: auto;
animation: lift var(--motion-base);
}
.toast--info { border-left-color: var(--status-info); }
.toast--success { border-left-color: var(--status-success); }
.toast--warning { border-left-color: var(--status-warning); }
.toast--danger { border-left-color: var(--status-danger); }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: var(--t-body-sm-size); font-weight: 600; color: var(--ink); }
.toast__msg { font-size: var(--t-caption-size); color: var(--ink-2); margin-top: 2px; }
.toast__close {
font-size: 16px; color: var(--ink-4); padding: 0 4px;
background: none; border: none; cursor: pointer;
}
.toast__close:hover { color: var(--ink); }
.toast.is-leaving { animation: fade var(--motion-base) reverse; }
/* ── 8. BADGES ───────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: var(--t-caption-size);
font-weight: 500;
line-height: 1.4;
border: 1px solid transparent;
}
/* foundation pass 2026-04 (F5): .badge-* now true aliases of .pill--*.
Previously these were a parallel ruleset with hardcoded border hexes. */
.badge-neutral { background: var(--rule-2); color: var(--ink-2); border-color: var(--rule); }
.badge-green { background: var(--green-tint); color: var(--green); border-color: var(--green-rule); }
.badge-amber { background: var(--alert-tint); color: var(--alert); border-color: var(--alert-rule); }
/* ── Status pill (replaces .badge-* — old classes kept as aliases) ── */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: var(--t-caption-size);
font-weight: 500;
line-height: 1.4;
border: 1px solid transparent;
white-space: nowrap;
}
.pill__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.pill--neutral { background: var(--rule-2); color: var(--ink-2); border-color: var(--rule); }
.pill--info { background: var(--status-info-tint); color: var(--status-info); border-color: var(--status-info-rule); }
.pill--success { background: var(--status-success-tint); color: var(--status-success); border-color: var(--status-success-rule); }
.pill--warning { background: var(--status-warning-tint); color: var(--status-warning); border-color: var(--status-warning-rule); }
.pill--danger { background: var(--status-danger-tint); color: var(--status-danger); border-color: var(--status-danger-rule); }
.pill--frozen { background: var(--status-frozen-tint); color: var(--status-frozen); border-color: var(--status-frozen-rule); }
.pill--draft { background: var(--status-draft-tint); color: var(--status-draft); border-color: var(--status-draft-rule); }
/* Solid variant (for inline emphasis on tinted backgrounds). */
.pill--solid.pill--info { background: var(--status-info); color: #fff; border-color: var(--status-info); }
.pill--solid.pill--success { background: var(--status-success); color: #fff; border-color: var(--status-success); }
.pill--solid.pill--warning { background: var(--status-warning); color: #fff; border-color: var(--status-warning); }
.pill--solid.pill--danger { background: var(--status-danger); color: #fff; border-color: var(--status-danger); }
.pill--solid.pill--frozen { background: var(--status-frozen); color: #fff; border-color: var(--status-frozen); }
/* Inline pill row for status dashboards — Pass / Exception / Flagged /
Remaining style displays. Pills self-wrap at narrow widths. */
.pill-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.pill-row .pill { white-space: nowrap; }
.pill__count {
display: inline-block;
margin-left: 6px;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
/* ── Breadcrumb ──────────────────────────────────────────── */
.crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--t-body-sm-size);
color: var(--ink-3);
margin-bottom: var(--space-3);
}
.crumbs a {
color: var(--ink-3);
text-decoration: none;
border-radius: var(--radius-sm);
padding: 2px 4px;
margin: -2px -4px;
}
.crumbs a:hover {
color: var(--ink);
background: var(--rule-2);
}
.crumbs__sep {
color: var(--ink-4);
font-size: 12px;
}
.crumbs__current {
color: var(--ink);
font-weight: 500;
}
/* ── Tab bar ─────────────────────────────────────────────── */
.tabs {
display: flex;
align-items: stretch;
gap: var(--space-1);
border-bottom: var(--border);
margin-bottom: var(--space-6);
}
.tabs__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-size: var(--t-body-sm-size);
font-weight: 500;
color: var(--ink-3);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* overlap the parent border */
cursor: pointer;
text-decoration: none;
transition: color var(--motion-fast), border-color var(--motion-fast);
}
.tabs__item:hover { color: var(--ink); }
.tabs__item.is-active {
color: var(--ink);
border-bottom-color: var(--surface-accent);
font-weight: 600;
}
.tabs__item .pill {
/* allow a count pill inside a tab label */
padding: 1px 7px;
font-size: 11px;
}
.tabs__item:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--surface-accent-tint);
border-radius: var(--radius-sm);
}
/* Compact tab bar for inside cards. */
.tabs--compact { margin-bottom: var(--space-4); }
.tabs--compact .tabs__item { padding: var(--space-2) var(--space-3); }
/* ── 9. TABLE ────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
text-align: left;
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-tr);
text-transform: uppercase;
font-weight: 600;
color: var(--ink-3);
padding: var(--space-3) var(--space-4);
border-bottom: var(--border-2);
white-space: nowrap;
}
.table td {
padding: var(--space-4);
font-size: var(--t-body-sm-size);
color: var(--ink);
border-bottom: var(--border-2);
vertical-align: middle;
}
.table tbody tr { transition: background var(--motion-fast); }
.table tbody tr:hover { background: var(--paper); }
.table tbody tr.is-selected { background: var(--surface-accent-tint); box-shadow: inset 2px 0 0 var(--surface-accent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .empty-cell { padding: var(--space-9) var(--space-4); text-align: center; color: var(--ink-3); font-size: var(--t-body-sm-size); }
/* ── Table — audit-grade extensions ──────────────────────── */
/* Wrapper provides horizontal scroll for sticky columns and sets the
coordinate system the sticky cells anchor against. */
.table-wrap {
position: relative;
width: 100%;
overflow-x: auto;
border: var(--border);
border-radius: var(--radius-md);
background: var(--card);
}
.table-wrap > .table { border-radius: 0; }
/* Sortable header */
.table th.is-sortable {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 22px; /* space for the indicator */
}
.table th.is-sortable:hover { color: var(--ink-2); }
.table th.is-sortable::after {
content: '↕';
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
color: var(--ink-4);
font-size: 11px;
font-weight: 500;
}
.table th.is-sorted-asc::after { content: '↑'; color: var(--ink); }
.table th.is-sorted-desc::after { content: '↓'; color: var(--ink); }
/* Selection column. The first cell when .table--selectable is on. */
.table--selectable th:first-child,
.table--selectable td:first-child {
width: 44px;
text-align: center;
padding-left: var(--space-4);
padding-right: var(--space-2);
}
.table input[type="checkbox"].row-check,
.table input[type="checkbox"].header-check {
width: 16px; height: 16px;
margin: 0;
accent-color: var(--surface-accent);
cursor: pointer;
}
.table tr.is-selected,
.table tr.is-selected:hover {
background: var(--surface-accent-tint);
box-shadow: inset 2px 0 0 var(--surface-accent);
}
/* Sticky first column (after the optional select column).
Use .table--sticky-first; the first DATA column becomes sticky.
When combined with .table--selectable, the select column also sticks. */
.table--sticky-first th:nth-child(1),
.table--sticky-first td:nth-child(1) {
position: sticky; left: 0; z-index: 2;
background: var(--card);
}
.table--sticky-first.table--selectable th:nth-child(2),
.table--sticky-first.table--selectable td:nth-child(2) {
position: sticky; left: 44px; z-index: 2;
background: var(--card);
}
.table--sticky-first tbody tr:hover td:nth-child(1),
.table--sticky-first.table--selectable tbody tr:hover td:nth-child(2) {
background: var(--paper);
}
.table--sticky-first tr.is-selected td:nth-child(1),
.table--sticky-first.table--selectable tr.is-selected td:nth-child(2) {
background: var(--surface-accent-tint);
}
/* Sticky last column for evidence-link affordance. */
.table--sticky-last th:last-child,
.table--sticky-last td:last-child {
position: sticky; right: 0; z-index: 2;
background: var(--card);
border-left: var(--border-2);
text-align: right;
padding-right: var(--space-4);
}
.table--sticky-last tbody tr:hover td:last-child { background: var(--paper); }
.table--sticky-last tr.is-selected td:last-child { background: var(--surface-accent-tint); }
/* Density variants */
.table--compact td { padding: var(--space-2) var(--space-4); }
.table--compact th { padding: var(--space-2) var(--space-4); }
.table--roomy td { padding: var(--space-5) var(--space-4); }
/* Numeric cell — use .num (already exists) plus a monospace alignment helper. */
.table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table .num--lg { font-size: 14px; font-weight: 500; }
.table .num--muted { color: var(--ink-3); }
/* Row-annotation slots — pre/post for inline risk pill, assertion dot, etc.
These are wrappers Sprint 2 will populate. */
.cell-annot {
display: inline-flex; align-items: center; gap: var(--space-2);
}
.cell-annot__pre { flex-shrink: 0; }
.cell-annot__post { margin-left: auto; flex-shrink: 0; }
/* Evidence-link cell — last-column action (PDF / source doc). */
.evidence-link {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--t-caption-size);
color: var(--ink-3);
text-decoration: none;
}
.evidence-link:hover { color: var(--surface-accent); }
.evidence-link[aria-disabled="true"] { color: var(--ink-4); cursor: not-allowed; pointer-events: none; }
/* Aggregate footer row (period totals, etc.). */
.table tfoot td {
background: var(--rule-2);
font-weight: 600;
border-top: var(--border);
border-bottom: none;
}
/* Locked-state row (frozen line item in a closed period). */
.table tr.is-frozen td {
background: var(--locked-grey-tint);
color: var(--locked-grey-ink);
}
.table tr.is-frozen td:first-child::before {
content: '';
display: inline-block;
width: 10px; height: 10px;
margin-right: 6px;
vertical-align: -1px;
background-color: var(--locked-grey);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='1.5'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='1.5'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ── 10. KPI CARD ────────────────────────────────────────── */
.kpi {
background: var(--card);
border: var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.kpi__label {
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-tr);
text-transform: uppercase;
font-weight: 600;
color: var(--ink-3);
}
.kpi__value {
font-size: var(--t-display-3-size);
line-height: var(--t-display-3-lh);
letter-spacing: var(--t-display-3-tr);
font-weight: 600;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: var(--space-1);
}
.kpi__unit { font-size: var(--t-body-sm-size); font-weight: 500; color: var(--ink-3); }
.kpi__sub { font-size: var(--t-caption-size); color: var(--ink-3); display: flex; align-items: center; gap: var(--space-2); }
.kpi--amber .kpi__value { color: var(--amber); }
/* ── Stat card (alias of .kpi with new modifiers) ─────────── */
.stat { /* same shape as .kpi */
background: var(--card);
border: var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
}
.stat__label {
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-tr);
text-transform: uppercase;
font-weight: 600;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.stat__value {
font-size: var(--t-display-3-size);
line-height: var(--t-display-3-lh);
letter-spacing: var(--t-display-3-tr);
font-weight: 600;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: var(--space-1);
}
.stat__unit { font-size: var(--t-body-sm-size); font-weight: 500; color: var(--ink-3); }
.stat__sub,
.stat__meta { font-size: var(--t-caption-size); color: var(--ink-3); display: flex; align-items: center; gap: var(--space-2); }
/* Modifier: locked / sealed period. Shown when a reporting period is
closed and the figure is frozen. */
.stat--locked {
border-color: var(--locked-grey-rule);
background: var(--locked-grey-tint);
}
.stat--locked .stat__value { color: var(--locked-grey-ink); }
.stat--locked .stat__label::before {
content: '';
width: 10px; height: 10px;
background-color: var(--locked-grey);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='1.5'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='1.5'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
display: inline-block;
}
/* Modifier: surface-accent value (for audit dashboards mainly). */
.stat--accent .stat__value { color: var(--surface-accent); }
/* Trend pill inside .stat__sub */
.stat__trend {
display: inline-flex; align-items: center; gap: 2px;
padding: 2px 6px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.stat__trend--up { background: var(--status-warning-tint); color: var(--status-warning); }
.stat__trend--down { background: var(--status-success-tint); color: var(--status-success); }
.stat__trend--flat { background: var(--rule-2); color: var(--ink-3); }
/* ── 11. EMPTY STATE ─────────────────────────────────────── */
/* Renamed from .empty → .empty-state 2026-04-22 (AUDIT §2). The bare
`.empty` class collided with `.invoice-status-dot.empty` in
ledger.html, which inherited padding: var(--space-9) var(--space-6)
from this primitive and painted a 48×128 pale-cream ellipse instead
of an 8×8 dot. Never use a short generic class name here. */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-9) var(--space-6);
gap: var(--space-3);
}
.empty-state__title { font-size: var(--t-h4-size); font-weight: 600; color: var(--ink); }
.empty-state__body { font-size: var(--t-body-sm-size); color: var(--ink-3); max-width: 360px; }
/* ── 12. MODAL ───────────────────────────────────────────── */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(14, 26, 20, 0.4);
display: flex; align-items: center; justify-content: center;
padding: var(--space-6);
z-index: 100;
animation: fade var(--motion-base);
}
.modal {
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 560px; /* standard */
padding: var(--space-7);
animation: lift var(--motion-base);
display: flex;
flex-direction: column;
max-height: calc(100vh - 2 * var(--space-6));
}
.modal--standard { max-width: 560px; }
.modal--wide { max-width: 880px; }
.modal__close {
position: absolute;
top: var(--space-3); right: var(--space-3);
width: 32px; height: 32px;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-3);
}
.modal__close:hover { color: var(--ink); background: var(--rule-2); }
.modal__body--scroll { overflow-y: auto; min-height: 0; }
.modal-backdrop[hidden] { display: none; }
.modal-backdrop > .modal { position: relative; }
.modal__title { font-size: var(--t-h2-size); font-weight: 600; letter-spacing: var(--t-h2-tr); }
.modal__body { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--t-body-size); }
.modal__actions { margin-top: var(--space-7); display: flex; justify-content: flex-end; gap: var(--space-3); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* ── 13. SIDEBAR / NAV ───────────────────────────────────── */
.sidebar {
background: var(--green);
color: var(--on-green-body);
display: flex;
flex-direction: column;
padding: var(--space-6) var(--space-3);
position: sticky;
top: 0;
height: 100vh;
width: 240px;
flex-shrink: 0;
}
.sidebar__brand {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-1) var(--space-3) var(--space-6);
font-size: 17px; font-weight: 600; color: #fff;
letter-spacing: -0.01em;
}
.sidebar__brand-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--on-green-accent);
box-shadow: 0 0 0 3px rgba(151, 188, 98, 0.22);
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__nav a {
display: flex; align-items: center; gap: var(--space-3);
padding: 9px var(--space-3);
border-radius: var(--radius-sm);
color: var(--on-green-body);
font-size: 13.5px;
font-weight: 500;
transition: background var(--motion-fast), color var(--motion-fast);
}
.sidebar__nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar__nav a.is-active { background: rgba(255,255,255,0.10); color: #fff; }
.sidebar__foot {
margin-top: auto; padding: var(--space-4) var(--space-3);
font-size: var(--t-caption-size); color: var(--on-green-muted);
border-top: 1px solid rgba(255,255,255,0.08);
}
/* ── Sidebar nav item — hierarchical extensions ──────────── */
.sidebar__nav a {
position: relative;
/* existing display/padding/colour rules already apply */
}
.sidebar__nav a > .navitem__icon {
width: 16px; height: 16px;
flex-shrink: 0;
opacity: 0.85;
}
.sidebar__nav a.is-active::before {
content: '';
position: absolute;
left: 0; top: 6px; bottom: 6px;
width: 2px;
background: #FFFFFF;
border-radius: 2px;
}
/* Sub-item used by Sprint 3 hierarchical nav (Engagements › client › Overview) */
.sidebar__nav a.is-sub {
padding-left: var(--space-7);
font-size: 13px;
opacity: 0.92;
}
.sidebar__nav a.is-sub.is-active::before { left: var(--space-4); }
.sidebar__nav-section {
padding: var(--space-4) var(--space-3) var(--space-1);
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-tr);
text-transform: uppercase;
font-weight: 600;
color: rgba(207, 224, 211, 0.6); /* corporate */
}
body[data-surface="audit"] .sidebar__nav-section { color: rgba(200, 210, 224, 0.6); }
/* ── 14. TOPBAR ──────────────────────────────────────────── */
.topbar {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-4) var(--space-7);
height: 72px;
background: rgba(247, 246, 243, 0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: var(--border);
position: sticky; top: 0; z-index: 10;
}
.topbar__title { font-size: var(--t-h2-size); font-weight: 600; letter-spacing: var(--t-h2-tr); }
.topbar__sub { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 2px; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
/* Surface badge: a small, always-uppercase chip that labels the surface
(e.g. "Audit") next to the topbar title. Rendered via markup, not via
a body-surface selector, so the badge is only present when the page
explicitly includes it — keeps the corporate surface badge-free by
default. The default paint is ink-blue (audit); the corporate override
below only applies if a corporate-surface page chooses to include one. */
.topbar__badge {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--radius-full);
background: var(--audit-blue-tint);
color: var(--audit-blue-ink);
line-height: 1;
display: inline-flex;
align-items: center;
}
body[data-surface="corporate"] .topbar__badge {
background: var(--green-tint);
color: var(--green-ink);
}
/* Stat row — equal-width stat cards in a single horizontal strip.
Used on statement.html, reports.html, workbench Overview. */
.stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.stat-row--inline { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-row { grid-template-columns: 1fr; } }
.stat--compact { padding: var(--space-4); }
.stat--compact .stat__value { font-size: 22px; }
/* Avatar */
.avatar {
width: 34px; height: 34px;
border-radius: var(--radius-full);
background: var(--green); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px;
}
/* ── 15. APP SHELL ───────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app__content { padding: var(--space-7); max-width: var(--container-app); width: 100%; }
/* Guard: no page may remove the content gutter on the left.
If a page needs a different layout shape, it uses its own class,
not an override on .app__content. */
.app__content > :first-child { margin-top: 0; }
@media (max-width: 820px) {
.sidebar { width: 64px; }
.sidebar__brand span:not(.sidebar__brand-dot),
.sidebar__nav a span,
.sidebar__foot { display: none; }
.sidebar__nav a { justify-content: center; padding: 11px; }
.app__content { padding: var(--space-5) var(--space-4); }
.topbar { padding: var(--space-3) var(--space-4); }
}
/* ── 16. CONFIDENCE BAR ──────────────────────────────────── */
.confbar {
display: inline-flex; align-items: center; gap: var(--space-2);
font-variant-numeric: tabular-nums; font-size: var(--t-caption-size);
}
.confbar__track {
width: 48px; height: 4px;
background: var(--rule-2); border-radius: var(--radius-full);
overflow: hidden;
}
.confbar__fill { height: 100%; background: var(--green); }
/* ── 17. SKELETON ────────────────────────────────────────── */
.skel {
background: linear-gradient(90deg, var(--rule-2) 25%, var(--paper) 50%, var(--rule-2) 75%);
background-size: 200% 100%;
animation: skel 1.4s infinite;
border-radius: var(--radius-sm);
height: 14px;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ── 18. UTILITIES ───────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.hidden { display: none !important; }
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1; }
.items-center { align-items: center; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.w-full { width: 100%; }
/* ═══════════════════════════════════════════════════════
* Surface-aware accent tokens (audit vs corporate)
* Default: corporate green. Audit overrides via body[data-surface="audit"].
* The 3px top stripe and accent inheritance are unchanged in mechanism;
* only the audit colour family changes (was amber, now ink blue).
* Amber is reserved for danger semantics only — see status tokens.
* ═══════════════════════════════════════════════════════ */
:root {
--surface-accent: var(--green);
--surface-accent-deep: var(--green-ink);
--surface-accent-tint: var(--green-tint);
--surface-accent-rule: rgba(15, 74, 40, 0.20);
--surface-accent-glow: var(--green-glow);
}
body[data-surface="audit"] {
--surface-accent: var(--audit-blue);
--surface-accent-deep: var(--audit-blue-ink);
--surface-accent-tint: var(--audit-blue-tint);
--surface-accent-rule: var(--audit-blue-rule);
--surface-accent-glow: rgba(27, 58, 91, 0.10);
}
body[data-surface="audit"] main::before {
content: '';
position: fixed;
top: 0; left: 240px; right: 0;
height: 3px;
background: var(--surface-accent);
z-index: 100;
pointer-events: none;
}
@media (max-width: 820px) {
body[data-surface="audit"] main::before { left: 64px; }
}
@media (max-width: 520px) {
body[data-surface="audit"] main::before { left: 0; }
}
/* Audit sidebar gets the ink-blue chrome instead of green. */
body[data-surface="audit"] .sidebar {
background: var(--audit-blue);
color: var(--on-audit-body);
}
body[data-surface="audit"] .sidebar__brand-dot {
background: var(--on-audit-accent);
box-shadow: 0 0 0 3px rgba(107, 149, 200, 0.20);
}
body[data-surface="audit"] .sidebar__nav a { color: var(--on-audit-body); }
body[data-surface="audit"] .sidebar__nav a:hover { color: var(--card); background: rgba(255,255,255,0.06); }
body[data-surface="audit"] .sidebar__nav a.is-active { color: var(--card); background: rgba(255,255,255,0.12); }
body[data-surface="audit"] .sidebar__foot { color: var(--on-audit-muted); border-top-color: rgba(255,255,255,0.08); }
body[data-surface="audit"] .avatar { background: var(--audit-blue); }
/* Audit primary action and accents inherit the surface accent. */
body[data-surface="audit"] .btn-primary {
background: var(--surface-accent);
border-color: var(--surface-accent);
color: var(--card);
}
body[data-surface="audit"] .btn-primary:hover:not(:disabled) {
background: var(--surface-accent-deep);
border-color: var(--surface-accent-deep);
}
body[data-surface="audit"] .btn-secondary {
color: var(--surface-accent);
border-color: var(--surface-accent-rule);
}
body[data-surface="audit"] .btn-secondary:hover:not(:disabled) {
border-color: var(--surface-accent);
background: var(--surface-accent-tint);
}
/* Audit links and selection. Excludes the green sidebar items, which now
belong to the audit chrome rule above. */
body[data-surface="audit"] a:not(.sidebar__nav a):not(.sidebar__foot a):not(.eng-status-pill) {
color: var(--surface-accent-deep);
}
body[data-surface="audit"] a:not(.sidebar__nav a):not(.sidebar__foot a):not(.eng-status-pill):hover {
color: var(--surface-accent);
}
body[data-surface="audit"] ::selection {
background: var(--surface-accent-tint);
color: var(--ink);
}
body[data-surface="audit"] :focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--surface-accent-tint);
}
/* Inputs and selects: focus ring follows the surface accent on both. */
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: var(--surface-accent);
box-shadow: 0 0 0 3px var(--surface-accent-tint);
}
/* ── 22. PROVENANCE CARD ────────────────────────────────
Sprint Consolidate-1C. Four-zone evidence card. Same render in
ledger expanded row and Focus mode main canvas. All colours
resolve via tokens; no per-page overrides. */
.provenance {
background: var(--surface-accent-tint);
border-left: none;
padding: var(--space-5) var(--space-6);
}
.provenance-loading {
padding: var(--space-5) var(--space-7);
font-size: var(--t-body-sm-size);
color: var(--ink-3);
}
/* Zone 1 — line-item head */
.provenance__head {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: var(--space-5);
}
.provenance__title {
font-size: var(--t-h2-size); font-weight: 600; letter-spacing: var(--t-h2-tr);
color: var(--ink); margin: 0;
}
.provenance__meta { font-size: var(--t-body-sm-size); color: var(--ink-3); }
.provenance__spend {
font-size: var(--t-body-size); font-weight: 600; color: var(--ink);
font-variant-numeric: tabular-nums; margin-top: 2px;
}
/* 2-column body: classification left (60%), alternatives right (40%).
Left column needs more room for scope/factor/calc text; right column
is scannable (short candidate names + meta). */
.provenance__body {
display: grid;
grid-template-columns: 3fr 2fr;
gap: var(--space-6);
align-items: start;
}
@media (max-width: 720px) {
.provenance__body { grid-template-columns: 1fr; }
}
.provenance__left {
display: flex; flex-direction: column; gap: var(--space-5);
}
/* Right column alternatives don't need the top border — the column gap
already separates them from classification. */
.provenance__body > .provenance__zone { border-top: none; padding-top: 0; }
/* Zone shell — no borders, just spacing */
.provenance__zone {
display: flex; flex-direction: column; gap: var(--space-3);
}
.provenance__zone-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-3);
}
.provenance__zone-label {
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 600; color: var(--ink-4);
}
/* Zone 2 — classification + reasoning */
.provenance__badges { display: flex; align-items: center; gap: var(--space-2); }
.provenance__confidence {
font-size: var(--t-caption-size); color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.provenance__classification { display: flex; flex-direction: column; gap: 4px; }
.provenance__scope {
font-size: var(--t-body-size); font-weight: 600; color: var(--ink);
}
.provenance__factor { font-size: var(--t-body-size); color: var(--ink-2); }
.provenance__factor-meta { color: var(--ink-4); font-size: var(--t-body-sm-size); }
.provenance__calc {
font-size: var(--t-body-size); color: var(--ink); font-weight: 500;
font-variant-numeric: tabular-nums;
}
.provenance__reasoning p {
font-size: var(--t-body-sm-size); color: var(--ink-3); line-height: 1.55;
margin: 0; font-style: italic;
}
/* Zone 3 — candidates as button-like cards */
.provenance__browse {
font-size: var(--t-body-sm-size); color: var(--surface-accent);
text-decoration: none; font-weight: 500;
}
.provenance__browse:hover { text-decoration: underline; }
.provenance__candidates {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: var(--space-1);
max-height: 360px;
overflow-y: auto;
}
.provenance__candidate {
display: flex; flex-direction: column; gap: 2px;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--card);
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
cursor: pointer;
}
.provenance__candidate:hover {
border-color: var(--surface-accent);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.provenance__candidate.is-current {
border-color: var(--surface-accent);
background: color-mix(in srgb, var(--surface-accent) 5%, var(--card));
}
.provenance__candidate.is-selected {
outline: 2px solid var(--surface-accent); outline-offset: -2px;
}
.provenance__candidate-name {
color: var(--ink); font-weight: 500;
font-size: var(--t-body-sm-size);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.provenance__candidate-meta {
display: flex; align-items: baseline; gap: var(--space-2);
font-size: var(--t-caption-size);
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.provenance__candidate-factor {
color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.provenance__candidate-source { color: var(--ink-4); }
.provenance__candidate-score {
color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500;
margin-left: auto;
}
.provenance__candidates-empty {
padding: var(--space-3) var(--space-4);
font-size: var(--t-body-sm-size); color: var(--ink-3); font-style: italic;
}
/* Zone 4 — trail */
.provenance__trail {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.provenance__trail li {
display: grid;
grid-template-columns: max-content 1fr max-content;
gap: var(--space-4); align-items: baseline;
font-size: var(--t-body-sm-size); color: var(--ink-2);
}
.provenance__trail time {
color: var(--ink-4); font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
/* Per-entry row_hash anchor — the audit chain is the whole point of the
trail for an auditor. Short anchor visible; full row_hash + prev_hash
in the tooltip so they can verify the chain byte-for-byte. */
.provenance__trail-hash {
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px;
color: var(--ink-3);
background: var(--rule-2);
padding: 1px 6px;
border-radius: var(--radius-sm);
cursor: help;
letter-spacing: 0.02em;
}
/* Actions */
.provenance__actions {
display: flex; gap: var(--space-3); align-items: center;
padding-top: var(--space-3);
}
.provenance__actions[data-context="focus"] { display: none; } /* keys in Focus */
/* §22.4 — Provenance Card · Focus context (Sprint 1D §3b) ─────
Visual target is the audit workpaper: no card tint, wide gutter,
big number, clean metric grid. Ledger card stays tinted because
it nests inside a row; Focus IS the canvas, so it goes flat. */
.provenance--focus {
background: var(--paper);
border: none;
border-left: none;
border-radius: 0;
padding: var(--space-8) var(--space-8) var(--space-6);
box-shadow: none;
max-width: none;
}
.provenance--focus .provenance__hero { margin-bottom: var(--space-7); }
.provenance--focus .provenance__hero-vendor {
font-size: var(--t-body-sm-size);
color: var(--ink-3);
letter-spacing: 0.01em;
margin-bottom: var(--space-2);
}
.provenance--focus .provenance__hero-title {
font-size: var(--t-h2-size);
font-weight: 600;
color: var(--ink);
margin: 0 0 var(--space-4);
line-height: 1.2;
}
.provenance--focus .provenance__hero-number {
display: flex; align-items: baseline; gap: var(--space-3);
}
.provenance--focus .provenance__hero-value {
font-size: 72px; line-height: 1; font-weight: 600;
color: var(--ink); font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.provenance--focus .provenance__hero-value--empty { color: var(--ink-3); }
.provenance--focus .provenance__hero-unit {
font-size: var(--t-body-size); color: var(--ink-3); font-weight: 500;
}
.provenance--focus .provenance__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5) var(--space-8);
padding: var(--space-5) 0;
border-top: var(--border);
border-bottom: var(--border);
margin-bottom: var(--space-6);
}
.provenance--focus .provenance__metric-label {
font-size: var(--t-caption-size);
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-1);
}
.provenance--focus .provenance__metric-value {
font-size: var(--t-body-size); color: var(--ink); font-weight: 500;
}
.provenance--focus .provenance__factor-meta {
color: var(--ink-3); font-weight: 400;
}
.provenance--focus .provenance__zone--reasoning { margin-bottom: var(--space-6); border-top: none; padding-top: 0; }
.provenance--focus .provenance__reasoning-body {
font-size: var(--t-body-size); color: var(--ink-2);
line-height: 1.55; margin: var(--space-2) 0 var(--space-3);
}
.provenance--focus .provenance__calc {
font-family: ui-monospace, 'SF Mono', monospace;
font-size: var(--t-body-sm-size);
color: var(--ink-3);
background: var(--rule-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
display: inline-block;
}
/* Compact, keyboard-first alternatives list — green outline only when
selected (matches the workpaper feel; the busy hover-tint of the
ledger context would add visual noise in Focus). */
.provenance--focus .provenance__candidates { display: flex; flex-direction: column; gap: var(--space-1); }
.provenance--focus .provenance__candidate {
padding: var(--space-3) var(--space-4);
border: var(--border);
border-radius: var(--radius-sm);
background: var(--card);
}
.provenance--focus .provenance__candidate.is-current {
border-color: var(--surface-accent);
background: var(--surface-accent-tint);
}
.provenance--focus .provenance__candidate.is-selected {
outline: 2px solid var(--surface-accent);
outline-offset: -2px;
}
/* ── Usage meter (pricing v2) ───────────────────────────────────────
Persistent band under the top nav on every app page. Shows the
current-period line-item consumption plus an upgrade/overage note
when the tenant crosses 80% / 100% / 120% of its prorated allowance.
─────────────────────────────────────────────────────────────────── */
.usage-meter {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-3);
align-items: center;
padding: 10px 24px;
background: var(--card);
border-bottom: 1px solid var(--rule);
font-size: 13px;
}
.usage-meter__label { display: flex; gap: var(--space-4); align-items: baseline; }
.usage-meter__tier {
font-weight: 600;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 11px;
}
.usage-meter__used { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.usage-meter__track { width: 200px; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.usage-meter__fill { height: 100%; background: var(--green); transition: width 200ms ease; }
.usage-meter--warn .usage-meter__fill { background: var(--status-warning); }
.usage-meter--full .usage-meter__fill { background: var(--amber); }
.usage-meter--over .usage-meter__fill { background: var(--amber); }
.usage-meter__note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.usage-meter--full .usage-meter__note a,
.usage-meter--over .usage-meter__note a { color: var(--amber); font-weight: 600; }
/* ACTIVATION-POLISH §7: skeleton state. Reserves the band's full
height at first paint so the page doesn't shift when the meter's
fetch resolves and replaces innerHTML. Static (no pulse) — the
placeholder reads as a quiet placeholder, not as missing data. */
.usage-meter--skeleton {
pointer-events: none;
}
.usage-meter__skel-pill {
display: inline-block;
height: 11px;
width: 56px;
background: var(--rule);
border-radius: 4px;
}
.usage-meter__skel-pill--wide { width: 160px; }
.usage-meter--skeleton .usage-meter__track { background: var(--rule); }
/* ── Assurance picker (Sprint Reasonable §1) ─────────────── */
/* Used in the company-side auditor-invite flow (settings.html,
reports.html) to pick between limited and reasonable assurance.
Replaces the legacy native confirm() dialog. */
.assurance-picker { display: grid; gap: var(--space-2); }
.assurance-opt {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: var(--border); border-radius: var(--radius-sm);
cursor: pointer; background: var(--paper);
transition: border-color 120ms ease, background 120ms ease;
}
.assurance-opt:hover { border-color: var(--green); }
.assurance-opt input[type="radio"] { margin-top: 3px; flex: 0 0 auto; }
.assurance-opt__body { display: grid; gap: 2px; }
.assurance-opt__title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.assurance-opt__meta { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.assurance-opt:has(input:checked) {
border-color: var(--green);
background: var(--green-tint);
}