/* ── RepoQL docs shell — the help-docs idiom, on the site's own palette ──
   Loaded after site.css. Owns three things: the type-system override every page
   shares, the persistent contents on the left, and the inventory typography.
   Documentation genre: quiet, scannable, no furniture that argues. */

/* website type system — Spectral display · IBM Plex Sans body · IBM Plex Mono code */
:root{
  --font-display:'Spectral',Georgia,serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
html{font-size:clamp(15px,1.05vw,17px)}

/* decoration is subordinate to content here — the substrate stays, quieted */
#bg-mycelium{opacity:.13}

/* the shared chrome is built for a 1180 marketing page — widen it to the docs
   frame so the brand lines up with the contents and the button with the column */
.nav,.footer__in{max-width:1440px;padding-left:34px;padding-right:34px}

/* ── layout: contents left, one wide working column right ──
   The column is wide so demonstrations, tables and code get the room they need;
   prose is capped separately below, because a readable measure is a property of
   running text, not of the page. */
.dl{position:relative;z-index:3;max-width:1440px;margin:0 auto;padding:0 34px;
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 54px;align-items:start}
.dmain{min-width:0;padding:14px 0 40px}

/* ── the contents — persistent, so depth never costs orientation ── */
.dnav{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:16px 0 40px;
  scrollbar-width:thin;scrollbar-color:rgba(45,212,191,.18) transparent}
.dnav::-webkit-scrollbar{width:7px}
.dnav::-webkit-scrollbar-thumb{background:rgba(45,212,191,.16);border-radius:4px}
.dnav__cb,.dnav__toggle{display:none}
.dnav__h{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c);opacity:.62;margin:20px 0 7px}
.dnav__h:first-child{margin-top:0}
.dnav a{display:block;font-size:.82rem;color:var(--fg2);padding:3.5px 10px 3.5px 11px;
  border-left:1px solid var(--hair);line-height:1.4}
.dnav a:hover{color:var(--text);border-left-color:rgba(45,212,191,.4)}
.dnav a.is-here{color:var(--c);border-left-color:var(--c)}
.dnav a code{font-family:var(--font-mono);font-size:.94em}
.dnav__back{font-size:.75rem;color:var(--fg3);border:0;padding:0 0 14px}
.dnav__back:hover{color:var(--c)}

/* ── page type ── */
.dmain h1{font-family:var(--font-display);font-size:1.72rem;font-weight:400;color:var(--text);margin:0}
.dmain h1 code{font-family:var(--font-mono);font-size:.84em;color:var(--text)}
.dmain .lede{color:var(--fg2);font-size:.95rem;margin:9px 0 0;line-height:1.6}
.dmain h2{font-family:var(--font-display);font-size:1.16rem;font-weight:400;color:var(--text);
  letter-spacing:0;margin:38px 0 0}
.dmain h3{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--text);margin:24px 0 0}
.dmain p{font-size:.9rem;color:var(--fg2);margin:9px 0 0;line-height:1.65}
.dmain h2+p,.dmain h3+p{margin-top:6px}
/* running text keeps a readable measure while the column around it stays wide */
.dmain p,.dmain li,.dmain .lede{max-width:80ch}
.dmain code{font-family:var(--font-mono);font-size:.86em;color:var(--c)}
.dmain .u{color:var(--vio)}          /* an address part — site.css reserves violet for these */
.dmain strong{color:var(--text);font-weight:600}
.dmain ul{margin:10px 0 0;padding-left:19px}
.dmain li{font-size:.9rem;color:var(--fg2);margin:4px 0;line-height:1.6}
.dmain .code{margin-top:12px;font-size:.82rem;padding:13px 17px}
.dmain .code+.code{margin-top:8px}
/* the copy affordance is absolutely positioned — keep the line out from under it */
.dmain .copyable{padding-right:56px}

/* ── the map: five areas, one scan — headings are doors, the block is not a link ── */
.area{border-top:1px solid var(--hair);padding:18px 0 19px}
.area h2{font-family:var(--font-display);font-size:1.14rem;font-weight:400;margin:0}
.area h2 a{color:var(--text)}
.area h2 a:hover{color:var(--cp)}
.area h2 a::after{content:' →';font-family:var(--font-body);font-size:.76rem;color:var(--c);opacity:.5;transition:opacity .15s}
.area h2 a:hover::after{opacity:1}
.area p{margin-top:5px;max-width:72ch}
.area .code,.area .ref{margin-top:11px}

/* a concept area reads as a pair — what it is on the left, what it looks like on
   the right — so the map stays short enough to scan in one screen */
.area--split{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:0 44px;align-items:start}
.area--split h2{grid-column:1/-1}
.area--split p{grid-column:1;grid-row:2;max-width:none;margin-top:6px}
.area--split .code{grid-column:2;grid-row:2;margin-top:7px}

/* ── inventory tables — the structure depth: every name, one line each ── */
.ref{width:100%;max-width:1060px;border-collapse:collapse;margin:13px 0 0;font-size:.85rem}
.ref th{text-align:left;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--c);opacity:.66;font-weight:400;
  padding:0 16px 7px 0;border-bottom:1px solid var(--hair)}
.ref td{padding:6.5px 16px 6.5px 0;border-bottom:1px solid rgba(128,224,208,.055);
  color:var(--fg2);vertical-align:baseline;line-height:1.45}
.ref tr:last-child td{border-bottom:0}
/* A description column is running text, and max-width on a td does not bind under
   auto table layout — so the two-column tables carry the measure on the table. The
   three-column ones stay wide: their descriptions are short and fit one line each. */
.ref--2{max-width:820px}
.ref td:first-child{font-family:var(--font-mono);font-size:.79rem;color:var(--c);white-space:nowrap}
.ref td:first-child a{color:inherit}
.ref td:first-child a:hover{color:var(--cp)}
.ref--addr td:first-child{color:var(--vio)}   /* fragments and modifiers — the address magic */
/* a first column of prose, not identifiers — monospace would be a lie about what it is */
.ref--prose td:first-child{font-family:var(--font-body);font-size:.86rem;color:var(--text);white-space:normal}
.ref .o{font-family:var(--font-mono);font-size:.94em;color:var(--fg3);white-space:nowrap}
.wide{overflow-x:auto}

/* ── ask, or act — the product's stance, on every demonstration ── */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--hair)}
.pair__l{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg3);margin:0 0 6px}
.pair .code{margin-top:0}
.pair__q{font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--text);
  margin:0;line-height:1.5}

/* ── the handoff — the window never republishes the manual ── */
.handoff{margin-top:34px;padding-top:15px;border-top:1px solid var(--hair);
  font-size:.82rem;color:var(--fg3);line-height:1.6;max-width:92ch}
.handoff code{color:var(--fg2)}
.handoff a{color:var(--fg2)}
.handoff a:hover{color:var(--c)}

/* ── next/prev between siblings ── */
.onward{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px;font-size:.82rem}

@media (max-width:900px){
  .dl{grid-template-columns:minmax(0,1fr);gap:0;padding:0 22px}
  .nav,.footer__in{padding-left:22px;padding-right:22px}
  .dmain{padding-top:6px;max-width:none}
  .area--split{grid-template-columns:minmax(0,1fr)}
  .area--split p,.area--split .code{grid-column:1;grid-row:auto}
  /* the contents never disappear — they become a control */
  .dnav{position:static;max-height:none;overflow:visible;padding:8px 0 0;
    border-bottom:1px solid var(--hair);margin-bottom:18px}
  .dnav__toggle{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--c);cursor:pointer;padding:9px 0 13px;user-select:none}
  .dnav__toggle::after{content:' ▾'}
  .dnav__cb:checked~.dnav__toggle::after{content:' ▴'}
  .dnav__list{display:none;padding-bottom:14px}
  .dnav__cb:checked~.dnav__list{display:block}
  .dnav__back{padding-bottom:0}
}
@media (max-width:620px){
  .pair{grid-template-columns:minmax(0,1fr)}
}