/* "What it checks" — the two editorial blocks the scenario rows do not
   already cover. Everything else on that page reuses .ia-* from
   public_in_action.css, so this file stays small on purpose. */

/* ── also checked ───────────────────────────────────────────────── */
.ck-also,.ck-out{background:var(--background)}
.ck-also-lede{
  max-width:46ch;margin:.5rem 0 2rem;color:var(--muted-foreground);line-height:1.6}

.ck-also-list{margin:0;display:grid;gap:0}
.ck-also-row{
  display:grid;gap:.35rem;padding:1.25rem 0;
  border-top:1px solid var(--border)}
.ck-also-row:last-child{border-bottom:1px solid var(--border)}
.ck-also-row dt{font-weight:600;color:var(--ink)}
.ck-also-row dd{margin:0;color:var(--muted-foreground);line-height:1.6;max-width:60ch}
@media(min-width:768px){
  .ck-also-row{grid-template-columns:16rem 1fr;gap:2rem;align-items:baseline}
}

/* ── the four results ───────────────────────────────────────────── */
.ck-out-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ck-out-item{
  display:grid;grid-template-columns:auto 1fr;gap:.5rem .75rem;
  align-items:baseline;padding:1.125rem 0;
  border-top:1px solid var(--border)}
.ck-out-item:last-child{border-bottom:1px solid var(--border)}
.ck-out-item strong{color:var(--ink);font-weight:600}
.ck-out-item span:last-child{
  grid-column:2;color:var(--muted-foreground);line-height:1.6;max-width:60ch}
@media(min-width:768px){
  .ck-out-item{grid-template-columns:auto 16rem 1fr;gap:.75rem 1.25rem}
  .ck-out-item span:last-child{grid-column:3}
}
/* The dot is a status colour, never the only signal: the label beside
   it says the same thing in words. */
.ck-out-item .ia-dot{position:relative;top:-.1em}

.ck-note{
  margin-top:2rem;color:var(--muted-foreground);font-size:.9375rem;
  line-height:1.6;max-width:60ch}

/* ── alternating scenario rhythm ────────────────────────────────── */
/* Seven situations in a row, all with the explanation left and the
   records right, reads as a component loop however good each one is.
   Flipping every second row makes the page scan as a sequence of
   deliberate spreads instead. Source order is unchanged, so the reading
   order a screen reader and a narrow viewport get -- explanation first,
   then the records it describes -- is unaffected. */
@media(min-width:880px){
  .ia-scn-alt .ia-grid > .ia-say{order:2}
  .ia-scn-alt .ia-grid > .ia-flow{order:1}
  .ia-scn-alt .ia-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}