/* =========================================================================
   Monthly Report — base styles + 3 theme overrides
   themes: .theme-editorial · .theme-terminal · .theme-studio
   ========================================================================= */

/* ─── DEFAULT TOKENS (overridden per theme) ─────────────────────────────── */
.report {
  --bg: #fff;
  --surface: #fff;
  --surface-2: #f7f7f7;
  --text-1: #15171a;
  --text-2: #4d535b;
  --text-3: #8b9098;
  --rule: #e3e6ea;
  --rule-strong: #c8ccd2;
  --accent: #1f2937;

  --red: #c0392b;
  --amber: #d97706;
  --green: #8A6D34;
  --lime: #C2A878;

  --font-head: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-num: "Inter", system-ui, sans-serif;

  --size-base: 13px;
  --size-small: 11.5px;
  --size-xsmall: 10.5px;
  --size-h1: 36px;
  --size-h2: 20px;
  --size-kpi: 38px;
  --size-kpi-sm: 22px;

  --weight-head: 600;
  --weight-strong: 600;

  --pad-sec: 28px;
  --gap-sec: 32px;
  --radius: 4px;

  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.42;
  width: 1280px;
  padding: 36px 40px 56px;
  box-sizing: border-box;
  font-feature-settings: "ss01", "cv11", "tnum";
}

.report *,
.report *::before,
.report *::after { box-sizing: border-box; }

.report .num { font-variant-numeric: tabular-nums; text-align: right; }
.report .muted { color: var(--text-3); }
.report .pos { color: var(--green); }
.report .neg { color: var(--red); }
.report .dot { color: var(--text-3); margin: 0 6px; }

/* ─── TITLE STRIP ───────────────────────────────────────────────────────── */
.title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid var(--text-1);
  padding-bottom: 18px;
  margin-bottom: 28px;
  gap: 32px;
}
.title__l { min-width: 0; flex: 1 1 auto; }
.title__r { display: flex; gap: 28px; align-items: flex-end; flex: 0 0 auto; }
.title__eyebrow {
  font-size: var(--size-xsmall);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
  white-space: nowrap;
}
.title__h1 {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: var(--size-h1);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.title__period { color: var(--text-2); font-weight: 400; font-size: 0.78em; }
.title__meta {
  margin-top: 10px;
  font-size: var(--size-small);
  color: var(--text-2);
  white-space: nowrap;
}
.title__stat { text-align: right; white-space: nowrap; }
.title__stat-l { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); white-space: nowrap; }
.title__stat-v { font-family: var(--font-head); font-size: 22px; font-weight: var(--weight-head); margin-top: 2px; white-space: nowrap; }
.title__stat-s { font-size: var(--size-xsmall); color: var(--text-2); margin-top: 2px; white-space: nowrap; }
.title__stat-s--red { color: var(--red); }
.title__issue { font-size: var(--size-xsmall); color: var(--text-3); text-align: right; line-height: 1.6; white-space: nowrap; }

/* ─── SECTION SHELL ─────────────────────────────────────────────────────── */
.sec { margin-bottom: var(--gap-sec); position: relative; }
.sec__h { margin-bottom: 14px; }
.sec__kicker {
  font-size: var(--size-xsmall);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
  font-family: var(--font-num);
}
.sec__title {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: var(--size-h2);
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.2;
}
.sec__sub { font-size: var(--size-small); color: var(--text-2); margin-top: 4px; max-width: 80ch; }

.rule { height: 1px; background: var(--rule-strong); margin: 12px 0 28px; }

/* ─── NOW THIS MONTH (hero) ─────────────────────────────────────────────── */
.now {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--green);
  padding: 22px 26px;
  margin: 24px 0 var(--gap-sec);
  border-radius: var(--radius);
  position: relative;
}
.now__eyebrow { font-size: var(--size-xsmall); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); font-weight: 700; }
.now__h { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 26px; line-height: 1.1; letter-spacing: -0.005em; margin-top: 4px; }
.now__sub { font-size: var(--size-small); color: var(--text-2); margin-top: 6px; }
.now__r { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: baseline; }
.now__v { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 64px; line-height: 1; letter-spacing: -0.025em; color: var(--green); grid-row: 1 / span 2; }
.now__delta { font-size: var(--size-small); color: var(--text-2); }
.now__delta .pos { font-weight: 700; margin-right: 6px; }
.now__bar { grid-column: 1 / -1; }
.now__bar-track { position: relative; height: 18px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.now__bar-plan { position: absolute; top: 0; left: 0; height: 100%; background: var(--rule-strong); }
.now__bar-plan-tick { position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; background: var(--text-1); }
.now__bar-actual { position: absolute; top: 0; left: 0; height: 100%; background: var(--green); mix-blend-mode: multiply; }
.now__bar-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: var(--size-xsmall); color: var(--text-2); }
.now__bar-target { margin-left: auto; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.theme-terminal .now { background: var(--surface); border-color: var(--rule); border-left-color: var(--green); }
.theme-terminal .now__v { font-family: var(--font-num); color: var(--green); }
.theme-terminal .now__bar-actual { background: var(--green); }
.theme-studio .now { border-left-color: var(--accent); }
.theme-studio .now__v { color: var(--accent); }
.theme-studio .now__bar-actual { background: var(--accent); }

.audience-banner { padding: 10px 16px; border-radius: 4px; margin-bottom: 20px; font-size: var(--size-small); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.audience-banner--ext { background: color-mix(in oklab, var(--accent), transparent 90%); border-left: 4px solid var(--accent); }
.audience-banner__l { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--size-xsmall); color: var(--accent); flex: 0 0 auto; }
.audience-banner__r { color: var(--text-2); font-size: var(--size-xsmall); }

/* ─── KPI BANK ──────────────────────────────────────────────────────────── */
.kpis { display: flex; flex-direction: column; gap: 12px; }
.kpis__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 18px 18px 14px;
  position: relative;
  min-height: 122px;
  border-radius: var(--radius);
  overflow: hidden;
}
.kpi__label {
  font-size: var(--size-xsmall);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  margin-bottom: 8px;
}
.kpi__value {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: var(--size-kpi);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi__sub { font-size: var(--size-small); color: var(--text-2); margin-top: 8px; }
.kpi__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--rule); }
.kpi--red .kpi__bar { background: var(--red); }
.kpi--amber .kpi__bar { background: var(--amber); }
.kpi--green .kpi__bar { background: var(--green); }
.kpi--red .kpi__value { color: var(--red); }
.kpi--amber .kpi__value { color: var(--amber); }
.kpi--green .kpi__value { color: var(--green); }
.kpi--sm { min-height: 92px; padding: 14px 16px 12px; }
.kpi--sm .kpi__value { font-size: var(--size-kpi-sm); }

/* KPI tile with inline progress bar (progress tile) */
.kpi--has-progress { min-height: 178px; padding-bottom: 18px; }
.kpi__progress { margin-top: 12px; }
.kpi__progress-track { position: relative; height: 14px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.kpi__progress-plan { position: absolute; top: 0; left: 0; height: 100%; background: var(--rule-strong); }
.kpi__progress-actual { position: absolute; top: 0; left: 0; height: 100%; background: var(--green); mix-blend-mode: multiply; }
.kpi__progress-legend { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: var(--size-xsmall); color: var(--text-2); }
.kpi__progress-target { margin-left: auto; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.kpi__progress-legend .sw { width: 8px; height: 8px; margin-right: 4px; }
.theme-terminal .kpi--has-progress .kpi__progress-actual { background: var(--green); }
.theme-studio .kpi--has-progress .kpi__progress-actual { background: var(--accent); }

/* ─── STATUS PRIMITIVES ─────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--size-xsmall);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.pill--red { background: color-mix(in oklab, var(--red), transparent 84%); color: var(--red); }
.pill--amber { background: color-mix(in oklab, var(--amber), transparent 84%); color: var(--amber); }
.pill--green { background: color-mix(in oklab, var(--green), transparent 84%); color: var(--green); }
.pill--neutral { background: var(--surface-2); color: var(--text-2); }

.rag { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.rag--r { background: var(--red); }
.rag--a { background: var(--amber); }
.rag--g { background: var(--green); }

.diamond { display: inline-block; width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); margin-right: 8px; vertical-align: middle; }

/* ─── TABLES ────────────────────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
  background: var(--surface);
}
.tbl th {
  text-align: left;
  font-weight: 600;
  font-size: var(--size-xsmall);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--text-1);
}
.tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--text-1);
}
.tbl th.num, .tbl td.num { text-align: right; }
.tbl .td--strong { font-weight: 600; }
.tbl .td--dim { color: var(--text-2); }
.tbl .td--amber { color: var(--amber); font-weight: 600; }
.tbl .td--red { color: var(--red); font-weight: 600; }
.tbl tfoot td { border-bottom: none; padding-top: 10px; font-size: var(--size-xsmall); color: var(--text-3); }
.tbl__foot { text-align: right; }

.tbl--cost .is-indent td:first-child { padding-left: 28px; color: var(--text-2); }
.tbl--cost .is-sub td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--rule-strong); }
.tbl--cost .is-total td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--text-1); border-bottom: 2px solid var(--text-1); font-size: 13px; }

.tbl--rag td { padding: 12px 10px; }
.tbl--ms .is-milestone td { background: color-mix(in oklab, var(--accent), transparent 92%); font-weight: 600; }
.tbl--ms .is-key td:first-child { color: var(--red); }

.tbl--fcd .is-hl td { background: color-mix(in oklab, var(--red), transparent 90%); font-weight: 600; }

.tbl--adc .is-hi td { background: color-mix(in oklab, var(--red), transparent 92%); }

.score { font-weight: 700; }
.score--red { color: var(--red); }
.score--amber { color: var(--amber); }

.impact { font-size: var(--size-xsmall); padding: 1px 7px; border-radius: 3px; font-weight: 600; }
.impact--high { background: color-mix(in oklab, var(--red), transparent 86%); color: var(--red); }
.impact--med { background: color-mix(in oklab, var(--amber), transparent 86%); color: var(--amber); }
.impact--low { background: color-mix(in oklab, var(--green), transparent 86%); color: var(--green); }

/* ─── CRITICAL ACTIONS ──────────────────────────────────────────────────── */
.crit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.crit__card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  padding: 14px 16px 16px;
  border-radius: var(--radius);
}
.crit__card--red { border-left-color: var(--red); }
.crit__card--amber { border-left-color: var(--amber); }
.crit__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.crit__ref {
  font-family: var(--font-num);
  font-size: var(--size-xsmall);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-1);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 3px;
}
.crit__cat { font-size: var(--size-xsmall); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; margin-right: auto; }
.crit__item { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 15px; margin: 0 0 8px; line-height: 1.25; }
.crit__impact { font-size: var(--size-small); color: var(--text-2); margin: 0 0 12px; }
.crit__foot { display: flex; gap: 18px; font-size: var(--size-xsmall); color: var(--text-3); padding-top: 8px; border-top: 1px dashed var(--rule); }
.crit__lbl { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-right: 4px; }

/* ─── OPENING DRIFT ─────────────────────────────────────────────────────── */
.drift { padding: 12px 16px 28px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.drift__axis { position: relative; height: 200px; margin: 80px 90px 130px; }
.drift__line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--text-1); transform: translateY(-50%); }
.drift__band { position: absolute; top: calc(50% - 6px); height: 12px; background: color-mix(in oklab, var(--red), transparent 88%); border-left: 2px dashed var(--amber); border-right: 2px dashed var(--red); }
.drift__tick { position: absolute; top: calc(50% - 10px); transform: translateX(-50%); width: 2px; height: 20px; background: var(--rule-strong); }
.drift__tick span { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: var(--size-xsmall); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.drift__pt { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.drift__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text-1); position: relative; z-index: 1; }
.drift__pt--neutral .drift__dot { border-color: var(--text-2); background: var(--surface); }
.drift__pt--amber .drift__dot { border-color: var(--amber); background: var(--amber); }
.drift__pt--red .drift__dot { border-color: var(--red); background: var(--red); }
.drift__lbl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: normal;
  font-size: var(--size-xsmall);
  width: 160px;
  text-wrap: balance;
}
.drift__pt--above .drift__lbl { bottom: calc(50% + 14px); }
.drift__pt--below .drift__lbl { top: calc(50% + 72px); }
.drift__date { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 13px; }
.drift__snap { color: var(--text-2); margin-top: 2px; }
.drift__pt--red .drift__date, .drift__pt--red .drift__snap { color: var(--red); }
.drift__pt--amber .drift__date { color: var(--amber); }
.drift__legend { display: flex; gap: 18px; align-items: center; margin-top: 12px; font-size: var(--size-xsmall); color: var(--text-2); }
.drift__legend-r { margin-left: auto; color: var(--red); }

/* ─── COST PROGRESSION ──────────────────────────────────────────────────── */
.cpp { background: var(--surface); border: 1px solid var(--rule); padding: 18px 22px; border-radius: var(--radius); }

/* Scale header — budget label + axis ticks shown once */
.cpp__scale { display: grid; grid-template-columns: 200px 1fr 220px; gap: 16px; align-items: end; margin-bottom: 22px; }
.cpp__scale-lbl, .cpp__scale-delta { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); font-weight: 600; padding-bottom: 6px; }
.cpp__scale-delta { text-align: left; }
.cpp__scale-track { position: relative; height: 26px; border-bottom: 1px solid var(--rule-strong); }
.cpp__scale-budget { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-1); z-index: 2; }
.cpp__scale-budget-lbl {
  position: absolute; left: 6px; bottom: 8px; white-space: nowrap;
  font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-1); font-weight: 700;
  padding: 2px 6px; background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 3px;
}
.cpp__scale-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; }
.cpp__scale-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--rule-strong); }
.cpp__scale-tick-v { position: absolute; top: 8px; left: 0; transform: translateX(-50%); font-size: var(--size-xsmall); color: var(--text-3); font-family: var(--font-num); }

.cpp__bars { display: flex; flex-direction: column; gap: 14px; }
.cpp__row { display: grid; grid-template-columns: 200px 1fr 220px; gap: 16px; align-items: center; }
.cpp__lbl-it { font-weight: 600; font-size: 13px; }
.cpp__row.is-hl .cpp__lbl-it { color: var(--red); }
.cpp__row.is-bench .cpp__lbl-it { color: var(--text-3); font-style: italic; }
.cpp__lbl-d { font-size: var(--size-xsmall); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.cpp__track { position: relative; height: 28px; }
.cpp__bar {
  height: 100%;
  background: var(--text-2);
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #fff;
  font-size: var(--size-small);
  font-weight: 600;
  border-radius: 1px;
}
.cpp__row--red .cpp__bar { background: var(--red); }
.cpp__row--neutral .cpp__bar { background: var(--accent); }
.cpp__row.is-bench .cpp__bar { background: var(--surface-2); color: var(--text-2); border: 1px dashed var(--rule-strong); }
.cpp__bar-v { color: inherit; }
.cpp__budget { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-1); }
/* Per-row budget marker no longer carries a label — label lives on the scale header above */
.cpp__delta { font-size: var(--size-small); }
.cpp__vsb { font-weight: 600; }
.cpp__row--red .cpp__vsb { color: var(--red); }
.cpp__cfa { color: var(--text-3); font-size: var(--size-xsmall); margin-top: 2px; }
.cpp__note { font-size: var(--size-xsmall); color: var(--text-3); margin-top: 16px; font-style: italic; }

/* ─── VE REGISTER ───────────────────────────────────────────────────────── */
.ve { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }

/* Featured cost numbers at top of VE section (moved from primary KPI strip) */
.ve__featured { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1.5px solid var(--rule-strong); }
.ve__feat { padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--rule); position: relative; }
.ve__feat--red { border-left: 4px solid var(--red); }
.ve__feat--target { border-left: 4px solid var(--amber); }
.ve__feat-l { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); font-weight: 600; }
.ve__feat-v { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 36px; letter-spacing: -0.02em; line-height: 1; margin: 6px 0 4px; }
.ve__feat--red .ve__feat-v { color: var(--red); }
.ve__feat--target .ve__feat-v { color: var(--amber); }
.ve__feat-s { font-size: var(--size-small); color: var(--text-2); }

.theme-terminal .ve__feat-v { font-family: var(--font-num); }
.ve__head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 14px; border-bottom: 1.5px solid var(--rule-strong); margin-bottom: 14px; }
.ve__big { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 36px; letter-spacing: -0.02em; color: var(--green); line-height: 1; white-space: nowrap; }
.ve__big-l { font-size: var(--size-xsmall); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 6px; }
.ve__head-r { text-align: right; font-size: var(--size-small); color: var(--text-2); line-height: 1.7; }
.ve__list { list-style: none; padding: 0; margin: 0; }
.ve__row { display: grid; grid-template-columns: 28px 110px 1fr 220px 60px 160px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--size-small); }
.ve__row:last-child { border-bottom: 0; }
.ve__no { font-family: var(--font-num); color: var(--text-3); font-weight: 600; }
.ve__cat { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); padding: 2px 6px; background: var(--surface-2); border-radius: 3px; text-align: center; }
.ve__item { color: var(--text-1); }
.ve__bar { display: flex; align-items: center; gap: 8px; }
.ve__bar-track { position: relative; flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; }
.ve__bar-fill { position: absolute; top: 0; height: 100%; background: var(--green); border-radius: 4px; }
.ve__bar-val { font-family: var(--font-num); font-size: var(--size-xsmall); color: var(--text-2); white-space: nowrap; min-width: 56px; text-align: right; }
.ve__pri { font-size: var(--size-xsmall); font-weight: 700; text-align: center; }
.ve__pri--H { color: var(--red); }
.ve__pri--M { color: var(--amber); }
.ve__owner { font-size: var(--size-xsmall); color: var(--text-3); }

/* ─── NAV BANNER (sticky top, anchor jumps) ─────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin: -4px 0 18px;
  font-size: var(--size-xsmall);
}
.navbar__l { color: var(--accent); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; flex: 0 0 auto; }
.navbar__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; }
.navbar__item a {
  display: inline-block; padding: 5px 10px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  color: var(--text-2); text-decoration: none;
  border-radius: 3px; transition: background 0.15s, color 0.15s;
}
.navbar__item a:hover { background: var(--surface-2); color: var(--text-1); }
.navbar__item.is-primary a { background: var(--accent); color: var(--surface); }
.navbar__item.is-primary a:hover { filter: brightness(1.05); }

.theme-terminal .navbar { background: var(--surface); border-color: var(--rule); }
.theme-terminal .navbar__item a { color: var(--text-2); font-family: var(--font-num); font-size: 10px; }
.theme-terminal .navbar__item.is-primary a { background: var(--accent); color: #000; }
.theme-studio .navbar__item.is-primary a { background: var(--accent); color: #fff; }

/* Drift reason annotation (per Stuart — visual track of why date moved) */
.drift__reason { font-size: 9.5px; color: var(--text-3); margin-top: 4px; font-style: italic; text-wrap: balance; }

/* Title strip — new "Prepared by" tile (replaces issue list) */
.title__prep-l { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }
.title__prep-v { font-family: var(--font-head); font-size: 15px; font-weight: var(--weight-head); margin-top: 2px; }
.title__prep-s { font-size: var(--size-xsmall); color: var(--text-2); margin-top: 2px; }

/* ─── PROGRAMME GANTT ───────────────────────────────────────────────────── */
.gantt {
  --col-act: 184px;
  --col-dur: 72px;
  --col-start: 80px;
  --col-finish: 80px;
  --col-labels-w: calc(var(--col-act) + var(--col-dur) + var(--col-start) + var(--col-finish));
  --gantt-row-h: 36px;
  --bar-color: var(--accent);
  --bar-baseline-fill: color-mix(in oklab, var(--accent), transparent 78%);
  --bar-baseline-stroke: color-mix(in oklab, var(--accent), transparent 50%);

  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 18px 22px 16px;
  border-radius: var(--radius);
}
.gantt__chrome { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.gantt__chrome-eyebrow {
  font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); font-weight: 700;
}
.gantt__chrome-h {
  font-family: var(--font-head); font-weight: var(--weight-head);
  font-size: 22px; color: var(--accent); margin-top: 2px; line-height: 1.1;
  letter-spacing: -0.005em; white-space: nowrap;
}
.gantt__chrome-r { font-size: var(--size-xsmall); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.gantt__rule { height: 4px; background: var(--accent); margin: 10px 0 14px; }

/* Head — labels columns + quarter axis */
.gantt__head { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 4px; }
.gantt__head-cells {
  display: grid;
  grid-template-columns: var(--col-act) var(--col-dur) var(--col-start) var(--col-finish);
  width: var(--col-labels-w);
  flex: 0 0 auto;
}
.gantt__head-cells > div {
  font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-2); font-weight: 600; padding: 4px 8px;
}
.gantt__head-axis {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  border-left: 1px solid var(--rule-strong);
}
.gantt__quarter {
  text-align: center; padding: 2px 0;
  border-right: 1px solid var(--rule);
  background: color-mix(in oklab, var(--accent), transparent 95%);
}
.gantt__quarter:last-child { border-right: 0; }
.gantt__quarter-q {
  font-size: 10px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.04em; line-height: 1.2;
}
.gantt__quarter-y { font-weight: 500; color: var(--accent); opacity: 0.7; }
.gantt__quarter-m {
  font-size: 9px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.08em; margin-top: 1px;
}

/* Body */
.gantt__body { position: relative; }
.gantt__gridlines {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  left: var(--col-labels-w); right: 0;
  display: grid; grid-template-columns: repeat(16, 1fr);
}
.gantt__gridline { border-right: 1px solid var(--rule); }
.gantt__gridline:first-child { border-left: 1px solid var(--rule-strong); }
.gantt__gridline:last-child { border-right: 0; }

.gantt__row { display: flex; align-items: stretch; min-height: var(--gantt-row-h); }
.gantt__row:nth-child(even of .gantt__row) { background: color-mix(in oklab, var(--accent), transparent 97%); }
.gantt__row + .gantt__row { border-top: 1px solid var(--rule); }

.gantt__cells {
  display: grid;
  grid-template-columns: var(--col-act) var(--col-dur) var(--col-start) var(--col-finish);
  width: var(--col-labels-w);
  flex: 0 0 auto;
  align-items: center;
}
.gantt__cells > div { padding: 6px 8px; font-size: var(--size-small); color: var(--text-1); }
.gantt__activity { font-weight: 600; color: var(--accent); }
.gantt__act-note { font-weight: 400; color: var(--text-2); font-size: var(--size-xsmall); }
.gantt__dur, .gantt__start, .gantt__finish {
  font-family: var(--font-num); font-size: var(--size-xsmall); color: var(--text-2);
  font-feature-settings: "tnum";
}

.gantt__track { position: relative; flex: 1 1 auto; align-self: stretch; }
.gantt__bar { position: absolute; border-radius: 1px; }
.gantt__bar--current {
  top: 50%; transform: translateY(-65%);
  height: 14px; background: var(--bar-color);
  min-width: 2px;
}
.gantt__bar--baseline {
  top: 50%; transform: translateY(-10%);
  height: 8px; background: var(--bar-baseline-fill);
  border: 1px solid var(--bar-baseline-stroke);
  min-width: 2px; border-radius: 1px;
}

.gantt__diamond {
  position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
  width: 14px; height: 14px;
  background: var(--accent);
}
.gantt__diamond--baseline {
  background: transparent;
  border: 1.5px solid var(--bar-baseline-stroke);
  transform: translate(-50%, 60%) rotate(45deg);
  width: 12px; height: 12px;
}
.gantt__diamond--opening { background: var(--amber); }

/* Today vertical line — overlays the entire body */
.gantt__today-wrap {
  position: absolute; top: 0; bottom: 0;
  left: var(--col-labels-w); right: 0;
  pointer-events: none;
}
.gantt__today {
  position: absolute; top: -2px; bottom: 0;
  width: 0; border-left: 2px dashed var(--red);
}
.gantt__today-tip {
  position: absolute; top: -8px; left: -22px;
  font-size: 9px; font-weight: 700; color: var(--red);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}

/* Legend */
.gantt__legend {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: var(--size-xsmall); color: var(--text-2);
}
.gantt__leg { display: inline-block; vertical-align: middle; margin-right: 6px; }
.gantt__leg--current { width: 22px; height: 8px; background: var(--accent); }
.gantt__leg--baseline { width: 22px; height: 8px; background: var(--bar-baseline-fill); border: 1px solid var(--bar-baseline-stroke); }
.gantt__leg--diamond { width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); }
.gantt__leg--opening { width: 10px; height: 10px; background: var(--amber); transform: rotate(45deg); }
.gantt__leg--today { width: 0; height: 12px; border-left: 2px dashed var(--red); }

/* ─── PROGRAMME GANTT - end ─────────────────────────────────────────────── */

/* ─── VAR BAR ───────────────────────────────────────────────────────────── */
.varbar { position: relative; height: 18px; background: var(--surface-2); border-radius: 3px; }
.varbar__fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
.varbar__fill--red { background: var(--red); }
.varbar__fill--amber { background: var(--amber); }
.varbar__fill--green { background: var(--green); }
.varbar__v { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: var(--size-xsmall); font-weight: 700; color: var(--text-1); font-family: var(--font-num); }

/* ─── RFI LIST ──────────────────────────────────────────────────────────── */
.rfi-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rfi-list__row {
  display: grid; grid-template-columns: 220px 1fr 80px 160px;
  gap: 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); padding: 10px 14px; border-radius: var(--radius); font-size: var(--size-small);
}
.rfi-list__row--green { border-left: 3px solid var(--green); }
.rfi-list__row--amber { border-left: 3px solid var(--amber); }
.rfi-list__ref { font-family: var(--font-num); font-weight: 600; font-size: var(--size-xsmall); }

/* ─── SITE PHOTOS (image-slot grid) ─────────────────────────────────────── */
.photos { background: var(--surface); border: 1px solid var(--rule); padding: 18px 20px; border-radius: var(--radius); }
.photos__lede { font-size: var(--size-small); color: var(--text-2); margin-bottom: 14px; }
.photos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photos__grid image-slot { display: block; border: 1.5px dashed var(--rule-strong); border-radius: 6px; background: var(--surface-2); }
.theme-terminal .photos__grid image-slot { border-color: var(--rule); background: #000; }

/* ─── SQE BLOCK (Safety / Quality / Environmental) ──────────────────────── */
.sqe { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 16px 20px; border-radius: var(--radius); margin-bottom: 18px; }
.sqe__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.sqe__eyebrow { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 700; }
.sqe__period { font-size: var(--size-xsmall); color: var(--text-3); font-family: var(--font-num); }
.sqe__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sqe__card { background: var(--surface-2); border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong); padding: 12px 14px; border-radius: var(--radius); }
.sqe__card--safety { border-top-color: var(--red); }
.sqe__card--quality { border-top-color: var(--amber); }
.sqe__card--environmental { border-top-color: var(--green); }
.sqe__cat { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); font-weight: 700; }
.sqe__kpi { font-size: var(--size-small); color: var(--text-1); margin: 4px 0 10px; line-height: 1.25; min-height: 30px; }
.sqe__nums { display: flex; gap: 14px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.sqe__num-l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.sqe__num-v { font-family: var(--font-num); font-size: 18px; font-weight: 700; color: var(--text-1); }
.sqe__num-v--total { color: var(--accent); }
.sqe__note { font-size: var(--size-xsmall); color: var(--text-3); margin-top: 6px; font-style: italic; }
.sqe__open { margin-top: 14px; padding: 10px 14px; background: color-mix(in oklab, var(--amber), transparent 90%); border-radius: var(--radius); }
.sqe__open-h { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber); font-weight: 700; margin-bottom: 6px; }
.sqe__open ul { list-style: none; padding: 0; margin: 0; }
.sqe__open li { display: flex; gap: 12px; align-items: center; font-size: var(--size-small); padding: 4px 0; }
.sqe__open-ref { font-family: var(--font-num); font-weight: 700; font-size: var(--size-xsmall); }
.sqe__open-desc { flex: 1; color: var(--text-1); }
.theme-terminal .sqe { background: var(--surface); }
.theme-terminal .sqe__card { background: #000; }
.theme-terminal .sqe__num-v { font-family: var(--font-num); }

/* Permits table — released rows muted */
.tbl--permit .is-released td { background: color-mix(in oklab, var(--green), transparent 95%); color: var(--text-2); }
.tbl--permit .is-released .td--strong { color: var(--text-1); }

.permits__split { display: flex; gap: 12px; margin: 12px 0; font-size: var(--size-small); color: var(--text-2); }
.permits__count { padding: 4px 12px; border-radius: 99px; background: var(--surface-2); }
.permits__count--released { background: color-mix(in oklab, var(--green), transparent 84%); color: var(--green); font-weight: 600; }
.permits__count--pending { background: color-mix(in oklab, var(--amber), transparent 86%); color: var(--amber); font-weight: 600; }
.permits__count--notstarted { background: var(--surface-2); color: var(--text-3); font-weight: 600; }

.permits__ongoing { margin-top: 18px; padding: 12px 16px; background: var(--surface-2); border-left: 3px solid var(--amber); border-radius: var(--radius); }
.permits__ongoing-h { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber); font-weight: 700; margin-bottom: 8px; }
.tbl--permit-ongoing { background: transparent; }
.tbl--permit-ongoing th { padding: 4px 8px; }
.tbl--permit-ongoing td { padding: 6px 8px; }


/* ─── PROC ──────────────────────────────────────────────────────────────── */
.block__h { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 14px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }

/* ─── DESIGN SECTION (consolidated) ─────────────────────────────────────── */
.dsec { margin-bottom: var(--gap-sec); }
.dsec__band {
  background: color-mix(in oklab, var(--accent), transparent 92%);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: 22px 26px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.dsec__eyebrow { font-size: var(--size-xsmall); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.dsec__h { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; margin: 6px 0 8px; }
.dsec__lede { font-size: var(--size-small); color: var(--text-2); margin: 0; max-width: 90ch; }
.dsec__toc { font-size: var(--size-xsmall); color: var(--text-2); margin: 12px 0 0; padding-left: 18px; columns: 2; column-gap: 32px; }
.dsec__toc li { margin-bottom: 3px; break-inside: avoid; }

/* Commercial section band (blue-ish neutral, distinct from design green) */
.dsec--commercial .dsec__band {
  background: color-mix(in oklab, var(--text-1), transparent 96%);
  border-left-color: var(--text-1);
}
.dsec--commercial .dsec__eyebrow { color: var(--text-1); }
.theme-terminal .dsec--commercial .dsec__band { background: var(--surface); border-left-color: var(--text-1); }
.theme-studio .dsec--commercial .dsec__band { border-left-color: var(--text-1); }

/* Billing — full-width single-column variant + cross-ref text */
.bill__xref { font-size: var(--size-xsmall); color: var(--text-3); font-style: italic; margin: 8px 0 0; }

.theme-editorial .dsec__h { font-style: italic; font-weight: 500; }
.theme-terminal .dsec__band { background: var(--surface); }
.theme-terminal .dsec__h { font-weight: 500; }
.theme-studio .dsec__h { font-weight: 400; }

/* Effects-of-design band — uses red for "consequence" framing */
.dsec--effects .dsec__band {
  background: color-mix(in oklab, var(--red), transparent 94%);
  border-left-color: var(--red);
}
.dsec--effects .dsec__eyebrow { color: var(--red); }
.theme-terminal .dsec--effects .dsec__band { background: var(--surface); border-left-color: var(--red); }

/* Design lateness 4-up stats */
.dlate__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dlate__stat { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--rule); padding: 14px 16px 12px; border-radius: var(--radius); }
.dlate__stat--red { border-top-color: var(--red); }
.dlate__stat--amber { border-top-color: var(--amber); }
.dlate__stat--neutral { border-top-color: var(--text-2); }
.dlate__l { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); font-weight: 600; }
.dlate__v { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 22px; line-height: 1.1; margin: 4px 0; letter-spacing: -0.01em; }
.dlate__stat--red .dlate__v { color: var(--red); }
.dlate__stat--amber .dlate__v { color: var(--amber); }
.dlate__s { font-size: var(--size-xsmall); color: var(--text-2); }
.dlate__note { font-size: var(--size-small); color: var(--text-2); margin: 12px 0 0; padding: 12px 16px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.theme-terminal .dlate__v { font-family: var(--font-num); }

/* Design VE filter */
.dve { background: var(--surface); border: 1px solid var(--rule); padding: 18px 20px; border-radius: var(--radius); }
.dve__head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1.5px solid var(--rule-strong); margin-bottom: 12px; }
.dve__big { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 32px; letter-spacing: -0.02em; line-height: 1; color: var(--amber); white-space: nowrap; }
.dve__big-l { font-size: var(--size-small); color: var(--text-2); }
.dve__list { list-style: none; padding: 0; margin: 0; }
.dve__row { display: grid; grid-template-columns: 110px 1fr 120px 60px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--size-small); }
.dve__row:last-child { border-bottom: 0; }
.dve__item { color: var(--text-1); }
.dve__band { font-family: var(--font-num); font-size: var(--size-xsmall); color: var(--text-2); text-align: right; }
.dve__note { font-size: var(--size-small); color: var(--text-2); margin: 12px 0 0; font-style: italic; }
.theme-terminal .dve__big { font-family: var(--font-num); color: var(--amber); font-size: 26px; }

/* Placeholder card (e.g. awaiting schedule file) */
.placeholder {
  background: var(--surface);
  border: 1.5px dashed var(--rule-strong);
  padding: 16px 22px;
  border-radius: var(--radius);
  margin: 8px 0 var(--gap-sec);
}
.placeholder__h { font-weight: 700; font-size: var(--size-small); color: var(--text-1); margin-bottom: 4px; }
.placeholder__b { font-size: var(--size-small); color: var(--text-2); }
.theme-terminal .placeholder { background: var(--surface); border-color: var(--amber); }
.theme-terminal .placeholder__h { color: var(--amber); }
.theme-studio .placeholder { border-color: var(--accent); }
.theme-studio .placeholder__h { color: var(--accent); }

/* Construction snapshot — 3-col version (no recap block) */
.cnstr__lists--threecol { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }

/* Overdue row tint for impact scenarios */
.tbl--fcd .is-overdue td { background: color-mix(in oklab, var(--red), transparent 88%); }
.theme-terminal .tbl--fcd .is-overdue td { background: rgba(255, 90, 82, 0.1); }

.proc { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
.proc-tracker { list-style: none; padding: 0; margin: 0; }
.proc-tracker li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.proc-tracker li:last-child { border-bottom: 0; }
.proc-tracker__n { font-family: var(--font-num); font-weight: 700; color: var(--text-3); }
.proc-tracker__a { font-weight: 600; font-size: var(--size-small); }
.proc-tracker__d { font-size: var(--size-xsmall); color: var(--text-2); margin-top: 2px; }
.proc-tracker__r { font-size: var(--size-xsmall); color: var(--text-3); margin-top: 3px; font-style: italic; }
.proc-tracker li.is-pending .proc-tracker__n { color: var(--rule-strong); }

/* ─── CNSTR ─────────────────────────────────────────────────────────────── */
.cnstr { background: var(--surface); border: 1px solid var(--rule); padding: 22px; border-radius: var(--radius); }
.cnstr__recap { margin: 0; font-size: var(--size-small); color: var(--text-2); }
.cnstr__lists--full { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.cnstr__lists--full > .cnstr__risks { grid-column: 1 / -1; }
.sw { display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 4px; }
.sw--plan { background: var(--rule-strong); }
.sw--actual { background: var(--green); }
.bullets { padding-left: 18px; margin: 0; font-size: var(--size-small); color: var(--text-1); }
.bullets li { margin-bottom: 4px; }

/* ─── BILLING ───────────────────────────────────────────────────────────── */
.bill { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bill__col--full { grid-column: 1 / -1; }
.pct { display: flex; align-items: center; gap: 8px; }
.pct__bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.pct__fill { height: 100%; background: var(--accent); border-radius: 3px; }
.pct__v { font-family: var(--font-num); font-size: var(--size-xsmall); font-weight: 600; min-width: 44px; text-align: right; }

/* ─── RISK MATRIX ───────────────────────────────────────────────────────── */
/* ─── RISK MATRIX (neutral cells; numbered chips colored by score) ─────── */
.riskmat { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
.riskmat__plot { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 1fr 22px 14px; gap: 0; }
.riskmat__yaxis-label {
  grid-column: 1; grid-row: 1;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-3);
}
.riskmat__xaxis-label {
  grid-column: 2; grid-row: 3;
  text-align: center;
  font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-3);
}
.riskmat__xticks {
  grid-column: 2; grid-row: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-family: var(--font-num); font-size: var(--size-xsmall); color: var(--text-3);
}
.riskmat__xticks span { text-align: center; padding-top: 4px; }
.riskmat__grid {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  position: relative;
  min-height: 280px;
}
.riskmat__cell {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px; position: relative;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; align-content: flex-start;
  justify-content: flex-start;
}
.riskmat__cell:nth-child(4n) { border-right: 0; }
.riskmat__grid > .riskmat__cell:nth-last-child(-n+4) { border-bottom: 0; }

.riskmat__chip {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--text-1);
  color: var(--text-1);
  font-family: var(--font-num); font-size: 11px; font-weight: 700;
  cursor: default;
}
.riskmat__chip--neutral { border-color: var(--rule-strong); color: var(--text-2); }
.riskmat__chip--lime { background: color-mix(in oklab, var(--lime), transparent 78%); border-color: color-mix(in oklab, var(--lime), transparent 30%); }
.riskmat__chip--amber { background: color-mix(in oklab, var(--amber), transparent 72%); border-color: var(--amber); color: var(--text-1); }
.riskmat__chip--red { background: var(--red); border-color: var(--red); color: var(--surface); }

.riskmat__ytick {
  position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-num); font-size: var(--size-xsmall); color: var(--text-3);
  font-weight: 600;
  pointer-events: none;
}
.tbl--risk { font-size: var(--size-xsmall); }
.tbl--risk th, .tbl--risk td { padding: 6px 8px; }

.theme-terminal .riskmat__grid { background: #000; border-color: var(--rule-strong); }
.theme-terminal .riskmat__cell { background: #000; border-color: var(--rule); }
.theme-terminal .riskmat__chip { background: #000; border-color: var(--accent); color: var(--accent); }
.theme-terminal .riskmat__chip--red { background: var(--red); border-color: var(--red); color: #000; }
.theme-terminal .riskmat__chip--amber { background: rgba(247,181,0,0.2); border-color: var(--amber); color: var(--amber); }
.theme-terminal .riskmat__chip--lime { background: rgba(163,230,53,0.18); border-color: var(--lime); color: var(--lime); }

/* ─── POC ───────────────────────────────────────────────────────────────── */
.poc__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.poc__tile { background: var(--surface); border: 1px solid var(--rule); padding: 14px 16px; border-top: 3px solid var(--rule-strong); border-radius: var(--radius); }
.poc__tile--amber { border-top-color: var(--amber); }
.poc__tile--red { border-top-color: var(--red); }
.poc__tile--green { border-top-color: var(--green); }
.poc__lbl { font-size: var(--size-xsmall); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }
.poc__v { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 28px; margin: 6px 0; line-height: 1; }
.poc__tile--amber .poc__v { color: var(--amber); }
.poc__tile--red .poc__v { color: var(--red); }
.poc__sub { font-size: var(--size-xsmall); color: var(--text-2); }
.poc__foot { margin-top: 14px; font-size: var(--size-xsmall); color: var(--text-3); padding: 10px 14px; background: var(--surface-2); border-left: 3px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; max-width: 100%; }

/* ─── NEXT ACTIONS ──────────────────────────────────────────────────────── */
.next { list-style: none; padding: 0; margin: 0; counter-reset: na; }
.next__row { display: grid; grid-template-columns: 28px 200px 1fr 140px; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--rule); align-items: baseline; font-size: var(--size-small); }
.next__n { font-family: var(--font-num); color: var(--text-3); font-weight: 700; }
.next__owner { font-weight: 600; }
.next__action { color: var(--text-1); }
.next__date { font-family: var(--font-num); color: var(--text-2); font-size: var(--size-xsmall); text-align: right; text-transform: uppercase; letter-spacing: 0.06em; }

/* ─── FOOTER ────────────────────────────────────────────────────────────── */
.rep__foot { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; margin-top: 36px; padding-top: 18px; border-top: 1.5px solid var(--text-1); font-size: var(--size-xsmall); color: var(--text-3); }
.rep__foot-h { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.rep__foot ul { columns: 2; column-gap: 24px; padding: 0; list-style: none; margin: 0; }
.rep__foot li { margin-bottom: 3px; break-inside: avoid; }
.rep__foot-r { text-align: right; }
.rep__foot-theme { margin-top: 8px; color: var(--accent); font-weight: 600; }

/* =========================================================================
   THEME A · EDITORIAL  (cream paper, Source Serif, restrained)
   ========================================================================= */
.theme-editorial {
  --bg: #f4efe5;
  --surface: #fbf8f1;
  --surface-2: #ece5d4;
  --text-1: #1f1c18;
  --text-2: #6a6258;
  --text-3: #948c80;
  --rule: #ddd3bd;
  --rule-strong: #b5a888;
  --accent: #6e1320;

  --red: #a8331f;
  --amber: #b76a1c;
  --green: #8A6D34;
  --lime: #C2A878;

  --font-head: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --font-num: "Source Sans 3", system-ui, sans-serif;

  --weight-head: 600;
  --size-h1: 38px;
  --size-kpi: 40px;
}
.theme-editorial .title__h1 { letter-spacing: -0.015em; }
.theme-editorial .sec__title { font-style: italic; font-weight: 500; }
.theme-editorial .sec__title::first-letter { font-variant: small-caps; }
.theme-editorial .kpi { background: var(--surface); border: 1px solid var(--rule); }
.theme-editorial .tbl thead tr { background: transparent; }
.theme-editorial .crit__ref { font-family: "Source Code Pro", monospace; background: var(--surface-2); color: var(--accent); }
.theme-editorial .drift__line { background: var(--accent); height: 1px; box-shadow: 0 1px 0 var(--rule-strong); }
.theme-editorial .cpp__row--neutral .cpp__bar { background: var(--accent); }

/* =========================================================================
   THEME B · TERMINAL  (near-black, mono, dense)
   ========================================================================= */
.theme-terminal {
  --bg: #0b0d10;
  --surface: #131619;
  --surface-2: #1c2025;
  --text-1: #e8ebf0;
  --text-2: #8d949b;
  --text-3: #5b6168;
  --rule: #262a30;
  --rule-strong: #3a414a;
  --accent: #C2A878;

  --red: #ff5a52;
  --amber: #f7b500;
  --green: #C2A878;
  --lime: #EFE6D3;

  --font-head: "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-num: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --weight-head: 500;
  --size-base: 12.5px;
  --size-small: 11px;
  --size-xsmall: 10px;
  --size-h1: 32px;
  --size-h2: 16px;
  --size-kpi: 32px;
  --size-kpi-sm: 19px;

  --pad-sec: 22px;
  --gap-sec: 28px;
  --radius: 2px;

  font-feature-settings: "tnum", "zero", "ss01";
}
.theme-terminal .title { border-bottom-color: var(--accent); border-bottom-width: 1px; }
.theme-terminal .title__eyebrow { color: var(--accent); }
.theme-terminal .title__h1 { font-weight: 500; }
.theme-terminal .title__h1 .title__period { color: var(--text-3); }
.theme-terminal .title__stat-v { font-family: var(--font-num); letter-spacing: -0.02em; }
.theme-terminal .sec__kicker { color: var(--accent); }
.theme-terminal .sec__title { font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; }
.theme-terminal .kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; }
.theme-terminal .kpi__value { font-family: var(--font-num); font-weight: 500; letter-spacing: -0.02em; }
.theme-terminal .kpi__label { color: var(--accent); }
.theme-terminal .tbl { background: transparent; }
.theme-terminal .tbl th { color: var(--accent); border-bottom-color: var(--rule-strong); font-family: var(--font-num); font-size: 9.5px; }
.theme-terminal .tbl td { border-bottom-color: var(--rule); }
.theme-terminal .tbl--cost .is-total td { background: var(--surface); border-color: var(--accent); }
.theme-terminal .tbl--cost .is-sub td { background: var(--surface); }
.theme-terminal .crit__card { background: var(--surface); border-color: var(--rule); }
.theme-terminal .crit__ref { background: #000; color: var(--accent); font-family: var(--font-num); border: 1px solid var(--rule-strong); }
.theme-terminal .crit__item { font-weight: 500; }
.theme-terminal .num { font-family: var(--font-num); }
.theme-terminal .varbar { background: var(--surface); border: 1px solid var(--rule); }
.theme-terminal .varbar__v { color: var(--text-1); }
.theme-terminal .pill { font-family: var(--font-num); font-size: 9.5px; letter-spacing: 0.05em; }
.theme-terminal .pill--neutral { background: var(--surface); }
.theme-terminal .drift { background: #000; border-color: var(--rule); }
.theme-terminal .drift__line { background: var(--accent); }
.theme-terminal .drift__date { font-family: var(--font-num); }
.theme-terminal .cpp { background: var(--surface); border-color: var(--rule); }
.theme-terminal .cpp__row--neutral .cpp__bar { background: var(--accent); color: #000; }
.theme-terminal .cpp__row--red .cpp__bar { background: var(--red); color: #000; }
.theme-terminal .cpp__bar { font-family: var(--font-num); border-radius: 0; }
.theme-terminal .cpp__budget { background: var(--accent); }
.theme-terminal .cpp__scale-budget { background: var(--accent); }
.theme-terminal .cpp__scale-budget-lbl { color: var(--accent); background: #000; border-color: var(--accent); }
.theme-terminal .ve { background: var(--surface); border-color: var(--rule); }
.theme-terminal .ve__big { font-family: var(--font-num); color: var(--accent); font-size: 28px; }
.theme-terminal .ve__bar-track { background: #000; }
.theme-terminal .ve__bar-fill { background: var(--accent); }
.theme-terminal .ve__bar-val, .theme-terminal .ve__no { font-family: var(--font-num); }
.theme-terminal .ve__cat { background: var(--surface-2); color: var(--accent); }
.theme-terminal .riskmat__bub { background: #000; border-color: var(--accent); color: var(--text-1); }
.theme-terminal .riskmat__bub-id { background: var(--accent); color: #000; }
.theme-terminal .cnstr { background: var(--surface); border-color: var(--rule); }
.theme-terminal .poc__tile { background: var(--surface); border-color: var(--rule); }
.theme-terminal .poc__v { font-family: var(--font-num); }
.theme-terminal .poc__foot { background: #000; border-left-color: var(--amber); color: var(--text-2); }
.theme-terminal .rep__foot { border-top-color: var(--accent); }
.theme-terminal .pct__fill { background: var(--accent); }
.theme-terminal .pct__v { font-family: var(--font-num); }
.theme-terminal .diamond { background: var(--accent); }
.theme-terminal .impact--high { background: rgba(255,90,82,0.16); }
.theme-terminal .impact--med { background: rgba(247,181,0,0.16); }
.theme-terminal .impact--low { background: rgba(74,222,128,0.16); }
.theme-terminal .rfi-list__row { background: var(--surface); border-color: var(--rule); }

/* =========================================================================
   THEME C · STUDIO  (white, deep green primary, conservative tables)
   ========================================================================= */
.theme-studio {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --surface-2: #eef2ee;
  --text-1: #1a1f1a;
  --text-2: #5b6260;
  --text-3: #8a9290;
  --rule: #dde2dd;
  --rule-strong: #b5beb6;
  --accent: #8A6D34;

  --red: #C0392B;
  --amber: #E67E22;
  --green: #C2A878;
  --lime: #C2A878;

  --font-head: "DM Serif Display", "DM Serif Text", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-num: "DM Mono", "DM Sans", system-ui, sans-serif;

  --weight-head: 400;
  --size-h1: 40px;
  --size-h2: 22px;
  --size-kpi: 40px;
}
.theme-studio .title { border-bottom-color: var(--accent); }
.theme-studio .title__h1 { letter-spacing: -0.01em; }
.theme-studio .sec__title { font-weight: 400; }
.theme-studio .sec__kicker { color: var(--accent); font-weight: 600; }
.theme-studio .kpi { background: var(--surface); box-shadow: 0 1px 0 var(--rule); }
.theme-studio .kpi--neutral .kpi__value { color: var(--accent); }
.theme-studio .kpi__bar { background: var(--surface-2); }
.theme-studio .kpi--neutral .kpi__bar { background: var(--accent); }
.theme-studio .tbl thead th { background: var(--accent); color: #fff; border-bottom: none; padding: 10px 12px; }
.theme-studio .tbl tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--accent), transparent 96%); }
.theme-studio .tbl--cost .is-total td { background: var(--accent); color: #fff; border-color: var(--accent); }
.theme-studio .tbl--cost .is-total .num, .theme-studio .tbl--cost .is-total .pos { color: #fff; }
.theme-studio .tbl--cost .is-sub td { background: color-mix(in oklab, var(--accent), transparent 88%); }
.theme-studio .crit__ref { background: var(--accent); color: #fff; }
.theme-studio .cpp__row--neutral .cpp__bar { background: var(--accent); }
.theme-studio .cpp__budget { background: var(--accent); }
.theme-studio .cpp__scale-budget { background: var(--accent); }
.theme-studio .cpp__scale-budget-lbl { color: var(--accent); border-color: var(--accent); }
.theme-studio .ve__big { color: var(--accent); }
.theme-studio .ve__bar-fill { background: var(--accent); }
.theme-studio .pct__fill { background: var(--accent); }
.theme-studio .diamond { background: var(--accent); }
.theme-studio .drift__line { background: var(--accent); }
.theme-studio .rep__foot { border-top-color: var(--accent); }

/* =========================================================================
   PRINT STYLESHEET — fidelity rules for window.print() / Save-as-PDF
   Added 22 May 2026 to fix Gantt bars / KPI tints / status pills / chart
   fills being stripped when printed. Three problems being solved:
     1. Chrome strips background colours in print by default
     2. Flex chart containers can shrink to zero width during print layout
     3. Sections, Gantt rows, KPI rows can break across pages mid-element
   ========================================================================= */
@media print {

  /* --- 1. FORCE COLOUR RENDERING -----------------------------------------
     Every coloured element (Gantt bars, KPI bottom tints, status pills,
     cost progression bars, risk chips, VE fills, RAG dots) relies on
     background-color. Chrome strips these unless print-color-adjust:exact
     is set. Apply to everything so we never miss one. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* --- 2. REMOVE SCREEN-ONLY CHROME --------------------------------------
     Sticky toolbars and the in-report navbar both confuse print layout.
     The host HTMLs already hide .bar; we defensively hide the in-report
     .navbar (sticky positioning re-renders on every page otherwise). */
  .navbar,
  .bar {
    display: none !important;
  }

  /* --- 3. PAGE & BODY RESET ----------------------------------------------
     Force a white background, kill any browser default margins, and let
     the report sit flush to the page edges (per-HTML @page rules set the
     paper size; we don't override here so user can still pick A4/Letter). */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .report {
    margin: 0 auto !important;
  }

  /* --- 4. BREAK CONTROL --------------------------------------------------
     Stop Chrome splitting these elements mid-block. Without this, a Gantt
     row, a KPI tile, or a critical-action card can end up half on one
     page and half on the next. */
  .now,
  .kpis__row,
  .kpi,
  .crit__card,
  .gantt,
  .gantt__head,
  .gantt__row,
  .cpp,
  .cpp__row,
  .ve,
  .ve__row,
  .drift,
  .drift__axis,
  .riskmat,
  .riskmat__grid,
  .riskmat__cell,
  .sqe,
  .sqe__card,
  .sqe__open,
  .photos,
  .photos__grid,
  .photos image-slot,
  .poc__tile,
  .next__row,
  .dsec__band,
  .dlate__row,
  .dlate__stat,
  .audience-banner,
  .placeholder,
  .rep__foot,
  .crit,
  .sec__h,
  table,
  thead,
  tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Keep section headers attached to the content that follows them */
  .sec__h,
  .dsec__band {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* Tables — repeat the header row on each page when a table breaks */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* --- 5. GANTT — bars and chart layout ----------------------------------
     The track is a flex child; without min-width:0 protection it can
     collapse to zero during print layout. Also defend the bar heights
     (they use transform translateY which print can mishandle). */
  .gantt__chrome,
  .gantt__head,
  .gantt__row,
  .gantt__today-wrap,
  .gantt__gridlines {
    flex-shrink: 0 !important;
  }
  .gantt__track {
    flex: 1 1 auto !important;
    min-width: 200px !important;
  }
  .gantt__bar--current,
  .gantt__bar--baseline {
    box-shadow: none !important;
    border-radius: 1px !important;
  }
  .gantt__diamond,
  .gantt__diamond--baseline {
    box-shadow: none !important;
  }
  /* Today line — dashed border survives print but make solid for clarity */
  .gantt__today {
    border-left: 2px solid var(--red) !important;
  }

  /* --- 6. COST PROGRESSION (CPP) — protect bar fills ---------------------
     Each row is a 3-column grid; the middle column holds the bar fill.
     Bar fill is background-coloured, so the print-color-adjust rule above
     handles it — but defensively re-state min-height to prevent collapse. */
  .cpp__track { min-height: 26px !important; }
  .cpp__bar { min-height: 26px !important; }

  /* --- 7. KPI TILES — bottom tint and inline progress --------------------
     The 3px bottom bar uses background colour. Force the colours
     explicitly so any later cascade reset doesn't kill them. */
  .kpi__bar { height: 4px !important; } /* slightly thicker, easier in print */
  .kpi--red    .kpi__bar { background: var(--red)   !important; }
  .kpi--amber  .kpi__bar { background: var(--amber) !important; }
  .kpi--green  .kpi__bar { background: var(--green) !important; }
  .kpi--neutral .kpi__bar { background: var(--accent) !important; }

  /* Inline progress bars on the progress KPI tile use mix-blend-mode:
     multiply, which Chrome's print engine sometimes drops. Replace with
     solid fill — slightly less subtle on screen but unambiguous in print. */
  .kpi__progress-actual,
  .now__bar-actual {
    mix-blend-mode: normal !important;
  }
  .theme-studio .kpi__progress-actual,
  .theme-studio .now__bar-actual { background: var(--accent) !important; }
  .theme-editorial .kpi__progress-actual,
  .theme-editorial .now__bar-actual { background: var(--accent) !important; }

  /* --- 8. STATUS PILLS — defend visibility -------------------------------
     Pills use color-mix() for tinted backgrounds. Some print engines
     misrender color-mix. Add a thin border in matching colour so the
     pill remains visible even if the tint drops. */
  .pill {
    border: 1px solid currentColor !important;
    padding: 1px 7px !important;
  }
  .pill--red    { color: var(--red)   !important; }
  .pill--amber  { color: var(--amber) !important; }
  .pill--green  { color: var(--green) !important; }

  /* --- 9. RAG DOTS, DIAMONDS, IMPACT BADGES ------------------------------ */
  .rag--r, .rag--a, .rag--g,
  .diamond,
  .impact--high, .impact--med, .impact--low {
    box-shadow: none !important;
  }
  .impact { border: 1px solid currentColor !important; }

  /* --- 10. OPENING-DATE DRIFT TIMELINE -----------------------------------
     The timeline relies on absolute positioning inside a tall container.
     If the container collapses, the dots stack on a single line and the
     story disappears. Lock minimum height. */
  .drift {
    min-height: 360px !important;
    padding-bottom: 40px !important;
  }
  .drift__axis {
    min-height: 200px !important;
  }
  .drift__pt {
    z-index: 2 !important;
  }
  .drift__dot {
    box-shadow: none !important;
  }

  /* --- 11. VE REGISTER bar fills ----------------------------------------- */
  .ve__bar-track { min-height: 8px !important; }
  .ve__bar-fill  { min-height: 8px !important; }

  /* --- 12. RISK MATRIX — chips and grid ----------------------------------
     Chip backgrounds use color-mix; add explicit fallback colour and
     strengthen border so chips remain visible. */
  .riskmat__chip {
    border-width: 2px !important;
  }

  /* --- 13. VAR BARS (milestone variance) --------------------------------- */
  .varbar { min-height: 18px !important; }
  .varbar__fill { min-height: 18px !important; }

  /* --- 14. PCT FILL BARS (billing %) ------------------------------------- */
  .pct__bar  { min-height: 6px !important; }
  .pct__fill { min-height: 6px !important; }

  /* --- 15. SECTIONS — give breathing room before a forced break ---------- */
  .sec { margin-bottom: 28px !important; }

  /* --- 16. LINKS — strip underline noise and don't print URL after each --- */
  a, a:link, a:visited {
    color: inherit !important;
    text-decoration: none !important;
  }
  a[href]:after { content: "" !important; }
}
/* ─── PRINT STYLESHEET — end ───────────────────────────────────────────── */