/* ============================================================
Shared app stylesheet
------------------------------------------------------------
The one copy of the palette, element resets and component
classes. Linked by the app page (Decarbonisation Platform.html)
AND by every harness/_harness_*.html, which used to paste their
own copies — and had drifted onto the pre-brand-redesign palette,
so a harness no longer showed what the app showed.
Class-based rules live here rather than in inline styles because
they need selectors React can't express: :hover, :focus-visible,
position: sticky pairs, @media and @container.
Paths are relative to THIS file (model/), hence ../assets/… —
that resolves the same whether the page sits at the project root
or in harness/.
The IBM Plex Mono webfont stays a in each page: an @import
here would block the first paint behind a second round-trip.
============================================================ */
@font-face {
font-family: "Apercu Pro";
src: url("../assets/fonts/apercu_regular_pro.otf") format("opentype");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
src: url("../assets/fonts/apercu_medium_pro.otf") format("opentype");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
src: url("../assets/fonts/apercu_bold_pro.otf") format("opentype");
font-weight: 700; font-style: normal; font-display: swap;
}
:root {
/* NS brand book palette — red/blue/green + tints, grey for text */
--paper: #F7F8FA;
--card: #FFFFFF;
--ink: #333E4F;
--sidebar: #333E4F; /* dark blue — sidebar chrome and UI elements */
--forest: #333E4F; /* UI dark blue (buttons, toggles, emphasis); charts keep brand blue #44546A via CHART */
--pine: #38678A;
--chart-blue: #44546A; /* brand blue — chart/plan lines and non-scope blue chrome */
--sand: #AE9646;
--slate-c: #8A93A1;
--accent: #C84600;
--teal: #4B8A86;
--success: #2F6E66; /* positive/on-track green — status chips and confirmations */
--success-line: #C6DDD6; /* hairline border paired with the success tint */
--gold: #AE9646;
--purple: #614F80;
--mauve: #A6586F;
--red-tint: #FCE6D7;
--blue-tint: #E1E7EF;
--green-tint: #DDEAE8;
--line: #DDE3EB;
--faint: #EDF1F5;
--hover: #F4F6F9;
--muted: #666666;
--paper-dim: rgba(255,255,255,0.58);
--serif: "Apercu Pro", system-ui, sans-serif;
--sans: "Apercu Pro", system-ui, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, monospace;
/* Geometry tokens. The JS mirror is UI_TOKENS (model/components.jsx) —
inline styles read from there, CSS rules read from here; keep the two
in step. --radius is the app-wide 2px rule (CLAUDE.md): true circles,
pill toggles and scrollbar thumbs are the only exceptions. */
--radius: 2px;
--tracking: 0.1em; /* small all-caps: eyebrows, kickers, labels, chips */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Initiatives table: hide the owner avatars once the table gets too narrow
so they don't overflow their cell and collide with the Scope column. */
.initTbl { container-type: inline-size; overflow-x: auto; }
@container (max-width: 1060px) { .init-owner { display: none !important; } }
body {
font-family: var(--sans);
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: #D3DCE8; }
button { font-family: var(--sans); }
/* textarea is included so a field that doesn't inherit through UI_TOKENS.input
(which sets font: inherit) still lands on the app font and focus ring. */
input, select, textarea { font-family: var(--sans); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--forest) !important; box-shadow: 0 0 0 3px rgba(68,84,106,0.14); }
input[type=range] {
-webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px; border-radius: var(--radius); background: var(--faint);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
background: var(--forest); margin-top: -6.5px; border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
input[type=range]::-moz-range-track { height: 4px; border-radius: var(--radius); background: var(--faint); }
input[type=range]::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--forest); border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Edge draws its own reveal eye inside a password field, at the same right edge
as our Show/Hide toggle. One control, and it is the one we wired. */
input[type=password]::-ms-reveal, input[type=password]::-ms-clear { display: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(68,84,106,0.22); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(68,84,106,0.40); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
/* Dark sidebar: light translucent thumb instead of the light-surface one */
.app-sidebar::-webkit-scrollbar-thumb, .cc-sidenav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border: 3px solid transparent; background-clip: content-box; }
.app-sidebar::-webkit-scrollbar-thumb:hover, .cc-sidenav-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); border: 3px solid transparent; background-clip: content-box; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(68,84,106,0.30) transparent; }
.app-sidebar, .cc-sidenav-scroll { scrollbar-color: rgba(255,255,255,0.20) transparent; }
select { -webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238C8676' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 28px !important; }
/* Sidebar brand — back arrow hidden until the wordmark is hovered; wordmark
slides right to reveal it. Hover zone covers arrow + wordmark (not the wave). */
.cc-brand-word { background: transparent; border: none; padding: 0; cursor: pointer; display: block;
transition: transform .5s ease; }
.cc-brand:hover .cc-brand-word { transform: translateX(26px); }
.cc-brand-back { position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: var(--radius); padding: 0; cursor: pointer;
color: var(--paper-dim); opacity: 0; pointer-events: none; transition: opacity .5s ease, background .15s, color .15s; }
.cc-brand:hover .cc-brand-back { opacity: 1; pointer-events: auto; }
.cc-brand-back:hover { color: var(--paper); background: rgba(255,255,255,0.08); }
/* Sidebar nav items — CSS-driven hover/active so React owns the active state cleanly */
.cc-nav { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 12px;
border-radius: 0 var(--radius) var(--radius) 0; border: none; border-left: 2px solid transparent;
cursor: pointer; background: transparent;
color: var(--paper-dim); font: inherit; font-size: 13.5px; font-weight: 450;
text-align: left; transition: background .15s, color .15s; }
.cc-nav:hover { background: rgba(255,255,255,0.06); }
.cc-nav.is-active { background: rgba(255,255,255,0.10); color: var(--paper); font-weight: 600; border-left-color: var(--accent); }
.cc-nav .cc-nav-ic { opacity: 0.7; }
.cc-nav.is-active .cc-nav-ic { opacity: 1; }
/* Read-only lock — a disabled