/* ═══════════════════════════════════════════════════════════════════════════
   ra-docs.css — the /docs surface (static documentation pages)
   Built by tools/build-docs-css.mjs — do not hand-edit; edit the source sheet.
     · work/agent/docs/assets/docs.css  (retokenised)
     · tools/build-docs-css.mjs         (legacy-name aliases + corrections)
   Every colour/radius/font-size resolves to an ra.css token; both themes come
   from ra.css, so this sheet declares no palette of its own.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--bg:var(--ra-bg);--panel:var(--ra-panel);--panel2:var(--ra-panel-2);--line:var(--ra-line);--ink:var(--ra-ink);--mut:var(--ra-muted);--mut2:var(--ra-muted);--ac:var(--ra-accent-text);--ac2:var(--ra-accent);--ok:var(--ra-ok);--warn:var(--ra-warn);--err:var(--ra-bad);--mono:var(--ra-mono)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:var(--fs-base)/1.7 var(--ra-font);-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--ra-accent-soft) 88%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{max-width:1000px;margin:0 auto;padding:0 22px;height:58px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;font-size:var(--fs-base);letter-spacing:-.2px}
.logo b{width:26px;height:26px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--ac2),var(--ra-accent-soft));display:flex;align-items:center;justify-content:center;color:var(--ra-ink);font-size:var(--fs-sm)}
.logo span{color:var(--mut);font-weight:500}
.top-nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.top-nav a{color:var(--mut);padding:6px 11px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:550}
.top-nav a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
.top-nav a.on{color:var(--ac)}
.wrap{max-width:1000px;margin:0 auto;padding:44px 22px 80px}
.kicker{color:var(--ac);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:10px}
h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.7px;line-height:1.15;margin-bottom:14px}
h1 .dim{color:var(--mut2)}
.sub{color:var(--mut);font-size:var(--fs-base);max-width:640px;margin-bottom:26px}
.meta{color:var(--mut2);font-size:var(--fs-sm);border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px;display:flex;gap:16px;flex-wrap:wrap}
article{max-width:760px}
article h2{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.3px;margin:38px 0 12px}
article h3{font-size:var(--fs-md);font-weight:650;margin:26px 0 8px}
article p{margin:0 0 14px;color:var(--ra-accent-text)}
article ul,article ol{margin:0 0 16px 22px;color:var(--ra-accent-text)}
article li{margin:5px 0}
article code{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.5px 7px;font-family:var(--ra-mono);font-size:var(--fs-sm);color:var(--ra-accent-text)}
article pre{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 17px;overflow-x:auto;margin:0 0 18px}
article pre code{background:none;border:none;padding:0;color:var(--ra-accent-text);font-size:var(--fs-sm);line-height:1.65;display:block}
.callout{border:1px solid var(--line);border-left:3px solid var(--ac);background:var(--panel);border-radius:var(--r-sm);padding:13px 16px;font-size:var(--fs-sm);color:var(--ra-accent-text);margin:0 0 18px}
.callout.warn{border-left-color:var(--warn)}
.callout.danger{border-left-color:var(--err)}
.callout b{color:var(--ink)}
.card{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);padding:18px 20px;margin:0 0 14px}
.card h3{margin:0 0 6px;font-size:var(--fs-base)}
.card p{margin:0;color:var(--mut);font-size:var(--fs-sm)}
.badge{display:inline-block;background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);padding:2px 11px;font-size:var(--fs-xs);font-weight:600;margin-right:7px}
.badge.ac{color:var(--ac);border-color:var(--ra-accent)}
.badge.ok{color:var(--ok);border-color:var(--ra-ok)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:20px 0 30px}
.tile{display:block;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);padding:18px;transition:.16s}
.tile:hover{border-color:var(--ra-accent);transform:translateY(-2px);text-decoration:none}
.tile b{display:block;color:var(--ink);font-size:var(--fs-base);margin-bottom:5px}
.tile span{color:var(--mut);font-size:var(--fs-sm);line-height:1.55;display:block}
.tile em{display:inline-block;margin-top:9px;color:var(--ac);font-size:var(--fs-sm);font-style:normal;font-weight:600}
.tbl{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:var(--fs-sm)}
.tbl th{text-align:left;color:var(--mut);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ra-accent-text)}
.tbl td code{background:none;border:none;padding:0;color:var(--ra-accent-text);font-size:var(--fs-sm)}
.foot{border-top:1px solid var(--line);margin-top:60px;padding-top:22px;color:var(--mut2);font-size:var(--fs-sm);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:44px}
.pager a{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);padding:11px 16px;font-size:var(--fs-sm);color:var(--mut);max-width:48%}
.pager a b{display:block;color:var(--ink);font-size:var(--fs-sm)}
.pager a:hover{border-color:var(--ra-accent);text-decoration:none}
@media(max-width:640px){h1{font-size:var(--fs-xl)}.top-nav a{display:none}.top-nav a.on{display:inline-block}.wrap{padding-top:28px}}

/* ── corrections the colour classifier cannot make (see build-docs-css.mjs) ── */

/* body copy: light blue-grey text on a dark page is the ink ramp, not accent */
article p, article li, article ul, article ol, .callout, .tbl td { color: var(--ra-ink-2); }

/* brand chip: near-black on an accent fill in the light theme. ra.css has
   --ra-accent-ink for exactly this pairing, in both themes. */
.logo b { background: var(--ra-accent); color: var(--ra-accent-ink); }

/* sticky bar: a translucent accent wash puts the 13px nav at ~4.3:1 over the
   light canvas. The panel surface is what .ra-topbar itself uses. */
.top { background: color-mix(in srgb, var(--ra-panel) 88%, transparent); }

/* ra.css §6 (the legacy shell skin for /blogs, /static, auth, admin) selects
   html body and .kicker generically, with !important — the docs class names
   collide with it. Two rules are restated here, both later in the cascade and
   both back on the base system value:
   · the canvas: the skin paints the body --rd-paper (--ra-panel, the same value
     as .card/.tile), so on this surface the cards and the sticky bar would sit
     on their own colour. ra.css §3's own body rule is --ra-glow + --ra-bg.
   · the kicker: --rd-cyan is --ra-accent (#0a84ff), which is 3.65:1 at the 12px
     uppercase this sheet renders it (measured, verify/preview.mjs). The AA
     accent is --ra-accent-text, which is what ra.css itself uses for text. */
html body { background: var(--ra-glow), var(--ra-bg) !important; }
html body .kicker { color: var(--ra-accent-text) !important; }

/* code blocks: .ra-prose uses --ra-panel-2; --ra-panel is the same colour as
   the light canvas, so the chip and the block would have no surface of their
   own. The more specific article pre code rule keeps its background:none. */
article code, article pre { background: var(--ra-panel-2); }

/* inline code can carry an unbreakable string (a URL inside a trace result);
   at 390px the longest one pushed the page 78px wide (measured, examples.html,
   verify/preview.mjs). anywhere also shrinks min-content, which break-word
   does not. Code blocks keep scrolling instead — that is what this sheet and
   .ra-prose both do with article pre. */
article code { overflow-wrap: anywhere; }

/* reading measure: .ra-prose is 72ch, and docs.css's 760px is ~90ch of 15px
   body copy — too wide for the long-form this surface exists to serve. */
article { max-width: 72ch; }

/* ── the site frame injected by docs/assets/site-frame.js ─────────────────── */
.site-theme-toggle {
  width: 34px; height: 34px; flex: 0 0 34px; line-height: 1;
  border: 1px solid var(--ra-line); border-radius: var(--r-pill);
  background: transparent; color: var(--ra-ink); font-size: var(--fs-base); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.site-theme-toggle:hover { background: var(--ra-panel-2); border-color: var(--ra-line-strong); }
.top-nav a.site-frame-console {
  background: var(--ra-accent); color: var(--ra-accent-ink);
  border-radius: var(--r-pill); padding: 7px 14px; font-weight: var(--fw-semi);
}
.top-nav a.site-frame-console:hover { background: var(--ra-accent); color: var(--ra-accent-ink); filter: brightness(1.06); }
.agent-static-footer { border-top: 1px solid var(--ra-line); color: var(--ra-muted); }
.agent-static-footer-in {
  width: min(1080px, 100%); margin: auto; padding: var(--sp7) var(--sp5);
  display: grid; grid-template-columns: 1.5fr repeat(2, minmax(120px, .6fr)) 1fr; gap: var(--sp5);
}
.agent-static-footer strong { color: var(--ra-ink); font-size: var(--fs-base); }
.agent-static-footer p { margin: 5px 0 0; color: var(--ra-muted); font-size: var(--fs-sm); }
.agent-static-footer h2 {
  margin: 0 0 9px; color: var(--ra-muted); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.agent-static-footer a { display: block; margin: 7px 0; color: var(--ra-muted); font-size: var(--fs-sm); }
.agent-static-footer a:hover { color: var(--ra-ink); }
.agent-static-status { display: flex; align-items: flex-start; gap: 9px; }
.agent-static-status i { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 4px; border-radius: 50%; background: var(--ra-ok); box-shadow:var(--ra-sh1); }
.agent-static-status small { display: block; margin-top: 4px; color: var(--ra-muted); font-size: var(--fs-sm); }
.agent-static-bottom {
  border-top: 1px solid var(--ra-line); padding: var(--sp4) var(--sp5);
  color: var(--ra-muted); font-size: var(--fs-sm); text-align: center;
}
@media (max-width: 760px) {
  .agent-static-footer-in { grid-template-columns: 1fr 1fr; padding: var(--sp6) var(--sp4); }
  .agent-static-footer-in > div:first-child { grid-column: 1 / -1; }
  .site-theme-toggle { margin-left: auto; }
  .top-in { padding: 0 var(--sp4); gap: var(--sp2); }
  .top-nav { margin-left: auto; }
  .top-nav a { display: none; }
  .top-nav a.on, .top-nav a.site-frame-console { display: inline-block; }
  .wrap { padding: var(--sp6) var(--sp4) 80px; }
}