/* ============================================================
   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 <link> 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; }
::-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 <fieldset class="ro-lock"> natively disables
   every input/select/textarea/button inside it, while charts and text stay
   fully readable. Used to enforce view-only client access. */
fieldset.ro-lock { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
fieldset.ro-lock:disabled :is(input, select, textarea, button) { cursor: not-allowed !important; opacity: 0.55; }
fieldset.ro-lock:disabled :is(input, select, textarea, button):focus { box-shadow: none !important; }
/* Emissions baseline inventory table — quiet rows that light up on hover;
   the delete action and the pool-name field border only appear then. */
.bl-row:hover { background: var(--hover); }
.bl-row .bl-del, .bl-row .bl-hist { opacity: 0; transition: opacity .12s; }
.bl-row:hover .bl-del, .bl-row .bl-del:focus-visible,
.bl-row:hover .bl-hist, .bl-row .bl-hist:focus-visible { opacity: 1; }
.bl-row input[title="Pool name: click to edit"]:hover { border-color: var(--line) !important; background: var(--card) !important; }
/* baseline table, grouped categories: rows inside a category run show a connector
   (.cat-ditto) in place of the repeated select (.cat-alt), swapped on row hover */
.bl-row .cat-alt { display: none; }
.bl-row:hover .cat-alt { display: block; }
.bl-row:hover .cat-ditto { display: none; }
/* the activity × factor drawer carries the same connector so the group line runs
   unbroken behind it; it hides with the row's segment on hover */
.bl-row:hover + .bl-afrow .cat-ditto { display: none; }
/* bulk-select ticks appear on hover, when checked, or while a selection is active */
.bl-chk { opacity: 0; transition: opacity .12s; cursor: pointer; margin: 0; }
.bl-row:hover .bl-chk, .bl-chk:checked, .sel-active .bl-chk { opacity: 1; }
/* sticky table chrome: column headers pin to the top of the scrolling window,
   the current scope subtotal row pins just beneath them */
.bl-head { position: sticky; top: 0; background: var(--card); z-index: 4; }
.bl-scope { position: sticky; top: 25px; z-index: 3; }
/* Overview — top-contributors table rows light up on hover; the card actions
   read as red arrow links (matches the dashboard-redesign mock). */
.ov-row:hover td { background: var(--hover); }
.ov-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.ov-link::after { content: " \27F6"; text-decoration: none; }
/* ---- Tablet / mobile: collapse the sidebar into an overlay drawer ----
   Desktop (>820px) is unchanged. Below that, a slim top bar with a menu
   button appears and the sidebar slides in over a scrim. */
.app-mobilebar { display: none; }
.app-scrim { display: none; }
@media (max-width: 820px) {
  .app-sidebar {
    position: fixed !important; top: 0; left: 0; height: 100vh !important;
    z-index: 60; transform: translateX(-100%); transition: transform .26s ease;
    box-shadow: 0 18px 50px rgba(15,23,30,0.45);
  }
  .app-shell.drawer-open .app-sidebar { transform: translateX(0); }
  .app-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(20,28,34,0.46); opacity: 0; pointer-events: none; transition: opacity .26s ease;
  }
  .app-shell.drawer-open .app-scrim { opacity: 1; pointer-events: auto; }
  .app-mobilebar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40;
    padding: 11px 16px; background: var(--ink); color: var(--paper);
  }
  .app-mobilebar .mb-burger {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
    color: var(--paper); cursor: pointer; flex-shrink: 0;
  }
  .app-mobilebar .mb-burger:hover { background: rgba(255,255,255,0.12); }
}
/* ---- Initiative detail: space-aware layout ----
   A full-width KPI strip and a full-width graphs row sit at the top. The
   editor below them is a top row — the identity card beside the wider,
   largest abatement-inputs panel (2fr / 3fr) — over a full-width support row
   that holds the remaining cards and mirrors the graphs row above. Both grids
   size intrinsically, so they stay responsive (the support row reflows 4→2→1
   as the viewport narrows; the top row stacks below 1024px). */
.init-detail-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.init-detail-editor { min-inline-size: 0; }
.init-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; }
.init-detail-col { display: flex; flex-direction: column; gap: 20px; min-inline-size: 0; }
/* min-inline-size:0 lets a card shrink inside its grid track instead of
   forcing overflow from long, unbreakable content. */
.init-detail-card { min-inline-size: 0; }
@media (max-width: 1024px) { .init-detail-grid { grid-template-columns: 1fr; } }
/* ---- Help page ----
   The "how to use the platform" page (route "help"), reached from the
   user menu. A sticky contents rail sits beside the walkthrough, the
   reading column capped so lines stay comfortable. Stacks on narrow. */
.help-wrap { max-width: 1000px; }
.help-layout { display: flex; align-items: flex-start; gap: 34px; }
.help-toc { flex: 0 0 210px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 1px; }
.help-toc-item:hover { background: var(--hover) !important; }
.help-content { flex: 1 1 auto; min-width: 0; max-width: 680px; }
@media (max-width: 860px) {
  .help-layout { flex-direction: column; gap: 18px; }
  .help-toc { position: static; flex-basis: auto; width: 100%; }
}