:root {
  --bg: #f5f8fd;
  --bg-panel: #ffffff;
  --ink: #1a2233;
  --ink-soft: #566078;
  --ink-faint: #93a0b8;
  --line: #e4ebf5;
  --line-strong: #d2ddec;
  --accent: #3562e8;
  --accent-2: #12b8a6;
  --accent-soft: #e8eefd;
  --green: #1a9f6b;
  --green-bg: #e4f7ee;
  --amber: #e08a1e;
  --amber-bg: #fdf1de;
  --red: #e2445c;
  --red-bg: #fde9ed;
  --black: #1c1d24;
  --black-bg: #e4e4e9;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(30, 41, 59, 0.04), 0 10px 28px rgba(52, 82, 200, 0.08);
  --shadow-hover: 0 4px 10px rgba(30, 41, 59, 0.06), 0 16px 36px rgba(52, 82, 200, 0.14);
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  background-image:
    radial-gradient(circle at 8% 6%, rgba(53, 98, 232, 0.09), transparent 42%),
    radial-gradient(circle at 94% 2%, rgba(18, 184, 166, 0.08), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255, 190, 90, 0.05), transparent 45%);
  background-attachment: fixed;
}

.wrap {
  /* Bumped from 1160px for the Grid tab's 9-stage table. (2026-10-06:
     .stage-grid no longer carries an accumulated min-width that could
     exceed this container — see the note on .stage-grid itself — so
     this max-width is just the page's normal content width, not a
     lower bound the table has to clear.) */
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

/* ---------- Header ---------- */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 26px 30px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}

.masthead-title .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  background: var(--accent-soft);
  padding: 4px 11px;
  border-radius: 999px;
}

.masthead-title h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.masthead-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.masthead-meta strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}

.masthead-actions {
  margin-top: 10px;
}

/* ---------- Buttons ---------- */

.btn-ghost, .btn-primary {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--bg-panel);
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-primary {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(53, 98, 232, 0.28);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(53, 98, 232, 0.36);
}

.btn-small {
  padding: 7px 13px;
  font-size: 10.5px;
}

.card-action-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ---------- Tabs ---------- */

.tabbar {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 30px;
  padding: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}

.tab-btn:hover { color: var(--ink); }

.tab-btn.is-active {
  color: #fff;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 4px 12px rgba(53, 98, 232, 0.28);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- Metrics row ---------- */

/* Shared by three different KPI strips with three different card counts
   (Program Status: 6, Grid tab: 4, Dependencies tab: 4) — a fixed
   `repeat(6, 1fr)` grid only ever looked right for the one with exactly 6
   cards; everyone else's 4 cards occupied 4 of 6 columns and left a dead
   gap on the right instead of stretching to fill the row (2026-10-05).
   Flex instead of grid makes this count-agnostic: any number of cards
   always stretches evenly across the full width, and `flex-wrap` + a
   `min-width` floor (see `.metric-card`) still wraps to fewer per row on
   narrow screens without needing a breakpoint per card-count. */
.metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.metric-card {
  /* Percentage basis (not a fixed px width) so the same wrap point works
     regardless of card count: below it, flex-wrap kicks in; above it,
     flex-grow stretches every card — 4-card and 6-card rows alike — out
     to fill whatever room is left on their row. */
  flex: 1 1 15%;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 14px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.metric-card.is-clickable {
  cursor: pointer;
  user-select: none;
}

.metric-card.is-clickable:hover {
  border-color: var(--accent);
}

.metric-card.is-active {
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-hover);
  transform: translateY(-2px);
}

.metric-card.is-active.tone-green { box-shadow: 0 0 0 3px rgba(46, 160, 92, 0.22), var(--shadow-hover); }
.metric-card.is-active.tone-amber { box-shadow: 0 0 0 3px rgba(217, 143, 21, 0.22), var(--shadow-hover); }
.metric-card.is-active.tone-red { box-shadow: 0 0 0 3px rgba(214, 62, 62, 0.22), var(--shadow-hover); }
.metric-card.is-active.tone-black { box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.18), var(--shadow-hover); }

.metric-card.tone-green { border-top-color: var(--green); }
.metric-card.tone-amber { border-top-color: var(--amber); }
.metric-card.tone-red { border-top-color: var(--red); }
.metric-card.tone-black { border-top-color: var(--black); }
.metric-card.tone-accent { border-top-color: var(--accent); }

.metric-card .num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.metric-card .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.metric-card.tone-green .num { color: var(--green); }
.metric-card.tone-amber .num { color: var(--amber); }
.metric-card.tone-red .num { color: var(--red); }
.metric-card.tone-black .num { color: var(--black); }
.metric-card.tone-accent .num { color: var(--accent); }

/* ---------- Section headings ---------- */

.section-heading {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-heading::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  flex-shrink: 0;
}

.section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.section-subhead {
  font-size: 13px;
  color: var(--ink-faint);
  margin: -8px 0 16px;
}

/* Clarifies that the auto-detected schedule-shift log is a per-event list,
   not an additive total — sits right under that log instead of the usual
   -8px-top-margin "subhead" position (that negative margin is meant to
   hug a heading right above it; here it follows a list of rows instead). */
.stagedetail-log-note {
  margin: 10px 0 16px;
  font-style: italic;
}

/* ---------- Global project + PM filter (applies to every tab) ---------- */

.global-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 7px 8px 7px 16px;
  margin-bottom: 22px;
  width: fit-content;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.global-filter-bar:hover {
  box-shadow: var(--shadow-hover);
}

.global-filter-bar.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
}

.global-filter-icon {
  font-size: 14px;
  line-height: 1;
}

.global-filter-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
}

.global-filter-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.global-filter-select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.global-filter-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1.5px solid var(--line-strong);
  background: var(--accent-soft);
  color: var(--ink);
  padding: 7px 30px 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
  min-width: 170px;
}

.global-filter-select:hover {
  border-color: var(--accent);
}

.global-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.global-filter-clear {
  appearance: none;
  border: none;
  background: var(--line);
  color: var(--ink-soft);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.global-filter-clear:hover {
  background: var(--red-bg);
  color: var(--red);
  transform: rotate(90deg);
}

.global-filter-hint {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  padding-right: 6px;
}

.global-filter-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line-strong);
  margin: 4px 2px;
}

/* Wraps the Team filter's label/select/clear-button so the whole group
   can be hidden together (as one unit, keeping the 10px gap consistent)
   on tabs where filtering by team has no effect — see wireTabs(). */
.global-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 640px) {
  .global-filter-bar {
    flex-wrap: wrap;
    border-radius: var(--radius);
  }
  .global-filter-hint { display: none; }
}

/* Per-project stage-gate timeline (project detail view) — same visual
   language as the cross-project Hawk-eye tab (real date axis, blocks
   colored by status, dashed for not-yet-reached stages, a "Today" line),
   rebuilt 2026-09-30 from a flat list of rows into this single-project
   visual timeline. Reuses the same stage-segment / SLA computation as the
   Grid tab and Hawk-eye (computeStageSegments, buildHawkeyeBlocks,
   stageSlaDays, stageFlagLevel) — see `buildStageGateTimeline()`. */
.stagegantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-soft);
}

.stagegantt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stagegantt-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  border: 1.5px solid var(--line);
}
.stagegantt-legend-swatch.is-done { background: var(--green-bg); border-color: var(--green); }
.stagegantt-legend-swatch.is-current { background: var(--accent-soft); border-color: var(--accent); }
.stagegantt-legend-swatch.is-warn { background: var(--amber-bg); border-color: var(--amber); }
.stagegantt-legend-swatch.is-breach { background: var(--red-bg); border-color: var(--red); }
.stagegantt-legend-swatch.is-future { background: var(--bg); border-color: #7c8ba8; border-style: dashed; }
.stagegantt-legend-swatch.is-future.is-plan-overdue { background: var(--red-bg); border-color: var(--red); border-style: dashed; }

.stagegantt-scroll {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.stagegantt-months {
  position: relative;
  height: 20px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 6px;
}

.stagegantt-month-mark {
  position: absolute;
  top: 0;
  transform: translateX(-2px);
  border-left: 1px solid var(--line-strong);
  padding-left: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Tall enough for the block itself (top ~34px) plus its 2-line caption
   underneath it (~28px, down from 3 lines/~38px, 2026-10-16 — "the
   timeline needs to be cleaner too", merged the date range + day-count
   into one line) — see `.stagegantt-caption`. Block spacing is computed
   in JS to always reserve room for the caption text, so there's never a
   need for a second staggered tier. */
.stagegantt-track {
  position: relative;
  height: 68px;
}

.stagegantt-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.stagegantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  z-index: 2;
}

.stagegantt-today-label {
  position: absolute;
  top: -18px;
  left: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.stagegantt-block {
  /* Clickable again (2026-10-16, re-added same day it was removed —
     "I want to click on this - and make it such a way people know
     they can click on it"). Followed up same day — "can you make
     those boxes easy to know you can click on them" — hover-only cues
     aren't visible without hovering, so a RESTING shadow (same idea as
     .btn-primary's always-on colored shadow) now signals "clickable"
     even before you touch it; hover/focus adds a stronger ring + a
     slight lift, same language the app's other buttons already use. */
  position: absolute;
  top: 0;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(30, 41, 59, 0.16);
  transition: box-shadow 0.12s ease, transform 0.12s ease, outline-color 0.12s ease;
  z-index: 1;
}
.stagegantt-block:hover,
.stagegantt-block:focus-visible {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 10px rgba(30, 41, 59, 0.2);
  transform: translateY(-1px);
}
.stagegantt-block:focus-visible { outline: none; }

.stagegantt-block.is-done {
  background: var(--green-bg);
  border: 1px solid var(--green);
  color: var(--green);
}
.stagegantt-block.is-current {
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow);
}
.stagegantt-block.is-current.is-warn {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: var(--amber);
}
.stagegantt-block.is-current.is-breach {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}
.stagegantt-block.is-future {
  background: var(--bg);
  border: 1.5px dashed #7c8ba8;
  color: #4a5878;
  font-weight: 600;
}
/* A "future/not started" stage whose own real planned window has already
   fully passed (2026-10-06) — the project hasn't reported moving into it
   yet even though its own plan says it should be done by now. Distinct
   from a normal upcoming dashed chip so it reads as "overdue to even
   start," not "not due yet." */
.stagegantt-block.is-future.is-plan-overdue {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-bg);
}

.stagegantt-caption {
  position: absolute;
  top: 38px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}
.stagegantt-caption-stage {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

/* Quieter single tone (2026-10-16) now that this line carries BOTH the
   date range and day-count merged together — the old bold/dark weight
   was tuned for just the short "29d" count, not a full date range. */
.stagegantt-caption-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-faint);
}
.stagegantt-caption-meta.is-plan-overdue { color: var(--red); font-weight: 700; }

/* ---------- Project × Stage grid tab ---------- */

.stage-col-empty {
  color: var(--ink-faint);
  font-size: 12px;
  padding: 8px 0;
}
.stage-grid-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--ink-soft);
}

.stage-grid-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stage-grid-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--bg);
}

.stage-grid-metric-sub {
  font-size: 10.5px;
  color: var(--ink-faint);
  /* `margin-top: auto` (not a fixed 4px) pushes this line all the way to
     the bottom of its .metric-card. Every card in a .metrics-row grid
     stretches to match the tallest sibling by default, so whichever
     card's label happens to wrap to 2 lines sets the row height — this
     way every OTHER card's "sub" line still lands at that same bottom
     edge, without needing to force every label into an artificial fixed
     height (which just left ugly forced gaps under short 1-line labels).
     Num stays pinned to the top; label sits naturally in between. */
  margin-top: auto;
  padding-top: 4px;
}

.stage-grid-swatch.is-done { background: var(--green-bg); border-color: var(--green); }
.stage-grid-swatch.is-done.is-was-breach { background: var(--red-bg); border-color: var(--red); }
.stage-grid-swatch.is-current { background: var(--accent-soft); border-color: var(--accent); }
.stage-grid-swatch.is-current.is-warn { background: var(--amber-bg); border-color: var(--amber); }
.stage-grid-swatch.is-current.is-breach { background: var(--red-bg); border-color: var(--red); }

.stage-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  margin-bottom: 36px;
}

.stage-grid {
  display: flex;
  flex-direction: column;
  /* Deliberately NO fixed/accumulated min-width here (2026-10-06,
     replacing the old "name 200 + 9*110 + total 90 = 1280px" rule that
     was wider than the page's own 1264px content area and forced a
     permanent horizontal scrollbar even on full-width desktop screens).
     Each cell below still has its own small min-width as a floor for
     legibility, but the sum of those floors (name 140 + 9*64 + total 64
     = 780px) comfortably fits inside .wrap's content width, so flex:1
     on the stage cells stretches them to fill whatever space is
     actually available instead of overflowing it. .stage-grid-wrap
     keeps overflow-x: auto as a fallback for genuinely narrow viewports
     below ~780px, not as the normal case. */
  min-width: 0;
}

.stage-grid-row {
  display: flex;
}

.stage-grid-header .stage-grid-cell {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg);
}

.stage-grid-cell {
  flex: 1;
  min-width: 64px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Lets single long words (e.g. "PROPOSAL", "REQUIREMENTS",
     "DEVELOPMENT") wrap onto a second line instead of visually
     overflowing past the cell's own (now-shrinkable) width and bleeding
     into the neighboring column — see the .stage-grid min-width note
     above (2026-10-06). */
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

.stage-grid-row:last-child .stage-grid-cell { border-bottom: none; }
.stage-grid-cell:last-child { border-right: none; }

.stage-grid-name-cell {
  flex: 0 1 180px;
  min-width: 140px;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  position: sticky;
  left: 0;
  background: var(--bg-panel);
  z-index: 1;
}

.stage-grid-header .stage-grid-name-cell {
  cursor: default;
  background: var(--bg);
  z-index: 2;
}

.stage-grid-row:hover .stage-grid-name-cell { background: var(--accent-soft); }
.stage-grid-header:hover .stage-grid-name-cell { background: var(--bg); }

.stage-grid-name-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* "Total" lifecycle column — pinned to the right edge, visually set apart
   (left border + tinted background) from the per-stage breakdown since
   it's a summary of the whole row, not another stage. */
.stage-grid-total-col,
.stage-grid-total-cell {
  flex: 1 0 64px;
  min-width: 64px;
  border-left: 2px solid var(--line);
  background: var(--bg);
}
.stage-grid-total-cell .stage-grid-days { font-weight: 700; }
.stage-grid-row:hover .stage-grid-total-cell { background: var(--accent-soft); }
.stage-grid-totals-row .stage-grid-total-cell { background: var(--green-bg); }

.stage-grid-name-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.stage-grid-name-text strong {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-grid-name-meta {
  font-size: 10.5px;
  color: var(--ink-faint);
}

.stage-grid-status-cell {
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  transition: box-shadow 0.12s ease;
}

.stage-grid-status-cell:hover {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.stage-grid-status-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.stage-grid-status-cell.is-done {
  background: var(--green-bg);
  color: var(--green);
}

.stage-grid-status-cell.is-done.is-was-breach {
  background: var(--red-bg);
  color: var(--red);
}

.stage-grid-daterange {
  font-size: 9.5px;
  opacity: 0.75;
}

.stage-grid-daterange.is-was-breach {
  color: var(--red);
  opacity: 1;
  font-weight: 700;
}

.stage-grid-col-sla {
  display: block;
  font-size: 9px;
  font-weight: 500;
  text-transform: none;
  color: var(--ink-faint);
  margin-top: 2px;
}

.stage-grid-status-cell.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.stage-grid-status-cell.is-current.is-warn {
  background: var(--amber-bg);
  color: var(--amber);
}

.stage-grid-status-cell.is-current.is-breach {
  background: var(--red-bg);
  color: var(--red);
  font-weight: 700;
}

.stage-grid-status-cell.is-none {
  color: var(--ink-faint);
  background: var(--bg);
  cursor: default;
}

.stage-grid-days { font-weight: 700; }
.stage-grid-sla { font-size: 9.5px; opacity: 0.75; }

/* Portfolio-totals row — pinned right under the header, bolder border +
   tinted name cell so it visually reads as "summary", not another
   project row. */
.stage-grid-totals-row {
  border-bottom: 2px solid var(--line);
}
.stage-grid-totals-row .stage-grid-cell {
  border-bottom: 2px solid var(--line);
  /* A touch taller + more line-height than a regular grid cell — this row
     stacks two lines of text ("Xd total" / "+Xd over, combined") and is
     meant to read as an easy-to-scan summary, not a cramped data cell. */
  padding-top: 13px;
  padding-bottom: 13px;
}
.stage-grid-totals-row .stage-grid-status-cell {
  gap: 4px;
  line-height: 1.3;
}
.stage-grid-totals-label {
  background: var(--bg);
  justify-content: flex-start;
}
.stage-grid-totals-cell {
  cursor: default;
}
.stage-grid-totals-cell:hover { box-shadow: none; }
.stage-grid-totals-cell.is-done {
  background: var(--green-bg);
  color: var(--green);
}
.stage-grid-totals-cell.is-was-breach {
  background: var(--red-bg);
  color: var(--red);
}
.stage-grid-totals-cell.is-none {
  color: var(--ink-faint);
  background: var(--bg);
}

@media (max-width: 720px) {
  .stage-grid-wrap { border-radius: 12px; }
}

/* ---------- Struck-through date pair (used in the Schedule change log) ---------- */

.golive-date-original {
  text-decoration: line-through;
  color: var(--ink-faint);
}

.golive-arrow {
  margin: 0 6px;
  color: var(--ink-faint);
}

.golive-date-current {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Dependencies tab ---------- */

.deps-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

.deps-group {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.deps-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.deps-group-head h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}

.deps-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.deps-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.deps-card:last-child { border-bottom: none; }

.deps-card-project {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 4px;
  cursor: pointer;
}

.deps-card-project:hover { color: var(--accent); }

.deps-card-text {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.escalations-group {
  border-color: #f0bcbc;
}

.escalations-group .deps-group-head {
  background: var(--red-bg);
  border-bottom-color: #f0bcbc;
}

.escalations-owner {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
}

.escalations-list {
  margin: 0;
  padding: 4px 16px 4px 34px;
  list-style: disc;
}

.escalations-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

.escalations-list li:last-child { border-bottom: none; }

.deps-card-mitigation {
  font-size: 12px;
  color: var(--ink-faint);
}

.deps-card-mitigation.is-missing {
  color: var(--amber);
}

.deps-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.deps-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.deps-badge-priority.is-critical { background: var(--red-bg); color: var(--red); border-color: #f0bcbc; }
.deps-badge-priority.is-high { background: var(--amber-bg); color: var(--amber); border-color: #f3d6a8; }
.deps-badge-priority.is-medium { background: var(--bg); color: var(--ink-soft); border-color: var(--line); }
.deps-badge-priority.is-low { background: var(--bg); color: var(--ink-faint); border-color: var(--line); }

.deps-badge-due.is-overdue { background: var(--red-bg); color: var(--red); border-color: #f0bcbc; }
.deps-badge-due.is-today,
.deps-badge-due.is-tomorrow,
.deps-badge-due.is-this-week { background: var(--amber-bg); color: var(--amber); border-color: #f3d6a8; }
.deps-badge-due.is-next-week,
.deps-badge-due.is-this-month,
.deps-badge-due.is-next-month { background: var(--bg); color: var(--ink-soft); border-color: var(--line); }
.deps-badge-due.is-no-date { background: var(--bg); color: var(--ink-faint); border-color: var(--line); font-style: italic; }

.deps-badge-escalated {
  background: var(--red-bg);
  color: var(--red);
  border-color: #f0bcbc;
  font-weight: 600;
}

.deps-pivot-escalated-flag {
  margin-left: 4px;
  font-size: 12px;
}

/* ---------- Dependencies tab: pivot rollup ---------- */

.deps-pivot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 10px;
}

/* Visually separates the "Escalated to leadership" section (merged in from
   the former standalone Escalations tab) from the dependency Detail board
   above it, since they're two distinct concerns sharing one tab now. */
.deps-escalations-head {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.deps-pivot-head-left {
  flex: 1 1 220px;
  min-width: 0;
}

.deps-pivot-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.deps-pivot-head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.deps-control {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.deps-control-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.deps-control-select {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  min-width: 118px;
  cursor: pointer;
}

.deps-compact-toggle.is-active {
  color: #fff;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
}

.deps-export-btn {
  background: linear-gradient(120deg, #e07a1a 0%, #d97706 100%);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.28);
}

.deps-export-btn:hover {
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.36);
}

.deps-pivot-title {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0;
}

.deps-detail-title {
  margin: 24px 0 10px;
}

.deps-view-toggle {
  display: inline-flex;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow);
}

.deps-view-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.deps-view-btn:hover { color: var(--ink); }

.deps-view-btn.is-active {
  color: #fff;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 3px 8px rgba(53, 98, 232, 0.28);
}

.deps-pivot-wrap {
  overflow-x: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
}

table.deps-pivot {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 760px;
}

table.deps-pivot th,
table.deps-pivot td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.deps-pivot thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.deps-pivot-group-head {
  text-align: left;
  font-weight: 600;
}

.deps-pivot-group-cell {
  text-align: left;
}

/* Group total row: accent bar + tinted band (status-history row language) */
.deps-pivot-group-total-row {
  background: linear-gradient(90deg, var(--accent-soft) 0%, rgba(232, 238, 253, 0.35) 55%, var(--bg-panel) 100%);
}

.deps-pivot-group-total-row .deps-pivot-primary-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  border-left: 4px solid var(--accent);
  padding-left: 12px;
}

.deps-pivot-total-meta-cell {
  vertical-align: middle;
}

.deps-pivot-total-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-panel);
  border: 1px solid rgba(53, 98, 232, 0.28);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Breakdown rows: nested under the group total */
.deps-pivot-breakdown-row {
  background: var(--bg-panel);
}

.deps-pivot-breakdown-row .deps-pivot-sub-cell {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 12px;
  padding-left: 8px;
}

.deps-pivot-breakdown-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
}

.deps-pivot-breakdown-label::before {
  content: "↳";
  flex-shrink: 0;
  font-size: 11px;
  color: var(--accent);
  opacity: 0.75;
}

.deps-pivot-group-end td {
  border-bottom: 2px solid var(--line-strong);
}

.deps-pivot-group-end td:first-child {
  box-shadow: inset 4px 0 0 var(--accent-soft);
}

.deps-pivot-wrap.is-compact table.deps-pivot {
  font-size: 10.5px;
}

.deps-pivot-wrap.is-compact table.deps-pivot th,
.deps-pivot-wrap.is-compact table.deps-pivot td {
  padding: 4px 6px;
}

.deps-pivot-num.is-zero {
  color: var(--ink-faint);
  opacity: 0.55;
}

.deps-pivot-num.is-clickable {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.deps-pivot-num.is-clickable:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(53, 98, 232, 0.22);
}

.deps-pivot-num.is-priority.is-critical { color: var(--red); font-weight: 700; }
.deps-pivot-num.is-priority.is-high { color: var(--amber); font-weight: 700; }
.deps-pivot-num.is-priority.is-medium { color: var(--ink-soft); font-weight: 600; }
.deps-pivot-num.is-priority.is-low { color: var(--ink-faint); }

.deps-pivot-num.is-overdue {
  color: var(--red);
  font-weight: 700;
}

.deps-pivot-num.is-due-soon {
  color: var(--accent);
  font-weight: 600;
}

.deps-pivot-total {
  font-weight: 700;
  color: var(--ink);
}

.deps-pivot-group-total-row .deps-pivot-total.is-clickable {
  background: linear-gradient(120deg, #e07a1a 0%, #d97706 100%);
  color: #fff;
  border-radius: 6px;
}

/* Use the combined ".modal.deps-drill-modal" selector (not just
   ".deps-drill-modal") so this reliably beats the later, equally-specific
   ".modal { max-width: 440px; }" rule in the cascade regardless of source
   order — this is what was silently squeezing the drill-down modal down
   to 440px and forcing the Description column to wrap one word per line. */
.modal.deps-drill-modal {
  max-width: min(920px, 96vw);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.deps-drill-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.deps-drill-modal-head h3 {
  margin: 0;
}

.deps-drill-close {
  position: static;
  flex-shrink: 0;
}

.deps-drill-list {
  overflow-y: auto;
  overflow-x: auto;
  margin-top: 8px;
}

table.deps-drill-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

/* Fixed column widths so the short columns (priority/date/escalated
   badges) can't shrink-to-fit and steal room from Description, and
   Description gets the majority of the remaining width instead of
   collapsing to a single-word-per-line column. */
table.deps-drill-table col.deps-drill-col-project { width: 14%; }
table.deps-drill-table col.deps-drill-col-team { width: 12%; }
table.deps-drill-table col.deps-drill-col-priority { width: 10%; }
table.deps-drill-table col.deps-drill-col-due { width: 12%; }
table.deps-drill-table col.deps-drill-col-escalated { width: 10%; }
table.deps-drill-table col.deps-drill-col-desc { width: 42%; }

table.deps-drill-table th,
table.deps-drill-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

table.deps-drill-table td.deps-drill-col-project,
table.deps-drill-table td.deps-drill-col-team,
table.deps-drill-table td.deps-drill-col-priority,
table.deps-drill-table td.deps-drill-col-due,
table.deps-drill-table td.deps-drill-col-escalated {
  white-space: nowrap;
}

table.deps-drill-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: var(--bg);
  position: sticky;
  top: 0;
  white-space: nowrap;
}

.deps-drill-desc {
  white-space: normal;
  color: var(--ink-soft);
  line-height: 1.4;
}

.deps-empty-group {
  padding: 24px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ---------- Status history ---------- */

.status-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-history-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.status-history-row:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.status-history-row.is-worse { border-left-color: var(--red); }
.status-history-row.is-better { border-left-color: var(--green); }
.status-history-row.kind-schedule { border-left-color: var(--accent); }
.status-history-row.kind-timesaved { border-left-color: var(--green); }

.schedule-shift-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.schedule-shift-badge.is-saved {
  color: var(--green);
  background: var(--green-bg);
}

.status-history-date {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding-top: 4px;
}

.status-history-transition {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-history-arrow {
  color: var(--ink-faint);
  font-size: 13px;
}

.status-history-project {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0 0 0 4px;
  margin-left: auto;
  cursor: pointer;
  text-decoration: none;
}

.status-history-project:hover {
  color: var(--accent);
  text-decoration: underline;
}

.status-history-context {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.status-history-tracking {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.status-history-tracking-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  font-weight: 600;
}

.status-history-reason {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
}

.status-history-reason-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  font-weight: 700;
}

.status-history-reason-missing {
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 600;
}

.schedule-changelog-subhead {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 4px 0 8px;
}

/* Collapsible "Date change log" — collapsed by default (see
   buildCollapsibleChangelog()) so a project with a long CR history
   doesn't push everything below it in the project detail view down by a
   full screen's worth of rows. */
.schedule-changelog-wrap { margin-top: 4px; }
.schedule-changelog-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  padding: 4px 0 8px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.schedule-changelog-chevron {
  font-size: 10px;
  color: var(--ink-faint);
  transition: transform 0.12s ease;
  width: 10px;
}
.schedule-changelog-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.schedule-changelog-toggle:hover .schedule-changelog-title { color: var(--ink-soft); }
.schedule-changelog-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 8px;
}
.schedule-changelog-body { overflow: hidden; }
.schedule-changelog-wrap.is-collapsed .schedule-changelog-body {
  display: none;
}

/* ---------- Per-project schedule timeline (CR / date-shift tracking) ---------- */

.schedule-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-timeline-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
}

.schedule-timeline-date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.schedule-timeline-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.schedule-timeline-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 9px;
}

.schedule-timeline-delta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.schedule-timeline-delta.is-late { background: var(--red-bg); color: var(--red); }
.schedule-timeline-delta.is-early { background: var(--green-bg); color: var(--green); }

.schedule-timeline-row.kind-timesaved { border-color: #b7e6cd; }

.schedule-timeline-note {
  color: var(--ink-soft);
  font-size: 12px;
}

@media (max-width: 640px) {
  .schedule-timeline-row { grid-template-columns: 1fr; }
  .schedule-timeline-delta { margin-left: 0; }
}

@media (max-width: 640px) {
  .status-history-row {
    grid-template-columns: 1fr;
  }
  .status-history-project { margin-left: 0; }
}

/* ---------- Hawk-eye (cross-project Gantt) ---------- */

.hawkeye-gantt {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px 8px;
}

/* Toolbar (legend + Month|Week zoom toggle) lives OUTSIDE the scrollable
   timeline area (.hawkeye-scroll-inner below) — it's always visible at
   its natural width, never scrolls out of reach the way it would if it
   were just another child of the wide scrolling content. */
.hawkeye-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px 220px;
}

.hawkeye-zoom-toggle {
  display: inline-flex;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
  flex: 0 0 auto;
}

.hawkeye-zoom-btn {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.hawkeye-zoom-btn:hover { color: var(--ink-soft); }
.hawkeye-zoom-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* The actual horizontally-scrollable area — everything that needs to be
   plotted on a real date axis (header marks, gridlines, today-line,
   every row's stage blocks) lives in here, all sized in real pixels
   (see renderHawkeye()'s pxPerDay), which is what makes scrolling
   meaningful instead of everything just being squeezed to fit. */
.hawkeye-scroll-inner {
  overflow-x: auto;
  position: relative;
}

.hawkeye-months {
  position: relative;
  height: 22px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 6px;
}

.hawkeye-month-mark {
  position: absolute;
  top: 0;
  transform: translateX(-2px);
  border-left: 1px solid var(--line-strong);
  padding-left: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.hawkeye-rows {
  position: relative;
}

.hawkeye-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.hawkeye-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  z-index: 2;
}

.hawkeye-today-label {
  position: absolute;
  top: -20px;
  left: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.hawkeye-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.12s ease;
}

.hawkeye-row:last-child { border-bottom: none; }
.hawkeye-row:hover, .hawkeye-row:focus-visible { background: var(--bg); outline: none; }
.hawkeye-row:hover .hawkeye-row-label, .hawkeye-row:focus-visible .hawkeye-row-label { background: var(--bg); }

/* Sticks to the left edge of .hawkeye-scroll-inner as the timeline
   content scrolls horizontally underneath/beside it — an opaque
   background + z-index above the row tracks is what makes scrolled-under
   content actually disappear behind it instead of showing through. */
.hawkeye-row-label {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: 0 0 220px;
  width: 220px;
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding-right: 8px;
  box-shadow: 4px 0 8px -6px rgba(20, 28, 45, 0.15);
}

.hawkeye-row-label strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 175px;
}

.hawkeye-row-sub {
  font-size: 11px;
  color: var(--ink-faint);
}

.hawkeye-row-track {
  position: relative;
  flex: 0 0 auto;
  height: 58px;
}

.hawkeye-row-track-empty {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

/* Per-stage block on the calendar strip. Done stages get a solid fill,
   the current stage is colored by its SLA flag, future/not-yet-reached
   stages are outline-only (their width is just a planned placeholder,
   not a real date range). */
.hawkeye-stage-block {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.hawkeye-stage-block.is-done {
  background: var(--green-bg);
  border: 1px solid var(--green);
  color: var(--green);
}

.hawkeye-stage-block.is-current {
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow);
  z-index: 1;
}

.hawkeye-stage-block.is-current.is-warn {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: var(--amber);
}

.hawkeye-stage-block.is-current.is-breach {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}

.hawkeye-stage-block.is-future {
  /* Was transparent + var(--line-strong) (#d2ddec, very light) + faint
     text — nearly invisible against the panel's white/light background,
     especially at the future-strip's small chip size. Tinted fill +
     darker dashed border + darker text keeps the "outline-only, this is
     just a plan not a real date range" meaning while actually being
     legible. */
  background: var(--bg);
  border: 1.5px dashed #7c8ba8;
  color: #4a5878;
  font-weight: 600;
}
/* Same "plan window already passed, project hasn't reported moving into
   this stage yet" callout as the per-project Stage-gate timeline's
   .stagegantt-block.is-plan-overdue (2026-10-06). */
.hawkeye-stage-block.is-future.is-plan-overdue {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-bg);
}

/* Future/not-started stages are chained by planned SLA days, which can be
   as little as 5 days each — plotting them individually by date % at a
   multi-month zoom level squeezed them into unreadable, overlapping
   slivers (worse now that there are up to 6 remaining stages instead of
   3). Render them instead as one compact chip strip, sized by content via
   normal flex flow, anchored at a single % position rather than each
   chip having its own tiny date-derived width. */
.hawkeye-future-strip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 3px;
}

.hawkeye-future-strip .hawkeye-stage-block {
  position: static;
  height: 24px;
  padding: 0 7px;
  font-size: 10px;
  flex: 0 0 auto;
}

.hawkeye-stage-block:hover {
  box-shadow: 0 0 0 2px var(--accent);
}

.hawkeye-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-soft);
}

.hawkeye-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hawkeye-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  border: 1.5px solid var(--line);
}

.hawkeye-legend-swatch.is-done { background: var(--green-bg); border-color: var(--green); }
.hawkeye-legend-swatch.is-current { background: var(--accent-soft); border-color: var(--accent); }
.hawkeye-legend-swatch.is-warn { background: var(--amber-bg); border-color: var(--amber); }
.hawkeye-legend-swatch.is-breach { background: var(--red-bg); border-color: var(--red); }
.hawkeye-legend-swatch.is-future { background: var(--bg); border-color: #7c8ba8; border-style: dashed; }
.hawkeye-legend-swatch.is-future.is-plan-overdue { background: var(--red-bg); border-color: var(--red); border-style: dashed; }

/* No small-screen label-column narrowing needed anymore — the label
   column is a fixed 220px sticky sidebar regardless of viewport, and the
   timeline area (which is real-pixel-wide, not squeeze-to-fit) already
   scrolls horizontally on any screen size too narrow to show it all at
   once. That's the whole point of this being scrollable now. */

/* ---------- Shared status dot (used on cards, stage board, go-live tracker) ---------- */

.timeline-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  justify-self: center;
}

/* ---------- Project cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 18px;
  position: relative;
  border-top: 3px solid var(--line-strong);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover, .card:focus-visible {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  outline: none;
}

.card.status-green { border-top-color: var(--green); }
.card.status-amber { border-top-color: var(--amber); }
.card.status-red { border-top-color: var(--red); }
.card.status-black { border-top-color: var(--black); }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}

.card-head h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.pill {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-red { background: var(--red-bg); color: var(--red); }
.pill-black { background: var(--black-bg); color: var(--black); }

.card-owner {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

/* One-line glimpse of this project's most recent status change or go-live/
   milestone date shift, right on the card — the full log (every change,
   with reasons) still lives in the Status History tab and this project's
   own detail view; this is just a "what happened last" preview so you
   don't have to open either to see it. Reuses the same badge/pill/delta
   classes as the Status History tab and Schedule timeline, just packed
   into a compact wrapping row and shrunk down to fit a card. */
.card-recent-change {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: -6px 0 14px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
}

.card-recent-change-date {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  margin-right: 2px;
}

.card-recent-change-arrow {
  color: var(--ink-faint);
}

.card-recent-change .pill {
  padding: 2px 8px;
  font-size: 10px;
}

.card-recent-change .schedule-shift-badge {
  font-size: 10px;
  padding: 2px 7px;
}

.card-recent-change .golive-date-original,
.card-recent-change .golive-date-current {
  font-size: 11px;
}

.card-recent-change .schedule-timeline-delta {
  margin-left: 0;
  font-size: 10px;
  padding: 1px 7px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.progress-track {
  flex: 1;
  height: 7px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
}

.progress-fill.status-green { background: var(--green); }
.progress-fill.status-amber { background: var(--amber); }
.progress-fill.status-red { background: var(--red); }
.progress-fill.status-black { background: var(--black); }
.progress-fill.status-grey { background: var(--ink-faint); }

.progress-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  width: 34px;
  text-align: right;
}

.card-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 14px;
  font-size: 12.5px;
}

.card-facts dt {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0 0 2px;
}

.card-facts dd {
  margin: 0;
  color: var(--ink);
}

.phase-fact-stage {
  font-weight: 600;
}

.phase-fact-target {
  font-weight: 500;
  color: var(--ink-soft);
}

.phase-fact-detail {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* Grid card only (not the full detail view's `.detail-facts` variant) —
   clamp a long free-text `phase` to 2 lines so one verbose project
   (e.g. an audit-trail-style rationale instead of a short label like
   "Hypercare (90% complete)") can't blow up the card's height and make
   it feel cluttered. Full text is still available via the native
   `title` tooltip on hover, and the un-clamped detail view shows it in
   full (2026-10-16, "this card needs to be clean and clear"). */
.card-facts:not(.detail-facts) .phase-fact-detail {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: help;
}

.delay-flag {
  font-weight: 600;
}

.delay-flag.is-late { color: var(--red); }
.delay-flag.is-ontime { color: var(--green); }
.delay-flag.is-saved { color: var(--green); font-weight: 700; }

.card-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

/* Dependencies/risks/escalated (and follow-ups, when there are any) jump
   straight to their source section in the project detail view instead of
   just opening it scrolled to the top — cursor + hover/focus ring signal
   that, distinct from the plain informational badges (fast-follow, scope
   cut, time-saved) that have nothing to jump to. */
.badge.is-jump-link {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.badge.is-jump-link:hover,
.badge.is-jump-link:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft);
  transform: translateY(-1px);
}
.badge.is-jump-link:focus-visible { outline: none; }

.badge.has-risk {
  background: var(--red-bg);
  border-color: transparent;
  color: var(--red);
}

.badge.has-followup {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.badge.has-fastfollow {
  background: var(--amber-bg);
  border-color: transparent;
  color: var(--amber);
}

.badge.has-escalation {
  background: var(--red-bg);
  border-color: transparent;
  color: var(--red);
  font-weight: 700;
}

.badge.has-scopecut {
  background: var(--amber-bg);
  border-color: transparent;
  color: var(--amber);
}

.badge.has-timesaved {
  background: var(--green-bg);
  border-color: transparent;
  color: var(--green);
  font-weight: 700;
}

.detail-block.followups li { color: var(--accent); font-weight: 500; }

.followup-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.followup-item .resolve-actions { flex-shrink: 0; }

.detail-block.delay-recovery,
.detail-block.followups {
  background: var(--amber-bg);
  border: 1px solid #f3dcae;
  border-radius: var(--radius);
  padding: 14px 16px;
}

.detail-block.followups {
  background: var(--accent-soft);
  border-color: var(--line-strong);
}

.detail-block.fast-follow {
  background: var(--amber-bg);
  border: 1px solid #f3dcae;
  border-radius: var(--radius);
  padding: 14px 16px;
}

.detail-block.time-saved {
  background: var(--green-bg);
  border: 1px solid #b7e6cd;
  border-radius: var(--radius);
  padding: 14px 16px;
}

.detail-block.time-saved h4 {
  margin: 0 0 8px;
  color: var(--green);
  font-weight: 700;
}

.detail-block.time-saved li {
  color: var(--ink);
  font-weight: 500;
}

.detail-block.fast-follow .empty-note {
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.detail-block.fast-follow li {
  color: var(--ink);
  font-weight: 500;
}

.detail-block.escalations {
  background: var(--red-bg);
  border: 1px solid #f0bcbc;
  border-radius: var(--radius);
  padding: 14px 16px;
}

.detail-block.escalations li {
  color: var(--red);
  font-weight: 600;
}

.card-expand {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 0 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-section-head .detail-section-link {
  flex-shrink: 0;
  font-size: 0.82rem;
}

.detail-block { margin-bottom: 12px; }
.detail-block:last-child { margin-bottom: 0; }

.detail-block h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0 0 6px;
}

.detail-block ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.detail-block li { margin-bottom: 4px; }
.detail-block li::marker { color: var(--ink-faint); }

.detail-block.risks li { color: var(--red); }
.detail-block.deps li { color: var(--ink-soft); }

/* ---------- Team Performance tab skeleton ---------- */

.stub-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px;
  text-align: center;
}

.stub-panel .stub-icon {
  font-size: 34px;
  margin-bottom: 14px;
}

.stub-panel h2 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 10px;
}

.stub-panel p {
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 22px;
}

.stub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
  text-align: left;
}

.stub-kpi {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 14px;
  background: var(--bg);
}

.stub-kpi .label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.stub-kpi .value {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--line-strong);
}

.stub-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 45, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  padding: 26px 26px 20px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(20, 28, 45, 0.28);
}

.modal h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 6px;
}

.modal-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.modal label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 12px 0 5px;
}

.modal select,
.modal input,
.modal textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ---------- Project detail overlay ---------- */

.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 45, 0.6);
  z-index: 60;
  overflow-y: auto;
  padding: 32px 20px 60px;
}

.detail-overlay[hidden] { display: none; }

body.no-scroll { overflow: hidden; }

.detail-panel {
  max-width: 1040px;
  width: 92vw;
  margin: 0 auto;
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(20, 28, 45, 0.4);
  padding: 28px 36px 44px;
  position: relative;
  animation: detail-in 0.18s ease;
}

@keyframes detail-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail-close {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  position: absolute;
  top: -16px;
  right: -16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.detail-close:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  transform: rotate(90deg);
}

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.detail-head h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 8px 0 4px;
}

.detail-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.detail-facts {
  margin-top: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* ---------- Milestones list (Schedule tab) ---------- */

.milestones-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.milestones-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.milestones-row.is-past {
  opacity: 0.6;
}

.milestones-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.milestones-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.sprint-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sprint-grid .detail-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 0;
}

.detail-block.deps,
.detail-block.risks {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

/* Project detail view — single-open accordion driven by a HORIZONTAL
   icon-tile strip (2026-10-16, replacing a same-day vertical accordion
   list: "make these horizontal and I want icons like these [Five Logs
   banner] horizontally" — same circular-badge-icon-above-label look the
   now-removed Five Logs banner used, reused here deliberately so this
   is the one icon strip in this view instead of two near-identical
   ones; see app.js's note by the old `buildFiveLogsBanner()` definition
   for why that banner was deleted outright the same day).
   `.detail-tab-tile` is a flat row of buttons (icon circle + label +
   one-line `tabTeaser()` summary underneath); `.detail-tab-panel` is a
   flat stack of panels below the whole strip, shown one at a time.
   Clicking a tile is a pure class toggle on both lists, matched by
   `data-tab` (see `activateDetailTab()`) — no re-render/re-fetch
   needed, and opening one tile closes any other open tile. */
/* All 9 tiles stay in ONE row (2026-10-16, "I want all icons in one
   row") — `flex-wrap: nowrap` plus `flex: 1 1 0` lets tiles shrink
   evenly to fit the strip's width; `overflow-x: auto` is just a safety
   net for very narrow viewports where even the `min-width` floor can't
   fit all 9 (scrolls instead of wrapping to a second row). */
.detail-tabs-h {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  margin: 18px 0 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.detail-tab-tile {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-display);
  flex: 1 1 0;
  min-width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.detail-tab-tile:hover,
.detail-tab-tile:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.detail-tab-tile:focus-visible { outline: none; }
.detail-tab-tile.is-open {
  border-color: var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-hover);
}

.detail-tab-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--accent-soft);
  color: var(--accent);
}
.detail-tab-tile.is-open .detail-tab-tile-icon {
  background: var(--accent);
  color: #fff;
}

.detail-tab-tile-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1.25;
}
.detail-tab-tile.is-open .detail-tab-tile-label { color: var(--ink); }

/* One-line teaser (count/status, or the mini progress bar for Schedule)
   — sits under the label, truncated so a long teaser can never force a
   tile to grow taller than its neighbors. */
.detail-tab-tile-teaser {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-faint);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-tab-tile-teaser .detail-tab-btn-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.detail-tab-tile-teaser .detail-tab-btn-progress .progress-track {
  width: 46px;
  height: 5px;
}
.detail-tab-tile-teaser .detail-tab-btn-progress .progress-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .detail-tab-tile { min-width: 64px; }
}

.detail-tab-panels {
  margin-top: 4px;
}

.detail-tab-panel {
  display: none;
  padding: 4px 10px 14px;
}
.detail-tab-panel.is-active { display: block; }

/* First heading inside a freshly-switched-to panel shouldn't repeat the
   same big top margin every `.weekly-subhead` normally gets — the tile
   strip above it already provides that visual separation. */
.detail-tab-panel > .weekly-subhead:first-child { margin-top: 18px; }

.weekly-subhead {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 30px 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.weekly-subhead::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  flex-shrink: 0;
}

.trend-graph-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px 4px;
}

.trend-graph {
  display: block;
  width: 100%;
  height: 200px;
}

.graph-axis-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ink-faint);
}

.graph-point-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  fill: var(--ink);
}

.changelog {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.changelog-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.changelog-row:hover { background: var(--bg); }
.changelog-row:last-child { border-bottom: none; }

.changelog-row.has-status-change { background: var(--bg); }

.changelog-row.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.changelog-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.snapshot-sections {
  margin-top: 8px;
}

.snapshot-sections-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.changelog-status-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.changelog-date {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--accent);
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 12px;
  align-items: baseline;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}

.note-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
}

.note-row.is-open .note-status { background: var(--red-bg); color: var(--red); }
.note-row.is-resolved .note-status { background: var(--green-bg); color: var(--green); }

.note-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.note-mitigation {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--bg);
  border-radius: 6px;
  padding: 6px 9px;
}

.resolve-actions {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.resolve-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.resolve-link:hover { text-decoration: underline; }
.resolve-link.is-undo { color: var(--ink-faint); }
.resolve-link.is-sync { color: var(--accent); }

/* ---------- Risk / dependency mitigation pairs ---------- */

.detail-block .paired-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.paired-item {
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.paired-item-text {
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 4px;
}

.paired-item-mitigation {
  font-size: 12px;
  color: var(--ink-soft);
}

.paired-item-mitigation .mitigation-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.paired-item-mitigation.is-missing {
  color: var(--amber);
}

.paired-item-mitigation.is-missing .mitigation-label {
  color: var(--amber);
}

.team-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  vertical-align: middle;
}

/* Surfaces which of a project's (rare, multi-table) source deck sections
   a dependency/risk came from — e.g. SSO V2's dependencies/risks are a
   merge of its separate "(Development)" and "(Implementation)" tables
   into one project record; this makes that origin visible instead of
   silently flattening it. Only rendered when `item.track` is set. */
.track-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber);
  vertical-align: middle;
}

.team-tag.is-missing {
  background: var(--amber-bg);
  color: var(--amber);
}

/* Dependency id tag + quick-action row (Update / Escalate / Resolve),
   shown per-row in the project detail view's Dependencies section. */
.dep-id-tag {
  display: inline-block;
  margin-right: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  vertical-align: middle;
}

.dep-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.dep-action-link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
}

.dep-action-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

dd.is-missing {
  color: var(--amber);
}

.delay-recovery h4:not(:first-child) {
  margin-top: 12px;
}

.delay-recovery .empty-note.is-missing {
  color: var(--amber);
}

.empty-note {
  color: var(--ink-soft);
  font-size: 13.5px;
}

/* ---------- Footer ---------- */

.foot {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 900px) {
  .metric-card { flex-basis: 30%; }
  .cards { grid-template-columns: 1fr; }
  .stub-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .masthead { flex-direction: column; align-items: flex-start; }
  .masthead-meta { text-align: left; }
  .metric-card { flex-basis: 45%; }
  .card-facts { grid-template-columns: 1fr; }
  .sprint-grid { grid-template-columns: 1fr; }
  .detail-panel { padding: 24px 20px 32px; }
  .detail-head h1 { font-size: 26px; }
  .detail-close { top: -12px; right: -12px; width: 30px; height: 30px; }
}

/* ---------- Stage detail modal ---------- */

.stagedetail-panel-outer {
  max-width: 900px;
}

/* ---------- Dependency / Risk item detail modal ---------- */

.itemdetail-panel-outer {
  max-width: 640px;
}

.itemdetail-facts dt {
  margin-top: 12px;
}
.itemdetail-facts dt:first-child {
  margin-top: 0;
}

.itemdetail-actions {
  margin-top: 18px;
}

.paired-item.is-clickable {
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.paired-item.is-clickable:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.stagedetail-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.stagedetail-head h2 {
  margin: 0 0 4px;
  font-size: 24px;
}

.stagedetail-sub {
  color: var(--ink-soft);
  font-size: 13px;
}

.stagedetail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 18px 0 20px;
}

.stagedetail-tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: 10px 4px;
  margin-right: 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.stagedetail-tab-btn:hover { color: var(--ink); }

/* Current-stage overview card (`.current-stage-card*`) removed
   2026-10-16, same day it was made whole-card-clickable — see the
   removal note at `buildStageGateTimeline()`'s old caller in app.js. */

.stagedetail-tab-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.stagedetail-panel { display: none; }
.stagedetail-panel.is-active { display: block; }

.stagedetail-datebox-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.stagedetail-datebox {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--bg);
}

.stagedetail-datebox h4 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.stagedetail-datebox dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin: 0;
}

.stagedetail-datebox dt {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.stagedetail-datebox dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}

.stagedetail-datebox dd.stagedetail-actual { color: var(--accent); }

.stagedetail-variance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.stagedetail-variance-label {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.stagedetail-variance {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--ink-faint);
}

.stagedetail-variance.is-ontime { background: #e4f5ec; color: var(--green); }
.stagedetail-variance.is-late { background: var(--red-bg); color: var(--red); }
.stagedetail-variance.is-early { background: #e4f5ec; color: var(--green); }

.stagedetail-completion {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
}

.stagedetail-completion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stagedetail-completion-head h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.stagedetail-completion-pct {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

.stagedetail-completion-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

.stagedetail-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.stagedetail-history-table,
.stagedetail-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.stagedetail-history-table th,
.stagedetail-history-table td,
.stagedetail-log-table th,
.stagedetail-log-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.stagedetail-history-table thead th,
.stagedetail-log-table thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  background: var(--bg);
}

.stagedetail-rev-cell { font-weight: 700; color: var(--ink); }
.stagedetail-shift-cell { font-family: var(--font-mono); }

.stagedetail-history-notes {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--ink-faint);
}
.stagedetail-history-notes li { margin-bottom: 4px; }

.stagedetail-analysis-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}
.stagedetail-analysis-total .num { font-size: 26px; font-weight: 800; color: var(--ink); }
.stagedetail-analysis-total .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.stagedetail-analysis-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stagedetail-analysis-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.stagedetail-analysis-col h4 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.stagedetail-bar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stagedetail-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.stagedetail-bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.stagedetail-bar-label {
  flex: 1 1 auto;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stagedetail-bar-days {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}

.stagedetail-analysis-total .kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-right: 4px;
}

/* Reusable donut chart (buildDonutChart()) — an SVG ring with the total
   printed in the hole. Used both here (per-stage delay attribution) and
   on the Grid tab's portfolio-wide "Cumulative Delay by Project" chart. */
.donut-chart {
  position: relative;
  margin: 0 auto 14px;
  display: block;
}
.donut-chart-svg { display: block; }
.donut-chart-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut-chart-num { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.donut-chart-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* Grid tab — "Cumulative Delay by Project" section */
.cumdelay-section { margin-bottom: 22px; }
.cumdelay-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.cumdelay-empty {
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
}
.cumdelay-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.cumdelay-head .kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.cumdelay-sub { font-size: 12px; color: var(--ink-faint); }
.cumdelay-body {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cumdelay-body .donut-chart { margin: 0; flex: 0 0 auto; }
.cumdelay-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 240px;
  min-width: 200px;
}
.cumdelay-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.cumdelay-legend-row:hover,
.cumdelay-legend-row:focus-visible {
  background: var(--accent-soft);
  outline: none;
}
.cumdelay-legend-row .stagedetail-bar-label { flex: 1 1 auto; }

/* Three standalone donuts side by side (project / PM / status), each its
   own full circle + legend rather than three bands nested inside one
   shared circle (2026-10-06 — nested rings read as "one ring" at a
   glance). Wraps to stacked panels on narrow screens instead of
   squeezing three circles into too little width. */
.cumdelay-rings-row {
  align-items: flex-start;
}
.cumdelay-ring-panel {
  flex: 1 1 200px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cumdelay-ring-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.cumdelay-ring-panel .cumdelay-legend {
  width: 100%;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
/* PM/status rows aren't clickable (no single project to jump to) — same
   look minus the pointer/hover affordance. */
.cumdelay-legend-row-static {
  cursor: default;
  padding: 3px 6px;
}
.cumdelay-legend-row-static:hover,
.cumdelay-legend-row-static:focus-visible {
  background: none;
}

.stagedetail-log-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.stagedetail-log-search {
  flex: 1 1 220px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-body);
}

.stagedetail-log-filter {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: var(--font-body);
  background: var(--bg-panel);
}

.stagedetail-id-cell {
  font-family: var(--font-mono);
  color: var(--ink-faint);
}

.stagedetail-days-header {
  cursor: pointer;
  user-select: none;
}

.stagedetail-sort-arrow {
  font-size: 9px;
}

.stagedetail-days-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red-bg);
  color: var(--red);
}

/* ---------- RACI reference (Stage-gate tab) ---------- */

.raci-ref {
  margin: 16px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.raci-ref-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 10px;
}

.raci-ref-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.raci-ref-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  flex-wrap: wrap;
}

.raci-ref-stage {
  flex: 0 0 170px;
  font-weight: 700;
  color: var(--ink);
}

.raci-ref-lead {
  flex: 0 0 110px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
}

.raci-ref-with {
  color: var(--ink-faint);
  font-size: 11.5px;
}

/* "Five logs" banner CSS (.five-logs-*) removed 2026-10-16 — see the
   note by the old `buildFiveLogsBanner()` definition in app.js: every
   icon it had duplicated a tile already in the main horizontal
   icon-tile strip, so the whole banner was deleted rather than kept. */

/* ---------- Go-Live readiness checklist (Stage-gate tab) ---------- */

.golive-checklist-progress {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.golive-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.golive-checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.golive-checklist-row:last-child { border-bottom: none; }

.golive-checklist-icon {
  flex: 0 0 16px;
  font-weight: 700;
  text-align: center;
}

.golive-checklist-row.is-complete .golive-checklist-icon { color: var(--green); }
.golive-checklist-row.is-inprogress .golive-checklist-icon { color: var(--amber); }
.golive-checklist-row.is-notstarted .golive-checklist-icon { color: var(--ink-faint); }

.golive-checklist-item { flex: 1 1 auto; color: var(--ink); }

.golive-checklist-status {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}

.golive-checklist-row.is-complete .golive-checklist-status { background: var(--green-bg); color: var(--green); }
.golive-checklist-row.is-inprogress .golive-checklist-status { background: var(--amber-bg); color: var(--amber); }
.golive-checklist-row.is-notstarted .golive-checklist-status { background: var(--bg); color: var(--ink-faint); }

.golive-checklist-notes {
  flex: 0 0 100%;
  font-size: 11.5px;
  color: var(--ink-faint);
  padding-left: 26px;
}

/* ---------- Change Request Log / Decision Log (Change & Decisions tab) ----------
   Both rebuilt (2026-10-15) as wide <table>s (see .wide-log-* below) to
   match the deck's own sample tables exactly; only the approval-status
   pill styling is still needed from here. */

.cr-log-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

.cr-log-status.is-approved { background: var(--green-bg); color: var(--green); }
.cr-log-status.is-pending { background: var(--amber-bg); color: var(--amber); }

/* ---------- Wide log tables (Delay, RAID, Change Request, Decision logs)
   — a real <table> + horizontal scroll wrapper, used for every log that
   was rebuilt (2026-10-15) to match the deck's own sample tables exactly,
   column for column, instead of condensing several fields into shared
   cells. Shared base classes (.wide-log-table-scroll / .wide-log-full-
   table / .wide-log-title-cell / .wide-log-status); each log's own
   call site decides its exact column list and which cells get which of
   these classes. */

.wide-log-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.wide-log-full-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1200px;
}

.wide-log-full-table th,
.wide-log-full-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  max-width: 220px;
}

.wide-log-full-table th {
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.wide-log-full-table tbody tr:last-child td {
  border-bottom: none;
}

.wide-log-full-table .wide-log-title-cell {
  font-weight: 700;
  color: var(--ink);
}

.wide-log-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

.wide-log-status.is-closed { background: var(--green-bg); color: var(--green); }
.wide-log-status.is-open { background: var(--red-bg); color: var(--red); }

/* ---------- RAID Log (Dependencies & Risks tab) — reuses the shared
   wide-log-table scaffolding above, plus its own Type pill since RAID
   rows are tagged Risk/Assumption/Issue/Dependency. */

.raid-type-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
}

.raid-type-risk { background: var(--red-bg); color: var(--red); }
.raid-type-assumption { background: var(--accent-soft); color: var(--accent); }
.raid-type-issue { background: var(--amber-bg); color: var(--amber); }
.raid-type-dependency { background: var(--black-bg); color: var(--black); }

/* ---------- Feature / sprint tracker (Features tab) ----------
   Table rebuilt (2026-10-15) onto the shared .wide-log-* scaffolding —
   see "Wide log tables" above — with 7 distinct columns (SP, Type,
   Feature/Capability, Status, Notes, Planned/Actual, Delay Reason)
   instead of the original merged-cell card layout. */

.feature-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.feature-kpi-sub {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 2px;
  line-height: 1.3;
}

.feature-type-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
}

.feature-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

.feature-status.is-done { background: var(--green-bg); color: var(--green); }
.feature-status.is-inprogress { background: var(--amber-bg); color: var(--amber); }
.feature-status.is-excluded { background: var(--bg); color: var(--ink-faint); }
.feature-status.is-blocked { background: var(--red-bg); color: var(--red); }
.feature-status.is-upcoming { background: var(--accent-soft); color: var(--accent); }

.feature-reference-note {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--red-bg);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: var(--red-bg);
  font-size: 12px;
  color: var(--ink-soft);
}

.feature-reference-note-head {
  font-weight: 700;
  color: var(--red);
  margin-bottom: 6px;
}

.feature-reference-note ul {
  margin: 0;
  padding-left: 18px;
}

.feature-reference-note li {
  margin-bottom: 4px;
}

.feature-reference-note li:last-child {
  margin-bottom: 0;
}