/* styles/core/generation-view-schematic.css */
/* ══════════════════════════════════════════════════════════════════════
   SCHEMATIC VIEW — an engineering process sheet

   The eight stages wired in sequence on a drawing sheet, with a real
   title block carrying the live state. Texture comes from structure —
   hairlines, routed connectors, tabular figures — never from gradients,
   blur or glow. One accent, and it means one thing: green marks the box
   the engine is inside right now.

   Palette is Nexora's own (styles/core/nexora-theme05.css): ink from
   midnight #0F1B2E, accent from #188D68. Type is JetBrains Mono, as on a
   drawing or a P6 export, with Inter for the single line of prose.

   Presentation only — nothing here can change what the engine does.
   ══════════════════════════════════════════════════════════════════════ */

.nxsch {
  --nxs-ink: #0B1019;
  --nxs-i85: rgba(11, 16, 25, .85);
  --nxs-i55: rgba(11, 16, 25, .55);
  --nxs-i38: rgba(11, 16, 25, .38);
  --nxs-i22: rgba(11, 16, 25, .22);
  --nxs-rule: rgba(11, 16, 25, .16);
  --nxs-soft: rgba(11, 16, 25, .075);
  --nxs-paper: #FFFFFF;
  --nxs-ground: #E6E7E5;
  --nxs-ac: #188D68;
  --nxs-ac2: #24B47E;
  --nxs-danger: #A63D28;
  --nxs-ease: cubic-bezier(.22, 1, .36, 1);
  --nxs-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --nxs-sans: 'Inter', 'DM Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  padding: clamp(0px, 2vw, 30px);
  font-family: var(--nxs-mono);
  color: var(--nxs-ink);
  background: var(--nxs-ground);
  background-image: radial-gradient(rgba(11, 16, 25, .085) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--nxs-ease), visibility 0s linear .3s;
}

.nxsch, .nxsch *, .nxsch *::before, .nxsch *::after { box-sizing: border-box; }
.nxsch[hidden] { display: none; }
.nxsch [hidden] { display: none !important; }
.nxsch:focus { outline: none; }

.nxsch.nxsch-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nxsch.nxsch-closing { opacity: 0; visibility: visible; pointer-events: none; transition-delay: 0s; }

/* ── The sheet ─────────────────────────────────────────────────────── */
.nxsch-sheet {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--nxs-paper);
  border: 1px solid var(--nxs-ink);
  box-shadow: 0 1px 2px rgba(11, 16, 25, .06), 0 24px 60px -26px rgba(11, 16, 25, .42);
  padding: clamp(18px, 2.2vw, 30px) clamp(16px, 2.4vw, 36px) 0;
  overflow: hidden;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .42s var(--nxs-ease), opacity .32s ease;
}

.nxsch-open .nxsch-sheet { transform: none; opacity: 1; }
.nxsch-closing .nxsch-sheet { transform: translateY(6px); opacity: 0; }

/* ── Head ──────────────────────────────────────────────────────────── */
.nxsch-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--nxs-ink);
}

.nxsch-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.nxsch-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 30px;
  border: 1px solid var(--nxs-rule);
  overflow: hidden;
}
.nxsch-mark img { width: 20px; height: 20px; object-fit: contain; }

.nxsch-brand-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nxsch-wm { font-size: 11.5px; font-weight: 700; letter-spacing: .3em; line-height: 1; }
.nxsch-wm-s {
  font-family: var(--nxs-sans);
  font-size: 11px; font-style: italic; line-height: 1;
  color: var(--nxs-i38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nxsch-sheetno {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px; font-weight: 600; letter-spacing: .22em;
  color: var(--nxs-i38); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── The diagram ───────────────────────────────────────────────────── */
.nxsch-diag {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.6vw, 34px) 0;
}
.nxsch-diag svg { width: 100%; height: 100%; max-height: 420px; overflow: visible; }

/* Connectors. Solid ink once the work has passed through them, a dashed
   route ahead — the same way an issued and an unissued line differ. */
.nxsch-wire {
  stroke: var(--nxs-i22);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  fill: none;
  marker-end: url(#nxschArrowOff);
  transition: stroke .4s ease;
}
.nxsch-wire[data-on="1"] {
  stroke: var(--nxs-ink);
  stroke-width: 1.5;
  stroke-dasharray: none;
  marker-end: url(#nxschArrowOn);
}

.nxsch-box {
  fill: var(--nxs-paper);
  stroke: var(--nxs-i22);
  stroke-width: 1;
  transition: fill .4s ease, stroke .4s ease, stroke-width .3s ease;
}
.nxsch-tag { font-size: 9px; font-weight: 600; letter-spacing: 2.4px; fill: var(--nxs-i38); transition: fill .4s ease; }
.nxsch-num { font-size: 9.5px; font-weight: 600; fill: var(--nxs-i38); transition: fill .4s ease; }
.nxsch-nm { font-size: 12.5px; font-weight: 500; fill: var(--nxs-i38); transition: fill .4s ease; }
.nxsch-dur { font-size: 9.5px; font-weight: 500; fill: var(--nxs-i22); transition: fill .4s ease; }
.nxsch-tick { stroke: var(--nxs-ac); stroke-width: 2.5; fill: none; opacity: 0; transition: opacity .3s ease; }

/* Work that is done is filled ink: the record, not the news. */
.nxsch-node[data-status="completed"] .nxsch-box { fill: var(--nxs-ink); stroke: var(--nxs-ink); }
.nxsch-node[data-status="completed"] .nxsch-tag,
.nxsch-node[data-status="completed"] .nxsch-num { fill: rgba(255, 255, 255, .55); }
.nxsch-node[data-status="completed"] .nxsch-nm { fill: #fff; }
.nxsch-node[data-status="completed"] .nxsch-dur { fill: rgba(255, 255, 255, .5); }

/* Green means one thing on this sheet: the engine is inside this box. */
.nxsch-node[data-status="running"] .nxsch-box { stroke: var(--nxs-ink); stroke-width: 2; }
.nxsch-node[data-status="running"] .nxsch-tag { fill: var(--nxs-ac); }
.nxsch-node[data-status="running"] .nxsch-num { fill: var(--nxs-ac); }
.nxsch-node[data-status="running"] .nxsch-nm { fill: var(--nxs-ink); font-weight: 600; }
.nxsch-node[data-status="running"] .nxsch-dur { fill: var(--nxs-ac); font-weight: 600; }
.nxsch-node[data-status="running"] .nxsch-tick { opacity: 1; animation: nxsch-tick 1.7s ease-in-out infinite; }

@keyframes nxsch-tick { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.nxsch-node[data-status="failed"] .nxsch-box { stroke: var(--nxs-danger); stroke-width: 2; fill: rgba(166, 61, 40, .06); }
.nxsch-node[data-status="failed"] .nxsch-tag,
.nxsch-node[data-status="failed"] .nxsch-num,
.nxsch-node[data-status="failed"] .nxsch-dur { fill: var(--nxs-danger); }
.nxsch-node[data-status="failed"] .nxsch-nm { fill: var(--nxs-danger); font-weight: 600; }
.nxsch-node[data-status="failed"] .nxsch-tick { opacity: 1; stroke: var(--nxs-danger); animation: none; }

/* A box setting as its stage closes — one beat, then it is ink. */
.nxsch-node.nxsch-set .nxsch-box { animation: nxsch-set .5s var(--nxs-ease); }
@keyframes nxsch-set {
  0%   { fill: var(--nxs-ac); stroke: var(--nxs-ac); }
  100% { fill: var(--nxs-ink); stroke: var(--nxs-ink); }
}

/* ── Foot: note + title block ──────────────────────────────────────── */
.nxsch-foot {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  padding-bottom: clamp(16px, 2vw, 24px);
}

.nxsch-note { min-width: 0; align-self: end; }
.nxsch-note-l { font-size: 10px; font-weight: 600; letter-spacing: .24em; color: var(--nxs-i38); }
.nxsch-note-p {
  font-family: var(--nxs-sans);
  margin: 10px 0 0;
  font-size: 14px; line-height: 1.6;
  color: var(--nxs-i55);
  max-width: 54ch;
}

.nxsch[data-state="failed"] .nxsch-note-l { color: var(--nxs-danger); }
.nxsch[data-state="failed"] .nxsch-note-p { color: var(--nxs-ink); }

.nxsch-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }

/* The title block. A real one is a grid of ruled cells, so this is too. */
.nxsch-tb {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--nxs-ink);
  border-right: 0;
  border-bottom: 0;
}
.nxsch-c {
  border-right: 1px solid var(--nxs-ink);
  border-bottom: 1px solid var(--nxs-ink);
  padding: 9px 12px;
  min-width: 0;
}
.nxsch-c-w { grid-column: span 2; }
.nxsch-c-l {
  display: block;
  font-size: 8.5px; font-weight: 500; letter-spacing: .18em;
  color: var(--nxs-i38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nxsch-c-v {
  display: block;
  margin-top: 5px;
  font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--nxs-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nxsch-c-g .nxsch-c-v { color: var(--nxs-ac); }
.nxsch[data-state="failed"] .nxsch-c-g .nxsch-c-v { color: var(--nxs-danger); }

/* ── Rail + hide ───────────────────────────────────────────────────── */
.nxsch-rail {
  flex: 0 0 auto;
  position: relative;
  height: 3px;
  margin: 0 calc(-1 * clamp(16px, 2.4vw, 36px));
  background: var(--nxs-soft);
}
.nxsch-rail-fill {
  position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--nxs-ink);
  transition: width .6s var(--nxs-ease);
}
.nxsch-rail-live {
  position: absolute; top: 0; height: 3px;
  overflow: hidden;
  background: rgba(24, 141, 104, .16);
  transition: left .6s var(--nxs-ease);
}
.nxsch-rail-live span {
  position: absolute; inset: 0;
  background: var(--nxs-ac);
  transform: translateX(-100%);
  animation: nxsch-sweep 1.9s var(--nxs-ease) infinite;
}
@keyframes nxsch-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.nxsch[data-state="completed"] .nxsch-rail-fill { background: var(--nxs-ac); }

/* In the header's flow, not floated over it — absolutely positioned it
   landed on top of the sheet caption. */
.nxsch-hide {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--nxs-rule);
  background: transparent;
  color: var(--nxs-i55);
  font-family: var(--nxs-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nxsch-hide:hover { background: var(--nxs-ink); border-color: var(--nxs-ink); color: #fff; }
.nxsch-hide:focus-visible { outline: 2px solid var(--nxs-ac); outline-offset: 2px; }

.nxsch-btn {
  appearance: none;
  border: 1px solid var(--nxs-i22);
  background: transparent;
  color: var(--nxs-ink);
  font-family: var(--nxs-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nxsch-btn:hover { background: var(--nxs-ink); border-color: var(--nxs-ink); color: #fff; }
.nxsch-btn:focus-visible { outline: 2px solid var(--nxs-ac); outline-offset: 2px; }
.nxsch-btn-primary { background: var(--nxs-ink); border-color: var(--nxs-ink); color: #fff; }
.nxsch-btn-primary:hover { background: #000; border-color: #000; }

.nxsch-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ══ Responsive ══════════════════════════════════════════════════════
   The flow needs width. Below the breakpoint the sheet keeps the title
   block — which is where the live state actually lives — and the diagram
   drops to a single column of boxes, the way a schematic is reissued on a
   narrower sheet rather than shrunk until it cannot be read. ══════════ */

@media (max-width: 1080px) {
  .nxsch { padding: 0; }
  .nxsch-sheet { max-width: none; height: 100%; border: 0; overflow-y: auto; }
  .nxsch-foot { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .nxsch-tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nxsch-diag svg { max-height: 340px; }
}

@media (max-width: 720px) {
  .nxsch-sheetno { display: none; }
  .nxsch-diag { padding: 16px 0; }
  .nxsch-diag svg { max-height: 260px; }
  .nxsch-c { padding: 8px 10px; }
  .nxsch-c-v { font-size: 12.5px; }
}

@media (max-width: 480px) {
  .nxsch-wm-s { display: none; }
  .nxsch-tb { grid-template-columns: minmax(0, 1fr); }
  .nxsch-c-w { grid-column: span 1; }
  .nxsch-actions .nxsch-btn { flex: 1 1 auto; }
}

/* ══ Reduced motion ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .nxsch, .nxsch * { animation: none !important; transition-duration: .01ms !important; }
}

/* tabs/gantt/styles/170-gantt-toolbar-light.css */
/* ══════════════════════════════════════════════════════════════════════
   GANTT TOOLBAR — light surface
   ----------------------------------------------------------------------
   The toolbar was the only dark surface left in a light shell, so it read
   as a foreign object floating over the schedule card rather than as the
   card's own tool rail — which is what "outside the frame" was. It is not
   outside it: measured against a real schedule it sits inset 15px inside
   #ganttOut on both sides. It only looked outside, because of the colour
   and because it caps the card's top edge.

   Eleven rules across the gantt stylesheets set a background on
   .p6-toolbar, every one of them !important, stacked over successive
   rounds — mint, white x4, near-black x2, teal, charcoal, and finally
   rgb(18 58 83 / 54%), which is the one that wins. Rather than unpick
   that history this file adds one more layer above all of them (see
   "Winning the cascade" below) and re-themes the bar together with
   everything inside it.

   Everything inside HAD to come with it: the labels are
   rgb(246,248,249), the dropdown text rgb(255,249,237) and the icon
   strokes rgba(246,248,249,.66) — all of them near-white for the dark
   bar. Lightening the bar alone would have made every control in it
   invisible.

   Colours come from the shell's own tokens so the rail belongs to the
   same system as the header controls: --nx-border on white, --nx-text
   for labels, --nx-muted for the quiet ones.

   ── Winning the cascade ───────────────────────────────────────────────
   The rules being overridden reach
     body[data-gantt-theme="light"] #tp-gantt #ganttOut .p6-toolbar.aipe-gantt-tools-v2
   which is (2 ids, 3 classes, 1 type), and for the history button's
   :disabled state (2, 4, 1). A plain `html body #tp-gantt …` is only
   (2, 2, 2) and loses — class-level units are compared before element
   ones, so the extra `html` cannot buy back the class the other rule has.
   `body:not(#nx-no-such-id)` adds one ID-level unit while matching exactly
   the same element, taking these rules to (3, …) so they win outright
   regardless of how the class counts move.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The bar ─────────────────────────────────────────────────────────── */
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  background: #FFFFFF !important;
  border: 1px solid var(--nx-border, #E8ECEF) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(26, 29, 33, .05), 0 6px 18px rgba(26, 29, 33, .05) !important;
  color: var(--nx-text, #1A1D21) !important;
}

/* ── Buttons and menu triggers ───────────────────────────────────────── */
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-btn,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-icon-btn,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-menu-trigger,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-top-menu {
  color: var(--nx-text, #1A1D21) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-icon-btn,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-history-btn {
  color: #5A6067 !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-btn:hover,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-icon-btn:hover,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-menu-trigger:hover,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-top-menu:hover {
  background: rgba(26, 29, 33, .055) !important;
  color: var(--nx-text, #1A1D21) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-btn:disabled,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-icon-btn:disabled {
  color: rgba(26, 29, 33, .28) !important;
}

/* The label is an unclassed <span> inside the button and the icon art is
   <path> inside the <svg> — both carried their own near-white colour, so
   setting it on the button and the svg alone left them invisible on white.
   Everything inside a control now inherits that control's colour. */
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-btn span,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-btn i,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-btn b,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-menu-trigger span,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-menu-trigger i,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-top-menu span,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-top-menu i {
  color: inherit !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar svg,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar svg * {
  stroke: currentColor !important;
  color: inherit !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-tool-group {
  background: rgba(26, 29, 33, .035) !important;
  border: 1px solid var(--nx-border, #E8ECEF) !important;
}

/* ── Search ──────────────────────────────────────────────────────────── */
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-search {
  background: rgba(26, 29, 33, .04) !important;
  border: 1px solid var(--nx-border, #E8ECEF) !important;
  color: var(--nx-text, #1A1D21) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-search:focus-within {
  background: #FFFFFF !important;
  border-color: rgba(36, 180, 126, .40) !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .14) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-search input {
  background: transparent !important;
  color: var(--nx-text, #1A1D21) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-search input::placeholder {
  color: var(--nx-muted, #72777E) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-search-ic {
  color: var(--nx-muted, #72777E) !important;
}

/* ── Dropdown panels ─────────────────────────────────────────────────
   These are children of the toolbar, so they carried the same near-white
   text on a slate panel. Same treatment, plus the shell's card shadow. */
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dropdown,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dropdown-panel,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-tools-dropdown {
  background: #FFFFFF !important;
  border: 1px solid var(--nx-border, #E8ECEF) !important;
  color: var(--nx-text, #1A1D21) !important;
  box-shadow: 0 12px 28px rgba(26, 29, 33, .14) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dropdown *,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dropdown-panel * {
  color: var(--nx-text, #1A1D21) !important;
  border-color: var(--nx-border, #E8ECEF) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dd-label,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dd-section > span:first-child {
  color: var(--nx-muted, #72777E) !important;
}

html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dropdown-panel button:hover,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dropdown-panel label:hover,
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar .gpx-dd-section > *:hover {
  background: rgba(26, 29, 33, .05) !important;
}

/* ── Sitting inside the frame ────────────────────────────────────────
   Pinned, the bar used to land exactly on #ganttOut's top edge and cover
   its rounded corners, which broke the card's outline. A few pixels of
   clearance and it reads as a rail inside the card instead of a lid on
   top of it. (The pin's top offset is set inline by
   tabs/gantt/plugins/143-gantt-focus-scroll.js, so this only handles the
   unpinned margin; the offset itself is applied there.) */
html body:not(#nx-no-such-id) #tp-gantt #ganttOut .p6-toolbar {
  margin-bottom: 8px !important;
}

/* tabs/gantt/styles/172-ai-schedule-advisor.css */
/* ══════════════════════════════════════════════════════════════════════
   AI SCHEDULE ADVISOR
   ----------------------------------------------------------------------
   A planning engineer's review surface, not a chat window. White, compact,
   dense; severity carried by a badge and a 3px rail rather than by a
   coloured card; relationship changes drawn as small sequence diagrams;
   before/after as metric cards.

   Colours come from the shell's own tokens (--nx-*) so the panel belongs
   to the same system as the rest of the app, with one severity ramp and
   one change-type ramp on top. Four change hues, deliberately — teal for
   added, grey for removed, amber for modified, slate for impacted — so
   the Gantt in review mode stays readable instead of becoming a rainbow.

   Review mode on the chart is purely additive: a body class, one SVG, and
   absolutely-positioned ghost nodes inside the existing .p6-right cells.
   Removing them restores the Gantt exactly, which is what Exit Review
   Mode does.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ══ THE SCALE ══════════════════════════════════════════════════════
     This panel had 19 type sizes, 22 spacing values, 15 radii and 96 raw
     hexes across 1,400 lines — which is not a design system, it is what
     accumulates when every new section styles itself. The measured result
     was a surface where nothing lined up and no two sections agreed.

     Everything below is the whole vocabulary. A value that is not here does
     not belong on this panel; if something genuinely needs a new step, it is
     added HERE and named, not written inline.
     tools/test-advisor-design-system.js counts them and fails if they drift. */

  /* TYPE — seven steps, because a dense engineering tool really does need
     a micro label and a headline number, and nothing in between them. */
  --t-2xs: 10px;   /* uppercase micro labels, tags */
  --t-xs:  11px;   /* meta, chips, secondary numbers */
  --t-sm:  12px;   /* dense body — the default here */
  --t-md:  13px;   /* body, card titles */
  --t-lg:  15px;   /* section headlines, panel title */
  --t-xl:  20px;   /* the counters */
  --t-2xl: 24px;   /* the one score */
  /* THE LEAD. One line per screen, and the only step above a counter — a
     scale whose largest size is a number is a scale with no answer in it. */
  --t-3xl: 26px;

  /* SPACE — 4px base. Two is the hairline gap between lines of one thing. */
  --s-05: 2px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;

  /* RADIUS */
  --r-sm:   4px;    /* chips, bars, small fills */
  --r-md:   8px;    /* cards, rows, inputs */
  --r-lg:   12px;   /* the panel itself */
  --r-full: 999px;  /* tags */

  /* THE ONE FIXED COLUMN. The scorecard's row-number gutter is a width, not a
     spacing step, and the indent of an opened row has to match it exactly or
     the explanation does not line up under its own row. Named here so the two
     can never drift apart. */
  --dcma-no-w: 28px;
  /* the span chart's label gutter. The axis is offset by exactly this plus one
     gap, or the ticks do not sit over the bars they date. */
  --span-label-w: 96px;

  /* NEUTRALS — one ramp. Text roles are named for what they are, so a
     contrast decision is made once here and not re-guessed per section. */
  --n-0:    #FFFFFF;
  --n-25:   #FAFBFC;
  --n-50:   #F4F6F8;   /* subtle fill — the only "inset" surface */
  --n-100:  #E9EDF1;   /* the border */
  --n-200:  #D8DEE5;   /* rules, tracks */
  --n-400:  #98A2B3;   /* decorative only — never text */
  --n-600:  #5D6875;   /* muted text — 5.0:1 on white */
  --n-800:  #333B47;   /* secondary text */
  --n-900:  #1A1D21;   /* primary text */
  --ink:    #0F172A;   /* selected / inverted surfaces */

  /* SEMANTIC — five roles, three tokens each, and EVERYTHING that carries a
     judgement uses them: severity, package rating, handover quality, the
     point kinds, the change diagram. Before this each of those invented its
     own near-duplicate tints, which is most of where 96 colours came from.
     Every ink passes 4.5:1 on white and on its own fill. */
  --sev-critical-ink:  #B02219;
  --sev-critical-fill: #FEF2F1;
  --sev-critical-line: #F2C4BF;

  --sev-high-ink:      #B4540A;
  --sev-high-fill:     #FFF7EE;
  --sev-high-line:     #F2D6B4;

  --sev-medium-ink:    #8A6D0B;
  --sev-medium-fill:   #FCFAEC;
  --sev-medium-line:   #E8DFB2;

  --sev-opportunity-ink:  #0B6F64;
  --sev-opportunity-fill: #EDF8F5;
  --sev-opportunity-line: #BFE0D8;

  --sev-advisory-ink:  #4A5568;
  --sev-advisory-fill: #F3F5F7;
  --sev-advisory-line: #D9DEE4;

  /* INFO — the sixth role. Blue is not decoration here: it marks the neutral
     verdict ("acceptable"), the evidence line, and the scoped state. */
  --info-ink:  #3D5A80;
  --info-soft: #8FB3DB;
  --info-fill: #EEF3FA;
  --info-line: #DCE5F0;

  /* SOFT — the mid tone each role uses for a BAR or a RAIL, never for text.
     Bars need a fill that reads at 5px tall, which neither the ink (too dark
     to sit next to its own text) nor the line (too pale) gives. */
  --sev-critical-soft:    #E08A82;
  --sev-high-soft:        #EFA85C;
  --sev-medium-soft:      #D6C068;
  --sev-opportunity-soft: #5BC0A8;
  --sev-advisory-soft:    #A3ACB6;

  /* the app's own accent, for the primary action and for "good" */
  --accent:     var(--nx-accent, #24B47E);
  --accent-ink: #0B6F64;

  /* MOTION — one duration, one curve. */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur:  160ms;

  /* ── compatibility aliases ──────────────────────────────────────────
     The Gantt review overlay and a few older rules read these names. They
     now resolve INTO the ramp above rather than carrying their own values,
     so there is still exactly one place a colour is decided. */
  --aisa-ink: var(--n-900);
  --aisa-muted: var(--n-600);
  --aisa-line: var(--n-100);
  --aisa-surface: var(--n-0);
  --aisa-surface-2: var(--n-50);
  --aisa-accent: var(--accent);

  --aisa-critical: var(--sev-critical-ink);
  --aisa-high: var(--sev-high-ink);
  --aisa-medium: var(--sev-medium-ink);
  --aisa-opportunity: var(--sev-opportunity-ink);
  --aisa-advisory: var(--sev-advisory-ink);

  --aisa-add: var(--sev-opportunity-ink);
  --aisa-remove: var(--n-400);
  --aisa-modify: var(--sev-high-ink);
  --aisa-impact: var(--n-800);
}

/* ══ PRIMITIVES ═══════════════════════════════════════════════════════
   Five things this panel is built from. Every section uses them; a section
   that needs a sixth is a sign the section is wrong, not that the set is.

   THE RULE ABOUT BORDERS. The panel had fifty 1px borders — a bordered card
   inside a bordered section inside the bordered panel — and the result reads
   as boxes in boxes with no hierarchy, because a border says "this is a
   separate thing" and everything was saying it at once.
     · the PANEL has a border. It is the window.
     · a CARD has a border. It is a thing you act on.
     · a SECTION has neither: it is separated by space and a heading.
     · anything INSIDE a card is separated by fill or a left rule — never by
       another border.
   ═════════════════════════════════════════════════════════════════════ */

/* SECTION — space and a heading, no box. Its layout is set once in the
   workspace block, where the areas that use it live. */
.aisa-sec:last-child { margin-bottom: 0; }

/* HEADING — two levels, and they are actually different sizes, so one of
   them can lead. Before this every heading on the panel was 10px uppercase
   grey, which is a label, not a hierarchy. */
.aisa-h-sec {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--t-lg); font-weight: 700;
  letter-spacing: -.01em; text-transform: none;
  color: var(--n-900);
}
.aisa-box-h > :last-child:not(:first-child).aisa-link { margin-left: auto; }
.aisa-h-sub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--n-600);
}

/* CARD — one surface treatment. A border, a radius, a hover. Not a border
   AND a gradient AND a shadow, which is what the scorecard was doing. */
.aisa-card-s {
  border: 1px solid var(--n-100);
  border-radius: var(--r-md);
  background: var(--n-0);
}

/* TAG — every pill on this panel. Severity, package rating, handover
   quality, lens, confidence, count: all the same object with a colour. */
.aisa-tag,
.aisa-f-cat, .aisa-f-lens, .aisa-f-conf,
.aisa-flow-rate, .aisa-flow-q, .aisa-flow-conflict,
.aisa-group-h em, .aisa-h-sec em, .aisa-sb-h em {
  display: inline-flex; align-items: center;
  padding: var(--s-05) var(--s-2);
  border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  font-style: normal;
  background: var(--n-50); color: var(--n-600);
  white-space: nowrap;
}
.aisa-tag.is-critical,    .is-critical > .aisa-tag    { background: var(--sev-critical-fill);    color: var(--sev-critical-ink); }
.aisa-tag.is-high,        .is-high > .aisa-tag        { background: var(--sev-high-fill);        color: var(--sev-high-ink); }
.aisa-tag.is-medium,      .is-medium > .aisa-tag      { background: var(--sev-medium-fill);      color: var(--sev-medium-ink); }
.aisa-tag.is-opportunity, .is-opportunity > .aisa-tag { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-tag.is-info,        .is-info > .aisa-tag        { background: var(--info-fill);            color: var(--info-ink); }

/* METER — every bar. Dimension scores, the package timeline, progress. */
.aisa-meter {
  position: relative; height: 5px;
  border-radius: var(--r-sm);
  background: var(--n-100);
  overflow: hidden;
}
.aisa-meter > i {
  position: absolute; top: 0; height: 100%;
  border-radius: var(--r-sm);
  background: var(--n-400);
  transition: width var(--dur) var(--ease);
}

/* BOX SIZING.
   The app sets `* { box-sizing: border-box }` in its reset, and this panel was
   quietly relying on it: several components are `width: 100%` with padding, so
   under content-box they overflow their container by exactly their padding.
   The panel is a self-contained overlay and should lay out correctly wherever
   it is mounted, so it states the assumption rather than inheriting it. */
.aisa-panel, .aisa-panel *, .aisa-panel *::before, .aisa-panel *::after {
  box-sizing: border-box;
}

/* SHRINKABILITY.
   A grid or flex CHILD defaults to min-width:auto, which means it refuses to
   become narrower than its own content. On a phone that is what turns one long
   activity name into a horizontally scrolling panel, with the right edge of
   every row clipped — the panel did exactly this at 390px.
   Every element here is a grid/flex child holding text that must be allowed to
   wrap instead of pushing. */
.aisa-health-side, .aisa-f-main, .aisa-story-body, .aisa-flow-linkbody,
.aisa-sb-col, .aisa-rec-main, .aisa-pt-t, .aisa-dim-bar, .aisa-lens-list li,
.aisa-flow-head, .aisa-depth, .aisa-pass-label {
  min-width: 0;
}
/* an id, a code or a package path has no spaces to break at */
.aisa-f-title, .aisa-pt-t, .aisa-flow-name, .aisa-story-body b, .aisa-sb-t,
.aisa-headline, .aisa-flow-note, .aisa-flow-pnote {
  overflow-wrap: anywhere;
}

/* FOCUS — one ring, on everything focusable, so keyboard use is possible.
   There was none before. */
.aisa-panel :focus-visible {
  outline: 2px solid var(--info-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .aisa-panel *, .aisa-panel *::before, .aisa-panel *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .aisa-panel *:active { transform: none !important; }
}

/* ── toolbar button ───────────────────────────────────────────────────
   Compact, same shape as every other item in the Tools dropdown. */
body #ganttOut #gpx-toolset[data-gpx-version] #aisa-advisor-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
body #ganttOut #gpx-toolset[data-gpx-version] #aisa-advisor-btn {
  gap: var(--s-2);
}

/* ══ PANEL ════════════════════════════════════════════════════════════ */
.aisa-panel {
  position: fixed;
  inset: 0;
  z-index: 99400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-5) var(--s-4);
  background: rgba(18, 26, 34, .38);
  backdrop-filter: blur(2px);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--aisa-ink);
  overflow: auto;
}
.aisa-card {
  /* A planning review is a two-pane workspace with a rail, a list beside a
     detail, and strips of packages on a shared axis. At 1040 every one of
     those was squeezed: recommendation titles wrapped to three lines in a
     340px list, and a five-package programme could not fit its own strip. */
  width: min(1240px, 100%);
  /* .aisa-panel is a ROW flex container, so this card is a flex item on the
     MAIN axis — where min-width defaults to `auto` and refuses to shrink below
     the card's own min-content width. At phone width that made the card wider
     than the viewport: the panel scrolled sideways and the right edge of every
     row, including the Apply button, was cut off. */
  min-width: 0;
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  background: var(--aisa-surface);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(26, 29, 33, .22);
  overflow: hidden;
}

.aisa-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--aisa-line);
  background: var(--aisa-surface);
  flex: 0 0 auto;
}
.aisa-head-id { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.aisa-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--sev-opportunity-fill);
  color: var(--aisa-accent);
  flex: 0 0 auto;
}
.aisa-mark svg { width: 19px; height: 19px; }
.aisa-h1 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.aisa-h2 { font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted); letter-spacing: .09em; text-transform: uppercase; margin-top: var(--s-05); }
.aisa-x {
  margin-left: auto;
  width: 30px; height: 30px;
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--aisa-surface);
  color: var(--aisa-muted);
  font-size: var(--t-xl); line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.aisa-x:hover { background: var(--aisa-surface-2); color: var(--aisa-ink); }

.aisa-body {
  padding: var(--s-4);
  overflow: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  /* a flex item will not shrink below its content without this, and one long
     activity name is then enough to push the whole review wider than the card
     it sits in — which reads as every row being clipped on the right */
  min-width: 0;
  max-width: 100%;
  background: var(--aisa-surface);
}
.aisa-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--aisa-line);
  background: var(--aisa-surface-2);
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.aisa-foot-l { min-width: 0; }
.aisa-foot-r { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.aisa-foot-sel { font-size: var(--t-xs); font-weight: 600; color: var(--aisa-ink); }
.aisa-foot-sel.is-muted { color: var(--aisa-muted); font-weight: 500; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.aisa-primary, .aisa-ghost, .aisa-link, .aisa-back {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background .14s, border-color .14s, color .14s;
}
.aisa-primary {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--sev-opportunity-ink);
  background: var(--sev-opportunity-ink);
  color: var(--n-0);
  font-size: var(--t-sm);
}
/* The primary button used to set :hover to the colours it already had, so the
   one control the whole panel funnels into gave no feedback at all. Brightness
   keeps the single accent token doing the work — no second green to keep in
   step with the first. */
.aisa-primary:hover:not([disabled]) { filter: brightness(1.12); }
.aisa-primary:active:not([disabled]) { filter: brightness(.94); transform: translateY(1px); }
.aisa-ghost:active:not([disabled]) { transform: translateY(1px); }
.aisa-primary.sm, .aisa-ghost.sm { padding: var(--s-1) var(--s-3); font-size: var(--t-xs); }
.aisa-ghost {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  background: var(--aisa-surface);
  color: var(--aisa-ink);
  font-size: var(--t-sm);
}
.aisa-ghost:hover:not([disabled]) { background: var(--aisa-surface-2); }
/* A disabled primary at 42% opacity is a pale green button, which reads as a
   button that might work. Disabled is a different thing, so it looks like one. */
.aisa-primary[disabled] {
  background: var(--n-50); border-color: var(--n-100); color: var(--n-400);
  cursor: not-allowed; filter: none;
}
.aisa-ghost[disabled] { opacity: .45; cursor: not-allowed; }
.aisa-link {
  padding: var(--s-05) var(--s-1);
  border: 0;
  background: none;
  color: var(--sev-opportunity-ink);
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aisa-link:hover { color: var(--sev-opportunity-ink); }
.aisa-back {
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
  border: 0;
  background: none;
  color: var(--aisa-muted);
  font-size: var(--t-xs);
  margin-bottom: var(--s-1);
}
.aisa-back:hover { color: var(--aisa-ink); }

/* ── idle / running / error ───────────────────────────────────────────── */
/* THE FIRST SCREEN.
   This was the one part of the panel the workspace rewrite never reached, and
   it showed: four tiles, then a browser-default <ol> with its own numerals and
   indent, then an unstyled <ul> where "13" ran straight into "activities"
   because nothing gave the bold number a box to sit in. Every rule below is
   the same vocabulary the rest of the panel uses — the numbered stages read
   like the running screen's stages, and the scope box reads like a panel box,
   because they are the same two things at two moments. */
/* a measure, not a line the width of the panel: the first screen is prose and
   prose stops being readable somewhere around 90 characters */
.aisa-intro { display: grid; gap: var(--s-4); align-content: start; max-width: 860px; margin: 0 auto; }
.aisa-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-2);
  margin-bottom: 0;
}
.aisa-intro-metric {
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--aisa-surface-2);
}
.aisa-intro-metric b { display: block; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.aisa-intro-metric span { display: block; font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: var(--s-05); }

/* what the run will do, as four numbered stages rather than a default list */
.aisa-steps {
  list-style: none; counter-reset: aisa-step;
  margin: 0; padding: 0;
  display: grid; gap: var(--s-2);
}
/* the numeral is absolutely positioned rather than a grid cell, because the
   line is mixed inline content — a grid here would make every <b> in the
   sentence its own cell and stack the words on top of each other */
.aisa-steps li {
  counter-increment: aisa-step;
  position: relative; margin: 0; padding-left: var(--s-6);
  font-size: var(--t-sm); line-height: 1.6; color: var(--n-800);
}
.aisa-steps li::before {
  content: counter(aisa-step);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--n-50); color: var(--n-600);
  font-size: var(--t-2xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.aisa-steps b { color: var(--n-900); }

/* what the review reads, as three counted facts */
.aisa-scopebox {
  display: grid; gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--n-100); border-radius: var(--r-md);
  background: var(--n-25);
}
.aisa-scope-h {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-scope-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}
.aisa-scope-list li {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--n-800);
}
.aisa-scope-list b {
  font-size: var(--t-lg); font-weight: 700; color: var(--n-900);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.aisa-scope-note { margin: 0; font-size: var(--t-xs); line-height: 1.55; color: var(--n-600); }
.aisa-run { width: 100%; padding: var(--s-3); font-size: var(--t-md); }

/* THE WAIT.
   text-align:center here is inherited by the stage list, and on a wide panel
   that pushed every stage label into the middle of a 1,700px row with its tick
   stranded at the far left and its result at the far right — three columns
   with a void between them, which is not a list anybody reads as one. The
   screen stays centred as a block; its contents read left to right. */
.aisa-running {
  max-width: 720px; margin: 0 auto;
  padding: var(--s-6) var(--s-4);
  display: grid; justify-items: stretch; gap: 0;
}
.aisa-running-phase, .aisa-running-note, .aisa-spin { text-align: center; }
.aisa-spin {
  width: 30px; height: 30px;
  margin: 0 auto var(--s-4);
  border: 2.5px solid var(--aisa-line);
  border-top-color: var(--aisa-accent);
  border-radius: 50%;
  animation: aisa-spin .75s linear infinite;
}
@keyframes aisa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aisa-spin { animation-duration: 2.4s; } }
.aisa-running-phase { font-size: var(--t-md); font-weight: 600; }
.aisa-running-note { font-size: var(--t-xs); color: var(--aisa-muted); margin-top: var(--s-4); }

.aisa-error { padding: var(--s-6) var(--s-4); text-align: center; max-width: 560px; margin: 0 auto; }
.aisa-error-badge {
  width: 34px; height: 34px; margin: 0 auto var(--s-3);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sev-critical-fill); color: var(--aisa-critical);
  font-size: var(--t-xl); font-weight: 700;
}
.aisa-error-title { font-size: var(--t-lg); font-weight: 700; }
.aisa-error-detail { font-size: var(--t-sm); color: var(--aisa-muted); margin-top: var(--s-2); }
.aisa-error-sample {
  margin: var(--s-3) 0 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--aisa-surface-2);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  white-space: pre-wrap;
  max-height: 140px;
  overflow: auto;
  color: var(--aisa-muted);
}
.aisa-error-actions { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-4); }

.aisa-warn {
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--aisa-high);
  border-radius: var(--r-md);
  background: var(--sev-high-fill);
  font-size: var(--t-sm);
  color: var(--sev-high-ink);
  margin: 0 0 var(--s-3);
}
.aisa-warn.sm { font-size: var(--t-xs); padding: var(--s-2) var(--s-2); }

/* ── schedule health ──────────────────────────────────────────────────
   Two bands: the verdict (score + headline + what was reviewed), then the
   severity counts. The counts are buttons — they filter the list below,
   because a twelve-finding review read as one flat column is the thing
   that made this panel feel weak. */
.aisa-health {
  padding: 0 0 var(--s-4);
  border-bottom: 1px solid var(--n-100);
  margin-bottom: var(--s-5);
}
.aisa-health-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
}
/* THE SCORE, AS A RING.
   A proportion is read faster as an arc than as a digit in a box, and the
   ring carries the same tone ramp as the dimension bars underneath it, so
   "poor overall, poor on supply chain" reads as one statement rather than
   two unrelated colours. */
.aisa-health-score {
  display: grid; justify-items: center; align-content: center;
  gap: var(--s-1);
  width: 84px;
}
/* the dial is its own square so the ring can never be stretched by the box
   around it, and the number sits inside the arc rather than beside it */
.aisa-health-dial { position: relative; width: 62px; height: 62px; display: grid; place-items: center; }
.aisa-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.aisa-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.aisa-ring-track { stroke: var(--n-50); }
.aisa-ring-arc { stroke: var(--n-400); transition: stroke-dasharray .5s cubic-bezier(.2,.7,.3,1); }
.aisa-ring.tone-good .aisa-ring-arc { stroke: var(--sev-opportunity-ink); }
.aisa-ring.tone-fair .aisa-ring-arc { stroke: var(--sev-high-ink); }
.aisa-ring.tone-poor .aisa-ring-arc { stroke: var(--sev-critical-ink); }
.aisa-health-num {
  position: relative;
  font-size: var(--t-2xl); font-weight: 700; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.aisa-health-lbl {
  font-size: var(--t-2xs); font-weight: 700; color: var(--n-600);
  letter-spacing: .08em; text-align: center; line-height: 1.2;
}
.aisa-health-score.tone-good .aisa-health-num { color: var(--sev-opportunity-ink); }
.aisa-health-score.tone-fair .aisa-health-num { color: var(--sev-high-ink); }
.aisa-health-score.tone-poor .aisa-health-num { color: var(--sev-critical-ink); }

/* THE DIMENSION BARS.
   One score says the schedule is bad. These say where, and they are the
   reason the header is worth reading before the findings under it. */
.aisa-dims {
  display: grid; gap: var(--s-1);
  margin-top: var(--s-2);
  /* a 0-100 bar does not get more readable at 900px. Capping it keeps the
     label, the bar and the number in one eye span. */
  max-width: 420px;
}
.aisa-dim {
  display: grid;
  grid-template-columns: 108px 1fr 22px;
  align-items: center;
  gap: var(--s-2);
}
.aisa-dim-l { font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted); letter-spacing: .01em; }
.aisa-dim-bar { height: 5px; border-radius: var(--r-sm); background: var(--n-50); overflow: hidden; }
.aisa-dim-bar i { display: block; height: 100%; border-radius: var(--r-sm); background: var(--n-400); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.aisa-dim-v { font-size: var(--t-2xs); font-weight: 700; color: var(--aisa-muted); text-align: right; font-variant-numeric: tabular-nums; }
.aisa-dim.tone-good .aisa-dim-bar i { background: var(--sev-opportunity-ink); } .aisa-dim.tone-good .aisa-dim-v { color: var(--sev-opportunity-ink); }
.aisa-dim.tone-fair .aisa-dim-bar i { background: var(--sev-high-ink); } .aisa-dim.tone-fair .aisa-dim-v { color: var(--sev-high-ink); }
.aisa-dim.tone-poor .aisa-dim-bar i { background: var(--sev-critical-ink); } .aisa-dim.tone-poor .aisa-dim-v { color: var(--sev-critical-ink); }

.aisa-health-side { min-width: 0; display: grid; gap: var(--s-2); }
.aisa-headline {
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--aisa-ink);
  font-weight: 600;
  letter-spacing: -.005em;
}
/* What the verdict was formed on — so the score is never a number with no
   stated scope. */
.aisa-health-scope {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--aisa-muted);
  font-variant-numeric: tabular-nums;
}
.aisa-health-scope i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--aisa-line);
  flex: 0 0 auto;
}

/* THE SEVERITY FILTER.
   This was six tall bordered cards spanning the full width — which made the
   loudest thing on the panel a set of counts the planner has already read in
   the scorecard above. It is a FILTER. It should look like one: a single
   segmented row, sized to its content, with the count leading and the colour
   carried by a dot rather than by a 3px slab per cell. */
.aisa-health-cells {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-top: var(--s-3);
}
.aisa-health-cell {
  appearance: none; -webkit-appearance: none;
  font: inherit; text-align: left;
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--n-0);
  border: 1px solid var(--n-100);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.aisa-health-cell:hover:not(:disabled) { background: var(--n-50); }
.aisa-health-cell:disabled { opacity: .45; cursor: default; }
.aisa-health-cell b {
  font-size: var(--t-md); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--n-900);
}
.aisa-health-cell span {
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--n-600);
}
/* the colour is a dot, so six filters do not read as six warnings */
.aisa-health-cell::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--n-400); flex: 0 0 auto; align-self: center;
}
.aisa-health-cell.tone-all::before { display: none; }
.aisa-health-cell.tone-critical::before { background: var(--sev-critical-ink); }
.aisa-health-cell.tone-high::before { background: var(--sev-high-ink); }
.aisa-health-cell.tone-medium::before { background: var(--sev-medium-ink); }
.aisa-health-cell.tone-opportunity::before { background: var(--sev-opportunity-ink); }
.aisa-health-cell.tone-advisory::before { background: var(--sev-advisory-ink); }
.aisa-health-cell.is-on {
  background: var(--ink); border-color: var(--ink);
}
.aisa-health-cell.is-on b, .aisa-health-cell.is-on span { color: var(--n-0); }

/* the number takes the severity colour; the label stays neutral so six
   filters read as one control rather than six warnings */
.aisa-health-cell.tone-critical b { color: var(--sev-critical-ink); }
.aisa-health-cell.tone-high b { color: var(--sev-high-ink); }
.aisa-health-cell.tone-medium b { color: var(--sev-medium-ink); }
.aisa-health-cell.tone-opportunity b { color: var(--sev-opportunity-ink); }
.aisa-health-cell.tone-advisory b { color: var(--sev-advisory-ink); }
.aisa-health-cell.is-zero { opacity: .45; }

/* ── groups ──────────────────────────────────────────────────────────── */
.aisa-group { margin-bottom: var(--s-4); }
.aisa-group-h {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--t-lg); font-weight: 700;
  letter-spacing: -.01em; text-transform: none;
  color: var(--n-900);
}
/* the severity is carried by a rule at the start of the heading, not by
   colouring the whole line — so every section heading reads at the same
   weight and the colour still says which group this is */
.aisa-group-h::before {
  content: ''; width: 3px; height: 15px; border-radius: var(--r-full);
  background: currentColor; flex: 0 0 auto;
}
.aisa-group-h em { letter-spacing: 0; }
.aisa-group-h.sev-critical::before { background: var(--sev-critical-ink); }
.aisa-group-h.sev-critical em { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-group-h.sev-high::before { background: var(--sev-high-ink); }
.aisa-group-h.sev-high em { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-group-h.sev-medium::before { background: var(--sev-medium-ink); }
.aisa-group-h.sev-medium em { background: var(--sev-medium-fill); color: var(--sev-medium-ink); }
.aisa-group-h.sev-opportunity::before { background: var(--sev-opportunity-ink); }
.aisa-group-h.sev-opportunity em { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-group-h.sev-advisory::before { background: var(--sev-advisory-ink); }
.aisa-group-h.sev-advisory em { background: var(--sev-advisory-fill); color: var(--sev-advisory-ink); }
.aisa-group-h.sev-rec::before { background: var(--n-400); }

/* ── the sequence board ───────────────────────────────────────────────
   Two columns that must read as a pair, so they share every measurement and
   differ only in the hue of their rail. Good on the left, because that is the
   half a reader stops expecting after the tenth all-red review — putting it
   first is the whole point of having built it. */
.aisa-seqboard { margin-bottom: var(--s-5); }
.aisa-seqboard .aisa-sb-verdict {
  margin: 0 0 var(--s-1);
  padding-left: var(--s-6);
  font-size: var(--t-sm); line-height: 1.55; color: var(--n-800); font-weight: 400;
}
.aisa-sb-verdict {
  margin: 0 0 var(--s-3);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--aisa-ink);
  max-width: 78ch;
}
.aisa-sb-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  align-items: start;
}
/* A COLUMN IS NOT A CARD. These were bordered, filled boxes holding
   bordered, filled boxes, and because the two sides rarely hold the same
   number of items the taller box left the shorter one sitting in a pool of
   white. They are two lists now, each under its own heading, separated by a
   rule that carries the good/bad colour. */
.aisa-sb-col { min-width: 0; }
.aisa-sb-col .aisa-sb-h { border-top: 2px solid var(--n-200); padding-top: var(--s-2); }
.aisa-sb-col.is-good .aisa-sb-h { border-top-color: var(--sev-opportunity-ink); color: var(--sev-opportunity-ink); }
.aisa-sb-col.is-bad .aisa-sb-h { border-top-color: var(--sev-critical-ink); color: var(--sev-critical-ink); }
.aisa-sb-h {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--aisa-muted);
}
.aisa-sb-h span { min-width: 0; }
.aisa-sb-h em { margin-left: auto; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.aisa-sb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.aisa-sb-item {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--n-100);
}
.aisa-sb-list > .aisa-sb-item:last-child { border-bottom: 0; padding-bottom: 0; }
.aisa-sb-t { font-size: var(--t-sm); font-weight: 650; line-height: 1.35; letter-spacing: -.005em; }
.aisa-sb-d { margin: var(--s-1) 0 0; font-size: var(--t-xs); line-height: 1.55; color: var(--n-800); }
.aisa-sb-fix {
  margin: var(--s-2) 0 0;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md);
  background: var(--sev-opportunity-fill);
  border: 1px solid var(--sev-opportunity-line);
  font-size: var(--t-xs); line-height: 1.5; color: var(--sev-opportunity-ink);
}
.aisa-sb-fix b {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sev-opportunity-ink); margin-right: var(--s-1);
}
.aisa-sb-ev { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.aisa-sb-none {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs); line-height: 1.5; color: var(--aisa-muted);
  border: 1px dashed var(--aisa-line); border-radius: var(--r-md);
  background: transparent;
}

/* per-package ratings, worst first — state carried by the chip AND the rail */
.aisa-sb-pkgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--aisa-line);
}
.aisa-sb-pkg {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--aisa-surface-2);
}
.aisa-sb-pkg-h { display: flex; align-items: baseline; gap: var(--s-2); }
.aisa-sb-pkg-h b { font-size: var(--t-sm); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aisa-sb-pkg p { margin: var(--s-1) 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--aisa-muted); }
.aisa-sb-rate {
  margin-left: auto; flex: 0 0 auto;
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: var(--s-05) var(--s-2); border-radius: var(--r-full);
}
.aisa-sb-pkg.rate-sound { border-left-color: var(--aisa-add); }
.aisa-sb-pkg.rate-sound .aisa-sb-rate { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-sb-pkg.rate-acceptable { border-left-color: var(--n-400); }
.aisa-sb-pkg.rate-acceptable .aisa-sb-rate { background: var(--n-50); color: var(--n-800); }
.aisa-sb-pkg.rate-weak { border-left-color: var(--aisa-high); }
.aisa-sb-pkg.rate-weak .aisa-sb-rate { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-sb-pkg.rate-broken { border-left-color: var(--aisa-critical); }
.aisa-sb-pkg.rate-broken .aisa-sb-rate { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }

/* ── finding card ────────────────────────────────────────────────────── */
.aisa-findings { display: grid; gap: var(--s-2); }
.aisa-finding {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--aisa-surface);
  transition: box-shadow .15s, border-color .15s;
}
.aisa-finding:hover { border-color: var(--n-200); box-shadow: 0 2px 8px rgba(26, 29, 33, .05); }
.aisa-finding.is-flash { border-color: var(--aisa-accent); box-shadow: 0 0 0 3px var(--sev-opportunity-line); }
.aisa-f-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: var(--s-1); background: var(--aisa-advisory); }
.aisa-finding.sev-critical .aisa-f-dot { background: var(--aisa-critical); }
.aisa-finding.sev-high .aisa-f-dot { background: var(--aisa-high); }
.aisa-finding.sev-medium .aisa-f-dot { background: var(--aisa-medium); }
.aisa-finding.sev-opportunity .aisa-f-dot { background: var(--aisa-opportunity); }
.aisa-f-main { min-width: 0; }
.aisa-f-top { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-05); }
.aisa-f-cat { background: transparent; padding-left: 0; padding-right: 0; }
.aisa-f-id { font-size: var(--t-2xs); font-weight: 600; color: var(--n-400); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.aisa-f-title { margin: 0; font-size: var(--t-md); font-weight: 650; letter-spacing: -.005em; }
.aisa-f-why { margin: var(--s-1) 0 0; font-size: var(--t-sm); color: var(--n-800); }
.aisa-f-ev { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.aisa-chip {
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-sm);
  background: var(--aisa-surface-2);
  color: var(--n-800);
  cursor: pointer;
}
.aisa-chip:hover { border-color: var(--aisa-accent); color: var(--sev-opportunity-ink); background: var(--sev-opportunity-fill); }
.aisa-chip.is-rel { background: var(--sev-high-fill); border-color: var(--sev-high-line); color: var(--sev-high-ink); }
.aisa-chip.is-wbs { background: var(--info-fill); border-color: var(--info-line); color: var(--info-ink); }
.aisa-chip.is-more { cursor: default; background: transparent; border-style: dashed; }
.aisa-f-actions { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }

/* ── recommendation rows ─────────────────────────────────────────────── */
.aisa-recs { display: grid; gap: var(--s-1); }
.aisa-rec {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--aisa-surface);
}
.aisa-rec.is-selected { border-color: var(--sev-opportunity-line); background: var(--sev-opportunity-fill); }
.aisa-rec.is-blocked { background: var(--aisa-surface-2); opacity: .82; }
.aisa-rec-pick { display: grid; place-items: center; }
.aisa-rec-pick input, .aisa-op-pick input { width: 15px; height: 15px; accent-color: var(--sev-opportunity-ink); cursor: pointer; }
.aisa-rec-main { min-width: 0; }
.aisa-rec-title { font-size: var(--t-sm); font-weight: 650; }
.aisa-rec-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-05); font-size: var(--t-2xs); color: var(--aisa-muted); }
.aisa-rec-type { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: var(--t-2xs); }
.aisa-rec-flag { font-weight: 700; padding: var(--s-05) var(--s-1); border-radius: var(--r-full); font-size: var(--t-2xs); letter-spacing: .04em; text-transform: uppercase; }
.aisa-rec-flag.is-ok { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-rec-flag.is-partial { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-rec-flag.is-blocked { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-rec-impact { font-weight: 700; font-size: var(--t-2xs); }
.aisa-rec-impact.is-good { color: var(--sev-opportunity-ink); }
.aisa-rec-impact.is-bad { color: var(--aisa-critical); }
.aisa-rec-impact.is-flat { color: var(--aisa-muted); }

/* ── detail ──────────────────────────────────────────────────────────── */
.aisa-d-title { margin: 0; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.aisa-d-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: baseline; margin: var(--s-1) 0 var(--s-4); font-size: var(--t-xs); color: var(--aisa-muted); }
.aisa-d-linked { display: flex; gap: var(--s-1); text-transform: none; letter-spacing: 0; }
.aisa-d-answers { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--n-600); }
.aisa-d-id { margin-left: auto; font-size: var(--t-2xs); font-weight: 600; color: var(--n-400); font-variant-numeric: tabular-nums; }
.aisa-d-h {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--aisa-muted);
  padding-bottom: var(--s-1); border-bottom: 1px solid var(--aisa-line);
}
.aisa-d-h small { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .03em; text-transform: none; color: var(--n-400); }
.aisa-d-why { margin: 0; font-size: var(--t-sm); color: var(--n-800); max-width: 72ch; }
.aisa-blocked-note {
  display: grid; gap: var(--s-05);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--sev-critical-line);
  border-left: 3px solid var(--aisa-critical);
  border-radius: var(--r-md);
  background: var(--sev-critical-fill);
  margin-bottom: var(--s-3);
}
.aisa-blocked-note b { font-size: var(--t-sm); color: var(--sev-critical-ink); }
.aisa-blocked-note span { font-size: var(--t-xs); color: var(--sev-critical-ink); }

/* ── operation rows + sequence diagrams ───────────────────────────────── */
.aisa-ops { display: grid; gap: var(--s-1); }
.aisa-op {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--aisa-surface);
}
.aisa-op.is-invalid { background: var(--sev-critical-fill); border-color: var(--sev-critical-line); }
.aisa-op.is-coupled { background: var(--aisa-surface-2); }
.aisa-op-pick { display: grid; place-items: start center; padding-top: var(--s-05); }
.aisa-op-body { min-width: 0; }
.aisa-op-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); }
.aisa-op-name { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aisa-muted); }
.aisa-op-bad, .aisa-op-coupled { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: var(--s-05) var(--s-1); border-radius: var(--r-full); }
.aisa-op-bad { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-op-coupled { background: var(--info-fill); color: var(--info-ink); }
.aisa-op-err { font-size: var(--t-xs); color: var(--sev-critical-ink); margin-top: var(--s-1); }

.aisa-seq {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--t-xs);
}
.aisa-seq + .aisa-seq { margin-top: var(--s-1); }
.aisa-seq.is-dead { color: var(--aisa-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.aisa-seq-lbl { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aisa-muted); min-width: 62px; }
.aisa-seq-tag { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .07em; padding: var(--s-05) var(--s-1); border-radius: var(--r-sm); }
.aisa-seq-tag.is-new { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-seq-tag.is-rem { background: var(--n-50); color: var(--n-800); }
.aisa-seq-n {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-sm);
  background: var(--aisa-surface-2);
  color: var(--info-ink);
  cursor: pointer;
}
.aisa-seq-n:hover { border-color: var(--aisa-accent); color: var(--sev-opportunity-ink); }
.aisa-seq-a { display: inline-flex; align-items: center; gap: var(--s-1); }
.aisa-seq-a i {
  display: block; width: 44px; height: 0;
  border-top: 1.5px solid var(--aisa-remove);
  position: relative;
}
.aisa-seq-a i::after {
  content: ''; position: absolute; right: -1px; top: -3.5px;
  border: 3.5px solid transparent;
  border-left-color: var(--aisa-remove);
}
.aisa-seq-a em {
  font-style: normal; font: 700 9.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--aisa-remove);
  letter-spacing: .03em;
}
.aisa-seq-a.is-add i { border-top-color: var(--aisa-add); } .aisa-seq-a.is-add i::after { border-left-color: var(--aisa-add); } .aisa-seq-a.is-add em { color: var(--aisa-add); }
.aisa-seq-a.is-mod i { border-top-color: var(--aisa-modify); } .aisa-seq-a.is-mod i::after { border-left-color: var(--aisa-modify); } .aisa-seq-a.is-mod em { color: var(--aisa-modify); }
.aisa-seq-a.is-rem i { border-top-style: dashed; } .aisa-seq-a.is-rem em { text-decoration: line-through; }
.aisa-seq-a.is-was i { border-top-style: dashed; } .aisa-seq-a.is-was em { color: var(--aisa-muted); }
.aisa-seq-delta { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); }
.aisa-seq-delta s { color: var(--aisa-muted); }
.aisa-seq-delta i { font-style: normal; color: var(--n-400); }
.aisa-seq-delta b { font-weight: 700; color: var(--aisa-ink); }

/* ── impact cards ────────────────────────────────────────────────────── */
.aisa-impact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.aisa-ic {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--aisa-surface);
  border-top: 3px solid var(--aisa-line);
}
.aisa-ic.is-good { border-top-color: var(--aisa-add); }
.aisa-ic.is-bad { border-top-color: var(--aisa-critical); }
.aisa-ic.is-flat { border-top-color: var(--aisa-line); }
.aisa-ic-l { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--aisa-muted); }
.aisa-ic-v { display: flex; align-items: baseline; gap: var(--s-1); margin-top: var(--s-1); flex-wrap: wrap; }
.aisa-ic-v s { font-size: var(--t-sm); color: var(--aisa-muted); }
.aisa-ic-v i { font-style: normal; font-size: var(--t-xs); color: var(--n-400); }
.aisa-ic-v b { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.aisa-ic-d { display: block; font-size: var(--t-2xs); font-weight: 700; margin-top: var(--s-05); color: var(--aisa-muted); }
.aisa-ic.is-good .aisa-ic-d { color: var(--sev-opportunity-ink); }
.aisa-ic.is-bad .aisa-ic-d { color: var(--aisa-critical); }
.aisa-impact-empty { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.aisa-impact-empty span { font-size: var(--t-xs); color: var(--aisa-muted); }

.aisa-imp-table { border: 1px solid var(--aisa-line); border-radius: var(--r-md); overflow: auto; }
.aisa-imp-table table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.aisa-imp-table th {
  text-align: left; padding: var(--s-2) var(--s-2);
  background: var(--aisa-surface-2);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--aisa-muted);
  border-bottom: 1px solid var(--aisa-line);
  white-space: nowrap;
}
.aisa-imp-table td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--n-50); white-space: nowrap; }
.aisa-imp-table tr:last-child td { border-bottom: 0; }
.aisa-imp-table td.is-good { color: var(--sev-opportunity-ink); font-weight: 700; }
.aisa-imp-table td.is-bad { color: var(--aisa-critical); font-weight: 700; }
.aisa-imp-name { color: var(--aisa-muted); }
.aisa-imp-more { padding: var(--s-1) var(--s-2); font-size: var(--t-xs); color: var(--aisa-muted); background: var(--aisa-surface-2); }
.aisa-imp-ms { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.aisa-ms-pill {
  font-size: var(--t-2xs); padding: var(--s-1) var(--s-2); border-radius: var(--r-full);
  border: 1px solid var(--aisa-line); background: var(--aisa-surface-2);
}
.aisa-ms-pill.is-good { border-color: var(--sev-opportunity-line); background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-ms-pill.is-bad { border-color: var(--sev-critical-line); background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-ms-pill s { color: var(--aisa-muted); }

.aisa-d-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--aisa-line); flex-wrap: wrap; }
.aisa-combined-actions { display: flex; justify-content: flex-end; }

/* ── combined impact ──────────────────────────────────────────────────
   Clicking Preview Impact in the footer used to render this section below
   the fold, so the click looked dead. It now scrolls here and flashes, and
   the section carries a rail so it reads as the answer to that click. */
.aisa-combined {
  padding: var(--s-3) var(--s-4) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-left: 3px solid var(--aisa-impact);
  border-radius: var(--r-lg);
  background: var(--aisa-surface-2);
  scroll-margin: var(--s-4);
}
.aisa-combined > .aisa-group-h { margin-bottom: var(--s-1); }
.aisa-combined-note {
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--aisa-muted);
}
.aisa-combined.is-flash {
  animation: aisa-flash 1.6s ease-out 1;
}
@keyframes aisa-flash {
  0%   { box-shadow: 0 0 0 0 rgba(36, 180, 126, .55); border-left-color: var(--aisa-accent); }
  18%  { box-shadow: 0 0 0 5px rgba(36, 180, 126, .22); border-left-color: var(--aisa-accent); }
  100% { box-shadow: 0 0 0 0 rgba(36, 180, 126, 0); border-left-color: var(--aisa-impact); }
}
@media (prefers-reduced-motion: reduce) {
  .aisa-combined.is-flash { animation: none; box-shadow: 0 0 0 2px rgba(36, 180, 126, .35); }
  .aisa-health-cell { transition: none; }
}

/* ── applied summary ─────────────────────────────────────────────────── */
.aisa-applied {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--sev-opportunity-line);
  border-left: 3px solid var(--aisa-add);
  border-radius: var(--r-lg);
  background: var(--sev-opportunity-fill);
  margin-bottom: var(--s-4);
}
.aisa-applied-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.aisa-applied-head b { font-size: var(--t-lg); font-weight: 700; color: var(--sev-opportunity-ink); }
.aisa-applied-warn { font-size: var(--t-2xs); font-weight: 700; padding: var(--s-05) var(--s-2); border-radius: var(--r-full); background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-applied-undo { font-size: var(--t-2xs); color: var(--aisa-muted); margin-left: auto; }
.aisa-applied-lines { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.aisa-al { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); font-weight: 600; padding: var(--s-05) var(--s-2); border-radius: var(--r-full); background: var(--aisa-surface); border: 1px solid var(--aisa-line); }
.aisa-al i { font-style: normal; font-weight: 700; }
.aisa-al.tone-add i { color: var(--aisa-add); }
.aisa-al.tone-remove i { color: var(--aisa-remove); }
.aisa-al.tone-modify i { color: var(--aisa-modify); }
.aisa-al.tone-duration i { color: var(--aisa-impact); }
.aisa-al.tone-move i { color: var(--info-ink); }
.aisa-applied-impact { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--t-xs); color: var(--n-800); }
.aisa-applied-impact s { color: var(--aisa-muted); }
.aisa-applied-fails { margin: var(--s-2) 0 0; padding-left: var(--s-4); font-size: var(--t-xs); color: var(--sev-critical-ink); }
.aisa-applied-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }

.aisa-rejected { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--aisa-muted); }
.aisa-rejected summary { cursor: pointer; font-weight: 600; }
.aisa-rejected ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); }
.aisa-rejected li { margin: var(--s-05) 0; }

/* ══ GANTT REVIEW / COMPARE MODE ══════════════════════════════════════
   Additive only. Every selector below needs either the body class or a
   data-aisa-* node, so nothing here can touch a normal Gantt. */

/* The escape hatch: fixed to the viewport, so no amount of scrolling — in
   either axis — can take the way out of review mode off screen. Fixed rather
   than sticky on purpose: sticky inside the Gantt's flow changed the chart's
   layout, this cannot. */
#aisa-review-hatch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99500;
  appearance: none; -webkit-appearance: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--aisa-modify);
  border-radius: var(--r-full);
  background: var(--sev-high-fill);
  color: var(--sev-high-ink);
  font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(26, 29, 33, .18);
}
#aisa-review-hatch:hover { background: var(--sev-high-fill); }
#aisa-review-hatch:focus-visible { outline: 2px solid var(--aisa-accent); outline-offset: 2px; }
@media (max-width: 720px) { #aisa-review-hatch { right: 12px; bottom: 12px; padding: var(--s-2) var(--s-3); } }

#aisa-review-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin: 0 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--sev-high-line);
  border-left: 3px solid var(--aisa-modify);
  border-radius: var(--r-md);
  background: var(--sev-high-fill);
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--aisa-ink);
}
.aisa-rb-left { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.aisa-rb-tag {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em;
  padding: var(--s-05) var(--s-2); border-radius: var(--r-sm);
  background: var(--aisa-modify); color: var(--n-0);
  white-space: nowrap;
}
.aisa-rb-title { font-weight: 650; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.aisa-rb-keys { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.aisa-k { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-2xs); font-weight: 600; color: var(--n-800); }
.aisa-k i { width: 16px; height: 0; border-top: 2px solid currentColor; display: block; }
.aisa-k.k-add { color: var(--aisa-add); }
.aisa-k.k-rem { color: var(--aisa-remove); }
.aisa-k.k-rem i { border-top-style: dashed; }
.aisa-k.k-mod { color: var(--aisa-modify); }
.aisa-k.k-ghost i { border-top: 0; height: 9px; width: 17px; border: 1.5px dashed var(--aisa-impact); border-radius: var(--r-sm); }
.aisa-k.k-dur i { border-top: 0; height: 9px; width: 17px; background: linear-gradient(90deg, var(--aisa-impact) 55%, transparent 55%); }
.aisa-k.k-aff i { border-top: 0; width: 3px; height: 12px; background: var(--aisa-impact); border-radius: var(--r-sm); }
.aisa-rb-exit {
  margin-left: auto;
  font: 600 11.5px/1 inherit;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-md);
  background: var(--n-0);
  color: var(--aisa-ink);
  cursor: pointer;
  white-space: nowrap;
}
.aisa-rb-exit:hover { background: var(--aisa-surface-2); }

/* ghost bar: where the bar WAS (after an apply) or WILL BE (in a preview) */
.aisa-ghost-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 13px;
  border: 1.5px dashed var(--aisa-impact);
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(135deg, rgba(71, 84, 103, .10) 0 3px, transparent 3px 6px);
  pointer-events: auto;
  z-index: 6;
}
.aisa-ghost-bar.is-proposal { border-color: var(--aisa-add); background: repeating-linear-gradient(135deg, rgba(15, 138, 126, .14) 0 3px, transparent 3px 6px); }
.aisa-ghost-bar.is-proposal.is-later { border-color: var(--aisa-critical); background: repeating-linear-gradient(135deg, rgba(217, 45, 32, .12) 0 3px, transparent 3px 6px); }
.aisa-ghost-bar.is-origin { border-color: var(--aisa-remove); opacity: .85; }
.aisa-ghost-bar.is-ms { height: 11px; width: 11px !important; transform: translateY(-50%) rotate(45deg); border-radius: var(--r-sm); }
.aisa-delta-tag {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 700 9.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: var(--s-05) var(--s-1);
  border-radius: var(--r-sm);
  background: var(--n-0);
  border: 1px solid var(--aisa-line);
  color: var(--aisa-impact);
  white-space: nowrap;
  pointer-events: none;
  z-index: 7;
}
.aisa-delta-tag.is-earlier { color: var(--sev-opportunity-ink); border-color: var(--sev-opportunity-line); }
.aisa-delta-tag.is-later { color: var(--sev-critical-ink); border-color: var(--sev-critical-line); }

/* impacted row: a thin tick, nothing louder */
body.aisa-review-mode #ganttOut .p6-row.aisa-row-affected > .p6-left {
  box-shadow: inset 3px 0 0 var(--aisa-impact);
}
body.aisa-review-mode #ganttOut .p6-row.aisa-row-now-critical > .p6-left {
  box-shadow: inset 3px 0 0 var(--aisa-critical);
}
body.aisa-review-mode #ganttOut .p6-row.aisa-row-now-slack > .p6-left {
  box-shadow: inset 3px 0 0 var(--aisa-add);
}
/* unchanged rows stay quiet — they are simply not touched */
body.aisa-review-mode #ganttOut .p6-row.aisa-row-focus > .p6-left,
body.aisa-review-mode #ganttOut .p6-row.aisa-row-focus > .p6-right,
#ganttOut .p6-row.aisa-row-focus > .p6-left,
#ganttOut .p6-row.aisa-row-focus > .p6-right {
  background: var(--sev-high-fill) !important;
}

/* relationship overlay */
#aisa-review-svg .aisa-rel-path { fill: none; stroke-width: 1.6; }
#aisa-review-svg .aisa-rel.is-added .aisa-rel-path { stroke: var(--aisa-add); marker-end: url(#aisa-arrow-add); }
#aisa-review-svg .aisa-rel.is-modified .aisa-rel-path { stroke: var(--aisa-modify); marker-end: url(#aisa-arrow-mod); }
#aisa-review-svg .aisa-rel.is-removed .aisa-rel-path { stroke: var(--aisa-remove); stroke-dasharray: 4 3; opacity: .8; }
#aisa-review-svg .aisa-rel.is-was .aisa-rel-path { stroke: var(--aisa-remove); stroke-dasharray: 3 3; opacity: .65; }
#aisa-review-svg .aisa-rel-lbl {
  font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  paint-order: stroke;
  stroke: var(--n-0);
  stroke-width: 3px;
  stroke-linejoin: round;
}
#aisa-review-svg .aisa-rel.is-added .aisa-rel-lbl { fill: var(--aisa-add); }
#aisa-review-svg .aisa-rel.is-modified .aisa-rel-lbl { fill: var(--aisa-modify); }

/* the panel must not scroll the page behind it */
body.aisa-open { overflow: hidden; }

/* ══ REVIEW PASSES ════════════════════════════════════════════════════
   Which of the review's passes ran, what each found, and — the part that
   matters — which did not complete. A review that quietly covered four
   areas out of five is worse than one that says so, so a failed pass is
   shown failing rather than omitted. Doubles as the review-area filter. */
.aisa-passstrip {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin: 0 0 var(--s-4);
}
.aisa-lenspill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--aisa-line);
  border-radius: var(--r-full);
  background: var(--aisa-surface);
  color: var(--aisa-muted);
  font: inherit; font-size: var(--t-xs); font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.aisa-lenspill:hover:not([disabled]) { background: var(--n-50); }
.aisa-lenspill em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  padding: var(--s-05) var(--s-1); border-radius: var(--r-full);
  background: var(--aisa-surface-2); color: var(--aisa-muted);
  font-variant-numeric: tabular-nums;
}
.aisa-lenspill.is-on { background: var(--ink); border-color: var(--ink); color: var(--n-0); }
.aisa-lenspill.is-on em { background: rgba(255, 255, 255, .18); color: var(--n-0); }
.aisa-lenspill.is-bad {
  border-style: dashed; color: var(--sev-critical-ink); border-color: var(--sev-critical-line);
  cursor: not-allowed; opacity: .8;
}
.aisa-passwarn {
  flex: 1 1 100%;
  font-size: var(--t-xs); font-weight: 600; color: var(--sev-critical-ink);
  padding: var(--s-1) var(--s-2); border-radius: var(--r-md);
  background: var(--sev-critical-fill); border: 1px solid var(--sev-critical-line);
}

/* the same list, live, while the review runs */
.aisa-progress { width: min(360px, 100%); height: 4px; border-radius: var(--r-sm); background: var(--n-50); overflow: hidden; margin: var(--s-4) auto var(--s-1); }
.aisa-progress i { display: block; height: 100%; background: var(--aisa-accent); border-radius: var(--r-sm); transition: width .4s ease; }
.aisa-progress-count { font-size: var(--t-xs); font-weight: 600; color: var(--aisa-muted); }
.aisa-passes { list-style: none; margin: var(--s-3) auto 0; padding: 0; width: min(420px, 100%); display: grid; gap: var(--s-1); text-align: left; }
.aisa-pass {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2); border-radius: var(--r-md);
  background: var(--aisa-surface-2);
  font-size: var(--t-xs);
}
.aisa-pass-mark { font-size: var(--t-xs); font-weight: 700; text-align: center; }
.aisa-pass.is-ok .aisa-pass-mark { color: var(--sev-opportunity-ink); }
.aisa-pass.is-bad { background: var(--sev-critical-fill); }
.aisa-pass.is-bad .aisa-pass-mark { color: var(--sev-critical-ink); }
.aisa-pass.is-running { opacity: .7; }
.aisa-pass.is-running .aisa-pass-mark {
  width: 10px; height: 10px; margin: 0 auto; border-radius: 50%;
  border: 2px solid var(--n-200); border-top-color: var(--aisa-accent);
  animation: aisa-spin .7s linear infinite;
}
.aisa-pass-label { font-weight: 600; color: var(--aisa-ink); }
.aisa-pass-note { font-size: var(--t-2xs); color: var(--aisa-muted); text-align: right; }

/* ══ HOW DEEP ═════════════════════════════════════════════════════════
   Every pass is a paid call, so the choice is put in those terms and the
   lens list doubles as the explanation of what the review does. A lens the
   current depth excludes is still listed, greyed — a planner should be able
   to see what they are not getting. */
.aisa-depthbox {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-3); border-radius: var(--r-lg);
  background: var(--aisa-surface-2);
}
.aisa-depth-h {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--aisa-muted); margin-bottom: var(--s-2);
}
.aisa-depths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-3); }
.aisa-depth {
  text-align: left; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line); border-radius: var(--r-md);
  background: var(--aisa-surface);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.aisa-depth:hover { border-color: var(--n-400); }
.aisa-depth b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--aisa-ink); }
.aisa-depth span { display: block; margin-top: var(--s-05); font-size: var(--t-2xs); color: var(--aisa-muted); }
.aisa-depth.is-on {
  border-color: var(--info-ink);
  box-shadow: inset 0 0 0 1px var(--info-ink);
}

.aisa-lens-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.aisa-lens-list li {
  display: grid; grid-template-columns: 150px 1fr auto; gap: var(--s-2); align-items: baseline;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-md); background: var(--aisa-surface);
  font-size: var(--t-xs);
}
.aisa-lens-list b { font-weight: 700; color: var(--aisa-ink); }
.aisa-lens-list span { color: var(--aisa-muted); }
.aisa-lens-list li.is-always b::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--aisa-accent); margin-right: var(--s-1); vertical-align: middle;
}
.aisa-lens-list li.is-off { opacity: .5; }
.aisa-lens-list li.is-off em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--aisa-muted);
}

/* ══ THE HEADLINES ════════════════════════════════════════════════════
   The three things that matter about this sequence, first, one line each.
   The verdict paragraph used to hold this position; a paragraph at the top
   of a panel is the text most often skipped. */
.aisa-sb-heads { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-1); }
.aisa-sb-heads li {
  display: grid; grid-template-columns: 20px 1fr; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-md); line-height: 1.5; font-weight: 600; color: var(--aisa-ink);
}
.aisa-sb-headn {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--info-ink); color: var(--n-0);
  font-size: var(--t-2xs); font-weight: 700;
  transform: translateY(2px);
}

/* ══ SUB-HEADINGS inside the sequence board ══════════════════════════ */
.aisa-sub-h {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--n-600);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
}
/* a hairline that runs to the edge, so the label reads as the start of a
   band rather than as text floating above unrelated content */
.aisa-sub-h::after {
  content: ''; flex: 1 1 60px; height: 1px; min-width: 24px;
  background: var(--n-100);
  align-self: center;
}
/* The note explaining what a section measures sits beside its heading in a
   wrapping flex row — with nothing telling it it may shrink, a long one became
   a single unbreakable item and pushed the whole section past the viewport by
   362px at phone width. It takes its own line when there is no room for it.

   And it is TEXT, so it is set in the muted text colour: --n-400 is the token
   whose own comment says "decorative only — never text". */
.aisa-sub-note {
  flex: 1 1 240px; min-width: 0;
  font-size: var(--t-2xs); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--n-600);
}

/* ══ THE BUILD STORY ══════════════════════════════════════════════════
   The programme as ordered stages: the plain-language walk a planner
   would give if asked "how is this thing built?". */
.aisa-story-list { list-style: none; margin: 0; padding: 0; }
.aisa-story-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) 0;
}
/* the rail: the stages are a sequence, so they are drawn as one */
.aisa-story-step::before {
  content: ''; position: absolute; left: 11px; top: 50%; bottom: -7px;
  width: 2px; background: var(--n-200);
}
.aisa-story-step.is-last::before { display: none; }
.aisa-story-n {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--info-ink); color: var(--n-0);
  font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.aisa-story-body { min-width: 0; }
.aisa-story-body b { font-size: var(--t-sm); font-weight: 700; color: var(--aisa-ink); }
.aisa-story-d { display: block; font-size: var(--t-sm); line-height: 1.45; color: var(--n-800); margin-top: var(--s-05); }
.aisa-story-pk {
  grid-column: 2;
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-top: var(--s-05);
}

/* ══ THE PACKAGE FLOW ═════════════════════════════════════════════════
   A list of package ratings says which packages are weak; it cannot say
   how they CONNECT, which is what a planner is reviewing when they review
   a sequence. Each node carries its rating and a bar showing when it runs;
   between two nodes the connector carries BOTH the measured overlap and
   tie count AND the reviewer's verdict on that handover. A connector with
   a big overlap and no ties draws as a break, because that is what it is. */
.aisa-flow-list { list-style: none; margin: 0; padding: 0; }

.aisa-flow-node { margin: 0; }
.aisa-flow-btn {
  display: block; width: 100%; text-align: left;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--aisa-line);
  border-left: 4px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--aisa-surface);
  font: inherit; color: inherit;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s, background .12s;
}
.aisa-flow-btn:hover { background: var(--n-50); }
.aisa-flow-node.is-on .aisa-flow-btn { background: var(--info-fill); box-shadow: 0 0 0 2px var(--info-ink) inset; }
.aisa-flow-node.rate-sound .aisa-flow-btn { border-left-color: var(--sev-opportunity-ink); }
.aisa-flow-node.rate-acceptable .aisa-flow-btn { border-left-color: var(--info-soft); }
.aisa-flow-node.rate-weak .aisa-flow-btn { border-left-color: var(--sev-high-ink); }
.aisa-flow-node.rate-broken .aisa-flow-btn { border-left-color: var(--sev-critical-ink); }
.aisa-flow-node.rate-unrated .aisa-flow-btn { border-left-style: dashed; }

.aisa-flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.aisa-flow-name { font-size: var(--t-sm); font-weight: 700; color: var(--aisa-ink); }
.aisa-flow-rate { flex: 0 0 auto; }
.rate-sound .aisa-flow-rate { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.rate-acceptable .aisa-flow-rate { background: var(--info-fill); color: var(--info-ink); }
.rate-weak .aisa-flow-rate { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.rate-broken .aisa-flow-rate { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }

.aisa-flow-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  margin-top: var(--s-1);
  font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted);
}
.aisa-flow-meta .is-crit { color: var(--sev-critical-ink); }
.aisa-flow-meta .is-find { color: var(--info-ink); }
/* the package's own window, drawn against the whole programme — where the
   overlap between two packages becomes visible rather than stated */
.aisa-flow-track {
  position: relative; height: 5px; margin-top: var(--s-2);
  border-radius: var(--r-sm); background: var(--info-fill); overflow: hidden;
}
.aisa-flow-track i { position: absolute; top: 0; height: 100%; border-radius: var(--r-sm); background: var(--n-400); }
.rate-sound .aisa-flow-track i { background: var(--sev-opportunity-soft); }
.rate-acceptable .aisa-flow-track i { background: var(--info-soft); }
.rate-weak .aisa-flow-track i { background: var(--sev-high-soft); }
.rate-broken .aisa-flow-track i { background: var(--sev-critical-soft); }
.aisa-flow-pnote { margin: var(--s-1) 0 0; font-size: var(--t-xs); line-height: 1.45; color: var(--n-600); }

.aisa-flow-link {
  display: grid; grid-template-columns: 24px 1fr; align-items: stretch;
  gap: var(--s-2); padding: var(--s-05) 0 var(--s-05) var(--s-3);
}
.aisa-flow-line {
  position: relative; width: 2px; margin: 0 auto;
  background: var(--n-200); min-height: 26px;
}
.aisa-flow-line::after {
  content: ''; position: absolute; left: 50%; bottom: -1px;
  transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--n-200);
}
.aisa-flow-linkbody { padding: var(--s-1) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
/* the handover verdict uses the tag as-is */
.aisa-flow-m { font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted); font-variant-numeric: tabular-nums; }
.aisa-flow-note { flex: 1 1 100%; margin: var(--s-05) 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--n-800); }

.aisa-flow-link.q-clean .aisa-flow-line { background: var(--sev-opportunity-soft); }
.aisa-flow-link.q-clean .aisa-flow-line::after { border-top-color: var(--sev-opportunity-soft); }
.aisa-flow-link.q-clean .aisa-flow-q { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-flow-link.q-partial .aisa-flow-line { background: var(--sev-high-soft); }
.aisa-flow-link.q-partial .aisa-flow-line::after { border-top-color: var(--sev-high-soft); }
.aisa-flow-link.q-partial .aisa-flow-q { background: var(--sev-high-fill); color: var(--sev-high-ink); }
/* a missing handover is drawn as a BREAK, not a thinner line: the whole
   point of the diagram is that the chain stops here */
.aisa-flow-link.q-missing .aisa-flow-line {
  background: repeating-linear-gradient(180deg, var(--sev-critical-ink) 0 4px, transparent 4px 8px);
}
.aisa-flow-link.q-missing .aisa-flow-line::after { border-top-color: var(--sev-critical-ink); }
.aisa-flow-link.q-missing .aisa-flow-q { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
/* the verdict and the measurement disagree: neither is dropped, the
   conflict is shown */
.aisa-flow-conflict { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-flow-note.is-conflict { color: var(--sev-critical-ink); font-weight: 600; }
.aisa-flow-link.is-conflict .aisa-flow-line {
  background: repeating-linear-gradient(180deg, var(--sev-critical-ink) 0 4px, transparent 4px 8px) !important;
}
.aisa-flow-link.is-conflict .aisa-flow-line::after { border-top-color: var(--sev-critical-ink); }

.aisa-flow-link.q-none .aisa-flow-line,
.aisa-flow-link.q-unrated .aisa-flow-line {
  background: repeating-linear-gradient(180deg, var(--n-200) 0 3px, transparent 3px 6px);
}

/* ══ THE DRIVING PATH ═════════════════════════════════════════════════
   The chain that decides the finish date, drawn as a chain. Measured by
   the compiler, so it is shown whether or not the reviewer discussed it —
   a planner can check the verdict against it directly. */
.aisa-dp-list {
  list-style: none; margin: 0; padding: var(--s-05) 0 var(--s-2);
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.aisa-dp-step { display: flex; align-items: center; flex: 0 0 auto; }
.aisa-dp-arrow { color: var(--n-400); font-size: var(--t-md); padding: 0 var(--s-1); flex: 0 0 auto; }
.aisa-dp-card {
  display: block; max-width: 190px; text-align: left;
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--aisa-line); border-radius: var(--r-md);
  background: var(--aisa-surface);
  font: inherit; color: inherit; cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.aisa-dp-card:hover { background: var(--aisa-surface-2); box-shadow: 0 1px 3px rgba(16,24,40,.07); }
.aisa-dp-card b {
  display: block; font-size: var(--t-xs); font-weight: 600; color: var(--aisa-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aisa-dp-meta { display: block; margin-top: var(--s-05); font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted); }
.aisa-dp-more { flex: 0 0 auto; align-self: center; padding: 0 var(--s-2); font-size: var(--t-xs); font-weight: 600; color: var(--aisa-muted); }

/* ══ THE POINTS ═══════════════════════════════════════════════════════
   The reasoning, as a scannable list. Each row is icon · kind · one line,
   on a fixed grid so the four kinds line up down the card and the eye can
   run the column instead of reading the prose.

   This replaced four prose blocks of up to 700 characters each. The blocks
   were an over-correction to a 220-character cap that had made the reviews
   say nothing; both failed the same reader for opposite reasons. A short
   line with an id in it is read; a paragraph is skipped. */
.aisa-pts { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-pt {
  display: grid;
  /* the label is a COLUMN — wide enough that no kind wraps, or it stops
     being one and the text starts at a different place on every row */
  grid-template-columns: 16px 54px 1fr;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-05) 0;
}
.aisa-pt-i {
  width: 15px; height: 15px; border-radius: var(--r-sm);
  display: inline-grid; place-items: center;
  font-size: var(--t-2xs); font-weight: 700; line-height: 1;
  background: var(--n-50); color: var(--n-600);
  transform: translateY(1px);
}
.aisa-pt-k {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--aisa-muted); white-space: nowrap;
}
.aisa-pt-t { font-size: var(--t-sm); line-height: 1.5; color: var(--n-800); }

/* a continuation row: the label column stays, empty, so the text never shifts */
.aisa-pt.is-cont { padding-top: 0; }

.aisa-pt.is-wrong .aisa-pt-i { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-pt.is-wrong .aisa-pt-k { color: var(--sev-critical-ink); }
.aisa-pt.is-impact .aisa-pt-i { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-pt.is-impact .aisa-pt-k { color: var(--sev-high-ink); }
.aisa-pt.is-evidence .aisa-pt-i { background: var(--info-fill); color: var(--info-ink); }
.aisa-pt.is-evidence .aisa-pt-k { color: var(--info-ink); }
.aisa-pt.is-fix .aisa-pt-i { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-pt.is-fix .aisa-pt-k { color: var(--sev-opportunity-ink); }
.aisa-pt.is-fix .aisa-pt-t { font-weight: 600; }

/* A CONTINUATION ROW keeps the two leading columns so the text never shifts,
   but its icon slot is EMPTY. This has to sit after the per-kind colours: it
   carries the same specificity as `.aisa-pt.is-wrong .aisa-pt-i`, so declared
   before them it lost, and the list rendered with stray tinted squares down
   the left of every wrapped point. */
.aisa-pt.is-cont .aisa-pt-i { background: transparent; }

.aisa-pts.is-detailview { margin: var(--s-1) 0 var(--s-3); }

/* THE CHANGE, DRAWN.
   Derived from the validated operation against the live schedule, so it
   cannot promise something Apply would refuse. It is the densest thing on
   the card and the cheapest to read. */
.aisa-f-change {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--aisa-surface-2);
}
.aisa-f-change-l {
  display: block; margin-bottom: var(--s-1);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--aisa-muted);
}
.aisa-f-change .aisa-seq { margin: var(--s-05) 0; }
.aisa-f-change-more { font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted); }

.aisa-f-lens { font-weight: 600; letter-spacing: .02em; text-transform: none; }
/* confidence uses the tag as-is; only its colour differs */
.aisa-f-conf.conf-medium { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-f-conf.conf-low { background: var(--n-50); color: var(--n-800); }

/* scope bar + empty state for the package filter */
.aisa-scopebar {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); background: var(--info-fill);
  font-size: var(--t-xs); font-weight: 600; color: var(--info-ink);
}
.aisa-empty {
  padding: var(--s-5); text-align: center;
  font-size: var(--t-sm); color: var(--aisa-muted);
  border: 1px dashed var(--aisa-line); border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}

/* recommendation rows carry their reason and their cost inline now */
.aisa-rec-why { margin: var(--s-1) 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--n-800); }
.aisa-rec-trade { margin: var(--s-1) 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--sev-high-ink); }
.aisa-rec-trade b { font-weight: 700; color: var(--sev-high-ink); }
.aisa-rec-lens { font-size: var(--t-2xs); font-weight: 600; color: var(--aisa-muted); }
.aisa-d-tradeoff {
  margin: var(--s-2) 0 var(--s-1); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); background: var(--sev-high-fill);
}
.aisa-d-tradeoff b { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sev-high-ink); }
.aisa-d-tradeoff p { margin: var(--s-05) 0 0; font-size: var(--t-sm); line-height: 1.55; color: var(--sev-high-ink); }

.aisa-sb-links { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.aisa-chip.is-click { cursor: pointer; }
.aisa-chip.is-click:hover { background: var(--aisa-surface-2); }

/* ══ THE WORKSPACE ════════════════════════════════════════════════════
   The review used to be one long vertical scroll — every section
   concatenated into a single page, so finding one package meant scrolling
   past the score, the verdict, the story and eleven other packages, and
   then scrolling back. Restyling that never helped, because the shape was
   the problem: it was a document, not a tool.

   It is a rail and five areas now. The rail holds the score and the way in;
   each area fills the panel and scrolls on its own; moving between areas is
   lateral. Lists and their detail sit side by side rather than one
   replacing the other.
   ═════════════════════════════════════════════════════════════════════ */
.aisa-ws {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.aisa-ws-main {
  min-width: 0; min-height: 0;
  overflow: auto;
  padding: var(--s-4) var(--s-5);
}

/* ── the rail ─────────────────────────────────────────────────────── */
.aisa-rail {
  display: flex; flex-direction: column;
  min-height: 0;
  /* the provenance block is pinned to the bottom of the rail, so on a short
     window it was simply cut off rather than reachable */
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-4) var(--s-3);
  border-right: 1px solid var(--n-100);
  background: var(--n-25);
}
.aisa-rail-score { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; }
.aisa-rail-score .aisa-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.aisa-rail-lbl {
  margin: var(--s-1) 0 var(--s-4);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--n-600); text-align: center;
}
.aisa-rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
/* THE RAIL BUTTON IS TWO LINES, NOT THREE THINGS IN A ROW.
   It was a flex row holding the name, the count and the one-line explanation
   side by side, so the explanation was squeezed into whatever was left and
   wrapped: "Diagnosis" carried a five-line stack reading "What / holds / and /
   what / does / not", every row was a different height, and the one piece of
   navigation on the screen was the messiest thing on it. Name and count on
   the first line, the explanation across the full width underneath, and every
   row the same height. */
.aisa-rail-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 0 var(--s-2);
  width: 100%; padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--n-800);
  font: inherit; font-size: var(--t-md); font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* A section's NAME is what the planner navigates by, so it wraps rather than
   truncating: "What ho…" and "Logic & DC…" are not navigation. Only the
   horizontal top bar at phone width clips, and there it scrolls instead. */
.aisa-rail-btn > span { min-width: 0; line-height: 1.25; }
.aisa-rail-btn:hover { background: var(--n-50); }
.aisa-rail-btn em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  padding: 0 var(--s-1); min-width: 18px; text-align: center;
  border-radius: var(--r-full);
  background: var(--n-100); color: var(--n-600);
  font-variant-numeric: tabular-nums;
}
.aisa-rail-btn.is-on { background: var(--ink); color: var(--n-0); }
.aisa-rail-btn.is-on em { background: rgba(255, 255, 255, .2); color: var(--n-0); }

.aisa-rail-foot { margin-top: auto; padding-top: var(--s-4); }
.aisa-rail-cap {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--n-600); margin-bottom: var(--s-1);
}
.aisa-rail-passes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-rail-passes li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-1);
  font-size: var(--t-2xs); color: var(--n-600);
}
/* An area the review checked and passed, rather than one it never reached. */
.aisa-rail-passes li.is-clean em { color: var(--ok-ink, var(--n-600)); }
.aisa-rail-cov {
  margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--n-200);
  font-size: var(--t-2xs); line-height: 1.5; color: var(--n-600);
}
.aisa-rail-cov b { color: var(--n-900); font-variant-numeric: tabular-nums; }
.aisa-rail-passes li em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.aisa-rail-passes li.is-bad, .aisa-rail-passes li.is-bad em { color: var(--sev-critical-ink); }
.aisa-rail-warn { margin-top: var(--s-1); font-size: var(--t-2xs); font-weight: 600; color: var(--sev-critical-ink); }

/* ── an area ──────────────────────────────────────────────────────── */
/* min-width:0 on the sections is load-bearing, not tidiness. A grid item
   defaults to min-width:auto, which is its CONTENT's minimum — and two of
   these sections hold a horizontal strip of fixed-width cards. Without it the
   strip set the width of the section, the section set the width of the area,
   and the whole Flow area became 1,579px wide inside a 782px panel: the
   headings, the package bars, the driving path and the strengths column all
   ran off the right edge and were read as simply cut off. The strips scroll
   sideways on their own; the page around them must not. */
.aisa-view { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.aisa-sec { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.aisa-view > * { min-width: 0; }

.aisa-hero { display: grid; gap: var(--s-2); }
.aisa-hero-h { margin: 0; font-size: var(--t-xl); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--n-900); max-width: 30ch; }
.aisa-hero-scope { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); color: var(--n-600); }
.aisa-hero-scope b { color: var(--n-900); font-variant-numeric: tabular-nums; }
.aisa-hero-verdict { margin: var(--s-2) 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--n-800); max-width: 92ch; }
/* a line under a list that is NOT another item in it, and says so */
.aisa-boxnote {
  display: grid; gap: var(--s-05);
  margin: var(--s-3) 0 0; padding-top: var(--s-2);
  border-top: 1px solid var(--n-100);
  font-size: var(--t-sm); line-height: 1.6; color: var(--n-800); max-width: 92ch;
}
.aisa-boxnote b {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--n-600);
}

.aisa-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
/* ONE CONTENT SURFACE. The overview boxes, the detail pane and the package
   detail are the same object — a bordered white area holding one thing — so
   they are one rule rather than three near-copies. */
.aisa-panelbox, .aisa-split-detail, .aisa-pkgdetail {
  border: 1px solid var(--n-100);
  border-radius: var(--r-md);
  background: var(--n-0);
}
.aisa-panelbox { padding: var(--s-3); }
/* space-between was written for a header with a title and a trailing control.
   Once an icon leads the title, that rule threw the icon to one edge and the
   words to the other with the whole box between them. Content-start, and a
   trailing control pushes itself right with its own auto margin. */
.aisa-box-h {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-dim.is-worst .aisa-dim-l { color: var(--n-900); font-weight: 700; }

.aisa-sevgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-1); }
.aisa-sevtile {
  display: grid; gap: var(--s-05); justify-items: center;
  padding: var(--s-2) var(--s-1);
  border: 1px solid var(--n-100); border-radius: var(--r-md);
  background: var(--n-0); font: inherit; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.aisa-sevtile:hover:not(:disabled) { background: var(--n-50); }
.aisa-sevtile.is-zero { opacity: .4; cursor: default; }
.aisa-sevtile b { font-size: var(--t-xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.aisa-sevtile span { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--n-600); }
.aisa-sevtile.tone-critical b { color: var(--sev-critical-ink); }
.aisa-sevtile.tone-high b { color: var(--sev-high-ink); }
.aisa-sevtile.tone-medium b { color: var(--sev-medium-ink); }
.aisa-sevtile.tone-opportunity b { color: var(--sev-opportunity-ink); }
.aisa-sevtile.tone-advisory b { color: var(--sev-advisory-ink); }

.aisa-heads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.aisa-heads li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2);
  align-items: baseline;
  font-size: var(--t-md); font-weight: 600; line-height: 1.5; color: var(--n-900);
}
.aisa-heads-n {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--ink); color: var(--n-0);
  font-size: var(--t-2xs); font-weight: 700;
}

.aisa-minilist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-minirow {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-2);
  border: 0; border-radius: var(--r-sm); background: transparent;
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.aisa-minirow:hover { background: var(--n-50); }
.aisa-minirow-t { font-size: var(--t-sm); font-weight: 600; color: var(--n-900); }
.aisa-minirow em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--n-600);
}
.aisa-dotsev { width: 8px; height: 8px; border-radius: 50%; background: var(--n-400); }
.aisa-dotsev.sev-critical { background: var(--sev-critical-ink); }
.aisa-dotsev.sev-high { background: var(--sev-high-ink); }
.aisa-dotsev.sev-medium { background: var(--sev-medium-ink); }
.aisa-dotsev.sev-opportunity { background: var(--sev-opportunity-ink); }
.aisa-dotsev.sev-advisory { background: var(--sev-advisory-ink); }
.aisa-dotsev.is-picked { background: var(--accent); }

/* ── list beside detail ───────────────────────────────────────────── */
.aisa-view.is-split {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.aisa-split-list { min-width: 0; display: grid; gap: var(--s-2); align-content: start; }
.aisa-split-detail { min-width: 0; padding: var(--s-4); }
.aisa-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-frow {
  display: grid; grid-template-columns: 8px minmax(0, 1fr);
  align-items: start; gap: var(--s-2);
  width: 100%; padding: var(--s-2) var(--s-3);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.aisa-frow:hover { background: var(--n-50); }
.aisa-frow.is-on { background: var(--n-0); border-color: var(--n-200); }
.aisa-frow .aisa-dotsev { margin-top: var(--s-1); }
.aisa-frow-main { min-width: 0; display: grid; gap: 1px; }
.aisa-frow-t { font-size: var(--t-sm); font-weight: 600; line-height: 1.4; color: var(--n-900); }
.aisa-frow-m { font-size: var(--t-2xs); color: var(--n-600); }
.aisa-frow.is-blocked .aisa-frow-t { color: var(--n-600); }
/* WHY IT CANNOT BE APPLIED, ON THE ROW.
   A blocked change used to add the word "blocked" to its meta line in grey
   and stop there, so the only way to learn what was wrong with it was to open
   it — for every blocked change in turn. The reason is one sentence; the list
   is where the planner is deciding; it goes on the row. */
.aisa-frow-why {
  display: grid; gap: 1px;
  margin-top: var(--s-1); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  background: var(--sev-critical-fill);
  font-size: var(--t-2xs); line-height: 1.45; color: var(--sev-critical-ink);
}
.aisa-frow-why b { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
/* the reason sits in the row's second column, under the title it belongs to,
   not in the tick's column where the grid would otherwise place it */
.aisa-frow-wrap > .aisa-frow-why { grid-column: 2; margin: 0 0 var(--s-1) var(--s-3); }

/* A LOOP THE SCHEDULE ITSELF CARRIES.
   Stated once, here, and never again as the reason a change was refused. */
.aisa-loopnote {
  display: grid; gap: var(--s-05);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--sev-critical-ink);
  border-radius: var(--r-sm);
  background: var(--sev-critical-fill);
  font-size: var(--t-xs); line-height: 1.5; color: var(--sev-critical-ink);
}
.aisa-loopnote b { font-size: var(--t-sm); }
.aisa-loopnote-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-2xs); font-weight: 600;
}

.aisa-flist-head { display: grid; gap: var(--s-2); }

/* A change row carries its own tick, because the footer asks for a selection
   and the list is where the planner makes one. */
.aisa-frow-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.aisa-frow-wrap .aisa-frow { grid-template-columns: minmax(0, 1fr); }
.aisa-pick, .aisa-pickall { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.aisa-pick { padding: var(--s-2) 0 0 var(--s-2); }
.aisa-pick input, .aisa-pickall input { accent-color: var(--accent); cursor: pointer; }
.aisa-pickall {
  padding: var(--s-1) var(--s-2); border-radius: var(--r-md);
  font-size: var(--t-2xs); font-weight: 600; color: var(--n-800);
}
.aisa-pickall:hover { background: var(--n-50); }
.aisa-pick-off {
  width: 13px; height: 13px; margin: var(--s-2) 0 0 var(--s-2);
  border: 1px solid var(--n-200); border-radius: var(--r-sm);
  background: var(--n-50);
}
.aisa-seg { display: flex; flex-wrap: wrap; gap: var(--s-05); }
.aisa-segb {
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--n-100); border-radius: var(--r-full);
  background: var(--n-0); color: var(--n-800);
  font: inherit; font-size: var(--t-2xs); font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.aisa-segb:hover { background: var(--n-50); }
.aisa-segb em { font-style: normal; font-weight: 700; color: var(--n-600); font-variant-numeric: tabular-nums; }
.aisa-segb.is-on { background: var(--ink); border-color: var(--ink); color: var(--n-0); }
.aisa-segb.is-on em { color: var(--n-0); }
.aisa-seg.is-quiet .aisa-segb { border-style: dashed; }

/* ── the finding detail ───────────────────────────────────────────── */
.aisa-fd { display: grid; gap: var(--s-4); }
.aisa-fd-head { display: grid; gap: var(--s-1); }
.aisa-fd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.aisa-fd-title { margin: 0; font-size: var(--t-lg); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.aisa-fd-why { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--n-800); }
.aisa-fd-sec { display: grid; gap: var(--s-2); }
.aisa-fd-sec .aisa-h-sub { margin: 0; }
.aisa-fd-ops { display: grid; gap: var(--s-1); }
.aisa-fd-reason { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--n-800); }
.aisa-fd-foot {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-top: var(--s-3);
  box-shadow: 0 -1px 0 var(--n-100);
}

/* ══ THE PACKAGE TIMELINE ═════════════════════════════════════════════
   Packages as columns in execution order, scrolled sideways, with the
   handover between them. A stacked list could not show an overlap; this
   can, and the axis underneath puts every package on one scale. */
.aisa-tl-scroll {
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: var(--s-2);
}
.aisa-tl { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0; min-width: 100%; }
/* A programme of five packages does not need a sideways scroll, and a strip
   that scrolls when it did not have to is the version of this that reads as
   broken. The columns share the width they have and hold a floor; past that
   floor — a programme with a dozen packages — the strip scrolls, which is
   what the scroll cue underneath is for. */
.aisa-tl-col { flex: 1 1 152px; min-width: 132px; }
.aisa-tl-btn {
  display: grid; gap: var(--s-05); align-content: start;
  width: 100%; height: 100%; padding: var(--s-3);
  border: 1px solid var(--n-100); border-top: 3px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-0); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.aisa-tl-btn:hover { background: var(--n-50); }
.aisa-tl-col.is-on .aisa-tl-btn { background: var(--n-50); border-color: var(--ink); }
.aisa-tl-col.rate-sound .aisa-tl-btn { border-top-color: var(--sev-opportunity-ink); }
.aisa-tl-col.rate-acceptable .aisa-tl-btn { border-top-color: var(--info-soft); }
.aisa-tl-col.rate-weak .aisa-tl-btn { border-top-color: var(--sev-high-ink); }
.aisa-tl-col.rate-broken .aisa-tl-btn { border-top-color: var(--sev-critical-ink); }
.aisa-tl-col.rate-unrated .aisa-tl-btn { border-top-style: dashed; }
.aisa-tl-rate {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-tl-col.rate-sound .aisa-tl-rate { color: var(--sev-opportunity-ink); }
.aisa-tl-col.rate-weak .aisa-tl-rate { color: var(--sev-high-ink); }
.aisa-tl-col.rate-broken .aisa-tl-rate { color: var(--sev-critical-ink); }
.aisa-tl-col.rate-acceptable .aisa-tl-rate { color: var(--info-ink); }
.aisa-tl-name { font-size: var(--t-md); font-weight: 700; color: var(--n-900); }
.aisa-tl-full {
  font-size: var(--t-2xs); color: var(--n-600); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aisa-tl-meta { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); font-size: var(--t-2xs); font-weight: 600; color: var(--n-600); }
.aisa-tl-meta .is-crit { color: var(--sev-critical-ink); }
.aisa-tl-meta .is-find { color: var(--ink); }
.aisa-tl-dates { font-size: var(--t-2xs); color: var(--n-600); font-variant-numeric: tabular-nums; }

.aisa-tl-link {
  flex: 0 1 88px; min-width: 56px;
  display: grid; align-content: center; justify-items: center; gap: 1px;
  padding: 0 var(--s-1);
  text-align: center;
}
.aisa-tl-arrow { width: 100%; height: 2px; background: var(--n-200); position: relative; }
.aisa-tl-arrow::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid var(--n-200);
}
.aisa-tl-q { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--n-600); margin-top: var(--s-1); }
.aisa-tl-m { font-size: var(--t-2xs); color: var(--n-600); font-variant-numeric: tabular-nums; }
.aisa-tl-link.q-clean .aisa-tl-arrow { background: var(--sev-opportunity-ink); }
.aisa-tl-link.q-clean .aisa-tl-arrow::after { border-left-color: var(--sev-opportunity-ink); }
.aisa-tl-link.q-clean .aisa-tl-q { color: var(--sev-opportunity-ink); }
.aisa-tl-link.q-partial .aisa-tl-arrow { background: var(--sev-high-ink); }
.aisa-tl-link.q-partial .aisa-tl-arrow::after { border-left-color: var(--sev-high-ink); }
.aisa-tl-link.q-partial .aisa-tl-q { color: var(--sev-high-ink); }
/* a missing handover is a BREAK in the chain, so it is drawn as one */
.aisa-tl-link.q-missing .aisa-tl-arrow,
.aisa-tl-link.is-conflict .aisa-tl-arrow {
  background: repeating-linear-gradient(90deg, var(--sev-critical-ink) 0 5px, transparent 5px 10px);
}
.aisa-tl-link.q-missing .aisa-tl-arrow::after,
.aisa-tl-link.is-conflict .aisa-tl-arrow::after { border-left-color: var(--sev-critical-ink); }
.aisa-tl-link.q-missing .aisa-tl-q, .aisa-tl-link.is-conflict .aisa-tl-q { color: var(--sev-critical-ink); }
.aisa-tl-x {
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; margin-top: var(--s-05);
  background: var(--sev-critical-fill); color: var(--sev-critical-ink);
  font-size: var(--t-2xs); font-weight: 700;
}

/* ── A STRIP THAT SCROLLS SIDEWAYS SAYS SO ─────────────────────────
   Content clipped flush against the panel edge reads as cut off, not as
   scrollable — and the word "scroll sideways" in the heading is nowhere near
   where the eye is when it hits the edge. These strips get a scrollbar that
   is actually visible instead of an overlay one that appears only once you
   have already guessed, and a gutter so the last card is never sliced by the
   panel edge. */
.aisa-scrollx {
  scrollbar-width: thin;
  scrollbar-color: var(--n-200) transparent;
  scroll-snap-type: x proximity;
}
.aisa-scrollx::-webkit-scrollbar { height: 8px; }
.aisa-scrollx::-webkit-scrollbar-track { background: var(--n-50); border-radius: var(--r-full); }
.aisa-scrollx::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: var(--r-full); }
.aisa-scrollx::-webkit-scrollbar-thumb:hover { background: var(--n-400); }
.aisa-scrollx > * > * , .aisa-scrollx > * { scroll-snap-align: start; }

/* the shared time axis */
.aisa-axis { display: grid; gap: var(--s-05); }
.aisa-ax-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--s-2); }
.aisa-ax-lbl { font-size: var(--t-2xs); font-weight: 700; color: var(--n-600); text-align: right; }
.aisa-ax-track { height: 8px; }
.aisa-ax-row.rate-sound .aisa-ax-track i { background: var(--sev-opportunity-soft); }
.aisa-ax-row.rate-acceptable .aisa-ax-track i { background: var(--info-soft); }
.aisa-ax-row.rate-weak .aisa-ax-track i { background: var(--sev-high-soft); }
.aisa-ax-row.rate-broken .aisa-ax-track i { background: var(--sev-critical-soft); }

.aisa-pkgdetail { padding: var(--s-4); }
.aisa-pkgstats { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.aisa-pkgstats div { display: grid; gap: 1px; }
.aisa-pkgstats b { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.aisa-pkgstats span { font-size: var(--t-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--n-600); }
.aisa-pkgnote { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--n-800); }
.aisa-pkgnote em { color: var(--n-600); font-style: normal; }
.aisa-empty.sm { padding: var(--s-3); font-size: var(--t-sm); }

/* ── narrow screens ──────────────────────────────────────────────────── */
/* ── short viewports ──────────────────────────────────────────────────
   Tablet landscape is ~834 CSS px tall. The verdict band is worth its space
   on a desktop, but there it eats a third of the panel before a single
   finding is visible, so it compacts rather than pushing the list off. */
@media (max-height: 900px) {
  .aisa-health { padding: var(--s-3) var(--s-3) var(--s-3); margin-bottom: var(--s-3); }
  .aisa-health-top { gap: var(--s-3); }
  .aisa-health-score { width: 78px; padding: var(--s-1) 0; }
  .aisa-health-dial { width: 52px; height: 52px; }
  .aisa-health-num { font-size: var(--t-xl); }
  .aisa-headline { font-size: var(--t-md); line-height: 1.4; }
  .aisa-health-cells { margin-top: var(--s-2); gap: var(--s-1); }
  .aisa-group { margin-bottom: var(--s-3); }
  .aisa-finding { padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); }
  .aisa-f-actions { margin-top: var(--s-2); }
}


/* ══════════════════════════════════════════════════════════════════════
   THE REVIEW WORKSPACE — the surfaces added with the deterministic half
   ----------------------------------------------------------------------
   Everything below uses the ramp above and nothing else: no new colour, no
   size that is not a --t- step, no space that is not a --s- step. The
   vocabulary exists so that a new area of the panel looks like the panel
   rather than like the day it was added.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the wait ──────────────────────────────────────────────────────────
   Nine stages, three states. A done stage recedes, the active one is the
   only thing at full weight, and what is still to come is visible but
   quiet — so the eye lands on "what is happening now" without reading. */
.aisa-run-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); width: 100%; margin-bottom: var(--s-3);
}
.aisa-run-now { font-size: var(--t-md); color: var(--n-900); }
.aisa-run-count { font-size: var(--t-xs); color: var(--n-600); }
.aisa-stages { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: var(--s-05); }
.aisa-stage {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center;
  gap: var(--s-2); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm); font-size: var(--t-sm);
}
.aisa-stage-mark {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-2xs); border: 1px solid var(--n-200); color: var(--n-0);
}
.aisa-stage-l { min-width: 0; text-align: left; }
.aisa-stage-n {
  font-size: var(--t-xs); color: var(--n-600); text-align: right;
  font-variant-numeric: tabular-nums;
}
.aisa-stage.is-todo { color: var(--n-400); }
.aisa-stage.is-done { color: var(--n-600); }
.aisa-stage.is-done .aisa-stage-mark { background: var(--accent-ink); border-color: var(--accent-ink); }
.aisa-stage.is-active { background: var(--info-fill); color: var(--n-900); }
.aisa-stage.is-active .aisa-stage-mark {
  border-color: var(--info-ink);
  border-top-color: transparent;
  animation: aisa-spin 900ms linear infinite;
}
/* the stage marker still turns, slowly: the point of it is "not frozen", and
   a wait is exactly where someone who has asked for reduced motion still
   needs to see that something is happening */
@media (prefers-reduced-motion: reduce) {
  .aisa-stage.is-active .aisa-stage-mark { animation-duration: 2.4s; }
}

/* ── what kind of review this is ───────────────────────────────────────
   Four tiles counting the findings by what they ARE, not by how loud they
   are. "Done right" gets the same weight as the rest on purpose. */
.aisa-natgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.aisa-nattile {
  display: grid; gap: var(--s-05); padding: var(--s-3);
  text-align: left; cursor: pointer;
  background: var(--n-50); border: 0; border-radius: var(--r-md);
  transition: background var(--dur) var(--ease);
}
.aisa-nattile b { font-size: var(--t-xl); color: var(--n-900); line-height: 1; }
.aisa-nattile span { font-size: var(--t-sm); color: var(--n-800); }
.aisa-nattile em { font-size: var(--t-2xs); color: var(--n-600); font-style: normal; }
.aisa-nattile:hover { background: var(--n-100); }
.aisa-nattile.is-zero { opacity: .5; cursor: default; }
.aisa-nattile.nat-good_practice b { color: var(--sev-opportunity-ink); }
.aisa-nattile.nat-missing b { color: var(--sev-high-ink); }
.aisa-nattile.nat-diagnosis b { color: var(--sev-critical-ink); }

/* the same vocabulary as a small inline tag on a finding */
.aisa-nat {
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em;
  padding: 0 var(--s-1); border-radius: var(--r-sm);
  background: var(--n-50); color: var(--n-800);
}
.aisa-nat.nat-good_practice { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-nat.nat-missing { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-nat.nat-opportunity { background: var(--info-fill); color: var(--info-ink); }

/* ── the dimensions ────────────────────────────────────────────────────
   Nine tiles, five states, and the state that matters is `gap`: a
   dimension the reviewer never answered. It is drawn as an outline with
   nothing in it, because that is what it is. */
.aisa-dimgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}
.aisa-dimtile {
  position: relative; display: grid; gap: var(--s-05); padding: var(--s-2) var(--s-3);
  text-align: left; cursor: pointer; border: 0; border-left: 3px solid var(--n-200);
  background: var(--n-50); border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}
.aisa-dimtile:hover { background: var(--n-100); }
.aisa-dimtile-h { font-size: var(--t-sm); color: var(--n-900); }
.aisa-dimtile-s { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--n-600); }
.aisa-dimtile-n {
  position: absolute; top: var(--s-2); right: var(--s-2);
  font-size: var(--t-xs); font-style: normal; color: var(--n-800);
  background: var(--n-0); border-radius: var(--r-full); padding: 0 var(--s-1);
}
.aisa-dimtile.st-good { border-left-color: var(--sev-opportunity-soft); }
.aisa-dimtile.st-good .aisa-dimtile-s { color: var(--sev-opportunity-ink); }
.aisa-dimtile.st-warn { border-left-color: var(--sev-high-soft); }
.aisa-dimtile.st-warn .aisa-dimtile-s { color: var(--sev-high-ink); }
.aisa-dimtile.st-bad { border-left-color: var(--sev-critical-soft); }
.aisa-dimtile.st-bad .aisa-dimtile-s { color: var(--sev-critical-ink); }
.aisa-dimtile.st-none { border-left-color: var(--n-200); }
.aisa-dimtile.st-gap { background: var(--n-0); border: 1px dashed var(--n-200); border-left-width: 3px; }
.aisa-dimtile.is-on { background: var(--ink); }
.aisa-dimtile.is-on .aisa-dimtile-h { color: var(--n-0); }
.aisa-dimtile.is-on .aisa-dimtile-s { color: var(--n-200); }

.aisa-secdetail { background: var(--n-25); border-radius: var(--r-md); padding: var(--s-3); }
.aisa-sec-ask { margin: 0 0 var(--s-2); font-size: var(--t-xs); color: var(--n-600); }
.aisa-seclines { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-1); }
.aisa-seclines li {
  font-size: var(--t-sm); color: var(--n-800);
  padding-left: var(--s-3); position: relative;
}
.aisa-seclines li::before {
  content: ''; position: absolute; left: var(--s-1); top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--n-400);
}

/* ══ THE DRAWING VOCABULARY ══════════════════════════════════════════════
   advisor-visuals.js builds these; this styles them. One place, so a stat
   tile in the project section and a stat tile in the DCMA section cannot
   drift apart — which is the whole reason the builders are shared.

   The tone names are the same five everywhere: good / warn / mid / bad /
   none / plain. Nothing here invents a sixth. */
.aisa-icn { flex: 0 0 auto; width: 16px; height: 16px; vertical-align: -3px; }

/* ── the section header ────────────────────────────────────────────────
   Every section opens the same way — what it answers, its verdict, and a
   badge for what it found. The consistency is the point: a planner learns
   the shape once and reads five sections the same way. */
/* ONE LEAD PER SCREEN, AND IT IS A SENTENCE.

   What "not organised" measured as: 92–98% of the text on a screen sat at
   13px or under, and the largest thing a planner's eye could land on was a
   bare digit — "6" on the logic screen, "4" on the project one, the score on
   the review. The section heading was 15px, the counters were 20px and the
   answer sentence was 12px, the smallest size in the scale. So the ranking
   was upside down: a number outranked the sentence that explained it.

   The sentence was already there. It is promoted, the section's name becomes
   its eyebrow, and nothing else on any screen changes — not a colour, not a
   card, not a chip, not the density. */
.aisa-sh {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--n-25);
  border-left: 3px solid var(--n-200);
}
.aisa-sh.tone-good { border-left-color: var(--sev-opportunity-ink); }
.aisa-sh.tone-warn { border-left-color: var(--sev-high-ink); }
.aisa-sh.tone-bad  { border-left-color: var(--sev-critical-ink); }
.aisa-sh-icon { display: none; }   /* a 40px tile beside the lead competes with it */
.aisa-sh.tone-good .aisa-sh-icon { color: var(--sev-opportunity-ink); }
.aisa-sh.tone-warn .aisa-sh-icon { color: var(--sev-high-ink); }
.aisa-sh.tone-bad  .aisa-sh-icon { color: var(--sev-critical-ink); }
.aisa-sh-b { min-width: 0; display: grid; gap: var(--s-2); }
/* the section's name is a label now, not the headline */
.aisa-sh-h {
  order: 1; margin: 0;
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--n-600);
}
/* THE ANSWER. The one thing on the screen that outranks every number on it. */
.aisa-sh-v {
  order: 2; margin: 0;
  font-size: var(--t-3xl); font-weight: 600; line-height: 1.28;
  letter-spacing: -.015em; color: var(--n-900); max-width: 44ch;
}
/* the question the section exists to answer, underneath, as provenance */
.aisa-sh-ask {
  order: 3; margin: 0;
  font-size: var(--t-sm); line-height: 1.55; color: var(--n-600); max-width: 88ch;
}
/* a section with no verdict to promote still gets a lead: its own name, at
   the size the answer would have been, rather than a 10px label alone */
/* a section with no verdict to promote leads with its own name, at the SAME
   size the answer would have been. One step under the counters is not a lead:
   it is a caption competing with a number. */
.aisa-sh-b:not(:has(.aisa-sh-v)) .aisa-sh-h {
  font-size: var(--t-3xl); font-weight: 600; line-height: 1.28;
  letter-spacing: -.015em; text-transform: none; color: var(--n-900);
}
.aisa-sh-badge { align-self: start;
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2); border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--n-50); color: var(--n-600);
}
.aisa-sh-badge.tone-good { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-sh-badge.tone-warn { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-sh-badge.tone-bad  { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-view.is-section { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }

/* ── stat tiles ────────────────────────────────────────────────────────
   One number that IS the point. Never a one-bar chart: a bar as long as its
   own number says nothing the number did not. */
.aisa-statrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-2);
}
.aisa-stat {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--n-100); border-radius: var(--r-md);
  background: var(--n-0);
}
.aisa-stat-i { color: var(--n-400); margin-top: var(--s-05); }
.aisa-stat.tone-good .aisa-stat-i, .aisa-stat.tone-good .aisa-stat-v { color: var(--sev-opportunity-ink); }
.aisa-stat.tone-warn .aisa-stat-i, .aisa-stat.tone-warn .aisa-stat-v { color: var(--sev-high-ink); }
.aisa-stat.tone-bad  .aisa-stat-i, .aisa-stat.tone-bad  .aisa-stat-v { color: var(--sev-critical-ink); }
.aisa-stat.tone-none .aisa-stat-v { color: var(--n-400); }
.aisa-stat-b { min-width: 0; display: grid; gap: 1px; }
.aisa-stat-v {
  font-size: var(--t-xl); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--n-900); font-variant-numeric: tabular-nums;
}
.aisa-stat-v em { font-style: normal; font-size: var(--t-sm); font-weight: 600; margin-left: 1px; }
.aisa-stat-l {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-stat-n { font-size: var(--t-2xs); line-height: 1.4; color: var(--n-600); margin-top: var(--s-05); }

/* ── meter ─────────────────────────────────────────────────────────────
   One value against one limit. The threshold is a marker ON the track, so
   "how far outside" is seen rather than worked out from two numbers. */
.aisa-gauge {
  position: relative; display: block;
  height: 6px; border-radius: var(--r-full);
  background: var(--n-100); overflow: hidden;
}
.aisa-gauge-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: var(--r-full); background: var(--n-400);
}
.aisa-gauge.tone-good .aisa-gauge-fill { background: var(--sev-opportunity-soft); }
.aisa-gauge.tone-warn .aisa-gauge-fill { background: var(--sev-high-soft); }
.aisa-gauge.tone-bad  .aisa-gauge-fill { background: var(--sev-critical-soft); }
.aisa-gauge.tone-none .aisa-gauge-fill { background: var(--n-200); }
/* the marker sits above the fill and is the one hard edge in the component,
   because it is the number the fill is being judged against */
.aisa-gauge-mark {
  position: absolute; top: -1px; bottom: -1px; width: 2px;
  margin-left: -1px; background: var(--n-900); opacity: .55;
}

/* ── stack ─────────────────────────────────────────────────────────────
   Part-to-whole, ordered, every segment in the key. A pie was never in the
   running: these categories are ordered by severity and a pie destroys
   order. The 2px gap is a surface gap, not a border. */
.aisa-stack { display: grid; gap: var(--s-2); }
.aisa-stack-bar {
  display: flex; gap: 2px; height: 10px;
  border-radius: var(--r-full); overflow: hidden;
  background: var(--n-50);
}
.aisa-stack-seg { display: block; height: 100%; background: var(--n-200); }
.aisa-stack-seg.tone-bad  { background: var(--sev-critical-soft); }
.aisa-stack-seg.tone-warn { background: var(--sev-high-soft); }
.aisa-stack-seg.tone-mid  { background: var(--sev-medium-soft); }
.aisa-stack-seg.tone-good { background: var(--sev-opportunity-soft); }
.aisa-stack-key {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
}
.aisa-stack-key li { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--n-600); }
.aisa-stack-key b { font-weight: 700; color: var(--n-900); font-variant-numeric: tabular-nums; }
.aisa-stack-key span { text-transform: capitalize; }
.aisa-stack-dot { width: 8px; height: 8px; border-radius: var(--r-sm); background: var(--n-200); }
.aisa-stack-key .tone-bad  .aisa-stack-dot { background: var(--sev-critical-soft); }
.aisa-stack-key .tone-warn .aisa-stack-dot { background: var(--sev-high-soft); }
.aisa-stack-key .tone-mid  .aisa-stack-dot { background: var(--sev-medium-soft); }
.aisa-stack-key .tone-good .aisa-stack-dot { background: var(--sev-opportunity-soft); }
.aisa-stack.is-empty { font-size: var(--t-xs); color: var(--n-600); }

/* ── spans ─────────────────────────────────────────────────────────────
   Things with a start and a finish on one shared scale. The only honest way
   to show an overlap, and an overlap is most of what a planner looks for. */
/* ══ THE DRILL'S VERDICT ═══════════════════════════════════════════════
   What is wrong with this activity, before the facts about it. The page used
   to open on a row of chips and leave the planner to work out whether any of
   it mattered — which is why the detail screen read as less organised than
   the summary it was reached from. */
.aisa-drill-verdict {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); background: var(--n-50);
  font-size: var(--t-md); line-height: 1.5; color: var(--n-900);
}
.aisa-drill-verdict.tone-good { background: var(--sev-opportunity-fill); }
.aisa-drill-verdict.tone-warn { background: var(--sev-high-fill); }
.aisa-drill-verdict.tone-bad  { background: var(--sev-critical-fill); }
.aisa-drill-verdict.tone-good > svg { color: var(--sev-opportunity-ink); }
.aisa-drill-verdict.tone-warn > svg { color: var(--sev-high-ink); }
.aisa-drill-verdict.tone-bad  > svg { color: var(--sev-critical-ink); }
.aisa-drill-more { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-1); }
.aisa-drill-more li {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-sm); line-height: 1.5; color: var(--n-800);
}
.aisa-drill-more li.tone-warn > svg { color: var(--sev-high-ink); }
.aisa-drill-more li.tone-bad  > svg { color: var(--sev-critical-ink); }
.aisa-drill-more li.tone-good > svg { color: var(--sev-opportunity-ink); }

/* ══ LOGIC DENSITY ═════════════════════════════════════════════════════
   Relationships inside a package, per activity in it. The bar is scaled
   against two ties per activity — an ordinary chain with a branch in it — and
   NOT against the busiest package in this schedule, because a thin programme
   scaled against itself draws itself as healthy. */
.aisa-density { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.aisa-density-b {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 2fr) 34px minmax(0, 1.6fr);
  gap: var(--s-3); align-items: center; width: 100%;
  padding: var(--s-2) var(--s-2); border: 0; border-radius: var(--r-sm);
  background: transparent; text-align: left; cursor: pointer;
}
.aisa-density-b:hover { background: var(--n-50); }
.aisa-density-n {
  font-size: var(--t-md); color: var(--n-900); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aisa-density-bar {
  height: 8px; border-radius: var(--r-full); background: var(--n-100); overflow: hidden;
}
.aisa-density-bar i { display: block; height: 100%; background: var(--n-400); }
.aisa-density-r.tone-good .aisa-density-bar i { background: var(--sev-opportunity-soft); }
.aisa-density-r.tone-warn .aisa-density-bar i { background: var(--sev-high-soft); }
.aisa-density-r.tone-bad  .aisa-density-bar i { background: var(--sev-critical-soft); }
.aisa-density-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-xs); font-weight: 600; text-align: right; color: var(--n-800);
}
.aisa-density-m {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-2xs); color: var(--n-600); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* THE VERDICT, IN BOTH DIRECTIONS. A review that only ever says what is wrong
   stops being read, so what holds is named with the same evidence as what
   does not. */
.aisa-verdicts { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.aisa-verdict {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: 0;
  font-size: var(--t-sm); line-height: 1.55; color: var(--n-800);
}
.aisa-verdict b { color: var(--n-900); }
.aisa-verdict.tone-good > svg { color: var(--sev-opportunity-ink); }
.aisa-verdict.tone-warn > svg { color: var(--sev-high-ink); }
.aisa-verdict.tone-bad  > svg { color: var(--sev-critical-ink); }
.aisa-comp { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.aisa-comp-note { margin: 0; font-size: var(--t-2xs); color: var(--n-600); }

/* ══ THE ROUTE ═════════════════════════════════════════════════════════
   The finish-driving chain on its own time axis. Every step is as wide as the
   days it takes, so where the time goes is a shape rather than a caption. The
   chain used to be equal-width chips, which drew a hundred-day pour and a
   nought-day milestone the same size. */
.aisa-route { display: grid; gap: var(--s-2); min-width: 0; }
.aisa-route-axis {
  position: relative; height: 16px;
  border-bottom: 1px solid var(--n-100);
}
.aisa-route-tick {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-2xs); color: var(--n-600);
}
.aisa-route-tick.is-first { transform: none; }
.aisa-route-tick.is-last { transform: translateX(-100%); }

.aisa-route-band { position: relative; height: 38px; }
.aisa-route-seg {
  position: absolute; top: 0; bottom: 0;
  display: grid; align-items: center;
  padding: 0; border: 0; border-radius: var(--r-sm);
  background: var(--n-200); cursor: pointer; overflow: hidden;
  transition: filter var(--dur) ease;
}
.aisa-route-seg + .aisa-route-seg { box-shadow: -1px 0 0 var(--n-0); }
.aisa-route-seg:hover { filter: brightness(.93); }
.aisa-route-seg.tone-good { background: var(--sev-opportunity-soft); }
.aisa-route-seg.tone-warn { background: var(--sev-high-soft); }
.aisa-route-seg.tone-mid  { background: var(--sev-medium-soft); }
.aisa-route-seg.tone-bad  { background: var(--sev-critical-soft); }
.aisa-route-l {
  padding: 0 var(--s-2); font-size: var(--t-2xs); font-weight: 600;
  color: var(--n-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the divergence drawn as a distance on the same scale as the bars above it */
.aisa-route-under { position: relative; height: 40px; }
.aisa-route-bracket { position: absolute; top: 0; }
.aisa-route-bracket i {
  display: block; height: 6px;
  border: 1px solid var(--sev-high-ink); border-top: 0;
}
.aisa-route-bracket b {
  position: absolute; top: 8px; left: 0;
  font-size: var(--t-2xs); font-weight: 700; color: var(--sev-high-ink);
  white-space: nowrap;
}
/* at the end of the axis the label hangs to the LEFT of the bracket, because
   there is no page to the right of it to hang into */
.aisa-route-bracket.is-right b { left: auto; right: 0; }
.aisa-route-bracket.tone-bad i { border-color: var(--sev-critical-ink); }
.aisa-route-bracket.tone-bad b { color: var(--sev-critical-ink); }
.aisa-route-mark { position: absolute; top: -6px; }
.aisa-route-mark i { display: block; width: 1px; height: 14px; background: var(--n-400); }
.aisa-route-mark.tone-bad i { background: var(--sev-critical-ink); }

/* the marks' words, in a row underneath where they cannot land on each other */
.aisa-route-keys {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  margin: 0; font-size: var(--t-2xs); color: var(--n-600);
}
.aisa-route-key { display: inline-flex; align-items: center; gap: var(--s-1); }
.aisa-route-key i {
  width: 1px; height: 10px; background: var(--n-400); display: inline-block;
}
.aisa-route-key b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; color: var(--n-800);
}
.aisa-route-key.tone-bad i { background: var(--sev-critical-ink); }
.aisa-route-key.tone-bad b { color: var(--sev-critical-ink); }
.aisa-route-foot { margin: 0; font-size: var(--t-xs); color: var(--n-600); }

/* ── WHAT HOLDS THE DATE AFTER THE LAST POUR ────────────────────────────
   Named, with its duration and its kind. The board used to say "through two
   activities that build nothing" and stop, and a planner cannot argue a date
   with a count. */
.aisa-dl-tail { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.aisa-dl-tail-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.aisa-dl-tail-b {
  display: grid; gap: 1px; width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--n-100);
  border-radius: var(--r-sm); background: var(--n-0);
}
.aisa-dl-tail-b:hover { border-color: var(--n-400); }
.aisa-dl-tail-b b { font-size: var(--t-md); font-weight: 600; color: var(--n-900); }
.aisa-dl-tail-b span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-2xs); color: var(--n-600);
}
.aisa-dl-exc { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.aisa-dl-clean {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-3) 0 0;
  font-size: var(--t-sm); color: var(--n-600);
}
.aisa-dl-route { display: grid; gap: var(--s-2); margin-top: var(--s-3); }

.aisa-spans { display: grid; gap: var(--s-1); }
.aisa-spans-axis {
  position: relative; height: 16px; margin-left: calc(var(--span-label-w) + var(--s-2));
  border-bottom: 1px solid var(--n-100);
}
.aisa-spans-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--t-2xs); color: var(--n-600); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.aisa-spans-tick.is-last { transform: translateX(-100%); }
.aisa-spans-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-spans-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px;
  align-items: center; gap: var(--s-2);
}
.aisa-spans-l {
  font-size: var(--t-2xs); font-weight: 700; color: var(--n-800);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aisa-spans-track {
  position: relative; display: block; height: 12px;
  border-radius: var(--r-sm); background: var(--n-50);
}
.aisa-spans-bar {
  position: absolute; top: 2px; bottom: 2px;
  border-radius: var(--r-sm); background: var(--n-400);
}
.aisa-spans-bar.tone-bad  { background: var(--sev-critical-soft); }
.aisa-spans-bar.tone-warn { background: var(--sev-high-soft); }
.aisa-spans-bar.tone-good { background: var(--sev-opportunity-soft); }
.aisa-spans-bar.tone-plain { background: var(--info-soft); }
.aisa-spans-n { font-size: var(--t-2xs); color: var(--n-600); font-variant-numeric: tabular-nums; }

/* ── the coverage matrix ───────────────────────────────────────────────
   A grid of STATES, not magnitudes — so it is a heatmap in structure and a
   status palette in colour. Every cell carries a letter as well as a fill,
   which is what makes it readable in greyscale, on a printout, and under
   forced-colors. */
.aisa-mx { display: grid; gap: var(--s-1); min-width: 0; overflow-x: auto; }
.aisa-mx-head, .aisa-mx-row {
  display: grid;
  grid-template-columns: minmax(104px, 1.3fr) repeat(6, minmax(58px, 1fr));
  gap: 2px; align-items: stretch;
}
.aisa-mx-corner, .aisa-mx-rowl {
  display: flex; align-items: center;
  padding: var(--s-1) var(--s-2);
  font-size: var(--t-2xs); font-weight: 700; color: var(--n-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aisa-mx-rowl { color: var(--n-900); }
.aisa-mx-col {
  display: grid; justify-items: center; gap: 1px;
  padding: var(--s-1) var(--s-05);
  color: var(--n-600);
}
.aisa-mx-col em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.aisa-mx-body { display: grid; gap: 2px; }
.aisa-mx-cell {
  display: grid; place-content: center; gap: 0;
  min-height: 34px; padding: var(--s-1);
  border: 0; border-radius: var(--r-sm);
  background: var(--n-50); color: var(--n-400);
  font: inherit;
}
button.aisa-mx-cell { cursor: pointer; transition: filter var(--dur) var(--ease); }
button.aisa-mx-cell:hover { filter: brightness(.95); }
.aisa-mx-cell b { font-size: var(--t-sm); font-weight: 700; line-height: 1; }
.aisa-mx-cell em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 600;
  opacity: .75; font-variant-numeric: tabular-nums;
}
/* THE FIVE COVERAGE STATES. `connected` and `not_applicable` are the two that
   are not problems, and they must not look alike either: one is a tie that
   exists, the other is a question this schedule does not answer. `questionable`
   and `missing` are both red-ish and are deliberately different weights —
   logic that exists and does not connect is a defect somebody can fix in one
   edit, and logic that is absent is a decision. */
.aisa-mx-cell.st-connected      { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-mx-cell.st-indirect       { background: var(--sev-medium-fill); color: var(--sev-medium-ink); }
.aisa-mx-cell.st-questionable   { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-mx-cell.st-missing        { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-mx-cell.st-not_applicable { background: var(--n-25); color: var(--n-400); }
.aisa-mx-key {
  list-style: none; margin: var(--s-1) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  font-size: var(--t-2xs); color: var(--n-600);
}
.aisa-mx-key li { display: flex; align-items: center; gap: var(--s-2); }
.aisa-mx-sw {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: var(--r-sm);
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  background: var(--n-50); color: var(--n-400);
}
.aisa-mx-sw.st-connected      { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-mx-sw.st-indirect       { background: var(--sev-medium-fill); color: var(--sev-medium-ink); }
.aisa-mx-sw.st-questionable   { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-mx-sw.st-missing        { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-mx-sw.st-not_applicable { background: var(--n-25); color: var(--n-400); }

/* ── the ring ──────────────────────────────────────────────────────────── */
.aisa-ring-t { stroke: var(--n-100); }
.aisa-ring-v { stroke: var(--n-400); }
.tone-good .aisa-ring-v { stroke: var(--sev-opportunity-ink); }
.tone-fair .aisa-ring-v { stroke: var(--sev-high-ink); }
.tone-poor .aisa-ring-v { stroke: var(--sev-critical-ink); }

/* ── the verdict screen ────────────────────────────────────────────────── */
.aisa-twoup { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.aisa-verdictbox { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3); }
.aisa-verdict-ring { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; }
.aisa-verdict-ring .aisa-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.aisa-verdict-ring b {
  font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--n-900);
}
.aisa-verdict-n { margin: 0; font-size: var(--t-xs); line-height: 1.55; color: var(--n-600); }
.aisa-dcma-mini { display: grid; gap: var(--s-1); }
.aisa-dcma-mini .aisa-stat { padding: var(--s-2); border: 0; background: var(--n-25); }
.aisa-dcma-mini .aisa-stat-v { font-size: var(--t-lg); }

.aisa-secgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2); margin-top: var(--s-2);
}
.aisa-seccard {
  display: grid; gap: var(--s-05); align-content: start;
  padding: var(--s-3);
  border: 1px solid var(--n-100); border-left: 3px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-0); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.aisa-seccard:hover { background: var(--n-25); }
.aisa-seccard.tone-good { border-left-color: var(--sev-opportunity-ink); }
.aisa-seccard.tone-warn { border-left-color: var(--sev-high-ink); }
.aisa-seccard.tone-bad  { border-left-color: var(--sev-critical-ink); }
.aisa-seccard-i { color: var(--n-400); }
.aisa-seccard.tone-good .aisa-seccard-i { color: var(--sev-opportunity-ink); }
.aisa-seccard.tone-warn .aisa-seccard-i { color: var(--sev-high-ink); }
.aisa-seccard.tone-bad  .aisa-seccard-i { color: var(--sev-critical-ink); }
.aisa-seccard b { font-size: var(--t-md); font-weight: 700; color: var(--n-900); }
.aisa-seccard-n { font-size: var(--t-2xs); color: var(--n-600); }
.aisa-seccard em {
  font-style: normal; margin-top: var(--s-1);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--n-600);
}

/* ── boundaries and observations ───────────────────────────────────────── */
.aisa-boundaries, .aisa-obslist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-boundary {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-2);
  padding: var(--s-2); border-radius: var(--r-sm);
  font-size: var(--t-xs); background: var(--n-25);
}
.aisa-boundary-i { display: grid; place-items: center; color: var(--n-400); }
.aisa-boundary.tone-good .aisa-boundary-i { color: var(--sev-opportunity-ink); }
.aisa-boundary.tone-warn .aisa-boundary-i { color: var(--sev-high-ink); }
.aisa-boundary.tone-bad  .aisa-boundary-i { color: var(--sev-critical-ink); }
.aisa-boundary-p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; }
.aisa-boundary-p b { font-weight: 600; color: var(--n-900); }
.aisa-boundary-p i { font-style: normal; color: var(--n-400); }
.aisa-boundary-n { font-size: var(--t-2xs); color: var(--n-600); white-space: nowrap; }
.aisa-boundary.tone-bad .aisa-boundary-n { color: var(--sev-critical-ink); font-weight: 600; }
.aisa-obs {
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  align-items: start; gap: var(--s-2);
  padding: var(--s-1) 0; font-size: var(--t-sm); line-height: 1.55; color: var(--n-800);
}
.aisa-obs-i { color: var(--sev-high-ink); margin-top: 1px; }
.aisa-obs b { font-weight: 600; color: var(--n-900); }
.aisa-obs em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  padding: 0 var(--s-1); border-radius: var(--r-sm);
  background: var(--n-50); color: var(--n-600);
}
.aisa-obs-more { font-size: var(--t-xs); color: var(--n-600); padding-left: var(--s-5); }

/* ── the improvements block ────────────────────────────────────────────
   Every section ends in one of these. The visual weight is deliberate: it is
   the only part of a section a planner acts on, so it gets a surface of its
   own rather than being one more list on the page. */
.aisa-improve {
  padding: var(--s-3);
  border: 1px solid var(--n-100); border-radius: var(--r-md);
  background: var(--n-25);
}
.aisa-improve.is-empty { background: transparent; border-style: dashed; }
.aisa-improve .aisa-split-detail { background: var(--n-0); }

/* the story block finally gets the rule its class always implied */
.aisa-story { display: grid; gap: var(--s-2); }

/* ══ THE ISSUES ══════════════════════════════════════════════════════════
   One ranked list, and the rule the whole area exists to enforce: a defect
   appears exactly once, and its fix is on the same card. The severity filter
   is a bar across the top rather than a sidebar, because the list IS the page
   here and the filter is a narrowing of it, not a navigation. */
.aisa-issuebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--n-100);
}
.aisa-issuepick { margin-left: auto; }

/* the third line of a row: whether there is something to apply. A planner
   scanning this list is triaging, and "can I act on this?" is the triage. */
.aisa-frow-fix { display: block; margin-top: var(--s-05); }
.aisa-frow-fix em {
  font-style: normal; font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.aisa-frow-fix .is-fix { color: var(--sev-opportunity-ink); }
.aisa-frow-fix .is-blocked { color: var(--sev-critical-ink); }
.aisa-frow-fix .is-none { color: var(--n-400); }

/* what the schedule gets right, under the problems rather than mixed into
   them: it is worth saying and it is not work */
.aisa-strengths {
  margin-top: var(--s-3); padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--sev-opportunity-fill);
}
.aisa-strengths-h {
  margin: 0 0 var(--s-2);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sev-opportunity-ink);
}
.aisa-strengths ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-strength-b {
  width: 100%; padding: var(--s-1) 0;
  border: 0; background: none;
  font: inherit; font-size: var(--t-sm); line-height: 1.45;
  color: var(--sev-opportunity-ink); text-align: left;
}
.aisa-strength-b:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ══ THE CONTEXT TABS ════════════════════════════════════════════════════
   Three readings of the same project, not three areas of the tool. They are
   tabs inside one area for exactly that reason: the rail is for the three
   questions, and "which view of the project" is not one of them. */
.aisa-ctxtabs {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--n-100);
}
.aisa-ctxtab {
  padding: var(--s-2) var(--s-3);
  margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--n-600);
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.aisa-ctxtab:hover { color: var(--n-900); }
.aisa-ctxtab.is-on { color: var(--n-900); border-bottom-color: var(--ink); }
.aisa-view.is-context { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.aisa-view.is-context > .aisa-view { gap: var(--s-4); }

/* ══ THE SCORECARD ═══════════════════════════════════════════════════════
   The first screen, and the one a planner is most likely to screenshot and
   send to a client, so it is built as a table and not as cards: fourteen rows
   on one grid, every number in the same column, readable top to bottom in one
   pass. Cards would have put point 3 next to point 7 on a wide screen and
   destroyed the one thing a standard's order is for. */
.aisa-ctxtab, .aisa-strength-b { cursor: pointer; }
.aisa-scoreband {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5);
  padding: var(--s-3);
  border: 1px solid var(--n-100); border-radius: var(--r-md);
  background: var(--n-25);
}
.aisa-scorestat { display: flex; align-items: baseline; gap: var(--s-2); }
.aisa-scorestat b {
  font-size: var(--t-2xl); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.aisa-scorestat span { font-size: var(--t-xs); color: var(--n-600); }
.aisa-scorestat.tone-good b { color: var(--sev-opportunity-ink); }
.aisa-scorestat.tone-warn b { color: var(--sev-high-ink); }
.aisa-scorestat.tone-none b { color: var(--n-400); }
.aisa-scoreband-note {
  flex: 1 1 260px; margin: 0;
  font-size: var(--t-xs); line-height: 1.55; color: var(--n-600);
}

.aisa-dcma { list-style: none; margin: 0; padding: 0; }
.aisa-dcma-row { border-bottom: 1px solid var(--n-100); }
.aisa-dcma-row:first-child { border-top: 1px solid var(--n-100); }
/* THE GRID IS DECLARED ONCE, ON THE ROW BUTTON, so every column lines up down
   all fourteen rows. The number, the name, what was measured, what it was
   measured against, and the verdict — in the order the sentence is read. */
.aisa-dcma-b {
  display: grid;
  grid-template-columns: var(--dcma-no-w) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 0.8fr) 104px;
  align-items: center; gap: var(--s-3);
  width: 100%; padding: var(--s-2) var(--s-2);
  border: 0; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.aisa-dcma-b:hover { background: var(--n-25); }
.aisa-dcma-row.is-open .aisa-dcma-b { background: var(--n-50); }
.aisa-dcma-no {
  font-size: var(--t-2xs); font-weight: 700; color: var(--n-400);
  font-variant-numeric: tabular-nums; text-align: right;
}
.aisa-dcma-name { font-size: var(--t-md); font-weight: 600; color: var(--n-900); }
.aisa-dcma-val {
  font-size: var(--t-sm); font-weight: 600; color: var(--n-900);
  font-variant-numeric: tabular-nums;
}
.aisa-dcma-gauge { display: block; min-width: 0; }
.aisa-dcma-target { font-size: var(--t-xs); color: var(--n-600); }
.aisa-dcma-st {
  justify-self: end;
  padding: var(--s-05) var(--s-2); border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.aisa-dcma-row.st-good .aisa-dcma-st { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-dcma-row.st-warn .aisa-dcma-st { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-dcma-row.st-bad  .aisa-dcma-st { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-dcma-row.st-none .aisa-dcma-st { background: var(--n-50); color: var(--n-600); }
/* A point this schedule cannot answer is quieter than one that passed, and
   still unmistakably present: dropping it would let the reader assume it
   passed, and drawing it at full strength would let them read it as a result. */
.aisa-dcma-row.st-none .aisa-dcma-name { color: var(--n-600); font-weight: 500; }
.aisa-dcma-row.st-none .aisa-dcma-val { color: var(--n-400); }
.aisa-dcma-open {
  display: grid; gap: var(--s-2);
  padding: 0 var(--s-2) var(--s-3) calc(var(--dcma-no-w) + var(--s-3) + var(--s-2));
}
.aisa-dcma-q { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--n-900); max-width: 84ch; }
.aisa-dcma-m { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--n-800); max-width: 84ch; }

/* ── THE BRIDGE ────────────────────────────────────────────────────────
   The measured half pointing at the reviewed half, and back. These two
   halves were about the same activities and never said so. */
.aisa-dcma-link { margin: 0; font-size: var(--t-xs); color: var(--n-600); }
.aisa-dcma-link.is-none { max-width: 84ch; line-height: 1.55; }
.aisa-dcma-link b {
  display: block; margin-bottom: var(--s-1);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-dcma-link ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-dcma-link .aisa-link { display: flex; align-items: center; gap: var(--s-2); text-align: left; }
.aisa-dcma-link .aisa-dotsev { flex: 0 0 auto; }

.aisa-issuepoints {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  margin-top: var(--s-2);
}
.aisa-issuepoints b {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-pointchip {
  padding: var(--s-05) var(--s-2);
  border: 1px solid var(--sev-high-line); border-radius: var(--r-full);
  background: var(--sev-high-fill); color: var(--sev-high-ink);
  font: inherit; font-size: var(--t-2xs); font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.aisa-pointchip:hover { background: var(--sev-high-line); }

@media (max-width: 1120px) {
  /* the target column is the first thing to go: it is repeated in the row's
     own explanation when the row is opened */
  .aisa-dcma-b { grid-template-columns: var(--dcma-no-w) minmax(0, 1.4fr) minmax(0, 1fr) 92px; gap: var(--s-2); }
  .aisa-dcma-target, .aisa-dcma-gauge { display: none; }
}
@media (max-width: 720px) {
  .aisa-dcma-b { grid-template-columns: var(--dcma-no-w) minmax(0, 1fr) auto; row-gap: var(--s-05); }
  .aisa-dcma-gauge { display: none; }
  .aisa-dcma-val { grid-column: 2; font-size: var(--t-xs); color: var(--n-600); }
  .aisa-dcma-st { grid-row: 1; grid-column: 3; }
  .aisa-dcma-open { padding-left: calc(var(--dcma-no-w) + var(--s-2)); }
}

/* ── the measured half ─────────────────────────────────────────────────
   Deliberately drawn differently from the reviewer's tiles above: flatter,
   quieter, with a row of pips per group. A planner should be able to see at
   a glance which half of this panel is arithmetic. */
.aisa-chkgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-2);
}
.aisa-chktile {
  display: grid; gap: var(--s-1); align-content: start; padding: var(--s-2) var(--s-3);
  text-align: left; cursor: pointer; border: 1px solid var(--n-100);
  background: var(--n-0); border-radius: var(--r-sm);
}
.aisa-chktile:hover { background: var(--n-25); }
.aisa-chktile-h { font-size: var(--t-sm); font-weight: 600; color: var(--n-900); }
.aisa-chktile-s { font-size: var(--t-2xs); line-height: 1.4; color: var(--n-600); }
.aisa-chktile-p { display: flex; align-items: center; gap: var(--s-05) var(--s-2); flex-wrap: wrap; margin-top: auto; }
.aisa-chktile-n { font-style: normal; font-size: var(--t-2xs); font-weight: 600; color: var(--n-600); }
.aisa-chktile.st-warn .aisa-chktile-n { color: var(--sev-high-ink); }
.aisa-chktile.st-bad .aisa-chktile-n { color: var(--sev-critical-ink); }
.aisa-chktile.is-on { background: var(--n-50); border-color: var(--n-200); }
.aisa-pip { width: 10px; height: 4px; border-radius: var(--r-sm); background: var(--n-200); }
.aisa-pip.st-pass { background: var(--sev-opportunity-soft); }
.aisa-pip.st-attention { background: var(--sev-high-soft); }
.aisa-pip.st-fail { background: var(--sev-critical-soft); }
.aisa-pip.st-not_applicable { background: var(--n-200); }

.aisa-chkopen { margin-top: var(--s-3); }
.aisa-chklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.aisa-chk {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: var(--n-50); border-left: 3px solid var(--n-200);
}
.aisa-chk.st-attention { background: var(--sev-high-fill); border-left-color: var(--sev-high-soft); }
.aisa-chk.st-fail { background: var(--sev-critical-fill); border-left-color: var(--sev-critical-soft); }
.aisa-chk.st-pass { border-left-color: var(--sev-opportunity-soft); }
.aisa-chk-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.aisa-chk-h b { font-size: var(--t-md); color: var(--n-900); }
.aisa-chk-st {
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--n-600);
}
.aisa-chk-q { margin: var(--s-05) 0 0; font-size: var(--t-xs); color: var(--n-600); font-style: italic; }
.aisa-chk-m { margin: var(--s-1) 0 0; font-size: var(--t-sm); color: var(--n-900); }
.aisa-chk-t { margin: var(--s-1) 0 0; font-size: var(--t-xs); color: var(--n-600); }

/* ── evidence chips, named ─────────────────────────────────────────────
   The name is the chip. The id rides underneath it in the smallest step on
   the scale, because a planner checking against P6 needs it and nobody
   reads by it. */
.aisa-chip-n { display: block; color: var(--n-900); }
.aisa-chip-id { display: block; font-size: var(--t-2xs); color: var(--n-600); font-style: normal; }

/* ── the package network ───────────────────────────────────────────────
   An arc diagram: packages on a baseline in execution order, one arc per
   package-to-package dependency, thickness = how many relationships tie
   the pair. Backwards logic drops below the line where it can be seen. */
.aisa-netwrap { overflow-x: auto; padding-bottom: var(--s-2); }
.aisa-net { display: block; max-width: none; }
.aisa-nbase { stroke: var(--n-200); stroke-width: 1; }
.aisa-narc { fill: none; stroke: var(--info-soft); opacity: .8; }
.aisa-narc.is-crit { stroke: var(--sev-critical-soft); }
.aisa-narc.is-back { stroke: var(--sev-high-soft); stroke-dasharray: 4 3; }
.aisa-nnode { cursor: pointer; }
.aisa-nnode rect { fill: var(--n-0); stroke: var(--n-200); stroke-width: 1; }
.aisa-nnode:hover rect { fill: var(--n-50); stroke: var(--n-400); }
.aisa-nnode.is-orphan rect { stroke: var(--sev-critical-ink); stroke-width: 1.5; }
.aisa-nname { fill: var(--n-900); font-size: var(--t-xs); text-anchor: middle; }
.aisa-nmeta { fill: var(--n-600); font-size: var(--t-2xs); text-anchor: middle; }
.aisa-nseq { fill: var(--n-600); font-size: var(--t-2xs); text-anchor: middle; }
.aisa-nbadge { fill: var(--sev-critical-ink); }
.aisa-nbadge-t { fill: var(--n-0); font-size: var(--t-2xs); text-anchor: middle; }
.aisa-netlegend {
  list-style: none; margin: var(--s-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--t-2xs); color: var(--n-600);
}
.aisa-netlegend li { display: flex; align-items: center; gap: var(--s-1); }
.aisa-netlegend li::before {
  content: ''; width: 14px; height: 2px; border-radius: var(--r-sm); background: var(--info-soft);
}
.aisa-netlegend li.lg-back::before { background: var(--sev-high-soft); }
.aisa-netlegend li.lg-crit::before { background: var(--sev-critical-soft); }
.aisa-netlegend li.lg-orph::before { background: var(--sev-critical-ink); }

/* ── a list of activities, name first ─────────────────────────────────── */
.aisa-actlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-actrow {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm);
  background: var(--n-0); border-left: 3px solid transparent;
}
.aisa-actrow:hover { background: var(--n-50); }
.aisa-actrow.is-crit { border-left-color: var(--sev-critical-soft); }
/* ALL THREE CELLS ARE PLACED, none left to auto-placement. The flags carried
   a definite row and no column, and grid places definite-row items BEFORE
   auto-positioned ones — so the flags took column 1 and threw the activity's
   name to the right-hand edge with its own id underneath on the left. It read
   as two unrelated columns. */
.aisa-actrow-n { grid-column: 1; grid-row: 1; font-size: var(--t-md); color: var(--n-900); }
.aisa-actrow-m { grid-column: 1; grid-row: 2; font-size: var(--t-xs); color: var(--n-600); }
.aisa-actrow-f {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; gap: var(--s-1); align-items: center; justify-content: flex-end;
}
.aisa-flag {
  font-size: var(--t-2xs); font-style: normal; text-transform: uppercase; letter-spacing: .04em;
  padding: 0 var(--s-1); border-radius: var(--r-sm);
  background: var(--n-50); color: var(--n-600);
}
.aisa-flag.is-open { background: var(--sev-high-fill); color: var(--sev-high-ink); }

/* ── the drill-down ────────────────────────────────────────────────────
   The trail is a stack: package → activity → relationship → activity is an
   ordinary path through a review, and Back goes one step. */
.aisa-trail {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1);
  padding-bottom: var(--s-2); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--n-100);
  font-size: var(--t-xs);
}
.aisa-trail-here { color: var(--n-900); font-size: var(--t-xs); }
.aisa-trail-sep { color: var(--n-400); font-style: normal; }
.aisa-drillhead { padding-bottom: var(--s-2); }
/* THE BREADCRUMB THAT MAKES AN ACTIVITY A PIECE OF WORK.
   Above the name, always, because an activity read without its package is a
   row and read under it is a scope somebody owns. */
.aisa-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1);
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--n-600); margin-bottom: var(--s-1);
}
.aisa-path i { color: var(--n-400); font-style: normal; }
.aisa-zoom-nav {
  display: flex; align-items: center; gap: var(--s-3);
  justify-content: space-between; margin-bottom: var(--s-2);
}

/* the name of the thing you opened IS the lead on a drill-down, and it was
   set one step above the body text while the meta chips beside it ran at 11px */
.aisa-drill-h {
  margin: 0 0 var(--s-2);
  font-size: var(--t-3xl); font-weight: 600; line-height: 1.24;
  letter-spacing: -.015em; color: var(--n-900);
}
.aisa-drill-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--n-600);
}
.aisa-drill-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

.aisa-logic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.aisa-logic-col { min-width: 0; }
.aisa-edges { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-edge { display: grid; grid-template-columns: 1fr auto; align-items: stretch; }
.aisa-edge-b {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: var(--s-2);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-sm); background: var(--n-0);
}
.aisa-edge-b:hover { background: var(--n-50); }
.aisa-edge.is-driving .aisa-edge-b { background: var(--info-fill); }
.aisa-edge-rel {
  font-size: var(--t-2xs); color: var(--n-800); text-align: center;
  background: var(--n-50); border-radius: var(--r-sm); padding: var(--s-05) 0;
}
.aisa-edge-main { min-width: 0; }
.aisa-edge-n { display: block; font-size: var(--t-sm); color: var(--n-900); }
.aisa-edge-m { display: block; font-size: var(--t-2xs); color: var(--n-600); }
.aisa-edge-tag {
  font-size: var(--t-2xs); font-style: normal; text-transform: uppercase; letter-spacing: .04em;
  color: var(--info-ink);
}
.aisa-edge-rel-open {
  cursor: pointer; border: 0; background: transparent;
  font-size: var(--t-2xs); color: var(--n-600); padding: 0 var(--s-1);
}
.aisa-edge-rel-open:hover { color: var(--info-ink); }

/* the two traces: backwards through what is holding it, forwards through
   what it releases. A chain read as a list is a set; numbered, it is a path. */
.aisa-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-05); }
.aisa-chain-b {
  display: grid; grid-template-columns: 46px 1fr; gap: var(--s-2); align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-sm);
  background: var(--n-0); border-left: 2px solid var(--n-200);
}
.aisa-chain-b:hover { background: var(--n-50); }
.aisa-chain-rel {
  font-size: var(--t-2xs); color: var(--n-800); text-align: center;
  background: var(--n-50); border-radius: var(--r-sm); padding: var(--s-05) 0;
}
.aisa-chain-n { display: block; font-size: var(--t-sm); color: var(--n-900); }
.aisa-chain-m { display: block; font-size: var(--t-2xs); color: var(--n-600); }

.aisa-relpair { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; }
.aisa-relend { min-width: 0; }
.aisa-relend-r {
  display: block; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--n-600); margin-bottom: var(--s-1);
}
.aisa-relend-b {
  display: grid; gap: var(--s-05); width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-md); background: var(--n-50);
}
.aisa-relend-b:hover { background: var(--n-100); }
.aisa-relend-b b { font-size: var(--t-md); color: var(--n-900); }
.aisa-relend-b span { font-size: var(--t-2xs); color: var(--n-600); }
.aisa-relarrow { display: grid; justify-items: center; gap: var(--s-05); }
.aisa-relarrow i { display: block; width: 40px; height: 2px; background: var(--n-400); }
.aisa-relarrow em { font-size: var(--t-2xs); font-style: normal; color: var(--n-800); }

/* where a judgement and a measurement agree, said by the application */
.aisa-corrob {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm); background: var(--info-fill);
  font-size: var(--t-2xs); color: var(--info-ink);
}
.aisa-corrob b { text-transform: uppercase; letter-spacing: .04em; }
/* two checks corroborating one finding ran together as one sentence; a rule
   between them is cheaper than a separator character and does not wrap badly */
.aisa-corrob span + span {
  padding-left: var(--s-2); border-left: 1px solid var(--info-line);
}

.aisa-fd-subject { margin: var(--s-1) 0 0; display: grid; gap: var(--s-05); }
.aisa-fd-subject em { font-size: var(--t-2xs); color: var(--n-600); font-style: normal; }

/* the rail's one-line explanation of each area, on its own line under the
   name so it has the whole width and never wraps into a column */
.aisa-rail-btn small {
  grid-column: 1 / -1;
  display: block; margin-top: 1px;
  font-size: var(--t-2xs); font-weight: 500; line-height: 1.35; color: var(--n-600);
}
.aisa-rail-btn.is-on small { color: var(--n-200); }

/* ── NARROW, BUT NOT A PHONE ───────────────────────────────────────
   A laptop at half a screen, or a 1024 tablet. The card fills the width, so
   the split view had a 340px list and whatever was left — around 300px — for
   the detail, which is where the reviewer's reasoning, the change diagram and
   the impact all live. Everything in that pane wrapped to four lines. Below
   this width the two panes stack instead: the list first, the change under
   it, both at the full width of the card. */
@media (max-width: 1120px) {
  .aisa-view.is-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .aisa-split-list { max-height: 40vh; overflow-y: auto; }
  .aisa-ws { grid-template-columns: 164px minmax(0, 1fr); }
  .aisa-rail-btn small { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   THE SIX SECTIONS — the components the rebuilt information architecture
   added. Everything here resolves through the tokens at the top of this
   file; nothing here declares a colour, a size, a radius or a spacing step
   of its own, which is the rule tools/test-advisor-design-system.js
   enforces and the reason this panel lines up at all.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the rail's section numbers ─────────────────────────────────────────
   Six sections need an order stated, not implied: a planner who has read 04
   should be able to see that 05 comes next without counting rows. */
.aisa-rail-no {
  font-size: var(--t-2xs); font-weight: 700; font-style: normal;
  letter-spacing: .04em; color: var(--n-400);
  font-variant-numeric: tabular-nums;
}
.aisa-rail-btn.is-on .aisa-rail-no { color: var(--n-0); opacity: .7; }

/* ── SPINE ──────────────────────────────────────────────────────────────
   A chain whose JOINTS are drawn. The connector is a real element with its
   own state, because "where does this break" is a question about a joint and
   a thinner arrow does not answer it. */
.aisa-spine {
  display: flex; align-items: stretch; gap: 0;
  padding: var(--s-2) 0;
}
.aisa-spine-n {
  flex: 0 0 auto; min-width: 0; max-width: 200px;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--n-100); border-radius: var(--r-md);
  background: var(--n-0); text-align: left;
}
button.aisa-spine-n { cursor: pointer; transition: border-color var(--dur) var(--ease); }
button.aisa-spine-n:hover { border-color: var(--n-400); }
.aisa-spine-s {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; line-height: 1;
}
/* "PRE · Initiation/Pre-Const…" was a hard cut with nowhere to go. Two lines
   and then a clamp, with the full name on the node's title and one click into
   the package itself — the design system's rule is an expand, not an ellipsis
   into nothing. */
.aisa-spine-l {
  font-size: var(--t-sm); font-weight: 600; color: var(--n-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-width: 0;
}
.aisa-spine-m {
  grid-column: 2; font-size: var(--t-2xs); color: var(--n-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aisa-spine-c {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
}
.aisa-spine-n.st-good      { border-color: var(--sev-opportunity-line); }
.aisa-spine-n.st-good      .aisa-spine-s { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-spine-n.st-attention { border-color: var(--sev-high-line); }
.aisa-spine-n.st-attention .aisa-spine-s { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-spine-n.st-broken    { border-color: var(--sev-critical-line); }
.aisa-spine-n.st-broken    .aisa-spine-s { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-spine-n.st-missing   { border-color: var(--sev-critical-line); border-style: dashed; }
.aisa-spine-n.st-missing   .aisa-spine-s { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-spine-n.st-plain     .aisa-spine-s { background: var(--n-50); color: var(--n-600); }

/* THE JOINT. Its own element, 28px of it, carrying the state of the handover
   INTO the node that follows — and a missing joint is drawn as a gap in the
   line rather than as a line of a different colour, because a break in a
   sequence should read as a break. */
.aisa-spine-j {
  flex: 0 0 28px; position: relative;
  display: grid; place-items: center;
}
.aisa-spine-j i {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--n-200);
}
.aisa-spine-j b {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 700; line-height: 1;
  background: var(--n-0); color: var(--n-400);
}
.aisa-spine-j.jt-good i { background: var(--sev-opportunity-soft); }
.aisa-spine-j.jt-good b { color: var(--sev-opportunity-ink); }
.aisa-spine-j.jt-attention i { background: var(--sev-high-soft); }
.aisa-spine-j.jt-attention b { color: var(--sev-high-ink); }
.aisa-spine-j.jt-broken i { background: var(--sev-critical-soft); }
.aisa-spine-j.jt-broken b { color: var(--sev-critical-ink); }
.aisa-spine-j.jt-missing i {
  background: transparent;
  border-top: 2px dashed var(--sev-critical-soft); height: 0;
}
.aisa-spine-j.jt-missing b { color: var(--sev-critical-ink); }
.aisa-spine-key {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin: var(--s-1) 0 0; padding: 0; list-style: none;
  font-size: var(--t-2xs); color: var(--n-600);
}
.aisa-spine-key li { display: flex; align-items: center; gap: var(--s-1); }
.aisa-spine-key i {
  display: grid; place-items: center;
  width: 14px; height: 14px; border-radius: var(--r-full);
  font-style: normal; font-weight: 700;
}
.aisa-spine-key .st-good i      { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-spine-key .st-attention i { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-spine-key .st-broken i,
.aisa-spine-key .st-missing i   { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }

/* ── THE PROJECT MAP ───────────────────────────────────────────────────── */
.aisa-pm { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) 0; }
.aisa-pm-col { flex: 0 0 200px; display: grid; gap: var(--s-2); }
.aisa-pm-node {
  display: grid; gap: 2px; width: 100%;
  padding: var(--s-2) var(--s-3); text-align: left; cursor: pointer;
  border: 1px solid var(--n-100); border-left-width: 3px; border-radius: var(--r-md);
  background: var(--n-0);
  transition: border-color var(--dur) var(--ease);
}
.aisa-pm-node:hover { border-color: var(--n-400); }
.aisa-pm-node b {
  font-size: var(--t-sm); font-weight: 600; color: var(--n-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aisa-pm-node.d-1 { border-left-width: 1px; background: var(--n-25); }
.aisa-pm-node.d-1 b { font-size: var(--t-xs); font-weight: 500; }
.aisa-pm-m, .aisa-pm-mix { font-size: var(--t-2xs); color: var(--n-600); }
.aisa-pm-mix { color: var(--info-ink); }
.aisa-pm-flag {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-2xs); color: var(--sev-critical-ink);
}
.aisa-pm-node.tone-plain { border-left-color: var(--n-200); }
.aisa-pm-node.tone-warn  { border-left-color: var(--sev-high-soft); }
.aisa-pm-node.tone-bad   { border-left-color: var(--sev-critical-soft); }
.aisa-pm-kids { display: grid; gap: 2px; padding-left: var(--s-2); }
.aisa-pm-more, .aisa-pm-leaf {
  font-size: var(--t-2xs); color: var(--n-600); padding: var(--s-1) var(--s-2);
}
.aisa-pm-ms {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--n-100);
}
.aisa-pm-cap {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-chip.is-ms { background: var(--info-fill); border-color: var(--info-line); color: var(--info-ink); }
.aisa-chip.is-ms em { font-style: normal; font-weight: 700; margin-left: var(--s-1); }
.aisa-chip.is-work { background: var(--n-50); }
.aisa-chip.is-finding { max-width: 100%; }
.aisa-chip.is-unreported { border-style: dashed; color: var(--n-600); }

/* ── DRIVING LOGIC ─────────────────────────────────────────────────────── */
.aisa-driving { display: grid; gap: var(--s-3); }
.aisa-dl-head {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--n-100); border-left-width: 3px;
  background: var(--n-25);
}
.aisa-dl-head.tone-good { border-left-color: var(--sev-opportunity-soft); }
.aisa-dl-head.tone-mid  { border-left-color: var(--sev-medium-soft); }
.aisa-dl-head.tone-warn { border-left-color: var(--sev-high-soft); }
.aisa-dl-head.tone-bad  { border-left-color: var(--sev-critical-soft); }
.aisa-dl-kind { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; }
.aisa-dl-kind b { display: block; font-size: var(--t-md); font-weight: 700; color: var(--n-900); }
.aisa-dl-kind span { display: block; font-size: var(--t-sm); color: var(--n-800); }
.aisa-dl-i { flex: 0 0 auto; display: grid; place-items: center; }
.aisa-dl-head.tone-good .aisa-dl-i { color: var(--sev-opportunity-ink); }
.aisa-dl-head.tone-mid .aisa-dl-i  { color: var(--sev-medium-ink); }
.aisa-dl-head.tone-warn .aisa-dl-i { color: var(--sev-high-ink); }
.aisa-dl-head.tone-bad .aisa-dl-i  { color: var(--sev-critical-ink); }
.aisa-dl-driver { display: grid; gap: var(--s-1); justify-items: start; min-width: 0; }
.aisa-dl-cap {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n-600);
}
.aisa-dl-act {
  display: grid; gap: 2px; text-align: left; cursor: pointer; max-width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--n-100); border-radius: var(--r-md); background: var(--n-0);
}
.aisa-dl-act:hover { border-color: var(--aisa-accent); }
.aisa-dl-act b {
  font-size: var(--t-sm); font-weight: 600; color: var(--n-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aisa-dl-act em { font-style: normal; font-size: var(--t-2xs); color: var(--n-600); }
.aisa-dl-src { font-size: var(--t-2xs); color: var(--n-600); font-style: italic; }
/* SCHEDULE DRIVER vs PHYSICAL DRIVER, side by side with the gap between them
   as the middle column — the shape of the sentence the section is making. */
.aisa-dl-split {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3);
  align-items: center;
}
.aisa-dl-cell { display: grid; gap: var(--s-1); min-width: 0; }
.aisa-dl-gap {
  display: grid; gap: var(--s-1); justify-items: center; text-align: center;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
}
.aisa-dl-gap b { font-size: var(--t-xl); font-weight: 700; line-height: 1; }
.aisa-dl-gap b em { display: block; font-style: normal; font-size: var(--t-2xs); font-weight: 600; }
.aisa-dl-gap span { font-size: var(--t-2xs); max-width: 200px; }
.aisa-dl-gap.tone-warn { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-dl-gap.tone-bad  { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-dl-same {
  display: flex; align-items: center; gap: var(--s-2); margin: 0;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  font-size: var(--t-sm);
  background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink);
}
.aisa-dl-spine { min-width: 0; }
.aisa-dl-comp { display: grid; gap: var(--s-2); }
.aisa-dl-note { margin: 0; font-size: var(--t-sm); color: var(--n-800); }
.aisa-dl-said, .aisa-dl-unsaid {
  display: grid; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-md); background: var(--n-50);
}
.aisa-dl-unsaid {
  display: flex; align-items: center; gap: var(--s-2); margin: 0;
  font-size: var(--t-sm); color: var(--n-600);
}
.aisa-dl-said p { margin: 0; font-size: var(--t-sm); color: var(--n-800); }
.aisa-dl-flag { display: flex; align-items: center; gap: var(--s-2); color: var(--sev-high-ink); }
.aisa-dl-read { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.aisa-dl-read li {
  display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: var(--s-2);
  align-items: baseline; font-size: var(--t-xs); color: var(--n-800);
}

/* ── WORK FRONTS ───────────────────────────────────────────────────────── */
.aisa-fronts { display: grid; gap: var(--s-1); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.aisa-front { border: 1px solid var(--n-100); border-left-width: 3px; border-radius: var(--r-md); }
.aisa-front.tone-good { border-left-color: var(--sev-opportunity-soft); }
.aisa-front.tone-warn { border-left-color: var(--sev-high-soft); }
.aisa-front.tone-bad  { border-left-color: var(--sev-critical-soft); }
.aisa-front-h {
  display: grid; grid-template-columns: 24px minmax(0, 200px) 1fr auto;
  align-items: center; gap: var(--s-2); width: 100%;
  padding: var(--s-2) var(--s-3); text-align: left; cursor: pointer;
  background: transparent;
}
.aisa-front-h:hover { background: var(--n-25); }
.aisa-front-n {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--r-full); background: var(--n-50);
  font-size: var(--t-2xs); font-weight: 700; color: var(--n-600);
  font-variant-numeric: tabular-nums;
}
.aisa-front-h b {
  font-size: var(--t-sm); font-weight: 600; color: var(--n-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aisa-front-m { font-size: var(--t-2xs); color: var(--n-600); }
.aisa-front.tone-good .aisa-front-t { color: var(--sev-opportunity-ink); }
.aisa-front.tone-warn .aisa-front-t { color: var(--sev-high-ink); }
.aisa-front.tone-bad .aisa-front-t  { color: var(--sev-critical-ink); }
.aisa-front-b {
  display: grid; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-3) var(--s-5);
  background: var(--n-25);
}
.aisa-front-b p { margin: 0; font-size: var(--t-sm); color: var(--n-800); }

/* ── THE OPENED COVERAGE CELL ──────────────────────────────────────────── */
.aisa-cov-cell {
  display: grid; gap: var(--s-2);
  margin-top: var(--s-3); padding: var(--s-3);
  border: 1px solid var(--n-100); border-left-width: 3px; border-radius: var(--r-md);
}
.aisa-cov-cell.st-connected      { border-left-color: var(--sev-opportunity-soft); }
.aisa-cov-cell.st-indirect       { border-left-color: var(--sev-medium-soft); }
.aisa-cov-cell.st-questionable   { border-left-color: var(--sev-high-soft); }
.aisa-cov-cell.st-missing        { border-left-color: var(--sev-critical-soft); }
.aisa-cov-cell.st-not_applicable { border-left-color: var(--n-200); }
.aisa-cov-cell p { margin: 0; font-size: var(--t-sm); color: var(--n-800); }
.aisa-cov-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.aisa-cov-h b { font-size: var(--t-md); font-weight: 700; color: var(--n-900); }
.aisa-cov-h > .aisa-x { margin-left: auto; }
.aisa-tag.st-connected      { background: var(--sev-opportunity-fill); color: var(--sev-opportunity-ink); }
.aisa-tag.st-indirect       { background: var(--sev-medium-fill); color: var(--sev-medium-ink); }
.aisa-tag.st-questionable   { background: var(--sev-high-fill); color: var(--sev-high-ink); }
.aisa-tag.st-missing        { background: var(--sev-critical-fill); color: var(--sev-critical-ink); }
.aisa-tag.st-not_applicable { background: var(--n-50); color: var(--n-600); }

/* ── COVERAGE, PER FUNCTION ────────────────────────────────────────────── */
.aisa-covfn { display: grid; gap: var(--s-1); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.aisa-covfn-r {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2);
  align-items: start; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); background: var(--n-25);
}
.aisa-covfn-i { display: grid; place-items: center; }
.aisa-covfn-r.tone-good .aisa-covfn-i { color: var(--sev-opportunity-ink); }
.aisa-covfn-r.tone-warn .aisa-covfn-i { color: var(--sev-high-ink); }
.aisa-covfn-r.tone-bad .aisa-covfn-i  { color: var(--sev-critical-ink); }
.aisa-covfn-r.tone-none .aisa-covfn-i { color: var(--n-400); }
.aisa-covfn-b { display: grid; gap: 2px; min-width: 0; }
.aisa-covfn-b b { font-size: var(--t-sm); font-weight: 600; color: var(--n-900); }
.aisa-covfn-m { font-size: var(--t-2xs); color: var(--n-600); }
/* the reviewer's verdict, marked as a different KIND of statement from the
   measurement above it — an opinion sitting next to arithmetic has to say so */
.aisa-covfn-said { font-size: var(--t-xs); color: var(--n-800); }
.aisa-covfn-said em {
  font-style: normal; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: var(--t-2xs); margin-right: var(--s-2);
}
.aisa-covfn-said.tone-good em { color: var(--sev-opportunity-ink); }
.aisa-covfn-said.tone-warn em { color: var(--sev-high-ink); }
.aisa-covfn-said.tone-bad em  { color: var(--sev-critical-ink); }
.aisa-covfn-said.tone-none    { color: var(--n-600); }
.aisa-covfn-said.tone-none em { color: var(--n-400); }

/* ── THE REVIEW LANES ──────────────────────────────────────────────────── */
.aisa-lanes { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.aisa-lane { border: 1px solid var(--n-100); border-left-width: 3px; border-radius: var(--r-md); }
.aisa-lane.tone-good { border-left-color: var(--sev-opportunity-soft); }
.aisa-lane.tone-warn { border-left-color: var(--sev-high-soft); }
.aisa-lane.tone-bad  { border-left-color: var(--sev-critical-soft); }
.aisa-lane.tone-mid  { border-left-color: var(--sev-medium-soft); }
.aisa-lane.is-empty { opacity: .55; }
.aisa-lane-h {
  display: grid; grid-template-columns: 20px minmax(0, auto) auto 1fr;
  align-items: center; gap: var(--s-2); width: 100%;
  padding: var(--s-2) var(--s-3); text-align: left; cursor: pointer;
  background: transparent;
}
.aisa-lane-h:disabled { cursor: default; }
.aisa-lane-h:hover:not(:disabled) { background: var(--n-25); }
.aisa-lane-i { display: grid; place-items: center; }
.aisa-lane.tone-good .aisa-lane-i { color: var(--sev-opportunity-ink); }
.aisa-lane.tone-warn .aisa-lane-i { color: var(--sev-high-ink); }
.aisa-lane.tone-bad .aisa-lane-i  { color: var(--sev-critical-ink); }
.aisa-lane.tone-mid .aisa-lane-i  { color: var(--sev-medium-ink); }
.aisa-lane-h b { font-size: var(--t-md); font-weight: 700; color: var(--n-900); }
.aisa-lane-h em {
  font-style: normal; font-weight: 700; font-size: var(--t-xs);
  padding: 0 var(--s-2); border-radius: var(--r-full);
  background: var(--n-50); color: var(--n-800);
  font-variant-numeric: tabular-nums;
}
.aisa-lane-h small { font-size: var(--t-2xs); color: var(--n-600); }
.aisa-lane-b {
  display: grid; gap: var(--s-2); margin: 0;
  padding: var(--s-2) var(--s-3) var(--s-3); list-style: none;
  background: var(--n-25);
}
.aisa-lane-b > li { display: grid; gap: var(--s-1); }
.aisa-lane-sec {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--n-100); border-radius: var(--r-md); background: var(--n-0);
}
.aisa-lane-sec:hover { border-color: var(--n-400); }
.aisa-lane-sec b { font-size: var(--t-sm); font-weight: 600; color: var(--n-900); }
.aisa-lane-sec span { font-size: var(--t-xs); color: var(--n-600); }
.aisa-lane-f { display: flex; flex-wrap: wrap; gap: var(--s-1); padding-left: var(--s-3); }
.aisa-unreported {
  display: grid; gap: var(--s-2); margin-top: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md); background: var(--n-50);
}
.aisa-unreported-h {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--n-800);
}

/* ══ LEDGER ════════════════════════════════════════════════════════════
   The one list in this panel. A filter bar that IS the summary, grouped
   rows, and a control that reaches the rest — replacing eight rows and a
   dead "+52 more".
   ══════════════════════════════════════════════════════════════════════ */
.aisa-lg { display: grid; gap: var(--s-2); }
.aisa-lg-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  padding-bottom: var(--s-1);
}
.aisa-lg-pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  /* 32px tall plus the gap keeps the row inside the 44px touch target the
     design system requires without making a filter bar look like a toolbar */
  min-height: 32px; padding: var(--s-1) var(--s-2);
  border: 1px solid var(--n-100); border-radius: var(--r-full);
  background: var(--n-0); color: var(--n-800);
  font-size: var(--t-xs); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.aisa-lg-pill:hover { border-color: var(--n-400); background: var(--n-25); }
.aisa-lg-pill em {
  font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0 var(--s-1); border-radius: var(--r-full);
  background: var(--n-50); color: var(--n-600);
}
.aisa-lg-pill.is-on { background: var(--ink); border-color: var(--ink); color: var(--n-0); }
.aisa-lg-pill.is-on em { background: rgba(255, 255, 255, .2); color: var(--n-0); }
.aisa-lg-pill.tone-warn { border-color: var(--sev-high-line); color: var(--sev-high-ink); }
.aisa-lg-pill.tone-bad  { border-color: var(--sev-critical-line); color: var(--sev-critical-ink); }
.aisa-lg-pill.tone-mid  { border-color: var(--sev-medium-line); color: var(--sev-medium-ink); }
.aisa-lg-group { display: grid; gap: var(--s-1); }
.aisa-lg-gh {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) 0 var(--s-1);
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--n-600);
}
.aisa-lg-gh b { font-size: var(--t-sm); letter-spacing: 0; text-transform: none; color: var(--n-900); }
.aisa-lg-gh em {
  font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--n-800);
}
.aisa-lg-gh span { text-transform: none; letter-spacing: 0; font-size: var(--t-2xs); }
.aisa-lg-gh.tone-warn b { color: var(--sev-high-ink); }
.aisa-lg-gh.tone-bad b  { color: var(--sev-critical-ink); }
.aisa-lg-gh.tone-mid b  { color: var(--sev-medium-ink); }
.aisa-lg-rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.aisa-lg-row { border-radius: var(--r-md); background: var(--n-25); }
.aisa-lg-b {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-2);
  align-items: baseline; width: 100%; text-align: left;
  padding: var(--s-2) var(--s-3); background: transparent;
}
button.aisa-lg-b { cursor: pointer; }
button.aisa-lg-b:hover { background: var(--n-50); border-radius: var(--r-md); }
.aisa-lg-tag {
  font-size: var(--t-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0 var(--s-1); border-radius: var(--r-sm);
  background: var(--n-0); color: var(--n-600); border: 1px solid var(--n-100);
}
.aisa-lg-row.tone-warn .aisa-lg-tag { color: var(--sev-high-ink); border-color: var(--sev-high-line); }
.aisa-lg-row.tone-bad .aisa-lg-tag  { color: var(--sev-critical-ink); border-color: var(--sev-critical-line); }
.aisa-lg-row.tone-mid .aisa-lg-tag  { color: var(--sev-medium-ink); border-color: var(--sev-medium-line); }
/* THE ROW TITLE WRAPS TO TWO LINES AND THEN STOPS. The design system's rule
   is truncate-with-an-expand, never a hard cut — and the expand here is the
   row itself, which opens the entity in full context. */
.aisa-lg-t {
  font-size: var(--t-sm); font-weight: 600; color: var(--n-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-width: 0;
}
.aisa-lg-n {
  grid-column: 2; font-size: var(--t-2xs); color: var(--n-600);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.aisa-lg-more {
  justify-self: start; cursor: pointer;
  min-height: 32px; padding: var(--s-1) var(--s-3);
  border: 1px dashed var(--n-200); border-radius: var(--r-full);
  background: transparent; color: var(--n-800);
  font-size: var(--t-xs); font-weight: 600;
}
.aisa-lg-more:hover { border-color: var(--n-400); background: var(--n-25); }
.aisa-lg-foot { margin: 0; font-size: var(--t-2xs); color: var(--n-600); }

/* ══ THE CHAIN SAYS WHAT IT HOLDS ══════════════════════════════════════ */
.aisa-spine-cap {
  margin: 0 0 var(--s-1); font-size: var(--t-2xs); color: var(--n-600);
}
.aisa-dl-caveat {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--n-50); color: var(--n-600); font-size: var(--t-2xs);
}

@media (max-width: 720px) {
  /* PHONE WIDTH. The panel is a full-viewport overlay here, and the card fills
     it exactly. Both are pinned rather than merely preferred: the card is a
     flex item on its container's main axis, so without an explicit width and
     min-width it keeps its min-content size and carries the whole review off
     the right of the screen — the Apply button included. */
  .aisa-panel { padding: 0; overflow-x: hidden; }
  .aisa-card {
    width: 100%; max-width: 100%; min-width: 0;
    max-height: 100vh; height: 100vh;
    border-radius: 0; border: 0;
    overflow: hidden;
  }
  .aisa-body { overflow-x: hidden; }
  .aisa-dims { max-width: 100%; }
  .aisa-sub-note { flex: 1 1 100%; }
  .aisa-health-top { grid-template-columns: 1fr; }
  .aisa-health-score { width: 100%; grid-auto-flow: column; justify-content: start; gap: var(--s-3); padding: var(--s-2) var(--s-3); }
  .aisa-health-lbl { text-align: left; }
  .aisa-headline { font-size: var(--t-md); }
  .aisa-foot { flex-direction: column; align-items: stretch; }
  /* the action row is a flex row of nowrap buttons: without these it keeps a
     min-content width wider than the phone and drags the card with it */
  .aisa-foot-l, .aisa-foot-r { min-width: 0; }
  .aisa-foot-r { margin-left: 0; flex-wrap: wrap; }
  .aisa-foot-r button { flex: 1 1 auto; min-width: 0; }
  .aisa-sb-cols { grid-template-columns: 1fr; }
  .aisa-finding { grid-template-columns: 8px 1fr; }
  .aisa-rec { grid-template-columns: 24px 1fr; }
  .aisa-rec-go { grid-column: 2; justify-self: start; }
  .aisa-seq-lbl { min-width: 0; }
  .aisa-dim { grid-template-columns: 96px 1fr 24px; gap: var(--s-1); }
  .aisa-dim-l { font-size: var(--t-2xs); }
  .aisa-lens-list li { grid-template-columns: 1fr; gap: var(--s-05); }
  .aisa-depths { grid-template-columns: 1fr; }
  .aisa-flow-link { grid-template-columns: 18px 1fr; padding-left: var(--s-1); }
  .aisa-dp-card { max-width: 150px; }
  .aisa-pt { grid-template-columns: 16px 1fr; }
  .aisa-pt-k { grid-column: 2; }
  .aisa-pt-t { grid-column: 2; }
  .aisa-story-step { grid-template-columns: 24px 1fr; }
  /* the rail becomes a scrolling top bar and the splits stack */
  .aisa-ws { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .aisa-rail {
    flex-direction: row; align-items: center; gap: var(--s-2);
    border-right: 0; border-bottom: 1px solid var(--n-100);
    padding: var(--s-2) var(--s-3); overflow-x: auto;
  }
  .aisa-rail-score { width: 36px; height: 36px; margin: 0; flex: 0 0 auto; }
  .aisa-rail-score .aisa-health-num { font-size: var(--t-sm); }
  .aisa-rail-lbl, .aisa-rail-foot { display: none; }
  .aisa-rail-list { display: flex; gap: var(--s-1); }
  /* flex items shrink below their content by default, which on a 420px bar
     slid every area button over the one before it */
  .aisa-rail-list > li { flex: 0 0 auto; }
  /* As a top bar the buttons size to their own text, so the grid column that
     lets the label ellipsise in the vertical rail has to be released here —
     otherwise every area is clipped to "P..", "N..", "D…". */
  .aisa-rail-btn { width: auto; white-space: nowrap; grid-template-columns: auto auto; }
  .aisa-rail-btn > span { overflow: visible; text-overflow: clip; }
  .aisa-rail-btn small { display: none; }
  /* the list is the page here; capping it would hide the reason a change
     cannot be applied behind an inner scrollbar */
  .aisa-split-list { max-height: none; overflow-y: visible; }
  .aisa-ws-main { padding: var(--s-3); }
  .aisa-ov-grid { grid-template-columns: 1fr; }
  .aisa-view.is-split { grid-template-columns: 1fr; }
  .aisa-sevgrid { grid-template-columns: repeat(3, 1fr); }
  .aisa-tl-col { flex: 0 0 150px; }
  .aisa-tl-link { flex: 0 0 72px; }
  /* every two-column surface added with the workspace stacks on a phone */
  .aisa-natgrid { grid-template-columns: repeat(2, 1fr); }
  .aisa-dimgrid { grid-template-columns: 1fr 1fr; }
  .aisa-chkgrid { grid-template-columns: 1fr; }
  .aisa-logic { grid-template-columns: 1fr; gap: var(--s-3); }
  .aisa-relpair { grid-template-columns: 1fr; }
  .aisa-relarrow { justify-items: start; }
  .aisa-actrow { grid-template-columns: 1fr; }
  .aisa-actrow-f { grid-column: 1; grid-row: auto; flex-wrap: wrap; justify-content: flex-start; }
  .aisa-edge-b { grid-template-columns: 40px 1fr; }
  .aisa-edge-tag { grid-column: 2; }
  .aisa-chain-b { grid-template-columns: 40px 1fr; }
  .aisa-stage { grid-template-columns: 16px 1fr; }
  .aisa-stage-n { grid-column: 2; text-align: left; }
  /* THE SECTION HEADER. Its badge is `white-space: nowrap` in an `auto`
     column, which at 390px took a third of the width and squeezed the title
     into one word per line. The badge goes onto its own row instead: it is the
     least important of the three things in the header and the only one that
     can move without changing what the header says. */
  .aisa-sh { grid-template-columns: minmax(0, 1fr); }
  .aisa-sh-badge { grid-column: 1 / -1; justify-self: start; }
  .aisa-sh-v { font-size: var(--t-2xl); max-width: none; }

  /* ── the six sections on a phone ───────────────────────────────────────
     The rule is the same one the rest of this block follows: preserve the
     analytical hierarchy and let the sequences scroll. A spine that wrapped
     would stop being a chain — the eye loses which end it started at — so it
     keeps scrolling horizontally and the nodes get narrower instead. */
  .aisa-dl-head { grid-template-columns: 1fr; }
  .aisa-dl-split { grid-template-columns: 1fr; }
  .aisa-dl-gap { justify-items: start; text-align: left; }
  .aisa-dl-gap span { max-width: none; }
  .aisa-dl-read li { grid-template-columns: 1fr; }
  .aisa-spine-n { max-width: 150px; }
  .aisa-pm-col { flex: 0 0 168px; }
  .aisa-front-h { grid-template-columns: 24px 1fr auto; }
  .aisa-front-m { grid-column: 2; }
  .aisa-lane-h { grid-template-columns: 20px 1fr auto; }
  .aisa-lane-h small { grid-column: 2 / span 2; }
  /* the ledger is the one surface that must stay usable at 375px: it is where
     the long lists live, and a filter bar that wraps is still a filter bar */
  .aisa-lg-b { grid-template-columns: 1fr; }
  .aisa-lg-tag { justify-self: start; }
  .aisa-lg-n { grid-column: 1; }
}

/* tabs/gantt/styles/173-gantt-touch-scroll.css */
/* ══════════════════════════════════════════════════════════════════════
   GANTT — VERTICAL TOUCH SCROLL ON EVERY TOUCH DEVICE
   ----------------------------------------------------------------------
   A tablet held in LANDSCAPE could not scroll the Gantt down with a finger.
   Portrait was fine, which is the clue: the rule is keyed to WIDTH, and a
   landscape tablet is wider than the breakpoint.

   Two rules collide.

     019-gantt-vertical-scroll-fix.css sets, with no media query at all:
         #ganttOut #v9-gantt-outer { touch-action: pan-x !important; }
     Its intent was a WHEEL behaviour — let the page take the vertical wheel
     instead of trapping it in the chart. But touch-action governs TOUCH, not
     the wheel, so on a touch device it also forbids the one-finger vertical
     pan, and the chart becomes unscrollable by hand.

     styles/core/00-90-responsive.css puts the antidote
         touch-action: pan-x pan-y !important
     inside @media (max-width: 1024px). A tablet in portrait is 834px and is
     rescued; the same tablet rotated is 1194px and is not.

   Width was never the right question — "is this a touch device" is, and
   (hover: none) and (pointer: coarse) asks it directly. A mouse keeps the old
   wheel behaviour untouched because the query does not match it.

   .p6-right additionally computes to touch-action:none outside the 1024px
   query (053-prevent-scroll-select-during-bar-interaction.css, which exists to
   stop text selection while dragging a bar). A finger landing on a bar row —
   which is most of the chart — hit that one. It is restored here too; dragging
   a bar is a pointer-events concern and does not need touch-action:none to
   work.

   Loaded after both, so it wins on order at equal specificity; the selectors
   also carry the same !important the rules being corrected use.
   ══════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  /* the scroll container itself */
  html body #tp-gantt #ganttOut #v9-gantt-outer,
  html body #tp-gantt #ganttOut .p6-outer,
  html body #tp-gantt .gantt-shell,
  html body #tp-gantt .gantt-outer,
  html body #ganttOut #v9-gantt-outer,
  html body #ganttOut .p6-outer,
  html body #ganttOut .gantt-shell,
  html body #ganttOut .gantt-outer {
    touch-action: pan-x pan-y !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* every surface a finger can actually land on inside the chart */
  html body #ganttOut .p6-grid,
  html body #ganttOut .p6-row,
  html body #ganttOut .p6-left,
  html body #ganttOut .p6-right,
  html body #ganttOut .p6-hdr-left,
  html body #ganttOut .p6-hdr-right,
  html body #ganttOut .p6-act-bar,
  html body #ganttOut .p6-sum-bar,
  html body #ganttOut .p6-ms {
    touch-action: pan-x pan-y !important;
  }

  /* 019 forces overflow-y:visible and max-height:none on the outer, which on a
     touch device leaves nothing to scroll. A real height is what makes the
     one-finger pan possible at all. */
  html body #tp-gantt #ganttOut #v9-gantt-outer,
  html body #ganttOut #v9-gantt-outer {
    max-height: min(78vh, 900px) !important;
  }
}

/* tabs/gantt/styles/174-gantt-card-containment.css */
/* ══════════════════════════════════════════════════════════════════════
   GANTT — THE CHART STAYS INSIDE THE TAB CARD
   ----------------------------------------------------------------------
   On a tablet in landscape the Gantt hung outside the tab card: the table
   and the chart ran past the card's right rounded edge and were cut off by
   the screen, with no way to scroll them back into view.

   The cause was a minimum width put on the wrong box. Two plugins size the
   left table — 104-gantt-col-resize (drag a column edge) and
   164-gantt-column-manager (add a column such as Calendar) — and both wrote

       #ganttOut .p6-outer { min-width: <table + 400>px !important }

   .p6-outer is the SCROLL WINDOW, not the content. A minimum width on it
   does not reserve room for the chart; it makes the window itself wider
   than the card that holds it, and a window wider than its parent cannot
   scroll — it simply overflows. Five default columns already ask for
   1080px; adding Calendar asks for 1192px, which is more than a landscape
   tablet leaves for the content area, so the chart spilled out.

   Both plugins now put that minimum on .p6-grid — the scrolled CONTENT —
   where it does the job it was written for: the table keeps its columns,
   the chart keeps its 400px, and anything past the card edge becomes a
   horizontal scroll inside the card.

   This file is the standing guard for the same mistake. It clamps the
   scroll window to its container with enough specificity (html body +
   two ids) to outrank the plugins' runtime <style> tags, so a stale
   cached build, or a future rule written on the outer, can bend the
   scroll position but never the card's edges.
   ══════════════════════════════════════════════════════════════════════ */

html body #tp-gantt.tp,
html body #tp-gantt #ganttOut,
html body #tp-gantt #ganttOut .p6-outer,
html body #tp-gantt #ganttOut #v9-gantt-outer,
html body #ganttOut .p6-outer,
html body #ganttOut #v9-gantt-outer {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* The window scrolls; the content inside it is free to be as wide as the
   schedule needs. */
html body #tp-gantt #ganttOut .p6-outer,
html body #tp-gantt #ganttOut #v9-gantt-outer,
html body #ganttOut .p6-outer,
html body #ganttOut #v9-gantt-outer {
  width: 100% !important;
  overflow-x: auto !important;
}

/* The toolbar and the legend are rows of controls, not scroll surfaces:
   they wrap onto a second line instead of stretching the card. */
html body #tp-gantt #ganttOut .p6-toolbar,
html body #tp-gantt #ganttOut .p6-legend {
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

/* tabs/gantt/styles/175-gantt-activity-dock.css */
/* ══════════════════════════════════════════════════════════════════════
   ACTIVITY DETAILS DOCK — bottom of the Gantt (177 / 178)
   Theme trigger: body[data-gantt-theme="dark"] ONLY (never the OS query —
   see AGENTS.md, levelling v120).
   ══════════════════════════════════════════════════════════════════════ */

.gad, .gadp {
  --gad-bg: #FFFFFF;
  --gad-bg-2: #F7F9FB;
  --gad-bg-3: #EEF2F6;
  --gad-line: #E3E8EF;
  --gad-line-2: #CFD8E3;
  --gad-ink: #0B1B33;
  --gad-text: #1E2B3C;
  --gad-muted: #64748B;
  --gad-faint: #94A3B8;
  --gad-accent: #1F4E79;
  --gad-accent-2: #2563EB;
  --gad-accent-soft: #EAF1FB;
  --gad-row-hl: #EAF1FF;
  --gad-crit: #D1432B;
  --gad-crit-soft: #FDEDEA;
  --gad-ok: #16874D;
  --gad-ok-soft: #E7F6EE;
  --gad-warn: #B86E00;
  --gad-warn-soft: #FFF4E0;
  --gad-eng: #6A4BD6;
  --gad-eng-soft: #F0ECFE;
  --gad-proc: #0B8484;
  --gad-proc-soft: #E3F5F4;
  --gad-bar: #2E9E5B;
  --gad-shadow: 0 -10px 40px rgba(11, 27, 51, .10), 0 -1px 0 rgba(11, 27, 51, .04);
  --gad-num: ui-monospace, 'SF Mono', 'JetBrains Mono', Consolas, monospace;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--gad-text);
}
body[data-gantt-theme="dark"] .gad,
body[data-gantt-theme="dark"] .gadp {
  --gad-bg: #111A28;
  --gad-bg-2: #162234;
  --gad-bg-3: #1C2A3F;
  --gad-line: #24344B;
  --gad-line-2: #33465F;
  --gad-ink: #F1F5FA;
  --gad-text: #D8E1EC;
  --gad-muted: #93A4BA;
  --gad-faint: #6B7C93;
  --gad-accent: #7FB2E5;
  --gad-accent-2: #6EA8FF;
  --gad-accent-soft: #1B2D46;
  --gad-row-hl: #1B2D46;
  --gad-crit-soft: #3A1F1C;
  --gad-ok-soft: #173327;
  --gad-warn-soft: #3A2C12;
  --gad-eng-soft: #2A2448;
  --gad-proc-soft: #133333;
  --gad-shadow: 0 -10px 40px rgba(0, 0, 0, .45);
}

/* ── the chart makes room ─────────────────────────────────────────────── */
html body.gad-open #tp-gantt #ganttOut #v9-gantt-outer,
html body.gad-open #tp-gantt #ganttOut .p6-outer {
  max-height: var(--gad-outer-max, 50vh) !important;
  /* 00-90-responsive gives the scroller min-height:60vh on tablet widths,
     which would push the chart back under the dock. */
  min-height: min(var(--gad-outer-max, 50vh), 160px) !important;
}
html body.gad-open #tp-gantt,
html body.gad-open #tp-gantt #ganttOut { min-height: 0 !important; }
body.gad-open #gap-panel { display: none !important; }

/* ── shell ────────────────────────────────────────────────────────────── */
.gad {
  position: fixed;
  z-index: 1190;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--gad-bg);
  border: 1px solid var(--gad-line);
  border-radius: 14px;
  box-shadow: var(--gad-shadow);
  overflow: hidden;
  transition: height .18s cubic-bezier(.22, .61, .36, 1);
}
.gad *, .gad *::before, .gad *::after { box-sizing: border-box; }
/* the markup wrapper a tab's listeners hang on; layout ignores it */
.gad-root { display: contents; }
/* isolate the dock's style/layout work from the Gantt page */
.gad, .gadp { contain: layout style; }
.gad-body, .gad-table, .gad-sibs, .gad-pipe, .gadp-body { overscroll-behavior: contain; }
.gad.is-away { display: none; }
.gad.is-resizing { transition: none; user-select: none; }
.gad.is-enter { animation: gadIn .24s cubic-bezier(.22, .61, .36, 1); }
@keyframes gadIn { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gad, .gad.is-enter { animation: none; transition: none; } }

.gad-grip {
  position: absolute; left: 0; right: 0; top: 0; height: 8px;
  cursor: ns-resize; z-index: 3;
}
.gad-grip::after {
  content: ''; position: absolute; left: 50%; top: 3px; width: 44px; height: 4px;
  margin-left: -22px; border-radius: 4px; background: var(--gad-line-2); opacity: .8;
  transition: background .15s, width .15s;
}
.gad-grip:hover::after, .gad.is-resizing .gad-grip::after { background: var(--gad-accent-2); width: 64px; margin-left: -32px; }

/* ── header ───────────────────────────────────────────────────────────── */
.gad-head {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 6px 10px 5px 10px;
  border-bottom: 1px solid var(--gad-line);
  background: linear-gradient(180deg, var(--gad-bg) 0%, var(--gad-bg-2) 100%);
  flex-shrink: 0;
}
.gad.is-min .gad-head { border-bottom: 0; }
.gad.is-min .gad-tabs, .gad.is-min .gad-body { display: none; }
.gad-nav, .gad-actions { display: flex; gap: 2px; flex-shrink: 0; }
.gad-ib {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--gad-muted);
  cursor: pointer; transition: background .12s, color .12s;
}
.gad-ib:hover:not(:disabled) { background: var(--gad-bg-3); color: var(--gad-ink); }
.gad-ib:disabled { opacity: .35; cursor: default; }
.gad-ib.is-on { color: var(--gad-accent-2); background: var(--gad-accent-soft); }
.gad-ib:focus-visible, .gad-tab:focus-visible, .gad-btn:focus-visible { outline: 2px solid var(--gad-accent-2); outline-offset: 1px; }

.gad-ident { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 260px; }
.gad-id {
  font: 700 11px/1 var(--gad-num); letter-spacing: .02em;
  padding: 6px 9px; border-radius: 7px;
  background: var(--gad-accent); color: #FFFFFF; flex-shrink: 0;
}
.gad-id.is-crit { background: var(--gad-crit); }
.gad-titles { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.gad-titles strong {
  font-size: 13px; font-weight: 700; color: var(--gad-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gad-titles span { font-size: 10.5px; color: var(--gad-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gad-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; flex: 0 1 auto; }
.gad-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--gad-bg-3); color: var(--gad-text); font-size: 11px;
}
.gad-chip b { font: 600 11px/1 var(--gad-num); color: var(--gad-ink); }
.gad-chip em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gad-muted); }
.gad-chip i { font-style: normal; color: var(--gad-faint); }
.gad-chip svg { color: var(--gad-muted); }
.gad-chip.is-ok { background: var(--gad-ok-soft); } .gad-chip.is-ok b { color: var(--gad-ok); }
.gad-chip.is-near { background: var(--gad-warn-soft); } .gad-chip.is-near b { color: var(--gad-warn); }
.gad-chip.is-crit { background: var(--gad-crit-soft); } .gad-chip.is-crit b { color: var(--gad-crit); }
.gad-chip.is-crit-solid { background: var(--gad-crit); color: #FFFFFF; font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.gad-chip.is-soft { background: var(--gad-bg-2); border: 1px solid var(--gad-line); }

/* ── tabs ─────────────────────────────────────────────────────────────── */
.gad-tabs {
  display: flex; gap: 2px; padding: 0 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--gad-line); background: var(--gad-bg-2);
  overflow-x: auto; scrollbar-width: none;
}
.gad-tabs::-webkit-scrollbar { display: none; }
.gad-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px; border: 0; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 11.5px; line-height: 1; font-family: inherit; color: var(--gad-muted); white-space: nowrap;
  transition: color .12s;
}
.gad-tab:hover { color: var(--gad-ink); }
.gad-tab::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--gad-accent-2); transform: scaleX(0); transition: transform .18s;
}
.gad-tab.is-on { color: var(--gad-ink); }
.gad-tab.is-on::after { transform: scaleX(1); }
.gad-tab i {
  font: 700 9.5px/1 var(--gad-num); font-style: normal;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-grid; place-items: center; background: var(--gad-bg-3); color: var(--gad-muted);
}
.gad-tab.is-on i { background: var(--gad-accent-2); color: #FFFFFF; }

.gad-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px 14px;
  scrollbar-width: thin; scrollbar-color: var(--gad-line-2) transparent;
}
.gad-body[data-gad-tab="relations"] { display: flex; flex-direction: column; overflow: hidden; }

/* ── shared bits ──────────────────────────────────────────────────────── */
.gad-sp { flex: 1 1 auto; }
.gad-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 8px; border: 1px solid var(--gad-line-2); background: var(--gad-bg);
  color: var(--gad-text); font-weight: 600; font-size: 11px; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.gad-btn:hover:not(:disabled) { border-color: var(--gad-accent-2); color: var(--gad-accent-2); }
.gad-btn:disabled { opacity: .45; cursor: default; }
.gad-btn.is-primary { background: var(--gad-accent); border-color: var(--gad-accent); color: #FFFFFF; }
.gad-btn.is-primary:hover:not(:disabled) { background: var(--gad-accent-2); border-color: var(--gad-accent-2); color: #FFFFFF; }
.gad-btn.is-sm { height: 24px; padding: 0 8px; font-size: 10px; }
.gad-btn.is-ai { background: linear-gradient(135deg, #5B3FD0, #2563EB); border: 0; color: #FFFFFF; }
.gad-btn.is-ai:hover:not(:disabled) { color: #FFFFFF; box-shadow: 0 4px 14px rgba(91, 63, 208, .35); }
.gad-spin {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #FFFFFF; animation: gadSpin .7s linear infinite;
}
@keyframes gadSpin { to { transform: rotate(360deg); } }

.gad-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px 16px; text-align: center; color: var(--gad-muted);
  border: 1px dashed var(--gad-line-2); border-radius: 12px; background: var(--gad-bg-2);
}
.gad-empty strong { color: var(--gad-ink); font-size: 12px; }
.gad-empty span { font-size: 11px; max-width: 520px; line-height: 1.5; }
.gad-empty .gad-btn { margin-top: 6px; }
.gad-empty.is-inline { border: 0; background: transparent; padding: 18px 10px; }
.gad-hint { font-size: 10px; color: var(--gad-faint); padding: 8px 2px 0; flex-shrink: 0; }
.gad-muted { color: var(--gad-muted); font-size: 11px; margin: 4px 0; }
.gad-para { margin: 2px 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--gad-text); }
.gad-note {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px;
  border-radius: 10px; background: var(--gad-bg-2); border: 1px solid var(--gad-line); font-size: 11px; color: var(--gad-muted);
}
.gad-note.is-bad { background: var(--gad-crit-soft); border-color: transparent; color: var(--gad-crit); }

.gad-card {
  background: var(--gad-bg); border: 1px solid var(--gad-line); border-radius: 12px;
  padding: 12px 14px; min-width: 0;
}
.gad-card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.gad-card-h span { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gad-muted); }
.gad-card-h em { font-style: normal; font-size: 10px; color: var(--gad-faint); margin-left: auto; }

.gad-in {
  width: 100%; height: 30px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--gad-line-2); background: var(--gad-bg); color: var(--gad-ink);
  font-weight: 500; font-size: 11.5px; line-height: 1; font-family: inherit; outline: none;
  transition: border-color .12s, box-shadow .12s, background .4s;
}
.gad-in.num { font-family: var(--gad-num); text-align: right; }
.gad-in:hover:not([readonly]):not(:disabled) { border-color: var(--gad-faint); }
.gad-in:focus { border-color: var(--gad-accent-2); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.gad-in[readonly] { background: var(--gad-bg-2); color: var(--gad-muted); font-family: var(--gad-num); }
.gad-in:disabled { background: var(--gad-bg-2); color: var(--gad-faint); }
.gad-in.is-saved, .gad-cell-in.is-saved { animation: gadSaved 1.4s ease-out; }
@keyframes gadSaved { 0% { background: var(--gad-ok-soft); border-color: var(--gad-ok); } 100% { } }

/* ── General ──────────────────────────────────────────────────────────── */
.gad-gen { display: grid; grid-template-columns: minmax(300px, 1.25fr) minmax(280px, 1fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
.gad-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.gad-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gad-f > span { font-size: 10px; font-weight: 600; color: var(--gad-muted); }
.gad-f.is-wide { grid-column: span 2; }
.gad-f.is-id { grid-column: span 2; }
.gad-f.is-id .gad-in { width: 160px; }
.gad-unit { position: relative; }
.gad-unit .gad-in { padding-right: 44px; }
.gad-unit i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 10px; color: var(--gad-faint); pointer-events: none; }
.gad-ro { height: 30px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--gad-text); }
.gad-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gad-faint); }
.gad-dot.is-run { background: var(--gad-accent-2); }
.gad-dot.is-done { background: var(--gad-ok); }

.gad-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gad-dt { padding: 8px 10px; border-radius: 9px; background: var(--gad-bg-2); }
.gad-dt em { display: block; font-style: normal; font-size: 9.5px; color: var(--gad-muted); margin-bottom: 3px; }
.gad-dt b { font: 600 11.5px/1.2 var(--gad-num); color: var(--gad-ink); }
.gad-dt.is-crit { background: var(--gad-crit-soft); }
.gad-dt.is-crit b { color: var(--gad-crit); }
.gad-fv { margin-top: 12px; }
.gad-fv-row { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; height: 18px; }
.gad-fv-row em { font-style: normal; font-size: 9.5px; color: var(--gad-muted); }
.gad-fv-track { position: relative; height: 10px; border-radius: 5px; background: var(--gad-bg-3); }
.gad-fv-bar { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--gad-bar); }
.gad-fv-bar.is-crit { background: var(--gad-crit); }
.gad-fv-bar.is-late { background: transparent; border: 2px dashed var(--gad-faint); }
.gad-fv-float {
  position: absolute; top: 2px; bottom: 2px; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(135deg, var(--gad-line-2) 0 3px, transparent 3px 6px);
}
.gad-fv-scale { display: flex; justify-content: space-between; padding-left: 48px; margin-top: 4px; font: 500 9.5px/1 var(--gad-num); color: var(--gad-faint); }

.gad-crumbs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.gad-crumbs.is-inline { margin: 0; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.gad-crumb {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; padding: 3px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--gad-accent) calc(100% - var(--lvl, 0) * 16%), var(--gad-bg-3));
  color: #FFFFFF;
}
.gad-crumb:nth-child(n+5) { color: var(--gad-ink); }
.gad-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gad-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
  padding: 8px 10px; border-radius: 9px; background: var(--gad-bg-2); border: 1px solid transparent;
  font-family: inherit; text-align: left; cursor: pointer; color: inherit;
}
button.gad-stat:hover { border-color: var(--gad-line-2); }
.gad-stat b { font: 700 14.5px/1.1 var(--gad-num); color: var(--gad-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gad-stat em { font-style: normal; font-size: 9.5px; color: var(--gad-muted); }
.gad-stat.is-wide { grid-column: span 2; cursor: default; flex-direction: column-reverse; }
.gad-stat.is-wide b { font-weight: 600; font-size: 11.5px; line-height: 1.3; font-family: inherit; }
.gad-hold { margin-top: 10px; display: grid; gap: 6px; }
.gad-hold .gap-hold { display: grid; gap: 6px; }
.gad-hold .gap-hold-row { border-radius: 9px; padding: 8px 10px; border: 1px solid var(--gad-line); border-left-width: 3px; background: var(--gad-bg-2); }
.gad-hold .gap-hold-h { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gad-muted); }
.gad-hold .gap-hold-b { margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--gad-text); }
.gad-hold .gap-hold--logic { border-left-color: var(--gad-ok); }
.gad-hold .gap-hold--cstr { border-left-color: #C9A227; }
.gad-hold .gap-hold--warn { border-left-color: var(--gad-crit); background: var(--gad-crit-soft); }
.gad-hold .gap-hold--warn .gap-hold-h { color: var(--gad-crit); }

/* ── Relationships ────────────────────────────────────────────────────── */
.gad-rel { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 0; }
.gad-rel-mid { position: relative; }
.gad-rel-mid::before {
  content: ''; position: absolute; left: 50%; top: 18px; bottom: 18px; width: 1px; background: var(--gad-line);
}
.gad-rel-node {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg);
  font: 700 9px/1 var(--gad-num); letter-spacing: .04em; white-space: nowrap;
  padding: 4px 8px; border-radius: 999px; background: var(--gad-bg); border: 1px solid var(--gad-line-2); color: var(--gad-muted);
}
.gad-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--gad-line); border-radius: 12px; overflow: hidden; background: var(--gad-bg); }
.gad-pane-h { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--gad-line); background: var(--gad-bg-2); flex-shrink: 0; flex-wrap: wrap; }
.gad-pane-t { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gad-ink); }
.gad-count { font: 700 10px/1 var(--gad-num); font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--gad-ink); color: var(--gad-bg); }

.gad-table { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--gad-line-2) transparent; }
.gad-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.gad-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--gad-bg);
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; color: var(--gad-muted);
  padding: 7px 8px; border-bottom: 1px solid var(--gad-line); white-space: nowrap;
}
.gad-table tbody td { padding: 0 8px; height: 28px; border-bottom: 1px solid var(--gad-line); white-space: nowrap; color: var(--gad-text); }
.gad-table tbody tr:last-child td { border-bottom: 0; }
.gad-table .c-id, .gad-table .c-ref { font-family: var(--gad-num); font-size: 10.5px; color: var(--gad-ink); font-weight: 600; }
.gad-table .c-name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.gad-table .c-name.is-wrap { white-space: normal; line-height: 1.4; padding-top: 6px; padding-bottom: 6px; }
.gad-table .c-d, .gad-table .c-tf, .gad-table .c-n { font-family: var(--gad-num); font-size: 10.5px; }
.gad-table th.c-n, .gad-table td.c-n { text-align: right; }
.gad-table .c-tf.is-crit { color: var(--gad-crit); font-weight: 700; }
.gad-rel .gad-table table { min-width: 700px; }
.gad-table.is-res table, .gad-table.is-map table { min-width: 620px; }
.gad-table th.c-name, .gad-table td.c-name { min-width: 180px; }
.gad-table .c-id { min-width: 96px; }
.gad-table .c-type { width: 66px; min-width: 66px; }
.gad-table .c-lag { width: 62px; min-width: 62px; }
.gad-table .c-d { min-width: 80px; }
.gad-table .c-tf { min-width: 44px; }
.gad-table .c-drv { min-width: 70px; }
.gad-table td.c-n { min-width: 84px; }
select.gad-cell-in {
  -webkit-appearance: none; appearance: none; padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gad-muted) 50%), linear-gradient(135deg, var(--gad-muted) 50%, transparent 50%);
  background-position: calc(100% - 9px) 10px, calc(100% - 5px) 10px;
  background-size: 4px 4px; background-repeat: no-repeat;
}
.gad-table .c-x { width: 34px; text-align: center; padding: 0 4px; }
.gad-table .c-ro { color: var(--gad-muted); }
.gad-table .c-type-t { color: var(--gad-muted); font-size: 10.5px; }
.gad-rr { cursor: default; transition: background .12s; }
.gad-rr:hover td { background: var(--gad-bg-2); }
.gad-rr.is-sel td { background: var(--gad-accent-soft); }
.gad-rr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--gad-accent-2); }
.gad-rr.is-flash td { animation: gadFlash 1.4s ease-out; }
@keyframes gadFlash { 0% { background: var(--gad-ok-soft); } 100% { } }
.gad-rr.is-crit .c-id { color: var(--gad-crit); }
.gad-ph { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; background: var(--gad-bar); }
.gad-ph.ph-eng { background: var(--gad-eng); }
.gad-ph.ph-proc { background: var(--gad-proc); }
.gad-ph.ph-ms { background: var(--gad-ink); transform: rotate(45deg); }
.gad-cell-in {
  width: 100%; height: 24px; padding: 0 6px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--gad-ink);
  font: 600 10.5px/1 var(--gad-num); outline: none; cursor: pointer;
}
.gad-cell-in.num { text-align: right; cursor: text; }
.gad-rr:hover .gad-cell-in, .gad-table tr:hover .gad-cell-in { border-color: var(--gad-line-2); background: var(--gad-bg); }
.gad-cell-in:focus { border-color: var(--gad-accent-2) !important; background: var(--gad-bg) !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); cursor: text; }
.gad-table .c-name .gad-cell-in { font-family: inherit; font-weight: 500; font-size: 11px; }
.gad-drv {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 7px; border-radius: 999px; background: var(--gad-ok-soft); color: var(--gad-ok);
}
.gad-drv.is-off { background: transparent; color: var(--gad-faint); }
.gad-x {
  width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 6px;
  border: 0; background: transparent; color: var(--gad-faint); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
tr:hover .gad-x, .gad-x:focus-visible { opacity: 1; }
.gad-x:hover { background: var(--gad-crit-soft); color: var(--gad-crit); }
.gad-none td { height: auto; border: 0 !important; }

/* ── Resources ────────────────────────────────────────────────────────── */
.gad-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.gad-kpi { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gad-line); background: var(--gad-bg); min-width: 0; }
.gad-kpi em { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gad-muted); }
.gad-kpi b { display: block; margin-top: 4px; font: 700 18px/1.1 var(--gad-num); color: var(--gad-ink); }
.gad-kpi span { display: block; margin-top: 2px; font-size: 10px; color: var(--gad-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gad-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
.gad-split-main .gad-table, .gad-table.is-map, .gad-table.is-scope { border: 1px solid var(--gad-line); border-radius: 12px; max-height: 320px; }
.gad-addrow { display: flex; gap: 8px; margin-top: 8px; }
.gad-addrow .gad-in { height: 30px; }
.gad-addrow .gad-in.num { width: 130px; flex-shrink: 0; }
.gad-strip { border: 1px solid var(--gad-line); border-radius: 12px; padding: 10px 12px; background: var(--gad-bg); }
.gad-strip-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.gad-strip-h span { font-size: 11px; font-weight: 700; color: var(--gad-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gad-strip-h em { font-style: normal; margin-left: auto; font-size: 9.5px; color: var(--gad-muted); white-space: nowrap; }
.gad-strip-plot { position: relative; height: 84px; border-bottom: 1px solid var(--gad-line); }
.gad-strip-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gad-strip-plot rect { fill: var(--gad-line-2); }
.gad-strip-plot rect.is-in { fill: var(--gad-accent-2); }
.gad-strip-win { position: absolute; top: -4px; bottom: 0; background: var(--gad-accent-soft); border-radius: 4px; }
.gad-strip-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 9.5px; color: var(--gad-faint); }
.gad-strip-scale span:nth-child(2) { color: var(--gad-accent-2); }

/* ── Mapping calc ─────────────────────────────────────────────────────── */
.gad-pipe { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.gad-step {
  flex: 1 0 118px; display: flex; flex-direction: column; gap: 4px; padding: 10px 11px;
  border-radius: 12px; border: 1px solid var(--gad-line); background: var(--gad-bg);
}
.gad-step em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gad-muted); white-space: nowrap; }
.gad-step b { font: 700 14.5px/1.2 var(--gad-num); color: var(--gad-ink); word-break: break-word; }
.gad-step span { font-size: 9.5px; color: var(--gad-faint); }
.gad-step.is-edit { border-color: color-mix(in srgb, var(--gad-accent-2) 45%, var(--gad-line)); background: var(--gad-accent-soft); }
.gad-step-in { height: 30px; font-size: 13.5px; font-weight: 700; }
.gad-step-arrow { align-self: center; color: var(--gad-faint); font-style: normal; flex-shrink: 0; }
.gad-formula { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; padding: 9px 12px; border-radius: 10px; background: var(--gad-bg-2); font-size: 11px; color: var(--gad-text); }
.gad-formula b { font-weight: 700; color: var(--gad-ink); }
.gad-formula .is-warn { color: var(--gad-warn); display: inline-flex; gap: 6px; align-items: center; }
.gad-foot-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gad-foot-actions .gad-hint { padding: 0; flex: 1; }

/* ── Scope ────────────────────────────────────────────────────────────── */
.gad-scope-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.gad-phase {
  display: inline-block; flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; background: var(--gad-bg-3); color: var(--gad-accent);
}
.gad-phase.ph-eng { background: var(--gad-eng-soft); color: var(--gad-eng); }
.gad-phase.ph-proc { background: var(--gad-proc-soft); color: var(--gad-proc); }
.gad-phase.ph-con { background: var(--gad-accent-soft); color: var(--gad-accent); }
.gad-unitchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gad-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.gad-doc, .gad-sib {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 9px; border: 1px solid var(--gad-line); background: var(--gad-bg);
  font-family: inherit; color: inherit; cursor: pointer; transition: border-color .12s, background .12s;
}
.gad-doc:hover, .gad-sib:hover { border-color: var(--gad-accent-2); background: var(--gad-accent-soft); }
.gad-doc b, .gad-sib b { font-size: 11px; font-weight: 600; color: var(--gad-ink); line-height: 1.35; }
.gad-doc em, .gad-sib em { font-style: normal; font-size: 9.5px; color: var(--gad-muted); font-family: var(--gad-num); }
.gad-sib span { font: 700 9.5px/1 var(--gad-num); color: var(--gad-muted); }
.gad-sibs { max-height: 240px; overflow: auto; }
.gad-sibs.is-grid { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.gad-sibs.is-grid .gad-sib { margin: 0; }

/* ── Engineering & procurement ───────────────────────────────────────── */
.gad-ep-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: 11px; color: var(--gad-muted); }
.gad-ep-top .gad-btn { margin-left: auto; }
.gad-verdict { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--gad-bg-3); color: var(--gad-ink); }
.gad-verdict.is-ok { background: var(--gad-ok-soft); color: var(--gad-ok); }
.gad-verdict.is-tight { background: var(--gad-warn-soft); color: var(--gad-warn); }
.gad-verdict.is-late { background: var(--gad-crit-soft); color: var(--gad-crit); }
.gad-verdict.is-maybe { background: var(--gad-eng-soft); color: var(--gad-eng); }

.gad-lanes { position: relative; border: 1px solid var(--gad-line); border-radius: 12px; padding: 22px 12px 8px; margin-bottom: 12px; background: var(--gad-bg); }
.gad-lane { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) 96px; align-items: center; gap: 10px; height: 34px; }
.gad-lane + .gad-lane { border-top: 1px dashed var(--gad-line); }
.gad-lane-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gad-lane-l b { font-size: 11px; font-weight: 600; color: var(--gad-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gad-lane-t { position: relative; height: 16px; background: var(--gad-bg-2); border-radius: 4px; }
.gad-lane-bar { position: absolute; top: 2px; height: 12px; border: 0; padding: 0; border-radius: 3px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.gad-lane-bar:hover { transform: scaleY(1.35); box-shadow: 0 2px 8px rgba(11, 27, 51, .25); z-index: 2; }
.gad-lane-act { position: absolute; top: 1px; height: 14px; border-radius: 3px; background: var(--gad-bar); opacity: .9; }
.gad-lane-r { font: 700 10px/1 var(--gad-num); text-align: right; color: var(--gad-muted); }
.gad-lane-r.is-ok { color: var(--gad-ok); } .gad-lane-r.is-tight { color: var(--gad-warn); } .gad-lane-r.is-late { color: var(--gad-crit); }
.gad-lane-t { overflow: visible; }
.gad-lane-mark { position: absolute; top: -9px; bottom: -9px; width: 0; border-left: 2px dashed var(--gad-crit); z-index: 3; pointer-events: none; }
.gad-lane-mark i { position: absolute; top: -12px; left: 5px; white-space: nowrap; font: 700 9px/1 var(--gad-num); font-style: normal; color: var(--gad-crit); }
.gad-lane-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 9.5px; color: var(--gad-muted); }
.gad-lane-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: -6px; }
.st-sub { background: #A78BFA; } .st-app { background: var(--gad-eng); }
.st-po { background: #5EC4C1; } .st-del { background: var(--gad-proc); }
.gad-lane-legend i.is-act { background: var(--gad-bar); }

.gad-ep-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.gad-ep-g { border: 1px solid var(--gad-line); border-radius: 12px; padding: 10px 12px; background: var(--gad-bg); min-width: 0; }
.gad-ep-g.is-suggest { border-style: dashed; }
.gad-ep-g header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
.gad-ep-g header b { font-size: 11.5px; color: var(--gad-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gad-conf { margin-left: auto; flex-shrink: 0; font-style: normal; font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: var(--gad-bg-3); color: var(--gad-muted); }
.gad-conf.is-logic { background: var(--gad-ok-soft); color: var(--gad-ok); }
.gad-conf.is-ai { background: var(--gad-eng-soft); color: var(--gad-eng); margin-left: 0; }
.gad-ep-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--gad-line); }
.gad-ep-g header + .gad-ep-item { border-top: 0; }
.gad-stage { font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 5px; color: #FFFFFF; flex-shrink: 0; }
.gad-ep-name {
  flex: 1 1 200px; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer;
  font-weight: 500; font-size: 11px; line-height: 1.35; font-family: inherit; color: var(--gad-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gad-ep-name b { font-family: var(--gad-num); font-weight: 700; color: var(--gad-ink); }
.gad-ep-name:hover { color: var(--gad-accent-2); }
.gad-ep-d { font: 500 10px/1 var(--gad-num); color: var(--gad-muted); }
.gad-ep-link { font: 600 9.5px/1 var(--gad-num); color: var(--gad-ok); background: var(--gad-ok-soft); padding: 3px 6px; border-radius: 5px; }
.gad-ai { margin-top: 12px; border-radius: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--gad-eng) 35%, var(--gad-line)); background: linear-gradient(180deg, var(--gad-eng-soft), var(--gad-bg) 60%); }
.gad-ai header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gad-ai header b { font-size: 11.5px; color: var(--gad-ink); }
.gad-ai header em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--gad-muted); }
.gad-ai-mark { font-weight: 800; font-size: 9px; line-height: 1; padding: 4px 6px; border-radius: 5px; color: #FFFFFF; background: linear-gradient(135deg, #5B3FD0, #2563EB); }
.gad-ai-why { flex-basis: 100%; font-size: 10.5px; color: var(--gad-muted); line-height: 1.4; }

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .gad-gen { grid-template-columns: 1fr 1fr; }
  .gad-gen > .gad-card:last-child { grid-column: span 2; }
  .gad-chips .gad-chip.is-soft { display: none; }
}
@media (max-width: 980px) {
  .gad-chips { display: none; }
  .gad-rel { grid-template-columns: 1fr; grid-auto-rows: minmax(160px, 1fr); gap: 10px; }
  .gad-rel-mid { display: none; }
  .gad-body[data-gad-tab="relations"] { overflow: auto; }
  .gad-gen, .gad-split, .gad-cols3 { grid-template-columns: 1fr; }
  .gad-gen > .gad-card:last-child { grid-column: auto; }
  .gad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gad-lane { grid-template-columns: 120px minmax(0, 1fr) 70px; }
}


/* ══════════════════════════════════════════════════════════════════════
   v1.1 — COMPACT, PROFESSIONAL SURFACE
   Everything below supersedes the first pass: flatter sections with a
   header rule, 8px radii, 26px fields, a segmented date/float strip in the
   header, and content sized to fit the default dock height without a
   scroll on the General tab.
   ══════════════════════════════════════════════════════════════════════ */

/* The app's global form theme (999-ai-planner-landing-theme.css and
   nexora-premium-redesign.css) gives every input and select min-height:44px,
   an 18px radius and an animated 3–4px focus ring. Inside the dock that turned
   a 24px table cell into a bubble that swells on hover and focus. */
.gad input:not([type="checkbox"]):not([type="radio"]),
.gad select, .gad textarea,
.gadp input:not([type="checkbox"]):not([type="radio"]),
.gadp select {
  min-height: 0 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  transform: none !important;
  transition: border-color .12s ease, background-color .12s ease !important;
}
.gad input:focus, .gad select:focus, .gadp-fld input:focus, .gadp-fld select:focus {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .16) !important;
}

.gad { border-radius: 10px; }
.gad-head { min-height: 46px; padding: 6px 8px 6px 8px; gap: 10px; }
.gad-id { font-size: 11px; padding: 5px 8px; border-radius: 6px; letter-spacing: .01em; }
.gad-tline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gad-titles strong { font-size: 13px; }
.gad-titles span { font-size: 10.5px; }
.gad-tag { font-style: normal; flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.gad-tag.is-crit { background: var(--gad-crit-soft); color: var(--gad-crit); }

.gad-meta { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; border: 1px solid var(--gad-line); border-radius: 8px; background: var(--gad-bg); overflow: hidden; }
.gad-meta-i { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 10px; border-left: 1px solid var(--gad-line); white-space: nowrap; }
.gad-meta-i:first-child { border-left: 0; }
.gad-meta-i em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gad-faint); line-height: 1; }
.gad-meta-i b { font-family: var(--gad-num); font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--gad-ink); }
.gad-meta-i.is-neg, .gad-meta-i.is-crit { background: var(--gad-crit-soft); }
.gad-meta-i.is-neg b, .gad-meta-i.is-crit b { color: var(--gad-crit); }
.gad-meta-i.is-near b { color: var(--gad-warn); }
.gad-meta-i.is-ok b { color: var(--gad-ok); }
.gad-ib { width: 26px; height: 26px; border-radius: 6px; }

.gad-tabs { padding: 0 8px; }
.gad-tab { height: 32px; padding: 0 10px; font-size: 11px; }
.gad-tab i { min-width: 16px; height: 16px; font-size: 9.5px; }
.gad-body { padding: 8px 10px 10px; }

.gad .gad-btn { height: 26px; padding: 0 9px; border-radius: 6px; font-size: 10.5px; }
.gad .gad-in { height: 26px; font-size: 11.5px; padding: 0 8px; }
.gad .gad-unit .gad-in { padding-right: 22px; }
.gad .gad-unit i { right: 8px; font-size: 10px; }

/* sections */
.gad-gen2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .95fr); gap: 8px; align-items: stretch; }
.gad-sec { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--gad-line); border-radius: 8px; background: var(--gad-bg); overflow: hidden; }
.gad-sec > header { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--gad-line); background: var(--gad-bg-2); flex-shrink: 0; }
.gad-sec > header span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gad-muted); }
.gad-sec > header em { margin-left: auto; font-style: normal; font-size: 9.5px; color: var(--gad-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gad-sec-b { display: flex; flex-direction: column; gap: 6px; padding: 7px 10px 8px; min-height: 0; }
.gad-grid { display: grid; gap: 6px 8px; }
.gad-grid.c2 { grid-template-columns: 1fr 1fr; }
.gad-grid.c3 { grid-template-columns: 1.35fr .7fr 1fr; }
.gad-lf { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gad-lf > span { font-size: 9.5px; font-weight: 600; color: var(--gad-muted); }
.gad-rov { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; background: var(--gad-bg-2); font-size: 11px; color: var(--gad-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gad-rov.is-mono { font-family: var(--gad-num); font-weight: 600; }
.gad-info { margin-left: 6px; width: 14px; height: 14px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--gad-line-2); color: var(--gad-muted); font-size: 9px; font-style: normal; font-weight: 700; cursor: help; flex-shrink: 0; }
.gad-sec > header .gad-info { margin-left: 4px; }
.gad-info.is-inline { width: 12px; height: 12px; font-size: 8px; margin-left: 3px; vertical-align: 1px; }

.gad-dtab { width: 100%; border-collapse: collapse; font-size: 11px; }
.gad-dtab th { text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gad-faint); padding: 0 6px 3px; }
.gad-dtab td { padding: 4px 6px; border-top: 1px solid var(--gad-line); font-family: var(--gad-num); font-weight: 600; color: var(--gad-ink); white-space: nowrap; }
.gad-dtab td:first-child { width: 58px; font-family: inherit; font-weight: 600; color: var(--gad-muted); font-size: 10.5px; }
.gad-dtab td small { font-family: inherit; font-size: 9px; font-weight: 600; color: var(--gad-faint); margin-right: 6px; text-transform: uppercase; letter-spacing: .04em; }
.gad-dtab .is-neg { color: var(--gad-crit); }
.gad-fb { display: grid; gap: 3px; }
.gad-fb-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px; height: 12px; }
.gad-fb-row em { font-style: normal; font-size: 9.5px; color: var(--gad-faint); }
.gad-fb-track { position: relative; height: 6px; border-radius: 3px; background: var(--gad-bg-3); }
.gad-fb-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--gad-bar); }
.gad-fb-bar.is-crit { background: var(--gad-crit); }
.gad-fb-bar.is-late { background: transparent; border: 1.5px dashed var(--gad-muted); }
.gad-fb-gap { position: absolute; top: 1px; bottom: 1px; background: repeating-linear-gradient(135deg, var(--gad-line-2) 0 3px, transparent 3px 6px); }
.gad-fb-gap.is-neg { background: repeating-linear-gradient(135deg, rgba(209, 67, 43, .45) 0 3px, transparent 3px 6px); }
.gad-negnote { font-size: 10.5px; line-height: 1.35; color: var(--gad-crit); background: var(--gad-crit-soft); border-radius: 6px; padding: 5px 8px; }

.gad-crumbline { font-size: 10.5px; color: var(--gad-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gad-crumbline b { color: var(--gad-ink); font-weight: 600; }
.gad-crumbline i { font-style: normal; color: var(--gad-faint); margin: 0 2px; }
.gad-kvrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gad-kvbox { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; border: 1px solid var(--gad-line); border-radius: 6px; background: var(--gad-bg); font-family: inherit; color: inherit; cursor: pointer; text-align: left; }
.gad-kvbox:hover { border-color: var(--gad-accent-2); }
.gad-kvbox b { font-family: var(--gad-num); font-size: 14px; font-weight: 700; color: var(--gad-ink); }
.gad-kvbox em { font-style: normal; font-size: 10px; color: var(--gad-muted); }
.gad-driver { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; border-radius: 6px; background: var(--gad-bg-2); min-width: 0; }
.gad-driver em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gad-faint); }
.gad-driver b { font-size: 11px; font-weight: 600; color: var(--gad-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gad-sec .gad-hold { margin: 0; max-height: 84px; overflow: auto; }
.gad-sec .gad-hold .gap-hold-row { padding: 5px 8px; }
.gad-sec .gad-hold .gap-hold-b { font-size: 10.5px; }

/* relationships */
.gad-pane { border-radius: 8px; }
.gad-pane-h { padding: 5px 8px; gap: 5px; }
.gad-pane-t { font-size: 9.5px; }
.gad-count { min-width: 17px; height: 17px; font-size: 9.5px; }
.gad-table thead th { padding: 5px 8px; font-size: 9.5px; }
.gad-table tbody td { height: 26px; font-size: 10.5px; }
.gad .gad-cell-in { height: 21px; font-size: 10.5px; padding: 0 5px; border-color: transparent; background: transparent; }
.gad .gad-rr:hover .gad-cell-in, .gad .gad-table tr:hover .gad-cell-in { border-color: var(--gad-line-2); background: var(--gad-bg); }
.gad-drv { font-size: 9.5px; padding: 2px 6px; }
.gad-hint { font-size: 10px; padding-top: 5px; }

/* resources / mapping / scope */
.gad-kpis { gap: 6px; margin-bottom: 8px; }
.gad-kpi { padding: 6px 10px; border-radius: 8px; }
.gad-kpi em { font-size: 9px; }
.gad-kpi b { font-size: 16px; margin-top: 2px; }
.gad-kpi span { font-size: 10px; }
.gad-card { border-radius: 8px; padding: 8px 10px; }
.gad-card-h { margin-bottom: 6px; }
.gad-step { padding: 6px 8px; border-radius: 8px; flex-basis: 104px; }
.gad-step b { font-size: 13px; }
.gad-step em { font-size: 9px; }
.gad .gad-step-in { height: 24px; font-size: 12.5px; }
.gad-formula { margin: 6px 0; padding: 6px 10px; font-size: 11px; border-radius: 8px; }
.gad-strip { border-radius: 8px; padding: 8px 10px; }
.gad-strip-plot { height: 64px; }
.gad-split-main .gad-table, .gad-table.is-map, .gad-table.is-scope { border-radius: 8px; max-height: 220px; }

/* engineering & procurement */
.gad-ep-top { margin-bottom: 8px; gap: 8px; font-size: 11px; }
.gad-verdict { font-size: 11px; padding: 3px 8px; }
.gad-ep-sec { margin-bottom: 10px; }
.gad-ep-sh { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 6px; }
.gad-ep-sh span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gad-ink); }
.gad-ep-sh i { font-style: normal; font-family: var(--gad-num); font-size: 9.5px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--gad-bg-3); color: var(--gad-muted); }
.gad-ep-sh em { font-style: normal; font-size: 10px; color: var(--gad-faint); }
.gad-lanes { border-radius: 8px; padding: 18px 10px 6px; margin-bottom: 8px; }
.gad-lane { height: 28px; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) 84px; }
.gad-lane-l b { font-size: 11px; }
.gad-lane-t { height: 12px; }
.gad-lane-bar { top: 1px; height: 10px; }
.gad-lane-act { top: 0; height: 12px; }
.gad-lane-mark { top: -8px; bottom: -8px; }
.gad-lane-mark i { top: -11px; }
.st-insp { background: #E0A33A; }
.gad-ep-groups { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.gad-ep-g { border-radius: 8px; padding: 7px 10px; }
.gad-ep-g header b { font-size: 11.5px; }
.gad-ep-item { padding: 4px 0; gap: 3px 6px; }
.gad-stage { font-size: 9px; padding: 2px 6px; border-radius: 4px; }
.gad-ep-name { font-size: 11px; }
.gad-ep-d { font-size: 10px; }
.gad-ep-link { font-size: 9.5px; }
.gad-conf { font-size: 9.5px; padding: 2px 6px; }
.gad-conf.is-pkg { background: var(--gad-accent-soft); color: var(--gad-accent); }
.gad-ep-act { padding-top: 5px; border-top: 1px dashed var(--gad-line); margin-top: 2px; }

/* the three cards stay side by side down to a narrow laptop so the General tab
   fits the dock without a scroll; each card scrolls on its own if it must */
.gad-body[data-gad-tab="general"] { overflow: hidden; }
.gad-gen2 { height: 100%; min-height: 0; }
.gad-gen2 > .gad-sec { min-height: 0; }
.gad-sec-b { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 1100px) {
  .gad-meta-i.is-cal { display: none; }
  .gad-grid.c3 { grid-template-columns: 1.2fr .8fr; }
  .gad-grid.c3 > .gad-lf:last-child { grid-column: span 2; }
}
@media (max-width: 900px) {
  .gad-gen2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .gad-gen2 > .gad-sec:last-child { grid-column: span 2; }
}
@media (max-width: 820px) {
  .gad-meta { display: none; }
  .gad-body[data-gad-tab="general"] { overflow: auto; }
  .gad-gen2 { grid-template-columns: 1fr; height: auto; }
  .gad-gen2 > .gad-sec:last-child { grid-column: auto; }
}

/* tabs/gantt/styles/176-gantt-activity-dock-picker.css */
/* ══════════════════════════════════════════════════════════════════════
   ASSIGN PICKER — floating mini Gantt (176). Tokens come from .gadp in
   175-gantt-activity-dock.css.
   ══════════════════════════════════════════════════════════════════════ */

.gadp {
  --gadp-left: 520px;
  position: fixed; z-index: 1300;
  display: flex; flex-direction: column;
  min-width: 640px; min-height: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  background: var(--gad-bg); border: 1px solid var(--gad-line-2); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(11, 27, 51, .28), 0 2px 8px rgba(11, 27, 51, .08);
  overflow: hidden; resize: both;
  animation: gadpIn .2s cubic-bezier(.22, .61, .36, 1);
}
.gadp *, .gadp *::before, .gadp *::after { box-sizing: border-box; }
@keyframes gadpIn { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gadp { animation: none; } }
.gadp.is-dragging { user-select: none; box-shadow: 0 40px 100px rgba(11, 27, 51, .34); }

.gadp-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; cursor: grab; flex-shrink: 0;
  background: linear-gradient(180deg, var(--gad-bg), var(--gad-bg-2)); border-bottom: 1px solid var(--gad-line);
}
.gadp.is-dragging .gadp-head { cursor: grabbing; }
.gadp-glyph { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--gad-accent); color: #FFFFFF; flex-shrink: 0; }
.gadp-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gadp-title strong { font-size: 12.5px; color: var(--gad-ink); }
.gadp-title span { font-size: 10.5px; color: var(--gad-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gadp-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--gad-muted); cursor: pointer; display: grid; place-items: center; }
.gadp-x:hover { background: var(--gad-bg-3); color: var(--gad-ink); }

.gadp-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 9px 14px; border-bottom: 1px solid var(--gad-line); flex-shrink: 0; }
.gadp-search {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; flex: 0 1 280px;
  border: 1px solid var(--gad-line-2); border-radius: 8px; color: var(--gad-faint); background: var(--gad-bg);
}
.gadp-search:focus-within { border-color: var(--gad-accent-2); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.gadp-search { flex: 1 1 200px; min-width: 170px; max-width: 300px; }
.gadp .gadp-search input,
.gadp .gadp-search input:focus,
.gadp .gadp-search input:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent; color: var(--gad-ink); font-weight: 500; font-size: 11.5px; line-height: 1; font-family: inherit; width: 100%; height: 28px; padding: 0; }
.gadp-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.gadp-tools::-webkit-scrollbar { display: none; }
.gadp-seg, .gadp-chk, .gadp-fld { flex-shrink: 0; }
.gadp-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--gad-bg-3); }
.gadp-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--gad-muted); font-weight: 600; font-size: 10.5px; line-height: 1; font-family: inherit; cursor: pointer; }
.gadp-seg button:hover { color: var(--gad-ink); }
.gadp-seg button.is-on { background: var(--gad-bg); color: var(--gad-ink); box-shadow: 0 1px 2px rgba(11, 27, 51, .12); }
.gadp-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gad-text); cursor: pointer; }
.gadp-sp { flex: 1 1 auto; }
.gadp-fld { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--gad-muted); }
.gadp-fld select, .gadp-fld input {
  height: 30px; border: 1px solid var(--gad-line-2); border-radius: 7px; background: var(--gad-bg); color: var(--gad-ink);
  font: 700 11px/1 var(--gad-num); padding: 0 8px; outline: none;
}
.gadp-fld input { width: 64px; text-align: right; }
.gadp-fld select:focus, .gadp-fld input:focus { border-color: var(--gad-accent-2); }

.gadp-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gadp-hdr, .gadp-row { display: grid; grid-template-columns: var(--gadp-left) minmax(0, 1fr); }
.gadp-hdr { flex-shrink: 0; border-bottom: 1px solid var(--gad-line); background: var(--gad-bg-2); height: 30px; }
.gadp-cells { display: grid; grid-template-columns: 30px 108px minmax(0, 1fr) 76px 76px; align-items: center; min-width: 0; border-right: 1px solid var(--gad-line); }
.gadp-hdr .gadp-cells span { font-size: 9.5px; font-weight: 700; color: var(--gad-muted); padding: 0 6px; }
.gadp-track { position: relative; min-width: 0; overflow: hidden; }
.gadp-scale { height: 100%; }
.gadp-tick { position: absolute; top: 0; bottom: 0; padding: 9px 0 0 4px; border-left: 1px solid var(--gad-line); font: 600 9px/1 var(--gad-num); color: var(--gad-muted); white-space: nowrap; }

.gadp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; outline: none; scrollbar-width: thin; }
.gadp-inner { position: relative; }
.gadp-rows { position: absolute; inset: 0; }
.gadp-guides { position: absolute; top: 0; bottom: 0; left: var(--gadp-left); right: 0; pointer-events: none; z-index: 2; }
.gadp-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--gad-accent-2); opacity: .7; }
.gadp-guide.is-finish { border-left-style: dotted; }

.gadp-row { position: absolute; left: 0; right: 0; height: 26px; }
.gadp-row .gadp-cells span { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.gadp-c-id { font: 600 10.5px/1 var(--gad-num); display: flex !important; align-items: center; gap: 4px; }
.gadp-c-date { font: 500 10px/1 var(--gad-num); color: var(--gad-muted); text-align: right; }
.gadp-row.is-wbs { background: var(--wbs-bg); color: var(--wbs-fg); cursor: pointer; }
.gadp-row.is-wbs .gadp-cells span { color: var(--wbs-fg); font-weight: 700; }
.gadp-row.is-wbs .gadp-c-id { padding-left: calc(4px + var(--lvl, 0) * 10px) !important; }
.gadp-row.is-wbs .gadp-c-date { opacity: .8; }
.gadp-row.is-wbs .gadp-track { background: color-mix(in srgb, var(--wbs-bg) 14%, var(--gad-bg)); }
.gadp-tog { width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; transform: rotate(90deg); transition: transform .12s; flex-shrink: 0; }
.gadp-tog.is-collapsed { transform: none; }
.gadp-sum { position: absolute; top: 9px; height: 8px; background: color-mix(in srgb, var(--wbs-bg) 85%, #000); border-radius: 1px; }
.gadp-sum::before, .gadp-sum::after { content: ''; position: absolute; bottom: -4px; border: 4px solid transparent; border-top-color: color-mix(in srgb, var(--wbs-bg) 85%, #000); }
.gadp-sum::before { left: -4px; } .gadp-sum::after { right: -4px; }

.gadp-row.is-act { background: var(--gad-bg); border-bottom: 1px solid var(--gad-line); cursor: pointer; }
.gadp-row.is-act:hover { background: var(--gad-bg-2); }
.gadp-row.is-act .gadp-c-name { padding-left: calc(6px + var(--lvl, 0) * 6px) !important; display: flex !important; align-items: center; gap: 6px; }
.gadp-nm { overflow: hidden; text-overflow: ellipsis; }
.gadp-row.is-picked { background: var(--gad-accent-soft) !important; }
.gadp-row.is-picked .gadp-cells { box-shadow: inset 3px 0 0 var(--gad-accent-2); }
.gadp-row.is-focus { outline: 1.5px solid var(--gad-accent-2); outline-offset: -1.5px; }
.gadp-row.is-current { background: repeating-linear-gradient(135deg, var(--gad-bg-2) 0 6px, var(--gad-bg) 6px 12px); cursor: default; }
.gadp-row.is-current .gadp-c-id { color: var(--gad-accent-2); }
.gadp-row.is-linked { cursor: default; }
.gadp-row.is-linked .gadp-cells span { color: var(--gad-faint); }
.gadp-box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--gad-line-2); display: inline-block; margin-left: 2px; position: relative; background: var(--gad-bg); }
.gadp-box.is-on { background: var(--gad-accent-2); border-color: var(--gad-accent-2); }
.gadp-box.is-on::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gadp-tag { font-style: normal; flex-shrink: 0; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--gad-ok-soft); color: var(--gad-ok); }
.gadp-tag.is-cur { background: var(--gad-accent-2); color: #FFFFFF; }
.gadp-ph { font-style: normal; flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 2px 4px; border-radius: 4px; }
.gadp-ph.ph-eng { background: var(--gad-eng-soft); color: var(--gad-eng); }
.gadp-ph.ph-proc { background: var(--gad-proc-soft); color: var(--gad-proc); }
.gadp-bar { position: absolute; top: 8px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #4CC07A, #2E9E5B); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.gadp-bar.is-crit { background: linear-gradient(180deg, #F0533B, #CF3621); }
.gadp-bar.is-cur { background: linear-gradient(180deg, #4F8DF7, #2563EB); box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); }
.gadp-ms { position: absolute; top: 8px; width: 10px; height: 10px; margin-left: -5px; background: #0B1B33; transform: rotate(45deg); }
.gadp-ms.is-crit { background: #CF3621; } .gadp-ms.is-cur { background: #2563EB; }
.gadp-empty { padding: 40px; text-align: center; color: var(--gad-muted); font-size: 11.5px; }

.gadp-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--gad-line); background: var(--gad-bg-2); flex-shrink: 0; }
.gadp-count { font-size: 11px; font-weight: 600; color: var(--gad-ink); white-space: nowrap; }
.gadp-msg { font-size: 11px; color: var(--gad-muted); opacity: 0; transition: opacity .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gadp-msg.is-on { opacity: 1; }
.gadp-msg.is-bad { color: var(--gad-crit); font-weight: 600; }
.gadp-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--gad-muted); white-space: nowrap; }
.gadp-legend i { width: 14px; height: 7px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.gadp-legend .lg-cur { background: #2563EB; } .gadp-legend .lg-crit { background: #CF3621; } .gadp-legend .lg-norm { background: #2E9E5B; }
.gadp-btn { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--gad-line-2); background: var(--gad-bg); color: var(--gad-text); font-weight: 600; font-size: 11.5px; line-height: 1; font-family: inherit; cursor: pointer; }
.gadp-btn:hover:not(:disabled) { border-color: var(--gad-accent-2); color: var(--gad-accent-2); }
.gadp-btn.is-primary { background: var(--gad-accent); border-color: var(--gad-accent); color: #FFFFFF; min-width: 96px; }
.gadp-btn.is-primary:hover:not(:disabled) { background: var(--gad-accent-2); border-color: var(--gad-accent-2); color: #FFFFFF; }
.gadp-btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 1100px) {
  .gadp { --gadp-left: 400px; min-width: 0; }
  .gadp-cells { grid-template-columns: 28px 90px minmax(0, 1fr) 70px 0; }
  .gadp-cells .gadp-c-date:last-child { display: none; }
  .gadp-legend { display: none; }
}

/* tabs/gantt/styles/178-gantt-bar-layers.css */
/* ══════════════════════════════════════════════════════════════════════════
   VIEW → SHOW — the reference bars on the Gantt

   Per row, in the colours the Update tab already uses, so a planner reads
   one vocabulary on both screens:

       green   the CURRENT schedule — the one the CPM just ran on.
               Owned by 070-gantt-premium-ui-v13.css and deliberately not
               restyled here.
       grey    EVERY saved update, all of them the same grey. A row can
               carry four of them; four colours would make reading progress
               off the row a colour puzzle instead. Which period a bar is
               comes from its place in the stack — newest nearest the
               current bar — and from the name on it.
       amber   the approved baseline, always, whatever happened to the
               activity. A baseline has no status to colour it by.

   ── WHY THE CURRENT BAR MOVES OFF CENTRE ─────────────────────────────────
   The bar is centred in its row by 008-v9-gantt-refresh.css, which leaves
   about three pixels above and below — nowhere near enough for a stack of
   saved periods. So on rows that actually carry tracks, and only on those,
   it is lifted to the top and the tracks run underneath it. `data-bar-tracks`
   is written by the renderer only when there is at least one, so a chart
   with no saved period on screen never meets these rules at all.
   ══════════════════════════════════════════════════════════════════════════ */

#ganttOut .p6-bl-bar,
#ganttOut .p6-upd-bar {
  position: absolute;
  height: 4px;
  min-width: 4px;
  border-radius: 2px;
  pointer-events: none;
}

/* THE BASELINE SITS UNDER EVERYTHING IT IS THE REFERENCE FOR, the way P6
   draws it: the eye reads down from the current bar, through the periods
   that have been filed, to the plan they were all measured against. */
#ganttOut .p6-bl-bar {
  bottom: 0;
  height: 6px;
  z-index: 2;
  background: #D9A419;
  box-shadow: inset 0 0 0 1px rgba(120, 82, 0, .55);
}

/* every saved period, one grey. `top` is written per bar by the renderer,
   which is what puts them in order. */
#ganttOut .p6-upd-bar {
  z-index: 3;
  background: #7C89A6;
  box-shadow: inset 0 0 0 1px rgba(60, 72, 96, .45);
}

#ganttOut .p6-row[data-bar-tracks] .p6-act-bar,
#ganttOut .p6-row[data-bar-tracks] .p6-loe-bar,
#ganttOut .p6-row[data-bar-tracks] .p6-sum-bar,
body #ganttOut .p6-row[data-bar-tracks] .p6-act-bar,
body #ganttOut .p6-row[data-bar-tracks] .p6-sum-bar {
  top: 3px !important;
  transform: none !important;
}
/* a row with the baseline and no saved period: the same lift, so the
   6px amber bar sits under the current one rather than behind it */
#ganttOut .p6-row[data-bar-bl] .p6-act-bar,
#ganttOut .p6-row[data-bar-bl] .p6-loe-bar,
body #ganttOut .p6-row[data-bar-bl] .p6-act-bar {
  top: 1px !important;
  transform: none !important;
}
#ganttOut .p6-row[data-bar-bl] .p6-ms {
  top: 0 !important;
  transform: none !important;
}
#ganttOut .p6-row[data-bar-tracks] .p6-ms {
  top: 2px !important;
  transform: none !important;
}

/* ── THE UPDATE LAYER, TURNED OFF ─────────────────────────────────────────
   The element stays in the DOM because the arrow layer, the bar drag, the
   activity dock and the in-place relation update all read this row's
   geometry; what changes is only what is painted. Pointer events go with the
   paint, so a bar nobody can see is not a bar anyone can drag. */
#ganttOut .p6-bar-off,
body #ganttOut .p6-bar-off,
body[data-gantt-theme="dark"] #ganttOut .p6-bar-off,
body[data-gantt-theme="light"] #ganttOut .p6-bar-off {
  visibility: hidden !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* the Show options read as toggles, not as a pick-one list: any combination
   is legal and the ticked ones are the ones on screen */
#gpx-toolset .gpx-bars-options button {
  display: flex;
  align-items: center;
  gap: 8px;
}
#gpx-toolset .gpx-bars-options button[aria-pressed="true"]::after {
  content: "\2713";
  margin-left: auto;
  font-weight: 700;
  opacity: .9;
}
/* the swatch says which bar each line turns on, so the menu and the chart
   name the same thing */
#gpx-toolset .gpx-bars-options button::before {
  content: "";
  width: 10px;
  height: 4px;
  border-radius: 2px;
  flex: 0 0 10px;
  background: currentColor;
  opacity: .45;
}
#gpx-toolset .gpx-bars-options button[data-bar-layer="bl"]::before { background: #D9A419; opacity: 1; }
#gpx-toolset .gpx-bars-options button[data-bar-layer="cur"]::before { background: #1F9B50; opacity: 1; }
#gpx-toolset .gpx-bars-options button[data-bar-update]::before { background: #7C89A6; opacity: 1; }

/* a project with no saved period says so rather than showing an empty list */
#gpx-toolset .gpx-bars-options .gpx-bars-none {
  padding: 6px 10px;
  font-size: 11px;
  opacity: .65;
  pointer-events: none;
}

/* ── BASELINE ONLY ─────────────────────────────────────────────────────
   The two entries above it are LAYERS that stack on one chart. This one
   is a MODE — while it is on the chart is drawn from the approved dates
   and nothing is laid over them — so a rule separates it from them rather
   than letting it read as a third thing to tick. */
#gpx-toolset .gpx-bars-options .gpx-dd-rule {
  height: 1px;
  margin: 6px 4px;
  background: currentColor;
  opacity: .14;
}

/* ── A MILESTONE REFERENCE IS A DIAMOND, NOT A STUB OF BAR ─────────────
   Every reference was drawn as a rectangle whatever it referenced, so a
   zero-duration milestone got a four-pixel stub under it. P6 draws a
   milestone as a diamond wherever it draws it — on the current bar, on the
   baseline, on a filed period — because the shape is what says "this is a
   moment, not a span". The renderer tags these with .p6-ref-ms and centres
   them on the day they mark. */
#ganttOut .p6-bl-bar.p6-ref-ms,
#ganttOut .p6-upd-bar.p6-ref-ms {
  width: 8px;
  height: 8px;
  min-width: 0;
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: none;
}
#ganttOut .p6-bl-bar.p6-ref-ms { bottom: 0; }

/* ── ACTUAL WORK IS BLUE, THE WAY P6 DRAWS IT ──────────────────────────
   The renderer derives each activity's status from its actual dates
   (UpdateProgress.progressFor) and tags the bar:

       .p6-prog-done     complete — blue from end to end
       .p6-prog-active   in progress — blue from the actual start up to the
                         Data Date (--dd-x, measured from the bar's left
                         edge), the ordinary colour after it: green, or red
                         on the critical path

   The selectors carry `html` and `.p6-row` so they outrank every theme's
   own !important bar colour (070, 016, 021 — light and dark alike) without
   touching those files. */
html body #ganttOut .p6-row .p6-act-bar.p6-prog-done,
html body #ganttOut .p6-row .p6-act-bar.p6-prog-done.crit {
  background: linear-gradient(180deg, #4F86EE 0%, #2458C6 100%) !important;
  border-color: #1B449B !important;
  box-shadow: 0 1px 3px rgba(27, 68, 155, .30), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}
html body #ganttOut .p6-row .p6-act-bar.p6-prog-active {
  background:
    linear-gradient(90deg, #2F63D2 0, #2F63D2 var(--dd-x, 0px), transparent var(--dd-x, 0px)),
    linear-gradient(180deg, #34C36B 0%, #1F9B50 100%) !important;
}
html body #ganttOut .p6-row .p6-act-bar.p6-prog-active.crit {
  background:
    linear-gradient(90deg, #2F63D2 0, #2F63D2 var(--dd-x, 0px), transparent var(--dd-x, 0px)),
    linear-gradient(180deg, #F0533B 0%, #CF3621 100%) !important;
}
html body #ganttOut .p6-row .p6-ms.p6-prog-done {
  background: linear-gradient(135deg, #4F86EE 0%, #2458C6 100%) !important;
  border-color: #1B449B !important;
}
/* a resource-dependent activity keeps its own colour for the work still to do */
html body #ganttOut .p6-row .p6-act-bar.p6-rsrc-bar.p6-prog-active:not(.crit) {
  background:
    linear-gradient(90deg, #2F63D2 0, #2F63D2 var(--dd-x, 0px), transparent var(--dd-x, 0px)),
    linear-gradient(180deg, #4E9BD6 0%, #2E72A8 100%) !important;
}

/* tabs/gantt/styles/181-derived-activity-bars.css */
/* Derived activities keep their own shapes at every row density and zoom.
   WBS tree rows continue to use the black summary bracket. */
html body #ganttOut .p6-row .p6-right .p6-sum-bar.p6-wbs-act {
  --derived-ink: #4d718e;
  --derived-wash: rgba(77, 113, 142, .12);
  position: absolute !important;
  height: 9px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--derived-ink) !important;
  border-radius: 1px !important;
  background: repeating-linear-gradient(135deg, var(--derived-wash) 0 3px, transparent 3px 7px) !important;
  box-shadow: none !important;
  overflow: visible !important;
  clip-path: none !important;
}
html body #ganttOut .p6-row .p6-right .p6-sum-bar.p6-wbs-act::before,
html body #ganttOut .p6-row .p6-right .p6-sum-bar.p6-wbs-act::after {
  content: none !important;
  display: none !important;
}
html body #ganttOut .p6-wbs-act .summary-cap-l,
html body #ganttOut .p6-wbs-act .summary-cap-r {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 11px;
  border: 0;
  border-radius: 1px;
  background: var(--derived-ink);
  pointer-events: none;
}
html body #ganttOut .p6-wbs-act .summary-cap-l { left: -1px; }
html body #ganttOut .p6-wbs-act .summary-cap-r { right: -1px; }

html body #ganttOut .p6-row .p6-right .p6-loe-bar {
  --derived-ink: #7861a4;
  --derived-wash: rgba(120, 97, 164, .10);
  position: absolute !important;
  height: 9px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--derived-wash) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body #ganttOut .p6-row .p6-right .p6-loe-bar::before {
  content: "" !important;
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--derived-ink) 0 6px, transparent 6px 10px);
  pointer-events: none;
}
html body #ganttOut .p6-loe-bar .loe-cap-l,
html body #ganttOut .p6-loe-bar .loe-cap-r {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 50%;
  background: var(--derived-ink);
  pointer-events: none;
}
html body #ganttOut .p6-loe-bar .loe-cap-l { left: 0; }
html body #ganttOut .p6-loe-bar .loe-cap-r { right: 0; }

/* Shape continues to identify the type when a critical activity turns red. */
html body #ganttOut .p6-row .p6-right .p6-wbs-act.crit,
html body #ganttOut .p6-row .p6-right .p6-loe-bar.crit {
  --derived-ink: #bf493d;
  --derived-wash: rgba(191, 73, 61, .13);
}
html body[data-gantt-theme="dark"] #ganttOut .p6-row .p6-right .p6-wbs-act {
  --derived-ink: #a3c3de;
  --derived-wash: rgba(163, 195, 222, .15);
}
html body[data-gantt-theme="dark"] #ganttOut .p6-row .p6-right .p6-loe-bar {
  --derived-ink: #bba5e5;
  --derived-wash: rgba(187, 165, 229, .15);
}
html body[data-gantt-theme="dark"] #ganttOut .p6-row .p6-right .p6-wbs-act.crit,
html body[data-gantt-theme="dark"] #ganttOut .p6-row .p6-right .p6-loe-bar.crit {
  --derived-ink: #ff9385;
  --derived-wash: rgba(255, 147, 133, .15);
}

/* The main shape shares the reference-layer positioning of task bars.
   These override old type-specific top:50% rules without covering tracks. */
html body #ganttOut .p6-row[data-bar-tracks] .p6-right .p6-wbs-act,
html body #ganttOut .p6-row[data-bar-tracks] .p6-right .p6-loe-bar {
  top: 3px !important;
  transform: none !important;
}
html body #ganttOut .p6-row[data-bar-bl]:not([data-bar-tracks]) .p6-right .p6-wbs-act,
html body #ganttOut .p6-row[data-bar-bl]:not([data-bar-tracks]) .p6-right .p6-loe-bar {
  top: 1px !important;
  transform: none !important;
}

/* styles/tabs/sow.css */
/* ===========================================================================
   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.
   ========================================================================= */

/* The tab's tokens. #sicHdrTools is the toolbar this tab puts in the app
   header — outside #tp-sow, so it was resolving every var() to nothing: the
   AI Insights button computed `background: var(--sic-card)` → invalid →
   transparent, keeping its literal `color:#fff`, which is white text on the
   light header. It reads the same tokens as the panel now. */
#tp-sow, #sicHdrTools {
  /* 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;
}

/* The page's own ground, which the toolbar in the header must not take. */
#tp-sow {
  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 lives IN the app header now.

   It carried its own 320px search field until it didn't: the field sat a few
   inches from the app header's magnifier — two searches in one bar — and the
   two of them together left the title so little room that "Scope of Work /
   Scope Intelligence Center · build" wrapped onto three lines. The field is
   gone (tabs/sow/sic-views.js), the magnifier is the header's one search on
   this tab like on every other, and scope search itself lives in the field
   inside Scope Breakdown, which searches the whole model. What is left here
   is the title and the four actions, on one line.
   ═══════════════════════════════════════════════════════════════════════ */
#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;
}

/* The actions stand at the same height and radius as the bar's own controls
   (search, Close Project), so the row reads as one set rather than as a tab's
   widgets parked next to the shell's. */
#sicHdrTools .sic-btn {
  height: var(--app-hdr-control, 38px);
  border-radius: 12px;
  background: rgba(255, 255, 255, .70);
  border-color: var(--nx-border, #E6EAEE);
}
#sicHdrTools .sic-btn:hover { background: #FFFFFF; }
#sicHdrTools .sic-btn.is-primary { background: var(--sic-ink); border-color: var(--sic-ink); }
#sicHdrTools .sic-btn.is-primary:hover { background: #0D1720; }

/* One line each, and the title yields before the actions do. */
.sic-hdr-title { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; padding-left: 4px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.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); white-space: nowrap; text-overflow: ellipsis; }
.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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 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-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; gap: 6px; }
}