/* Guide pages (/build/*) — the written companion to the pane catalog.
 *
 * Deliberately thin: the catalog stylesheet already owns the code block,
 * copy button, breadcrumb and behaviour-table treatments, and a guide page
 * loads both. Everything here is either page furniture the catalog has no
 * equivalent of (contents rail, pager, figures) or the example surfaces the
 * guide teaches, which have to be real CSS a reader can copy.
 */

/* ---- page furniture ------------------------------------------------ */

.lp-guide {
  padding: 28px 0 64px;
}
.lp-guide-head {
  margin: 10px 0 26px;
  max-width: 78ch;
}
.lp-guide-part {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin-bottom: 8px;
}
.lp-guide-head h1 {
  font-family: var(--lp-font-serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--lp-ink);
}
.lp-guide-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--lp-ink-2);
  margin: 0;
}

/* Contents rail beside the prose on wide screens, stacked above it on
   narrow. Grid rather than float so the rail can be sticky without the
   body needing a matching margin. */
.lp-guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1000px) {
  .lp-guide-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .lp-guide-toc {
    position: sticky;
    top: 86px;
  }
}
.lp-guide-toc h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin: 0 0 10px;
}
.lp-guide-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--lp-line);
}
.lp-guide-toc li { margin: 0; }
.lp-guide-toc a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--lp-ink-2);
  text-decoration: none;
}
.lp-guide-toc a:hover,
.lp-guide-toc a:focus-visible {
  color: var(--lp-ink);
  border-left-color: var(--lp-ink);
  text-decoration: underline;
}

/* ---- prose --------------------------------------------------------- */

.lp-guide-body { min-width: 0; }
.lp-guide-body h2 {
  font-family: var(--lp-font-serif);
  font-weight: 400;
  font-size: 27px;
  margin: 40px 0 10px;
  color: var(--lp-ink);
  scroll-margin-top: 90px;     /* so an #anchor jump clears the sticky nav */
}
.lp-guide-body h3 {
  font-size: 16.5px;
  font-weight: 600;
  margin: 28px 0 6px;
  color: var(--lp-ink);
  scroll-margin-top: 90px;
}
.lp-guide-body h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 20px 0 4px;
  color: var(--lp-ink-2);
}
.lp-guide-body p,
.lp-guide-body li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--lp-ink-2);
  max-width: 96ch;
}
.lp-guide-body p { margin: 0 0 14px; }
.lp-guide-body ul,
.lp-guide-body ol { margin: 0 0 16px; padding-left: 22px; }
.lp-guide-body li { margin-bottom: 7px; }
.lp-guide-body code {
  font-family: var(--lp-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.89em;
  background: var(--lp-sunk);
  padding: 1px 5px;
  border-radius: 3px;
}
/* Colour AND underline now come from the shared prose-link rule in
   tokens.css. This set colour only, which the token's own comment
   says is never enough. */

/* A measured fact, set apart from the prose around it. Used wherever the
   guide states a number that came from running the thing rather than from
   someone's recollection. */
.lp-guide-note {
  border-left: 3px solid var(--lp-ink);
  background: var(--lp-sunk);
  padding: 12px 16px;
  margin: 18px 0;
  border-radius: 0 4px 4px 0;
}
.lp-guide-note > :last-child { margin-bottom: 0; }
.lp-guide-note-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin-bottom: 5px;
}
.lp-guide-note--warn { border-left-color: #b45309; }

/* Measurement tables reuse the catalog's behaviour-table treatment; this
   only adds the numeric alignment. */
.lp-guide-body .lp-catalog-behaviour-table td.num,
.lp-guide-body .lp-catalog-behaviour-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- worked examples ------------------------------------------------
 * REMOVED 2026-10-29. This carried real CSS for the patterns the guide
 * teaches — the card grid, the tinted comparison, a resizable container,
 * the overlay dialog — on the assumption the pages would render live
 * examples. They teach the patterns in copyable CODE BLOCKS instead, so
 * none of it was ever referenced: 10 classes, 0 uses anywhere in the
 * tree, JS and templates included.
 *
 * Deleted rather than kept "in case": a second, unused copy of CSS the
 * guide publishes as its answer is worse than none, because the two can
 * drift and the reader is copying the one that is NOT exercised. If live
 * examples are added later, write them from the guide's own code blocks.
 */

/* ---- the /build/ hub ------------------------------------------------ */

.lp-build-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 20px 0 10px;
}
.lp-build-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  background: var(--lp-paper);
  text-decoration: none;
  color: inherit;
}
.lp-build-card:hover,
.lp-build-card:focus-visible {
  border-color: var(--lp-ink);
}
.lp-build-card-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin-bottom: 6px;
}
.lp-build-card h2,
.lp-build-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--lp-ink);
}
.lp-build-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-ink-2);
  margin: 0;
}

/* ---- pager ---------------------------------------------------------- */

.lp-guide-pager {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--lp-line);
}
.lp-guide-pager-link {
  display: block;
  max-width: 48%;
  text-decoration: none;
  color: inherit;
}
.lp-guide-pager-next { text-align: right; }
.lp-guide-pager-dir {
  display: block;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin-bottom: 3px;
}
.lp-guide-pager-label {
  display: block;
  font-size: 15px;
  color: var(--lp-link);
  text-decoration: underline;
}

/* A card for a guide that does not exist yet. Deliberately not a link and
   deliberately quieter than its neighbours — a card that looks clickable
   and is not is worse than no card. */
.lp-build-card--soon {
  border-style: dashed;
  background: transparent;
}
.lp-build-card--soon h3 { color: var(--lp-ink-2); }
.lp-build-card--soon p  { color: var(--lp-ink-3); }

/* ---------------------------------------------------------------------
   /build/prompt/ — the prompt builder.

   Two columns on a wide screen: the questions on the left, the prompt
   they produce on the right, visible while you answer. One column below
   900px, questions first, because the output is only interesting once
   something has been typed.
   --------------------------------------------------------------------- */
.lp-prompt {
  display: grid;
  /* Not 1fr/1fr: the output is monospace and hand-wrapped to 72 columns,
     and an even split measured 69 columns at 1280px — so the prompt
     re-wrapped and looked broken. The output side gets the extra. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: start;
  margin-top: 28px;
}

/* The `hidden` attribute only means display:none while nothing else sets
   display. .lp-prompt-colours is a flex row, so without this the brand
   colour pickers stayed visible with the box unticked. */
.lp-prompt [hidden] { display: none; }
/* 1100px, not a round 900: below this the output column stops holding the
   72 monospace columns the prompt is wrapped to, and the prompt re-wraps.
   Measured — 75 columns fit at 1100px, 67 at 1000px. One column is wider
   than half of a narrower page, so collapsing EARLIER is what keeps it
   readable. */
@media (max-width: 1100px) {
  .lp-prompt { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.lp-prompt-intro { max-width: 64ch; }

.lp-prompt-form { display: grid; gap: 22px; }

.lp-prompt-field {
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  background: var(--lp-paper);
  padding: 16px 18px 18px;
  margin: 0;
}
.lp-prompt-field legend {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
  margin-left: -6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-ink);
}
.lp-prompt-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--lp-amber);
  color: var(--lp-ink-on-accent);
  font-size: 12px;
  font-weight: 700;
}
.lp-prompt-hint {
  margin: 6px 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lp-ink-3);
}

.lp-prompt-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  color: var(--lp-ink);
  background: var(--lp-canvas);
  border: 1px solid var(--lp-line-strong);
  border-radius: 6px;
  resize: vertical;
}
.lp-prompt-field textarea::placeholder { color: var(--lp-ink-4); }

.lp-prompt-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.lp-prompt-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--lp-ink-2);
  cursor: pointer;
}
.lp-prompt-check input { accent-color: var(--lp-link); }

.lp-prompt-radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 0;
  font-size: 14px;
  color: var(--lp-ink-3);
  cursor: pointer;
}
.lp-prompt-radio + .lp-prompt-radio { border-top: 1px solid var(--lp-line); }
.lp-prompt-radio input { margin-top: 3px; accent-color: var(--lp-link); }
.lp-prompt-radio strong {
  display: block;
  color: var(--lp-ink);
  font-weight: 600;
  margin-bottom: 2px;
}

.lp-prompt-colours {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}
.lp-prompt-colour {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--lp-ink-2);
}
.lp-prompt-colour input[type="color"] {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--lp-line-strong);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.lp-prompt-colour input[type="text"] {
  width: 9ch;
  font: inherit;
  font-family: var(--lp-font-mono);
  font-size: 13px;
  padding: 5px 7px;
  color: var(--lp-ink);
  background: var(--lp-canvas);
  border: 1px solid var(--lp-line-strong);
  border-radius: 4px;
}

.lp-prompt-kit {
  margin-top: 14px;
  padding: 13px 15px;
  background: var(--lp-amber-wash);
  border: 1px solid var(--lp-amber-soft);
  border-radius: 6px;
}
.lp-prompt-kit p {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-ink-2);
}
.lp-prompt-kit-btn {
  display: inline-block;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-ink);
  text-decoration: none;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line-strong);
  border-radius: 5px;
}
.lp-prompt-kit-btn:hover { background: var(--lp-sunk); }

/* The result column tracks the page on a wide screen so the prompt stays
   in view while the questions below the fold are answered. --lp-nav-bottom
   is published by chrome.css; the sticky nav would otherwise cover the
   heading. */
.lp-prompt-result { position: sticky; top: calc(var(--lp-nav-bottom) + 16px); }
@media (max-width: 1100px) { .lp-prompt-result { position: static; } }

.lp-prompt-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.lp-prompt-result-head h2 { margin: 0; font-size: 16px; }

.lp-prompt-copy-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-ink-on-accent);
  background: var(--lp-amber);
  border: 1px solid var(--lp-amber);
  border-radius: 5px;
  cursor: pointer;
}
.lp-prompt-copy-btn:hover { background: var(--lp-amber-soft); }
.lp-prompt-copy-btn.is-copied {
  background: #e6f4ea;
  border-color: #34a853;
  color: #1e6e33;
}

.lp-prompt-output {
  margin: 0;
  max-height: 70vh;
  overflow: auto;
  padding: 15px 17px;
  font-family: var(--lp-font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--lp-ink);
  background: var(--lp-sunk);
  border: 1px solid var(--lp-line);
  border-radius: 8px;
}
.lp-prompt-foot {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lp-ink-3);
}