/* Documentation layout
 * ---------------------------------------------------------------------------
 * Three columns: a fixed left rail for the section list, a wide centre column for
 * the prose, and a right rail for in-page anchors. Both rails are sticky and
 * scroll on their own so a long document never pushes its own navigation off the
 * screen.
 *
 * This sheet is deliberately quiet. Hairline rules, small radii, one accent, no
 * icons, no shadows to speak of. The type scale does the work that decoration
 * usually does, which is why there are four heading sizes and a real jump between
 * each rather than one size used at four weights.
 *
 * Column widths are fixed tracks on purpose. Only the centre is a content track
 * and it is minmax(0,1fr), so a long unbroken string — a URL, a header, a shell
 * command — is what gets clipped or wrapped, never the grid.
 */

@import url("/assets/theme.css");

/* ---------- shell ---------- */

.doc-shell{width:100%;max-width:1360px;margin:0 auto;padding:0 24px}

.doc-top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.doc-top-in{display:flex;align-items:center;gap:18px;min-height:56px}
.doc-brand{display:flex;align-items:center;gap:9px;font-weight:720;letter-spacing:-.028em;font-size:16.5px;flex:0 0 auto}
.doc-brand .pip{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.doc-crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink3);min-width:0}
.doc-crumb a{color:var(--ink2)}
.doc-crumb a:hover{color:var(--ink)}
.doc-crumb .sep{color:var(--line2)}
.doc-top-spacer{flex:1 1 auto;min-width:0}

/*
 * The theme control.
 *
 * A segmented control rather than a single cycling button, because three themes is
 * too many to guess at. The current one is marked two ways — filled background and
 * aria-pressed — so it does not depend on colour alone to be readable.
 */
.theme-seg{display:flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:6px;overflow:hidden;flex:0 0 auto;background:var(--panel)}
.theme-seg button{
  appearance:none;border:0;background:none;color:var(--ink3);cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:560;padding:6px 11px;line-height:1.2;
  border-left:1px solid var(--line);
}
.theme-seg button:first-child{border-left:0}
.theme-seg button:hover{color:var(--ink);background:var(--panel2)}
.theme-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:640}
.theme-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.doc-navlinks{display:flex;align-items:center;gap:1px;flex:0 0 auto}
.doc-navlinks a{padding:6px 9px;border-radius:5px;color:var(--ink2);font-size:13.5px;font-weight:500;white-space:nowrap}
.doc-navlinks a:hover{color:var(--ink);background:var(--panel)}
.doc-navlinks a[aria-current="page"]{color:var(--ink);background:var(--panel2)}

/* ---------- the three columns ---------- */

.doc-grid{
  display:grid;
  grid-template-columns:236px minmax(0,1fr) 208px;
  gap:0 40px;
  align-items:start;
  padding-bottom:96px;
}

/* Both rails are sticky and scroll independently. max-height is what makes the
   second one rather than the viewport do the constraining, so a rail taller than
   the window scrolls on its own instead of pinning and hiding its own tail. */
.doc-rail{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;padding:28px 0 24px;min-width:0}
.doc-rail::-webkit-scrollbar{width:8px}
.doc-rail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}

.rail-label{font-size:11px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}

.doc-side ol{list-style:none;padding:0;margin:0}
.doc-side li{margin:0}
.doc-side a{
  display:block;padding:5px 10px;margin:0 -10px;border-radius:5px;
  color:var(--ink2);font-size:13.5px;line-height:1.45;text-decoration:none;
}
.doc-side a:hover{color:var(--ink);background:var(--panel)}
.doc-side .sub a{padding-left:20px;font-size:13px;color:var(--ink3)}
.doc-side .sub a:hover{color:var(--ink2)}
.doc-side .here{color:var(--ink);font-weight:620;background:var(--panel2)}

.doc-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.doc-toc li{counter-increment:toc;margin:0}
.doc-toc a{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;
  padding:4px 8px;margin:0 -8px;border-radius:5px;
  color:var(--ink3);font-size:12.5px;line-height:1.45;text-decoration:none;
}
.doc-toc a::before{content:counter(toc);color:var(--line2);font-variant-numeric:tabular-nums;text-align:right}
.doc-toc a:hover{color:var(--ink);background:var(--panel)}
/* Sections are the primary entries and subsections hang off them. Only the
   subsection case had a rule, so the sections were inheriting the default and the
   rail read as one undifferentiated list. */
.doc-toc .lvl2{padding-top:6px}
.doc-toc .lvl2 a{color:var(--ink2);font-weight:560}
.doc-toc .lvl2:first-child{padding-top:0}
.doc-toc .lvl3{padding-left:8px}
.doc-toc .lvl3 a{grid-template-columns:16px minmax(0,1fr);padding-left:20px;font-size:12px}
.doc-toc .lvl3 a::before{content:""}

/* ---------- centre column ---------- */

.doc-body{
  min-width:0;
  padding:36px 0 40px;
  /* A measure cap. Long lines are the other way a document becomes unreadable,
     and the centre column is wide enough to need one on a large screen. */
  max-width:74ch;
}

/* ---------- type scale ----------
   Four sizes with a real jump between each. h3 and h4 differ in weight and colour
   rather than pretending to be different sizes, because at these measures a 1px
   size difference is invisible while a weight difference is not. */

.doc-body h1{
  font-size:clamp(29px,4.4vw,38px);
  font-weight:780;letter-spacing:-.038em;line-height:1.08;
  margin:0 0 12px;color:var(--ink);
}
.doc-body h2{
  font-size:clamp(20px,2.6vw,23px);
  font-weight:720;letter-spacing:-.028em;line-height:1.24;
  margin:52px 0 0;padding-top:26px;border-top:1px solid var(--line);
  color:var(--ink);
}
.doc-body h2:first-of-type{margin-top:34px;padding-top:0;border-top:0}
.doc-body h3{
  font-size:16px;font-weight:660;letter-spacing:-.014em;line-height:1.35;
  margin:32px 0 0;color:var(--ink);
}
.doc-body h4{
  font-size:13.5px;font-weight:680;letter-spacing:.005em;
  margin:22px 0 0;color:var(--ink2);
}
.doc-body p{margin:0 0 15px;color:var(--ink2);font-size:15.5px;line-height:1.68}
.doc-body ul,.doc-body ol{margin:0 0 18px;padding-left:22px}
.doc-body li{margin-bottom:8px;color:var(--ink2);font-size:15px;line-height:1.62}
.doc-body li::marker{color:var(--ink3)}
.doc-body li strong,.doc-body li b{color:var(--ink);font-weight:640}
.doc-body strong,.doc-body b{color:var(--ink);font-weight:640}
.doc-body a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 34%,transparent);text-underline-offset:2.5px}
.doc-body a:hover{text-decoration-color:currentColor}

.doc-lede{font-size:17px;line-height:1.62;color:var(--ink2);margin:0 0 26px}
.doc-meta{font-size:13px;color:var(--ink3);margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--line)}

/* ---------- code ---------- */

.doc-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.87em;color:var(--ink);
  background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  /* long slugs and URLs must break rather than widen the column */
  overflow-wrap:anywhere;
}
.doc-body pre{
  background:var(--sunk);border:1px solid var(--line);border-radius:7px;
  padding:14px 15px;margin:0 0 20px;overflow-x:auto;
}
.doc-body pre code{
  background:none;border:0;padding:0;border-radius:0;
  font-size:12.5px;line-height:1.72;color:var(--ink2);white-space:pre;overflow-wrap:normal;
}
.doc-body pre .cm{color:var(--ink3)}
.doc-body pre b{color:var(--ink);font-weight:600}

/* ---------- tables ---------- */

.doc-tablewrap{margin:0 0 22px;border:1px solid var(--line);border-radius:7px;overflow-x:auto;background:var(--panel)}
.doc-tablewrap table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:440px}
.doc-tablewrap th,.doc-tablewrap td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.doc-tablewrap th{color:var(--ink2);font-weight:640;font-size:12px;letter-spacing:.03em;background:var(--panel2);white-space:nowrap}
.doc-tablewrap td{color:var(--ink2)}
.doc-tablewrap td:first-child{color:var(--ink);font-weight:560;white-space:nowrap}
.doc-tablewrap tr:last-child td{border-bottom:0}

/* ---------- definition rows ----------
   A ruled list, not a card grid. Key on the left in a fixed track, meaning on the
   right, one hairline between rows. This is the shape the rest of the site uses
   for facts and it reads better than a table when the values run long. */

.doc-defs{border-top:1px solid var(--line);margin:0 0 22px}
.doc-defs > div{display:grid;grid-template-columns:186px minmax(0,1fr);gap:6px 20px;padding:11px 0;border-bottom:1px solid var(--line)}
.doc-defs dt{font-size:13.5px;font-weight:620;color:var(--ink)}
.doc-defs dd{margin:0;min-width:0;font-size:14px;color:var(--ink2);line-height:1.6}

/* ---------- callouts ----------
   A left rule and a label. No fill, no icon, no rounded box — a filled box here
   would be the loudest thing on the page and it is only ever a footnote. */

.doc-note{
  border-left:2px solid var(--line2);
  padding:2px 0 2px 15px;margin:0 0 20px;
  font-size:14px;color:var(--ink2);line-height:1.62;
}
.doc-note b,.doc-note strong{display:block;font-size:12.5px;font-weight:660;color:var(--ink);margin-bottom:3px}
.doc-note.warn{border-left-color:var(--warn)}
.doc-note.warn b{color:var(--warn)}
.doc-note.key{border-left-color:var(--accent)}
.doc-note.key b{color:var(--accent)}

/* ---------- endpoint headings ----------
   Each endpoint is a section with the method on one line and the path on the next,
   the way a request reads. */

.doc-ep{margin:0 0 14px}
.doc-ep-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meth{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:2px 6px;border-radius:3px;border:1px solid;
}
.meth.get{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.meth.post{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent)}
.meth.del{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 42%,transparent)}
.ep-path{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;font-weight:600;color:var(--ink);word-break:break-all;min-width:0;
}
.ep-path .var{color:var(--accent)}
.ep-path .opt{color:var(--ink3)}

/* ---------- prev / next ----------
   The only way to reach a neighbouring subject now that each chapter is its own
   page. Two equal slots so "previous" holds its side on the first chapter, where
   there is nothing before it. */

.doc-pager{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
}
.doc-pager a{
  display:block;min-width:0;padding:12px 14px;text-decoration:none;
  border:1px solid var(--line);border-radius:7px;background:var(--panel);
}
.doc-pager a:hover{border-color:var(--line2);background:var(--panel2)}
.doc-pager a span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.doc-pager a b{display:block;font-size:14px;font-weight:640;color:var(--ink);margin-top:3px;letter-spacing:-.012em}
.doc-pager .next{text-align:right}
.doc-pager a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:620px){
  .doc-pager{grid-template-columns:minmax(0,1fr)}
  .doc-pager .next{text-align:left}
}

/* ---------- footer ---------- */

.doc-foot{border-top:1px solid var(--line);padding:22px 0 30px;color:var(--ink3);font-size:13px}
.doc-foot-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.doc-foot nav{display:flex;gap:14px;flex-wrap:wrap}
.doc-foot a{color:var(--ink2);text-decoration:none}
.doc-foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- the in-page rail on a small screen ---------- */

.doc-toc-toggle{display:none}

/* ---------- narrow screens ----------
   Three columns do not survive a phone, so they are given up in order of how much
   they are missed: the anchors go first, then the section list collapses behind a
   disclosure above the prose. The prose itself never gets a treatment. */

@media(max-width:1180px){
  .doc-grid{grid-template-columns:224px minmax(0,1fr)}
  .doc-toc{display:none}
}
@media(max-width:900px){
  .doc-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .doc-side{
    position:static;max-height:none;overflow:visible;
    padding:20px 0 0;border-bottom:1px solid var(--line);margin-bottom:8px;
  }
  .doc-side ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:0 20px}
  .doc-body{padding-top:26px;max-width:none}
}
@media(max-width:620px){
  .doc-shell{padding:0 16px}
  .doc-top-in{flex-wrap:wrap;padding:9px 0;gap:10px}
  .doc-crumb{order:3;flex:1 1 100%}
  .doc-navlinks .hide-s{display:none}
  .doc-body h2{margin-top:40px;padding-top:20px}
  .doc-defs > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .doc-body p{font-size:15px}
}