/* ===========================================================================
   SCOPE INTELLIGENCE CENTER (v70)
   The SOW tab is a product module, not a report page. The design language is
   premium enterprise SaaS: a calm neutral ground, white surfaces, restrained
   borders, generous whitespace and a strict type scale — with colour reserved
   for MEANING (discipline, status, health, severity, phase), never decoration.

   Structure
     .sic          the module shell (top bar + frame)
     .sic-rail     left view navigation
     .sic-main     the scrolling workspace
     .sic-hero     the scope map — the visual anchor of the whole module
     .sic-card     the one surface primitive everything else composes from
     .sic-slide    the wide slide-over for deep detail

   Tokens stay on the NEXORA palette (--ic-green / ink / ivory) that the input
   and mapping tabs already use, extended with the semantic scales this module
   needs.
   ========================================================================= */

#tp-sow {
  /* brand */
  --sic-green: #24B47E;
  --sic-green-d: #1B9A6B;
  --sic-tint: #EAF7F1;
  --sic-ink: #14202A;
  --sic-ink-2: #37424D;
  --sic-mut: #6B7580;
  --sic-mut-2: #8A94A0;

  /* surfaces */
  --sic-bg: #F5F7F9;
  --sic-card: #FFFFFF;
  --sic-wash: #FAFBFC;
  --sic-line: #E6EAEE;
  --sic-line-2: #EFF2F5;
  --sic-line-3: #D9DFE5;

  /* semantic */
  --sic-ok: #24B47E;
  --sic-warn: #E0A33A;
  --sic-risk: #D9614F;
  --sic-info: #4A77AE;
  --sic-neutral: #8A94A0;
  --sic-ok-t: #E9F7F1;
  --sic-warn-t: #FDF4E5;
  --sic-risk-t: #FBEEEC;
  --sic-info-t: #EDF2F9;

  /* geometry + type */
  --sic-r: 14px;
  --sic-r-s: 9px;
  --sic-r-xs: 6px;
  --sic-sh: 0 1px 2px rgba(20, 32, 42, .04), 0 1px 3px rgba(20, 32, 42, .03);
  --sic-sh-2: 0 4px 16px rgba(20, 32, 42, .07), 0 1px 3px rgba(20, 32, 42, .04);
  --sic-sh-3: 0 18px 48px rgba(20, 32, 42, .14);
  --sic-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --sic-head: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  --sic-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  background: var(--sic-bg);
  color: var(--sic-ink);
}

#tp-sow *, #tp-sow *::before, #tp-sow *::after { box-sizing: border-box; }
#tp-sow *:focus-visible { outline: 2px solid var(--sic-green); outline-offset: 2px; border-radius: var(--sic-r-xs); }
#sowOut { font-family: var(--sic-font); font-size: 13px; line-height: 1.55; color: var(--sic-ink); -webkit-font-smoothing: antialiased; }

.sic-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.sic-ic-b { width: 19px; height: 19px; flex: 0 0 auto; }
.sic-ic-s { width: 14px; height: 14px; flex: 0 0 auto; }
.sic-ic-xs { width: 12px; height: 12px; flex: 0 0 auto; }
.sic-ic-l { width: 22px; height: 22px; flex: 0 0 auto; }
.sic-ic-xl { width: 34px; height: 34px; flex: 0 0 auto; }

/* ── shell ────────────────────────────────────────────────────────────────── */

.sic { display: flex; flex-direction: column; height: 100%; min-height: 640px; background: var(--sic-bg); }

.sic-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; background: var(--sic-card);
  border-bottom: 1px solid var(--sic-line);
  position: sticky; top: 0; z-index: 40;
}
.sic-top-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sic-top-r { display: flex; align-items: center; gap: 8px; position: relative; }

.sic-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--sic-ink); }
.sic-brand b { font-family: var(--sic-head); font-size: 13px; letter-spacing: .13em; font-weight: 800; }
.sic-sep { width: 1px; height: 26px; background: var(--sic-line); }
.sic-title h1 { margin: 0; font-family: var(--sic-head); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.sic-title p { margin: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sic-mut); }

.sic-crumbs { display: flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 12px; color: var(--sic-mut); min-width: 0; }
.sic-crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.sic-crumbs .is-cur { color: var(--sic-ink); font-weight: 600; }
.sic-crumbs svg { color: var(--sic-line-3); }

.sic-search { display: flex; align-items: center; gap: 7px; background: var(--sic-wash); border: 1px solid var(--sic-line); border-radius: 999px; padding: 0 12px; height: 34px; min-width: 268px; color: var(--sic-mut); transition: border-color .15s, background .15s; }
.sic-search:focus-within { border-color: var(--sic-green); background: var(--sic-card); }
.sic-search input { border: 0; background: none; outline: none; font: inherit; font-size: 12.5px; color: var(--sic-ink); width: 100%; }
.sic-search input::placeholder { color: var(--sic-mut-2); }
.sic-search-x { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--sic-mut); display: flex; }

.sic-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
  border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); background: var(--sic-card);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sic-ink-2);
  cursor: pointer; white-space: nowrap; transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.sic-btn:hover { background: var(--sic-wash); border-color: var(--sic-line-3); }
.sic-btn.is-primary { background: var(--sic-ink); border-color: var(--sic-ink); color: #fff; }
.sic-btn.is-primary:hover { background: #0D1720; }
.sic-btn.is-ghost { background: none; border-color: transparent; color: var(--sic-mut); }
.sic-btn.is-ghost:hover { background: var(--sic-wash); color: var(--sic-ink); }
.sic-btn.is-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.sic-btn.is-full { width: 100%; justify-content: center; margin-top: 8px; }
.sic-btn-tag { font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-left: 2px; }

/* search results */
.sic-sr {
  position: absolute; top: 42px; right: 0; width: 420px; max-height: 380px; overflow: auto;
  background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r);
  box-shadow: var(--sic-sh-3); z-index: 60; padding: 6px;
}
.sic-sr-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sic-mut); padding: 6px 10px; }
.sic-sr-empty { padding: 16px 12px; color: var(--sic-mut); font-size: 12.5px; }
.sic-sr-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--sic-r-s); cursor: pointer; text-align: left; font: inherit; }
.sic-sr-row:hover { background: var(--sic-wash); }
.sic-sr-t { font-size: 12.5px; font-weight: 600; color: var(--sic-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-sr-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sic-mut-2); }
.sic-sr-row em { grid-column: 2 / -1; font-style: normal; font-size: 11.5px; color: var(--sic-mut); }

/* ── frame + rail ─────────────────────────────────────────────────────────── */

/* The view nav runs ACROSS THE TOP. As a left column it sat beside the app
   shell's own vertical icon rail — two columns of the same thing — and the
   module's own views were the ones reduced to unlabelled icons. */
.sic-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.sic-rail {
  display: flex; align-items: center; gap: 3px; flex: 0 0 auto;
  background: var(--sic-card); border-bottom: 1px solid var(--sic-line);
  padding: 7px 14px; overflow-x: auto; overflow-y: hidden;
}
.sic-rail::-webkit-scrollbar { height: 0; }
.sic-rail-gl {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sic-mut-2); font-weight: 700; padding: 0 8px 0 2px; white-space: nowrap;
}
.sic-rail-sep { width: 1px; height: 18px; background: var(--sic-line); margin: 0 8px; flex: 0 0 auto; }
.sic-rail-b {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; flex: 0 0 auto;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 550; color: var(--sic-ink-2); white-space: nowrap;
  transition: background .14s, color .14s;
}
.sic-rail-b span { white-space: nowrap; }
.sic-rail-b em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--sic-mut-2); background: var(--sic-wash); border-radius: 999px; padding: 1px 6px; }
.sic-rail-b svg { color: var(--sic-mut); }
.sic-rail-b:hover { background: var(--sic-wash); color: var(--sic-ink); }
.sic-rail-b.is-on { background: var(--sic-tint); color: var(--sic-green-d); font-weight: 650; }
.sic-rail-b.is-on svg { color: var(--sic-green-d); }
.sic-rail-b.is-on em { background: rgba(36, 180, 126, .16); color: var(--sic-green-d); }

.sic-main { overflow: auto; padding: 20px 22px 56px; min-width: 0; }
.sic-view { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.sic-vhead h2 { margin: 0 0 3px; font-family: var(--sic-head); font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.sic-vhead p { margin: 0; font-size: 13px; color: var(--sic-mut); max-width: 780px; }

/* ── project header ───────────────────────────────────────────────────────── */

.sic-phead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 0 2px;
}
.sic-phead-l { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sic-phead-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--sic-ink); color: var(--sic-tint); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sic-phead-id em { font-style: normal; display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-phead h2 { margin: 0; font-family: var(--sic-head); font-size: 16px; font-weight: 700; letter-spacing: -.018em; }
.sic-phead-id p { margin: 0; font-size: 11.5px; color: var(--sic-mut); }
.sic-phead-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sic-pmeta { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; border-left: 1px solid var(--sic-line-2); }
.sic-pmeta:first-child { border-left: 0; }
.sic-pmeta em { font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; white-space: nowrap; }
.sic-pmeta b { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.sic-meta { display: flex; flex-direction: column; gap: 1px; }
.sic-meta em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sic-mut-2); }
.sic-meta b { font-family: var(--sic-head); font-size: 16px; font-weight: 700; }
.sic-meta b i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--sic-mut); margin-left: 3px; }

/* ── KPI strip: contextual indicators, never the hero ─────────────────────── */

.sic-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sic-kpis.is-compact { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.sic-kpi {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; text-align: left;
  background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r);
  box-shadow: var(--sic-sh); cursor: pointer; font: inherit; transition: border-color .14s, box-shadow .14s, transform .14s;
}
.sic-kpi:hover { border-color: var(--sic-line-3); box-shadow: var(--sic-sh-2); transform: translateY(-1px); }
.sic-kpi.is-static { cursor: default; }
.sic-kpi.is-static:hover { transform: none; box-shadow: var(--sic-sh); border-color: var(--sic-line); }
.sic-kpi-i { width: 32px; height: 32px; border-radius: var(--sic-r-s); background: var(--sic-wash); color: var(--sic-mut); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sic-kpi-b { display: flex; flex-direction: column; min-width: 0; }
.sic-kpi-b b { font-family: var(--sic-head); font-size: 21px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.sic-kpi-b span { font-size: 11.5px; font-weight: 600; color: var(--sic-ink-2); }
.sic-kpi-b em { font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── HERO: the scope map ──────────────────────────────────────────────────── */

.sic-hero { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); box-shadow: var(--sic-sh); overflow: hidden; }
.sic-hero-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--sic-line-2); flex-wrap: wrap; }
.sic-hero-ht h3 { margin: 0; font-family: var(--sic-head); font-size: 15px; font-weight: 700; }
.sic-hero-ht p { margin: 2px 0 0; font-size: 12px; color: var(--sic-mut); }
.sic-hero-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sic-seg { display: inline-flex; background: var(--sic-wash); border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); padding: 2px; gap: 2px; }
.sic-seg-b { border: 0; background: none; border-radius: var(--sic-r-xs); padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--sic-mut); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: background .14s, color .14s; }
.sic-seg-b:hover { color: var(--sic-ink); }
.sic-seg-b.is-on { background: var(--sic-card); color: var(--sic-ink); box-shadow: var(--sic-sh); }
.sic-seg-b em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--sic-mut-2); }
.sic-seg.is-wide { display: flex; flex-wrap: wrap; }
.sic-seg.is-sm .sic-seg-b { padding: 4px 9px; font-size: 11.5px; }

.sic-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sic-sel { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px 0 10px; background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); color: var(--sic-mut); }
.sic-sel select { border: 0; background: none; outline: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--sic-ink-2); cursor: pointer; max-width: 158px; }

.sic-canvas { position: relative; height: 470px; background:
  radial-gradient(circle at 1px 1px, var(--sic-line) 1px, transparent 0) 0 0 / 22px 22px, var(--sic-wash);
  overflow: hidden; }
/* WHY A DRAWN CURSOR. Chromium paints `grab`/`grabbing` as a WHITE-filled hand
   with a hairline outline. On this canvas — a near-white wash — the pointer
   effectively disappears, which is exactly what it was reported as. The
   platform cursor cannot be recoloured, so the pan cursor is drawn: a dark
   four-way move glyph carrying a white halo, so it stays legible over the pale
   background AND over the saturated scope fills. `grab` stays as the fallback
   for anything that refuses the image. */
.sic-canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2 16 6 14 6 14 10 18 10 18 8 22 12 18 16 18 14 14 14 14 18 16 18 12 22 8 18 10 18 10 14 6 14 6 16 2 12 6 8 6 10 10 10 10 6 8 6Z' fill='%2314202A' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, grab;
}
.sic-canvas.is-panning {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 4 15 8 13 8 13 11 16 11 16 9 20 12 16 15 16 13 13 13 13 16 15 16 12 20 9 16 11 16 11 13 8 13 8 15 4 12 8 9 8 11 11 11 11 8 9 8Z' fill='%2314202A' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, grabbing;
}
/* the same problem on the nodes: `pointer` is a white hand too, and a scope
   node is often a mid-tone fill. A dark arrow with a white halo reads on both. */
.sicg-node, .sicg-fhit, .sicg-open {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M4 2 4 17 8 13.4 10.6 19.4 13.6 18 11 12.2 16 12Z' fill='%2314202A' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, pointer;
}
/* `touch-action: none` is what lets a finger PAN the map instead of scrolling
   the page underneath it. It pairs with preventDefault() in the touch handlers:
   CSS alone does not suppress the synthetic mouse events, and preventDefault
   alone does not stop every browser's scroll. */
.sic-canvas-svg { display: block; width: 100%; height: 100%; touch-action: none; }
/* a filter that empties the board explains itself here, without taking the
   map controls off screen with it */
.sic-canvas-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 340px; text-align: center; background: var(--sic-card); border: 1px solid var(--sic-line);
  border-radius: var(--sic-r-m); padding: 18px 20px; box-shadow: var(--sic-sh); }
.sic-canvas-note h4 { margin: 0 0 6px; font-family: var(--sic-head); font-size: 13px; font-weight: 700; color: var(--sic-ink); }
.sic-canvas-note p { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--sic-mut); }
.sic-canvas-note .sic-more { margin-top: 10px; }

/* scope map nodes */
.sicg-edge { fill: none; stroke: var(--sic-line-3); transition: opacity .18s, stroke .18s; }
.sicg-edge.is-muted { stroke-dasharray: 3 3; }
.sicg-edge.is-dim { opacity: .18; }
.sicg-node .sicg-box { fill: var(--sic-card); stroke: var(--sic-line); stroke-width: 1; transition: stroke .16s, filter .16s; filter: drop-shadow(0 1px 2px rgba(20,32,42,.05)); }
.sicg-node:hover .sicg-box { stroke: var(--sic-line-3); filter: drop-shadow(0 4px 12px rgba(20,32,42,.1)); }
.sicg-node.is-selected .sicg-box { stroke: var(--sic-ink); stroke-width: 1.6; filter: drop-shadow(0 6px 18px rgba(20,32,42,.14)); }
.sicg-node.is-dim { opacity: .3; }
.sicg-node .sicg-t { font-family: var(--sic-head); font-size: 12px; font-weight: 700; fill: var(--sic-ink); }
.sicg-node .sicg-s { font-size: 10px; fill: var(--sic-mut); }
.sicg-node .sicg-cov-t { fill: var(--sic-line-2); }
.sicg-node .sicg-more-t { font-size: 11px; font-weight: 700; fill: var(--sic-mut); }
.sicg-root .sicg-box { fill: var(--sic-ink); stroke: var(--sic-ink); }
.sicg-root .sicg-t { fill: #fff; font-size: 13px; letter-spacing: .04em; }
.sicg-root .sicg-s { fill: rgba(255, 255, 255, .62); }
.sicg-more .sicg-box { fill: var(--sic-wash); stroke-dasharray: 4 3; }
.sicg-expand circle { fill: var(--sic-card); stroke: var(--sic-line-3); stroke-width: 1; }
.sicg-expand text { font-size: 9.5px; font-weight: 700; fill: var(--sic-mut); }
.sicg-node:hover .sicg-expand circle { fill: var(--sic-ink); stroke: var(--sic-ink); }
.sicg-node:hover .sicg-expand text { fill: #fff; }
/* ── delivery flow: pills, right angles, junction dots ────────────────────
   A flowchart has its own vocabulary and it is not the card vocabulary above.
   The pill says "a step"; the right-angled connector says "then" where a curve
   would only say "related to"; and the fill carries the ROLE — terminal,
   route step, decision — which is the one thing a reader decodes first. */
.sicg-flow .sicg-fbox { stroke: rgba(20, 32, 42, .07); stroke-width: 1; transition: filter .16s, stroke .16s; filter: drop-shadow(0 1px 2px rgba(20, 32, 42, .06)); }
.sicg-flow:hover .sicg-fbox { stroke: rgba(20, 32, 42, .2); filter: drop-shadow(0 5px 14px rgba(20, 32, 42, .13)); }
.sicg-flow.is-selected .sicg-fbox { stroke: var(--sic-ink); stroke-width: 1.7; filter: drop-shadow(0 7px 20px rgba(20, 32, 42, .17)); }
.sicg-flow .sicg-ft { font-family: var(--sic-head); font-size: 12px; font-weight: 650; fill: var(--sic-ink); }
.sicg-flow .sicg-ft.is-terminal { font-size: 13px; font-weight: 750; letter-spacing: .06em; }
.sicg-flow .sicg-fs { font-size: 9.5px; fill: rgba(20, 32, 42, .55); }
.sicg-f-decision .sicg-ft { font-weight: 700; }
.sicg-edge.is-flow { fill: none; stroke: var(--sic-line-3); stroke-linecap: round; stroke-linejoin: round; }
/* a back edge runs against the sequence: the two scopes interleave on site */
.sicg-edge.is-flow.is-back { stroke-dasharray: 5 4; opacity: .85; }
.sicg-edge.is-flow.is-crit { stroke-width: 2.4 !important; }
.sicg-fjoin { fill: var(--sic-line-3); }
.sicg-farrow { stroke: none; fill: var(--sic-line-3); }
/* a 1.5px connector is not a click target — this is the one that gets clicked.
   `fill: none` is LOAD-BEARING: without it every elbow paints as a filled
   polygon and the canvas turns into black blocks. */
.sicg-fhit { fill: none; stroke: transparent; stroke-width: 16; }
.sicg-fhit:focus-visible { outline: none; stroke: rgba(20, 32, 42, .12); }
.sicg-fhit:hover + .sicg-edge { stroke-width: 3 !important; }
.sicg-fbadge rect { fill: var(--sic-card); stroke: var(--sic-line-3); stroke-width: 1; }
.sicg-fbadge text { font-size: 9.5px; font-weight: 650; fill: var(--sic-mut); font-variant-numeric: tabular-nums; }
.sicg-fbadge.is-crit text { font-weight: 750; }
/* nothing in the programme sequences this scope against anything */
.sicg-flow.is-isolated .sicg-fbox { stroke-dasharray: 5 4; stroke: var(--sic-line-3); }
/* an opened scope: a boundary drawn per run of consecutive ranks, plus a
   colour rail on each of its activities so a node is self-describing even when
   the boundary's label is off-screen */
.sicg-fgroup path { fill: rgba(20, 32, 42, .028); stroke-width: 1.2; stroke-dasharray: 6 4; opacity: .9; stroke-linejoin: round; }
.sicg-fgroup text { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .95; }
.sicg-frail { opacity: .95; }
/* the loaded build, so a cached bundle is visible instead of being argued about */
.sic-build { font-weight: 700; font-family: var(--sic-mono); font-size: 9.5px; letter-spacing: 0; opacity: .8; }
.sicg-f-activity .sicg-fbox { stroke: var(--sic-line); }
.sicg-f-activity .sicg-ft { font-size: 11.5px; font-weight: 600; }
.sicg-fcrit { fill: var(--sic-risk); opacity: .85; }
/* how many activities a collapsed scope holds — and the click that opens them */
.sicg-fexpand rect { fill: var(--sic-card); stroke: var(--sic-line-3); stroke-width: 1; }
.sicg-fexpand text { font-size: 10px; font-weight: 700; fill: var(--sic-mut); }
.sicg-flow:hover .sicg-fexpand rect { fill: var(--sic-ink); stroke: var(--sic-ink); }
.sicg-flow:hover .sicg-fexpand text { fill: #fff; }
.sic-map-note { font-family: var(--sic-mono); font-size: 10px; color: var(--sic-ink-2) !important; background: var(--sic-wash); border-radius: 4px; padding: 2px 6px; }
.sic-map-note2 { font-size: 9.5px; color: var(--sic-mut-2) !important; line-height: 1.35; }
.sic-lg-solid, .sic-lg-dash { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--sic-mut-2); margin-right: 7px; vertical-align: middle; }
.sic-lg-dash { border-top-style: dashed; }
.sic-map-chk { margin-top: 4px; border-top: 1px solid var(--sic-line-2); padding-top: 8px !important; }
.sic-hero-flag.is-risk { color: var(--sic-risk) !important; }
/* the single worst handover, promoted out of the chart into a line you can act
   on — clicking it opens that interface */
.sic-seq-worst {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0 !important;
  padding: 7px 12px; border-radius: var(--sic-r-s); cursor: pointer;
  background: var(--sic-warn-t); color: #8C5E12; font-size: 11.5px;
  border: 1px solid rgba(224, 163, 58, .28);
}
.sic-seq-worst:hover { background: rgba(224, 163, 58, .2); }
.sic-seq-worst b { font-weight: 700; }
.sic-seq-worst svg { flex: 0 0 auto; }
.sicg-flow .sicg-open rect { fill: var(--sic-ink); }
.sicg-flow .sicg-open:hover rect { fill: var(--sic-green-d); }
.sic-map-legend.is-flow .sic-map-lr { white-space: nowrap; min-width: 0; }
/* the explainer is a SENTENCE — nowrap sent it straight off the canvas edge,
   which only became visible once the phase list made the panel taller */
.sic-map-legend.is-flow .sic-map-note2 { white-space: normal; }
/* a phase branch can be called "Initiation / Pre-Construction Phase"; the
   panel is 190px and must not grow to fit the longest name on the programme */
.sic-map-lt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.sicg-rnode .sicg-rbg { transition: filter .16s; filter: drop-shadow(0 3px 10px rgba(20,32,42,.14)); }
.sicg-rnode:hover .sicg-rbg { filter: drop-shadow(0 6px 18px rgba(20,32,42,.24)); }
.sicg-rnode.is-selected .sicg-rbg { stroke: var(--sic-ink); stroke-width: 2.5; }
.sicg-rt { font-family: var(--sic-head); font-size: 10.5px; font-weight: 700; fill: #fff; }

/* map overlays */
.sic-map-legend { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; max-width: 190px; box-shadow: var(--sic-sh); }
.sic-map-lh, .sic-map-lh2 { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-map-lh2 { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--sic-line-2); }
.sic-map-lr { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sic-ink-2); }
.sic-map-zoom { display: flex; align-items: center; gap: 2px; background: var(--sic-wash); border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); padding: 3px; }
.sic-map-zoom button { border: 0; background: none; width: 26px; height: 26px; border-radius: var(--sic-r-xs); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sic-mut); }
.sic-map-zoom button:hover { background: var(--sic-wash); color: var(--sic-ink); }
.sic-map-zoom span { font-size: 11px; font-weight: 700; color: var(--sic-ink-2); min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.sic-map-mini { width: 100%; height: 84px; background: var(--sic-wash); border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); overflow: hidden; }
.sicg-minimap-svg { width: 100%; height: 100%; display: block; }
.sicg-mm-view { fill: rgba(36,180,126,.1); stroke: var(--sic-green); stroke-width: 1; }

/* focused-node peek */
.sic-peek { position: absolute; bottom: 14px; left: 190px; width: 300px; background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); box-shadow: var(--sic-sh-2); padding: 13px 14px; }
.sic-peek header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sic-peek-d { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--sic-mut); }
.sic-peek-x { border: 0; background: none; cursor: pointer; color: var(--sic-mut); display: flex; padding: 2px; }
.sic-peek h4 { margin: 0 0 5px; font-family: var(--sic-head); font-size: 15px; font-weight: 700; }
.sic-peek p { margin: 0 0 10px; font-size: 12px; color: var(--sic-mut); line-height: 1.5; }
.sic-peek-m { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 11px; }
.sic-peek-m span { display: flex; flex-direction: column; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-peek-m b { font-family: var(--sic-head); font-size: 15px; font-weight: 700; color: var(--sic-ink); }
.sic-peek footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ── card primitive ───────────────────────────────────────────────────────── */

.sic-card { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); box-shadow: var(--sic-sh); overflow: hidden; }
.sic-card.is-flat { box-shadow: none; }
.sic-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px 10px; }
.sic-card-ht h3 { margin: 0; font-family: var(--sic-head); font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.sic-card-ht p { margin: 2px 0 0; font-size: 11.5px; color: var(--sic-mut); max-width: 620px; }
.sic-card-b { padding: 0 16px 16px; }
.sic-card-h + .sic-card-b { padding-top: 2px; }

.sic-analytics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.sic-analytics.is-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sic-analytics > .sic-card { display: flex; flex-direction: column; }
.sic-analytics > .sic-card > .sic-card-b { flex: 1; display: flex; flex-direction: column; }
.sic-two { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.sic-two-main, .sic-two-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sic-stack-v { display: flex; flex-direction: column; gap: 14px; }
.sic-split { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; }

.sic-note { margin: 10px 0 0; font-size: 11px; color: var(--sic-mut-2); line-height: 1.5; }
.sic-mono { font-family: var(--sic-mono); font-size: 11px; color: var(--sic-mut); word-break: break-word; }

.sic-nodata { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 26px 18px; text-align: center; color: var(--sic-mut); border: 1px dashed var(--sic-line-3); border-radius: var(--sic-r-s); background: var(--sic-wash); }
.sic-nodata b { color: var(--sic-ink-2); font-size: 12.5px; }
.sic-nodata span { font-size: 11.5px; max-width: 430px; }
.sic-nodata svg { color: var(--sic-mut-2); }

.sic-clear { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 22px 16px; text-align: center; color: var(--sic-green-d); background: var(--sic-ok-t); border-radius: var(--sic-r-s); }
.sic-clear b { font-size: 13px; }
.sic-clear span { font-size: 11.5px; color: var(--sic-mut); max-width: 430px; }
.sic-clear.is-big { padding: 52px 20px; }
.sic-clear.is-big b { font-size: 16px; font-family: var(--sic-head); }

.sic-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 11px; border: 1px solid var(--sic-line); border-radius: 999px; background: var(--sic-card); font: inherit; font-size: 11.5px; font-weight: 600; color: var(--sic-mut); cursor: pointer; transition: background .14s, color .14s; }
.sic-more:hover { background: var(--sic-wash); color: var(--sic-ink); }

/* ── chips / pills / bars ─────────────────────────────────────────────────── */

.sic-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--sic-wash); border: 1px solid var(--sic-line); font-size: 10.5px; font-weight: 600; color: var(--sic-mut); margin-right: 4px; }
.sic-chip.t-risk { background: var(--sic-risk-t); border-color: transparent; color: var(--sic-risk); }
.sic-chip.t-warn { background: var(--sic-warn-t); border-color: transparent; color: #A9761F; }
.sic-chip.t-info { background: var(--sic-info-t); border-color: transparent; color: var(--sic-info); }

.sic-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

.sic-health { display: inline-flex; align-items: center; gap: 4px; padding: 2.5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.sic-health.h-good { background: var(--sic-ok-t); color: var(--sic-green-d); }
.sic-health.h-watch { background: var(--sic-warn-t); color: #A9761F; }
.sic-health.h-risk { background: var(--sic-risk-t); color: var(--sic-risk); }

.sic-sev { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--sic-r-xs); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; flex: 0 0 auto; }
.sic-sev.s-high { background: var(--sic-risk-t); color: var(--sic-risk); }
.sic-sev.s-medium { background: var(--sic-warn-t); color: #A9761F; }
.sic-sev.s-low { background: var(--sic-wash); color: var(--sic-mut); }

.sic-status { display: inline-flex; align-items: center; padding: 2.5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.sic-status.s-complete { background: var(--sic-ok-t); color: var(--sic-green-d); }
.sic-status.s-progress { background: var(--sic-info-t); color: var(--sic-info); }
.sic-status.s-notstarted { background: var(--sic-wash); color: var(--sic-mut); }
.sic-status.s-planned { background: var(--sic-wash); color: var(--sic-mut-2); }

.sic-cov { display: inline-flex; align-items: center; gap: 8px; min-width: 96px; }
.sic-cov-t { flex: 1; height: 5px; border-radius: 3px; background: var(--sic-line-2); overflow: hidden; }
.sic-cov-t i { display: block; height: 100%; border-radius: 3px; transition: width .3s ease; }
.sic-cov b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }

.sic-stack { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--sic-line-2); }
.sic-stack i { display: block; height: 100%; }
.sic-stack.is-empty { background: var(--sic-line-2); }

/* ── charts ───────────────────────────────────────────────────────────────── */

.sic-donut { width: 100%; max-width: 180px; height: auto; display: block; margin: 0 auto; }
.sic-donut .sic-arc { transition: opacity .16s; }
.sic-donut:hover .sic-arc { opacity: .55; }
.sic-donut .sic-arc:hover { opacity: 1; }
.sic-donut-v { font-family: var(--sic-head); font-size: 21px; font-weight: 750; fill: var(--sic-ink); }
.sic-donut-l { font-size: 9.5px; fill: var(--sic-mut); letter-spacing: .06em; text-transform: uppercase; }

.sic-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sic-legend li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; font-size: 11.5px; }
.sic-legend span { color: var(--sic-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-legend b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sic-legend i { font-style: normal; color: var(--sic-mut-2); font-size: 10.5px; min-width: 32px; text-align: right; }
/* a grouped band says how many branches it holds, so it is never read as one */
.sic-legend-n { font-style: normal; color: var(--sic-mut-2); font-size: 10px; margin-inline-start: 6px;
  padding: 0 5px; border: 1px solid var(--sic-line); border-radius: 999px; white-space: nowrap; }

.sic-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sic-hbars li { display: grid; grid-template-columns: minmax(90px, 1.15fr) minmax(60px, 1.6fr) auto; align-items: center; gap: 10px; padding: 3px 5px; border-radius: var(--sic-r-xs); }
.sic-hbars li.is-click { cursor: pointer; }
.sic-hbars li.is-click:hover { background: var(--sic-wash); }
.sic-hbar-l { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sic-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-hbar-t { height: 6px; border-radius: 3px; background: var(--sic-line-2); overflow: hidden; }
.sic-hbar-t i { display: block; height: 100%; border-radius: 3px; transition: width .3s ease; }
.sic-hbar-v { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 46px; }
.sic-hbar-m { grid-column: 2 / -1; font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); }

.sic-gauge { width: 100%; max-width: 178px; height: auto; display: block; margin: 0 auto; }
.sic-gauge-v { font-family: var(--sic-head); font-size: 24px; font-weight: 750; fill: var(--sic-ink); }
.sic-gauge-l { font-size: 9.5px; fill: var(--sic-mut); letter-spacing: .05em; text-transform: uppercase; }

.sic-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sic-facts.is-4 { grid-template-columns: repeat(4, 1fr); }
.sic-facts li { display: flex; flex-direction: column; }
.sic-facts b { font-family: var(--sic-head); font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.sic-facts span { font-size: 11.5px; font-weight: 600; color: var(--sic-ink-2); }
.sic-facts em { font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-cov-wrap { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; }

/* timeline */
.sic-tl { position: relative; padding-top: 20px; }
.sic-tl-axis { position: relative; height: 16px; border-bottom: 1px solid var(--sic-line-2); margin-left: 148px; margin-bottom: 8px; }
.sic-tl-axis span { position: absolute; top: 0; font-size: 9.5px; color: var(--sic-mut-2); transform: translateX(-50%); }
.sic-tl-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 6px; }
.sic-tl-l { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--sic-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-tl-track { position: relative; height: 16px; background: var(--sic-line-2); border-radius: var(--sic-r-xs); }
.sic-tl-track i { position: absolute; top: 0; height: 100%; border-radius: var(--sic-r-xs); min-width: 3px; }

/* phase rows on the dashboard */
.sic-phase-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(70px, 2fr) 64px 44px; align-items: center; gap: 12px; width: 100%; padding: 9px 6px; border: 0; border-bottom: 1px solid var(--sic-line-2); background: none; cursor: pointer; font: inherit; text-align: left; }
.sic-phase-row:last-child { border-bottom: 0; }
.sic-phase-row:hover { background: var(--sic-wash); }
.sic-phase-n { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sic-phase-n b { font-size: 12.5px; font-weight: 650; }
.sic-phase-n em { font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-phase-v { font-size: 11.5px; color: var(--sic-mut); text-align: right; font-variant-numeric: tabular-nums; }
.sic-phase-c { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ── tables ───────────────────────────────────────────────────────────────── */

.sic-tablewrap { overflow-x: auto; border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); }
.sic-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sic-table thead th { text-align: left; padding: 9px 12px; background: var(--sic-wash); border-bottom: 1px solid var(--sic-line); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sic-mut); font-weight: 700; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.sic-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--sic-line-2); vertical-align: middle; }
.sic-table tbody tr:last-child td { border-bottom: 0; }
.sic-table tbody tr.is-click { cursor: pointer; transition: background .12s; }
.sic-table tbody tr.is-click:hover { background: var(--sic-wash); }
.sic-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sic-table .n.is-bad { color: var(--sic-risk); font-weight: 700; }
.sic-table tfoot td { padding: 10px 12px; border-top: 1px solid var(--sic-line); background: var(--sic-wash); font-weight: 700; }
.sic-table.is-sm { font-size: 11.5px; }
.sic-table.is-sm td, .sic-table.is-sm th { padding: 7px 10px; }
.sic-td-main { display: block; font-weight: 600; color: var(--sic-ink); }
.sic-td-sub { display: block; font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); font-family: var(--sic-mono); }
.sic-td-disc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.sic-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sic-toolbar-c { font-size: 11.5px; color: var(--sic-mut); font-weight: 600; margin-right: auto; }

/* ── PACKAGE WORKSPACE ────────────────────────────────────────────────────── */

.sic-view-pkg { gap: 0; }
.sic-pkg-h { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r) var(--sic-r) 0 0; padding: 14px 18px 0; position: relative; }
.sic-pkg-h::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--pkg, var(--sic-green)); border-radius: var(--sic-r) var(--sic-r) 0 0; }
.sic-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--sic-mut); cursor: pointer; margin-bottom: 10px; }
.sic-back:hover { color: var(--sic-ink); }
.sic-pkg-id { display: flex; align-items: flex-start; gap: 13px; }
.sic-pkg-mark { width: 46px; height: 46px; border-radius: 12px; background: var(--pkg, var(--sic-green)); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sic-pkg-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--sic-mut); }
.sic-pkg-id h2 { margin: 2px 0 1px; font-family: var(--sic-head); font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.sic-pkg-id p { margin: 0; font-size: 12px; color: var(--sic-mut); }
.sic-pkg-stats { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 14px 0 12px; }
.sic-stat { display: flex; flex-direction: column; }
.sic-stat b { font-family: var(--sic-head); font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.sic-stat em { font-style: normal; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--sic-mut-2); }
.sic-pkg-health { margin-left: auto; }

.sic-tabs { display: flex; gap: 2px; overflow-x: auto; border-top: 1px solid var(--sic-line-2); }
.sic-tab { border: 0; background: none; padding: 11px 13px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sic-mut); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; transition: color .14s, border-color .14s; }
.sic-tab:hover { color: var(--sic-ink); }
.sic-tab.is-on { color: var(--sic-ink); border-bottom-color: var(--pkg, var(--sic-green)); }
.sic-tab em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--sic-wash); border-radius: 999px; padding: 1px 6px; color: var(--sic-mut-2); }
.sic-tab.is-on em { background: var(--sic-tint); color: var(--sic-green-d); }

.sic-pkg-body { background: var(--sic-bg); border: 1px solid var(--sic-line); border-top: 0; border-radius: 0 0 var(--sic-r) var(--sic-r); padding: 16px; }
.sic-pkg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 16px; align-items: start; }
.sic-pkg-explain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sic-pkg-side { display: flex; flex-direction: column; gap: 14px; }

/* the explanation is the dominant element on the page */
.sic-explain-hero { background: var(--sic-card); border: 1px solid var(--sic-line); border-left: 3px solid var(--pkg, var(--sic-green)); border-radius: var(--sic-r); padding: 18px 20px; box-shadow: var(--sic-sh); }
.sic-explain-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--sic-mut-2); margin-bottom: 8px; }
.sic-explain-lede { margin: 0 0 10px; font-family: var(--sic-head); font-size: 16.5px; font-weight: 600; line-height: 1.5; letter-spacing: -.012em; color: var(--sic-ink); }
.sic-explain-body { margin: 0; font-size: 13px; color: var(--sic-ink-2); line-height: 1.65; }

.sic-boundary { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); padding: 14px 16px; box-shadow: var(--sic-sh); }
.sic-boundary-h { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--sic-mut-2); margin-bottom: 10px; }
.sic-boundary-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 12px; align-items: center; }
.sic-bnd { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 11px; background: var(--sic-wash); border-radius: var(--sic-r-s); }
.sic-bnd.is-dep { background: none; border: 1px dashed var(--sic-line-3); }
.sic-bnd em { font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-bnd b { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-bnd i { font-style: normal; font-size: 10.5px; color: var(--sic-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-bnd-arrow { color: var(--sic-line-3); display: flex; }

/* included vs excluded — the boundary must read instantly */
.sic-inx { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sic-inx-col { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); padding: 14px 16px; box-shadow: var(--sic-sh); }
.sic-inx-col h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 7px; font-family: var(--sic-head); font-size: 12.5px; font-weight: 700; }
.sic-inx-col h4 em { font-style: normal; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--sic-mut-2); }
.sic-inx-col.is-in { border-top: 2px solid var(--sic-ok); }
.sic-inx-col.is-in h4 svg { color: var(--sic-ok); }
.sic-inx-col.is-ex { border-top: 2px solid var(--sic-mut-2); }
.sic-inx-col.is-ex h4 svg { color: var(--sic-mut); }
.sic-inx-row { padding: 7px 0; border-bottom: 1px solid var(--sic-line-2); }
.sic-inx-row:last-of-type { border-bottom: 0; }
.sic-inx-row b { display: block; font-size: 12.5px; font-weight: 650; }
.sic-inx-row span { display: block; font-size: 11.5px; color: var(--sic-mut); line-height: 1.5; }

/* side cards */
.sic-side-card { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); padding: 14px 16px; box-shadow: var(--sic-sh); }
.sic-side-card h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 6px; font-family: var(--sic-head); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sic-mut); }
.sic-side-gauge { margin-bottom: 10px; }
.sic-kv { list-style: none; margin: 0; padding: 0; }
.sic-kv li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sic-line-2); }
.sic-kv li:last-child { border-bottom: 0; }
.sic-kv span { font-size: 11.5px; color: var(--sic-mut); white-space: nowrap; }
.sic-kv b { font-size: 12px; font-weight: 650; text-align: right; }
.sic-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sic-quick .sic-btn { justify-content: flex-start; }

/* scope definition grid */
.sic-def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sic-def { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); padding: 15px 17px; box-shadow: var(--sic-sh); }
.sic-def.is-wide { grid-column: 1 / -1; }
.sic-def header { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin-bottom: 10px; }
.sic-def header svg { color: var(--sic-mut); }
.sic-def h4 { margin: 0; font-family: var(--sic-head); font-size: 13px; font-weight: 700; }
.sic-def header p { grid-column: 2; margin: 0; font-size: 11.5px; color: var(--sic-mut); }
.sic-def.is-in { border-top: 2px solid var(--sic-ok); }
.sic-def.is-in header svg { color: var(--sic-ok); }
.sic-def.is-ex { border-top: 2px solid var(--sic-mut-2); }
.sic-def-lede { margin: 0 0 10px; font-size: 13.5px; line-height: 1.62; color: var(--sic-ink-2); }
.sic-def.is-lede .sic-def-lede { font-family: var(--sic-head); font-size: 15px; font-weight: 550; color: var(--sic-ink); }
.sic-def-row { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--sic-line-2); align-items: start; }
.sic-def-row:last-of-type { border-bottom: 0; }
.sic-def-row b { display: block; font-size: 12.5px; font-weight: 650; }
.sic-def-row span { display: block; font-size: 11.5px; color: var(--sic-mut); line-height: 1.55; }
.sic-ev { display: block; margin-top: 3px; font-style: normal; font-size: 10px; font-family: var(--sic-mono); color: var(--sic-mut-2); }
.sic-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--sic-line-3); margin-top: 6px; }
.sic-bullet.is-in { background: var(--sic-ok); }
.sic-bullet.is-ex { background: var(--sic-mut-2); }

/* dependencies */
.sic-dep { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sic-dep-col h5 { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-dep-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; margin-bottom: 5px; border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); background: var(--sic-card); cursor: pointer; font: inherit; text-align: left; transition: border-color .14s, background .14s; }
.sic-dep-row:hover { border-color: var(--sic-line-3); background: var(--sic-wash); }
.sic-dep-row span { flex: 1; min-width: 0; }
.sic-dep-row b { display: block; font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-dep-row em { font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-dep-row svg { color: var(--sic-mut-2); }

/* risks */
.sic-risk { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--sic-line-2); align-items: start; }
.sic-risk:last-child { border-bottom: 0; }
.sic-risk b { display: block; font-size: 12.5px; font-weight: 650; }
.sic-risk p { margin: 2px 0 4px; font-size: 11.5px; color: var(--sic-mut); line-height: 1.55; }
.sic-risk em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11.5px; color: var(--sic-green-d); font-weight: 600; }
.sic-risk.is-sm { padding: 8px 0; }

/* ── exceptions ───────────────────────────────────────────────────────────── */

.sic-exc-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-bottom: 1px solid var(--sic-line-2); background: none; cursor: pointer; font: inherit; text-align: left; border-radius: var(--sic-r-xs); }
.sic-exc-row:last-child { border-bottom: 0; }
.sic-exc-row:hover { background: var(--sic-wash); }
.sic-exc-b { flex: 1; min-width: 0; }
.sic-exc-b b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-exc-b em { font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-exc-row svg { color: var(--sic-mut-2); }

.sic-exc { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); margin-bottom: 8px; overflow: hidden; box-shadow: var(--sic-sh); }
.sic-exc.is-open { border-color: var(--sic-line-3); }
.sic-exc-h { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 15px; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; }
.sic-exc-h:hover { background: var(--sic-wash); }
.sic-exc-id { font-family: var(--sic-mono); font-size: 11px; font-weight: 700; color: var(--sic-mut-2); }
.sic-exc-t { flex: 1; min-width: 0; }
.sic-exc-t b { display: block; font-size: 13px; font-weight: 650; }
.sic-exc-t em { font-style: normal; font-size: 11px; color: var(--sic-mut); }
.sic-exc-h svg { color: var(--sic-mut-2); }
.sic-exc-d { padding: 0 15px 14px; border-top: 1px solid var(--sic-line-2); }
.sic-exc-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 13px 0; }
.sic-exc-g h5 { margin: 0 0 4px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-exc-g p { margin: 0; font-size: 12px; color: var(--sic-ink-2); line-height: 1.55; }
.sic-exc-f { display: flex; gap: 8px; }

.sic-gap-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 6px; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; border-bottom: 1px solid var(--sic-line-2); }
.sic-gap-row:last-of-type { border-bottom: 0; }
.sic-gap-row:hover { background: var(--sic-wash); }
.sic-gap-i { width: 3px; height: 26px; border-radius: 2px; flex: 0 0 auto; }
.sic-gap-b { flex: 1; min-width: 0; }
.sic-gap-b b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-gap-b em { font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); }

/* ── interfaces ───────────────────────────────────────────────────────────── */

.sic-ifc-map { background: var(--sic-wash); border-radius: var(--sic-r-s); padding: 8px; }
.sic-ifc-svg { width: 100%; height: auto; max-height: 460px; display: block; }
.sic-ifc-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.sic-ifc-arrow { color: var(--sic-mut-2); display: flex; }

/* ── AI surfaces ──────────────────────────────────────────────────────────── */

.sic-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sic-card.is-ai .sic-card-ht h3 svg, .sic-side-card.is-ai h4 svg { color: var(--sic-green); }
.sic-side-card.is-ai { border-color: var(--sic-tint); background: linear-gradient(180deg, var(--sic-tint) 0%, var(--sic-card) 46%); }
.sic-ai-state { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--sic-r-s); background: var(--sic-wash); font-size: 12px; color: var(--sic-mut); flex-wrap: wrap; }
.sic-ai-state.is-idle { justify-content: space-between; }
.sic-ai-state.is-err { background: var(--sic-risk-t); color: var(--sic-risk); }
.sic-ai-state.is-off { background: var(--sic-wash); }
.sic-ai-state span { flex: 1; min-width: 160px; }
.sic-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--sic-line-3); border-top-color: var(--sic-green); animation: sic-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes sic-spin { to { transform: rotate(360deg); } }
.sic-ai-out p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.62; color: var(--sic-ink-2); }
.sic-ai-lede { font-family: var(--sic-head); font-size: 14.5px !important; font-weight: 600; color: var(--sic-ink) !important; }
.sic-ai-why { color: var(--sic-mut) !important; }
.sic-ai-read { display: flex; align-items: center; gap: 6px; font-size: 11.5px !important; color: var(--sic-mut) !important; }
.sic-ai-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sic-ai-list li { padding: 9px 11px; background: var(--sic-wash); border-radius: var(--sic-r-s); border-left: 2px solid var(--sic-line-3); }
.sic-ai-list b { display: block; font-size: 12.5px; font-weight: 650; margin-top: 3px; }
.sic-ai-list span { display: block; font-size: 11.5px; color: var(--sic-mut); line-height: 1.55; }
.sic-ai-list em { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--sic-green-d); }
.sic-ai-foot { display: flex; align-items: center; gap: 5px; margin: 10px 0 0; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-ai-off { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); }
.sic-ai-off svg { color: var(--sic-mut-2); margin-top: 2px; }
.sic-ai-off b { display: block; font-size: 13px; }
.sic-ai-off span { display: block; font-size: 12px; color: var(--sic-mut); line-height: 1.6; max-width: 780px; }

/* ── slide-over ───────────────────────────────────────────────────────────── */

.sic-slide-wrap { position: fixed; inset: 0; z-index: 200; }
.sic-slide-bd { position: absolute; inset: 0; background: rgba(20, 32, 42, .32); animation: sic-fade .2s ease; }
.sic-slide {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(880px, 82vw);
  background: var(--sic-bg); box-shadow: var(--sic-sh-3); display: flex; flex-direction: column;
  animation: sic-slidein .24s cubic-bezier(.22, .61, .36, 1);
}
@keyframes sic-fade { from { opacity: 0; } }
@keyframes sic-slidein { from { transform: translateX(28px); opacity: .4; } }
.sic-slide-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; background: var(--sic-card); border-bottom: 1px solid var(--sic-line); }
.sic-slide-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sic-slide-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--sl, var(--sic-green)); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sic-slide-id em { font-style: normal; display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-slide-id h3 { margin: 1px 0 0; font-family: var(--sic-head); font-size: 17px; font-weight: 700; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; }
.sic-slide-x { border: 1px solid var(--sic-line); background: var(--sic-card); border-radius: var(--sic-r-s); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sic-mut); flex: 0 0 auto; }
.sic-slide-x:hover { background: var(--sic-wash); color: var(--sic-ink); }
.sic-slide-b { flex: 1; overflow: auto; padding: 18px 20px 40px; }
.sic-sl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.sic-sl-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sic-sl-side { display: flex; flex-direction: column; gap: 12px; }
.sic-sl-sec { padding: 14px 0; border-bottom: 1px solid var(--sic-line); }
.sic-sl-sec:last-child { border-bottom: 0; }
.sic-sl-sec h4 { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-sl-sec p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.62; color: var(--sic-ink-2); }
.sic-sl-lede { font-family: var(--sic-head); font-size: 15px !important; font-weight: 600; color: var(--sic-ink) !important; }
.sic-sl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.sic-sl-list li { padding: 9px 12px; background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); }
.sic-sl-list b { display: block; font-family: var(--sic-head); font-size: 15px; font-weight: 700; }
.sic-sl-list span { display: block; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-sl-parent { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); background: var(--sic-card); cursor: pointer; font: inherit; text-align: left; }
.sic-sl-parent:hover { background: var(--sic-wash); border-color: var(--sic-line-3); }
.sic-sl-parent span { flex: 1; min-width: 0; }
.sic-sl-parent b { display: block; font-size: 12.5px; font-weight: 650; }
.sic-sl-parent em { font-style: normal; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sic-rel h5 { margin: 0 0 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-rel-row { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 9px; margin-bottom: 4px; border: 1px solid var(--sic-line); border-radius: var(--sic-r-xs); background: var(--sic-card); cursor: pointer; font: inherit; font-size: 11.5px; font-family: var(--sic-mono); }
.sic-rel-row:hover { background: var(--sic-wash); }
.sic-rel-row em { font-style: normal; margin-left: auto; color: var(--sic-mut-2); }
.sic-doc-prev { margin: 0; padding: 12px; background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); font-family: var(--sic-mono); font-size: 10.5px; line-height: 1.6; color: var(--sic-mut); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }

/* ── start state ──────────────────────────────────────────────────────────── */

.sic-start { display: flex; align-items: center; justify-content: center; min-height: 480px; }
.sic-start-card { max-width: 640px; text-align: center; background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); padding: 40px 44px; box-shadow: var(--sic-sh); }
.sic-start-card > svg { color: var(--sic-mut-2); margin-bottom: 12px; }
.sic-start-card h2 { margin: 0 0 10px; font-family: var(--sic-head); font-size: 21px; font-weight: 700; }
.sic-start-card p { margin: 0 0 20px; font-size: 13px; color: var(--sic-mut); line-height: 1.7; }
.sic-start-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; text-align: left; }
.sic-start-list li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--sic-wash); border-radius: var(--sic-r-s); font-size: 11.5px; color: var(--sic-mut); }
.sic-start-list b { color: var(--sic-ink); font-weight: 650; }
.sic-start-list svg { color: var(--sic-green); }

/* ── responsive: degrade the composition, never just shrink it ───────────── */

@media (max-width: 1440px) {
  .sic-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sic-analytics { grid-template-columns: 1fr; }
  .sic-exc-g { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 1240px) {
  /* the bar scrolls rather than dropping its labels — an unlabelled icon
     strip is exactly the duplication of the app rail this replaced */
  .sic-rail { padding: 6px 10px; }
  .sic-rail-gl, .sic-rail-sep { display: none; }
  .sic-two, .sic-pkg-grid, .sic-sl-grid { grid-template-columns: 1fr; }
  .sic-def-grid, .sic-inx, .sic-dep, .sic-ai-grid, .sic-rel { grid-template-columns: 1fr; }
  .sic-boundary-row { grid-template-columns: 1fr 1fr; }
  .sic-bnd-arrow { display: none; }
  .sic-facts.is-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .sic-top { flex-wrap: wrap; gap: 10px; }
  .sic-crumbs { display: none; }
  .sic-search { min-width: 200px; }
  .sic-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sic-canvas { height: 380px; }
  .sic-map-legend, .sic-map-mini { display: none; }
  .sic-peek { position: static; width: auto; margin: 10px; box-shadow: none; }
  .sic-split, .sic-cov-wrap { grid-template-columns: 1fr; }
  .sic-slide { width: 100vw; }
  .sic-pkg-stats { gap: 16px; }
  .sic-main { padding: 14px 12px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #tp-sow *, #tp-sow *::before, #tp-sow *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .sic-rail, .sic-top-r, .sic-map-zoom, .sic-map-mini, .sic-slide-wrap { display: none !important; }
  .sic-main { overflow: visible; padding: 0; }
  .sic-card, .sic-hero, .sic-side-card { break-inside: avoid; box-shadow: none; }
}

/* ── unquantified state ───────────────────────────────────────────────────
   No BOQ model loaded means coverage measures a MISSING INPUT, not a scope
   problem. It gets its own neutral-informative treatment so a project that
   simply has not run the mapping yet never reads as a project in trouble. */
.sic-health.h-unquantified { background: var(--sic-info-t); color: var(--sic-info); }
.sic-cov.is-na em { font-style: normal; font-size: 11px; color: var(--sic-mut-2); }
.sic-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--sic-info-t);
  border: 1px solid rgba(74, 119, 174, .22); border-radius: var(--sic-r);
}
.sic-banner > svg { color: var(--sic-info); margin-top: 1px; flex: 0 0 auto; }
.sic-banner div { flex: 1; min-width: 0; }
.sic-banner b { display: block; font-size: 13px; color: var(--sic-ink); margin-bottom: 2px; }
.sic-banner span { display: block; font-size: 12px; color: var(--sic-ink-2); line-height: 1.6; }
.sic-banner em { font-style: normal; font-weight: 650; }
.sic-banner .sic-btn { flex: 0 0 auto; }

/* ── supporting-scope toggle ──────────────────────────────────────────────
   The scope map's subject is the EXECUTION WBS. Engineering, procurement,
   closeout and milestone branches are real scope and stay in every register,
   but on the map they treble the node count and bury the physical scope, so
   they are opt-in. */
.sic-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); background: var(--sic-card);
  font: inherit; font-size: 12px; font-weight: 600; color: var(--sic-mut); cursor: pointer;
  white-space: nowrap; transition: background .14s, border-color .14s, color .14s;
}
.sic-toggle:hover { border-color: var(--sic-line-3); color: var(--sic-ink); }
.sic-toggle-t {
  width: 26px; height: 15px; border-radius: 999px; background: var(--sic-line-3);
  position: relative; flex: 0 0 auto; transition: background .18s;
}
.sic-toggle-t::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; transition: transform .18s;
}
.sic-toggle.is-on { color: var(--sic-green-d); border-color: var(--sic-green-soft, #7FD8C5); background: var(--sic-tint); }
.sic-toggle.is-on .sic-toggle-t { background: var(--sic-green); }
.sic-toggle.is-on .sic-toggle-t::after { transform: translateX(11px); }
.sic-toggle em {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  background: var(--sic-wash); border-radius: 999px; padding: 1px 6px; color: var(--sic-mut-2);
}
.sic-toggle.is-on em { background: rgba(36, 180, 126, .16); color: var(--sic-green-d); }

/* top-down card metrics line */
.sicg-node .sicg-m { font-size: 9.5px; fill: var(--sic-mut-2); font-variant-numeric: tabular-nums; }
.sicg-root .sicg-m { fill: rgba(255, 255, 255, .55); }


/* ── in-canvas map control panel ──────────────────────────────────────────
   View / zoom / minimap sit ON the canvas, where their effect is visible,
   rather than in the card header above it. */
.sic-map-ctl {
  position: absolute; top: 12px; left: 12px; width: 166px;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px);
  border: 1px solid var(--sic-line); border-radius: var(--sic-r-s);
  box-shadow: var(--sic-sh); padding: 4px; display: flex; flex-direction: column;
}
.sic-map-ctl section { padding: 7px 8px; border-bottom: 1px solid var(--sic-line-2); }
.sic-map-ctl section:last-child { border-bottom: 0; }
.sic-map-ctl h5 {
  margin: 0 0 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sic-mut-2); font-weight: 700;
}
.sic-map-view {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 6px;
  border: 0; background: none; border-radius: var(--sic-r-xs); cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 550; color: var(--sic-ink-2); text-align: left;
  transition: background .14s, color .14s;
}
.sic-map-view:hover { background: var(--sic-wash); }
/* the count that makes a filter legible before it is pressed */
.sic-map-n { margin-left: auto; font-style: normal; font-family: var(--sic-mono);
  font-size: 10px; font-weight: 700; color: var(--sic-mut); font-variant-numeric: tabular-nums; }
.sic-map-view.is-on .sic-map-n { color: var(--sic-green-d); }
/* a gesture nobody is told about is a feature nobody has */
.sic-map-hint { margin: 7px 6px 0; font-size: 10px; line-height: 1.5; color: var(--sic-mut-2); }
.sic-map-view.is-on { background: var(--sic-tint); color: var(--sic-green-d); font-weight: 650; }
.sic-radio {
  width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--sic-line-3);
  flex: 0 0 auto; position: relative; transition: border-color .14s;
}
.sic-map-view.is-on .sic-radio { border-color: var(--sic-green); }
.sic-map-view.is-on .sic-radio::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--sic-green);
}
.sic-map-ctl .sic-map-zoom button { width: 24px; height: 24px; }
.sic-map-ctl .sic-map-zoom span { min-width: 34px; font-size: 10.5px; }

@media (max-width: 1240px) { .sic-analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .sic-analytics { grid-template-columns: 1fr; }
  .sic-phead-r { gap: 0; }
  .sic-pmeta { padding: 0 10px; }

  /* The whole control panel used to be `display: none` here, which meant that
     on a phone the map could not be switched, zoomed or fitted at all — the
     one view you were given was the only view you could have. It becomes a
     horizontal strip across the top of the canvas instead: the same controls,
     scrolled sideways, costing ~38px of a 380px canvas. */
  .sic-map-ctl {
    top: 0; left: 0; right: 0; width: auto; flex-direction: row; align-items: center;
    gap: 0; padding: 0 6px; border-width: 0 0 1px; border-radius: 0;
    box-shadow: 0 2px 8px rgba(20, 32, 42, .06);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .sic-map-ctl::-webkit-scrollbar { height: 0; }
  .sic-map-ctl section {
    display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
    padding: 6px 8px; border-bottom: 0; border-right: 1px solid var(--sic-line-2);
  }
  .sic-map-ctl section:last-child { border-right: 0; }
  .sic-map-ctl h5 { margin: 0 6px 0 0; }
  .sic-map-view {
    width: auto; white-space: nowrap; padding: 6px 11px; border-radius: 999px;
    background: var(--sic-wash);
  }
  /* the radio dot is redundant once the pills read as a segmented control,
     and it costs width the labels need */
  .sic-map-view .sic-radio { display: none; }
  .sic-map-chk { margin-top: 0; border-top: 0; padding-top: 6px !important; }
  /* the horizontal strip has no room for prose, and the gestures it describes
     are mouse gestures anyway — a phone opens a scope with one tap */
  .sic-map-ctl .sic-map-hint { display: none; }
  /* a 150x84 minimap of a canvas this size shows nothing usable.
     Scoped under `.sic-map-ctl` deliberately: a bare `.sic-map-sec-mini`
     (0,1,0) LOSES to the `.sic-map-ctl section` rule above it (0,1,1) no
     matter which comes last, so the section stayed visible. */
  .sic-map-ctl .sic-map-sec-mini { display: none; }
  /* touch targets, not mouse targets */
  .sic-map-ctl .sic-map-zoom button { width: 32px; height: 32px; }
  .sic-canvas { padding-top: 0; }
}

/* ── scope composition: what the package is MADE OF, read at a glance ─────
   This sits ABOVE the prose. A planner should understand the package from
   its parts and their weight before reading a sentence. */
.sic-comp { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 9px; }
.sic-comp-c {
  display: flex; align-items: stretch; gap: 10px; padding: 0; overflow: hidden;
  border: 1px solid var(--sic-line); border-radius: var(--sic-r-s); background: var(--sic-card);
  cursor: pointer; font: inherit; text-align: left; transition: border-color .14s, box-shadow .14s, transform .14s;
}
.sic-comp-c:hover { border-color: var(--sic-line-3); box-shadow: var(--sic-sh-2); transform: translateY(-1px); }
.sic-comp-bar { width: 3px; flex: 0 0 auto; }
.sic-comp-b { flex: 1; min-width: 0; padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.sic-comp-b b { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.sic-comp-meta { font-size: 10.5px; color: var(--sic-mut); }
.sic-comp-qty { font-size: 11px; font-weight: 650; color: var(--sic-green-d); font-variant-numeric: tabular-nums; }
.sic-comp-when { font-size: 10px; color: var(--sic-mut-2); font-variant-numeric: tabular-nums; }
.sic-comp-share { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding: 10px 12px 10px 0; flex: 0 0 62px; }
.sic-comp-share i { display: block; height: 4px; border-radius: 2px; min-width: 3px; align-self: stretch; }
.sic-comp-share em { font-style: normal; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* prose is now opt-in, behind a disclosure */
.sic-detail { border: 1px solid var(--sic-line); border-radius: var(--sic-r); background: var(--sic-card); box-shadow: var(--sic-sh); }
.sic-detail > summary {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px; cursor: pointer;
  font-size: 12.5px; font-weight: 650; color: var(--sic-ink-2); list-style: none;
}
.sic-detail > summary::-webkit-details-marker { display: none; }
.sic-detail > summary:hover { color: var(--sic-ink); }
.sic-detail[open] > summary { border-bottom: 1px solid var(--sic-line-2); }
.sic-detail[open] > summary svg { transform: rotate(90deg); }
.sic-detail > summary svg { transition: transform .16s; color: var(--sic-mut); }
.sic-detail .sic-explain-body { margin: 0; padding: 14px 16px 0; font-size: 12.5px; color: var(--sic-ink-2); line-height: 1.65; }
.sic-detail .sic-card { border: 0; box-shadow: none; }

/* activity nodes on the map read as work, not as structure */
.sicg-activity .sicg-box { stroke-dasharray: 0; fill: var(--sic-wash); }
.sicg-activity .sicg-t { font-size: 11px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHARTS (v76)
   Built to the data-viz method: form chosen by the data's job, colour
   assigned by role and VALIDATED (the previous hand-picked palette failed
   chroma, CVD and normal-vision separation), thin marks, 2px surface gaps
   between fills, recessive chrome, hover on every mark, direct labels where
   the palette sits below 3:1.
   ═══════════════════════════════════════════════════════════════════════ */

.sic-pchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--sic-card); border: 1px solid var(--sic-line); font-size: 11px; color: var(--sic-mut); }
.sic-pchip b { font-size: 12px; font-weight: 700; color: var(--sic-ink); }

/* hero figure: the one number the card leads with — proportional figures,
   same sans as everything else (no display face, no tabular-nums) */
.sic-hero-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sic-hero-n b { font-family: var(--sic-head); font-size: 34px; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.sic-hero-n span { font-size: 13px; font-weight: 650; color: var(--sic-ink-2); }
.sic-hero-n em { font-style: normal; font-size: 11px; color: var(--sic-mut-2); }

/* part-to-whole: one horizontal 100% stacked bar, 2px surface gaps */
.sic-wbar { display: flex; height: 30px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--sic-line-2); margin-bottom: 14px; }
.sic-wbar-s { position: relative; min-width: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter .14s; }
.sic-wbar-s:hover { filter: brightness(1.08); }
.sic-wbar-s em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }

.sic-wrows { display: flex; flex-direction: column; gap: 1px; }
.sic-wrow { display: grid; grid-template-columns: minmax(120px, 1.5fr) minmax(60px, 2fr) 46px; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; border: 0; background: none; border-radius: var(--sic-r-xs); cursor: pointer; font: inherit; text-align: left; }
.sic-wrow:hover { background: var(--sic-wash); }
.sic-wrow-k { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sic-wrow-k b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-wrow-k em { font-style: normal; font-size: 10px; color: var(--sic-mut-2); flex: 0 0 auto; }
.sic-wrow-t { height: 6px; border-radius: 3px; background: var(--sic-line-2); overflow: hidden; }
.sic-wrow-t i { display: block; height: 100%; border-radius: 3px; }
.sic-wrow-v { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ── load heatmap: sequential single hue, magnitude on a grid ───────────── */
/* A DAY IS A SQUARE. Stretching the rows to fill the card turned every cell
   into a 9x30 bar — the calendar read as a barcode and the magnitude ramp lost
   its grid. The card is stretched by its neighbour in `.sic-grid-2-1`, so the
   spare height is absorbed by CENTRING the band, never by deforming the cells. */
/* the day labels and the grid rows must stay on the same lines. The axis
   lives INSIDE the scrolling column (it has to scroll with the weeks), so the
   label column has to reserve exactly the same strip of height underneath it —
   hence one shared --hm-axis measurement rather than two guesses. */
.sic-hm-wrap {
  --hm-axis: 12px; --hm-axis-gap: 5px; --hm-gap: 3px;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px;
  margin-block: auto; min-height: 0;
}
.sic-hm-side { display: grid; grid-template-rows: repeat(7, 1fr); gap: var(--hm-gap); min-height: 0; }
.sic-hm-side span { font-size: 9px; color: var(--sic-mut-2); line-height: 1; display: flex; align-items: center; }
/* implicit 8th row standing in for the axis strip in the scrolling column */
.sic-hm-side::after {
  content: ""; display: block;
  height: calc(var(--hm-axis) + var(--hm-axis-gap) - var(--hm-gap));
}
.sic-hm-main { min-width: 0; min-height: 0; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: column; }
/* columns size the cell, `aspect-ratio` makes the row match it. Capped at 18px
   so a short programme does not blow the days up into tiles. */
.sic-hm {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(9px, 18px));
  grid-auto-flow: row; grid-template-rows: repeat(7, auto);
  gap: var(--hm-gap); min-width: 100%; justify-content: start;
}
.sic-hm-c { aspect-ratio: 1; border-radius: 2px; background: var(--sic-line-2); min-width: 9px; transition: outline-color .12s; outline: 2px solid transparent; outline-offset: 1px; }
.sic-hm-c:not(.is-0):hover { outline-color: var(--sic-ink); }
.sic-hm-c.is-0 { background: var(--sic-line-2); }
.sic-hm-axis {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(9px, 1fr));
  margin-top: var(--hm-axis-gap); height: var(--hm-axis); flex: 0 0 auto;
}
.sic-hm-axis span { font-size: 9.5px; line-height: var(--hm-axis); color: var(--sic-mut-2); white-space: nowrap; }
.sic-hm-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.sic-hm-stats { display: flex; gap: 18px; }
.sic-hm-stats span { display: flex; flex-direction: column; font-size: 10.5px; color: var(--sic-mut-2); }
.sic-hm-stats b { font-family: var(--sic-head); font-size: 16px; font-weight: 700; color: var(--sic-ink); }
.sic-hm-key { display: flex; align-items: center; gap: 3px; }
.sic-hm-key em { font-style: normal; font-size: 10px; color: var(--sic-mut-2); margin: 0 4px; }
.sic-hm-key .sic-hm-c { width: 11px; height: 11px; aspect-ratio: auto; min-width: 11px; }

/* ── by-scope columns: part-to-whole over time ─────────────────────────── */
.sic-sc-wrap { overflow-x: auto; }
.sic-sc { display: grid; grid-template-columns: repeat(var(--cols), minmax(6px, 1fr)); gap: 2px; align-items: end; height: 168px; min-width: 100%; }
.sic-sc-col { height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.sic-sc-stack { display: flex; flex-direction: column-reverse; width: 100%; border-radius: 3px; overflow: hidden; gap: 1px; min-height: 2px; transition: filter .14s; }
.sic-sc-col:hover .sic-sc-stack { filter: brightness(1.12); }
.sic-sc-stack i { display: block; width: 100%; min-height: 1px; }
.sic-legend.is-wrap { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.sic-legend.is-wrap li { display: flex; grid-template-columns: none; gap: 6px; align-items: center; }

/* ── scope breakdown: the whole SoW as reading matter ──────────────────── */
.sic-bd { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.sic-bd-col { background: var(--sic-card); border: 1px solid var(--sic-line); border-top: 3px solid var(--sc); border-radius: var(--sic-r); box-shadow: var(--sic-sh); overflow: hidden; }
.sic-bd-h { padding: 14px 16px 12px; border-bottom: 1px solid var(--sic-line-2); }
.sic-bd-badge { display: inline-block; padding: 2px 8px; border-radius: var(--sic-r-xs); background: var(--sic-wash); font-family: var(--sic-mono); font-size: 10.5px; font-weight: 700; color: var(--sc); margin-bottom: 7px; }
.sic-bd-h h3 { margin: 0 0 5px; font-family: var(--sic-head); font-size: 15px; font-weight: 700; letter-spacing: -.012em; }
.sic-bd-h p { margin: 0 0 9px; font-size: 11.5px; color: var(--sic-mut); line-height: 1.55; }
.sic-bd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sic-bd-tags span { font-size: 10px; font-weight: 600; color: var(--sic-mut); background: var(--sic-wash); border-radius: 999px; padding: 2px 8px; }
.sic-bd-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sic-bd-sub { border-left: 2px solid var(--sic-line); padding-left: 9px; display: flex; flex-direction: column; gap: 3px; }
.sic-bd-subh { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 6px; border: 0; background: none; border-radius: var(--sic-r-xs); cursor: pointer; font: inherit; text-align: left; }
.sic-bd-subh:hover { background: var(--sic-wash); }
.sic-bd-code { font-family: var(--sic-mono); font-size: 9.5px; font-weight: 700; color: var(--sc); flex: 0 0 auto; }
.sic-bd-subh b { flex: 1; font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-bd-subh em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--sic-mut-2); background: var(--sic-wash); border-radius: 999px; padding: 1px 6px; }
.sic-bd-subh svg { color: var(--sic-mut-2); }
.sic-bd-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; background: none; border-radius: var(--sic-r-xs); cursor: pointer; font: inherit; text-align: left; }
.sic-bd-item:hover { background: var(--sic-wash); }
.sic-bd-item i { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.sic-bd-item > span { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sic-ink-2); }
.sic-bd-item > em { font-style: normal; font-size: 10px; color: var(--sic-mut-2); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sic-bd-qty { display: block; font-style: normal; font-size: 10px; font-weight: 650; color: var(--sic-green-d); }
.sic-bd-more { border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--sic-mut); cursor: pointer; text-align: left; border-radius: var(--sic-r-xs); }
.sic-bd-more:hover { background: var(--sic-wash); color: var(--sic-ink); }
.sic-search.is-inline { min-width: 240px; height: 30px; }

@media (max-width: 1240px) {
  .sic-analytics, .sic-analytics.is-2 { grid-template-columns: 1fr; }
}

/* ── directional interface edges ──────────────────────────────────────────
   A relationship map must show DIRECTION. The first cut drew bare curves,
   so the one thing an interface map exists to say was missing. */
.sicg-edge.is-dir { color: var(--sic-line-3); stroke: currentColor; opacity: .75; transition: opacity .16s, color .16s; }
.sicg-edge.is-dir.s-strong { color: #52514e; opacity: .9; }
.sicg-edge.is-dir.s-medium { color: #8A94A0; }
.sicg-edge.is-dir.is-dim { opacity: .12; }

/* ── scope lifecycle ──────────────────────────────────────────────────────
   One scope read across every phase: engineering and procurement feeding the
   execution work, then testing. Flow = hand-over order; Timeline = real dates. */
.sic-lc-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 2px 2px; }
.sic-lc-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sic-mut); }

.sic-lc-card { background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r); box-shadow: var(--sic-sh); overflow: hidden; }
.sic-view-lc .sic-lc-card + .sic-lc-card { margin-top: 14px; }
.sic-lc-h { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--sic-line-2); flex-wrap: wrap; }
.sic-lc-mark { width: 4px; height: 34px; border-radius: 2px; flex: 0 0 auto; }
.sic-lc-id { min-width: 0; }
.sic-lc-code { display: block; font-family: var(--sic-mono); font-size: 10px; font-weight: 700; color: var(--sic-mut-2); }
.sic-lc-h h3 { margin: 1px 0 0; font-family: var(--sic-head); font-size: 15px; font-weight: 700; }
.sic-lc-meta { display: flex; gap: 20px; margin-left: auto; }
.sic-lc-meta span { display: flex; flex-direction: column; font-size: 10px; color: var(--sic-mut-2); }
.sic-lc-meta b { font-size: 13px; font-weight: 700; color: var(--sic-ink); white-space: nowrap; }

.sic-lc-flow { display: flex; align-items: stretch; gap: 4px; padding: 14px 16px; overflow-x: auto; }
.sic-lc-lane { flex: 1 1 190px; min-width: 178px; background: var(--sic-wash); border: 1px solid var(--sic-line-2); border-top: 2px solid var(--st); border-radius: var(--sic-r-s); padding: 10px 11px; display: flex; flex-direction: column; }
.sic-lc-lane > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.sic-lc-lane-t { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--st); }
.sic-lc-lane > header em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--sic-mut-2); background: var(--sic-card); border-radius: 999px; padding: 1px 7px; }
.sic-lc-when { font-size: 10px; color: var(--sic-mut-2); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.sic-lc-acts { display: flex; flex-direction: column; gap: 4px; }
.sic-lc-act { display: block; width: 100%; text-align: left; padding: 7px 9px; border: 1px solid var(--sic-line); border-radius: var(--sic-r-xs); background: var(--sic-card); cursor: pointer; font: inherit; transition: border-color .14s, box-shadow .14s; }
.sic-lc-act:hover { border-color: var(--st); box-shadow: var(--sic-sh); }
.sic-lc-act.is-crit { border-left: 2px solid var(--sic-risk); }
.sic-lc-act-n { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.sic-lc-act-m { display: block; font-size: 9.5px; color: var(--sic-mut-2); font-variant-numeric: tabular-nums; margin-top: 1px; }
.sic-lc-arrow { display: flex; align-items: center; color: var(--sic-line-3); flex: 0 0 auto; padding: 0 2px; }

.sic-lcg { padding: 16px; }
.sic-lcg-axis { position: relative; height: 16px; margin-left: 168px; border-bottom: 1px solid var(--sic-line-2); margin-bottom: 10px; }
.sic-lcg-axis span { position: absolute; top: 0; font-size: 9.5px; color: var(--sic-mut-2); transform: translateX(-50%); }
.sic-lcg-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 7px; }
.sic-lcg-l { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--sic-ink-2); }
.sic-lcg-l em { font-style: normal; font-size: 10px; color: var(--sic-mut-2); margin-left: auto; }
.sic-lcg-track { position: relative; height: 20px; background: var(--sic-wash); border-radius: var(--sic-r-xs); }
.sic-lcg-bar { position: absolute; top: 4px; height: 12px; border-radius: 3px; min-width: 3px; cursor: pointer; transition: filter .14s, outline-color .12s; outline: 2px solid transparent; outline-offset: 1px; }
.sic-lcg-bar:hover { filter: brightness(1.1); outline-color: var(--sic-ink); }
.sic-lcg-bar.is-crit { box-shadow: inset 0 0 0 1.5px var(--sic-risk); }

.sic-lc-ifc { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--sic-line-2); background: var(--sic-wash); flex-wrap: wrap; }
.sic-lc-ifc-t { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sic-mut-2); font-weight: 700; }
.sic-lc-ifc-b { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--sic-line); border-radius: 999px; background: var(--sic-card); cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; color: var(--sic-ink-2); }
.sic-lc-ifc-b:hover { border-color: var(--sic-line-3); }
.sic-lc-ifc-b em { font-style: normal; font-size: 10px; color: var(--sic-mut-2); }

@media (max-width: 980px) {
  .sic-lc-flow { flex-direction: column; }
  .sic-lc-arrow { transform: rotate(90deg); align-self: center; }
  .sic-lcg-row, .sic-lcg-axis { grid-template-columns: 1fr; margin-left: 0; }
}

/* ── scope cards: the dashboard opens with its SUBJECT ────────────────────
   A dashboard should lead with the scopes themselves, not with charts about
   them. One card per scope package in a scrollable row. */
.sic-screl { display: flex; flex-direction: column; gap: 10px; }
.sic-screl-h h3 { margin: 0; font-family: var(--sic-head); font-size: 14px; font-weight: 700; }
.sic-screl-h p { margin: 1px 0 0; font-size: 11.5px; color: var(--sic-mut); }
.sic-screl-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(244px, 1fr);
  gap: 11px; overflow-x: auto; overflow-y: hidden;
  /* the cards lift 2px and drop a shadow on hover — with overflow-y clipped,
     a 2px gutter sliced the top of every hovered card */
  padding: 8px 3px 10px;
  /* NO scroll-snap here. It was added in v84 to make the strip feel tidy and
     it made the strip unusable: with `scroll-snap-align: start` on every card,
     any scroll that did not land exactly on a card boundary was pulled back —
     measured returning to 0 from 40px, 120px AND 260px. The strip never held
     its position. A horizontal card list wants free scrolling; snapping fights
     the finger. */
  scrollbar-width: thin; scrollbar-color: var(--sic-line-3) transparent;
  overscroll-behavior-x: contain;
}
.sic-screl-row::-webkit-scrollbar { height: 6px; }
.sic-screl-row::-webkit-scrollbar-track { background: transparent; }
.sic-screl-row::-webkit-scrollbar-thumb { background: var(--sic-line-3); border-radius: 3px; }
.sic-screl-row::-webkit-scrollbar-thumb:hover { background: var(--sic-mut-2); }
/* the last card must clear the edge instead of being sliced by it. A ::after
   spacer cannot do this — grid-auto-columns would size it as a full 244px
   phantom column — so the margin goes on the card itself. */
.sic-screl-row > :last-child { margin-right: 3px; }
.sic-sccard {
  display: flex; flex-direction: column; gap: 11px; padding: 13px 14px; text-align: left;
  background: var(--sic-card); border: 1px solid var(--sic-line); border-radius: var(--sic-r);
  box-shadow: var(--sic-sh); cursor: pointer; font: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.sic-sccard:hover { border-color: var(--sc); box-shadow: var(--sic-sh-2); transform: translateY(-2px); }
.sic-sccard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sic-sccard-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--sc); color: #fff;
  font-size: 11.5px; font-weight: 650; line-height: 1.3; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sic-sccard-code { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sic-sccard-code { font-family: var(--sic-mono); font-size: 9.5px; color: var(--sic-mut-2); }
.sic-sccard-code em { font-style: normal; font-family: var(--sic-font); font-size: 12px; font-weight: 700; color: var(--sc); }
.sic-sccard-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.sic-sccard-fig { display: flex; flex-direction: column; }
.sic-sccard-fig em { font-style: normal; font-size: 10px; color: var(--sic-mut-2); }
.sic-sccard-fig b { font-family: var(--sic-head); font-size: 20px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.sic-sccard-fig i { font-style: normal; font-size: 9.5px; color: var(--sic-mut-2); }
.sic-sccard-spark { width: 108px; height: 30px; flex: 0 0 auto; opacity: .9; }
.sic-sccard-spark.is-empty { border-bottom: 1px dashed var(--sic-line-3); height: 30px; }
.sic-sccard-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--sic-line-2); }
.sic-sccard-foot > span { font-size: 10.5px; color: var(--sic-mut); }
.sic-sccard-foot .sic-health { margin-left: auto; }

/* open-detail control on a map node — click toggles the branch, this opens it */
.sicg-open { opacity: 0; color: #fff; transition: opacity .14s; }
.sicg-node:hover .sicg-open, .sicg-node:focus-within .sicg-open { opacity: 1; }
.sicg-open rect { fill: var(--sic-ink); }
.sicg-open:hover rect { fill: var(--sic-green-d); }
.sicg-expand.is-open circle { fill: var(--sic-wash); }

@media (max-width: 980px) {
  .sic-screl-row { grid-auto-columns: minmax(220px, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD COMPOSITION (v79)
   Card size follows DATA IMPORTANCE, not a uniform grid. A wide dense chart
   beside a narrow ranked list, then a full-width record table — the rhythm
   every reference dashboard uses. An even grid of equal cards reads as
   boxes on a page, not as a dashboard.
   ═══════════════════════════════════════════════════════════════════════ */
/* `align-items: start`, NOT stretch. Stretching made the shorter card match
   the taller one, and the load card's content is a 7-row calendar that cannot
   honestly grow — the height went either into hollow space or into deformed
   cells. Two cards with different natural heights read fine; a hollow one
   does not. */
.sic-grid-2-1 { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sic-grid-2-1 > .sic-card { display: flex; flex-direction: column; }
.sic-grid-2-1 > .sic-card > .sic-card-b { flex: 1; display: flex; flex-direction: column; }
.sic-view-overview { gap: 18px; }

/* slim context line inside the map header, replacing the removed KPI band */
.sic-hero-ctx { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 3px 0 0 !important; }
.sic-hero-ctx > span { font-size: 11.5px; color: var(--sic-mut); white-space: nowrap; }
.sic-hero-ctx > span + span { padding-left: 14px; border-left: 1px solid var(--sic-line); }
.sic-hero-flag { display: inline-flex; align-items: center; gap: 5px; color: var(--sic-info) !important; font-weight: 600; }

/* scope readiness */
.sic-ready-tally { display: flex; gap: 8px; }
.sic-rt { display: flex; align-items: baseline; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.sic-rt b { font-family: var(--sic-head); font-size: 15px; font-weight: 750; }
.sic-rt.is-late { background: var(--sic-risk-t); color: var(--sic-risk); }
.sic-rt.is-tight { background: var(--sic-warn-t); color: #A9761F; }
.sic-rt.is-clear { background: var(--sic-ok-t); color: var(--sic-green-d); }
.sic-gap { font-variant-numeric: tabular-nums; }
.sic-gap.is-late { color: var(--sic-risk) !important; font-weight: 700; }
.sic-gap.is-tight { color: #A9761F !important; font-weight: 650; }
.sic-ready .sic-td-main .sic-dot { vertical-align: middle; margin-right: 2px; }

@media (max-width: 1240px) {
  .sic-grid-2-1 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLBAR IN THE APP HEADER (v80)
   The tab used to open with its own band: the NEXORA brand again, the page
   title again, a breadcrumb repeating the title a third time, and a second
   search beside the app header's own. That is two rows of chrome restating
   what the shell already says. The toolbar now lives IN the app header, and
   the header's global search is hidden while this tab is active so exactly
   one search is on screen.
   ═══════════════════════════════════════════════════════════════════════ */
#sicHdrTools { display: none; }
body[data-active-tab="sow"] #sicHdrTools {
  display: flex; align-items: center; gap: 8px;
  order: 9; margin-left: auto; flex: 1 1 auto; justify-content: flex-end;
  position: relative; min-width: 0;
}
body[data-active-tab="sow"] .hdr .hdr-search { display: none !important; }

.sic-hdr-title { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; padding-left: 4px; }
.sic-hdr-title { font-family: var(--sic-head, "Plus Jakarta Sans", Inter, sans-serif); font-size: 13.5px; font-weight: 700; color: var(--sic-ink, #14202A); }
.sic-hdr-title em { font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sic-mut-2, #8A94A0); font-weight: 600; }
#sicHdrTools .sic-search { min-width: 200px; max-width: 320px; flex: 1 1 220px; }
#sicHdrTools .sic-sr { top: 44px; }

/* the scope-cards heading is one line, not a stacked title + paragraph */
.sic-screl-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sic-screl-h h3 { margin: 0; font-family: var(--sic-head); font-size: 14px; font-weight: 700; }
.sic-screl-h > span { font-size: 11.5px; color: var(--sic-mut); }

@media (max-width: 1100px) {
  .sic-hdr-title { display: none; }
  #sicHdrTools .sic-search { flex: 1 1 140px; min-width: 130px; }
  #sicHdrTools .sic-btn span, #sicHdrTools .sic-btn { font-size: 0; gap: 0; padding: 0 10px; }
  #sicHdrTools .sic-btn svg { width: 15px; height: 15px; }
  #sicHdrTools .sic-btn.is-primary { font-size: 12px; padding: 0 12px; }
}