/* 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;
  grid-template-columns: repeat(auto-fit, minmax(220px, 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; }

/* ── 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); }

.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 ─────────────────────────────────────────────────────── */

.cs-matrix-wrap { overflow-x: auto; }
.cs-matrix {
  border-collapse: separate; border-spacing: 4px;
  min-width: 620px; width: 100%;
}
.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;
}
.cs-matrix__cell {
  border: 0; border-radius: 6px; width: 18%; height: 62px;
  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;
}
.cs-step { border-top: 3px solid var(--cs-tone-neutral); padding-top: .45rem; }
.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 { font-size: .82rem; font-weight: 600; }
.cs-step__status { 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);
}
.cs-sectionnav a {
  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:hover { color: var(--cs-ink); }
.cs-sectionnav a.is-active { color: var(--cs-ink); border-bottom-color: var(--cs-accent); }

/* ── 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; }

/* ── 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); }

/* ── 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); }

/* ── 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; }
}