/* walkthrough.html — layered over landing.css, which supplies the hero,
   sections, tables and footer. Only what the guide adds lives here. */

.hero.compact { padding-top: clamp(24px, 5vw, 44px); }
.hero.compact .hero-logo { width: clamp(84px, 16vw, 118px); }

/* -- contents ------------------------------------------------------------
   Sticky on a laptop so the sections stay one click apart while reading. */
.toc {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  padding: 12px var(--pad-x);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
@supports not (backdrop-filter: blur(8px)) {
  .toc { background: var(--bg); }
}
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Anchored sections must clear the sticky bar when jumped to. */
section { scroll-margin-top: 64px; }

/* -- reference tables ----------------------------------------------------
   Two columns: the control on the left, what it does on the right. */
.keys {
  width: 100%; border-collapse: collapse; margin: 12px 0 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.keys td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.keys tr:last-child td { border-bottom: 0; }
.keys td:first-child { width: 34%; white-space: nowrap; }
.keys.wide td:first-child { width: 26%; white-space: normal; }
.keys td:last-child { color: var(--muted); }

kbd {
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; background: var(--bg);
}

.note {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 14px; margin: 16px 0 0;
  color: var(--muted); font-size: 14px;
}

/* On a phone the control and its description stack rather than squeezing. */
@media (max-width: 599px) {
  .toc { justify-content: flex-start; font-size: 13px; }
  .keys td, .keys.wide td { display: block; width: auto; white-space: normal; }
  .keys td:first-child { border-bottom: 0; padding-bottom: 0; }
}

/* Named colours in the guide should look like what they describe. */
.pass-good { color: var(--good); font-weight: 600; }
.pass-bad { color: var(--bad); font-weight: 600; }