/* The walkthrough's only addition to the shared `.doc` document layout: the screenshot figure.
   Everything else on /guides/ is home.css's `.doc-head` / `.doc` / `.doc-index`, deliberately —
   this page is a document, and a guide that invents its own typography would read as a different
   product from the help pages it sits next to. */

/* `.updated` is a one-line mono note on the other document pages ("Last updated: …"), so home.css
   never had to bound it. This page's is a sentence, and unbounded uppercase mono at 1440 ran the
   full width of the window — the exact defect measured on /about/ and /contact/, reintroduced by a
   longer string. It gets the lede's measure. */
.doc-head .updated { max-width: 60ch; }

.shot {
  margin: 22px 0 26px;
  /* The image is the widest thing on this page and the measure column is 74ch. Letting it bleed a
     little past the prose is the one place that is right: a 1440px console screenshot scaled into
     74ch is unreadable, and the caption stays with the prose. Bounded by the container, so it can
     never push the document wider than the viewport. */
  max-width: min(100%, 900px);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  /* The captures are of the LIGHT console on a light page. In dark mode a bright rectangle is the
     brightest thing on the screen, so it is stepped down slightly and lifts back to full on hover —
     the image is evidence, and evidence has to be inspectable. */
  background: var(--slab);
}
:root[data-theme="dark"] .shot img { opacity: 0.9; transition: opacity 160ms ease; }
:root[data-theme="dark"] .shot img:hover { opacity: 1; }

.shot figcaption {
  margin-top: 9px;
  font: 400 13px/1.6 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}

/* The closing pair of buttons. `.doc p` sets a muted colour and a 15.5px size that a button must
   not inherit its metrics from. */
.doc .next {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .shot img { transition: none; }
}