/* ===========================================================================
   Design Stream — the docs pages' shared chrome (gallery/docs/docs.css)
   ===========================================================================
   The public pages at /llms, /brand and /mcp. The same drawing set as the
   landing page (gallery/landing/landing.css): cool paper with a ruled grid,
   white sheets with a 1px ink border, Archivo for display, IBM Plex Sans for
   reading, IBM Plex Mono for labels and code, and one accent — blueprint blue
   — spent on links, filled buttons and markers.

   Single, committed light theme, because the landing page is one: the page
   paints its own ground and never inherits the viewer's scheme. A reader who
   arrives from the footer should not feel the product change under them.

   THIS FILE IS THE CHROME, AND ONLY THE CHROME
   ---------------------------------------------------------------------------
   Three pages written by different hands share it, and each can break the
   other two from here. So nothing page-specific lives in this file: a rule
   that serves one page goes in THAT page's own <style> block (or a
   docs/<page>.css beside it), under a class prefix of its own — .llms-,
   .logo-, .mcp-. Edit this file only for something every docs page needs.

   AUTHORING A DOCS PAGE
   ---------------------------------------------------------------------------
   Copy docs/brand.html or docs/mcp.html and replace what sits between the
   CONTENT comments. Keep the rest, which is the contract:

     head   charset, viewport, <title>Page — Design Stream</title>, a meta
            description, <link rel="canonical"> naming the ONE address
            (https://designstream.dev/<address>), the favicon link (pinned
            byte-for-byte by tests/test_gallery_brand_mark.py), the three
            Google font families, /docs/docs.css, /docs/docs.js with defer.
     paths  ROOT-ABSOLUTE, always (/docs/..., /llms.txt). The Worker strips
            a trailing slash, so /llms/ is served as /llms, and a relative
            path would resolve under a /llms/ directory that does not exist.
     mark   the header and footer lockups are the pinned inline SVG. Never an
            <img> or <link> to brand/icon-*.svg for the lockup, never a
            second favicon, and no "0 0 512 512" viewBox anywhere in the page
            (the old hand-drawn logo's canvas; the test refuses it).
     route  a page is published by a row in infra/worker/src/session.ts
            PUBLIC_PAGES — without one /docs/<name>.html is signed-in-only
            like every other page — and listed in robots.txt, sitemap.xml,
            the nav and both footers (this one and gallery/landing.html).

   THE SKELETON — every class here is styled below
   ---------------------------------------------------------------------------
     a.skip                              "Skip to content", to #main
     header.site-head                    sticky top bar (static on phones)
       div.wrap.site-head-in
         a.brand > span.mark + span      the lockup; links to /
         nav.site-nav > a                llms.txt · Logo & Icons · MCP, with
                                         aria-current="page" on this page's
         a.btn.site-cta                  Sign in
     div.wrap.doc-layout                 grid; docs.js adds .has-toc
       main#main.doc-main
         header.doc-head
           div.tb > span.n, span.t, span  drafting title block (optional)
           p.kicker, h1, p.lede
           div.doc-actions > .btn        buttons under the lede (optional)
         div.sheet.prose                 the article
       nav.toc[data-toc]                 filled by docs.js; delete it for no TOC
     footer.site-foot > div.wrap > div.foot
       div.foot-in > a.brand + nav.foot-links
       p.legal

   Inside .prose, plain HTML is styled: h2-h4, p, ul, ol, blockquote, pre,
   code, kbd, table, hr, img, figure. Plus:
     aside.callout (.warn)   <aside class="callout"><p class="callout-t">Note
                             </p><p>...</p></aside>
     div.table-wrap          scrolls a wide table inside itself (docs.js adds
                             one round any table that lacks it)
     div.code                a pre with its bar and Copy button (docs.js)
     .figcap, .muted         captions, quiet text

   WHAT docs.js DOES — window.DocsChrome.enhance(root)
   ---------------------------------------------------------------------------
   Runs once on DOMContentLoaded, over every .prose in the page. It is
   idempotent, so a page that renders content LATE (docs/llms.html fetches
   its Markdown) calls it again afterwards.
     headings  every h2, h3 and h4 in .prose gets an id — its own if it has
               one, else a slug of its text — and its text becomes a link to
               itself (a.h-link); the "#" shows on hover and focus. Give a
               heading an id by hand when its URL must never change.
     code      every pre is wrapped in div.code with a bar: a label (the
               pre's data-label, else the language-* class on its code) and a
               Copy button that copies the pre's text.
     tables    wrapped in div.table-wrap.
     toc       [data-toc] lists the h2s and h3s and marks the one in view.
               Fewer than two headings and it stays hidden, and the layout
               stays one column.
   ========================================================================= */

/* ---------- tokens — the landing page's, value for value ---------- */
:root{
  --paper:#EDEFF3; --sheet:#FAFBFC;
  --ink:#10131A; --ink-2:#4C5563; --ink-3:#6B7482;
  --rule:#C9CFD8; --rule-strong:#9AA3B1;
  --bp:#1F3BE6; --bp-2:#1730C0; --tint:rgba(31,59,230,.07);
  --grid-minor:rgba(16,19,26,.04); --grid-major:rgba(16,19,26,.09);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --head-h:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 24px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);
  font:400 16.5px/1.6 var(--body);
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-minor) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,8px 8px,8px 8px;
}
img{max-width:100%}
a{color:var(--bp)}
:focus-visible{outline:2px solid var(--bp);outline-offset:3px}
.btn.fill:focus-visible{outline-color:var(--ink)}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:12px 14px;background:var(--bp);color:#fff;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:2px}
.skip:focus{top:12px}
/* Narrower than the landing page's 1240px: header, article and footer share
   one measure, and a reading page wants a shorter line than a bento does.
   Inline padding only, so a .wrap that also sets its own vertical padding
   (.doc-layout) keeps it at every breakpoint. */
.wrap{width:100%;max-width:1160px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--ink-2)}
.mono{font-family:var(--mono)}

/* ---------- buttons (the landing page's) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--bp);border-radius:2px;background:var(--sheet);color:var(--bp);font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--tint)}
.btn.fill{background:var(--bp);color:#fff}
.btn.fill:hover{background:var(--bp-2);border-color:var(--bp-2)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(237,239,243,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-strong)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;
  background:
    repeating-linear-gradient(to right,var(--rule-strong) 0 1px,transparent 1px 64px) left top/100% 7px no-repeat,
    repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 8px) left bottom/100% 3px no-repeat}
.site-head-in{display:flex;align-items:center;gap:20px;min-height:var(--head-h)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 15px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.mark{display:inline-block;width:22px;height:22px;color:var(--ink)}
.mark svg{display:block;width:100%;height:100%}
.site-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.site-nav a{font:500 13.5px/1 var(--body);color:var(--ink-2);text-decoration:none;padding:8px 10px;border-bottom:1px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.site-nav a:hover{color:var(--bp);border-bottom-color:var(--bp)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.site-cta{height:38px;padding:0 14px}

/* ---------- layout ---------- */
.doc-layout{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding-top:48px;padding-bottom:72px}
.doc-layout.has-toc{grid-template-columns:minmax(0,1fr) 220px}
.doc-main{min-width:0}
.doc-main:focus{outline:none}

/* ---------- page head ---------- */
.doc-head{margin:0 0 32px}
/* Each cell draws its own box, overlapping its neighbours by a pixel, so a
   title block that wraps on a phone does not leave a rule over empty space. */
.tb{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;margin:0 0 32px;padding:1px 0 0 1px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tb span{padding:9px 12px;margin:-1px 0 0 -1px;background:var(--sheet);border:1px solid var(--rule-strong);white-space:nowrap}
.tb .n{color:var(--bp);font-weight:500}
.tb .t{color:var(--ink);font-weight:500}
.kicker{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);margin:0 0 14px}
.doc-head h1{font:700 clamp(2.4rem,5vw,3.6rem)/1 var(--display);font-stretch:92%;letter-spacing:-.03em;margin:0 0 18px;text-wrap:balance}
.lede{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0 0 24px}
.lede:last-child{margin-bottom:0}
.doc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ---------- the article ---------- */
.sheet{background:var(--sheet);border:1px solid var(--ink);box-shadow:1px 1px 0 var(--ink)}
.prose{padding:40px 48px 48px;font-size:16.5px;line-height:1.65;overflow-wrap:break-word}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose p,.prose ul,.prose ol,.prose dl{margin:0 0 1.1em;max-width:72ch}
.prose h2,.prose h3,.prose h4{text-wrap:balance}
.prose h3,.prose h4{max-width:48ch}
.prose h2{font:700 1.75rem/1.15 var(--display);font-stretch:95%;letter-spacing:-.02em;margin:2.2em 0 .7em;padding-top:1em;border-top:1px solid var(--rule-strong)}
.prose > h2:first-child{padding-top:0;border-top:0}
.prose h3{font:600 1.25rem/1.25 var(--display);letter-spacing:-.015em;margin:1.8em 0 .5em}
.prose h4{font:500 12px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:1.8em 0 .6em}
.prose h2 + h3{margin-top:1em}
.prose a{color:var(--bp);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--bp-2);text-decoration-thickness:2px}
/* A heading that links to itself: the text stays a heading, the "#" is a
   hover and focus hint. The empty alt text keeps the glyph out of the link's
   accessible name where the syntax is supported. */
.prose a.h-link{color:inherit;text-decoration:none}
.prose a.h-link::after{content:"#";content:"#"/"";margin-left:.3em;font:400 .8em/1 var(--mono);color:var(--bp);opacity:0;transition:opacity .15s}
.prose a.h-link:hover::after,.prose a.h-link:focus-visible::after{opacity:1}
.prose ul,.prose ol{padding-left:1.35em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--bp)}
.prose li > ul,.prose li > ol{margin:.4em 0 0}
.prose blockquote{margin:0 0 1.2em;padding:2px 0 2px 18px;border-left:2px solid var(--bp);color:var(--ink-2);max-width:72ch}
.prose blockquote > :last-child{margin-bottom:0}
.prose hr{border:0;border-top:1px solid var(--rule-strong);margin:2.2em 0}
.prose img{height:auto}
.prose figure{margin:0 0 1.3em}
.figcap,.prose figcaption{font:400 11.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink-2);margin:10px 0 0}
.prose strong{font-weight:600;color:var(--ink)}
.prose code{font:400 .88em/1.4 var(--mono);background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:.06em .35em;overflow-wrap:anywhere}
.prose kbd{font:500 .82em/1.4 var(--mono);background:var(--sheet);border:1px solid var(--rule-strong);border-bottom-width:2px;border-radius:2px;padding:0 .4em}

/* code blocks — a pre scrolls inside itself; the page never does */
.prose pre{margin:0 0 1.3em;padding:16px 18px;background:var(--paper);border:1px solid var(--rule-strong);overflow-x:auto;font:400 13.5px/1.65 var(--mono);color:var(--ink);tab-size:2;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.prose pre code{font:inherit;background:none;border:0;border-radius:0;padding:0;white-space:pre;overflow-wrap:normal}
.code{margin:0 0 1.3em;background:var(--paper);border:1px solid var(--rule-strong)}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;padding:0 6px 0 14px;border-bottom:1px solid var(--rule)}
.code-label{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.code pre{margin:0;border:0}
.copy{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--rule-strong);border-radius:2px;background:var(--sheet);color:var(--ink-2);font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .15s,border-color .15s}
.copy:hover{color:var(--bp);border-color:var(--bp)}
.copy[data-state="done"]{color:var(--bp);border-color:var(--bp)}
.copy[data-state="failed"]{color:var(--ink);border-color:var(--ink)}

/* tables — .spec on the landing page, generalised */
.table-wrap{margin:0 0 1.3em;overflow-x:auto;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose > table{margin:0 0 1.3em}
.prose caption{text-align:left;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:12px 0 8px}
.prose th{text-align:left;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:12px 18px 10px 0;border-bottom:1px solid var(--rule-strong);vertical-align:bottom}
.prose td{padding:11px 18px 11px 0;border-top:1px solid var(--rule);vertical-align:top}
.prose tbody tr:first-child td{border-top:0}
.prose th:last-child,.prose td:last-child{padding-right:0}

/* callouts */
.callout{margin:0 0 1.3em;padding:14px 18px;max-width:72ch;background:var(--tint);border:1px solid var(--bp);border-left-width:4px}
.callout > :last-child{margin-bottom:0}
.callout-t{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);margin:0 0 8px}
.callout.warn{background:var(--paper);border-color:var(--ink)}
.callout.warn .callout-t{color:var(--ink)}

/* ---------- table of contents ---------- */
.toc{position:sticky;top:calc(var(--head-h) + 32px);align-self:start;max-height:calc(100vh - var(--head-h) - 56px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.toc-t{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--rule-strong)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:block;padding:6px 0 6px 12px;border-left:1px solid var(--rule-strong);font:400 14px/1.35 var(--body);color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
.toc .toc-l3 a{padding-left:24px;font-size:13.5px}
.toc a:hover{color:var(--bp)}
.toc a[aria-current="true"]{color:var(--bp);border-left:2px solid var(--bp);padding-left:11px}
.toc .toc-l3 a[aria-current="true"]{padding-left:23px}

/* ---------- footer (the landing page's .foot) ---------- */
.site-foot{padding:0 0 40px}
.foot{background:var(--sheet);border:1px solid var(--ink)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:18px 24px;border-bottom:1px solid var(--rule)}
.foot-links{display:flex;flex-wrap:wrap;gap:14px 20px;margin-left:auto}
.foot-links a{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:color .15s,border-color .15s}
.foot-links a:hover{color:var(--bp);border-bottom-color:var(--bp)}
.foot-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.legal{padding:14px 24px 16px;font:400 12px/1.6 var(--mono);color:var(--ink-2);margin:0}
.legal .c{color:var(--ink);font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .doc-layout.has-toc{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:759px){
  /* Two rows of header would eat a phone's screen if they stuck. */
  html{scroll-padding-top:16px}
  .site-head{position:relative}
  .site-head-in{flex-wrap:wrap;gap:0 16px;padding-top:10px}
  .site-cta{margin-left:auto}
  .site-nav{order:3;flex:1 0 100%;margin:4px 0 6px;gap:2px;overflow-x:auto;scrollbar-width:none}
  .site-nav a:first-child{padding-left:0}
  .doc-layout{padding-top:32px;padding-bottom:48px}
  .prose{padding:28px 22px 32px}
  .prose h2{font-size:1.5rem}
}
@media (max-width:599px){
  .wrap{padding-left:16px;padding-right:16px}
  .tb{margin-bottom:24px}
  .lede{font-size:17px}
  .prose{padding:24px 16px 28px;font-size:16px}
  .prose pre{padding:14px;font-size:12.5px}
  .foot-in{padding:16px}
  .foot-links{margin-left:0}
  .legal{padding:12px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}