/* /breach-statistics/: response steps, the "who to tell" regime table and the checklist. Tokens come from styles.css. */

/* Four steps: 1 column on phones, 2x2 from 40rem, 4 across from 64rem. */
ol.steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { ol.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { ol.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
ol.steps .step { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
ol.steps .step h3 { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: 1.0625rem; overflow-wrap: normal; }
ol.steps .step p { margin: 0; color: hsl(var(--muted-foreground)); }
.step-num { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: hsl(var(--primary) / 0.14); border: 2px solid hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; line-height: 1; }

/* Who to tell: no mid-word breaks, a real first column. */
table.regimes th, table.regimes td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
table.regimes th[scope="row"] { min-width: 8rem; white-space: nowrap; color: hsl(var(--foreground)); font-weight: 600; }
table.regimes td:nth-child(2) { min-width: 10rem; white-space: normal; }
table.regimes td:last-child { min-width: 18rem; }

/* Phones: each regime becomes a stacked card (Where as heading, Regime below it, then the summary). */
@media (max-width: 40rem) {
  .tablewrap:has(> table.regimes) { overflow: visible; border: 0; background: none; }
  table.regimes { min-width: 0; display: block; }
  table.regimes thead { display: none; }
  table.regimes tbody { display: grid; gap: var(--s-3); }
  table.regimes tr { display: block; padding: var(--s-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
  table.regimes tr > * { display: block; padding: 0; border: 0; background: none; min-width: 0; white-space: normal; }
  table.regimes tbody tr:hover > * { background: none; }
  table.regimes th[scope="row"] { font-size: 1.0625rem; text-transform: none; letter-spacing: normal; }
  table.regimes td:nth-child(2) { margin-top: var(--s-1); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); font-weight: 600; }
  table.regimes td:last-child { margin-top: var(--s-2); }
}

/* Checklist: check-circle markers drawn with borders, no images. */
ol.checklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: none; }
ol.checklist li { position: relative; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 2.25rem); border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); line-height: 1.5; }
ol.checklist li::before { content: ""; position: absolute; left: var(--s-4); top: calc(var(--s-3) + 0.05rem); width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid hsl(var(--primary)); background: hsl(var(--primary) / 0.12); box-sizing: border-box; }
ol.checklist li::after { content: ""; position: absolute; left: calc(var(--s-4) + 0.47rem); top: calc(var(--s-3) + 0.3rem); width: 0.35rem; height: 0.65rem; border: solid hsl(var(--primary)); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* KPI strip drawn by breach.js: one source line under it. */
.dash .kpi-sources { margin: var(--s-2) 0 0; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }

/* Six KPI tiles: an even 3 + 3 instead of 5 + 1. */
@media (min-width: 40rem) { #dash .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }