/* ==========================================================================
   docs.hover-lang.org — stylesheet
   Loads after assets/css/tokens.css (same tokens the main site uses — see
   ../../website/assets/css/tokens.css, copied verbatim into tokens/).
   Two jobs:
   1. The three-column docs shell (header, sidebar, article, on-this-page
      rail) and its mobile collapse — the DocsHeader/DocsSidebar/OnThisPage
      React components (assets/js/docs/DocsChrome.jsx) are unstyled-by-CSS
      the same way SiteNav is on the main site, so breakpoints live here.
   2. Prose furniture for the plain-HTML article body every content page
      writes between includes/header.php and includes/footer.php — sized to
      match the design system's Article.jsx (Space Mono, --measure-prose,
      --leading-body).
   ========================================================================== */

* { box-sizing: border-box; }
html { overflow-x: hidden; }
img, svg { max-width: 100%; }

.hv-docs-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-page); }
.hv-docs-body { display: flex; flex: 1; min-height: 0; align-items: stretch; }

/* The sidebar and right rail are mounted into these wrappers as separate
   React roots (the server-rendered <article> sits between them, so they
   can't be one root). The wrappers, not the components inside them, are
   what .hv-docs-body actually lays out — so the flex sizing has to live
   here rather than on the components' own inline styles. */
#hv-docs-sidebar { flex: 0 0 auto; display: flex; }
#hv-docs-rail { flex: 0 0 auto; }

.hv-docs-toggle {
  all: unset; cursor: pointer; display: none; align-items: center; color: var(--color-navy);
}

/* -------------------------------------------------------------------- */
/* Article prose                                                         */
/* -------------------------------------------------------------------- */
.hv-docs-article { flex: 1; min-width: 0; padding: 34px 40px 72px; display: flex; flex-direction: column; gap: 22px; }

.hv-docs-crumb {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint);
}
.hv-docs-crumb svg { flex: 0 0 auto; }

.hv-docs-article h1 { font-size: var(--text-3xl); margin: 0; }
.hv-docs-article h2 { font-size: var(--text-xl); margin: 8px 0 0; scroll-margin-top: 76px; }
.hv-docs-article h3 { font-size: var(--text-lg); margin: 4px 0 0; scroll-margin-top: 76px; }
.hv-docs-article p { font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-body); max-width: var(--measure-prose); margin: 0; }
.hv-docs-article p.lede { font-size: var(--text-md); color: var(--text-muted); }
.hv-docs-article ul, .hv-docs-article ol { font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-body); max-width: var(--measure-prose); margin: 0; padding-left: 22px; }
.hv-docs-article li + li { margin-top: 6px; }
/* Inline `code` styling for prose only — CodeBlock (assets/js's DS bundle)
   renders each line as its own <code> inside a <pre>, and this rule used to
   match those too: a cream background stamped under text that's *already*
   cream on the code block's navy surface, wiping out every default-colored
   token (identifiers, punctuation) and leaving only keyword/number/comment
   spans visible. Excluding `pre code` keeps this scoped to inline mentions. */
.hv-docs-article code:not(pre code) { font-family: var(--font-mono); background: var(--surface-sunk); border: 1px solid var(--line-hair); padding: 1px 5px; font-size: 0.92em; }
.hv-docs-article a { color: var(--color-navy); }
.hv-docs-article .hv-codeblock { max-width: var(--measure-prose); }

/* -------------------------------------------------------------------- */
/* Version banner                                                        */
/* -------------------------------------------------------------------- */
/* Shown on every page that isn't the latest series. Server-rendered in
   includes/header.php rather than by React: a reader arriving on an old
   version from a stale link needs to see this in the first paint, not once
   Babel has finished compiling the page. */
.hv-docs-banner {
  font-size: var(--text-sm); line-height: var(--leading-body); max-width: var(--measure-prose);
  padding: 11px 14px; border: 2px solid var(--color-navy); background: var(--surface-sunk);
}
.hv-docs-banner code { background: none !important; border: none !important; padding: 0 !important; }
.hv-docs-banner a { color: var(--color-navy); font-weight: var(--weight-strong); white-space: nowrap; }
/* Unreleased docs get the louder treatment of the two — landing here by
   accident is the more costly mistake. */
.hv-docs-banner--dev { border-color: var(--color-black); background: var(--color-yellow); }

.hv-docs-footnav {
  display: flex; gap: 12px; align-items: center; padding-top: 18px; margin-top: 8px;
  border-top: 1px solid var(--line-hair); max-width: var(--measure-prose);
}
/* Anchored to their own edge rather than "last child goes right", so a page
   with only a next link (the introduction) doesn't push it left. */
.hv-docs-footnav-next { margin-left: auto; }

.hv-docs-footnav a, .hv-docs-footnav-prev, .hv-docs-footnav-next {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-strong);
  letter-spacing: 0.06em; text-decoration: none; color: var(--color-navy);
  border: 2px solid var(--color-navy); padding: 7px 12px;
}
.hv-docs-footnav a:hover { background: var(--color-yellow); color: var(--color-navy-ink); }

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hv-docs-rail { display: none !important; }
}

@media (max-width: 860px) {
  .hv-docs-toggle { display: inline-flex !important; }
  .hv-docs-search-btn { min-width: 0 !important; width: 34px; padding: 6px !important; }
  .hv-docs-search-btn span:not(:first-child) { display: none; }

  .hv-docs-sidebar {
    position: fixed; top: 57px; left: 0; bottom: 0; z-index: 19;
    transform: translateX(-100%); transition: transform var(--dur-fast, .15s) var(--ease-snap, ease);
    box-shadow: var(--shadow-hard-lg);
  }
  .hv-docs-shell.hv-docs-sidebar-open .hv-docs-sidebar { transform: translateX(0); }

  .hv-docs-article { padding: 26px 20px 56px; }
}