/* ══════════════════════════════════════════════════════════════════════
   EntBox AI — the standalone document pages: /docs (the developer API) and
   the three legal pages (/terms, /privacy, /aup). Loaded after tokens.css
   and entbox.css, under <html class="dark"> and <body class="entbox-scope">.
   Nothing here depends on style.css (the app shell).

   The EIOS document look: a 64px frame bar, then one centred reading column
   on the canvas. Blocks are outline-first with square corners; rules are
   hairlines. DM Sans for anything that names (titles, labels, controls),
   IBM Plex Sans for anything read as a sentence, --fterm for code only.

   Colour comes from tokens.css alone. Blue marks links and the icons that
   lead; the one status colour here (warn) marks the draft-legal notice, and
   it always sits beside its words. No emoji and no colour-coding: a callout
   says what it is with an icon, an HTTP verb with its name.
   ══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--l1);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--bar) + var(--s4));   /* anchors and focus clear the sticky bar */
}
body.entbox-scope{
  --pg-col:760px;          /* docs: wide enough for the samples (96 columns of 12px mono) */
  margin:0;min-height:100vh;
  background:var(--l1);color:var(--ink2);
  font-family:var(--fb);font-size:var(--t-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
/* legal: all prose, so the column is the reading measure (32em: about 72 characters a line;
   the 640px it was ran 93-98) */
body.entbox-scope.pg-legal{--pg-col:var(--measure)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--l3);border:2px solid var(--l1)}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}
:focus-visible{outline:none;box-shadow:var(--focus)}

/* icons.js swaps every <i data-ic> for an inline outline svg (24 grid, currentColor) */
.ic{display:block;flex:0 0 auto;width:16px;height:16px}

/* ── the frame bar: lockup left, the way back right ─────────────────── */
.pg-bar{position:sticky;top:0;z-index:20;height:var(--bar);background:var(--l0);border-bottom:1px solid var(--line)}
.pg-bar-in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  height:100%;max-width:calc(var(--pg-col) + 2 * var(--s6));margin:0 auto;padding:0 var(--s6);
}
.pg-brand{display:inline-flex;align-items:center;flex:0 0 auto;padding:var(--s1);margin:calc(-1 * var(--s1));color:var(--ink);text-decoration:none}   /* the padding keeps the focus ring off the mark */
.pg-brand svg{display:block;height:24px;width:auto;aspect-ratio:484 / 84;overflow:visible;color:var(--ink)}
.pg-back{
  display:inline-flex;align-items:center;gap:var(--s2);flex:0 0 auto;
  height:36px;padding:0 var(--s3);
  border:1px solid var(--line-strong);background:transparent;color:var(--ink2);
  font-family:var(--fh);font-size:var(--t-body);font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;
  transition:color .15s,border-color .15s,background-color .15s;
}
.pg-back:hover{color:var(--ink);border-color:var(--line-ui);background:var(--tint-soft)}

/* ── the reading column ─────────────────────────────────────────────── */
.pg-main{
  max-width:calc(var(--pg-col) + 2 * var(--s6));margin:0 auto;
  padding:var(--s7) var(--s6) calc(2 * var(--s7));
  overflow-wrap:break-word;
}
.pg-main h1,.pg-main h2,.pg-main h3{margin:0;font-family:var(--fh);font-weight:600;color:var(--ink)}
.pg-main h1{font-size:var(--t-fig);line-height:var(--lh-head);letter-spacing:-.01em}
/* a section opens on a hairline: the rule sits nearer the heading it belongs to */
.pg-main h2{
  margin:var(--s6) 0 var(--s3);padding-top:var(--s5);border-top:1px solid var(--line-soft);
  font-size:var(--t-title);line-height:var(--lh-head);letter-spacing:-.01em;
}
.pg-main h3{font-size:var(--t-lg);line-height:var(--lh-head)}
.pg-main p{margin:0 0 var(--s3)}
.pg-main b,.pg-main strong{font-weight:600;color:var(--ink)}
.pg-main ul{margin:0 0 var(--s4);padding-left:var(--s5);list-style:square}
.pg-main li{margin:0 0 var(--s2);padding-left:var(--s1)}
.pg-main li::marker{color:var(--ink3)}
.pg-main a{
  color:var(--soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--line-ui);transition:color .15s,text-decoration-color .15s;
}
.pg-main a:hover{color:var(--ink);text-decoration-color:var(--soft)}

/* page head: title, then the lede (docs) or the version line and document switcher (legal) */
.pg-main .pg-lede{margin:var(--s3) 0 0;font-size:var(--t-lg);line-height:1.6;color:var(--ink2)}
.pg-main .pg-meta{
  margin:var(--s2) 0 0;font-family:var(--fh);font-size:var(--t-sm);font-weight:500;line-height:var(--lh-ui);
  color:var(--ink3);font-variant-numeric:tabular-nums;
}
/* the document switcher: a segmented control; the current page takes the "on" edge (3:1) */
.pg-tabs{display:flex;width:max-content;max-width:100%;margin-top:var(--s5)}
.pg-main .pg-tab{
  position:relative;display:inline-flex;align-items:center;height:36px;padding:0 var(--s4);margin-left:-1px;
  border:1px solid var(--line);color:var(--ink2);
  font-family:var(--fh);font-size:var(--t-body);font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;
  transition:color .15s,background-color .15s,border-color .15s;
}
.pg-main .pg-tab:first-child{margin-left:0}
.pg-main .pg-tab:hover{color:var(--ink);background:var(--tint-soft)}
.pg-main .pg-tab[aria-current="page"]{z-index:1;color:var(--ink);background:var(--tint);border-color:var(--line-ui)}
.pg-main .pg-tab:focus-visible{z-index:2}

/* callouts: an outline block, an icon that says what kind, then the words */
.pg-callout{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s3);align-items:start;
  margin:var(--s5) 0;padding:var(--s4);
  border:1px solid var(--line);background:transparent;color:var(--ink2);
}
.pg-callout .ic{margin-top:3px;color:var(--soft)}         /* centred on the first 22px line */
.pg-main .pg-callout p{margin:0}
.pg-callout-warn{border-color:var(--warn-line);background:var(--warn-tint)}
.pg-callout-warn .ic{color:var(--warn)}
.pg-callout-end{margin-top:var(--s6)}

/* endpoints: the verb is a name in an outline, never a colour. Verbs share one width so the
   paths form a column; a long path wraps inside that column (at a slash, never mid-word). */
.pg-main .pg-ep{display:flex;align-items:flex-start;gap:var(--s3);margin:var(--s6) 0 var(--s2)}
.pg-main h2 + .pg-ep{margin-top:var(--s4)}
.pg-verb{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:52px;height:22px;padding:0 var(--s2);
  border:1px solid var(--line-strong);color:var(--ink);
  font-family:var(--fh);font-size:var(--t-sm);font-weight:600;line-height:1;
}
.pg-path{flex:1 1 auto;min-width:0;font-family:var(--fterm);font-size:var(--t-md);font-weight:500;line-height:22px;color:var(--ink);overflow-wrap:anywhere}
.pg-ep-sep{color:var(--ink3);font-weight:400}

/* code: the frame surface, a hairline edge, system mono; long lines scroll inside the block */
.pg-main code{
  padding:1px var(--s1);border:1px solid var(--line);border-radius:0;background:var(--l0);color:var(--ink);
  font-family:var(--fterm);font-size:var(--t-sm);line-height:1.4;overflow-wrap:anywhere;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;     /* a chip that wraps keeps its edges */
}
.pg-main pre{
  margin:var(--s3) 0 var(--s5);padding:var(--s4) var(--s5);
  border:1px solid var(--line);border-radius:0;background:var(--l0);
  overflow-x:auto;tab-size:2;
}
.pg-main pre code{
  display:block;width:max-content;min-width:100%;padding:0;border:0;background:none;
  font-size:var(--t-sm);line-height:1.65;white-space:pre;overflow-wrap:normal;
}
.pg-main pre::-webkit-scrollbar-thumb{border-color:var(--l0)}
.pg-main .str{color:var(--ice)}
.pg-main .com{color:var(--ink3)}

/* tables: 40px rows, a raised header, hairline rows; scrolls inside its outline if it must */
.pg-table{margin:var(--s4) 0 var(--s5);border:1px solid var(--line);overflow-x:auto}
.pg-table table{width:100%;border-collapse:collapse;font-size:var(--t-body);line-height:var(--lh-table)}
.pg-table th,.pg-table td{height:var(--row);padding:var(--s2) var(--s3);text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-soft)}
.pg-table thead th{
  background:var(--l2);border-bottom-color:var(--line);color:var(--ink3);
  font-family:var(--fh);font-size:var(--t-sm);font-weight:500;white-space:nowrap;
}
.pg-table td{color:var(--ink2)}
.pg-table td:first-child,.pg-table td:nth-child(2){white-space:nowrap}
.pg-table tbody tr:last-child td{border-bottom:0}
.pg-table tbody tr:hover td{background:var(--tint-soft)}

/* ── phone: 16px gutters, nothing wider than the screen ─────────────── */
@media (max-width:640px){
  .pg-bar-in{padding:0 var(--s4)}
  .pg-back,.pg-main .pg-tab{height:var(--row)}          /* 40px touch targets */
  .pg-main{padding:var(--s6) var(--s4) var(--s7)}
  .pg-main h2{margin-top:var(--s5)}
  .pg-main pre{padding:var(--s3) var(--s4)}
  .pg-table th,.pg-table td{padding:var(--s2)}
}

@media (prefers-reduced-motion:reduce){
  .pg-back,.pg-main a,.pg-main .pg-tab{transition:none}
}

/* print or save as PDF: keep the page as it looks on screen, minus the way back */
@media print{
  html,body.entbox-scope{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pg-bar{position:static}
  .pg-back{display:none}
  .pg-main{padding-top:var(--s5)}
  .pg-main pre code{width:auto;white-space:pre-wrap}
  .pg-main pre,.pg-callout,.pg-table tr{break-inside:avoid}
}

/* ══════════════════════════ TYPE ROLES (last on purpose: it must win) ══════
   The console's roles (tokens.css --type-*), with the two a standalone
   document adds: reading-lg (16/24) for its text and lede (18/28) for its
   opening. Hierarchy: title 28 > section 20 > subsection 16 > text 16.
   Prose keeps to --measure (about 72 characters); code samples and tables
   may use the full docs column. */
body.entbox-scope{font:var(--type-reading-lg)}
.pg-main h1{font:var(--type-doc);letter-spacing:0}
.pg-main h2{font:var(--type-page);letter-spacing:0}
.pg-main h3{font:var(--type-section);letter-spacing:0}
.pg-main p,.pg-main li,.pg-callout{font:var(--type-reading-lg);letter-spacing:0}
.pg-main > p,.pg-main > ul,.pg-callout{max-width:var(--measure)}
.pg-main .pg-lede{font:var(--type-lede);letter-spacing:0;max-width:var(--measure)}
.pg-main .pg-meta{font:var(--type-label);letter-spacing:var(--track-label);font-variant-numeric:tabular-nums}
.pg-back{font:var(--type-control);letter-spacing:0}
.pg-main .pg-tab{font:var(--type-nav);letter-spacing:0}
.pg-main .pg-tab[aria-current="page"]{font-weight:600}
.pg-verb{font:var(--type-label);letter-spacing:var(--track-label)}
/* an endpoint's path names it; its 22px line centres on the verb chip beside it */
.pg-path{font:var(--type-code-lg);font-weight:500;line-height:22px;letter-spacing:0}
.pg-ep-sep{font-weight:400}
.pg-main code{font:var(--type-code-lg);letter-spacing:0}          /* code inside a sentence: 13px sits with 16px text */
.pg-main pre code{font:var(--type-code);letter-spacing:0}         /* samples stay 12px so 96 columns fit the docs column */
.pg-table table{font:var(--type-ui);letter-spacing:0}
.pg-table thead th{font:var(--type-label);letter-spacing:var(--track-label)}