/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* vimma-site: one stylesheet. A terminal in Vimma's own colours, taken from its logo: the mint
   mark on its near-black tile, with an off-white wordmark. A light variant serves light systems.
   Every text colour pair is checked for WCAG AA by `npm run check`, which reads the two palette
   blocks below by their marker comments. (The browser itself ships Tokyo Night; that is the
   browser's theme, not the site's, see docs/theming.) */

/* palette:dark — sampled from the logo (vimma-mark.png, vimma-logo-wide.jpg): the tile #0a0f13,
   the mint #1bf587, the wordmark #fcfbf7. --accent-2 is the logo's shaded mint #2ba564. */
:root {
  color-scheme: dark light;
  --bg: #0a0f12;
  --bg-dark: #070b0d;
  --bg-darker: #040708;
  --bg-light: #111a1b;
  --selection: #163327;
  --border: #2a3d36;
  --fg: #c4cec8;
  --fg-muted: #849690;
  --fg-bright: #fcfbf7;
  --accent: #1bf587;
  --accent-2: #2ba564;
  --mint: #1bf587;
  --green: #8eeeb8;
  --yellow: #f2c94c;
  --red: #ff6b6b;
  --badge-fg: #04120a;
  --hint-fg: #1a1300;
}

/* palette:light — the logo's off-white for ground. The mint is too pale for text on it, so text
   and links take a deep green from the same hue; the bright mint stays for decoration only. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f4ef;
    --bg-dark: #eae9e2;
    --bg-darker: #e1e0d8;
    --bg-light: #fcfbf7;
    --selection: #c6efd8;
    --border: #a3b0a9;
    --fg: #1d2924;
    --fg-muted: #4b5a53;
    --fg-bright: #0a0f12;
    --accent: #056a39;
    --accent-2: #0b5c4e;
    --mint: #1bf587;
    --green: #2a5a40;
    --yellow: #7a5200;
    --red: #a1232d;
    --badge-fg: #fcfbf7;
    --hint-fg: #fcfbf7;
  }
}
/* end palette */

:root {
  --font: ui-monospace, "JetBrains Mono", "CaskaydiaMono Nerd Font", "Cascadia Mono",
    "SF Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
  --measure: 104ch;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 480px) {
  :root {
    font-size: 14px;
  }
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mint) 55%, transparent);
  text-underline-offset: 0.2em;
}

.docs-body a:visited,
main p a:visited {
  color: var(--accent-2);
}

a:hover {
  text-decoration-color: currentColor;
}

/* on the light ground the mint is decoration only: a full-strength underline under deep green */
@media (prefers-color-scheme: light) {
  a:not(:hover) {
    text-decoration-color: var(--mint);
    text-decoration-thickness: 2px;
  }
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

code,
kbd,
pre,
input,
button {
  font: inherit;
}

kbd {
  display: inline-block;
  padding: 0 0.6ch;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--bg-light);
  color: var(--fg-bright);
  line-height: 1.4;
  white-space: nowrap;
}

code {
  color: var(--green);
}

pre {
  margin: 0;
  overflow-x: auto;
}

h1,
h2,
h3 {
  color: var(--fg-bright);
  line-height: 1.3;
  font-weight: 700;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}

/* markdown-ish heading marks, as Neovim shows a .md file; not read out */
.md h1::before {
  content: "# " / "";
  color: var(--accent);
}

.md h2::before {
  content: "## " / "";
  color: var(--accent);
}

.md h3::before {
  content: "### " / "";
  color: var(--accent);
}

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

ul,
ol {
  padding-left: 3ch;
}

ul {
  list-style: "- ";
}

li::marker {
  color: var(--fg-muted);
}

li + li {
  margin-top: 0.3rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.muted {
  color: var(--fg-muted);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 1rem;
  }
}

/* --- skip link -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 20;
  padding: 0.25rem 1ch;
  background: var(--yellow);
  color: var(--hint-fg);
  font-weight: 700;
}

.skip:focus {
  top: 0.5rem;
}

/* --- the prompt header ------------------------------------------------------------------ */

.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
}

.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2ch;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.prompt {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt .cwd {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.prompt .sigil {
  color: var(--green);
}

.prompt .cmd {
  color: var(--fg-bright);
}

.cursor {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  margin-left: 0.15ch;
  vertical-align: -0.2em;
  background: var(--mint);
  animation: blink 1.1s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* tmux's window list: 1:home 2:keys* … */
.tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs li + li {
  margin-top: 0;
}

.tabs a {
  color: var(--fg);
  text-decoration: none;
  padding: 0.1rem 0.5ch;
}

.tabs a .n {
  color: var(--fg-muted);
}

.tabs a:hover {
  color: var(--fg-bright);
  background: var(--selection);
}

.tabs a[aria-current="page"] {
  background: var(--accent);
  color: var(--badge-fg);
  font-weight: 700;
}

.tabs a[aria-current="page"] .n {
  color: inherit;
}

/* --- page body -------------------------------------------------------------------------- */

main.wrap {
  display: block;
  padding-top: 2rem;
}

main:focus {
  outline: none;
}

.echo {
  margin: 0 0 0.5rem;
  color: var(--fg-muted);
}

.echo .sigil {
  color: var(--green);
}

/* boxes with the title set into the top border, as in a TUI */
.box {
  position: relative;
  margin: 2.25rem 0 1.5rem;
  padding: 1.4rem 2ch 1rem;
  border: 1px solid var(--border);
}

.box > .box-title {
  position: absolute;
  top: 0;
  left: 1.5ch;
  margin: 0;
  padding: 0 1ch;
  transform: translateY(-50%);
  background: var(--bg);
  color: var(--accent);
  font-size: 1rem;
}

.box > .box-title::before,
.box > .box-title::after {
  content: "─ " / "";
  color: var(--border);
}

.box > .box-title::after {
  content: " ─" / "";
}

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

.note {
  border-color: var(--yellow);
}

.note > .box-title {
  color: var(--yellow);
}

/* --- home ------------------------------------------------------------------------------- */

.hero-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem 3ch;
}

.logo img {
  display: block;
  width: 168px;
  height: 168px;
  /* the logo is transparent; its white wordmark needs a dark tile on the light palette, as on
     Vimma's start page (light-dark() follows the used color-scheme) */
  background: light-dark(#0a0f13, transparent);
  border-radius: 8%;
}

.pitch {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--fg-bright);
}

.pitch + p {
  color: var(--fg-muted);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cta li + li {
  margin-top: 0;
}

.cta a {
  display: inline-block;
  padding: 0.2rem 1ch;
  border: 1px solid var(--accent);
  text-decoration: none;
}

.cta a:hover {
  background: var(--accent);
  color: var(--badge-fg);
}

.cta a::before {
  content: "→ " / "";
}

@media (max-width: 640px) {
  .hero-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .logo img {
    width: 120px;
    height: 120px;
  }

  .pitch {
    font-size: 1.1rem;
  }
}

/* the terminal session */
.term {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5ch 1rem;
  background: var(--bg-darker);
}

.term-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2ch;
  margin-bottom: 0.75rem;
  color: var(--fg-muted);
}

.term-bar button {
  padding: 0 1ch;
  border: 1px solid var(--border);
  background: var(--bg-light);
  color: var(--fg-bright);
  cursor: pointer;
}

.term-bar button:hover {
  border-color: var(--accent);
}

/* the promo video: the 16:9 cut, or the vertical cut on a narrow portrait screen. The other
   one is display: none, and with preload="none" it downloads nothing until it is played. */
.demo {
  margin: 0;
}

.demo video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  background: var(--bg-dark);
}

.demo .demo-wide {
  width: 100%;
}

.demo .demo-tall {
  display: none;
  /* a phone screen's height at most, so the controls stay in view */
  width: min(100%, calc(85svh * 9 / 16));
  margin: 0 auto;
}

.demo figcaption {
  margin-top: 0.75rem;
  color: var(--fg-muted);
}

@media (max-width: 640px) and (orientation: portrait) {
  .demo .demo-wide {
    display: none;
  }

  .demo .demo-tall {
    display: block;
  }
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

.term-keys {
  min-height: 1.6em;
  margin-top: 0.75rem;
  color: var(--fg-muted);
}

.term-keys .caret {
  display: inline-block;
  width: 1ch;
  height: 1.1em;
  margin-left: 0.5ch;
  vertical-align: -0.2em;
  background: var(--mint);
}

.steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  color: var(--fg-muted);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3ch 1fr;
}

.steps li {
  margin-bottom: 0.45rem;
}

.steps li::before {
  content: counter(step) "." / "";
  color: var(--fg-muted);
}

.steps li.current {
  color: var(--fg-bright);
}

.steps li.current::before {
  content: "▸" / "";
  color: var(--accent);
}

@media (min-width: 760px) {
  /* the steps in two columns under the screenshot */
  .term-body .steps {
    columns: 2;
    column-gap: 3ch;
  }

  .term-body .steps li {
    break-inside: avoid;
  }
}

/* feature grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30ch), 1fr));
  gap: 1.25rem 2ch;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.grid li + li {
  margin-top: 0;
}

.card {
  margin: 0;
  padding: 1.25rem 1.5ch 0.9rem;
  border: 1px solid var(--border);
  background: var(--bg);
}

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

.card h3 {
  margin: 0 0 0.4rem;
  color: var(--fg-bright);
}

.card .k {
  margin: 0 0 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1ch;
}

.card p:last-child {
  margin: 0;
  color: var(--fg);
}

.checklist {
  padding: 0;
  list-style: none;
}

.checklist .mark {
  color: var(--green);
}

.checklist .mark.part {
  color: var(--yellow);
}

.checklist .mark.todo {
  color: var(--fg-muted);
}

blockquote {
  margin: 0 0 1rem;
  padding-left: 2ch;
  border-left: 2px solid var(--green);
  color: var(--fg-bright);
}

/* --- keys ------------------------------------------------------------------------------- */

.filter {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 2ch;
  margin: 1.5rem 0 0;
  padding: 0.6rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.filter label {
  color: var(--accent);
  font-weight: 700;
}

.filter input {
  flex: 1 1 24ch;
  min-width: 0;
  padding: 0.3rem 1ch;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--fg-bright);
}

.filter input::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

.filter input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}

.filter .count {
  color: var(--fg-muted);
}

.keys-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* the same columns in every section */
.keys-table th:nth-child(1) {
  width: 40%;
}

.keys-table th:nth-child(2) {
  width: 38%;
}

.keys-table td {
  overflow-wrap: anywhere;
}

.keys-table caption {
  text-align: left;
}

.keys-table th {
  text-align: left;
  font-weight: 400;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  padding: 0.25rem 1ch;
}

.keys-table td {
  vertical-align: top;
  padding: 0.45rem 1ch;
  border-bottom: 1px dashed var(--selection);
}

.keys-table tr:hover td {
  background: var(--bg-light);
}

.keys-table td:first-child {
  color: var(--fg-bright);
}

.keys-table .bindings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5ch;
}

.binding {
  white-space: nowrap;
}

.binding + .binding::before {
  content: "or ";
  color: var(--fg-muted);
}

.binding .mode {
  margin-left: 0.5ch;
  color: var(--accent-2);
  font-size: 0.85em;
}

.keys-table .name {
  color: var(--fg-muted);
  font-size: 0.9em;
}

.nokey {
  color: var(--fg-muted);
}

.keys-section h2 {
  margin-top: 2rem;
}

.keys-section h2 .n {
  color: var(--fg-muted);
  font-weight: 400;
  font-size: 0.85em;
}

@media (max-width: 640px) {
  .keys-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .keys-table,
  .keys-table tbody,
  .keys-table tr,
  .keys-table td {
    display: block;
  }

  .keys-table tr {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--selection);
  }

  .keys-table tr[hidden] {
    display: none;
  }

  .keys-table td {
    padding: 0.1rem 0;
    border: 0;
  }
}

/* --- install / about -------------------------------------------------------------------- */

.code {
  margin: 0 0 1rem;
  padding: 0.9rem 2ch;
  border: 1px solid var(--border);
  border-left: 2px solid var(--green);
  background: var(--bg-darker);
  color: var(--fg-bright);
  line-height: 1.5;
}

.code .c {
  color: var(--fg-muted);
}

.code .p {
  color: var(--green);
  user-select: none;
}

dl.faq dt {
  margin-top: 1.75rem;
  color: var(--fg-bright);
  font-weight: 700;
}

dl.faq dt::before {
  content: "? " / "";
  color: var(--accent);
}

dl.faq dd {
  margin: 0.4rem 0 0;
  padding-left: 2ch;
}

.table-wrap {
  overflow-x: auto;
}

table.plain {
  border-collapse: collapse;
  margin: 0 0 1rem;
}

table.plain th,
table.plain td {
  text-align: left;
  vertical-align: top;
  padding: 0.3rem 2ch 0.3rem 0;
  border-bottom: 1px dashed var(--selection);
}

table.plain th {
  color: var(--fg-muted);
  font-weight: 400;
}

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

.wrap.wide {
  max-width: 172ch;
}

.docs {
  display: grid;
  grid-template-columns: 26ch minmax(0, 1fr) 26ch;
  grid-template-areas: "nav body toc";
  gap: 0 4ch;
  align-items: start;
}

.docs-nav {
  grid-area: nav;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-right: 1ch;
  border-right: 1px solid var(--border);
}

.docs-body {
  grid-area: body;
  min-width: 0;
  max-width: 92ch;
}

.docs-body:focus {
  outline: none;
}

.toc {
  grid-area: toc;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-left: 1.5ch;
  border-left: 1px solid var(--border);
  font-size: 0.9rem;
}

.toc-title,
.docs-nav .group {
  margin: 0 0 0.4rem;
  color: var(--fg-muted);
}

.toc-title {
  list-style: none;
}

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

.toc-title::before {
  content: "─ " / "";
  color: var(--border);
}

@media (max-width: 900px) {
  .toc-title {
    cursor: pointer;
    color: var(--accent);
  }

  .toc-title::before {
    content: "▸ " / "";
    color: var(--accent);
  }

  .toc details[open] .toc-title::before {
    content: "▾ " / "";
  }

  .toc details:not([open]) .toc-title {
    margin: 0;
  }
}

.toc ul,
.docs-nav ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.toc li + li,
.docs-nav li + li {
  margin-top: 0.15rem;
}

.toc a,
.docs-nav a {
  display: block;
  color: var(--fg);
  text-decoration: none;
  padding: 0.05rem 0.5ch;
}

.toc .l3 a {
  padding-left: 2.5ch;
  color: var(--fg-muted);
}

.toc a:hover,
.docs-nav a:hover {
  color: var(--fg-bright);
  background: var(--selection);
}

.docs-nav .n {
  color: var(--fg-muted);
}

.docs-nav a[aria-current="page"] {
  background: var(--accent);
  color: var(--badge-fg);
  font-weight: 700;
}

.docs-nav a[aria-current="page"] .n {
  color: inherit;
}

.docs-nav .group {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  text-transform: lowercase;
}

.docs-nav .group::before {
  content: "# " / "";
  color: var(--accent);
}

.docs-pages > summary {
  display: none;
}

.docs-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1ch;
  align-items: center;
  margin-bottom: 0.75rem;
}

.docs-search[hidden] {
  display: none;
}

.docs-search label {
  color: var(--accent);
  font-weight: 700;
}

.docs-search input {
  min-width: 0;
  padding: 0.2rem 1ch;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--fg-bright);
}

.docs-search input::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

.docs-search input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}

.docs-search .status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.docs-search .status:empty {
  display: none;
}

.docs-search .results {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--bg-dark);
}

.docs-search .results a {
  display: block;
  padding: 0.35rem 1ch;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px dashed var(--selection);
}

.docs-search .results a:hover,
.docs-search .results a:focus {
  background: var(--selection);
}

.docs-search .where,
.docs-search .snip {
  display: block;
  color: var(--fg-muted);
  font-size: 0.8rem;
}

.docs-search .head {
  display: block;
  color: var(--accent);
}

.crumb {
  margin: 0 0 1rem;
  color: var(--fg-muted);
}

.crumb .sigil {
  color: var(--accent);
}

.docs-body h1 {
  margin-top: 0;
}

.docs-body h2 {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--selection);
}

.docs-body .box h2 {
  border-top: 0;
  padding-top: 0;
}

.docs-body .intro,
.docs-body .lead {
  color: var(--fg-bright);
  font-size: 1.05rem;
}

.docs-body pre.code code {
  color: inherit;
}

.docs-body td code,
.docs-body li code,
.docs-body p code {
  overflow-wrap: anywhere;
}

.docs-body table.plain {
  width: 100%;
}

.docs-body .ref {
  color: var(--fg-muted);
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.docs-body .keys-section h3 {
  margin-top: 1.25rem;
}

.docs-body .keys-table th:nth-child(1) {
  width: 42%;
}

.docs-body .keys-table th:nth-child(2) {
  width: 36%;
}

.limit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2ch;
  padding: 0;
  list-style: none;
}

.limit-links li + li {
  margin-top: 0;
}

.limit-links a::before {
  content: "→ " / "";
}

.walk li {
  margin-bottom: 0.4rem;
}

.paths {
  margin-bottom: 1rem;
}

.paths .card p:last-child {
  color: var(--fg);
}

.source {
  margin-top: 2.5rem;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

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

.pager a {
  display: block;
  padding: 0.6rem 1.5ch;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg-bright);
}

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

.pager a[rel="next"] {
  text-align: right;
}

.pager .dir {
  display: block;
  color: var(--fg-muted);
  font-size: 0.85rem;
}

@media (max-width: 1280px) {
  .docs {
    grid-template-columns: 26ch minmax(0, 1fr);
    grid-template-areas:
      "nav toc"
      "nav body";
  }

  .toc {
    position: static;
    max-height: none;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1.5ch;
    border: 1px solid var(--border);
  }

  .toc ul {
    columns: 2 24ch;
    column-gap: 3ch;
    margin: 0;
  }
}

@media (max-width: 900px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "nav"
      "toc"
      "body";
  }

  .docs-nav {
    position: static;
    max-height: none;
    margin-bottom: 1rem;
    padding: 0 0 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .docs-pages > summary {
    display: list-item;
    cursor: pointer;
    color: var(--accent);
    padding: 0.2rem 0;
  }

  .docs-pages[open] > summary {
    margin-bottom: 0.5rem;
  }

  .toc ul {
    columns: 1;
  }

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

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

.site-foot {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  padding: 1.25rem 0 1rem;
  color: var(--fg-muted);
}

.site-foot p {
  margin: 0 0 0.4rem;
}

/* --- where am I: page position and the keys hint, in the header ----------------------- */

.whereami {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2ch;
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

.keyhint {
  padding: 0 1ch;
  border: 1px solid var(--border);
  background: var(--bg-light);
  color: var(--fg-bright);
  cursor: pointer;
}

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

.keyhint kbd {
  padding: 0 0.4ch;
}

html.keys-off .keyhint-on,
html:not(.keys-off) .keyhint-off,
html.js .nojs-keys {
  display: none;
}

/* --- the ? overlay ---------------------------------------------------------------------- */

dialog {
  width: min(52ch, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 1.5rem 2ch 1.25rem;
  border: 1px solid var(--accent-2);
  background: var(--bg-dark);
  color: var(--fg);
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
}

dialog h2 {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 1rem;
}

dialog table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

dialog th {
  text-align: left;
  font-weight: 400;
  padding: 0.2rem 2ch 0.2rem 0;
  white-space: nowrap;
}

dialog td {
  padding: 0.2rem 0;
}

dialog label {
  display: flex;
  gap: 1ch;
  align-items: center;
  margin-bottom: 0.75rem;
}

dialog input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
}

dialog .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2ch;
  flex-wrap: wrap;
  margin: 0;
  color: var(--fg-muted);
}

dialog button {
  padding: 0.1rem 1ch;
  border: 1px solid var(--border);
  background: var(--bg-light);
  color: var(--fg-bright);
  cursor: pointer;
}

/* --- motion ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .term-keys .caret {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

@media print {
  .topbar nav,
  .skip,
  .term-bar button {
    display: none;
  }
}

/* key cells in the guide's tables stay on one line where they fit */
.docs-body td:first-child code {
  white-space: nowrap;
}

pre,
.table-wrap,
.docs-nav,
.toc {
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

.docs-body h2.details-head {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--border);
  color: var(--fg-muted);
}

.details-note {
  color: var(--fg-muted);
}

.docs-body .steps-list li + li {
  margin-top: 0.4rem;
}

.define {
  margin: 0 0 0.5rem;
  color: var(--fg-muted);
}

.define dfn {
  font-style: normal;
  font-weight: 700;
  color: var(--green);
}

.define .pos {
  font-style: italic;
}