/* pecu-cli — one stylesheet, no framework, no fetched fonts.
   Colours are the terminal's own palette so the captures sit in the page
   rather than on it. */

:root {
  --bg:        #0d1117;
  --surface:   #161b22;
  --surface-2: #1c232c;
  --border:    #30363d;
  --border-sm: #21262d;
  --text:      #c9d1d9;
  --strong:    #f0f6fc;
  --muted:     #8b949e;   /* 4.6:1 on --bg */
  --accent:    #58a6ff;
  --accent-dim:#1f6feb;
  --green:     #3fb950;
  --amber:     #d29922;
  --red:       #ff7b72;
  --shadow:    0 1px 2px rgb(0 0 0 / .5), 0 12px 32px -12px rgb(0 0 0 / .6);
  --ring:      0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --measure: 46rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --topbar: 3.5rem;
}

:root[data-theme="light"] {
  --bg:        #ffffff;
  --surface:   #f6f8fa;
  --surface-2: #eef1f4;
  --border:    #d1d9e0;
  --border-sm: #e4e8ec;
  --text:      #1f2328;
  --strong:    #010409;
  --muted:     #59636e;   /* 4.9:1 on white */
  --accent:    #0969da;
  --accent-dim:#0550ae;
  --green:     #1a7f37;
  --amber:     #9a6700;
  --red:       #cf222e;
  --shadow:    0 1px 2px rgb(31 35 40 / .08), 0 12px 32px -12px rgb(31 35 40 / .28);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#ffffff; --surface:#f6f8fa; --surface-2:#eef1f4; --border:#d1d9e0;
    --border-sm:#e4e8ec; --text:#1f2328; --strong:#010409; --muted:#59636e;
    --accent:#0969da; --accent-dim:#0550ae; --green:#1a7f37; --amber:#9a6700;
    --red:#cf222e;
    --shadow: 0 1px 2px rgb(31 35 40 / .08), 0 12px 32px -12px rgb(31 35 40 / .28);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

code, kbd, pre, samp { font-family: var(--mono); }

.skip {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--accent); color: #fff; padding: .5rem .9rem;
  border-radius: 6px; font-weight: 600; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: .5rem; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--topbar);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border-sm);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
}

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--strong); }
.brand-mark {
  font-family: var(--mono); font-size: 7px; line-height: 1.05;
  color: var(--green); letter-spacing: -.5px;
}
.brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; }

.topnav { display: flex; gap: .25rem; margin-right: auto; }
.topnav a {
  padding: .35rem .6rem; border-radius: 6px;
  color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.topnav a:hover { color: var(--text); background: var(--surface); }
.topnav a[aria-current="page"] { color: var(--strong); background: var(--surface); }

.topbar-actions { display: flex; align-items: center; gap: .4rem; }

.search-open {
  display: flex; align-items: center; gap: .5rem;
  height: 2rem; padding: 0 .5rem 0 .6rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.search-open:hover { border-color: var(--muted); color: var(--text); }
.search-open kbd {
  font-size: .72rem; padding: .05rem .3rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
}

.icon-btn {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 6px;
  border: 1px solid transparent; background: none;
  color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--text); background: var(--surface); }
/* The button shows the theme it switches TO. Default is dark, so the sun. */
.i-sun  { display: block; }
.i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .i-sun  { display: none; }
  :root:not([data-theme="dark"]) .i-moon { display: block; }
}
:root[data-theme="light"] .i-sun  { display: none; }
:root[data-theme="light"] .i-moon { display: block; }
:root[data-theme="dark"]  .i-sun  { display: block; }
:root[data-theme="dark"]  .i-moon { display: none; }

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

.layout { display: block; }
html.doc .layout {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 74rem; margin: 0 auto; padding: 0 var(--gutter);
  align-items: start;
}

.sidebar {
  position: sticky; top: var(--topbar);
  max-height: calc(100vh - var(--topbar)); overflow-y: auto;
  padding: 2rem 0 3rem; font-size: .875rem;
}
.sidebar-label {
  margin: 0 0 .5rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.sidebar nav + nav { margin-top: 2rem; }
.sidebar a {
  display: block; padding: .22rem 0 .22rem .7rem;
  border-left: 2px solid var(--border-sm);
  color: var(--muted); text-decoration: none; line-height: 1.45;
}
.sidebar a:hover { color: var(--text); border-left-color: var(--muted); }
.sidebar a[aria-current="page"], .sidebar a.active {
  color: var(--accent); border-left-color: var(--accent); font-weight: 500;
}
.sidebar-toc a.lvl3 { padding-left: 1.5rem; }

.content { min-width: 0; padding: 2.25rem 0 4rem; }
html.home .content { padding: 0 0 4rem; max-width: none; }

/* Prose is capped at a reading measure; tables, code panels and captures are
   not, because they are not read line by line and a four-column table squeezed
   into 46rem loses a column off the side. */
.prose { max-width: none; }
.prose > :is(p, ul, ol, h1, h2, h3, blockquote) { max-width: var(--measure); }
.prose > :is(.table-wrap, pre) { max-width: min(100%, 62rem); }

/* ---------------------------------------------------------------- prose */

.prose > :first-child { margin-top: 0; }
.prose h1 {
  margin: 0 0 2rem; font-size: clamp(1.9rem, 4vw, 2.35rem);
  line-height: 1.15; letter-spacing: -.025em; color: var(--strong);
}
.prose h2 {
  margin: 3.25rem 0 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border-sm);
  font-size: 1.4rem; line-height: 1.3; letter-spacing: -.018em; color: var(--strong);
}
.prose h3 {
  margin: 3rem 0 .9rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border-sm);
  font-size: 1.25rem; line-height: 1.3; letter-spacing: -.015em;
  color: var(--strong);
}
.prose h2 + h3 { margin-top: 1.6rem; padding-top: 0; border-top: 0; }

.prose p, .prose li { overflow-wrap: break-word; }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.prose li { margin: .3rem 0; }
.prose li > ul, .prose li > ol { margin: .3rem 0; }
.prose strong { color: var(--strong); font-weight: 650; }
.prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border-sm); }

.prose blockquote {
  margin: 0 0 1.1rem; padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--border); color: var(--muted);
}

.headerlink {
  margin-left: .4rem; opacity: 0; text-decoration: none;
  color: var(--muted); font-weight: 400;
}
h2:hover .headerlink, h3:hover .headerlink, .headerlink:focus { opacity: 1; }

/* code */
.prose :not(pre) > code {
  padding: .15em .38em; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--border-sm);
  font-size: .875em; color: var(--strong);
  /* `anywhere`, not `nowrap`. Keeping a command on one line reads better and is
     what this was, but the reference quotes raw hashes inline, and a 40-character
     unbreakable token under `nowrap` cannot wrap — so it pushed the whole page
     sideways on a phone and took every paragraph's right edge with it.
     `anywhere` still prefers to break at spaces and only splits a word when the
     alternative is overflowing. */
  overflow-wrap: anywhere;
}

/* Ties on specificity with the chip rule above, so it has to come after it:
   `### \`pecu doctor\`` is a section title that happens to be set in code, not a
   chip sitting inside a title. */
.prose :is(h1, h2, h3) code {
  font-size: .95em; background: none; border: 0; padding: 0;
  color: inherit; font-weight: inherit; white-space: normal;
}
pre:not(.hero-logo) {
  position: relative; margin: 0 0 1.3rem; padding: .9rem 1rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); overflow-x: auto;
  font-size: .82rem;
  /* Tight enough that ┌ │ └ meet across lines: these blocks are drawings. */
  line-height: 1.2;
  tab-size: 4;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

.copy {
  position: absolute; top: .45rem; right: .45rem;
  padding: .2rem .5rem; border-radius: 5px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font: inherit; font-size: .72rem; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
pre:hover .copy, .copy:focus-visible { opacity: 1; }
.copy[data-done] { color: var(--green); border-color: var(--green); opacity: 1; }
@media (hover: none) { .copy { opacity: 1; } }

/* tables */
.table-wrap { position: relative; margin: 0 0 1.3rem; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }

/* A box that scrolls sideways and does not look like it says the same thing as
   a box with nothing more in it. The marker only appears once JS has measured
   an actual overflow, so it never lies. */
.scrolls { position: relative; }
.scrolls::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.5rem;
  pointer-events: none; border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--bg) 92%, transparent));
}
.scrolls[data-end]::after { opacity: 0; transition: opacity .15s; }
.prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.prose th, .prose td {
  padding: .55rem .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border-sm);
}
.prose th { background: var(--surface); color: var(--strong); font-weight: 600; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
.prose td code { white-space: normal; }

/* ---------------------------------------------------------------- terminal captures */

.term {
  position: relative; margin: 0 0 1.75rem; max-width: 52rem;
  /* The capture keeps its recorded background whichever theme the page is in.
     A screenshot of a terminal is a quotation, and it is clearer when it looks
     like one. */
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0d1117;
  box-shadow: var(--shadow);
}
.term-command {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .5rem .8rem .55rem; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: .82rem; line-height: 1.4;
  color: var(--strong); overflow-wrap: anywhere;
}
.term-dollar { color: var(--green); flex: none; }
.term-command code { min-width: 0; }

.term-screen { border-radius: 0 0 10px 10px; overflow: hidden; display: block; }
.term-screen svg { display: block; }
.term figcaption {
  margin: .6rem .1rem 0; font-size: .82rem; color: var(--muted);
}
.term figcaption code {
  color: var(--text); background: none; border: 0; padding: 0; font-size: .95em;
}

.term-replay {
  margin-left: auto; flex: none; align-self: center;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .45rem; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  font: inherit; font-size: .7rem; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.term:hover .term-replay, .term-replay:focus-visible { opacity: 1; }
@media (hover: none) { .term-replay { opacity: 1; } }

/* Parked on the last frame — a negative delay of one full duration, against an
   animation that runs once and fills forwards — and rewound to zero only when
   the capture scrolls into view.
   The resting state is deliberately the END of the recording, because that is
   the frame carrying the information. Every way this can fail — no scripting,
   no IntersectionObserver, an observer that never fires — fails to a readable
   terminal rather than to an empty window. */
.js [data-term] svg g[style*="animation-name"] {
  animation-play-state: paused;
  animation-delay: calc(-1 * var(--term-dur));
}

/* `term-defer` is set in the head, before first paint, and only when the page
   knows it will actually play these: scripting on, motion allowed, a wide
   enough screen, and an IntersectionObserver to start them with. Then the
   resting state is frame zero — an empty terminal about to be typed into.
   Without it the rest above stands, and the capture shows its finished screen.

   The flash this removes: parking on the LAST frame and then starting from the
   first meant every capture showed its own answer for an instant and then threw
   it away to type it out. Nobody reads a demo that spoils itself. */
.js.term-defer [data-term] svg g[style*="animation-name"] { animation-delay: 0s; }

/* Only for the fallback restart: taking the name away and giving it back is
   what makes the browser build a new animation instead of re-timing the old
   one. */
.js [data-term].is-restarting svg g[style*="animation-name"] {
  animation-name: none !important;
}

.js [data-term].is-playing svg g[style*="animation-name"] {
  animation-play-state: running;
  animation-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  [data-term] svg g[style*="animation-name"] {
    animation: none !important;
    transform: translateX(var(--term-end));
  }
  .term-replay { display: none !important; }
}

/* ---------------------------------------------------------------- landing */

.hero { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 0; }
.hero-inner { max-width: 74rem; margin: 0 auto; }

/* Wide enough for both, and the capture is the argument — a reader who has to
   scroll past the claim to reach the evidence has been asked to take the claim
   on faith first. Below this the capture still gets its full width, which is
   the right trade when there is only one column to give it. */
@media (min-width: 78rem) {
  .hero-inner {
    display: grid; align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  }
  .hero-proof .term { max-width: none; margin-bottom: 0; }
  .hero h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); }
  .hero .cta { margin-bottom: 0; }
}
.hero-logo {
  margin: 0 0 1.6rem; font-family: var(--mono); font-size: clamp(.7rem, 1.7vw, 1rem);
  line-height: 1.15; color: var(--green); white-space: pre; overflow-x: auto;
}
.hero h1 {
  margin: 0 0 1.1rem; max-width: 18ch;
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.05;
  letter-spacing: -.035em; color: var(--strong); font-weight: 700;
}
.hero .lede { margin: 0 0 2rem; max-width: 44ch; font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); }
.hero .lede strong { color: var(--text); font-weight: 600; }

.cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 2.5rem; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: 7px; font-size: .92rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
:root[data-theme="light"] .btn-primary, html:not([data-theme="dark"]) .btn-primary { color: #fff; }
.btn-primary:hover { background: var(--accent-dim); }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--muted); }

.snippet {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem .5rem .8rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--mono); font-size: .85rem; color: var(--text);
}
.snippet .dollar { color: var(--green); user-select: none; }
.snippet button {
  margin-left: .2rem; padding: .15rem .45rem; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  font: inherit; font-size: .75rem; cursor: pointer;
}
.snippet button:hover { color: var(--text); }
.snippet button[data-done] { color: var(--green); border-color: var(--green); }

.section { padding: clamp(3rem, 7vw, 5rem) var(--gutter); }
.section-inner { max-width: 74rem; margin: 0 auto; }
.section + .section { border-top: 1px solid var(--border-sm); }
.section h2 {
  margin: 0 0 .7rem; font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.025em; color: var(--strong); line-height: 1.2;
}
.section .sub { margin: 0 0 2.25rem; max-width: 58ch; color: var(--muted); font-size: 1.02rem; }
.eyebrow {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green);
}

.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
@media (min-width: 62rem) { .split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }

/* Every grid and flex item here gets `min-width: 0`. The default is
   `min-content`, so one wide child — a terminal capture, a long word — stops the
   whole column shrinking and drags the page sideways with it. That is not
   hypothetical: a `min-width` on the captures made a 390px viewport scroll to
   594px, and it was the paragraphs either side of the demo that visibly lost
   their right-hand edge, not the demo. */
.cards > *, .split > *, .demo-list > *, .statusgrid > *, .hero-inner > * { min-width: 0; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  padding: 1.15rem 1.25rem; border: 1px solid var(--border-sm); border-radius: 10px;
  background: var(--surface);
}
.card h3 { margin: 0 0 .4rem; font-size: .98rem; color: var(--strong); letter-spacing: -.01em; }
.card p { margin: 0; font-size: .89rem; color: var(--muted); line-height: 1.55; }
.card code { font-size: .85em; color: var(--text); }

.guards { display: grid; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.guards li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--border-sm);
}
.guards li:last-child { border-bottom: 0; }
.guards .mark { color: var(--green); font-family: var(--mono); }
.guards strong { display: block; color: var(--strong); font-weight: 600; }
.guards span.body { color: var(--muted); font-size: .92rem; }

.demo-list { display: grid; gap: 2.5rem; }
.demo-list > div > h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--strong); }
.demo-list > div > p { margin: 0 0 1.1rem; max-width: 60ch; color: var(--muted); font-size: .93rem; }

.statusgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.statusgrid .card h3 { display: flex; align-items: center; gap: .45rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.dot-ok { background: var(--green); }
.dot-wait { background: var(--amber); }
.dot-no { background: var(--muted); }

/* The closing note. Quieter than the sections above it — it is the last thing
   read, which is where a digression belongs and where it costs nothing. */
.colophon { background: var(--surface); }
.etym { max-width: 42rem; }
.etym .word {
  margin: 0 0 .1rem; font-family: var(--mono); font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--green); letter-spacing: -.01em;
}
.etym .word .pos, .etym .word .gloss {
  font-family: var(--sans); font-size: .8rem; font-style: italic;
  color: var(--muted); letter-spacing: 0; vertical-align: .55em; margin-left: .35rem;
}
.etym .def {
  margin: 0 0 1.6rem; padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.15rem; color: var(--strong);
}
.etym p { margin: 0 0 1.1rem; color: var(--muted); line-height: 1.65; }
.etym p:last-child { margin-bottom: 0; }
.etym b, .etym code { color: var(--text); }
.etym b { font-weight: 600; }
.etym code { font-size: .875em; }
.etym q { font-style: italic; }

.note {
  margin: 1.5rem 0 0; padding: .9rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  background: var(--surface); font-size: .9rem; color: var(--muted);
}
.note strong { color: var(--strong); }

/* ---------------------------------------------------------------- pagers, footer */

.pagers { display: flex; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-sm); }
.pager {
  flex: 1; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--strong); font-weight: 600; font-size: .95rem;
}
.pager:hover { border-color: var(--accent); }
.pager span { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.pager.next { text-align: right; }

.edit { display: inline-block; margin-top: 1.5rem; font-size: .85rem; color: var(--muted); }
.edit:hover { color: var(--accent); }

.sitefoot {
  padding: 2rem var(--gutter) 3rem; border-top: 1px solid var(--border-sm);
  font-size: .85rem; color: var(--muted);
}
.sitefoot p { max-width: 74rem; margin: 0 auto .35rem; }
.foot-warn { color: var(--muted); }

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

.palette { position: fixed; inset: 0; z-index: 80; }
.palette[hidden] { display: none; }
.palette-scrim { position: absolute; inset: 0; background: rgb(1 4 9 / .62); backdrop-filter: blur(2px); }
.palette-box {
  position: relative; margin: 10vh auto 0; width: min(40rem, calc(100vw - 2rem));
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); box-shadow: var(--shadow); overflow: hidden;
}
.palette-box input {
  width: 100%; padding: 1rem 1.15rem; border: 0; border-bottom: 1px solid var(--border-sm);
  background: none; color: var(--text); font: inherit; font-size: 1rem;
}
.palette-box input:focus { outline: none; box-shadow: none; }
.palette-box input::placeholder { color: var(--muted); }
#palette-results { list-style: none; margin: 0; padding: .4rem; max-height: 55vh; overflow-y: auto; }
#palette-results li { border-radius: 7px; }
#palette-results a { display: block; padding: .55rem .7rem; text-decoration: none; color: inherit; }
#palette-results li[aria-selected="true"] { background: var(--surface); }
#palette-results li[aria-selected="true"] .r-title { color: var(--accent); }
.r-title { display: block; font-weight: 600; color: var(--strong); font-size: .92rem; }
.r-crumb { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.r-text { display: block; font-size: .82rem; color: var(--muted); margin-top: .12rem;
          overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.r-text mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--strong); border-radius: 2px; }
.palette-empty { padding: 1.6rem 1.15rem; color: var(--muted); font-size: .9rem; }
.palette-foot {
  padding: .5rem 1.15rem; border-top: 1px solid var(--border-sm);
  font-size: .74rem; color: var(--muted); background: var(--surface);
}
.palette-foot kbd {
  padding: .05rem .3rem; margin-right: .15rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 60rem) {
  html.doc .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static; max-height: none; padding: 1.5rem 0 0;
    border-bottom: 1px solid var(--border-sm);
  }
  .sidebar-toc { display: none; }
  .sidebar-nav { display: flex; flex-wrap: wrap; gap: .3rem; }
  .sidebar-nav .sidebar-label { width: 100%; }
  .sidebar-nav a { border-left: 0; padding: .25rem .6rem; border: 1px solid var(--border-sm); border-radius: 6px; }
}
@media (max-width: 46rem) {
  .topnav { display: none; }
  .search-open span { display: none; }
  .search-open kbd { display: none; }
  .pagers { flex-direction: column; }
}