/*
 * The user guide's own additions to site.css: a contents grid, step lists, figures, tier tags
 * and the on-screen label mark. Everything else (masthead, .doc, .plate, colors, type) is the
 * site's.
 */

.doc.guide { max-width: 78ch; margin: 0; }
.doc .lede { font-size: 17px; color: var(--chalk-white); margin: 0 0 8px; }
.doc h2, .doc section.part { scroll-margin-top: 90px; }
/* Room after the last part, so a menu entry near the end can still bring its heading to the top. */
.doc section.part:last-of-type { min-height: calc(100vh - 90px); }
.doc h3 { font-family: var(--font-numeral); font-size: 19px; letter-spacing: 0.04em; margin: 26px 0 8px; color: var(--chalk-white); }
.doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc ol li { margin-bottom: 8px; color: var(--secondary); font-size: 15.5px; }

/* On-screen labels: what the reader looks for on the glass. */
.ui { font-family: var(--font-mono); font-size: 0.86em; color: var(--chalk-white); background: var(--sub-plate); border: 1px solid var(--keyline); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.doc code { font-family: var(--font-mono); font-size: 0.86em; color: var(--chalk-white); }

/* Plan tag at the head of a section. */
.tier { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--keyline-soft); border-radius: 999px; padding: 3px 10px; margin: 0 0 10px; }

/* Figures. */
.doc figure { margin: 18px 0 26px; }
.doc figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--keyline); box-shadow: var(--panel-shadow); }
.doc figure.narrow img { max-width: 300px; margin: 0 auto; }
.doc figure.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.doc figure.pair img { max-width: 100%; }
.doc figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); text-align: center; }

/* Plain data table. */
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14.5px; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--row-rule); color: var(--secondary); vertical-align: top; }
.doc th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.doc .scroll { overflow-x: auto; }

@media (max-width: 600px) {
  .doc figure.pair { grid-template-columns: 1fr; }
}

/* Two columns: the index on the left stays put, the guide scrolls. */
.guide-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; align-items: start; }
.guide-side { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding-block: 56px 24px; }
.guide-side-fold summary { list-style: none; cursor: default; pointer-events: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.guide-side-fold summary::-webkit-details-marker { display: none; }
.guide-nav { display: flex; flex-direction: column; }
.guide-nav a { display: block; padding: 5px 10px 5px 12px; font-size: 13.5px; color: var(--secondary); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; }
.guide-nav a:hover { color: var(--chalk-white); background: var(--sub-plate); }
.guide-nav a.is-current { color: var(--chalk-white); border-left-color: var(--accent); background: var(--sub-plate); }
.guide-nav a.part { margin-top: 14px; padding-left: 10px; font-family: var(--font-numeral); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk-white); border-left: 0; }
.guide-nav a.part:first-child { margin-top: 0; }
.doc section.part { margin-top: 12px; }
.doc h2.part-title { font-size: 30px; letter-spacing: 0.06em; margin: 64px 0 4px; padding-top: 24px; border-top: 1px solid var(--keyline-faint); color: var(--accent); }
.doc section.part:first-of-type h2.part-title { border-top: 0; margin-top: 24px; }

@media (max-width: 860px) {
  .guide-shell { display: block; }
  .guide-side { position: static; max-height: none; padding-block: 24px 0; }
  .guide-side-fold summary { cursor: pointer; pointer-events: auto; }
  .guide-side-fold summary::before { content: "▸ "; }
  .guide-side-fold[open] summary::before { content: "▾ "; }
  .guide-nav { columns: 2; column-gap: 20px; display: block; }
  .guide-nav a { break-inside: avoid; }
  .doc.guide { margin: 0 auto; }
}

/*
 * site.css guards the page sideways with `overflow-x: hidden` on body, which makes body the
 * scrolling box and leaves `position: sticky` on the index nothing to stick to. `clip` keeps the
 * guard without becoming a scroll container.
 */
body { overflow-x: clip; }

/* Lightbox: any figure image opens full size over the page. */
.doc figure img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 10, 16, 0.92); cursor: zoom-out; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--keyline-soft); box-shadow: var(--panel-shadow); }
.lightbox figcaption { position: absolute; left: 0; right: 0; bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); text-align: center; }
.lightbox-close { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border: 1px solid var(--keyline-soft); border-radius: 999px; background: var(--sub-plate); color: var(--chalk-white); font: 500 20px/1 var(--font-label); cursor: pointer; }