/* Clinical safety register (DCB0129 / DCB0160).
 *
 * The five risk-band colours are validated, not chosen by eye. The scale is ordered
 * (Low -> Very high), so adjacent bands must be separable — including under simulated
 * colour-vision deficiency. Re-run the validator before changing any of them:
 *
 *   python3 modules/tools/ipc_audit/validate_palette.py \
 *     "#157347,#1a5fb4,#b8860b,#c62828,#8b1a5c" light "#ffffff" adjacent
 *
 * The conventional green->amber->red ramp does not survive five steps: extending it
 * collapses amber against red under deuteranopia (dE 4-8, well below the 15 floor).
 * Putting blue at Moderate and magenta at Very high buys the separation back, and the
 * band label is always printed alongside the colour so the hue is never the only cue.
 *
 * Light only — the site has no dark mode.
 */

:root {
  --cs-band-1: #157347;   /* Low */
  --cs-band-2: #1a5fb4;   /* Moderate */
  --cs-band-3: #b8860b;   /* Significant */
  --cs-band-4: #c62828;   /* High */
  --cs-band-5: #8b1a5c;   /* Very high */

  /* Fill and ink are separate variables: the amber that passes as a mark on white
   * (3.25:1) fails as body text, so pills use the darker ink. */
  --cs-band-3-ink: #8a6508;

  --cs-surface: #ffffff;
  --cs-surface-2: #f7f9fc;
  --cs-border: #dfe5ee;
  --cs-ink: #1f2933;
  --cs-ink-muted: #5b6775;
  --cs-accent: #1a5fb4;

  --cs-tone-good: #157347;
  --cs-tone-progress: #1a5fb4;
  --cs-tone-attention: #b8860b;
  --cs-tone-bad: #c62828;
  --cs-tone-neutral: #94a3b8;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.cs-page { color: var(--cs-ink); }

.cs-panel {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.cs-panel--flush { padding: 0; overflow: hidden; }

.cs-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--cs-border);
}
.cs-section__title {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.15rem; font-weight: 600; margin: 0;
}

.cs-subhead {
  font-size: .95rem; font-weight: 600; margin: 1.25rem 0 .35rem;
}
.cs-note { color: var(--cs-ink-muted); font-size: .875rem; }

.cs-fieldgrid {
  display: grid;
  /* 250px, not 220: every field carries help text underneath, and a narrower column
     wraps it to three ragged lines. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem 1.5rem;
}
.cs-field__label {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cs-ink-muted); margin-bottom: .15rem;
}
.cs-field__value { font-size: .95rem; }
/* Says what the field means, so a blank value reads as "not answered yet"
   rather than as a label nobody understood. */
.cs-field__help {
  font-size: .8rem; line-height: 1.35; color: var(--cs-ink-muted);
  margin-top: .2rem;
}

/* ── Status dots and pills ──────────────────────────────────────────────── */

.cs-dot {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--cs-tone-neutral); flex: none;
}
.cs-dot--good { background: var(--cs-tone-good); }
.cs-dot--progress { background: var(--cs-tone-progress); }
.cs-dot--attention { background: var(--cs-tone-attention); }
.cs-dot--bad { background: var(--cs-tone-bad); }
.cs-dot--neutral { background: var(--cs-tone-neutral); }

.cs-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--cs-border); background: var(--cs-surface-2);
  color: var(--cs-ink-muted);
}
.cs-pill--good { color: var(--cs-tone-good); border-color: currentColor; }
.cs-pill--progress { color: var(--cs-tone-progress); border-color: currentColor; }
.cs-pill--attention { color: var(--cs-band-3-ink); border-color: currentColor; }
.cs-pill--bad { color: var(--cs-tone-bad); border-color: currentColor; }
.cs-pill--neutral { color: var(--cs-ink-muted); }
/* A property of the system, not a status — filled so it does not read as one. */
.cs-pill--info {
  color: #fff; background: var(--cs-band-2); border-color: var(--cs-band-2);
  vertical-align: middle;
}

.cs-badge-mandatory {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  background: var(--cs-band-2); color: #fff;
}

/* ── Risk bands ─────────────────────────────────────────────────────────── */

.cs-band {
  display: inline-block; padding: .12rem .5rem; border-radius: 4px;
  font-size: .74rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.cs-band--low       { background: var(--cs-band-1); }
.cs-band--moderate  { background: var(--cs-band-2); }
.cs-band--significant { background: var(--cs-band-3); color: #1f1600; }
.cs-band--high      { background: var(--cs-band-4); }
.cs-band--veryhigh  { background: var(--cs-band-5); }

/* ── The 5x5 matrix ─────────────────────────────────────────────────────── */

/* The matrix reads as a grid of squares, so the five severity columns must be equal
   and the cells must fill them. `table-layout: fixed` is what makes that true
   regardless of how long a likelihood label is. */
.cs-matrix-wrap { display: flex; align-items: stretch; gap: .4rem; overflow-x: auto; }

/* Rotated, because "likelihood" alongside a five-row axis needs the height, and an
   unlabelled axis leaves the reader guessing which way severity runs. */
.cs-matrix__yaxis {
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: center; padding: .5rem 0;
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cs-ink-muted); white-space: nowrap;
}

.cs-matrix {
  border-collapse: separate; border-spacing: 4px;
  table-layout: fixed;
  min-width: 620px; width: 100%;
}
/* Bootstrap's reboot puts captions under the table; this one names the axis above it. */
.cs-matrix caption { caption-side: top; }
.cs-matrix th {
  font-size: .74rem; font-weight: 600; color: var(--cs-ink-muted);
  text-align: center; padding: .25rem;
}
.cs-matrix th.cs-matrix__ylabel {
  text-align: right; padding-right: .6rem; white-space: nowrap;
  width: 5.5rem;
}
.cs-matrix__cell {
  border: 0; border-radius: 6px; width: 100%; height: 68px;
  cursor: pointer; position: relative;
  color: #fff; font-weight: 700; font-size: 1.05rem;
  transition: outline-color .12s ease;
  outline: 2px solid transparent; outline-offset: 1px;
}
.cs-matrix__cell:hover,
.cs-matrix__cell:focus-visible { outline-color: var(--cs-ink); }
.cs-matrix__cell[data-count="0"] { opacity: .38; }
.cs-matrix__cell--low       { background: var(--cs-band-1); }
.cs-matrix__cell--moderate  { background: var(--cs-band-2); }
.cs-matrix__cell--significant { background: var(--cs-band-3); color: #1f1600; }
.cs-matrix__cell--high      { background: var(--cs-band-4); }
.cs-matrix__cell--veryhigh  { background: var(--cs-band-5); }

.cs-matrix__axis {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cs-ink-muted);
}

.cs-legend { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ── Progress strip ─────────────────────────────────────────────────────── */

.cs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin-top: 1rem;
}
/* Each step links to the section it summarises: the strip doubles as a contents
   page, and "3. Hazards — none recorded" is exactly when you want to jump there. */
.cs-step {
  display: block;
  border-top: 3px solid var(--cs-tone-neutral);
  padding: .45rem .5rem .5rem;
  border-radius: 0 0 6px 6px;
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease;
}
.cs-step:hover, .cs-step:focus-visible {
  background: var(--cs-surface-2);
  color: inherit;
  text-decoration: none;
}
.cs-step:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 1px; }
.cs-step--good { border-top-color: var(--cs-tone-good); }
.cs-step--progress { border-top-color: var(--cs-tone-progress); }
.cs-step--attention { border-top-color: var(--cs-tone-attention); }
.cs-step--bad { border-top-color: var(--cs-tone-bad); }
.cs-step__label { display: block; font-size: .82rem; font-weight: 600; }
.cs-step__status { display: block; font-size: .78rem; color: var(--cs-ink-muted); }

/* ── Section nav ────────────────────────────────────────────────────────── */

.cs-sectionnav {
  position: sticky; top: 0; z-index: 30;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border); border-radius: 10px;
  padding: .6rem .8rem; margin-bottom: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center;
}
.cs-sectionnav__name {
  font-weight: 700; font-size: .9rem; margin-right: .5rem;
  padding-right: .75rem; border-right: 1px solid var(--cs-border);
}
/* Buttons living in the nav are excluded: `.cs-sectionnav a` outranks `.cs-btn` on
   specificity, so without this the primary button's label went muted grey on its
   own blue fill — unreadable. */
.cs-sectionnav a:not(.cs-btn):not(.cs-btn-outline) {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--cs-ink-muted); text-decoration: none;
  padding: .15rem .1rem; border-bottom: 2px solid transparent;
}
.cs-sectionnav a:not(.cs-btn):not(.cs-btn-outline):hover { color: var(--cs-ink); }
.cs-sectionnav a.is-active { color: var(--cs-ink); border-bottom-color: var(--cs-accent); }
/* Nav-sized, so a full-height button does not stretch the sticky bar. */
.cs-sectionnav .cs-btn, .cs-sectionnav .cs-btn-outline {
  font-size: .8rem; padding: .35rem .7rem; white-space: nowrap;
}

/* ── Assurance items ────────────────────────────────────────────────────── */

.cs-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .5rem 1rem; align-items: start;
  padding: .75rem 0; border-bottom: 1px solid var(--cs-border);
}
.cs-item:last-child { border-bottom: 0; }
.cs-item__title { font-weight: 600; font-size: .95rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cs-item__done { grid-column: 1 / -1; font-size: .84rem; color: var(--cs-ink-muted); }
.cs-stage {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--cs-ink-muted); margin: 1.5rem 0 .25rem;
}

/* ── Guidance disclosure ────────────────────────────────────────────────── */

.cs-guidance {
  border: 1px solid var(--cs-border); border-radius: 8px;
  background: var(--cs-surface-2); margin-bottom: 1rem;
}
.cs-guidance > summary {
  cursor: pointer; padding: .55rem .8rem; font-size: .875rem;
  display: flex; align-items: center; gap: .5rem; list-style: none;
}
.cs-guidance > summary::-webkit-details-marker { display: none; }
.cs-guidance > summary::after { content: 'show / hide'; margin-left: auto; font-size: .78rem; color: var(--cs-accent); }
.cs-guidance[open] > summary::after { content: 'hide'; }
.cs-guidance__body { padding: 0 .8rem .8rem; font-size: .875rem; color: var(--cs-ink-muted); }
.cs-guidance__body p:last-child { margin-bottom: 0; }

/* ── Tables ─────────────────────────────────────────────────────────────── */

.cs-table { width: 100%; margin: 0; font-size: .88rem; }
.cs-table th {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cs-ink-muted); font-weight: 600;
  border-bottom: 1px solid var(--cs-border); padding: .6rem .75rem;
  white-space: nowrap;
}
.cs-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--cs-border); vertical-align: top; }
.cs-table tr:last-child td { border-bottom: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.cs-btn, .cs-btn-outline {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 6px; font-size: .85rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--cs-accent); cursor: pointer;
}
.cs-btn { background: var(--cs-accent); color: #fff; }
.cs-btn:hover { filter: brightness(1.08); color: #fff; }
.cs-btn-outline { background: transparent; color: var(--cs-accent); }
.cs-btn-outline:hover { background: var(--cs-surface-2); color: var(--cs-accent); }
.cs-btn-danger { border-color: var(--cs-tone-bad); color: var(--cs-tone-bad); background: transparent; }

/* ── Filed document rows ────────────────────────────────────────────────── */

.cs-docrows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cs-border); border-radius: 8px; overflow: hidden; }
.cs-docrows__row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .8rem; border-bottom: 1px solid var(--cs-border); background: var(--cs-surface);
}
.cs-docrows__row:last-child { border-bottom: 0; }
.cs-docrows__row:hover { background: var(--cs-surface-2); }
.cs-docrows__main { flex: 1 1 16rem; min-width: 0; }
.cs-docrows__title { display: block; font-size: .92rem; font-weight: 600; text-decoration: none; }
.cs-docrows__title:hover { text-decoration: underline; }
.cs-docrows__meta { font-size: .78rem; color: var(--cs-ink-muted); }
.cs-docrows__actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.cs-docrows__link { font-size: .82rem; }

/* ── Wizard ─────────────────────────────────────────────────────────────── */

.cs-wizard__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.cs-wizard__tab {
  padding: .3rem .7rem; border-radius: 6px; font-size: .8rem; font-weight: 600;
  background: var(--cs-surface-2); color: var(--cs-ink-muted); border: 1px solid var(--cs-border);
}
.cs-wizard__tab.is-active { background: var(--cs-accent); color: #fff; border-color: var(--cs-accent); }
.cs-wizard__tab.is-done { color: var(--cs-ink); }
.cs-wizard__step[hidden] { display: none; }

.cs-catalogue { border: 1px solid var(--cs-border); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.cs-catalogue__item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; border-bottom: 1px solid var(--cs-border); padding: .6rem .8rem; cursor: pointer;
}
.cs-catalogue__item:last-child { border-bottom: 0; }
.cs-catalogue__item:hover, .cs-catalogue__item.is-selected { background: var(--cs-surface-2); }
.cs-catalogue__name { font-weight: 600; font-size: .9rem; }
.cs-catalogue__meta { font-size: .8rem; color: var(--cs-ink-muted); }

/* ── Public free sample ─────────────────────────────────────────────────── */
/* Everything here is read-only by construction. The locked cards are skeletons, not
   blurred content: blurred text is still in the page source, and the content is the
   product. See `demo.py`. */

.cs-demo-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-accent);
  border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.cs-eyebrow {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cs-accent); font-weight: 700; margin-bottom: .2rem;
}

/* The verdict and, more importantly, the sentences behind it. */
.cs-demo-status {
  border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-tone-neutral);
  border-radius: 8px; padding: .8rem 1rem; background: var(--cs-surface-2);
}
.cs-demo-status--good      { border-left-color: var(--cs-tone-good); }
.cs-demo-status--progress  { border-left-color: var(--cs-tone-progress); }
.cs-demo-status--attention { border-left-color: var(--cs-tone-attention); }
.cs-demo-status--bad       { border-left-color: var(--cs-tone-bad); }
.cs-demo-status__label { font-weight: 700; font-size: 1.02rem; }
.cs-demo-status--attention .cs-demo-status__label { color: var(--cs-band-3-ink); }
.cs-demo-status__reasons {
  margin: .4rem 0 0; padding-left: 1.1rem;
  font-size: .84rem; color: var(--cs-ink-muted);
}

.cs-demo-path { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (max-width: 700px) { .cs-demo-path { grid-template-columns: 1fr; } }
.cs-demo-path__item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .7rem; border: 1px solid var(--cs-border);
  border-left: 3px solid var(--cs-tone-neutral); border-radius: 8px;
  background: var(--cs-surface);
}
.cs-demo-path__item--good      { border-left-color: var(--cs-tone-good); }
.cs-demo-path__item--progress  { border-left-color: var(--cs-tone-progress); }
.cs-demo-path__item--attention { border-left-color: var(--cs-tone-attention); }
.cs-demo-path__item--neutral   { border-left-color: var(--cs-border); }
.cs-demo-path__n {
  flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
  background: var(--cs-surface-2); color: var(--cs-ink-muted);
  border: 1px solid var(--cs-border);
}
.cs-demo-path__label { display: block; font-size: .88rem; font-weight: 600; }
/* Ink, not fill — the amber that passes as a mark on white fails as text. */
.cs-demo-path__state { display: block; font-size: .75rem; color: var(--cs-ink-muted); }
.cs-demo-path__item--good .cs-demo-path__state      { color: var(--cs-tone-good); }
.cs-demo-path__item--progress .cs-demo-path__state  { color: var(--cs-tone-progress); }
.cs-demo-path__item--attention .cs-demo-path__state { color: var(--cs-band-3-ink); }

/* The picked matrix square, and what that band demands. */
.cs-matrix__cell.is-picked { outline: 3px solid var(--cs-ink); outline-offset: -3px; }
.cs-demo-cell {
  margin-top: .9rem; padding: .8rem 1rem;
  border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface-2);
}
.cs-demo-cell__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cs-demo-cell__head span:last-child { font-size: .85rem; color: var(--cs-ink-muted); }
.cs-demo-cell__demand { margin: .5rem 0 0; font-size: .92rem; font-weight: 600; }

.cs-demo-hazard { border: 1px solid var(--cs-border); border-radius: 8px; overflow: hidden; }
.cs-demo-hazard__head { padding: .8rem 1rem; border-bottom: 1px solid var(--cs-border); }
.cs-demo-hazard__ref {
  display: inline-block; margin-right: .5rem;
  font-size: .72rem; font-weight: 700; color: var(--cs-ink-muted);
}
.cs-demo-hazard__scores {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .9rem 1rem; background: var(--cs-surface-2);
}
.cs-demo-hazard__arrow { font-size: 1.4rem; color: var(--cs-ink-muted); }
.cs-demo-hazard__controls { padding: .8rem 1rem; font-size: .9rem; }

/* Locked content: shape and size only. */
.cs-locked {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .85rem;
}
.cs-locked__card {
  border: 1px solid var(--cs-border); border-radius: 10px; padding: .9rem 1rem;
  background: var(--cs-surface);
}
.cs-locked__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.cs-locked__head > i:first-child { color: var(--pane-brand, #0d5bb8); }
.cs-locked__title { font-weight: 600; font-size: .92rem; flex: 1 1 auto; }
.cs-locked__lock { color: var(--cs-ink-muted); font-size: .8rem; }
.cs-locked__skeleton { display: flex; flex-direction: column; gap: .35rem; margin-top: .7rem; }
.cs-locked__skeleton span {
  display: block; height: .55rem; border-radius: 3px; background: var(--cs-border);
}
/* Tapered, so it reads as "more below" rather than as a broken loading state. */
.cs-locked__skeleton span:nth-child(2) { width: 88%; }
.cs-locked__skeleton span:nth-child(3) { width: 94%; }
.cs-locked__skeleton span:nth-child(4) { width: 72%; }
.cs-locked__skeleton span:nth-child(5) { width: 60%; }

.cs-demo-cta { background: var(--cs-surface-2); }

/* ── Supplier documents to file (wizard, conditional step) ──────────────── */
/* Deliberately a plain checked list rather than cards: this is a picking task, and
   the reader is scanning titles against what they actually hold. The type and the
   "no link yet" note sit under each title because both change what ticking means. */

.cs-doclist { border: 1px solid var(--cs-border); border-radius: 8px; overflow: hidden; }
.cs-doclist__row {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .6rem .8rem; margin: 0; cursor: pointer;
  border-bottom: 1px solid var(--cs-border);
}
.cs-doclist__row:last-child { border-bottom: 0; }
.cs-doclist__row:hover { background: var(--cs-surface-2); }
.cs-doclist__row input { margin-top: .2rem; flex: none; }
.cs-doclist__title { display: block; font-size: .9rem; font-weight: 600; }
.cs-doclist__meta { display: block; font-size: .78rem; color: var(--cs-ink-muted); }

/* ── Answer buttons (review / supplier review) ──────────────────────────── */

.cs-answers { display: inline-flex; border: 1px solid var(--cs-border); border-radius: 6px; overflow: hidden; }
.cs-answers input { position: absolute; opacity: 0; pointer-events: none; }
.cs-answers label {
  padding: .28rem .75rem; font-size: .82rem; cursor: pointer; margin: 0;
  border-right: 1px solid var(--cs-border); background: var(--cs-surface);
}
.cs-answers label:last-of-type { border-right: 0; }
.cs-answers input:checked + label { background: var(--cs-accent); color: #fff; }
.cs-answers input:focus-visible + label { outline: 2px solid var(--cs-ink); outline-offset: -2px; }

.cs-suggest {
  font-size: .78rem; color: var(--cs-band-3-ink); margin-top: .3rem;
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.cs-empty { text-align: center; padding: 3rem 1rem; color: var(--cs-ink-muted); }

/* ── Central register browser ───────────────────────────────────────────── */

.cs-catgroup {
  border: 1px solid var(--cs-border); border-radius: 8px;
  margin-bottom: .75rem; overflow: hidden;
}
.cs-catgroup__head {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .75rem; background: var(--cs-surface-2);
  border-bottom: 1px solid var(--cs-border);
}
.cs-catgroup__name { font-weight: 600; }

.cs-catrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .75rem;
  border-top: 1px solid var(--cs-border);
}
.cs-catgroup .cs-catrow:first-of-type { border-top: 0; }
.cs-catrow__text { min-width: 0; font-size: .9rem; }
.cs-catrow form { margin: 0; flex: 0 0 auto; }

/* ── Editor modal ───────────────────────────────────────────────────────── */
/* Editors open over the record rather than replacing it: a safety record is long,
   and navigating away to change one field costs the reader their place in it. */

.cs-modal {
  width: min(900px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 1px solid var(--cs-border);
  border-radius: 10px;
  background: var(--cs-surface);
  color: var(--cs-ink);
  overflow: hidden;
}
.cs-modal::backdrop { background: rgba(15, 23, 33, .45); }

.cs-modal__inner { display: flex; flex-direction: column; max-height: calc(100vh - 4rem); }

.cs-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-surface-2);
}
.cs-modal__title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.cs-modal__close {
  border: 0; background: transparent; color: var(--cs-ink-muted);
  font-size: 1.5rem; line-height: 1; padding: 0 .25rem; cursor: pointer;
}
.cs-modal__close:hover { color: var(--cs-ink); }

/* Only the body scrolls, so the title and the save button never leave the screen. */
.cs-modal__body { padding: 1.25rem; overflow-y: auto; }

/* The editors were written as pages, so they carry their own panel and heading.
   Inside the dialog those would double up with the dialog's own chrome. */
.cs-modal__body > .cs-panel { border: 0; padding: 0; margin: 0; box-shadow: none; }
/* Each editor opens with its own <h1> title, which the dialog header now carries.
   Hidden rather than removed: the same markup is still a standalone page. */
.cs-modal__body h1 { display: none; }

.cs-modal__loading { padding: 2.5rem; text-align: center; color: var(--cs-ink-muted); }

/* Nothing behind the dialog should scroll while it is open. */
body.cs-modal-open { overflow: hidden; }

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .cs-noprint, .cs-sectionnav { display: none !important; }
  .cs-panel { break-inside: avoid; border-color: #999; }
  .cs-matrix__cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Incident reporting routes ──────────────────────────────────────────── */
/* Two columns so six separate statutory duties read as a list to work through
   rather than a wall of tickboxes. */
.cs-routes ul { list-style: none; padding: 0; margin: 0; columns: 2; }
.cs-routes li { break-inside: avoid; margin-bottom: .3rem; }
.cs-routes label { margin-left: .35rem; font-size: .9rem; }
@media (max-width: 576px) { .cs-routes ul { columns: 1; } }

/* ── Record workspace (two-pane) ────────────────────────────────────────── */
/* A record is built over weeks, so the rail answers "where am I and what is left"
   without scrolling, and each pane is addressable via ?section=. */

.cs-record { display: grid; grid-template-columns: 15rem 1fr; gap: 1.25rem; align-items: start; }

.cs-rail {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border); border-radius: 10px;
  padding: .75rem; display: flex; flex-direction: column; gap: .1rem;
}
.cs-rail__system { padding: .25rem .5rem .6rem; border-bottom: 1px solid var(--cs-border); margin-bottom: .5rem; }
.cs-rail__name { font-weight: 600; font-size: .92rem; display: inline-block; }
.cs-rail__group {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cs-ink-muted); padding: .75rem .5rem .25rem;
}
.cs-rail__item {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-radius: 6px;
  color: var(--cs-ink); text-decoration: none; font-size: .875rem;
  border-left: 3px solid transparent;
}
.cs-rail__item:hover { background: var(--cs-surface-2); color: var(--cs-ink); text-decoration: none; }
.cs-rail__item.is-active { background: var(--cs-surface-2); font-weight: 600; }
.cs-rail__item:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
.cs-rail__label { flex: 1 1 auto; }

/* Pathway steps carry their status in three ways at once — a numbered chip, a tinted
   left edge, and the status spelled out underneath. The colour is never load-bearing
   on its own: "Not assessed" and "2 unreduced" would be indistinguishable as two amber
   dots, and that is before considering anyone who cannot separate the hues. */
.cs-rail__item--step { align-items: flex-start; padding: .45rem .5rem; }
.cs-rail__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cs-rail__status {
  font-size: .72rem; color: var(--cs-ink-muted); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-rail__step {
  flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; margin-top: .05rem;
  background: var(--cs-surface-2); color: var(--cs-ink-muted);
  border: 1px solid var(--cs-border);
}

.cs-rail__item--good      { border-left-color: var(--cs-tone-good); }
.cs-rail__item--progress  { border-left-color: var(--cs-tone-progress); }
.cs-rail__item--attention { border-left-color: var(--cs-tone-attention); }
.cs-rail__item--bad       { border-left-color: var(--cs-tone-bad); }
.cs-rail__item--neutral   { border-left-color: var(--cs-border); }

/* Done reads as done: a filled chip is the only state that needs to be spottable
   from across the rail, so it is the only one that fills. */
.cs-rail__item--good .cs-rail__step {
  background: var(--cs-tone-good); border-color: var(--cs-tone-good); color: #fff;
}
.cs-rail__item--progress .cs-rail__step {
  background: var(--cs-tone-progress); border-color: var(--cs-tone-progress); color: #fff;
}
.cs-rail__item--bad .cs-rail__step {
  background: var(--cs-tone-bad); border-color: var(--cs-tone-bad); color: #fff;
}
.cs-rail__item--attention .cs-rail__step {
  border-color: var(--cs-tone-attention); color: var(--cs-band-3-ink);
}

/* Status ink, not fill — the amber that passes as a mark on white fails as text. */
.cs-rail__item--good .cs-rail__status      { color: var(--cs-tone-good); }
.cs-rail__item--progress .cs-rail__status  { color: var(--cs-tone-progress); }
.cs-rail__item--attention .cs-rail__status { color: var(--cs-band-3-ink); }
.cs-rail__item--bad .cs-rail__status       { color: var(--cs-tone-bad); }
/* The count is the whole reason the worklist is at the top; it must not be subtle. */
.cs-rail__count {
  flex: none; min-width: 1.35rem; text-align: center;
  background: var(--cs-tone-bad); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .35rem;
}

.cs-pane { min-width: 0; }
.cs-pane .cs-panel:last-child { margin-bottom: 0; }

/* ── The rail on narrow screens ─────────────────────────────────────────── */
/* Below the breakpoint the rail becomes a labelled dropdown. It used to wrap into a
   chip row, which cost the status text under each step — the part that makes the rail
   worth having — and still ate most of a phone screen before the pane began.
   `<details>` gives a real disclosure with no JavaScript; `cs_rail.js` only decides
   whether it starts open, reading this same breakpoint so the two cannot disagree. */

:root { --cs-rail-breakpoint: 900px; }

/* Sticky lives on the wrapper, not the rail: inside the `<details>` the rail's
   containing block is only as tall as the rail, so sticking it there does nothing. */
.cs-railbox { min-width: 0; position: sticky; top: 1rem; }
/* On desktop the disclosure is invisible: no summary, no marker, just the sidebar. */
.cs-railtoggle { display: none; }
.cs-railbox > .cs-rail { margin: 0; }

@media (max-width: 900px) {
  .cs-record { grid-template-columns: 1fr; }
  /* Not sticky on a phone: a menu pinned over a record leaves very little record. */
  .cs-railbox { position: static; }

  .cs-railtoggle {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .8rem; cursor: pointer;
    background: var(--cs-surface); border: 1px solid var(--cs-border);
    border-radius: 10px; list-style: none;
  }
  /* Safari still paints the default triangle without this. */
  .cs-railtoggle::-webkit-details-marker { display: none; }
  .cs-railtoggle:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }

  /* The label names the control, the current pane says where you are. Without the
     first, a lone section name reads as a heading rather than a menu. */
  .cs-railtoggle__label {
    font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--cs-ink-muted); flex: none;
  }
  .cs-railtoggle__current {
    font-weight: 600; font-size: .9rem; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cs-railtoggle__chev { flex: none; color: var(--cs-ink-muted); font-size: .8rem; }
  .cs-railbox[open] .cs-railtoggle { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
  .cs-railbox[open] .cs-railtoggle__chev { transform: rotate(180deg); }

  /* Open, it is one continuous panel with the toggle above it. */
  .cs-railbox[open] > .cs-rail { border-radius: 0 0 10px 10px; border-top: 0; }
  /* The system name is already in the page hero and the trail; repeating it inside
     the menu on a small screen is three copies of the same words. */
  .cs-railbox > .cs-rail .cs-rail__system { display: none; }
  /* Touch targets, and room for the status line to sit under each step. */
  .cs-rail__item { padding: .55rem .5rem; }
  .cs-rail__status { white-space: normal; }
}

/* ── Worklist pane ──────────────────────────────────────────────────────── */
/* Blocking and outstanding are visually separate on purpose: "3 documents to read"
   must never sit level with "a hazard that could kill somebody". */

.cs-work { margin-bottom: 1.25rem; }
.cs-work__head {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.cs-work--blocking .cs-work__head { color: var(--cs-tone-bad); }
.cs-work--outstanding .cs-work__head { color: var(--cs-ink-muted); }
.cs-work__list { list-style: none; padding: 0; margin: 0; }
.cs-work__item {
  padding: .55rem .75rem; margin-bottom: .4rem;
  border: 1px solid var(--cs-border); border-radius: 8px;
  border-left: 3px solid var(--cs-tone-neutral);
  background: var(--cs-surface-2);
}
.cs-work--blocking .cs-work__item { border-left-color: var(--cs-tone-bad); }
.cs-work--outstanding .cs-work__item { border-left-color: var(--cs-tone-attention); }
.cs-work__link { font-weight: 600; font-size: .92rem; color: var(--cs-ink); text-decoration: none; }
.cs-work__link:hover { color: var(--cs-accent); text-decoration: underline; }
.cs-work__reasons { margin-bottom: 1rem; }

.cs-glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem;
}
.cs-glance > div {
  border: 1px solid var(--cs-border); border-radius: 8px; padding: .6rem .75rem;
}
.cs-glance__n { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.cs-glance__l { display: block; font-size: .75rem; color: var(--cs-ink-muted); }

/* ── Field groups ───────────────────────────────────────────────────────── */
/* A long run of fields answering four different questions reads as one
   undifferentiated grid. The heading is a question, so the group says what it is for
   rather than just naming itself. */

.cs-group { margin-bottom: 1rem; }
.cs-group__head {
  font-size: .78rem; font-weight: 600; color: var(--cs-ink-muted);
  padding-bottom: .3rem; margin-bottom: .6rem;
  border-bottom: 1px solid var(--cs-border);
}
/* The version pair is the check practices skip, so it is boxed rather than listed. */
.cs-group--check {
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-border); border-radius: 8px;
  padding: .75rem .9rem;
}
.cs-group--check .cs-group__head { color: var(--cs-ink); }
/* Set apart because none of it is clinical safety, and a practice holding a DTAC can
   otherwise believe that settles the question. */
.cs-group--aside { opacity: .92; }
.cs-group--aside .cs-group__head { font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   Record pane — Haresign brand treatment
   ═══════════════════════════════════════════════════════════════════════════

   Every rule below is scoped to `.cs-pane`, deliberately and without exception.
   The rail (`.cs-rail`) shares these class names, and so do the register list, the
   editors and the print view; scoping is what stops a colour intended for one pane
   leaking into a document that goes to an inspector.

   Colour comes from the site's own tokens — `--haresign-primary` (#0D5BB8) and
   `--haresign-navy` — with fallbacks so this file still renders standalone. The tints
   are that primary at low alpha, not new hex values, so the page cannot drift away
   from the rest of app.haresign.net.

   The five validated risk-band colours are NOT touched. They were checked for
   adjacent-pair separation under simulated CVD (see the header of this file), and a
   visual pass is not a reason to re-open that.
   ══════════════════════════════════════════════════════════════════════════ */

.cs-pane {
  --pane-brand: var(--haresign-primary, #0D5BB8);
  --pane-ink: var(--haresign-navy, #111827);
  /* Tints are the brand colour mixed toward white — never a hand-picked hex, so they
     stay in step if the brand primary is ever changed. The static values above each
     `color-mix` are the same mix precomputed, so a browser without `color-mix` gets
     the intended tint rather than an invalid value and no background at all. */
  --pane-tint: #f3f7fc;
  --pane-tint: color-mix(in srgb, var(--pane-brand) 5%, #fff);
  --pane-tint-2: #e8f0f9;
  --pane-tint-2: color-mix(in srgb, var(--pane-brand) 9%, #fff);
  --pane-edge: #c2d6ee;
  --pane-edge: color-mix(in srgb, var(--pane-brand) 22%, #fff);
}

/* ── Section header ─────────────────────────────────────────────────────── */
/* A tinted band and a brand rule, rather than a saturated banner: this sits above
   dense content and must not compete with the risk colours inside it. */
.cs-pane .cs-panel > .cs-section__head:first-child {
  margin: -1.25rem -1.25rem 1.25rem;
  padding: .85rem 1.25rem;
  background: var(--pane-tint);
  border-bottom: 1px solid var(--pane-edge);
  border-radius: 10px 10px 0 0;
}
.cs-pane .cs-section__title { color: var(--pane-ink); font-size: 1.2rem; }
.cs-pane .cs-panel { border-top: 3px solid var(--pane-brand); }

/* ── Guidance ───────────────────────────────────────────────────────────── */
/* Reads as an information component, not another grey box. */
.cs-pane .cs-guidance {
  background: var(--pane-tint);
  border: 1px solid var(--pane-edge);
  border-left: 3px solid var(--pane-brand);
  border-radius: 8px;
}
.cs-pane .cs-guidance > summary { color: var(--pane-brand); font-weight: 600; }

/* ── Pills ──────────────────────────────────────────────────────────────── */
/* Semantic, not decorative. A count of zero is styled as outstanding rather than as
   information, because "0 documents linked" is a gap, not a fact worth celebrating. */
.cs-pane .cs-pill--info {
  color: var(--pane-brand); background: var(--pane-tint-2);
  border-color: var(--pane-edge);
}
.cs-pane .cs-pill--good {
  background: color-mix(in srgb, var(--cs-tone-good) 10%, #fff);
  border-color: color-mix(in srgb, var(--cs-tone-good) 30%, #fff);
}
.cs-pane .cs-pill--attention {
  background: color-mix(in srgb, var(--cs-tone-attention) 12%, #fff);
  border-color: color-mix(in srgb, var(--cs-tone-attention) 32%, #fff);
}
.cs-pane .cs-pill--bad {
  background: color-mix(in srgb, var(--cs-tone-bad) 8%, #fff);
  border-color: color-mix(in srgb, var(--cs-tone-bad) 28%, #fff);
}
.cs-pane .cs-pill--progress {
  background: color-mix(in srgb, var(--cs-tone-progress) 9%, #fff);
  border-color: color-mix(in srgb, var(--cs-tone-progress) 28%, #fff);
}

/* ── Content blocks ─────────────────────────────────────────────────────── */
/* One card pattern for every pane, not a per-page invention. Panes used to read as
   one long white document; a block gives each idea an edge, a heading and — where the
   content is a sequence — a numbered chip, so "which part am I in" is answerable
   without reading a word.
   Modifiers: `--step` (numbered, for the supplier's four-step sequence), `--tint`
   (recessed), `--handoff` (borrows the hazard-log green where a block leads there). */
.cs-pane .cs-block {
  border: 1px solid var(--cs-border);
  border-left: 3px solid var(--pane-brand);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  margin: 1rem 0;
  background: var(--cs-surface);
}
.cs-pane .cs-block--tint { background: var(--pane-tint); }
.cs-pane .cs-block--handoff { border-left-color: var(--cs-tone-good); }
/* Operational content (incidents, actions) is where something has gone wrong or is
   owed, so it is edged in amber rather than brand blue. */
.cs-pane .cs-block--live { border-left-color: var(--cs-tone-attention); }

/* Title left, action right, aligned on one baseline across every pane. */
.cs-pane .cs-block__head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .95rem; font-weight: 600; color: var(--pane-ink);
  margin: 0 0 .6rem;
}
.cs-pane .cs-block__title { flex: 1 1 auto; margin: 0; font-size: inherit; font-weight: inherit; }
.cs-pane .cs-block__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem;
  border-radius: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  background: var(--pane-brand); color: #fff;
}
.cs-pane .cs-block--handoff .cs-block__num { background: var(--cs-tone-good); }
.cs-pane .cs-block--live .cs-block__num {
  background: var(--cs-tone-attention); color: #1f1600;
}

/* ── Empty states ───────────────────────────────────────────────────────── */
/* A dashed panel rather than a loose sentence. An empty section is a real state of
   the record — often the state that needs acting on — and a line of grey text reads
   as though the page failed to load rather than as "there is nothing here yet". */
.cs-pane .cs-empty-state {
  border: 1px dashed var(--pane-edge);
  border-radius: 8px;
  background: var(--pane-tint);
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.cs-pane .cs-empty-state__msg { font-weight: 600; color: var(--pane-ink); font-size: .92rem; }
.cs-pane .cs-empty-state__hint {
  color: var(--cs-ink-muted); font-size: .84rem; margin-top: .25rem;
}
/* Nothing-to-do reads as settled, not as a gap. */
.cs-pane .cs-empty-state--ok {
  border-style: solid;
  border-color: color-mix(in srgb, var(--cs-tone-good) 30%, #fff);
  background: color-mix(in srgb, var(--cs-tone-good) 6%, #fff);
}
.cs-pane .cs-empty-state--ok .cs-empty-state__msg { color: var(--cs-tone-good); }

/* ── Two-up panels ──────────────────────────────────────────────────────── */
/* Incidents beside actions, next review beside frequency: things meant to be compared
   sit side by side and stack on narrow screens. */
.cs-pane .cs-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem; align-items: start;
}
.cs-pane .cs-duo > .cs-block { margin: 0; }

/* ── Field groups ───────────────────────────────────────────────────────── */
.cs-pane .cs-group__head {
  color: var(--pane-brand); font-weight: 600;
  border-bottom-color: var(--pane-edge);
}
.cs-pane .cs-group--check {
  background: var(--pane-tint-2);
  border-color: var(--pane-edge);
}
.cs-pane .cs-field__label { color: var(--pane-brand); font-weight: 600; }
.cs-pane .cs-field__value { color: var(--pane-ink); font-weight: 500; }
/* An empty field should be findable without turning the page into a warning. The
   muted italic says "nothing here yet" without competing with a real risk colour. */
.cs-pane .cs-field__value--empty {
  color: var(--cs-ink-muted); font-weight: 400; font-style: italic;
}

/* ── Version comparison ─────────────────────────────────────────────────── */
/* Two values and a verdict, laid out as a comparison so the check reads as a check. */
.cs-pane .cs-versions {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .5rem 1rem; align-items: center;
}
.cs-pane .cs-versions__op {
  color: var(--pane-brand); font-weight: 700; font-size: 1.1rem; text-align: center;
}
@media (max-width: 700px) {
  .cs-pane .cs-versions { grid-template-columns: 1fr; }
  .cs-pane .cs-versions__op { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Three tiers: the action that moves the step on, the alternative to it, and the
   quieter edit/manage links that sit under a block of read-only values. */
.cs-pane .cs-btn { background: var(--pane-brand); border-color: var(--pane-brand); }
.cs-pane .cs-btn-outline { color: var(--pane-brand); border-color: var(--pane-edge); }
.cs-pane .cs-btn-outline:hover { background: var(--pane-tint-2); color: var(--pane-brand); }
.cs-pane .cs-btn-quiet {
  display: inline-block; padding: .3rem .7rem; border-radius: 6px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--cs-ink-muted); border: 1px solid var(--cs-border);
  background: var(--cs-surface);
}
.cs-pane .cs-btn-quiet:hover {
  color: var(--pane-brand); border-color: var(--pane-edge); background: var(--pane-tint);
}

/* Lists inside blocks: rows rather than bullets, so a decision or an acceptance reads
   as a record entry rather than a note. */
.cs-pane .cs-decisions, .cs-pane .cs-acceptlist { list-style: none; padding: 0; margin: 0; }
.cs-pane .cs-decisions > li, .cs-pane .cs-acceptlist > li {
  padding: .5rem 0; border-top: 1px solid var(--cs-border);
}
.cs-pane .cs-decisions > li:first-child,
.cs-pane .cs-acceptlist > li:first-child { border-top: 0; padding-top: 0; }
.cs-pane .cs-acceptlist > li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* The pathway strip inside the overview pane: same component as the rail uses, but
   these are full-width rows in a tinted block, so they get a surface of their own. */
.cs-pane .cs-steps .cs-step { background: var(--cs-surface); }

/* ── Register table ─────────────────────────────────────────────────────── */
/* Still inside `.cs-pane`: the register wraps its content in the same class as a
   record pane, so it inherits the whole brand treatment — headers, guidance, pills,
   buttons — rather than growing a parallel set of register-only styles. */

.cs-pane .cs-table tbody tr { transition: background-color .1s ease; }
.cs-pane .cs-table tbody tr:hover { background: var(--pane-tint); }
.cs-pane .cs-table td { vertical-align: top; padding-top: .7rem; padding-bottom: .7rem; }
.cs-pane .cs-table thead th {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cs-ink-muted); border-bottom: 2px solid var(--pane-edge);
  white-space: nowrap;
}
/* The system is the row's subject, so it gets the weight and the colour. */
.cs-pane .cs-sysname {
  font-weight: 600; font-size: .95rem; color: var(--pane-brand); text-decoration: none;
}
.cs-pane .cs-sysname:hover { text-decoration: underline; }
.cs-pane .cs-sysmeta { font-size: .78rem; color: var(--cs-ink-muted); margin-top: .1rem; }

/* Completeness: a number plus a bar. The bar is only meaningful next to the count —
   on its own an empty track reads as "loading" rather than "nothing done yet". */
.cs-pane .cs-prog { min-width: 6.5rem; }
.cs-pane .cs-prog__n { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.cs-pane .cs-prog__track {
  height: 4px; border-radius: 2px; background: var(--cs-border);
  margin: .25rem 0 .2rem; overflow: hidden;
}
.cs-pane .cs-prog__fill { height: 100%; background: var(--pane-brand); border-radius: 2px; }
/* Mandatory items are the ones that gate a deployment, so they finish in green. */
.cs-pane .cs-prog__fill--done { background: var(--cs-tone-good); }
.cs-pane .cs-prog__sub { font-size: .72rem; color: var(--cs-ink-muted); white-space: nowrap; }

/* Open counts: three micro-metrics on one line. Zero stays quiet — a register where
   every row shouts is a register nobody reads. */
.cs-pane .cs-micro { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .78rem; }
.cs-pane .cs-micro__i { white-space: nowrap; color: var(--cs-ink-muted); }
.cs-pane .cs-micro__n { font-weight: 700; }
.cs-pane .cs-micro__i--zero { opacity: .55; }
.cs-pane .cs-micro__i--hazard .cs-micro__n { color: var(--cs-band-3-ink); }
.cs-pane .cs-micro__i--incident .cs-micro__n { color: var(--cs-tone-bad); }
.cs-pane .cs-micro__i--action .cs-micro__n { color: var(--pane-brand); }
.cs-pane .cs-micro__i--zero .cs-micro__n { color: var(--cs-ink-muted); }

/* Deployment state: text, weighted by how live the thing is. Not a pill — the row
   already carries a status pill, and two pills side by side compete. */
.cs-pane .cs-deploy { font-size: .85rem; font-weight: 600; }
.cs-pane .cs-deploy--live { color: var(--cs-tone-good); }
.cs-pane .cs-deploy--pilot { color: var(--pane-brand); }
.cs-pane .cs-deploy--proposed { color: var(--cs-ink-muted); font-weight: 500; }
.cs-pane .cs-deploy--suspended,
.cs-pane .cs-deploy--decommissioned { color: var(--cs-tone-bad); }

/* An absent value must not read like a recorded one. */
.cs-pane .cs-unset { color: var(--cs-ink-muted); font-style: italic; font-size: .85rem; }

/* ── The register on narrow screens ─────────────────────────────────────── */
/* A seven-column table does not survive a phone. Scrolling it sideways is worse than
   stacking it: a register row only means anything read across — "live, 6 of 15 done,
   High residual risk" — and a scroller shows you three of those at a time.
   `cs-table--cards` turns each row into a card and labels every cell from its
   `data-label`, so the mobile view can never fall behind the desktop one. */

@media (max-width: 820px) {
  /* The wrapper's overflow is what would otherwise clip the cards. */
  .cs-table--cards { display: block; }
  .cs-table--cards thead {
    /* Hidden visually, kept for screen readers, which still read the labels. */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cs-table--cards tbody { display: block; }
  .cs-table--cards tbody tr {
    display: block; padding: .85rem 1rem;
    border-bottom: 1px solid var(--cs-border);
  }
  .cs-table--cards tbody tr:last-child { border-bottom: 0; }
  .cs-pane .cs-table--cards tbody tr:hover { background: transparent; }

  .cs-table--cards td {
    display: flex; align-items: baseline; gap: .75rem;
    padding: .3rem 0; border: 0;
  }
  .cs-table--cards td::before {
    content: attr(data-label);
    flex: 0 0 7.5rem;
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--cs-ink-muted);
  }

  /* The system is the card's title, so it loses its label and takes the top line. */
  .cs-table--cards td[data-label="System"] { display: block; margin-bottom: .35rem; }
  .cs-table--cards td[data-label="System"]::before { content: none; }
  .cs-pane .cs-table--cards .cs-sysname { font-size: 1.02rem; }

  /* Three micro-counts on one line already; they do not need a second wrap. */
  .cs-pane .cs-table--cards .cs-micro { flex: 1 1 auto; }
  .cs-pane .cs-table--cards .cs-prog { min-width: 0; flex: 1 1 auto; }
}

/* ── Summary tiles: semantic tints ──────────────────────────────────────── */
/* Value-driven, not category-driven. "0 open incidents" must not glow red — the tint
   says something is *there*, so it has to follow the number rather than the label.
   `--live` is brand blue, not green: being live is a fact about deployment, not a
   verdict, and a live system with an incomplete record is the opposite of good. */

.cs-pane .cs-glance__t--live {
  background: var(--pane-tint);
  border-color: var(--pane-edge);
}
.cs-pane .cs-glance__t--live .cs-glance__n { color: var(--pane-brand); }

.cs-pane .cs-glance__t--warn {
  background: color-mix(in srgb, var(--cs-tone-attention) 8%, #fff);
  border-color: color-mix(in srgb, var(--cs-tone-attention) 28%, #fff);
}
.cs-pane .cs-glance__t--warn .cs-glance__n { color: var(--cs-band-3-ink); }

.cs-pane .cs-glance__t--bad {
  background: color-mix(in srgb, var(--cs-tone-bad) 7%, #fff);
  border-color: color-mix(in srgb, var(--cs-tone-bad) 28%, #fff);
}
.cs-pane .cs-glance__t--bad .cs-glance__n { color: var(--cs-tone-bad); }

/* ── Quieter absent values ──────────────────────────────────────────────── */
/* Dropped a step further so a real "High" band badge carries the column on its own.
   Quieted by size and italic rather than opacity: fading `--cs-ink-muted` to 70%
   lands at 3.04:1 on white, which is below AA — and "None recorded" is real content
   a reader has to be able to make out, not decoration. */
.cs-pane .cs-unset {
  color: var(--cs-ink-muted); font-style: italic;
  font-size: .78rem; font-weight: 400; letter-spacing: .01em;
}

/* ── Micro-metric icons ─────────────────────────────────────────────────── */
/* Only on non-zero counts: an icon on every row would put twelve marks on a register
   where nothing is happening, which is the opposite of scannable. */
.cs-pane .cs-micro__i i { margin-right: .2rem; font-size: .72rem; }
.cs-pane .cs-micro__i--hazard i { color: var(--cs-band-3-ink); }
.cs-pane .cs-micro__i--incident i { color: var(--cs-tone-bad); }
.cs-pane .cs-micro__i--action i { color: var(--pane-brand); }