/* MOF++ stylesheet.
 *
 * One hand-written file, no build step, no framework. A two-person part-time
 * team should be able to change a colour without installing a toolchain.
 *
 * MOBILE FIRST. Every base rule describes a narrow screen; `min-width` media
 * queries add what a wider one affords. Nothing in this file is written for a
 * desktop and then undone for a phone, and there is no layout `max-width`
 * media query left. That is not a style preference: a desktop-first sheet
 * makes a phone parse and apply a two-column grid, a sticky header and a row
 * of inline nav items before overriding all three, and it makes every new
 * component remember to undo itself. Here a component that says nothing about
 * width is already correct at 320px.
 *
 * Breakpoints, in rem so they follow the user's font size:
 *   40rem — two columns become affordable: cards, field rows, the footer,
 *           the term/value grid on a record.
 *   48rem — the header fits on one line: the nav disclosure unfolds, the
 *           header becomes sticky, page padding grows.
 *   62rem — a record or a doc page can carry a sidebar beside its body.
 *
 * TABLES. Twelve tables across nine templates, and they are all wrapped in
 * `.table-scroll`: a horizontally scrolling region, not a stacked card
 * layout. Why: the widest of them (the vertex table on a net record) is five
 * columns of data meant to be *compared down the column* — a coordination
 * sequence read against its neighbour — and stacking it into one card per row
 * destroys exactly that. Stacking also needs a duplicated header string in a
 * `data-label` on every cell of every table, which is a second copy of the
 * header that can drift from the real one, and it drops the row/column
 * relationship that `scope` gives a screen reader. So the table keeps its
 * shape and the *container* scrolls: the region is focusable and labelled so
 * a keyboard can scroll it (2.1.1), its overflowing edge is marked with a
 * shadow so the scroll is visible rather than guessed at, and it never makes
 * the page itself scroll sideways.
 *
 * Accessibility targets (WCAG 2.2 AA, CONTEXT §7):
 *   - body text meets 4.5:1 against its background in both themes
 *   - every interactive element has a visible :focus-visible ring (2.4.11/2.4.13)
 *   - hit targets are at least 44x44 CSS px (2.5.8 asks 24x24; 44 is the
 *     comfortable target and what a thumb actually needs)
 *   - nothing conveys meaning by colour alone (1.4.1)
 *   - layout survives 200% zoom and 320px width (1.4.4, 1.4.10)
 */

:root {
  color-scheme: light dark;

  --ink:        #16191d;
  --ink-muted:  #4c545f;
  --paper:      #fbfaf8;
  --surface:    #ffffff;
  --line:       #d9d5cd;
  --line-soft:  #ebe7e0;

  /* Accent chosen to hold 4.5:1 on --paper for text and 3:1 for borders. */
  --accent:     #14607a;
  --accent-ink: #0d485c;
  --accent-bg:  #e4f1f5;

  --warn:       #8a4b08;
  --warn-bg:    #fbf0e2;

  --radius: 6px;
  --measure: 68ch;
  /* One number for "big enough to touch", used by every control. */
  --tap: 44px;
  --shadow: 0 6px 24px rgb(0 0 0 / 12%);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e8e6e1;
    --ink-muted:  #a7adb6;
    --paper:      #14171a;
    --surface:    #1c2024;
    --line:       #363c43;
    --line-soft:  #262b31;
    --accent:     #6fc6e0;
    --accent-ink: #a5dcee;
    --accent-bg:  #16303a;
    --warn:       #e8b071;
    --warn-bg:    #33261a;
    --shadow:     0 6px 24px rgb(0 0 0 / 45%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 620; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.35rem); margin: 2rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }

/* A long unbroken token — a net name, a URL, a systre key — must fold rather
   than push the page sideways. */
h1, h2, h3, h4, p, li, dd, dt, caption, figcaption { overflow-wrap: break-word; }

p, ul, ol, table, pre, blockquote { margin: 0 0 1rem; }

img, svg, video, canvas { max-width: 100%; }

a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

code, kbd, pre, samp { font-family: var(--mono); font-size: .9em; }
code { background: var(--line-soft); padding: .1em .35em; border-radius: 3px; overflow-wrap: anywhere; }
pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  overflow-x: auto;
  max-width: 100%;
}
pre code { background: none; padding: 0; }

/* Available to a screen reader, invisible on screen. Used for the labels of
   controls whose purpose is clear from their shape but which still need a
   name (3.3.2). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- layout */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 30;
}
.skip-link:focus { left: 0; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  /* Positioned so the collapsed menu can hang off it; NOT sticky here — on a
     phone the header is two rows and stealing that much of a short viewport
     for the whole scroll is worse than losing the nav. It becomes sticky at
     48rem, where it is one row. */
  position: relative;
  z-index: 10;
}

.bar {
  max-width: 78rem;
  margin: 0 auto;
  padding: .5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: var(--tap);
  margin-right: auto;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark { color: var(--accent); }

/* ------------------------------------------------------------ navigation */

/* The disclosure is a <details>: it opens and closes with no JavaScript, the
   <summary> is a button in the accessibility tree with the browser keeping
   aria-expanded in step with the open state, and it is in the tab order for
   free. Above 48rem the summary is hidden and the panel is forced open, so
   there is no state to get wrong on a wide screen. */
.nav-disclosure { display: block; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 570;
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }
.nav-toggle:hover { background: var(--line-soft); }

/* Three bars that become a cross when the menu is open. Decorative: the word
   "Menu" beside it is the accessible name, so the state is never carried by
   the glyph alone. */
.nav-toggle-icon {
  position: relative;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
[open] > .nav-toggle .nav-toggle-icon {
  background: transparent;
  box-shadow: none;
}
[open] > .nav-toggle .nav-toggle-icon::before,
[open] > .nav-toggle .nav-toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}
[open] > .nav-toggle .nav-toggle-icon::before { transform: rotate(45deg); }
[open] > .nav-toggle .nav-toggle-icon::after { transform: rotate(-45deg); }

/* Closed, this is not rendered at all; open, it hangs below the header across
   its full width rather than widening the flex item it lives in. */
.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: .5rem 1rem 1rem;
}

.primary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: .5rem .8rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
}
.primary a:hover { background: var(--line-soft); }
/* Current section is marked by weight and a rule, not by colour alone. */
.primary a[aria-current="page"] {
  background: var(--accent-bg);
  color: var(--accent-ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line-soft);
  font-size: .95rem;
}
.account a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 .5rem;
}
.account .tiers {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .55rem;
}

/* --------------------------------------------------- site-wide searching */

/* Owned here as markup and appearance; the /search route behind it is not
   this file's business. On a phone it takes the second row of the header at
   full width, which is where a search box belongs on a small screen. */
.site-search {
  flex: 1 1 100%;
  display: flex;
  gap: .4rem;
  align-items: stretch;
}
.site-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.site-search button {
  flex: 0 0 auto;
  padding-inline: .9rem;
}

/* ----------------------------------------------------------------- main */

main {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.prose { max-width: var(--measure); }
.prose h2 { border-bottom: 1px solid var(--line-soft); padding-bottom: .25rem; }
.prose li { margin-bottom: .3rem; }

.lede { font-size: 1.08rem; color: var(--ink-muted); max-width: var(--measure); }

/* ----------------------------------------------------------------- cards */

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  padding: 0;
  list-style: none;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
}
.card h2, .card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card .count {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-muted);
}

a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent); background: var(--accent-bg); }
a.card h2, a.card h3 { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------------------------- forms */

form.search {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.field-row {
  display: grid;
  gap: .9rem 1.1rem;
  grid-template-columns: 1fr;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field label { font-weight: 570; font-size: .92rem; }
.field .hint { font-size: .82rem; color: var(--ink-muted); }

input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="password"], select, textarea {
  font: inherit;
  /* 16px or larger, or iOS Safari zooms the page on focus and the viewport
     the user gets back is not the one they started with. */
  font-size: max(1rem, 16px);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem .6rem;
  min-height: var(--tap);
  width: 100%;
  max-width: 100%;
}
textarea { min-height: 8rem; font-family: var(--mono); font-size: .95rem; }

.checkbox { display: flex; align-items: center; gap: .5rem; min-height: var(--tap); }
.checkbox input { width: 1.35rem; height: 1.35rem; min-height: 0; }
.checkbox label { font-weight: 500; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; align-items: center; }

button, .button {
  font: inherit;
  font-weight: 570;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: .45rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-color-scheme: dark) {
  button, .button { color: #08222b; }
}
button.secondary, .button.secondary {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--line);
}
button:hover, .button:hover { filter: brightness(1.08); }

details.advanced {
  margin-top: 1rem;
  border-top: 1px solid var(--line-soft);
  padding-top: .8rem;
}
details.advanced summary {
  cursor: pointer;
  font-weight: 570;
  display: flex;
  align-items: center;
  min-height: var(--tap);
}

/* ---------------------------------------------------------------- tables */

/* The scrolling region. It is focusable in the markup (tabindex="0") and
   labelled, because a region that only a mouse or a finger can scroll is
   unreachable from a keyboard.

   The shadows are the classic CSS-only scroll cue: two solid wedges in the
   page colour pinned to the content box (`local`), and two soft shadows
   pinned to the viewport of the scroller (`scroll`). When the content is
   flush against an edge the wedge covers the shadow; when it overflows, the
   wedge scrolls away and the shadow shows. No script, and it reports the
   truth at every width. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) var(--line-soft);
  background:
    linear-gradient(to right, var(--paper) 40%, rgb(0 0 0 / 0%)) 0 0 / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, rgb(0 0 0 / 0%)) 100% 0 / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 22%), rgb(0 0 0 / 0%)) 0 0 / .75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 22%), rgb(0 0 0 / 0%)) 100% 0 / .75rem 100% no-repeat scroll;
}
/* On the platforms that hide overlay scrollbars until they are used, show
   this one: the whole point is that the reader knows there is more. */
.table-scroll::-webkit-scrollbar { height: .6rem; }
.table-scroll::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 999px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; font-size: .92rem; }
caption {
  text-align: left;
  color: var(--ink-muted);
  padding-bottom: .5rem;
  /* The caption belongs to the table and scrolls with it, so keep it as wide
     as the reader's screen rather than as wide as the widest row. */
  max-width: var(--measure);
}
th, td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
th { font-weight: 620; border-bottom-color: var(--line); white-space: nowrap; }
tbody tr:hover { background: var(--line-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .mono, .mono { font-family: var(--mono); }
/* A vertex symbol can be hundreds of characters. Let it fold inside its cell
   rather than making the row a kilometre wide, and cap the cell so one long
   value cannot dictate the width of the table. */
td.mono, td code { overflow-wrap: anywhere; }
td.mono { max-width: 26rem; }
td a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------- records */

.record-head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.record-head h1 {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 1.1rem + 2vw, 2rem);
  overflow-wrap: anywhere;
}
.kind {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .2rem;
}

.record-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

dl.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem 1rem;
  margin: 0 0 1.5rem;
}
dl.facts dt { color: var(--ink-muted); }
dl.facts dd {
  margin: 0 0 .5rem;
  font-family: var(--mono);
  font-size: .92rem;
  overflow-wrap: anywhere;
}

.side-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.side-box h2 { font-size: 1rem; margin-top: 0; }

.download-list { list-style: none; padding: 0; margin: 0; }
.download-list li { margin-bottom: .2rem; }
.download-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.download-list .fmt {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-muted);
  margin-left: .35rem;
}

.citation {
  font-size: .88rem;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.licence-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .15rem .7rem;
}

/* --------------------------------------------------------------- viewer */

/* The viewer is sized by its column and nothing else: no width in pixels
   anywhere, an aspect ratio instead of a height, and a script that re-reads
   the box it was given whenever it changes (static/js/net-viewer.js). */
.viewer-wrap { margin: 0 0 1.5rem; }
.viewer {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  position: relative;
  min-height: 4rem;
  overflow: hidden;
}
/* The 3Dmol mount has no intrinsic content to give it a height, so it takes
   one from its own width. Squarer on a phone, wider on a desktop. */
.viewer[data-xyz] { aspect-ratio: 1 / 1; }
/* Only the live net viewer takes a drag cursor; an empty mount must not
   advertise an interaction it cannot perform.

   `pan-y` and not `none`: a full-width figure that swallows vertical swipes
   traps a phone reader halfway down the page with no way past it. The browser
   keeps the vertical scroll, the viewer takes the horizontal drag, and both
   axes stay rotatable from the keyboard. */
.viewer.is-live { cursor: grab; touch-action: pan-y; }
.viewer.is-live:active { cursor: grabbing; }
.net-svg { display: block; width: 100%; height: auto; }
.net-svg:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* The textual description is the primary representation, not a fallback that
   only appears when the canvas fails (WCAG 1.1.1). It stays in the page. */
.viewer-note { font-size: .85rem; color: var(--ink-muted); margin-top: .4rem; }

/* --------------------------------------------------------------- notices */

.notice {
  border-left: 4px solid var(--accent);
  background: var(--accent-bg);
  padding: .85rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.5rem;
}
.notice.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice p:last-child { margin-bottom: 0; }
.notice h2, .notice h3 { margin-top: 0; }

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-muted);
}

.result-count { color: var(--ink-muted); margin-bottom: .75rem; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 2rem 1rem;
  font-size: .92rem;
}
.footer-grid {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: 1fr;
}
.site-footer h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 0 0 .5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .1rem; }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.colophon {
  max-width: 78rem;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-muted);
  font-size: .85rem;
}

/* ------------------------------------------------------------ docs pages */

.doc-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.doc-nav ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.doc-nav li { margin-bottom: .1rem; }
.doc-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.doc-nav a[aria-current="page"] { font-weight: 640; }

.audience {
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.breadcrumb { font-size: .9rem; color: var(--ink-muted); margin-bottom: .5rem; }
.breadcrumb a { color: var(--ink-muted); }

/* ====================================================== 40rem and wider ==
   Room for a second column. Nothing above this line is undone here; these
   rules only add. */

@media (min-width: 40rem) {
  .bar { padding: .55rem 1.25rem; }

  main { padding: 1.75rem 1.25rem 3.5rem; }

  .cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .card { padding: 1.1rem 1.2rem; }

  form.search { padding: 1.1rem 1.2rem; }
  .field-row { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

  /* Term beside value, once there is width for both. `minmax(0, 1fr)` and not
     `1fr`: a bare `1fr` floors at the content's minimum width, which a long
     mono value then pushes past the screen. */
  dl.facts {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .35rem 1rem;
  }
  dl.facts dd { margin-bottom: 0; }

  .record-head {
    gap: 1rem 2rem;
    justify-content: space-between;
  }

  .site-footer { padding: 2.5rem 1.25rem 2rem; }
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 2rem; }
  .colophon { margin-top: 2rem; }

  table { font-size: .94rem; }
}

/* ====================================================== 48rem and wider ==
   The header fits on one line, so the disclosure unfolds and stays unfolded. */

@media (min-width: 48rem) {
  .site-header { position: sticky; top: 0; }

  .nav-toggle { display: none; }

  /* Two ways of saying "this disclosure is permanently open", because
     engines disagree about how a closed <details> hides its contents. Newer
     ones slot the children into ::details-content and hide that with
     content-visibility; older ones simply do not render the children, and a
     display on the child is enough. Both are covered, so the menu is open at
     every width wide enough for it without a line of JavaScript. Each is in
     its own rule: a selector an engine does not understand invalidates the
     whole rule it appears in, and this must not take the other with it. */
  .nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
    overflow: visible;
  }

  .nav-panel {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .primary ul { display: flex; flex-wrap: wrap; gap: .25rem; }

  .account {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: .9rem;
    gap: .5rem;
  }
  .account a { padding: 0 .35rem; }

  /* Off the second row and onto the end of the first. */
  .site-search {
    flex: 0 1 16rem;
    margin-left: auto;
  }
}

/* ====================================================== 62rem and wider ==
   Enough width for a body column and a sidebar beside it. */

@media (min-width: 62rem) {
  main { padding: 2rem 1.25rem 4rem; }

  .record-grid {
    gap: 2rem;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  }

  .doc-layout {
    gap: 2.5rem;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  }

  .viewer[data-xyz] { aspect-ratio: 4 / 3; }

  .site-search { flex-basis: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}