/* zeughaus.doodleshnookie.net: the Zeughaus Manual, read in a terminal.
 * One monospace cell grid; the whole palette is the 16-colour scheme of the
 * editor's theme (data/schemes), set as custom properties by boot.js. The
 * defaults below are the editor's own defaults: Dark, or Light when the system
 * prefers light, as zeughaus-theme picks them. */

@font-face {
  font-family: "Comic Shanns Mono";
  src: url("fonts/comic-shanns-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comic Shanns Mono";
  src: url("fonts/comic-shanns-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Builtin Dark (data/schemes/Dark.toml) */
  --bg: #000000;
  --fg: #bbbbbb;
  --cursor: #bbbbbb;
  --sel-bg: #b5d5ff;
  --sel-fg: #000000;
  --c0: #000000; --c1: #bb0000; --c2: #00bb00; --c3: #bbbb00;
  --c4: #0d0dc8; --c5: #bb00bb; --c6: #00bbbb; --c7: #bbbbbb;
  --c8: #555555; --c9: #ff5555; --c10: #55ff55; --c11: #ffff55;
  --c12: #5555ff; --c13: #ff55ff; --c14: #55ffff; --c15: #ffffff;
  color-scheme: dark;

  /* The cell. Every block edge lands on a line of the grid. */
  --lh: 1.5rem;
  --gut: 3ch;
  --ind: 7ch;
  --tp: 7ch;
  --manw: 80ch;

  /* Roles derived from the scheme, the way a theme loaded from a file derives
     its chrome. Colour used as text is mixed toward the foreground so it holds
     contrast on light schemes too. */
  --dim: color-mix(in oklab, var(--fg) 74%, var(--bg));
  --rule: color-mix(in oklab, var(--fg) 30%, var(--bg));
  /* Chrome mixes in sRGB: an oklab mix toward pure black collapses to it. */
  --chrome: color-mix(in srgb, var(--fg) 12%, var(--bg));
  --chrome-2: color-mix(in srgb, var(--fg) 21%, var(--bg));
  --t-red: color-mix(in oklab, var(--c1) 72%, var(--fg));
  --t-green: color-mix(in oklab, var(--c2) 72%, var(--fg));
  --t-yellow: color-mix(in oklab, var(--c3) 72%, var(--fg));
  --t-cyan: color-mix(in oklab, var(--c6) 70%, var(--fg));
  --link: var(--t-cyan);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Builtin Light (data/schemes/Light.toml) */
    --bg: #ffffff;
    --fg: #000000;
    --cursor: #000000;
    --sel-bg: #b5d5ff;
    --sel-fg: #000000;
    --c0: #000000; --c1: #bb0000; --c2: #00bb00; --c3: #bbbb00;
    --c4: #0000bb; --c5: #bb00bb; --c6: #00bbbb; --c7: #bbbbbb;
    --c8: #555555; --c9: #ff5555; --c10: #2fd92f; --c11: #bfbf15;
    --c12: #5555ff; --c13: #ff55ff; --c14: #22cccc; --c15: #ffffff;
    color-scheme: light;
  }
}

:root[data-mode="light"] { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; }

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

html {
  font-size: 100%;
  background: var(--bg);
  color: var(--fg);
  scrollbar-color: var(--rule) var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 100rem) { html { font-size: 106.25%; } }
@media (max-width: 40rem) {
  html { font-size: 87.5%; }
  :root { --gut: 1ch; --ind: 3ch; --tp: 3ch; }
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: calc(var(--lh) * 2);
  font-family: "Comic Shanns Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--lh);
  font-kerning: none;
  font-variant-ligatures: none;
  caret-color: var(--cursor);
}

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

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

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

.skip {
  position: absolute;
  left: var(--gut);
  top: 0;
  z-index: 10;
  padding: 0 1ch;
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Text: man(7) grammar ---------- */

h1, h2, h3, h4, p, ul, ol, dl, dd, pre, figure, table, blockquote { margin: 0; }

b, strong, code, h2, h3, h4, dt code { font-weight: 700; }
code { font-family: inherit; font-size: 1em; }
em, i:not([aria-hidden]) {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
q { quotes: '"' '"'; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklab, var(--link) 55%, var(--bg));
}
a:hover {
  background: var(--link);
  color: var(--bg);
  text-decoration: none;
}
a code, a b { color: inherit; }

kbd {
  font-family: inherit;
  font-size: 1em;
  padding: 0 0.5ch;
  background: var(--chrome-2);
  color: var(--fg);
}

.man {
  display: block;
  padding: 0 var(--gut);
}
.man > * { max-width: var(--manw); }

.man h2 {
  margin-top: var(--lh);
  font-size: 1rem;
  line-height: var(--lh);
  letter-spacing: 0;
  scroll-margin-top: var(--lh);
}
.man h2:first-child { margin-top: 0; }
.man h3 {
  margin: var(--lh) 0 0 3ch;
  font-size: 1rem;
  line-height: var(--lh);
  scroll-margin-top: var(--lh);
}
.man h4 { margin: var(--lh) 0 0 var(--ind); font-size: 1rem; }

.man p,
.man ul,
.man ol,
.man blockquote,
.man .footnote-definition {
  margin: 0 0 0 var(--ind);
}
.man h2 + p, .man h3 + p, .man h2 + ul, .man h3 + ul, .man h2 + dl, .man h3 + dl,
.man h2 + ol, .man h3 + ol, .man h2 + pre, .man h3 + pre, .man h2 + table, .man h3 + table,
.man h2 + .diagram, .man h3 + .diagram, .man h2 + .dur, .man h3 + .dur { margin-top: 0; }
.man p + p,
.man p + ul, .man p + ol, .man ul + p, .man ol + p,
.man p + dl, .man dl + p,
.man p + pre, .man pre + p, .man pre + pre,
.man p + table, .man table + p,
.man p + .diagram, .man .diagram + p,
.man p + .dur, .man .dur + p,
.man dl + dl, .man ul + dl, .man dl + ul,
.man table + h3, .man ul + pre, .man pre + ul,
.man .diagram + pre, .man pre + .diagram { margin-top: var(--lh); }

.man ul, .man ol { padding: 0 0 0 2ch; }
.man ul { list-style: none; }
.man ul > li { position: relative; }
.man ul > li::before {
  content: "-";
  position: absolute;
  left: -2ch;
  color: var(--dim);
}
.man ol { padding-left: 3ch; }
.man ol > li::marker { color: var(--dim); }
.man li > ul, .man li > ol { margin-left: 0; }

.man blockquote { padding-left: 2ch; color: var(--dim); box-shadow: inset 1px 0 0 var(--rule); }

/* Tagged paragraphs (.TP): tag at the indent, body one tab further in. */
.man dl { margin: 0 0 0 var(--ind); }
.man dt { font-weight: 700; }
.man dt .catalog__name, .man dt .catalog__cat, .man dt .keys__mac { font-weight: 400; }
.man dt:not(:first-child) { margin-top: var(--lh); }
.man dd { margin: 0 0 0 var(--tp); }
.man dd > p { margin: 0; }
.man dd > p + p, .man dd > p + pre, .man dd > pre + p, .man dd > p + ul, .man dd > ul + p { margin-top: var(--lh); }
.man dd > ul, .man dd > pre { margin-left: 0; }

/* Examples. Plain text, indented; a light panel says "copyable". */
.man pre {
  position: relative;
  margin-left: var(--ind);
  padding: calc(var(--lh) / 2) 8ch calc(var(--lh) / 2) 2ch;
  background: var(--chrome);
  color: var(--fg);
  font: inherit;
  line-height: var(--lh);
  overflow-x: auto;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A tree or table drawn with box-drawing characters keeps its columns and scrolls. */
.man pre.pre--grid {
  white-space: pre;
  overflow-wrap: normal;
}
.man pre code { font-weight: 400; }
/* Examples get a wrapper from site.js so the copy key stays put while a
   long line scrolls. */
.man .example { position: relative; margin: var(--lh) 0 0 var(--ind); }
.man h2 + .example, .man h3 + .example, .man dd > .example:first-child { margin-top: 0; }
.man dd > .example { margin-left: 0; }
.man .example + * { margin-top: var(--lh); }
.man .example > pre { margin: 0; }
.copy {
  position: absolute;
  top: calc(var(--lh) / 2);
  right: 1ch;
  font: inherit;
  line-height: var(--lh);
  padding: 0 1ch;
  border: 0;
  background: var(--chrome-2);
  color: var(--fg);
  cursor: pointer;
}
.copy:hover { background: var(--fg); color: var(--bg); }
.copy[data-done] { color: var(--t-green); }

/* tbl(1) output */
.man table {
  margin-left: var(--ind);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-x: auto;
  max-width: calc(var(--manw) - var(--ind));
}
.man th, .man td {
  padding: 0 2ch 0 0;
  text-align: left;
  vertical-align: top;
  line-height: var(--lh);
}
.man thead th { font-weight: 700; box-shadow: inset 0 -1px 0 var(--rule); }
.man tbody tr + tr td { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--rule) 55%, var(--bg)); }

.man hr { border: 0; height: var(--lh); margin: 0; }

/* Box-drawing diagrams: real text. The lines are set at the face's own
   height (ascent + descent) so vertical strokes join, as a terminal's own
   box-drawing renderer joins them; the block rounds up to whole grid lines. */
.diagram { margin-left: var(--ind); }
.diagram--narrow { display: none; }
@media (max-width: 40rem) {
  .diagram--wide { display: none; }
  .diagram--narrow { display: block; }
}
.diagram pre {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--fg);
  line-height: 1.2;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
}
@supports (height: calc-size(auto, size)) {
  .diagram { height: calc-size(auto, round(up, size, var(--lh))); }
}

/* Timing constants drawn to scale; the full track is ten seconds. */
.dur {
  display: grid;
  grid-template-columns: minmax(12ch, 30ch) minmax(0, 1fr) 8ch;
  gap: 0 2ch;
  align-items: center;
  margin-left: var(--ind);
  max-width: calc(var(--manw) - var(--ind));
  line-height: var(--lh);
}
.dur__label { color: var(--fg); }
.dur__track {
  position: relative;
  height: var(--lh);
  background:
    linear-gradient(to right, var(--rule) 0 1px, transparent 1px) 0 50% / 10% 30% repeat-x,
    linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat;
}
.dur__bar {
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: max(2px, calc(var(--ms) / 10000 * 100%));
  background: var(--t-green);
}
.dur__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
.dur + .dur { margin-top: 0; }
.dur-scale { color: var(--dim); }

/* ---------- Running head, footer, prompt ---------- */

/* Line 1: man's running head, page name at both ends and the book in the
   middle. Line 2: the manual's pages. */
.head {
  padding: var(--lh) var(--gut) 0;
  margin-bottom: var(--lh);
  line-height: var(--lh);
}
.head__run {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 2ch;
  margin: 0;
}
.head__ref {
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
}
.head__ref--end { text-align: right; }
.head__book {
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.head__book:hover { background: var(--fg); color: var(--bg); }
.head__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2ch;
  padding: 0;
  margin: 0;
  list-style: none;
}
.head__nav a {
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
}
.head__nav a:hover { background: var(--fg); color: var(--bg); }
.head__nav a[aria-current="page"] {
  background: var(--chrome-2);
  color: var(--fg);
  font-weight: 700;
}
@media (max-width: 40rem) {
  .head__run { grid-template-columns: auto 1fr; }
  .head__ref--end { display: none; }
  .head__book { text-align: right; }
  .head__nav ul { justify-content: flex-start; gap: 0 1.5ch; }
}

.foot {
  margin-top: calc(var(--lh) * 2);
  padding: 0 var(--gut);
}
.foot__line {
  display: flex;
  justify-content: space-between;
  gap: 0 2ch;
  flex-wrap: wrap;
  max-width: var(--manw);
}
.foot__small {
  margin: var(--lh) 0 0 var(--ind);
  max-width: calc(var(--manw) - var(--ind));
  color: var(--dim);
}
.foot__small a { color: var(--dim); text-decoration-color: var(--rule); }
.foot__small a:hover { color: var(--bg); background: var(--dim); }

/* less(1)'s prompt, in standout (reverse video). */
.prompt {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0 1ch;
  height: var(--lh);
  padding: 0 var(--gut);
  background: var(--fg);
  color: var(--bg);
  line-height: var(--lh);
}
.prompt__status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.prompt__pos { font-variant-numeric: tabular-nums; }
.prompt__cursor {
  display: inline-block;
  width: 1ch;
  height: var(--lh);
  vertical-align: top;
  background: var(--bg);
  animation: blink 1.06s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.prompt__key {
  flex: none;
  font: inherit;
  line-height: var(--lh);
  padding: 0 1ch;
  border: 0;
  background: transparent;
  color: var(--bg);
  cursor: pointer;
  white-space: nowrap;
}
.prompt__key kbd { background: none; color: inherit; padding: 0; font-weight: 700; }
.prompt__key:hover, .prompt__key[aria-expanded="true"] { background: var(--bg); color: var(--fg); }
.prompt__key:focus-visible { outline-color: var(--bg); outline-offset: -3px; }
.prompt a.prompt__key { color: var(--bg); text-decoration: none; }
.prompt a.prompt__key:hover { color: var(--fg); }
@media (max-width: 60rem) {
  .prompt__key--link { display: none; }
}
@media (max-width: 40rem) {
  .prompt__page { display: none; }
  .prompt__key[data-palette="theme "] { display: none; }
}

/* ---------- Panes: captures of the running editor ---------- */

.pane {
  margin: 0;
  background: var(--chrome);
}
.man .pane p, .man .pane figcaption { margin: 0; max-width: none; }
.pane__head {
  display: flex;
  gap: 1ch;
  padding: 0 1ch;
  background: var(--chrome-2);
  color: var(--fg);
  line-height: var(--lh);
  white-space: nowrap;
  overflow: hidden;
}
.pane__grip { color: var(--dim); }
.pane__info { margin-left: auto; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.pane__open { display: block; cursor: zoom-in; background: none; }
.pane__open:hover { background: none; }
.pane__open:focus-visible { outline-offset: -2px; }
.pane__media {
  display: block;
  width: 100%;
  height: auto;
  background: var(--chrome);
}
.pane__play {
  font: inherit;
  font-weight: 700;
  line-height: var(--lh);
  min-width: 7ch;
  padding: 0 1ch;
  border: 0;
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
}
.pane__play:hover { background: var(--link); }
.pane__cap {
  padding: 0 1ch;
  color: var(--dim);
  line-height: var(--lh);
  background: var(--chrome);
}
@supports (height: calc-size(auto, size)) {
  .pane { height: calc-size(auto, round(up, size, var(--lh))); }
}

/* A split tab: the manual left, the editor right. */
.part {
  display: grid;
  grid-template-columns: minmax(0, var(--manw)) minmax(0, 1fr);
  gap: 0 4ch;
  align-items: start;
  max-width: none;
}
.part__text > :first-child { margin-top: 0; }
.part__text > p + p, .part__text > p + ul, .part__text > ul + p,
.part__text > p + dl, .part__text > dl + p, .part__text > p + pre, .part__text > pre + p { margin-top: var(--lh); }
.part__pane {
  position: sticky;
  top: var(--lh);
}
@media (max-width: 75rem) {
  .part { grid-template-columns: minmax(0, 1fr); }
  .part__pane { position: static; margin: var(--lh) 0 0 var(--ind); max-width: calc(var(--manw) - var(--ind) + 40ch); }
}
@media (max-width: 40rem) {
  .part__pane { margin-left: 0; }
}
.man > .part, .man > .page { max-width: none; }
/* A recording of the whole window spans the page under its text: a split
   would shrink a full-window capture below legibility. */
.part--wide { grid-template-columns: minmax(0, 1fr); }
.part--wide > .part__text { max-width: var(--manw); }
.part--wide > .part__pane { position: static; margin: var(--lh) 0 0 var(--ind); max-width: 1600px; }
@media (max-width: 40rem) { .part--wide > .part__pane { margin-left: 0; } }

/* ---------- The landing: zeughaus(7) ---------- */

.is-home .man > * { max-width: none; }
.is-home .man > h2,
.is-home .man > p,
.is-home .man > ul,
.is-home .man > dl,
.is-home .man > pre,
.is-home .man > .st,
.is-home .man > .diagram { max-width: var(--manw); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, var(--manw)) minmax(0, 1fr);
  gap: 0 4ch;
  align-items: start;
}
.hero__name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 3ch;
  align-items: center;
  margin: 0 0 0 var(--ind);
}
.zmark {
  display: block;
  width: 24ch;
  height: calc(var(--lh) * 9);
  fill: var(--fg);
}
/* DEC double-height, double-width lines: twice the cell, two grid lines each. */
.dh {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: calc(var(--lh) * 2);
  letter-spacing: 0;
}
.dh > span { display: block; }
.dh__dash { font-weight: 400; }
/* NAME on every other page: the page's name in double height, then the
   one-line description at cell size, as man prints it. */
.man h1.name { margin: 0 0 0 var(--ind); font-size: 1rem; font-weight: 400; line-height: var(--lh); }
.name .dh { display: block; overflow-wrap: anywhere; }
.name__line { display: block; }
.hero__sub {
  margin: var(--lh) 0 0 var(--ind);
  max-width: 62ch;
}
.man .synopsis {
  margin: 0 0 0 var(--ind);
  padding: 0;
  list-style: none;
}
.man .synopsis li { padding-left: 4ch; text-indent: -4ch; }
.man .synopsis li::before { content: none; }
.hero__go { margin: var(--lh) 0 0 var(--ind); }
.hero__pane { position: sticky; top: var(--lh); }

@media (max-width: 75rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__pane { position: static; margin: calc(var(--lh) * 2) 0 0 var(--ind); max-width: calc(var(--manw) - var(--ind) + 40ch); }
}
@media (max-width: 40rem) {
  .hero__name { grid-template-columns: minmax(0, 1fr); gap: var(--lh) 0; margin-left: 0; }
  .zmark { display: none; }
  .dh { font-size: 1.75rem; line-height: calc(var(--lh) * 2); }
  .hero__pane { margin-left: 0; }
}

/* STATUS: capabilities printed like a test run. */
.st {
  display: flex;
  gap: 0 1ch;
  margin-left: var(--ind);
  line-height: var(--lh);
}
.st__t { flex: 0 1 auto; }
.st__t code { font-weight: 700; }
.st__dots {
  flex: 1 1 4ch;
  min-width: 4ch;
  overflow: hidden;
  white-space: nowrap;
  color: var(--rule);
}
.st__dots::before { content: "................................................................................................................................"; }
.st__s { flex: none; font-weight: 700; }
.st--built .st__s { color: var(--t-green); }
.st--partial .st__s { color: var(--t-yellow); }
.st--not-built .st__s { color: var(--t-red); }
.st-n--built { color: var(--t-green); }
.st-n--partial { color: var(--t-yellow); }
.st-n--not-built { color: var(--t-red); }
.st + .st { margin-top: 0; }
p + .st, .st + p, .st + h3, h3 + .st { margin-top: var(--lh); }
.st-sum { color: var(--dim); }
@media (max-width: 40rem) {
  .st { margin-left: 0; gap: 0 2ch; }
  .st__t { flex: 1 1 auto; min-width: 0; }
  .st__dots { display: none; }
  .st__s { align-self: flex-end; }
}

/* ---------- Man pages with a contents pane ---------- */

.page {
  display: grid;
  grid-template-columns: minmax(0, var(--manw)) minmax(24ch, 40ch);
  gap: 0 6ch;
  align-items: start;
}
.page__man > * { max-width: var(--manw); }
.page__man > h2:first-child { margin-top: 0; }
.toc {
  position: sticky;
  top: var(--lh);
  max-height: calc(100vh - var(--lh) * 3);
  overflow: auto;
  background: var(--chrome);
  scrollbar-width: thin;
}
.toc__head { position: sticky; top: 0; }
.toc ol {
  margin: 0;
  padding: 0 0 calc(var(--lh) / 2);
  list-style: none;
}
.toc ol ol { padding: 0 0 0 2ch; }
.toc a {
  display: block;
  padding: 0 1ch;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc ol ol a { color: var(--dim); }
.toc a:hover { background: var(--fg); color: var(--bg); }
.toc a[aria-current="true"] { background: var(--chrome-2); color: var(--fg); font-weight: 700; }
@media (max-width: 75rem) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}

/* ---------- zeughaus-nodes(7) and zeughaus-keys(7) ---------- */

.catalog dt { scroll-margin-top: var(--lh); }
.catalog dt code { color: var(--fg); }
.catalog__name { margin-left: 1ch; }
.catalog__cat { color: var(--dim); }
.catalog__cat::before { content: "["; }
.catalog__cat::after { content: "]"; }
.catalog dt:target { background: var(--chrome-2); }
.catalog dd > p + p { margin-top: 0; }
.pins, .settings { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.pins__dir { color: var(--dim); min-width: 4ch; }
.pins__dir:not(:first-child) { margin-left: 1ch; }
.pin { display: inline-flex; align-items: center; gap: 0 1ch; white-space: nowrap; }
.pin b { font-weight: 400; }
.pin__ty { color: var(--dim); }
.pin > i {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  background: color-mix(in oklab, var(--tone) 68%, var(--fg));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tone) 50%, var(--fg));
}
.pin--sample > i { border-radius: 50%; }
.pin--field > i { width: 1.4em; height: 0.45em; }
.pin--float { --tone: var(--c2); }
.pin--str { --tone: var(--c3); }
.pin--bool { --tone: var(--c4); }
.pin--int { --tone: var(--c6); }
.pin--any { --tone: var(--fg); }
.pin--other { --tone: var(--c7); }
.setting { white-space: nowrap; }
.setting__kind { color: var(--dim); }
.notes { color: var(--dim); }

.keys dt kbd { font-weight: 700; }
.keys__mac { color: var(--dim); margin-left: 1ch; }
.keys__mac kbd { font-weight: 400; }
.keys__ctx { color: var(--dim); }

/* ---------- The command palette ---------- */

.palette {
  width: min(84ch, calc(100vw - 2ch));
  max-height: min(calc(var(--lh) * 22), calc(100vh - var(--lh) * 4));
  margin: calc(var(--lh) * 3) auto auto;
  padding: 0;
  border: 0;
  background: var(--chrome);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--rule), 0 var(--lh) calc(var(--lh) * 2) color-mix(in oklab, var(--bg) 70%, transparent);
  overflow: hidden;
}
.palette::backdrop { background: color-mix(in oklab, var(--bg) 55%, transparent); }
.palette__form { display: flex; flex-direction: column; max-height: inherit; }
.palette__label { padding: 0 1ch; color: var(--dim); background: var(--chrome-2); }
.palette__line {
  display: flex;
  gap: 1ch;
  padding: calc(var(--lh) / 2) 1ch;
  box-shadow: inset 0 -1px 0 var(--rule);
}
.palette__line input {
  flex: 1;
  min-width: 0;
  font: inherit;
  line-height: var(--lh);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  caret-color: var(--cursor);
  outline: none;
}
.palette__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: calc(var(--lh) / 2) 0;
  list-style: none;
  scrollbar-width: thin;
}
.palette__item {
  display: grid;
  grid-template-columns: 9ch minmax(0, auto) minmax(0, 1fr);
  gap: 0 2ch;
  padding: 0 1ch;
  cursor: pointer;
  white-space: nowrap;
}
.palette__kind { color: var(--dim); }
.palette__label-text { overflow: hidden; text-overflow: ellipsis; }
.palette__detail { overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.palette__item mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; }
.palette__item[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.palette__item[aria-selected="true"] .palette__kind,
.palette__item[aria-selected="true"] .palette__detail { color: color-mix(in oklab, var(--bg) 78%, var(--fg)); }
.palette__empty { padding: 0 1ch; color: var(--dim); }
.palette__foot {
  padding: 0 1ch;
  color: var(--dim);
  background: var(--chrome-2);
  white-space: pre;
  overflow: hidden;
}
.palette__foot kbd { background: none; padding: 0; color: var(--fg); }
@media (max-width: 40rem) {
  .palette { margin-top: var(--lh); }
  .palette__item { grid-template-columns: 8ch minmax(0, 1fr); }
  .palette__detail { grid-column: 2; }
  .palette__foot { display: none; }
}

/* ---------- 404 ---------- */
.shell { margin: 0 0 var(--lh) 0 !important; background: none !important; padding: 0 !important; }
.shell__cmd::before { content: "> "; color: var(--dim); }
.is-404 .man { padding-top: calc(var(--lh) * 2); }
.is-404 .man > p { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .prompt__cursor { animation: none; }
  html:focus-within { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

@media print {
  .prompt, .palette, .toc, .skip, .copy { display: none !important; }
  body { padding: 0; }
}