/* pipe — the docs pages' whole stylesheet.
 *
 * This is pipeOS's system (the box dashboard at pipe.local:
 * overlay/usr/local/share/pipeos/web/static/style.css), ported: warm paper
 * with a dark variant the OS picks, system-ui for reading, monospace only
 * where the content IS terminal, a left panel of rounded nav rows that
 * becomes a bottom tab bar on a phone. A third SYSTEM beside site.css and
 * mkt.css, not a skin — a docs page loads this sheet and no other (xtask's
 * head_for picks exactly one per page), so nothing here has to out-rank
 * anything and nothing here can reach the app or the marketing pages.
 *
 * Tokens keep pipeOS's names and shapes on purpose: the two files stay
 * diffable, and a fix found on one side carries to the other. The palette
 * is the one deliberate departure — cool greys where the box wears warm
 * paper, and robin's-egg blue where it wears green — a whiter, bluer egg. It is
 * spent super light as the FILL (the active pill, the mark's ring, the
 * get-started chip); text set in the accent takes the deep end of the same
 * hue, because a pastel cannot carry a letterform and still clear WCAG AA.
 *
 * Component index — the canonical set:
 *   nav[data-nav]   the site's side panel: brand + icon rows (chrome.ts
 *                   refills it); hidden on a phone, where the .tabbar takes
 *                   over (the pipeOS move — thumbs live at the bottom)
 *   .tabbar         the phone's fixed bottom bar, built by chrome.ts
 *   .docs-wrap      the docs shell: section rail + measure
 *   .docs-nav       the section rail: icon rows, accent pill on the current
 *                   page; a horizontal pill row on a phone
 *   .docs-body      the prose: h1/h2, tables, table.q command tables
 *   pre.term        anything literally terminal; stays DARK in both themes,
 *                   because it quotes the terminal rather than being the page
 *   footer          the one-liner legal line
 * A new docs element is one of these or it argues its way in here.
 */

/* ── tokens ──────────────────────────────────────────────────────────── */
/* The palette is shell.css's (loaded before this sheet); what stays here
   is what no other sheet spends: the terminal quote and this sheet's own
   geometry. */
:root {
  --radius: 12px;
}

/* ── base, type ──────────────────────────────────────────────────────── */
/* the reset, the body base and the focus ring are shell.css's */
/* the wrap, the panel and the tab bar are shell.css's — one copy for the
   whole site */
a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
a:hover { text-decoration-color: var(--accent); }
/* the code chip and table.q are shell.css's */

/* ── the shell ───────────────────────────────────────────────────────── */
main.page { flex: 1; width: 100%; }
.docs-wrap {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  /* centred in the region beside the panel (2026-09-01: fill the space);
     the prose keeps its measure and its left edge, the dead space splits */
  max-width: 72rem; margin: 0 auto;
  padding: 1.6rem clamp(1rem, 4vw, 2.4rem) 3rem;
  align-items: start;
}

/* the panel: pipeOS's sidenav rows, verbatim idiom */
.docs-nav { position: sticky; top: 1.2rem; display: flex; flex-direction: column; gap: 2px; }
/* group labels: the docs are two sections at one level, pipe and pipeOS */
.docs-nav .grp { color: var(--faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; padding: .9rem .6rem .25rem; }
.docs-nav .grp:first-child { padding-top: .1rem; }
.docs-nav a {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  color: var(--muted); font-weight: 500; font-size: .95rem;
  padding: .5rem .6rem; border-radius: 9px;
}
.docs-nav a:hover { background: var(--card); color: var(--ink); }
.docs-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.docs-nav .ic { width: 17px; height: 17px; flex: none; opacity: .8; }
.docs-nav .ic svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.docs-nav .lbs { display: none; }

/* ── the prose ───────────────────────────────────────────────────────── */
.docs-body { max-width: 46rem; min-width: 0; }
.docs-body h1 { font-size: 1.4rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
.docs-body h2 { font-size: 1.05rem; margin: 1.9rem 0 .55rem; letter-spacing: -.01em; }
.docs-body h3 { font-size: .95rem; margin: 1.3rem 0 .4rem; }
.docs-body p { margin: .5rem 0 .9rem; }
.docs-body ul, .docs-body ol { margin: .5rem 0 .9rem; padding-left: 1.3rem; }
.docs-body li { margin: .25rem 0; }
.docs-body table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.docs-body td { padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-body tr:last-child td { border-bottom: 0; }
.docs-flags { color: var(--faint); font-size: .8rem; font-family: var(--mono); }

/* ── the footer ──────────────────────────────────────────────────────── */
footer {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 2.4rem) 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: .8rem;
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .pulse { color: var(--faint); }

/* ── the phone: the site tab bar below, the sections as a pill row ───── */
/* The pipeOS handoff: the side panel goes, the fixed bottom bar arrives —
   but the bar belongs to the SITE now (chrome.ts builds it everywhere), so
   the docs sections become a scrolling pill row above the prose instead of
   a second bar fighting for the same edge. */
@media (max-width: 760px) {
  .docs-wrap { grid-template-columns: 1fr; gap: .9rem; padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .docs-nav {
    position: static; height: auto; flex-direction: row; overflow-x: auto;
    gap: .3rem; margin: 0 -1rem; padding: 0 1rem .2rem;
  }
  /* the pill row groups by order alone; the labels would cost a thumb-width */
  .docs-nav .grp { display: none; }
  .docs-nav a { flex: none; flex-direction: row; gap: .35rem; padding: .35rem .7rem; font-size: .82rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
  .docs-nav a[aria-current="page"] { border-color: transparent; }
  .docs-nav .ic { width: 15px; height: 15px; }
  .docs-nav .lbl { display: none; }
  .docs-nav .lbs { display: inline; }
  .docs-body h1 { font-size: 1.3rem; }
}