/* phares: a manual. A sidebar of the site's own sections, a column of prose at
   a readable measure, and the page's headings down the right.

   Every colour is a custom property declared three times: once for light, once
   inside `prefers-color-scheme: dark` (guarded so an explicit light choice
   survives it), and once under `[data-theme="dark"]`. Nothing below reads a raw
   colour. */

:root {
  --sidebar: 15.5rem;
  --toc: 13.5rem;
  --measure: 44rem;
  --header: 3.5rem;

  --fg: #1b1f27;
  --muted: #5b6472;
  --bg: #ffffff;
  --raised: #f6f7f9;
  --sunken: #eef0f4;
  --accent: #0b6d8f;
  --accent-soft: #e2f1f7;
  --rule: #e2e5ea;
  --shadow: 0 1px 2px rgb(16 18 29 / 6%), 0 10px 30px rgb(16 18 29 / 8%);

  --sx-comment: #6b7280;
  --sx-string: #0f7b3f;
  --sx-number: #b45309;
  --sx-keyword: #9333ea;
  --sx-function: #0b6d8f;
  --sx-variable: #1f2937;
  --sx-type: #0f766e;
  --sx-punctuation: #6b7280;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg: #e6e9ef;
    --muted: #98a1b0;
    --bg: #0e1116;
    --raised: #161a21;
    --sunken: #1d222b;
    --accent: #63c8e8;
    --accent-soft: #102a35;
    --rule: #242a34;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 35%);

    --sx-comment: #7f8a9a;
    --sx-string: #7fd18b;
    --sx-number: #e8b06a;
    --sx-keyword: #d2a8ff;
    --sx-function: #63c8e8;
    --sx-variable: #dfe3ea;
    --sx-type: #63d5c2;
    --sx-punctuation: #98a1ae;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fg: #e6e9ef;
  --muted: #98a1b0;
  --bg: #0e1116;
  --raised: #161a21;
  --sunken: #1d222b;
  --accent: #63c8e8;
  --accent-soft: #102a35;
  --rule: #242a34;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 35%);

  --sx-comment: #7f8a9a;
  --sx-string: #7fd18b;
  --sx-number: #e8b06a;
  --sx-keyword: #d2a8ff;
  --sx-function: #63c8e8;
  --sx-variable: #dfe3ea;
  --sx-type: #63d5c2;
  --sx-punctuation: #98a1ae;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1.03rem);
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

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

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

::selection {
  background: var(--accent-soft);
  color: var(--fg);
}

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--header);
  padding-inline: 1rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}

/* Off the top of the viewport rather than off to the side, and moved by a
   transform: taking it out of the flow and putting it back reflows the header
   under the reader the moment they tab into the page. */
.skip {
  position: absolute;
  z-index: 20;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--raised);
  color: var(--fg);
  text-decoration: none;
  transform: translateY(-250%);
}

.skip:focus {
  transform: none;
}

.brand {
  font-weight: 650;
  color: var(--fg);
  text-decoration: none;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--raised);
  color: var(--fg);
  cursor: pointer;
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-btn > * {
  display: grid;
  place-items: center;
}

.nav-toggle {
  display: none;
}

.search-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--raised);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.search-trigger:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.search-trigger kbd {
  padding: 0 0.35em;
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

.on-dark {
  display: none;
}

:root[data-theme="dark"] .on-dark {
  display: grid;
}

:root[data-theme="dark"] .on-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-dark {
    display: grid;
  }

  :root:not([data-theme="light"]) .on-light {
    display: none;
  }
}

/* Layout ------------------------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--toc);
  gap: 2rem;
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sidebar,
.toc {
  position: sticky;
  top: var(--header);
  align-self: start;
  max-height: calc(100vh - var(--header));
  overflow-y: auto;
  padding-block: 1.75rem 3rem;
  font-size: 0.92rem;
  scrollbar-width: thin;
}

.content {
  max-width: var(--measure);
  padding-block: 2rem 4rem;
}

/* Sidebar ----------------------------------------------------------------- */

.nav-group {
  margin-bottom: 1.25rem;
}

/* A group inside a group is a subsection of the manual, and has to read as one:
   stepped in, and closer to its parent than to the next top-level group. */
.nav-body .nav-group {
  margin-block: 0.5rem;
  padding-inline-start: 0.7rem;
}

.nav-title {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

summary.nav-title {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

summary.nav-title::-webkit-details-marker {
  display: none;
}

/* The disclosure triangle, drawn rather than borrowed, so it points the way the
   group is: right when closed, down when open. */
summary.nav-title::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

details[open] > summary.nav-title::before {
  transform: rotate(45deg);
}

.nav-body {
  padding-inline-start: 0.35rem;
}

.nav-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  border-inline-start: 1px solid var(--rule);
}

.nav-link {
  display: block;
  padding: 0.2rem 0.7rem;
  margin-inline-start: -1px;
  border-inline-start: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
}

.nav-link:hover {
  color: var(--fg);
  background: var(--raised);
}

.nav-link.active {
  color: var(--accent);
  border-inline-start-color: var(--accent);
  font-weight: 600;
}

/* On-page contents -------------------------------------------------------- */

/* Built into the page rather than by a script, so there is nothing to unhide.
   What is left is what markup cannot decide: a contents list of one entry is
   furniture, and an empty one has nothing to show. */
.toc:has(.toc-list:empty),
.toc:has(.toc-list > ol > li:only-child):not(:has(.toc-list li li)) {
  display: none;
}

.toc-title {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.toc-list {
  display: block;
  border-inline-start: 1px solid var(--rule);
}

.toc-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list a {
  display: block;
  padding: 0.15rem 0.7rem;
  margin-inline-start: -1px;
  border-inline-start: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
}

.toc-list a:hover {
  color: var(--fg);
}

.toc-list a.active {
  color: var(--accent);
  border-inline-start-color: var(--accent);
}

/* A subsection sits under the section above it, however deep it goes. */
.toc-list ol ol a {
  padding-inline-start: 1.4rem;
  font-size: 0.88rem;
}

/* Article ----------------------------------------------------------------- */

h1 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-block: 0 0.75rem;
  text-wrap: balance;
}

h2 {
  margin-block: 2.5rem 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h3 {
  margin-block: 1.8rem 0.4rem;
  font-size: 1.1rem;
}

h2 > a,
h3 > a,
h4 > a {
  color: inherit;
  text-decoration: none;
}

h2 > a:hover::after,
h3 > a:hover::after {
  content: " #";
  color: var(--muted);
}

.lead {
  margin-block: 0 1.75rem;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

p,
ul,
ol {
  margin-block: 0 1.1rem;
}

li {
  margin-block: 0.2rem;
}

.doc img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
}

figure {
  margin-inline: 0;
}

figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.88rem;
}

blockquote {
  margin-inline: 0;
  padding: 0.1rem 1rem;
  border-inline-start: 3px solid var(--rule);
  color: var(--muted);
}

hr {
  margin-block: 2.5rem;
  border: 0;
  border-top: 1px solid var(--rule);
}

kbd {
  padding: 0.1em 0.4em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 0.35em;
  background: var(--raised);
  font-size: 0.85em;
}

mark {
  background: var(--accent-soft);
  color: var(--fg);
  padding-inline: 0.15em;
  border-radius: 0.2em;
}

details:not(.nav-group) {
  margin-block: 1.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  background: var(--raised);
}

details:not(.nav-group) > summary {
  cursor: pointer;
  font-weight: 600;
}

[role="doc-endnotes"] {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}

/* Breadcrumbs and the last-updated line -------------------------------------
   Both sit outside the prose: one above the title, one under the last of it. */

.crumbs {
  margin-bottom: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crumbs li + li::before {
  content: "/";
  margin-inline-end: 0.4rem;
  color: var(--rule);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--accent);
}

/* The line under the prose: where to fix the page, and when it last moved. */
.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.edit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  text-decoration: none;
}

.edit:hover {
  color: var(--accent);
}

/* Callouts, from `#import "@preview/phares:0.1.0": callout`. */

.callout {
  margin-block: 1.5rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--raised);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-title {
  margin: 0 0 0.35rem;
  font-weight: 650;
}

.callout-tip {
  border-inline-start-color: #16a34a;
}

.callout-warning {
  border-inline-start-color: #d97706;
}

.callout-danger {
  border-inline-start-color: #dc2626;
}

/* A one-word label beside a heading or in a table, sharing the callout
   palette so a warning badge and a warning callout are the same colour. */

.badge {
  display: inline-block;
  padding: 0.05em 0.5em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-size: 0.75em;
  font-weight: 650;
  letter-spacing: 0.02em;
  vertical-align: 0.15em;
  white-space: nowrap;
}

.badge-tip {
  border-color: #16a34a;
  color: #16a34a;
}

.badge-warning {
  border-color: #d97706;
  color: #d97706;
}

.badge-danger {
  border-color: #dc2626;
  color: #dc2626;
}

/* A numbered procedure. The numbers are the list's own, drawn on a rail so the
   eye can follow a long one down the page. */

.steps ol {
  list-style: none;
  margin: 1.5rem 0;
  padding-inline-start: 2.25rem;
  border-inline-start: 1px solid var(--rule);
  counter-reset: step;
}

.steps li {
  position: relative;
  margin-block: 0 1.5rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: -3.05rem;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.steps li > :last-child {
  margin-bottom: 0;
}

/* A grid of links, for a section's own index page. */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.85rem;
  margin-block: 1.5rem;
}

.doc-card {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  background: var(--raised);
  color: inherit;
  text-decoration: none;
}

a.doc-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.doc-card-title {
  font-weight: 650;
}

a.doc-card:hover .doc-card-title {
  color: var(--accent);
}

.doc-card-body {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.doc-card-body > :last-child {
  margin-bottom: 0;
}

/* Alternatives a reader picks between. Without script every pane is visible,
   one after another, so nothing is hidden behind a control that is not there;
   the strip below only exists once `theme.js` has built it. */

.tabs {
  margin-block: 1.5rem;
}

.tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rule);
}

.tab-button {
  padding: 0.4rem 0.8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.tab-button:hover {
  color: var(--fg);
}

.tab-button[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tabs[data-ready] .tab {
  padding-top: 0.85rem;
}

.tabs[data-ready] .tab[hidden] {
  display: none;
}

.tab > :last-child {
  margin-bottom: 0;
}

/* Code -------------------------------------------------------------------- */

pre {
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  background: var(--raised);
  overflow-x: auto;
  line-height: 1.55;
}

/* The wrapper `theme.js` puts around a code block, so the copy button can sit
   in its corner without scrolling away with the code. */
.codeblock {
  position: relative;
  margin-block: 0 1.15rem;
}

.codeblock pre {
  margin: 0;
}

.copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.codeblock:hover .copy,
.copy:focus-visible,
.copy.copied {
  opacity: 1;
}

.copy:hover {
  color: var(--fg);
  border-color: var(--accent);
}

.copy.copied {
  color: var(--accent);
  border-color: var(--accent);
}

/* A pointer is what reveals the button; without one it is always there, and the
   block needs room for it: it cannot appear only when it would not be in the
   way. */
@media (hover: none) {
  .copy {
    opacity: 1;
  }

  .codeblock pre {
    padding-inline-end: 4rem;
  }
}

code {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  /* Monospace reads larger at a given size, so match the x-height instead of
     shrinking the text. */
  font-size: 1em;
  font-size-adjust: ex-height 0.53;
}

:not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: 0.35em;
  background: var(--sunken);
}

.sx-comment {
  color: var(--sx-comment);
  font-style: italic;
}
.sx-string, .sx-escape { color: var(--sx-string); }
.sx-number, .sx-constant { color: var(--sx-number); }
.sx-keyword, .sx-operator { color: var(--sx-keyword); }
.sx-function, .sx-tag, .sx-heading, .sx-label { color: var(--sx-function); }
.sx-variable, .sx-parameter, .sx-property, .sx-attribute { color: var(--sx-variable); }
.sx-type, .sx-namespace { color: var(--sx-type); }
.sx-punctuation { color: var(--sx-punctuation); }
.sx-invalid { color: var(--sx-keyword); text-decoration: underline wavy; }
.sx-strong { font-weight: 700; }
.sx-emph { font-style: italic; }
.sx-link { text-decoration: underline; }
.sx-raw { font-style: normal; }

/* Tables ------------------------------------------------------------------ */

/* A table wider than the column scrolls rather than crushing its cells. The
   block box caps at the column while its contents keep their natural width,
   which is what makes the overflow scrollable without a wrapper element the
   theme has no way to add. */
table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: 1.5rem;
  font-size: 0.95em;
}

th,
td {
  padding: 0.5rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

thead th {
  border-bottom: 2px solid var(--rule);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* Listings, chips, pager -------------------------------------------------- */

.listing {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.entry-title {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}

.entry-title:hover {
  color: var(--accent);
}

.count,
.entry-summary {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 2rem 0;
}

.chip {
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.pager a {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  color: var(--fg);
  text-decoration: none;
}

.pager a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.pager .next {
  text-align: right;
}

.pager-label {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pager-title {
  font-weight: 600;
  line-height: 1.35;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: 88rem;
  margin-inline: auto;
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.88rem;
}

/* The search palette ------------------------------------------------------ */

/* `generate { search { ui } }` injects neutral defaults at runtime, after this
   sheet, so every override here carries a second class to outrank them. */

.bd-palette .bd-scrim {
  background: rgb(9 11 15 / 55%);
  backdrop-filter: blur(2px);
}

.bd-palette .bd-panel {
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow);
}

.bd-palette .bd-input {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}

.bd-palette .bd-list {
  padding: 0.4rem;
}

.bd-palette .bd-hit > a {
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
}

.bd-palette .bd-hit.is-active > a {
  background: var(--accent-soft);
  color: var(--fg);
}

.bd-palette .bd-section {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bd-palette .bd-snippet {
  color: var(--muted);
}

.bd-palette mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

/* Not found --------------------------------------------------------------- */

.notfound-code {
  margin: 0;
  color: var(--rule);
  font-size: clamp(4rem, 3rem + 8vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* The palette trigger is the way back from here, so it reads as an action
   rather than as the header's quiet affordance. */
.notfound .search-trigger {
  margin-top: 2rem;
  width: auto;
  padding-inline: 1rem;
}

/* Narrow screens ----------------------------------------------------------
   The contents column goes when the prose would drop below a readable measure,
   not at a round number: 1280px is the commonest desktop width there is, and a
   manual that hides its own contents there hides them from most readers. */

@media (max-width: 70rem) {
  .layout {
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
  }

  .toc {
    display: none;
  }
}

@media (max-width: 55rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-toggle {
    display: grid;
  }

  .search-label {
    display: none;
  }

  /* The sidebar becomes a drawer the header button opens. Hidden rather than
     narrowed, so the prose keeps the full width. */
  .sidebar {
    display: none;
    position: static;
    max-height: none;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--rule);
  }

  :root[data-nav="open"] .sidebar {
    display: block;
  }

  .pager {
    grid-template-columns: 1fr;
  }

  .pager .next {
    text-align: left;
  }
}

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

@media print {
  .site-header,
  .sidebar,
  .toc,
  .pager,
  .site-footer {
    display: none;
  }

  .layout {
    display: block;
  }

  body {
    color: #000;
    background: #fff;
  }
}