/* /how-it-works only (07 §6). Shared section patterns come from components/sections.css; colours and sizes from tokens.css (rule 12). */

/* Hero + "on this page" chips */
.hiw-hero { display: grid; gap: var(--space-3); justify-items: start; padding-block: var(--space-6) var(--space-5); }
.hiw-hero__title { font-size: var(--text-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.hiw-hero__lead { max-width: 60ch; font-size: var(--text-h3); line-height: 1.55; color: var(--color-text-muted); }
.hiw-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.hiw-toc .chip { min-height: var(--tap-min); }
.hiw [id] { scroll-margin-top: var(--space-5); }
.hiw-note { margin-top: var(--space-5); color: var(--color-text-muted); max-width: var(--prose); }

/* Steps as a vertical timeline (5 steps read better top to bottom than as 5 narrow columns) */
.timeline { position: relative; display: grid; gap: var(--space-5); max-width: 760px; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--color-border);
}
.timeline__item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.timeline__num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary); font-weight: 700;
  box-shadow: 0 0 0 6px var(--color-bg);
}
.timeline__title { font-size: var(--text-h3); margin-bottom: var(--space-1); line-height: 36px; }
.timeline__item p { color: var(--color-text-muted); }

/* Two server cards */
.engines { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .engines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.engine {
  display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.engine > p { color: var(--color-text-muted); }
.engine__head { display: flex; align-items: center; gap: var(--space-3); }
.engine__icon { flex: none; width: 28px; height: 28px; color: var(--color-primary); }
.engine__name { font-size: var(--text-h3); }
.engine__head .badge { margin-left: auto; color: var(--color-primary); border-color: var(--color-border); }
.engine__facts { display: grid; margin: 0; border-top: 1px solid var(--color-border); }
.engine__facts > div {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-small);
}
.engine__facts dt { color: var(--color-text-muted); font-weight: 600; }
.engine__facts dd { margin: 0; }

/* M-Lab disclosure box (rule 19: must stay prominent) */
.hiw-notice {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-warn);
  border-radius: var(--radius-lg);
}
.hiw-notice__icon { flex: none; width: var(--icon-md); height: var(--icon-md); margin-top: 2px; color: var(--color-warn); }
.hiw-notice .section__title { margin: var(--space-1) 0 var(--space-3); }
.hiw-notice p:last-child { max-width: var(--prose); }

/* Grade chips: same colours as the result's grade badge (metrics.css), letter in on-primary (≥ 5:1, 08 §7.1) */
.grade-chip {
  display: inline-grid; place-items: center; width: var(--badge-size); height: var(--badge-size);
  border-radius: var(--radius-sm); color: var(--color-on-primary); font-weight: 700;
}
.grade-chip--A { background: var(--color-good); }
.grade-chip--B { background: var(--color-ok); }
.grade-chip--C { background: var(--color-warn); }
.grade-chip--D { background: var(--color-poor); }
.grade-chip--F { background: var(--color-bad); }
.grade-table { background: var(--color-surface); border-radius: var(--radius-lg); }
.grade-table td { vertical-align: middle; font-size: var(--text-body); }
.grade-table .num-left { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Known limits as cards */
.limits { display: grid; gap: var(--space-4); padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.limit {
  display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.limit__icon { width: var(--icon-md); height: var(--icon-md); color: var(--color-primary); margin-bottom: var(--space-1); }
.limit__title { font-size: var(--text-h3); }
.limit p { color: var(--color-text-muted); font-size: var(--text-small); }

/* What we keep: three columns */
.keep { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .keep { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.keep__col { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.keep__col--never { border-color: var(--color-border-strong); }
.keep__title { font-size: var(--text-body); margin-bottom: var(--space-3); }
.x-list { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.x-list li { position: relative; padding-left: var(--space-5); font-weight: 600; }
.x-list li::before, .x-list li::after {
  content: ""; position: absolute; left: 2px; top: .75em; width: 12px; height: 2px; background: var(--color-bad);
  transform: rotate(45deg);
}
.x-list li::after { transform: rotate(-45deg); }