/* ═══════════════════════════════════════════════
PROPOSALONE — Shared Design System
Warm Graphite · Steel Blue Accent
Next313 / Dignetix Ltd
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Barlow+Condensed:wght@600;700;800;900&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');
/* ── TOKENS ── */
:root {
/* Cool slate dark palette (v0.36.0). Moved off the old warm near-black
(#0C0B09 + brown surfaces), which muddied contrast, to a cooler ground
with lighter surfaces, stronger border separation, and brighter text.
The steel-blue brand accent (--st/--stb) is unchanged. */
--bg: #0E1014;
--bgw: #121519;
--navbg: #13161B;
--sur: #181C22;
--sur2: #1F242B;
--sur3: #272D35;
--bdr: #333A44;
--bdr2: #404956;
--st: #5A9FD4;
/* Primary-button blue + its hover. White text on --std is 5.72:1
(pinned by test/lib/wcag-contrast.test.js). --st stays the link /
accent colour in dark only — white on it is 2.86:1, never do that. */
--std: #2D6A9F;
--stdh: #24557F;
--stb: #7BBDE8;
--stg: rgba(90,159,212,0.10);
--tx: #F0F2F5;
--txd: #C3CAD3;
--txm: #9AA3AE;
--amb: #E0A95A;
--ambd: rgba(224,169,90,0.14);
--grn: #5FC495;
--grnd: rgba(95,196,149,0.14);
--red: #D87A7A;
--redd: rgba(216,122,122,0.14);
--radius: 6px;
--radius-sm:4px;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}
/* Phase-page action bar (v0.36.0). Primary phase actions sit at the top of
the content area, right-aligned — close to the work — instead of floating
in the far page corner. On tabbed pages (Decision) the actions share the
tab row; .phase-tabrow holds the tabs left + actions right with the tab
underline spanning the whole row. */
.phase-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.phase-tabrow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--bdr); margin-bottom: 12px; }
.phase-tabrow .dec-tabs { border-bottom: none; margin-bottom: 0; }
@media (max-width: 720px) { .phase-actions { justify-content: flex-start; } }
/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The hidden attribute always wins. An author-level display (a class with
display:flex, say) otherwise overrides the browser's built-in [hidden]
rule and shows an element the code meant to hide. */
[hidden] { display: none !important; }
html, body {
height: 100%;
background: var(--bg);
color: var(--tx);
font-family: 'Barlow', sans-serif;
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ── LAYOUT SHELL ──
Sidebar shell (redesign 2026-10-13). Every in-app page is
The