/* The guides, dressed as the world (workstream C): a still of the guide's stop behind an expanded stop sheet, the
   world's HUD label and footer. Loaded after ecosystem.css; kit tokens only. Also linked from the world itself, so a
   guide mounted in the in-world sheet (#guide) shares these rules through .guide-article. */

/* A document again: ecosystem.css locks the page for the canvas */
html:has(> body.guide-page), body.guide-page { height: auto; min-height: 100%; overflow: visible; overscroll-behavior: auto; touch-action: auto; }
body.guide-page { background: var(--bg-page); color: var(--text-primary); }

/* The still, fixed behind everything, with a scrim so the sheet's edges and the HUD keep contrast in both themes */
.guide-back { position: fixed; inset: 0; z-index: 0; background-color: var(--bg-page); background-size: cover; background-position: center; }
.guide-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-page) 30%, transparent), color-mix(in srgb, var(--bg-page) 60%, transparent)); }

/* HUD links read as the world's chips */
.guide-page a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.guide-page .theme-toggle { width: 44px; height: 44px; border: 1px solid var(--border-color); border-radius: 10rem; background: color-mix(in srgb, var(--bg-surface) 88%, transparent); color: var(--text-primary); }
.light .guide-page .theme-toggle, .guide-page .theme-toggle:where(.light *) { background: var(--bg-surface); }
.guide-page .hud-top { z-index: 10; }

/* The sheet, static in the flow instead of a dialog */
.guide-sheet { position: relative; z-index: 1; inset: auto; margin: calc(var(--space-xl) + 56px) auto calc(var(--space-2xl) + 3rem); width: min(44rem, calc(100vw - 2rem)); max-height: none; overflow: visible; }
.guide-article > * + * { margin-top: var(--space-md); }
.guide-article h1 { font-family: var(--font-display); font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; margin: var(--space-2xs) 0 0; }
.guide-article h2 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin: 0; scroll-margin-top: calc(var(--space-xl) + 56px); }
.guide-article h3 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; margin: 0; }
.guide-article p, .guide-article li { font-size: 1.0625rem; line-height: 1.6; max-width: var(--measure); }
.guide-article ul, .guide-article ol { padding-left: 1.25rem; margin: 0; }
.guide-article li + li { margin-top: var(--space-2xs); }
.guide-sub { color: var(--text-secondary); font-size: 1.15rem; }
.guide-meta { color: var(--text-secondary); font-size: 0.9rem; }
.guide-article a:not(.br-button) { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.guide-article a:not(.br-button):hover { text-decoration-thickness: 2px; }
.guide-minute, .guide-faq { padding: var(--space-md); border: 1px solid var(--border-color); border-radius: 0.75rem; background: var(--bg-page); }
.guide-minute > * + *, .guide-faq > * + * { margin-top: var(--space-sm); }
.guide-faq > h3 { margin-top: var(--space-md); }
.guide-faq > h2 + h3 { margin-top: var(--space-sm); }
.guide-faq > h3 + p { margin-top: var(--space-2xs); }
.guide-body > * + * { margin-top: var(--space-sm); }
.guide-body > h2 { margin-top: var(--space-xl); }
.guide-body > h3 { margin-top: var(--space-md); }
.guide-body .table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guide-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.guide-body th, .guide-body td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.guide-body th { font-weight: 600; }
.guide-body figure { margin: 0; }
.guide-body figure img { display: block; width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid var(--border-color); }
.guide-body figcaption { font-size: 0.9rem; color: var(--text-secondary); margin-top: var(--space-2xs); }
.guide-body blockquote { margin: 0; padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--text-secondary); border-radius: 0 0.75rem 0.75rem 0; background: var(--bg-page); }
.guide-body blockquote > * + * { margin-top: var(--space-2xs); }
.guide-body .callout-title { font-weight: 600; }
.guide-toc ol { margin: var(--space-2xs) 0 0; }
.guide-toc li { font-size: 0.95rem; }

/* The index: one card per guide, the cover on top */
.guide-article .guide-cards { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: grid; gap: var(--space-sm); }
.guide-cards li { max-width: none; }
.guide-article a.guide-card { display: block; border: 1px solid var(--border-color); border-radius: 0.75rem; overflow: hidden; background: var(--bg-page); color: inherit; text-decoration: none; }
.guide-article a.guide-card:hover { border-color: var(--text-secondary); }
.guide-article a.guide-card:hover strong { text-decoration: underline; text-underline-offset: 0.15em; }
.guide-article a.guide-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.guide-card img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; }
.guide-card-text { display: grid; gap: 0.3rem; padding: var(--space-sm) var(--space-md) var(--space-md); }
.guide-card-text strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.guide-card-text .muted { font-size: 0.95rem; line-height: 1.5; }
.guide-card-date { font-size: 0.85rem; color: var(--text-secondary); }

/* The world's footer on a static page: pinned, clear of the sheet's end, the extra credit only where it fits */
.guide-page .hud-foot { z-index: 10; }
/* Phones and small tablets: a reading page, so the HUD scrolls away and the footer sits after the sheet instead of
   covering the text */
@media (max-width: 820px) {
  .guide-page .foot-by { display: none; }
  .guide-page .hud-top { position: absolute; }
  .guide-page .hud-foot { position: static; transform: none; width: fit-content; margin: calc(-1 * var(--space-2xl)) auto var(--space-md); }
  .guide-sheet { margin-bottom: calc(var(--space-2xl) + 1rem); }
}
@media (min-width: 768px) { .guide-toc ol { columns: 2; column-gap: var(--space-md); } }
@media (max-width: 480px) { .guide-page .hud-title { display: none; } } /* the district name is in the sheet; three wrapped lines crowded the chips */
@media (max-width: 600px) {
  .guide-sheet { padding: var(--space-md); margin-top: calc(var(--space-lg) + 56px); }
  .guide-article h1 { font-size: 1.75rem; }
  .guide-article h2 { font-size: 1.3rem; }
  .guide-minute, .guide-faq { padding: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) { .guide-page * { transition: none !important; animation: none !important; } }
/* Phones: inline links in the article reach 44 px without changing the line (the sheets do the same for .muted a) */
@media (pointer: coarse) { .guide-article a:not(.br-button):not(.guide-card) { display: inline-block; padding-block: 13px; margin-block: -13px; } }