/* GPSLarp help centre — /help/ and everything under it
 *
 * Loaded *after* /legal.css on every help page, and it defines no colour, no
 * font stack and no measure of its own. Every value below is a custom property
 * legal.css already sets on :root, which is what makes this file safe to change
 * for a marketing reason: it cannot alter a page with legal effect, and it
 * cannot drift from apps/web/DESIGN.md § 2 because it never restates it.
 *
 * ADR-0072 put one guide's extra rules in an inline <style> block, which was
 * right for one page. It stops being right at ten: the same forty rules
 * repeated ten times is ten places to change a padding, and the reason ADR-0072
 * gave for sharing legal.css — "one hardcoded mirror of the palette is a
 * maintenance burden the repository already carries; two would be a burden
 * nobody is tracking" — applies to any duplicated block, not only to colours.
 * ADR-0092 records that, and records why the split is a second FILE rather than
 * an addition to legal.css.
 *
 * Like legal.css this loads no webfont, for the same two reasons: the
 * Instrument Serif subsets are generated from apps/web/src/data/content.ts and
 * do not cover this vocabulary, and a third-party font CDN would send every
 * reader's IP address to that CDN. Georgia carries the headings, via
 * --font-serif's fallback.
 */

/* --- breadcrumb ---------------------------------------------------------- */

.crumb {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 24px;
}

.crumb a {
  text-decoration: none;
}

.crumb a:hover {
  text-decoration: underline;
}

.crumb span::before {
  content: "/";
  margin: 0 8px;
  color: var(--rule-strong);
}

/* --- the symptom line ----------------------------------------------------
 * Every troubleshooting page leads with the sentence the reader would type,
 * set as the H1. This is the deck under it: what the page is actually about,
 * in the vocabulary of the product rather than of the complaint. */

.symptom {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.verdict {
  border-left: 2px solid var(--rule-strong);
  padding: 4px 0 4px 20px;
  margin: 0 0 32px;
  color: var(--text-primary);
  font-size: 1.0625rem;
}

/* --- numbered fix steps --------------------------------------------------
 * A left rule rather than a box: DESIGN.md § 7 allows hairlines and one-step
 * tonal fills, and nothing else. */

.step {
  border-left: 1px solid var(--rule);
  padding-left: 20px;
  margin: 0 0 24px 2px;
}

.step > :last-child {
  margin-bottom: 0;
}

.step h3 {
  margin-top: 0;
}

.step h3 .n {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-right: 0.75em;
  vertical-align: 0.2em;
}

/* --- screenshot slots ----------------------------------------------------
 * A figure per screenshot. The <img> is added when a real screenshot exists;
 * until then the slot renders as a labelled hairline panel saying what belongs
 * there, so the layout is the finished layout and the gap is visible rather
 * than guessed at. KI-323 tracks the slots that are still empty.
 *
 * Deliberately no drawn overlay, arrow or annotation on any of these images —
 * plain screenshots only. The caption carries the pointing. */

.shot {
  margin: 24px 0;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.shot__pending {
  border: 1px dashed var(--rule-strong);
  background: var(--surface-secondary);
  padding: 28px 24px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
}

.shot figcaption {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

/* --- "if that did not work" ---------------------------------------------- */

.next {
  border-top: 1px solid var(--rule-strong);
  padding-top: 24px;
  margin-top: 48px;
}

.next h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* --- the index's page list -----------------------------------------------
 * A ruled list, not cards: DESIGN.md § 5 has no card component and § 7 forbids
 * the radius and shadow that would make one. */

.pages {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--rule);
}

.pages li {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

.pages a {
  display: block;
  padding: 20px 0;
  text-decoration: none;
  color: inherit;
}

.pages a:hover {
  background: var(--surface-secondary);
}

.pages .t {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.pages a:hover .t {
  color: var(--accent);
}

.pages .d {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* --- call to action ------------------------------------------------------
 * DESIGN.md § 5 Button: rectangular, radius 0, mono uppercase, 0.14em, primary
 * is an accent fill with ink text and a bone hover. */

.cta-row {
  margin: 32px 0;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 18px 28px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.cta:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--surface-primary);
}

.cta-row .caption {
  display: block;
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* --- related pages ------------------------------------------------------- */

.related {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: 48px;
  font-size: 0.875rem;
}

.related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related li {
  margin-bottom: 8px;
}

/* --- print ---------------------------------------------------------------
 * legal.css already inverts the palette for print. These are the help-only
 * elements it cannot know about. */

@media print {
  .cta,
  .crumb,
  .related {
    display: none;
  }

  .shot__pending {
    border: 1px dashed var(--rule-strong);
  }
}