/* LABXS app layer. Everything visual now lives in brand/ — this file holds
   only what belongs to the document itself. Do not add colours or fonts here;
   add them to brand/tokens/ so there is one place to change them. */

/* `clip` instead of `hidden` — hidden would make a scroll container and break
   the sticky header. */
html, body { overflow-x: clip; }

/* Anchor clearance. The nav is sticky, so scrolling to an #id would otherwise
   park the heading underneath it. Every anchorable element reserves the nav's
   height plus breathing room; scroll-margin only applies when something
   actually scrolls to that element, so casting this wide costs nothing.
   The margin is generous on purpose: the nav grows by roughly 34px when the
   offline or update-ready banner is showing, and an anchor must still clear it
   then — offline is a normal state for an installed PWA. */
:root { --nav-h: 64px; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-h) + 48px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

* { scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-bg); }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 4px; }

/* The contact form's illustrated rail. Page decoration, not a component. */
@media (max-width: 720px) { .form-rail { display: none; } }

/* A long document's contents column: sticky beside the text on wide screens,
   inline above it on narrow ones, where a stuck column would eat the viewport. */
@media (min-width: 901px) { .doc-toc { position: sticky; top: calc(var(--nav-h) + 32px); } }
/* Comfortable tap targets. These link lists are visually tight by design; on
   touch input each row gets a 44px box without changing how it reads. Keyed on
   pointer capability rather than width, so a touch tablet qualifies and a small
   laptop window does not — the width clause is a fallback for narrow windows. */
@media (hover: none) and (pointer: coarse), (max-width: 720px) { .tap-list a { min-height: 44px; display: flex; align-items: center; } .tap-list a > span { padding-top: 0; } }