/*
 * Project Nexus · every style in the app.
 *
 * Moved out of public/index.html unchanged. The brand colours live in :root
 * at the top — with the BRAND block in index.html, that is the whole re-skin
 * for a new client (CLAUDE.md).
 */

:root{
  /* ── BRAND COLOURS (part of the config — edit to rebrand) ──
     Light theme (default). Dark "mission control" overrides below. */
  --porcelain:#f4f3ef; --card:#ffffff; --line:#e7e4dc; --line-soft:#f0eee8;
  --surface-2:#faf9f5; --field:#fbfaf7; --track:#edebe4; --track-fill:#e2e8f0;
  --ink:#10164f; --navy:#1a1f8c; --orange:#ff6b00; --orange-d:#e55f00; --magenta:#e91e8c;
  --chrome:#10164f; --chrome-2:#1a1f8c; --hero-a:#10164f; --hero-b:#1a1f8c; --chart-plan:#1a1f8c;
  --body:#3c4257; --muted:#8a8fa3; --faint:#b5b9c9;
  --red:#dc2626; --red-bg:#fef2f2; --red-tx:#991b1b; --red-bd:#fca5a5; --red-2:#b91c1c;
  --amber:#d97706; --amber-bg:#fef3c7; --amber-tx:#92400e; --amber-bd:#fde68a; --amber-2:#b45309;
  --green:#16a34a; --green-bg:#f0fdf4; --green-tx:#166534; --green-bd:#86efac; --green-2:#15803d;
  --blue-bg:#eef2ff; --blue-bd:#e0e7ff; --blue-tx:#3730a3;
  --grey-bg:#efeee9; --grey-tx:#6b7080; --grey-dot:#a9adbd; --slate:#64748b;
  --tint-orange:#fff7f0;
  --shadow:0 1px 2px rgba(16,22,79,.04),0 8px 26px rgba(16,22,79,.055);
  --side:238px;
}
[data-theme="dark"]{
  --porcelain:#0a0e2c; --card:#12173f; --line:#262d5e; --line-soft:#1f2550;
  --surface-2:#181e4b; --field:#0e1236; --track:#1f2550; --track-fill:#323a75;
  --ink:#edf0ff; --navy:#8ca3f0;
  --chrome:#3d479e; --chrome-2:#4a55b5; --hero-a:#171d55; --hero-b:#232b7a; --chart-plan:#8ca3f0;
  --body:#c7cce8; --muted:#8b92bc; --faint:#606790;
  --red:#ef4444; --red-bg:rgba(239,68,68,.10); --red-tx:#fca5a5; --red-bd:rgba(239,68,68,.38); --red-2:#f87171;
  --amber:#f59e0b; --amber-bg:rgba(245,158,11,.10); --amber-tx:#fcd34d; --amber-bd:rgba(245,158,11,.38); --amber-2:#fbbf24;
  --green:#22c55e; --green-bg:rgba(34,197,94,.10); --green-tx:#86efac; --green-bd:rgba(34,197,94,.38); --green-2:#4ade80;
  --blue-bg:rgba(99,102,241,.14); --blue-bd:rgba(129,140,248,.4); --blue-tx:#a5b4fc;
  --grey-bg:#1c2251; --grey-tx:#9ba1c8; --grey-dot:#565d85; --slate:#454e77;
  --tint-orange:rgba(255,107,0,.13);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,"Segoe UI",Arial,sans-serif;background:var(--porcelain);color:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(26,31,140,.14)}
.wrap{margin-left:var(--side);max-width:1340px;padding:0 30px 24px}

/* ── sidebar ──────────────────────────────────────────────── */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:60;display:flex;flex-direction:column;background:linear-gradient(175deg,#0C1140 0%,#10164F 55%,#131A66 100%);border-right:1px solid rgba(255,255,255,.07)}
.side-brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-brand .logo{width:40px;height:40px;font-size:15px;border-radius:11px}
.side-name{font-family:'Sora','Inter',sans-serif;font-size:14.5px;font-weight:700;color:#fff;letter-spacing:-.01em}
.side-org{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:#8F97C9;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;line-height:1.5}
.side-menu-btn{display:none;margin-left:auto;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.side-foot{padding:13px 18px 15px;border-top:1px solid rgba(255,255,255,.08)}
.agent-mini{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;color:#3DD68C;font-weight:600}
.theme-toggle{display:flex;align-items:center;gap:9px;width:100%;margin-top:11px;padding:8px 10px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(255,255,255,.05);color:#C3C9EC;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.theme-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
.theme-toggle svg{width:14px;height:14px;flex-shrink:0}

/* ── command band — slim sticky header ────────────────────── */
/* The band is dark in both themes. --ink turns pale in dark mode, so the
   middle stop is the light theme's ink written out, not the variable. */
.band{margin-left:var(--side);position:sticky;top:0;z-index:50;background:linear-gradient(160deg,#0C1140 0%,#10164f 48%,#171C7A 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 4px 18px rgba(4,8,40,.18)}
.band-inner{max-width:1340px;margin:0;padding:15px 30px 0}
.band-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.logo{width:46px;height:46px;background:var(--orange);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Sora','Inter',sans-serif;font-weight:800;font-size:17px;color:#fff;letter-spacing:.02em}
.band h1{font-family:'Sora','Inter',sans-serif;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:#fff}
.band-status{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rag-pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;background:rgba(245,158,11,.16);color:#FCD34D;border:1px solid rgba(245,158,11,.35);padding:5px 12px;border-radius:999px}
.rag-pill .dot{width:7px;height:7px}
.band-status .go{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#9BA3D0;margin:0;letter-spacing:.05em;white-space:nowrap}
/* A select is as wide as its longest option, so one long programme name would
   push the header (and on a phone the whole page) sideways. */
#proj-switch{max-width:280px;min-width:0;text-overflow:ellipsis}
/* The button is white text on the dark band, but its open list is drawn by
   the browser on its own background, and the options inherit that white —
   white on white. The list gets the page's own card colours instead. */
#proj-switch option{color:var(--ink);background:var(--card)}
.band-status{min-width:0;max-width:100%}
/* Who is signed in.
   This used to be `position:fixed; top:10px; right:14px`, injected near the top
   of the page, which put it directly on top of the programme selector to its
   left — on every screen, in every demo, and in the first product screenshot
   anybody tried to take. A fixed overlay cannot be made safe by nudging it: the
   chip's width changes with the length of a person's name, their organisation
   and their role, so any gap left for it is the wrong gap for somebody.
   Laying it out as the last item in the band's own status row means the browser
   keeps it clear of the selector, at any width and any name length, and it wraps
   onto its own line when there is no room rather than covering something.
   `display` is still toggled inline by setChip() / showLogin() in js/auth.js, so
   nothing here may set it with !important. */
.nx-id{align-items:center;gap:10px;background:rgba(12,17,64,.55);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;padding:6px 13px;border-radius:999px}
.nx-id a{color:#fff;font-weight:700;text-decoration:none}
.nx-id a:hover{text-decoration:underline}
/* agent network — the signature */
.network{display:flex;align-items:center;gap:0;margin-top:13px;padding:11px 0 13px;border-top:1px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.agent{display:flex;align-items:center;gap:8px;flex-shrink:0}
.agent .pip{width:8px;height:8px;border-radius:50%;background:#3DD68C;box-shadow:0 0 0 3px rgba(61,214,140,.15)}
.agent.core .pip{background:var(--orange);box-shadow:0 0 0 3px rgba(255,107,0,.2);animation:breathe 2.6s ease-in-out infinite}
.agent span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#C7CCE8;letter-spacing:.04em;white-space:nowrap}
.agent.core span{color:#fff;font-weight:600}
/* Not connected: a grey, still light and a dimmer name (nxPaintConnections). */
/* Configure's leftover demo sections store nothing. Hidden until js/org.js
   knows the session is the demo, so a product account never sees them flash
   while its capabilities load. */
.cfg-demo-only{display:none}
.agent.off .pip,.agent.core.off .pip{background:#5A6190;box-shadow:none;animation:none}
.agent.off span,.agent.core.off span{color:#8C93C2;font-weight:400}
.agent-mini.off{color:#9AA0C8}
.agent-mini.off .beacon{background:#5A6190;animation:none}
.link-line{height:1px;background:rgba(255,255,255,.18);flex:1;min-width:26px;margin:0 10px;position:relative;overflow:hidden}
.link-line::after{content:"";position:absolute;top:-1px;left:-18%;width:18%;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--magenta),transparent);animation:travel 3.8s linear infinite}
.link-line:nth-of-type(4)::after{animation-delay:1.2s}
.link-line:nth-of-type(6)::after{animation-delay:2.1s}
.link-line:nth-of-type(8)::after{animation-delay:.6s}
@keyframes travel{to{left:118%}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 3px rgba(255,107,0,.2)}50%{box-shadow:0 0 0 6px rgba(255,107,0,.08)}}
.beacon{width:8px;height:8px;border-radius:50%;background:#3DD68C;animation:breathe2 2.2s ease-in-out infinite;flex-shrink:0}
@keyframes breathe2{0%,100%{box-shadow:0 0 0 0 rgba(61,214,140,.4)}50%{box-shadow:0 0 0 6px rgba(61,214,140,0)}}

/* ── nav (inside sidebar) ─────────────────────────────────── */
nav{flex:1;overflow-y:auto;padding:16px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.nav-cap{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.15em;color:#6F77AD;text-transform:uppercase;margin:18px 10px 7px}
.nav-group:first-child .nav-cap{margin-top:0}
nav button{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;padding:9px 10px;border:none;border-radius:9px;background:transparent;color:#C3C9EC;cursor:pointer;transition:background .15s,color .15s;margin-bottom:2px}
nav button svg{width:15px;height:15px;flex-shrink:0;opacity:.72;transition:opacity .15s}
nav button:hover{background:rgba(255,255,255,.07);color:#fff}
nav button:hover svg{opacity:1}
nav button.active{background:rgba(255,107,0,.15);color:#fff;font-weight:600}
nav button.active svg{opacity:1;color:var(--orange)}
nav button.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--orange)}
/* A tab a product account can see but not open yet (nxMarkTab in js/auth.js). */
nav button.nx-tab-locked{color:#7F87B8}
nav button.nx-tab-locked svg{opacity:.4}
nav button.nx-tab-locked:hover{color:#C3C9EC}
nav button.nx-tab-locked.active{color:#fff}
.nav-badge{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.08);color:#9BA3D0}
.nx-locked-panel{max-width:640px}
.nx-locked-panel h2{margin-bottom:8px}
.nx-locked-panel p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:10px}
.nx-locked-panel .nx-locked-note{font-size:12.5px;color:var(--faint)}
.nx-locked-btn{margin-top:4px;background:var(--orange);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer}
.nx-locked-btn:hover{background:var(--orange-d)}
.nx-locked-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
nav button:focus-visible,.btn-primary:focus-visible,.chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.view{display:none}
.view.active{display:block;animation:fade .32s ease}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* ── cards ────────────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:18px;box-shadow:var(--shadow)}
.panel h2{font-family:'Sora','Inter',sans-serif;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}
.panel .sub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.section-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}

/* kpi */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px 17px 15px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,22,79,.06),0 14px 34px rgba(16,22,79,.09)}
.kpi .label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.kpi .val{font-family:'Sora','Inter',sans-serif;font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figure-not-shown{display:inline-block;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.35;color:var(--muted)}
.figure-not-shown.on-dark{color:#B9BFE6}
.kpi .sub{font-size:11.5px;color:var(--muted);margin-top:4px}
.kpi .kpi-date{white-space:nowrap;font-size:clamp(17px,1.6vw,26px)}
/* Portfolio card title: three lines at most, the full name on hover. */
.pf-card-title{font-family:'Sora','Inter',sans-serif;font-size:16px;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

/* workstream rows */
.ws-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.ws-row:last-child{border:none}
.ws-name{font-size:13.5px;color:var(--body);font-weight:500;width:200px;flex-shrink:0}
.bar{flex:1;height:7px;background:var(--track);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px}
.ws-pct{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);width:42px;text-align:right;font-variant-numeric:tabular-nums}
.mk-row{cursor:pointer;border-radius:8px;margin:0 -8px;padding-left:8px;padding-right:8px;transition:background .14s}
.mk-row:hover{background:var(--surface-2)}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.red{background:var(--red)}.amber{background:var(--amber)}.green{background:var(--green)}.grey{background:var(--grey-dot)}

/* raid */
.raid{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.raid:last-child{border:none}
.badge{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:5px;white-space:nowrap;height:fit-content}
.b-red{background:var(--red-bg);color:var(--red-tx);border:1px solid var(--red-bd)}
.b-amber{background:var(--amber-bg);color:var(--amber-tx);border:1px solid var(--amber-bd)}
.b-blue{background:var(--blue-bg);color:var(--blue-tx);border:1px solid var(--blue-bd)}
.raid p{font-size:13.5px;color:var(--body)}
.raid .meta{font-size:11.5px;color:var(--muted);margin-top:2px}

/* milestones */
.ms{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.ms:last-child{border:none}
.ms .nm{font-size:13.5px;color:var(--body);font-weight:500;flex:1}
.ms .dt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted)}
.ms .st{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 9px;border-radius:5px}

/* predictive cards */
.pred{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:14px;padding:20px 22px;margin-bottom:13px;box-shadow:var(--shadow)}
.pred.amber{border-left-color:var(--amber)}
.pred-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:9px}
.pred-tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.05em;padding:3px 10px;border-radius:5px;background:var(--red-bg);color:var(--red-tx);border:1px solid var(--red-bd)}
.pred.amber .pred-tag{background:var(--amber-bg);color:var(--amber-tx);border-color:var(--amber-bd)}
.pred h3{font-family:'Sora','Inter',sans-serif;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.pred .desc{font-size:13.5px;color:var(--body);margin-bottom:9px}
.pred .rec{font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.pred .exp{text-align:right;flex-shrink:0}
.pred .exp .n{font-family:'Sora','Inter',sans-serif;font-size:19px;font-weight:700;color:var(--red)}
.pred.amber .exp .n{color:var(--amber)}
.pred .exp .c{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:2px}
/* expandable evidence */
.more{margin-top:12px}
.more summary{cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--navy);list-style:none;display:inline-flex;align-items:center;gap:7px;user-select:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"▸";transition:transform .18s;font-size:12px}
.more[open] summary::after{transform:rotate(90deg)}
.more .inner{margin-top:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:15px 17px;display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
.more h4{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:7px}
.calc-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.calc-row .k{color:var(--body)}
.calc-row .v{font-family:'IBM Plex Mono',monospace;color:var(--ink);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-row.total{border-bottom:none;border-top:1.5px solid var(--ink);margin-top:2px;padding-top:7px}
.calc-row.total .k{font-weight:700;color:var(--ink)}
.more ul{padding-left:16px;margin:0}
.more li{font-size:12px;color:var(--body);padding:2px 0}

/* assistant */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{font-size:12.5px;font-weight:500;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--body);cursor:pointer;transition:all .16s}
.chip:hover{border-color:var(--orange);color:var(--orange-d)}
.assist-box{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:18px;min-height:120px;font-size:13.5px;color:var(--body)}

/* reporting pipeline */
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.step{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.step .icon{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--orange-d);margin-bottom:7px}
.step .label{font-size:13px;font-weight:600;color:var(--ink)}
.step .desc{font-size:11.5px;color:var(--muted);margin-top:3px}

.btn-primary{width:100%;background:var(--orange);color:#fff;border:none;border-radius:12px;padding:16px;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 2px 6px rgba(255,107,0,.25)}
.btn-primary:hover{background:var(--orange-d);box-shadow:0 4px 14px rgba(255,107,0,.3)}
.btn-primary:disabled{opacity:.7;cursor:not-allowed}
#report-status{margin-top:15px}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite;display:inline-block}

.conn-bar{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.conn{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.02em}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.foot{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--faint);text-align:center;margin-top:30px;padding-bottom:24px;letter-spacing:.06em}
.cfg-tool-btn{font-size:12px;font-weight:500;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--body);cursor:pointer;transition:all .15s}
.cfg-tool-btn:hover{border-color:var(--navy);color:var(--navy)}
.cfg-tool-btn.active-tool{background:var(--chrome);border-color:var(--chrome);color:#fff;font-weight:600}
.mk-check{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card);display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s}
.mk-check:hover{border-color:var(--navy)}
.mk-check.selected{border-color:var(--orange);background:var(--tint-orange)}

/* ── login ────────────────────────────────────────────────── */
.login-veil{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Inter',Arial,sans-serif;background:radial-gradient(1100px 620px at 18% -12%,rgba(255,107,0,.20),transparent 55%),radial-gradient(900px 620px at 108% 112%,rgba(233,30,140,.16),transparent 55%),linear-gradient(150deg,#0B0F35,#10164F 55%,#1A1F8C)}
.login-card{background:var(--card);border-radius:18px;padding:34px 32px 24px;width:380px;max-width:100%;box-shadow:0 30px 80px rgba(4,8,40,.55)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login-logo{width:44px;height:44px;border-radius:12px;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Sora','Inter',sans-serif;font-weight:800;font-size:16px;flex-shrink:0}
.login-brand strong{display:block;color:var(--ink);font-family:'Sora','Inter',sans-serif;font-size:16px;letter-spacing:-.01em}
.login-brand span{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.login-sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.login-label{display:block;font-size:11.5px;color:var(--ink);font-weight:600;letter-spacing:.02em;margin-bottom:5px}
.login-input{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;margin-bottom:14px;background:var(--field);transition:border-color .15s,box-shadow .15s,background .15s;outline:none;color:var(--ink)}
.login-input:focus{border-color:var(--navy);background:var(--card);box-shadow:0 0 0 3px rgba(26,31,140,.12)}
.login-err{color:var(--red);font-size:12px;min-height:16px;margin:-4px 0 8px}
/* The same line, when what it carries is an answer rather than a refusal:
   "a link is on its way", "your password has been changed". One element,
   two colours, because the login card has one place a sentence can go. */
.login-err.login-ok{color:var(--green-tx)}
.login-btn{width:100%;padding:12px;border:none;border-radius:10px;background:var(--chrome);color:#fff;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:background .15s,box-shadow .15s}
.login-btn:hover{background:var(--chrome-2);box-shadow:0 6px 18px rgba(16,22,79,.35)}
.login-btn:disabled{opacity:.7;cursor:wait}
.login-toggle{text-align:center;font-size:12.5px;color:var(--muted);margin:14px 0 0}
.login-toggle a{color:var(--navy);font-weight:600;text-decoration:none}
.login-toggle a:hover{text-decoration:underline}
.login-foot{color:var(--faint);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-align:center;margin:18px 0 0;text-transform:uppercase}
.login-foot a{color:inherit}

/* ── column mapper (configurator) ─────────────────────────── */
.nx-note{display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--body);max-width:820px}
.nx-note span:first-child{color:var(--orange)}
.nx-step{display:flex;align-items:center;gap:9px;font-family:'Sora','Inter',sans-serif;font-size:14px;font-weight:700;color:var(--ink);margin:24px 0 12px;padding-top:18px;border-top:1px solid var(--line-soft)}
.nx-step-n{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--ink);color:#fff;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;flex-shrink:0}
[data-theme="dark"] .nx-step-n{background:var(--chrome);color:#fff}
.nx-lbl{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px}
.nx-hint{font-size:11.5px;color:var(--muted);margin-top:7px}
.nx-select{padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--ink);background:var(--field);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.nx-select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,31,140,.12)}
.nx-chip{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--body);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:5px 10px;margin:0 6px 6px 0}
.nx-chip .x{width:5px;height:5px;border-radius:50%;background:var(--orange)}
.nx-maprow{display:grid;grid-template-columns:1.1fr 24px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line-soft)}
.nx-maprow:last-child{border-bottom:none}
.nx-field{font-size:13px;font-weight:600;color:var(--ink)}
.nx-field .req{color:var(--red);margin-left:3px}
.nx-field .ftype{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:.03em;margin-top:1px}
.nx-arrow{text-align:center;color:var(--faint);font-size:14px}
.nx-vmap{display:grid;grid-template-columns:1fr 24px 150px;gap:10px;align-items:center;padding:6px 0}
.nx-vmap .src{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--body)}
.nx-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.nx-table{width:100%;border-collapse:collapse;font-size:12px;min-width:420px}
.nx-table th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.nx-table td{padding:7px 10px;border-bottom:1px solid var(--line-soft);color:var(--body);vertical-align:top}
.nx-table tr:last-child td{border-bottom:none}
.nx-pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:5px}
.nx-warn{display:flex;gap:8px;align-items:flex-start;background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:9px;padding:10px 13px;font-size:12.5px;color:var(--amber-tx);margin-top:12px}
/* The read-only banner, across the top of every view once a trial has ended.
   Amber rather than red on purpose: nothing is broken and nothing is lost —
   the workspace is simply read-only until the customer picks a plan. */
.nx-plan-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--amber-bg);border:1px solid var(--amber-bd);color:var(--amber-tx);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:12.5px}
.nx-plan-banner strong{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--amber);color:#fff;border-radius:5px;padding:3px 8px}
.nx-plan-banner span{flex:1;min-width:260px;line-height:1.5}
.nx-ok{display:flex;gap:8px;align-items:center;background:var(--green-bg);border:1px solid var(--green-bd);border-radius:9px;padding:10px 13px;font-size:12.5px;color:var(--green-tx);margin-top:12px}
.nx-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nx-two h5{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.nx-drop{border:2px dashed var(--line);border-radius:14px;background:var(--surface-2);padding:26px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;max-width:560px}
.nx-drop:hover{border-color:var(--navy)}
.nx-drop.drag{border-color:var(--orange);background:var(--tint-orange)}
.nx-drop-icon{width:40px;height:40px;margin:0 auto 8px;border-radius:11px;background:var(--tint-orange);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.nx-drop-title{font-size:14px;font-weight:600;color:var(--ink)}
.nx-drop-sub{font-size:11.5px;color:var(--muted);margin-top:4px}
.nx-fresh{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--body);margin-top:12px}
.nx-fresh .fdot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.nx-fresh strong{color:var(--ink);font-variant-numeric:tabular-nums}

@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}.pipeline{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.ws-name{width:130px}.more .inner{grid-template-columns:1fr}
  .nx-load-grid{grid-template-columns:1fr}.nx-two{grid-template-columns:1fr}
  .nx-maprow{grid-template-columns:1fr 20px 1fr}.nx-vmap{grid-template-columns:1fr 20px 120px}
  .side{position:static;width:auto;flex-direction:column;border-right:none}
  /* The menu folds behind one button (js/phone.js), or its 13 links push the
     page about 660 pixels down. */
  .panel{padding:16px}
  /* A grid column otherwise grows to its widest table instead of letting it scroll. */
  .two-col>*{min-width:0}
  .nx-stack{grid-template-columns:1fr !important}
  .nx-two-up{grid-template-columns:repeat(2,1fr) !important}
  .side-menu-btn{display:block}
  .side-brand{padding:12px 18px}
  nav{display:none;flex-wrap:wrap;gap:4px;padding:10px 14px;overflow:visible}
  .side.menu-open nav{display:flex}
  .nav-cap{display:none}
  .nav-group{display:contents}
  nav button{width:auto;margin-bottom:0;padding:8px 12px}
  nav button.active::before{display:none}
  .side-foot{display:none}
  .side.menu-open .side-foot{display:block}
  .nx-more::before{content:'Swipe sideways to see more \2192';display:block;position:sticky;left:0;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:0 0 6px}
  #portfolio-cards{grid-template-columns:1fr !important}
  .band{margin-left:0;position:static}
  .band-inner{padding:14px 18px 0}
  #proj-switch{max-width:100%}
  .wrap{margin-left:0;padding:0 18px 18px}
}
@media (prefers-reduced-motion: reduce){
  .link-line::after,.agent.core .pip,.beacon{animation:none}
  .view.active{animation:none}
}

/* ── Plan & Replan (public/js/planning.js) ─────────────────────────────────
   Two source tags carry the product's positioning: what the AI proposed and
   what code computed. They are styled differently on purpose and used for
   nothing else. */
.plan-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
/* Where a plan comes from: linked on OneDrive, or uploaded once (step 6b). */
.plan-from{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.plan-from-opt{flex:1 1 240px;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface,transparent)}
.plan-from-opt:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.plan-from-opt input{margin-top:3px}
.plan-from-opt strong{display:block;font-size:13px;color:var(--ink)}
.plan-from-opt em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
#plan-im-onedrive>label>span{display:block;font-size:12px;font-weight:600;color:var(--body);margin-bottom:5px}
#plan-im-onedrive>label>span em{font-weight:400;color:var(--muted);font-style:normal}
.plan-link-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 10px}
.plan-link-bar a.cfg-tool-btn{text-decoration:none;display:inline-flex;align-items:center}
.plan-field{display:block}
.plan-field>span{display:block;font-size:12px;font-weight:600;color:var(--body);margin-bottom:5px}
.plan-field>span em{font-weight:400;color:var(--muted);font-style:normal}
.plan-field textarea{resize:vertical;min-height:96px;line-height:1.45}
.plan-unsaved{margin-top:16px;background:var(--amber-bg);border:1px solid var(--amber-bd);border-left:4px solid var(--amber);border-radius:9px;padding:12px 14px;font-size:13px;color:var(--amber-tx);line-height:1.5}
.plan-saved{margin-top:16px;background:var(--green-bg);border:1px solid var(--green-bd);border-left:4px solid var(--green);border-radius:9px;padding:12px 14px;font-size:13px;color:var(--green-tx);line-height:1.5}
.plan-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
.plan-section-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.plan-src{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid}
.plan-src-ai{background:var(--tint-orange);color:var(--orange-d);border-color:var(--orange)}
.plan-src-code{background:var(--blue-bg);color:var(--blue-tx);border-color:var(--blue-bd)}
.plan-include{margin-left:auto;font-size:12px;color:var(--body);cursor:pointer;white-space:nowrap}
.plan-include input{vertical-align:-2px;margin-right:5px}
.plan-ws{margin:4px 0 0 18px;padding:0;font-size:13px;color:var(--body);line-height:1.7}
.plan-fine{font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.plan-stale{font-size:12px;color:var(--amber-tx);margin:10px 0 0}
.plan-table-wrap{overflow-x:auto;margin-top:10px}
.nx-scroll{overflow-x:auto}
/* The timeline (js/gantt.js). Colours only — every position comes from the server's dates. */
.gantt-wrap{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:4px 0 14px;background:var(--card)}
.gantt-views{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.gantt-scroll{overflow-x:auto}
.gantt{display:block;width:100%;min-width:720px;height:auto;font-family:'Inter',sans-serif}
.gt-grid{stroke:var(--line-soft);stroke-width:1}
.gt-month{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--muted)}
.gt-band{fill:var(--surface-2)}
.gt-group{fill:var(--grey-bg)}
.gt-group-label{font-size:11px;font-weight:700;fill:var(--ink);letter-spacing:.02em}
.gt-hit{fill:transparent}
.gt-row{cursor:pointer;outline:none}
.gt-row-static{cursor:default}
.gt-row:hover .gt-hit,.gt-row:focus-visible .gt-hit{fill:var(--tint-orange)}
.gt-label{font-size:12px;fill:var(--ink)}
.gt-label-task{fill:var(--body);font-size:11.5px}
.gt-label-chain{font-weight:700}
.gt-plan{fill:var(--grey-dot)}
.gt-fc{fill:var(--navy);opacity:.85}
.gt-chain{fill:var(--orange)}
.gt-act{fill:var(--green)}
.gt-was{fill:none;stroke:var(--body);stroke-width:1.5;stroke-dasharray:3 2}
.gt-ms-plan{fill:none;stroke:var(--grey-dot);stroke-width:1.5}
.gt-ms-fc{fill:var(--navy)}
.gt-ms-chain{fill:var(--orange)}
.gt-ms-act{fill:var(--green)}
.gt-mark{stroke-width:1.5}
.gt-mark-today{stroke:var(--magenta);stroke-dasharray:3 3}
.gt-mark-goLive{stroke:var(--ink)}
.gt-mark-forecastGoLive{stroke:var(--red);stroke-dasharray:5 3}
.gt-mark-label{font-size:10px;font-weight:600;stroke:none}
text.gt-mark-today{fill:var(--magenta)}
text.gt-mark-goLive{fill:var(--ink)}
text.gt-mark-forecastGoLive{fill:var(--red)}
.gantt-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:11.5px;color:var(--body)}
.gantt-key{display:inline-flex;align-items:center;gap:6px}
.gantt-export{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
/* What if…? (js/what-if.js). Every figure in it is the server's. */
.whatif-wrap{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px;background:var(--card)}
.whatif-closed{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.whatif-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.whatif-input{font-family:'Inter',sans-serif;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--ink);max-width:100%}
.whatif-num{width:80px}
.whatif-word{font-size:13px;color:var(--body)}
.whatif-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.whatif-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 6px 4px 10px;border-radius:14px;background:var(--tint-orange);color:var(--ink);border:1px solid var(--line)}
.whatif-chip button{border:none;background:transparent;color:var(--body);font-size:15px;line-height:1;cursor:pointer;padding:0 4px}
.whatif-compare{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--body);margin:4px 0 10px}
.whatif-options{border-top:1px solid var(--line-soft);margin:12px 0 4px;padding-top:12px}
.whatif-apply:disabled{background:var(--grey-bg);color:var(--muted);box-shadow:none;cursor:not-allowed}
.cost-figs{display:flex;flex-wrap:wrap;gap:8px 26px;margin:2px 0 8px}
.cost-fig{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink)}
.cost-over{color:var(--red-tx)}
.cost-under{color:var(--green-tx)}
/* Money · your financial year (public/js/costing.js), and the cost panel's periods */
.fy-grid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:22px;align-items:start}
@media (max-width:860px){.fy-grid{grid-template-columns:1fr}}
.fy-form .nx-select{display:block;width:100%;max-width:340px}
.fy-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fy-row .nx-select{display:inline-block;width:auto}
.fy-word{font-size:13px;color:var(--body)}
.fy-form textarea.fy-table{font-family:'IBM Plex Mono',monospace;font-size:12px;max-width:100%;resize:vertical}
.fy-preview{min-width:0}
.fy-desc{font-size:13px;color:var(--ink);margin:0 0 6px}
.fy-today{font-size:13px;color:var(--body);margin:0 0 10px}
.fy-yearbar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--body);margin:0 0 6px}
.fy-yearbar button:disabled{opacity:.4;cursor:default}
.fy-current td{background:var(--surface-2);color:var(--ink);font-weight:600}
.fy-now{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin-left:4px}
.cost-periods tr.cost-past td{color:var(--muted)}
.cost-bar{display:inline-block;height:6px;border-radius:3px;background:var(--navy);opacity:.55;vertical-align:middle}
.whatif-cost{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;margin:0 0 10px}
.whatif-cost-lines{margin:0;padding-left:18px;font-size:12.5px;color:var(--body);line-height:1.6}
.whatif-k{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.plan-table{width:100%;border-collapse:collapse;font-size:12.5px}
.plan-table th{text-align:left;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:7px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.plan-table td{padding:8px 6px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--body)}
.plan-table th.plan-col-code{color:var(--blue-tx)}
.plan-table td.plan-col-code{background:var(--blue-bg)}
.plan-because{color:var(--muted);font-size:12px;min-width:180px}
.plan-dim{opacity:.45;text-decoration:line-through}
.plan-days{width:64px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--ink);font-size:12.5px;text-align:right}
.plan-days-missing{border-color:var(--amber);background:var(--amber-bg)}
/* Shutdowns and holidays — a collapsed box, because most plans do not need it
   and an empty textarea above the Draft button would read as required. */
.plan-freeze{margin-top:12px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--field)}
.plan-freeze>summary{font-size:12px;font-weight:600;color:var(--body);cursor:pointer}
.plan-freeze>summary em{font-weight:400;color:var(--muted);font-style:normal}
.plan-freeze textarea{resize:vertical;min-height:62px;line-height:1.5;font-family:'IBM Plex Mono',monospace;font-size:12px}
/* The marker beside a computed date. Decoration only: the sentence in the list
   below the table is the statement, so colour and symbol carry nothing alone. */
.plan-flag{margin-left:5px;font-size:10px;color:var(--amber-2);vertical-align:1px;cursor:help}
.plan-flag-freeze{color:var(--red-2)}
.plan-flag-list{list-style:none;margin-left:0}
.plan-flag-list li{padding-left:18px;position:relative}
.plan-flag-list li::before{position:absolute;left:0;font-size:10px;top:3px}
.plan-flag-list li.plan-flag-weekend::before{content:'\25cf';color:var(--amber-2)}
.plan-flag-list li.plan-flag-freeze::before{content:'\2744';color:var(--red-2)}
.plan-flag-list li.plan-flag-through-freeze::before{content:'\2744';color:var(--red-2)}
.plan-save{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.plan-save button[disabled]{opacity:.5;cursor:not-allowed}

/* Import from Excel (public/js/planning.js → planImportRender) */
.plan-src-own{background:var(--grey-bg);color:var(--body);border-color:var(--line)}
.plan-select{margin:0;padding:5px 8px;font-size:12.5px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--ink);max-width:220px}
.plan-checklist{list-style:none;margin-left:0}
.plan-tick{color:var(--green-2);font-weight:700}
.plan-plus{color:var(--amber-tx);font-weight:700}

/* Plan view and "the rows behind this figure" (public/js/plan-view.js) */
.cc-fig{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.cc-fig:hover,.cc-fig:focus-visible{color:var(--navy);text-decoration-style:solid}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.cc-chips-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.cc-chip{font-size:12px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--body)}
.cc-indent{color:var(--muted);margin:0 4px 0 6px}
.cc-rows{margin-bottom:18px;border-left:4px solid var(--navy)}
#cc-plan-table tr.cc-hl td{background:var(--tint-orange)}

/* Does the plan still fit? (public/js/plan-view.js → nxFitHtml) */
.cc-fit{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-left-width:4px;border-radius:9px;padding:10px 13px;margin:8px 0 12px;font-size:13px;line-height:1.5;color:var(--body)}
.cc-fit .dot{margin-top:5px}
.cc-fit-red{border-color:var(--red-bd);border-left-color:var(--red);background:var(--red-bg)}
.cc-fit-amber{border-color:var(--amber-bd);border-left-color:var(--amber);background:var(--amber-bg)}
.cc-fit-green{border-color:var(--green-bd);border-left-color:var(--green);background:var(--green-bg)}
.cc-fit-none{border-left-color:var(--grey-dot);background:var(--grey-bg)}
.cc-slack-red{color:var(--red-tx);font-weight:700}
.cc-slack-amber{color:var(--amber-tx);font-weight:700}