/* One type system for every robouse.ai page: heading scale, body text, links, code, tables, lists, quotes,
   captions, the page title block, breadcrumbs and the content grid. Every value comes from /tokens.css. Linked on every page right after
   /chrome.css (tools/chrome.py adds it and `chrome.py check` enforces it); page stylesheets add layout only. */
/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased}

/* content grid: the same 1120px container and 24px gutters as the shared header */
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}

/* headings: h1 and h2 serif, h3 sans semibold */
h1,h2,h3{color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
h4,h5,h6,dt,th,td,li,p{overflow-wrap:break-word}  /* a long identifier in a heading or cell wraps instead of widening the page */
h1{margin:0 0 var(--sp-14);font:500 var(--fs-h1)/1.15 var(--serif);letter-spacing:-.015em}
h2{margin:var(--sp-48) 0 var(--sp-12);font:500 var(--fs-h2)/1.25 var(--serif);letter-spacing:-.005em}
h3{margin:var(--sp-32) 0 var(--sp-8);font:600 var(--fs-h3)/1.4 var(--sans);letter-spacing:0}
h2 code,h3 code{font-size:.8em}

/* page title block: h1 and a lede */
.page-head{margin:0 0 var(--sp-36)}
.page-head h1{margin:0 0 var(--sp-14)}
.lede{margin:0;max-width:var(--measure);font:400 var(--fs-lede)/1.55 var(--sans);color:var(--ink2)}
.lede + .lede{margin-top:var(--sp-10)}

/* breadcrumbs */
.crumbs{margin:0 0 var(--sp-20);font:400 var(--fs-small)/1.4 var(--sans);color:var(--muted);overflow-wrap:anywhere}
.crumbs a{color:var(--muted);text-decoration:none;transition:color var(--t-fast)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 var(--sp-8);color:var(--faint)}
@media (pointer:coarse),(max-width:640px){.crumbs a{display:inline-block;padding:var(--sp-12) 0;margin:calc(-1 * var(--sp-12)) 0}}

/* running text */
.prose{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);overflow-wrap:break-word}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose dl{margin:0 0 var(--sp-16);max-width:var(--measure)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:var(--sp-4) 0}
.prose li > ul,.prose li > ol{margin:var(--sp-4) 0 var(--sp-6)}
.prose strong{font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line);margin:var(--sp-32) 0}
.prose img{max-width:100%;height:auto}
blockquote{margin:0 0 var(--sp-16);padding:var(--sp-2) 0 var(--sp-2) var(--sp-16);border-left:2px solid var(--line-strong);color:var(--ink2)}

/* every link, whatever page builds it, starts from ink (never the browser's blue); zero specificity, so any class wins */
:where(a){color:var(--ink);text-decoration-color:var(--link-line);text-decoration-thickness:1px;text-underline-offset:3px}
:where(a):hover{color:var(--accent);text-decoration-color:currentColor}
/* links in text: ink with a subtle underline, accent on hover */
.prose a,.lede a,.note a,a.ln{color:var(--ink);text-decoration:underline;text-decoration-color:var(--link-line);
  text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.prose a:hover,.lede a:hover,.note a:hover,a.ln:hover{color:var(--accent);text-decoration-color:currentColor}

/* code: one style, a light panel with a hairline border, Commit Mono */
code,kbd,samp,pre{font-family:var(--mono)}
.prose :not(pre) > code,.note code,code.inl{font-size:.875em;color:var(--ink2);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:.05em .35em;overflow-wrap:anywhere}
.prose a > code{color:inherit}
pre{margin:0 0 var(--sp-20);padding:var(--sp-14) var(--sp-16);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  overflow-x:auto;-webkit-overflow-scrolling:touch;font:400 var(--fs-code)/1.6 var(--mono);color:var(--ink);tab-size:4}
pre code{display:block;width:max-content;min-width:100%;padding:0;background:none;border:0;border-radius:0;
  font:inherit;color:inherit;white-space:pre;overflow-wrap:normal}
pre .p{color:var(--faint);user-select:none}
pre .o{color:var(--muted)}
/* a code block with a copy button: <div class="code"><pre>…</pre><button class="copy">Copy</button></div> */
.code{position:relative;margin:0 0 var(--sp-20)}
.code > pre{margin:0}
.copy{position:absolute;top:8px;right:8px;padding:var(--sp-6) var(--sp-8);font:400 var(--fs-caption)/1 var(--sans);color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;opacity:0;transition:opacity var(--t-fast),color var(--t-fast)}
.code:hover .copy,.copy:focus-visible{opacity:1}
.copy:hover{color:var(--ink)}
@media (hover: none){.copy{opacity:1}}

/* tables: sans headers in sentence case, hairlines */
table{border-collapse:collapse;font:400 var(--fs-small)/1.5 var(--sans);font-variant-numeric:tabular-nums}
.prose table{width:100%}
th,td{padding:var(--sp-8) var(--sp-16) var(--sp-8) 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{font:500 var(--fs-meta)/1.4 var(--sans);color:var(--muted);letter-spacing:0;text-transform:none;border-bottom-color:var(--line-strong);vertical-align:bottom}
th:last-child,td:last-child{padding-right:0}
/* numeric columns sit right-aligned in tabular figures, header included (ui.js marks them .num in .prose tables and table.t) */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
th.num + th:not(.num),td.num + td:not(.num){padding-left:var(--sp-8)}
tbody th{font-weight:500}
td code,th code{font-size:.92em;white-space:nowrap}
.table,.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{margin:0 0 var(--sp-20)}

/* figures */
figure{margin:0}
figcaption{margin-top:var(--sp-10);font:400 var(--fs-small)/1.5 var(--sans);color:var(--muted);letter-spacing:0;text-transform:none}

/* small print */
.note{margin:var(--sp-20) 0 0;font:400 var(--fs-small)/1.6 var(--sans);color:var(--muted);max-width:var(--measure)}

@media (max-width:640px){
  pre{font-size:var(--fs-meta)}
}

.lede code{font-size:var(--fs-small);color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xs);padding:0 var(--sp-6)}

.crumbs span[aria-current]{margin:0;color:var(--muted)}