/* Documentation pages: a sidebar, a column of readable text, and an
   on-this-page rail. Everything else comes from site.css. */

.doclayout {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 0 48px; align-items: start;
}

/* ── sidebar ──────────────────────────────────────────────────────── */
.side {
  position: sticky; top: 60px; align-self: start;
  max-height: calc(100vh - 60px); overflow-y: auto;
  padding: 32px 0 48px 24px; border-right: 1px solid var(--rule);
  font-size: 14px;
}
.sidegroup {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
  margin: 26px 0 8px; padding-right: 24px;
}
.sidegroup:first-child { margin-top: 0; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li { margin: 0; }
.side a {
  display: block; padding: 5px 24px 5px 12px; color: var(--muted);
  text-decoration: none; border-left: 2px solid transparent;
  line-height: 1.4; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.side a:hover { color: var(--ink); background: var(--rule-soft); text-decoration: none; }
.side a.here {
  color: var(--accent); border-left-color: var(--accent); font-weight: 500;
  background: var(--rule-soft);
}

/* ── the text column ──────────────────────────────────────────────── */
.docmain { padding: 40px 32px 96px 0; min-width: 0; max-width: 78ch; }
.docmain h1 {
  font-family: var(--serif); font-weight: 600; font-size: 38px;
  letter-spacing: -.018em; line-height: 1.12; margin: 0 0 6px;
  text-wrap: balance;
}
.docmain h2 {
  font-family: var(--serif); font-weight: 600; font-size: 25px;
  letter-spacing: -.01em; margin: 48px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 80px; text-wrap: balance;
}
.docmain h3 { font-size: 17px; font-weight: 600; margin: 30px 0 8px; }
.docmain h4 { font-size: 15px; font-weight: 600; margin: 22px 0 6px; color: var(--muted); }
.docmain p { margin: 0 0 16px; }
.docmain ul { margin: 0 0 16px; padding-left: 22px; }
.docmain li { margin: 0 0 7px; }
.docmain hr { border: none; border-top: 1px solid var(--rule); margin: 36px 0; }

.docmain pre {
  margin: 0 0 20px; font-size: 13px; line-height: 1.62;
  border-left: 3px solid var(--rule);
}
.docmain pre code { background: none; padding: 0; font-size: inherit; }
/* An example carries its own bottom margin so the code and the output it
   produced stay welded together; the left rule turns accent for a block
   the build actually ran. */
.docmain .example > pre { margin: 0; }
.docmain .example.hasout > pre { border-left-color: var(--accent-2); }
.docmain .example .out pre { margin: 0; border-left: none; font-size: 12.5px; }
.docmain table { margin-bottom: 20px; }

/* ── on this page ─────────────────────────────────────────────────── */
.onthispage {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 40px; padding: 0 0 20px;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
}
.onthispage a { color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.onthispage a:hover { color: var(--accent); }
.onthispage:empty { display: none; }

@media (max-width: 980px) {
  .doclayout { grid-template-columns: 1fr; gap: 0; }
  .side {
    position: static; max-height: none; border-right: none;
    border-bottom: 1px solid var(--rule); padding: 20px 24px;
  }
  .side ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
  .side a { padding: 4px 10px; border-left: none; border-radius: 4px; }
  .side a.here { border-left: none; }
  .docmain { padding: 28px 24px 64px; max-width: none; }
}

/* ── a page per builtin (website/fn/<name>.html) ─────────────────────── */
/* These pages pass an empty @@SIDEBAR@@, so .doclayout has no .side child
   -- without this, the 250px sidebar column from the rule above stayed
   reserved and empty, and .docmain's own 78ch cap left the rest of the
   1400px layout as dead space beside a hard-left column of text. */
.doclayout:not(:has(.side)) { grid-template-columns: minmax(0, 1fr); }
.doclayout:not(:has(.side)) .docmain {
  padding: 40px 32px 96px; max-width: 78ch; margin: 0 auto;
}

/* ── a reference table is not prose ──────────────────────────────────────
   `.docmain` is capped at a 78ch measure because that is what makes a
   PARAGRAPH readable. A three-column reference table is not a paragraph:
   at 78ch its Description column came out about 170px wide, wrapping
   every three or four words, and the table STILL overflowed its own
   scroller -- while the width the grid had already reserved sat empty to
   the right of it. So the cap belongs on the running text, and the tables
   and examples get the column the layout is holding for them. */
.doclayout .side ~ .docmain { max-width: none; }
.doclayout .side ~ .docmain > p,
.doclayout .side ~ .docmain > ul,
.doclayout .side ~ .docmain > ol,
.doclayout .side ~ .docmain > blockquote,
.doclayout .side ~ .docmain > .onthispage { max-width: 78ch; }

.docmain .fnback { font-size: 12.5px; color: var(--faint); margin: -10px 0 22px; }
.docmain .fnsig {
  font-family: var(--mono); font-size: 14px; margin: 0 0 14px;
  padding: 10px 14px; background: var(--rule-soft);
  border-left: 3px solid var(--accent); overflow-x: auto;
}
.docmain .fndesc { font-size: 16px; margin: 0 0 26px; }
.docmain .fnnote { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.docmain .fnfrom {
  font-size: 12px; color: var(--faint); margin: -14px 0 26px; text-align: right;
}

/* A function page has no chapter sidebar, so the grid's first column would
   otherwise squeeze the prose into 250px. Let it span both. */
.doclayout > .docmain:first-child { grid-column: 1 / -1; padding-left: 32px; }

/* ── overload tabs: scalar / vector / matrix / ... , C#-doc style ────────
   Pure CSS, no JS: a hidden radio per case, `:nth-of-type` pairs each one
   to its own label and panel so the same fixed rule set works for any
   function regardless of how many cases it has (up to 12 -- the generator
   caps a function's forms at the same number, so a page cannot silently
   grow a thirteenth tab that never opens). */
/* ── one row per call form: code, input, output, description ─────────────
   The two halves of a call are one thing, so they sit on one row rather
   than in two tables the reader has to hold side by side. Each of the
   middle cells is a small list -- a line per argument, or per field of a
   returned Record -- with the name, the type THIS form takes, and the
   sentence about it. */
.iotable td { vertical-align: top; }
.iotable .iocode code { white-space: nowrap; }
.iotable .ioitem { margin: 0 0 8px; line-height: 1.45; }
.iotable .ioitem:last-child { margin-bottom: 0; }
.iotable .iotype {
  font-family: var(--mono); font-size: 12px; color: var(--accent-2);
}
.iotable .iodesc {
  display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px;
}
.iotable .ionone { color: var(--faint); font-style: italic; }
/* A parameter the chapter never described. Said out loud, because a slot
   that looks filled and carries nothing is worse than one that admits it
   is empty -- the reader cannot otherwise tell "documented" from
   "documented badly", and the gap never gets fixed. */
.iotable .iogap {
  display: block; font-size: 12.5px; color: var(--faint); font-style: italic;
  margin-top: 1px;
}
/* The narrow columns first, so Description gets what is left rather than
   the browser splitting the width evenly between four unequal columns. */
.iotable td:nth-child(1) { width: 22%; }
.iotable td:nth-child(2) { width: 26%; }
.iotable td:nth-child(3) { width: 22%; }

.docmain .ioacross { font-size: 14px; margin: 0 0 6px; }

.typetabs { margin: 0 0 26px; }
.typetabs input { position: absolute; opacity: 0; width: 0; height: 0; }
.typetabs .tabbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--rule); margin-bottom: 16px;
}
.typetabs .tabbar label {
  display: inline-block; padding: 7px 14px; font-size: 13.5px; cursor: pointer;
  color: var(--muted); border-radius: 6px 6px 0 0; margin-bottom: -1px;
  border: 1px solid transparent; border-bottom: none;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.typetabs .tabbar label:hover { color: var(--ink); }
.typetabs .panel { display: none; }
.typetabs .panel > :last-child { margin-bottom: 0; }
/* A panel opens with the form's own signature, then Inputs; neither
   should push a gap under the tab bar it hangs from. */
.typetabs .panel > :first-child { margin-top: 0; }
.typetabs input:nth-of-type(1):checked ~ .tabbar label:nth-of-type(1),
.typetabs input:nth-of-type(2):checked ~ .tabbar label:nth-of-type(2),
.typetabs input:nth-of-type(3):checked ~ .tabbar label:nth-of-type(3),
.typetabs input:nth-of-type(4):checked ~ .tabbar label:nth-of-type(4),
.typetabs input:nth-of-type(5):checked ~ .tabbar label:nth-of-type(5),
.typetabs input:nth-of-type(6):checked ~ .tabbar label:nth-of-type(6),
.typetabs input:nth-of-type(7):checked ~ .tabbar label:nth-of-type(7),
.typetabs input:nth-of-type(8):checked ~ .tabbar label:nth-of-type(8),
.typetabs input:nth-of-type(9):checked ~ .tabbar label:nth-of-type(9),
.typetabs input:nth-of-type(10):checked ~ .tabbar label:nth-of-type(10),
.typetabs input:nth-of-type(11):checked ~ .tabbar label:nth-of-type(11),
.typetabs input:nth-of-type(12):checked ~ .tabbar label:nth-of-type(12) {
  color: var(--ink); background: var(--rule-soft); border-color: var(--rule);
}
.typetabs input:nth-of-type(1):checked ~ .panels .panel:nth-of-type(1),
.typetabs input:nth-of-type(2):checked ~ .panels .panel:nth-of-type(2),
.typetabs input:nth-of-type(3):checked ~ .panels .panel:nth-of-type(3),
.typetabs input:nth-of-type(4):checked ~ .panels .panel:nth-of-type(4),
.typetabs input:nth-of-type(5):checked ~ .panels .panel:nth-of-type(5),
.typetabs input:nth-of-type(6):checked ~ .panels .panel:nth-of-type(6),
.typetabs input:nth-of-type(7):checked ~ .panels .panel:nth-of-type(7),
.typetabs input:nth-of-type(8):checked ~ .panels .panel:nth-of-type(8),
.typetabs input:nth-of-type(9):checked ~ .panels .panel:nth-of-type(9),
.typetabs input:nth-of-type(10):checked ~ .panels .panel:nth-of-type(10),
.typetabs input:nth-of-type(11):checked ~ .panels .panel:nth-of-type(11),
.typetabs input:nth-of-type(12):checked ~ .panels .panel:nth-of-type(12) {
  display: block;
}