/* Commissioner surface (station index 10) - a utilization-focused commissioning
   cockpit. Light-canvas panel content; reuses tokens.css and shared wb- table /
   badge / button styles. Organised as four movements: Commission, Assure, Deliver, Use. */

.wb-cm { display: flex; flex-direction: column; gap: var(--space-6); }

/* ---- header --------------------------------------------------------------*/
.wb-cm-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.wb-cm-head-l { max-width: 62ch; }
.wb-cm-profile { flex: 0 0 auto; }
.wb-cm-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  padding: 4px 12px; border: 1px solid currentColor; border-radius: var(--radius-full);
}
.wb-cm-profile-pick { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.wb-cm-profile-pick-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.wb-cm-profile-btns { display: flex; gap: 6px; }

/* ---- decision clock (the north star) ------------------------------------*/
.wb-cm-clock {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  flex-wrap: wrap; padding: 16px 20px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
  border: 1px solid var(--border); border-left: 4px solid var(--teal);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.wb-cm-clock-l { flex: 1 1 340px; min-width: 260px; }
.wb-cm-clock-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-ink); margin-bottom: 6px;
}
.wb-cm-clock-input {
  width: 100%; border: none; background: transparent; padding: 0;
  font-size: var(--text-xl); font-weight: 700; color: var(--text); line-height: 1.2;
}
.wb-cm-clock-input::placeholder { color: var(--border-strong); font-weight: 600; }
.wb-cm-clock-input:focus { outline: none; box-shadow: 0 2px 0 var(--teal); }
.wb-cm-clock-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.wb-cm-govitem { display: flex; flex-direction: column; gap: 2px; }
.wb-cm-govitem-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.wb-cm-govitem-value { font-size: var(--text-sm); color: var(--text); font-weight: 600; }

/* ---- lifecycle spine (status ribbon) ------------------------------------*/
.wb-cm-spine {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.wb-cm-spine-link { flex: 1 1 14px; min-width: 14px; height: 1px; background: var(--border-strong); }
.wb-cm-stage {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-full);
  padding: 5px 12px; cursor: pointer; transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.wb-cm-stage:hover { color: var(--text); }
.wb-cm-stage-dot {
  width: 15px; height: 15px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--border-strong); display: inline-flex; align-items: center;
  justify-content: center; color: #fff;
}
.wb-cm-stage--done .wb-cm-stage-dot { background: var(--green); border-color: transparent; }
.wb-cm-stage--active { color: var(--teal-ink); background: var(--teal-light); }
.wb-cm-stage--active .wb-cm-stage-dot { background: var(--teal); border-color: transparent; }

/* ---- cockpit KPI row -----------------------------------------------------*/
.wb-cm-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.wb-cm-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; min-height: 88px;
}
.wb-cm-kpi--warn { border-top-color: var(--amber); }
.wb-cm-kpi--good { border-top-color: var(--green); }
.wb-cm-kpi-value { font-size: var(--text-lg); font-weight: 700; color: var(--text); line-height: 1.15; }
.wb-cm-kpi-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; line-height: 1.3; }
.wb-cm-kpi-sub { font-size: 11px; color: var(--text-tertiary); margin-top: auto; }
.wb-cm-kpi--warn .wb-cm-kpi-sub { color: var(--amber-text); }
.wb-cm-kpi--good .wb-cm-kpi-sub { color: var(--green-strong); }

/* ---- movement sections ---------------------------------------------------*/
.wb-cm-move {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-top: var(--space-5); border-top: 1px solid var(--border);
}
.wb-cm-move-head { display: flex; align-items: flex-start; gap: 16px; }
.wb-cm-move-idx {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--teal); opacity: 0.55; letter-spacing: -0.02em; flex: 0 0 auto; margin-top: 2px;
}
.wb-cm-move-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-ink); margin-bottom: 3px;
}
.wb-cm-move-title { font-size: var(--text-xl); font-weight: 700; color: var(--text); margin: 0 0 4px; }
.wb-cm-move-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; margin: 0; max-width: 74ch; }

.wb-cm-panel-intro { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; margin: 0 0 14px; }
.wb-cm-hint { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; margin: 4px 0 12px; }
.wb-cm-muted { color: var(--text-tertiary); font-size: var(--text-xs); }
.wb-cm-sub {
  display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px;
}
.wb-cm-sub--mt { margin-top: 18px; }
.wb-cm-sub-count {
  display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text-tertiary); background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--radius-full); letter-spacing: 0;
}

/* ---- Movement 1: focus fields + two-column layout -----------------------*/
.wb-cm-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wb-cm-focus-field { display: flex; flex-direction: column; gap: 5px; }
.wb-cm-focus-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.wb-cm-focus-input { font-size: var(--text-sm); line-height: 1.5; resize: vertical; }

/* The user table spans the full width; "Engage the right users" sits in a row beneath it,
   quadrant grid on the right and the selected quadrant's engagement strategy beside it.
   The table cannot share the row: it will not compress below ~1015px, which leaves under
   ~225px for a side column at a 1440px viewport, far too narrow for a legible 2x2. */
.wb-cm-two-side {
  display: flex; flex-direction: row; gap: 16px;
  align-items: flex-start; margin-top: var(--space-6);
}
.wb-cm-two-side > .wb-cm-eng { flex: 1 1 auto; min-width: 0; margin-top: 0; }
@media (max-width: 900px) {
  .wb-cm-two-side { flex-direction: column; }
  .wb-cm-two-side > .wb-cm-grid-wrap { order: -1; max-width: none; }
}

/* ---- table inputs (in-cell editing) -------------------------------------*/
.wb-cm-table { width: 100%; }
.wb-cm-eq, .wb-cm-rec { font-size: var(--text-sm); color: var(--text); line-height: 1.4; max-width: 46ch; }
.wb-cm-inp { width: 100%; font-size: var(--text-xs); padding: 5px 8px; }
.wb-cm-inp--strong { font-size: var(--text-sm); font-weight: 600; }
.wb-cm-inp--sub { display: block; margin-top: 3px; color: var(--text-tertiary); }
textarea.wb-cm-inp { line-height: 1.45; resize: vertical; }
/* Cockpit textareas must grow to their rows. The shared .wb-input pins height:36px, which
   otherwise clips multi-line governance prose (C0 purpose/use, C4 recommendations, risks)
   to ~1.5 lines. Scoped to cockpit textareas only, so single-line inputs stay 36px. */
.wb-cm textarea.wb-input { height: auto; min-height: 60px; resize: vertical; }
.wb-cm-eqinp { font-family: var(--font-mono); text-align: center; }
.wb-cm-eqinp--empty { border-color: var(--amber); background: var(--amber-light); }
.wb-cm-note { font-size: var(--text-xs); padding: 5px 8px; width: 100%; min-width: 140px; }
.wb-cm-select { font-size: var(--text-xs); padding: 5px 8px; }
.wb-cm-date { font-family: var(--font-mono); font-size: 11px; }
.wb-cm-owner { font-size: var(--text-xs); color: var(--text-secondary); }
.wb-cm-owner--sec { color: var(--text-tertiary); font-style: italic; }
.wb-cm-user-table td { vertical-align: top; }

/* ---- C1 Contract: editable header, amendments, acceptance record ---------*/
.wb-cm-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wb-cm-cfield { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wb-cm-cfield-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; }
.wb-cm-cfield--wide { grid-column: 1 / -1; }
.wb-cm-acc { display: flex; flex-direction: column; gap: 6px; margin-top: 6px;
  padding: 8px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.wb-cm-acc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wb-cm-acc-when { font-size: 11px; color: var(--text-tertiary); }
.wb-cm-over { font-size: var(--text-xs); font-weight: 600; color: var(--red-strong);
  background: var(--red-light); border: 1px solid var(--red); padding: 4px 8px; border-radius: var(--radius-sm); margin-top: 8px; display: inline-block; }
.wb-cm-recon { font-size: 11px; color: var(--amber-text); margin-top: 4px; display: block; }
.wb-cm-inp--num { text-align: right; font-family: var(--font-mono); }
@media (max-width: 720px) { .wb-cm-cgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wb-cm-cgrid { grid-template-columns: 1fr; } }

/* influence / interest selects, colour-keyed */
.wb-cm-lvls { display: inline-flex; flex-direction: column; gap: 4px; }
.wb-cm-lvl-sel {
  font-size: 11px; padding: 3px 6px; min-height: 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary);
  font-family: var(--font-mono);
}
.wb-cm-lvl-sel--high { border-color: var(--teal-dark); color: var(--teal-ink); background: var(--teal-light); }
.wb-cm-lvl-sel--low { color: var(--text-tertiary); }

/* ---- stakeholder engagement grid (influence x interest) -----------------*/
.wb-cm-grid-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
  flex: 0 0 360px; max-width: 400px; align-self: flex-start;
}
.wb-cm-grid-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary); margin-bottom: 12px;
}
.wb-cm-grid {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
  margin-left: 14px; margin-bottom: 14px; width: calc(100% - 14px);
}
.wb-cm-quad {
  position: relative; padding: 7px 8px; background: var(--surface-muted);
  border: 1px dashed var(--border); overflow: hidden;
}
.wb-cm-quad--rt { background: var(--teal-glow); border-color: var(--teal-light); }
.wb-cm-quad-t { display: block; font-size: 10px; font-weight: 700; color: var(--text-secondary); line-height: 1.2; }
.wb-cm-quad-s { display: block; font-size: 9px; color: var(--text-tertiary); line-height: 1.2; margin-top: 1px; }
.wb-cm-grid-plot { position: absolute; inset: 0; pointer-events: none; }
.wb-cm-dot {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  transform: translate(-50%, 50%); box-shadow: 0 0 0 2px var(--surface); pointer-events: auto;
}
.wb-cm-dot--primary { background: var(--teal); }
.wb-cm-dot--secondary { background: var(--surface); border: 2px solid var(--teal-dark); }
.wb-cm-dot--static { position: static; transform: none; display: inline-block; width: 10px; height: 10px; box-shadow: none; margin-right: 5px; vertical-align: middle; }
.wb-cm-axis {
  position: absolute; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.wb-cm-axis--y { left: -14px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; }
.wb-cm-axis--x { bottom: -13px; left: 50%; transform: translateX(-50%); }
.wb-cm-grid-legend { display: flex; gap: 16px; font-size: 11px; color: var(--text-tertiary); }
.wb-cm-grid-legend span { display: inline-flex; align-items: center; }

/* interactive quadrants: each cell is a button that opens its engagement checklist */
.wb-cm-quad {
  font: inherit; color: inherit; text-align: left; margin: 0; cursor: pointer;
  display: flex; flex-direction: column;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.wb-cm-quad:hover { border-color: var(--teal-light); background: var(--teal-glow); }
.wb-cm-quad--rt:hover { background: var(--teal-light); }
.wb-cm-quad:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal); z-index: 3; }
.wb-cm-quad--on { border-style: solid; border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--teal-glow); }
.wb-cm-quad--on.wb-cm-quad--rt { background: var(--teal-light); }
.wb-cm-quad-n { position: absolute; top: 5px; right: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-tertiary); }
.wb-cm-quad--on .wb-cm-quad-n { color: var(--teal-dark); }
.wb-cm-grid-plot .wb-cm-dot { pointer-events: none; }
.wb-cm-grid-hint { font-size: 10px; color: var(--text-tertiary); margin: 8px 0 6px; }

/* ---- engagement checklist panel (opens under the grid) -------------------*/
.wb-cm-eng {
  margin-top: 14px; border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: var(--radius-lg); background: var(--surface); overflow: hidden;
  animation: wb-cm-eng-in 140ms ease;
}
@keyframes wb-cm-eng-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wb-cm-eng { animation: none; } }
.wb-cm-eng-head {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-muted);
}
.wb-cm-eng-name { font-size: 13px; font-weight: 700; color: var(--text); }
.wb-cm-eng-gloss { font-size: 11px; color: var(--text-tertiary); }
.wb-cm-eng-prog { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.wb-cm-eng-body { display: grid; grid-template-columns: minmax(140px, 0.8fr) 1.4fr; }
@media (max-width: 560px) { .wb-cm-eng-body { grid-template-columns: 1fr; } }
.wb-cm-eng-people { padding: 12px; border-right: 1px solid var(--border); }
@media (max-width: 560px) { .wb-cm-eng-people { border-right: none; border-bottom: 1px solid var(--border); } }
.wb-cm-eng-actions { padding: 12px; }
.wb-cm-eng-sub {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-tertiary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.wb-cm-eng-cnt { font-family: var(--font-mono); font-weight: 400; }
.wb-cm-eng-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wb-cm-eng-person { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.wb-cm-eng-pname { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wb-cm-eng-ptier { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; flex: none; }
.wb-cm-eng-ptier--p { background: var(--teal-glow); color: var(--teal-dark); }
.wb-cm-eng-ptier--s { background: var(--surface-muted); color: var(--text-tertiary); }
.wb-cm-eng-empty { font-size: 12px; color: var(--text-tertiary); margin: 0; }
.wb-cm-eng-alist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wb-cm-eng-lbl {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px; cursor: pointer;
  font-size: 12.5px; line-height: 1.35; color: var(--text-secondary); border-radius: var(--radius-sm);
}
.wb-cm-eng-lbl:hover { background: var(--surface-muted); }
.wb-cm-eng-cb { margin-top: 1px; width: 15px; height: 15px; accent-color: var(--teal); flex: none; cursor: pointer; }
.wb-cm-eng-item.is-on .wb-cm-eng-atext { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--border-strong); }

/* ---- orphaned primary user (a stated use no evaluation question serves) ---*/
.wb-cm-orphan {
  margin: 10px 0 0; padding: 8px 10px; font-size: var(--text-xs); font-weight: 600; line-height: 1.5;
  color: var(--red-strong); background: var(--red-light);
  border: 1px solid var(--red); border-radius: var(--radius-sm);
}

/* ---- meters (C1 commitment, C5 implementation) ---------------------------*/
.wb-cm-meter { height: 8px; border-radius: var(--radius-full); background: var(--surface-muted); overflow: hidden; border: 1px solid var(--border); }
.wb-cm-meter-fill { height: 100%; border-radius: var(--radius-full); transition: width var(--dur-slow) var(--ease-out); }
.wb-cm-meter-fill--teal { background: var(--teal); }
.wb-cm-meter-fill--green { background: var(--green); }
.wb-cm-meter-fill--amber { background: var(--amber); }
.wb-cm-meter-fill--red { background: var(--red); }

/* ---- Movement 2: assure top row + SoE distribution ----------------------*/
.wb-cm-assure-top { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: center; }
.wb-cm-dist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; }
.wb-cm-dist-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wb-cm-dist-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.wb-cm-dist-sub { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); }
.wb-cm-dist-bars { display: flex; align-items: flex-end; gap: 10px; height: 66px; }
.wb-cm-dist-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.wb-cm-dist-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.wb-cm-dist-fill { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; transition: height var(--dur-slow) var(--ease-out); }
.wb-cm-dist-n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.wb-cm-dist-x { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.wb-cm-dist-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- inception chips -----------------------------------------------------*/
.wb-cm-inception { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-cm-inception-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-right: 2px; }
.wb-cm-inception-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px 10px; }
.wb-cm-inception-chip--done { color: var(--green-strong); background: var(--green-light); border-color: transparent; }
/* Clickable chips (open the evaluation-team view of the element). */
button.wb-cm-inception-chip { cursor: pointer; font-family: inherit; line-height: 1.4; transition: border-color 0.12s, color 0.12s; }
button.wb-cm-inception-chip:hover { border-color: var(--border-strong); color: var(--text-secondary); }
button.wb-cm-inception-chip--done:hover { border-color: var(--green); color: var(--green-strong); }
button.wb-cm-inception-chip svg:last-child { opacity: 0.55; }
button.wb-cm-inception-chip:hover svg:last-child { opacity: 1; }

/* ---- marks (present / warn / dash) --------------------------------------*/
.wb-cm-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; font-size: 12px; }
.wb-cm-mark--ok { color: var(--green-strong); }
.wb-cm-mark--warn { color: #fff; background: var(--amber-dark); }
.wb-cm-mark--dash { width: 14px; height: 2px; border-radius: 2px; background: var(--border-strong); }

/* ---- strength-of-evidence rating buttons --------------------------------*/
.wb-cm-soe { display: inline-flex; gap: 4px; }
.wb-cm-soe-btn { width: 30px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; transition: all var(--dur-fast) ease; }
.wb-cm-soe-btn:hover { border-color: var(--slate); }
.wb-cm-soe-btn--on { color: #fff; border-color: transparent; }
/* Higher = better for both C2 answerability and C3 strength-of-evidence (4 strongest).
   Strong/ink variants so the white rating digit clears WCAG AA on the on-state fill
   (matches CockpitData.ANSW/SOE colours, which C3 applies inline). */
.wb-cm-soe-btn--4.wb-cm-soe-btn--on { background: var(--green-strong); }
.wb-cm-soe-btn--3.wb-cm-soe-btn--on { background: var(--teal-ink); }
.wb-cm-soe-btn--2.wb-cm-soe-btn--on { background: var(--amber-dark); }
.wb-cm-soe-btn--1.wb-cm-soe-btn--on { background: var(--red-strong); }

/* ---- decision block ------------------------------------------------------*/
.wb-cm-decision { margin-top: 16px; padding: 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-md); }
.wb-cm-decision-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.wb-cm-decision-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.wb-cm-decision-when { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }
.wb-cm-decision-sub { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; margin: 0 0 12px; }
.wb-cm-decision-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-cm-decision-note { margin-top: 12px; width: 100%; font-size: var(--text-sm); }
.wb-cm-conditions { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wb-cm-conditions-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-text); }
.wb-cm-condition { display: flex; align-items: center; gap: 8px; }
.wb-cm-cond-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.wb-cm-cond-check--on { background: var(--green); border-color: transparent; }
.wb-cm-cond-text { flex: 1; font-size: var(--text-sm); }

/* ---- shared time track (C3 delivery, C5 review cadence) ------------------*/
/* Height, and the left/top of every dot, stem and label, are set inline from the
   measured pixel layout in CockpitData.packTrackLanes. Dots hold their true date;
   only labels move, into as many lanes as the bunching needs. */
.wb-cm-track { position: relative; margin: 8px 8px 18px; }
.wb-cm-track-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--border-strong); border-radius: 2px; transform: translateY(-1px); }
/* Dashed, so it reads as a reference line behind the labels it now runs the full height
   of rather than as a divider cutting through them. */
.wb-cm-track-today { position: absolute; width: 2px; transform: translateX(-1px); background-image: linear-gradient(var(--teal) 60%, transparent 60%); background-size: 2px 7px; background-repeat: repeat-y; }
.wb-cm-track-today-lbl { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); white-space: nowrap; }
.wb-cm-mile-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); transform: translate(-50%, -50%); z-index: 2; }
.wb-cm-mile-stem { position: absolute; width: 1px; background: var(--border-strong); opacity: 0.55; transform: translateX(-0.5px); z-index: 1; }
.wb-cm-mile-lbl { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.wb-cm-mile-name { font-size: 10px; font-weight: 700; color: var(--text-secondary); line-height: 1.3; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-cm-mile-name--2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Both lines carry an explicit line-height: the row height is computed in JS, and an
   inherited body line-height would overflow the row and clip the label. */
.wb-cm-mile-date { font-family: var(--font-mono); font-size: 10px; line-height: 1.3; color: var(--text-tertiary); margin-top: 1px; white-space: nowrap; }
/* The track is drawn with dots, so its readable equivalent is an off-screen list. */
.wb-cm-track-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* aging chips */
.wb-cm-age { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: var(--radius-sm); color: var(--text-tertiary); background: var(--surface-muted); border: 1px solid var(--border); }
.wb-cm-age--soon { color: var(--amber-text); background: var(--amber-light); border-color: transparent; }
.wb-cm-age--late { color: var(--red-strong); background: var(--red-light); border-color: transparent; }

/* risk likelihood / impact badges */
.wb-cm-li { display: inline-flex; gap: 3px; }
.wb-cm-li-b { width: 20px; height: 20px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; }
/* White text on these badges: use the strong variants so the letter clears WCAG AA
   (amber #D97706 / green #059669 fail at ~3.2-3.8:1; the -dark/-strong variants pass). */
.wb-cm-li-b--low { background: var(--green-strong); }
.wb-cm-li-b--medium { background: var(--amber-dark); }
.wb-cm-li-b--high { background: var(--red-strong); }

/* ---- Movement 4: uptake bar ---------------------------------------------*/
.wb-cm-uptake { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.wb-cm-uptake-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wb-cm-uptake-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.wb-cm-uptake-num { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.wb-cm-uptake-bar { display: flex; height: 12px; gap: 2px; border-radius: var(--radius-full); overflow: hidden; }
.wb-cm-uptake-seg { min-width: 8px; border-radius: 2px; }
.wb-cm-uptake-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.wb-cm-uptake-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); }
.wb-cm-uptake-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.wb-cm-uptake-leg b { color: var(--text-secondary); font-family: var(--font-mono); }

/* management-response action + next-review follow-through */
.wb-cm-mr-act { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.wb-cm-mr-review { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-tertiary); }
.wb-cm-mr-review span { font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.wb-cm-mr-review--muted { opacity: 0.55; }
.wb-cm-mr-review-date { font-family: var(--font-mono); font-size: 10px; padding: 2px 5px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-secondary); }

.wb-cm-add { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- decision window dates and user status (C0 register) -----------------*/
.wb-cm-windate { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wb-cm-windate-cap {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-tertiary); width: 42px; flex: none;
}
.wb-cm-windate .wb-cm-date { min-width: 0; flex: 1; }
.wb-cm-select--sub { margin-top: 4px; font-size: var(--text-xs); }

/* ---- pre-commitment drift (C2) -------------------------------------------*/
.wb-cm-drift-chip { margin-left: 8px; vertical-align: middle; white-space: nowrap; }
.wb-cm-driftlist { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.wb-cm-drift { font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- money against use (C4) ----------------------------------------------*/
.wb-cm-moneyline {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: var(--space-6);
}
.wb-cm-moneyline-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-cm-moneyline-v { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.wb-cm-moneyline-l { font-size: var(--text-xs); color: var(--text-secondary); }
.wb-cm-moneyline--good .wb-cm-moneyline-cell--verdict .wb-cm-moneyline-v { color: var(--green-strong); }
.wb-cm-moneyline--bad .wb-cm-moneyline-cell--verdict .wb-cm-moneyline-v { color: var(--red-strong); }
@media (max-width: 640px) { .wb-cm-moneyline { grid-template-columns: 1fr; } }

/* ---- responsive ----------------------------------------------------------*/
@media (max-width: 1040px) {
  .wb-cm-kpis { grid-template-columns: repeat(3, 1fr); }
  .wb-cm-assure-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wb-cm-header { flex-direction: column; }
  .wb-cm-profile, .wb-cm-profile-pick { align-items: flex-start; }
  .wb-cm-kpis { grid-template-columns: 1fr 1fr; }
  .wb-cm-focus { grid-template-columns: 1fr; }
  .wb-cm-move-head { gap: 10px; }
  .wb-cm-move-idx { font-size: 20px; }
}

/* ==========================================================================
   Cockpit v2: role switch, condensed persistent header, overview flight deck,
   alerts, and the station-specific devices (funnel, cadence, rings).
   ========================================================================== */

/* ---- role switch (TopBar) hover ------------------------------------------*/
.wb-roleswitch-btn:hover { background: rgba(255, 255, 255, 0.09) !important; }

/* ---- commissioner rail ---------------------------------------------------*/
.wb-rail--commissioner .wb-rail-btn-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
.wb-rail-btn--back { margin-bottom: 6px; }
.wb-rail-btn--commissioner-entry .wb-rail-btn-num { font-weight: 700; }

/* ---- station body + move idx uses 2-char codes ---------------------------*/
.wb-cm-body { display: flex; flex-direction: column; gap: var(--space-6); }
.wb-cm-move-idx { min-width: 1.6em; }

/* ---- condensed persistent header ----------------------------------------*/
.wb-cm-header2 {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position: sticky; top: 4px; z-index: 5;
}
.wb-cm-header2-top { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.wb-cm-header2-id { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.wb-cm-chip--muted { color: var(--text-tertiary); border-color: var(--border-strong); }
.wb-cm-header2-clock { display: inline-flex; align-items: baseline; gap: 7px; font-size: var(--text-sm); font-weight: 700; color: var(--text); min-width: 0; }
.wb-cm-header2-clock-ey { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink); font-weight: 600; }
.wb-cm-header2-over { font-size: var(--text-xs); color: var(--text-tertiary); }

/* alerts badge */
.wb-cm-alertbadge {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer;
  font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary);
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 5px 12px;
}
.wb-cm-alertbadge:hover { border-color: var(--border-strong); }
.wb-cm-alertbadge-ico { display: inline-flex; color: var(--text-tertiary); }
.wb-cm-alertbadge--alert { color: var(--red-strong); background: var(--red-light); border-color: transparent; }
.wb-cm-alertbadge--alert .wb-cm-alertbadge-ico { color: var(--red); }

/* thin spine variant */
.wb-cm-spine--thin { border: none; background: transparent; padding: 0; border-radius: 0; }
.wb-cm-spine--thin .wb-cm-stage { padding: 3px 9px; font-size: 11px; }
.wb-cm-spine--thin .wb-cm-stage-dot { width: 13px; height: 13px; }

/* condensed KPI strip (clickable chips) */
.wb-cm-kpistrip { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-cm-kpichip {
  display: flex; flex-direction: column; gap: 1px; text-align: left; cursor: pointer;
  padding: 6px 12px; background: var(--surface-muted); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); min-width: 0;
}
.wb-cm-kpichip:hover { background: var(--surface); border-color: var(--border-strong); }
.wb-cm-kpichip--warn { border-left-color: var(--amber); }
.wb-cm-kpichip--good { border-left-color: var(--green); }
.wb-cm-kpichip-v { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--text); line-height: 1.2; }
.wb-cm-kpichip-l { font-size: 10px; color: var(--text-tertiary); line-height: 1.25; }

/* ---- alerts drawer + rows ------------------------------------------------*/
.wb-cm-drawer { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; }
.wb-cm-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wb-cm-drawer-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.wb-cm-alerts { display: flex; flex-direction: column; gap: 8px; }
.wb-cm-alert {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong); border-radius: var(--radius-sm);
}
.wb-cm-alert--overdue { border-left-color: var(--red); background: var(--red-light); }
.wb-cm-alert--soon { border-left-color: var(--amber); }
.wb-cm-alert--info { border-left-color: var(--slate); }
.wb-cm-alert-main { flex: 1 1 320px; min-width: 0; }
.wb-cm-alert-title { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.wb-cm-alert-ico { display: inline-flex; color: var(--red); flex: 0 0 auto; }
.wb-cm-alert--soon .wb-cm-alert-ico { color: var(--amber-text); }
.wb-cm-alert-detail { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.5; margin-top: 3px; }
.wb-cm-alert-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }

/* ---- overview flight deck ------------------------------------------------*/
.wb-cm-overview { display: flex; flex-direction: column; gap: var(--space-5); }
.wb-cm-otiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.wb-cm-otile {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; min-height: 104px;
  padding: 14px 15px; background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong); border-radius: var(--radius-md);
}
.wb-cm-otile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.wb-cm-otile--warn { border-top-color: var(--amber); }
.wb-cm-otile--good { border-top-color: var(--green); }
.wb-cm-otile-ring { margin-bottom: 2px; }
.wb-cm-otile-v { font-size: var(--text-lg); font-weight: 700; color: var(--text); line-height: 1.15; }
.wb-cm-otile-l { font-size: 11px; font-weight: 600; color: var(--text-secondary); line-height: 1.3; }
.wb-cm-otile-s { font-size: 11px; color: var(--text-tertiary); margin-top: auto; }
.wb-cm-otile--warn .wb-cm-otile-s { color: var(--amber-text); }
.wb-cm-otile--good .wb-cm-otile-s { color: var(--green-strong); }

/* donut ring */
.wb-cm-ring { display: block; }
.wb-cm-ring-t { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--text); }

/* overview station nav cards */
.wb-cm-navcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wb-cm-navcard {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1px 10px;
  text-align: left; cursor: pointer; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.wb-cm-navcard:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.wb-cm-navcard-code { grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700; color: var(--teal); }
.wb-cm-navcard-label { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.wb-cm-navcard-desc { font-size: 11px; color: var(--text-tertiary); line-height: 1.4; }

/* ---- C4 uptake funnel ----------------------------------------------------*/
.wb-cm-funnel-bar { display: flex; gap: 3px; align-items: stretch; height: 56px; }
.wb-cm-funnel-seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: #fff; min-width: 0; padding: 4px; overflow: hidden;
}
/* Segment background and text colour are set inline per-stage in CockpitUse.js (funnel()),
   so the first pale stage can carry dark text. No :nth-child colours here. */
.wb-cm-funnel-count { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700; line-height: 1; }
.wb-cm-funnel-label, .wb-cm-funnel-stage { font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; opacity: 0.95; }
.wb-cm-mr-track { margin-top: 6px; }
/* Recommendation evidence basis: link to evaluation questions + weakest strength of evidence. */
.wb-cm-mr-evidence { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.wb-cm-soe-basis { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.wb-cm-soe-basis--warn { color: var(--amber-text); }
.wb-cm-soe-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
/* Inline two-step remove confirmation (contract system of record). */
.wb-cm-confirm { display: inline-flex; gap: 4px; flex-wrap: nowrap; justify-content: center; }
/* Append-only accountability log (Overview flight deck). */
.wb-cm-log { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden auto; margin-top: 12px; max-height: 340px; }
.wb-cm-logrow { display: grid; grid-template-columns: 150px 170px 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: var(--text-xs); }
.wb-cm-logrow:last-child { border-bottom: none; }
.wb-cm-logrow-when { font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; }
.wb-cm-logrow-actor { font-weight: 600; color: var(--text-secondary); }
.wb-cm-logrow-detail { color: var(--text); }
@media (max-width: 640px) { .wb-cm-logrow { grid-template-columns: 1fr; gap: 2px; } }

/* Portfolio track record (Overview flight deck): one row per evaluation this
   workbench has ever held. Same bordered-list language as the accountability
   log above, sized for a title on the left and a single badge on the right. */
.wb-cm-portfolio { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden auto; max-height: 260px; }
.wb-cm-portfolio-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: var(--text-xs); }
.wb-cm-portfolio-row:last-child { border-bottom: none; }
.wb-cm-portfolio-title { color: var(--text); font-weight: 600; }

/* ---- C2 ethics status ----------------------------------------------------*/
.wb-cm-eth-status { display: inline-flex; align-items: center; gap: 8px; }

/* ---- responsive additions ------------------------------------------------*/
@media (max-width: 1040px) {
  .wb-cm-otiles { grid-template-columns: repeat(3, 1fr); }
  .wb-cm-header2 { position: static; }
}
@media (max-width: 640px) {
  .wb-cm-otiles { grid-template-columns: 1fr 1fr; }
  .wb-cm-kpistrip { gap: 6px; }
  .wb-cm-alert-actions { width: 100%; }
}