/* User guide: long-form reading on top of the app's own look. Loaded after
   app.css, so it inherits the color tokens and base type and only adds what a
   document needs that a five-tab app never did — a contents list, section
   spacing, a comparison table, and a place for extra depth that does not
   crowd the plain explanation next to it. */

body.guide { padding-bottom: 48px; }

/* ------------------------------------------------------------------ header */

.guide-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.guide-back {
  color: var(--muted); font-size: 14px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px;
  white-space: nowrap;
}
.guide-back:hover, .guide-back:focus { color: var(--text); border-color: var(--accent); }

.guide-hero { padding: 4px 0 28px; }
.guide-hero h1 { font-size: 30px; margin: 18px 0 8px; letter-spacing: -0.02em; }
.guide-hero .why { font-size: 16px; }
/* The product video (2026-09-27): full width of the guide column, a 16:9
   frame, and a short line under it. */
.guide-video { margin: 20px 0 0; }
.guide-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 14px; border: 1px solid var(--line); background: #0f1115;
}
.guide-video figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* -------------------------------------------------------------- contents */

.guide-toc {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin: 0 0 32px;
}
.guide-toc h2 {
  margin: 0 0 10px; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.guide-toc ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 28px;
}
.guide-toc li { break-inside: avoid; margin-bottom: 6px; }
.guide-toc a { color: var(--text); text-decoration: none; font-size: 14px; }
.guide-toc a:hover, .guide-toc a:focus { color: var(--accent); }

/* -------------------------------------------------------------- sections */

.guide-section { margin: 0 0 40px; scroll-margin-top: 20px; }
.guide-section h2 {
  font-size: 21px; margin: 0 0 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.guide-section h3 { font-size: 16px; margin: 22px 0 8px; }
.guide-section p { color: var(--text); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.guide-section p.why { color: var(--muted); }
.guide-section ul, .guide-section ol.steps { margin: 0 0 14px; padding-left: 22px; }
.guide-section li { font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.guide-section b { color: var(--text); }

/* Inline links in the body of a long-form page. Without this they fall back to
   the browser's own bright blue and heavy underline, which is the one thing on
   these pages that does not look like the rest of the app -- it was most
   obvious on the support address, the largest link of the four pages. The
   underline stays, just quieter: these are prose links and removing it
   entirely would leave only colour to mark them. */
.guide-section a, footer a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(76,141,255,.4);
  text-underline-offset: 2px;
}
.guide-section a:hover, .guide-section a:focus,
footer a:hover, footer a:focus { text-decoration-color: var(--accent); }

ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li {
  position: relative; padding: 2px 0 2px 42px; margin-bottom: 16px;
}
ol.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}

/* A boxed aside for something worth pausing on -- a rule, not a warning. Reuses
   the app's own card surface rather than inventing a second visual language. */
.guide-note {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 14px 16px; margin: 0 0 16px;
}
.guide-note p:last-child { margin-bottom: 0; }
/* The contact page's address, larger than the text around it. A class, not a
   style= attribute, which the Content-Security-Policy refuses. */
.guide-note p.contact-address { font-size: 18px; }
.guide-note.tip { border-left-color: var(--buy); }
.guide-note.rule { border-left-color: var(--sell); }

/* "For the curious" -- depth without weight. Plain <details>, no JS: this page
   never rebuilds itself the way the app does, so the browser's own open/close
   state is all it needs. */
details.guide-more {
  margin: 4px 0 18px; border: 1px solid var(--line); border-radius: 10px;
  padding: 2px 14px;
}
details.guide-more summary {
  cursor: pointer; padding: 10px 0; font-size: 14px; color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
details.guide-more summary::-webkit-details-marker { display: none; }
details.guide-more summary::before {
  content: "›"; font-size: 16px; line-height: 1; display: inline-block;
  transition: transform 0.15s ease;
}
details.guide-more[open] summary::before { transform: rotate(90deg); }
details.guide-more summary:hover { color: var(--text); }
details.guide-more .inner { padding: 0 0 14px; }
details.guide-more .inner p:last-child { margin-bottom: 0; }
details.guide-more .inner { font-size: 14px; color: var(--muted); line-height: 1.6; }
details.guide-more .inner b { color: var(--text); }

/* ------------------------------------------------------------------- table */

.guide-compare { width: 100%; overflow-x: auto; margin: 0 0 16px; }
.guide-compare table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.guide-compare th, .guide-compare td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.guide-compare th { color: var(--muted); font-weight: 600; font-size: 13px; }
.guide-compare td.yes { color: var(--buy); }
.guide-compare tr:last-child td { border-bottom: none; }

/* Questions now uses .guide-compare, the same table as "How WireRally
   compares" -- left-justified, same borders, same width. No FAQ-specific
   styling left to keep in step with it. */

/* ------------------------------------------------------- screen samples */
/*
   Illustrations of the real screens, built from the app's OWN classes --
   guide.html loads app.css, so a `.card` here renders exactly as a card does
   in the product. That is the point: a mock drawn by hand would drift from
   the real thing the first time either changed, and a guide showing a screen
   the app no longer has is worse than a guide showing none.

   The frame and caption are the only new styling, and they exist to make the
   sample unmistakably an example rather than live data.
*/
.screen-sample {
  margin: 14px 0 22px;
  padding: 14px;
  border: 1px dashed #333c4a;
  border-radius: 12px;
  background: #0d0f14;
}
.screen-sample .card { cursor: default; margin: 0; }
/* Inside a sample card, the card's own lines keep the app's sizes: the
   guide's `.guide-section p` rule is more specific than the app's single-class
   rules and would otherwise enlarge every label and note on the card
   (noticed 2026-09-27 on the MCD and AMZN samples). Values mirror app.css. */
.guide-section .screen-sample .card p { line-height: normal; }
.guide-section .screen-sample .strategy-tabs-label { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.guide-section .screen-sample .short-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.guide-section .screen-sample .already-held { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.guide-section .screen-sample .why { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.guide-section .screen-sample .why.explainer { margin-top: 6px; }
.guide-section .screen-sample .why.news { margin-top: 8px; font-size: 13px; }
.screen-sample .card + .card { margin-top: 10px; }
.sample-caption {
  margin: 12px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
/* The tabs are a live control in the app and inert here. Kept looking
   identical, because the reader is being shown what to expect, not invited
   to press it. Same for the news link: it keeps the accent colour so the
   reader can see a real card links its source, but it goes nowhere on
   purpose -- an invented headline pointing at a dead URL would be a worse
   illustration than an obviously inert one. */
.screen-sample .strategy-tab,
.screen-sample .why.news a { cursor: default; }

/* The one line of the sample that is its own claim rather than a screenshot:
   the lead under "What WireRally does for you". */
.guide-lead {
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 720px) {
  .guide-hero h1 { font-size: 36px; }
  /* **No measure cap on paragraphs or list items any more.** Same fix as the
     app's own cards (app.css, 2026-09-16): `main` is already held to 880px,
     so this was prose set narrower than the boxes and table sitting right
     next to it on the same page -- .guide-note, .guide-toc and
     .guide-compare all already run the full 880px with no cap of their own.
     880px IS the measure here, same as it is for a card. */
  .guide-toc ol { columns: 3; }
}