/* drt docs — vendored, no runtime framework.
 * DESIGN TOKENS live in the single :root block below (+ its dark override).
 * Add new tokens here, never mid-file. Base palette from the ADR #500 mockup. */
:root {
  /* brand */
  --brand-50:#f5f3ff; --brand-100:#ede9fe; --brand-200:#ddd6fe; --brand-400:#a78bfa;
  --brand-500:#8b5cf6; --brand-600:#7c3aed; --brand-700:#6d28d9; --brand-900:#1e1b4b;
  /* neutrals */
  --ink-50:#f7f8fa; --ink-100:#eef0f3; --ink-200:#e3e6eb; --ink-500:#5a6068;
  --ink-700:#262b33; --ink-800:#1a1d22; --ink-900:#0f1115;
  /* surfaces & text */
  --bg:#ffffff; --fg:var(--ink-800); --muted:var(--ink-500);
  --line:var(--ink-200); --surface:#ffffff; --chip:var(--ink-100);
  /* status (dot/word pairs — never color-alone) */
  --success:#15803d; --warning:#b45309; --error:#b91c1c;
  /* lineage */
  --edge:#9aa0a8; --edge-lookup:var(--brand-500); --zone-drt-line:var(--brand-200);
  --zone-drt-bg:var(--brand-50);
  /* shape & type */
  --radius:8px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:var(--ink-900); --fg:var(--ink-50); --muted:#c4c7cc;
    --line:var(--ink-700); --surface:var(--ink-800); --chip:var(--ink-700);
    --success:#4ade80; --warning:#fbbf24; --error:#f87171;
    --edge:#6a707a; --zone-drt-line:rgba(139,92,246,0.35);
    --zone-drt-bg:rgba(124,58,237,0.10);
  }
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:14px; line-height:1.55; }
a { color:var(--brand-700); text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline:2px solid var(--brand-500); outline-offset:2px; border-radius:4px; }
.skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand-600);
  color:#fff; padding:8px 14px; border-radius:0 0 8px 0; }
.skip:focus { left:0; }
a:hover { text-decoration:underline; }
code,pre,.mono { font-family:var(--mono); }

/* top bar */
.topbar {
  display:flex; align-items:center; gap:16px; padding:10px 16px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:10;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.brand .logo { width:26px; height:26px; border-radius:6px; background:var(--brand-600); display:inline-grid; place-items:center; color:#fff; font-size:13px; }
.project { color:var(--muted); border-left:1px solid var(--line); padding-left:12px; font-size:13px; }
.project .ver { font-size:11px; }
.topnav { display:flex; gap:4px; margin-left:8px; }
.navbtn { padding:4px 10px; border-radius:6px; color:var(--muted); }
.navbtn:hover { background:var(--brand-50); color:var(--brand-700); text-decoration:none; }
.navbtn.active { background:var(--brand-600); color:#fff; }
@media (prefers-color-scheme: dark) {
  .navbtn:hover { background:var(--brand-900); color:var(--brand-200); }
}
.search { margin-left:auto; }
.search input {
  border:1px solid var(--line); background:var(--surface); color:var(--fg);
  border-radius:6px; padding:5px 10px; font-size:13px; width:240px;
}

/* layout */
.shell { display:flex; }
.sidebar {
  width:256px; flex-shrink:0; border-right:1px solid var(--line); padding:16px;
  height:calc(100vh - 53px); overflow-y:auto; position:sticky; top:53px;
}
.group { margin-bottom:14px; }
.group > summary, .group-title {
  font-weight:600; color:var(--fg); display:flex; justify-content:space-between;
  cursor:pointer; list-style:none; padding:2px 0;
}
.group > summary::-webkit-details-marker { display:none; }
.group .count { color:var(--muted); font-weight:400; }
.group ul { list-style:none; margin:6px 0 0; padding:0 0 0 8px; }
.group li { padding:2px 0; }
.group a { color:var(--fg); display:block; padding:2px 4px; border-radius:4px; }
.group a:hover { background:var(--chip); text-decoration:none; }
.group a.current { color:var(--brand-700); font-weight:500; }

/* main */
.main { flex:1; padding:28px 32px; max-width:980px; }
.eyebrow { font-size:12px; color:var(--muted); margin-bottom:2px; }
h1 { font-size:28px; font-weight:700; margin:0 0 4px; letter-spacing:-0.02em; }
h2 { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin:28px 0 12px; }
.lede { color:var(--muted); margin:0 0 22px; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.card { border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.card .num { font-size:28px; font-weight:700; }
.card .lbl { font-size:13px; color:var(--muted); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.chip { display:inline-block; padding:1px 8px; border-radius:999px; background:var(--chip); font-size:12px; }
.mode { font-family:var(--mono); font-size:12px; }
.kv { display:grid; grid-template-columns:160px 1fr; gap:6px 14px; font-size:13px; margin:0 0 8px; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; }
.badge { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px;
  font:700 10px var(--mono); color:#fff; vertical-align:-4px; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }

pre.code { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; overflow-x:auto; font-size:12.5px; }
.mermaid { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }

.footer { color:var(--muted); font-size:12px; margin-top:36px; padding-top:14px; border-top:1px solid var(--line); }
.search-empty { color:var(--muted); font-size:12.5px; font-style:italic; padding:2px 4px; }

@media print {
  .topbar, .sidebar, .skip, .copy-btn, .expand-btn, .tabs { display:none !important; }
  .js .tab-panel:not(.active) { display:block !important; }
  .js .collapsible:not(.open) .codebody { max-height:none !important; }
  .js .collapsible:not(.open) .codebody::after { display:none !important; }
  .shell { display:block; }
  .main { max-width:none; padding:0; }
}

/* Overview — type-distribution bars */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:8px; }
.bar-row { display:flex; align-items:center; gap:10px; margin:7px 0; font-size:13px; }
.bar-row__label { width:9rem; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row__bar-bg { flex:1; background:var(--chip); height:8px; border-radius:999px; overflow:hidden; }
.bar-row__bar-fill { background:var(--brand-600); height:100%; border-radius:999px; }
.bar-row__count { width:2.5rem; text-align:right; color:var(--muted); }

/* Recent runs + status */
td.right, th.right { text-align:right; }
.font-mono { font-family:var(--mono); font-size:12px; color:var(--muted); }
.status-success { color:var(--success); font-weight:500; }
.status-partial { color:var(--warning); font-weight:500; }
.status-failed { color:var(--error); font-weight:500; }
.empty { border:1px dashed var(--line); padding:32px; text-align:center; border-radius:var(--radius); color:var(--muted); }
.empty--hero { padding:56px 32px; }
.empty__title { font-size:17px; font-weight:600; color:var(--fg); margin-bottom:6px; }
.empty--hero pre.code { display:inline-block; text-align:left; margin:14px auto 0; }
.kpi__error { font-family:var(--mono); font-size:11.5px; color:var(--error); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yaml-note { font-size:12px; color:var(--muted); font-style:italic; margin-top:8px; }

/* code block chrome — header bar + line numbers + collapse */
.codeblock { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; }
.codehdr { display:flex; align-items:center; gap:10px; padding:7px 12px;
  border-bottom:1px solid var(--line); background:var(--chip); font-size:12px; }
.codehdr__path { font-family:var(--mono); font-weight:600; color:var(--fg); }
.codehdr__meta { color:var(--muted); }
.copy-btn, .expand-btn { display:none; }
.js .copy-btn { display:inline-block; margin-left:auto; border:1px solid var(--line);
  background:var(--surface); color:var(--fg); border-radius:6px; padding:2px 10px;
  font:500 11.5px var(--sans); cursor:pointer; }
.js .copy-btn:hover { border-color:var(--brand-500); color:var(--brand-700); }
.codebody .highlight { margin:0; }
.codebody .highlight pre { margin:0; padding:12px 14px; overflow-x:auto; font-size:12.5px; line-height:1.6; }
.codebody .highlight table { border-collapse:collapse; width:100%; }
.codebody .highlight table td { padding:0; border:none; }
.codebody .highlight .linenos { width:1%; user-select:none; -webkit-user-select:none; }
.codebody .highlight .linenos pre { color:var(--muted); opacity:.55; text-align:right; padding-right:4px; }
.js .collapsible:not(.open) .codebody { max-height:520px; overflow:hidden; }
.js .collapsible:not(.open) .codebody::after { content:""; position:absolute; left:0; right:0; bottom:34px;
  height:56px; background:linear-gradient(transparent, var(--surface)); pointer-events:none; }
.js .collapsible:not(.open) .expand-btn { display:block; width:100%; border:none;
  border-top:1px solid var(--line); background:var(--chip); color:var(--brand-700);
  padding:7px; font:500 12px var(--sans); cursor:pointer; }
.js .collapsible.open .expand-btn { display:none; }

/* Sync detail — KPI cards, tabs (progressive: stacked without JS), ego lineage */
.kpi { border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; }
.kpi__label { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:600; }
.crumb { font-size:12px; color:var(--muted); margin-bottom:2px; }
.crumb a { color:var(--brand-700); }
.tabs { display:none; gap:2px; border-bottom:1px solid var(--line); margin:26px 0 14px; }
.js .tabs { display:flex; }
.tab-btn { appearance:none; background:none; border:none; border-bottom:2px solid transparent;
  padding:7px 12px; font:inherit; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; }
.tab-btn:hover { color:var(--fg); }
.tab-btn.active { color:var(--brand-700); border-bottom-color:var(--brand-600); }
.tab-panel > h2:first-child { margin-top:26px; }
.js .tab-panel > h2:first-child { display:none; }
.js .tab-panel:not(.active) { display:none; }
/* Single-object bundle (#821): the whole site is one document of .page
   sections. With JS the router shows one at a time (SPA-like); without JS all
   render stacked and the in-page #hash links jump natively. */
.js .main > .page:not(.active) { display:none; }
.ego { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:10px; overflow-x:auto; }
.ego svg text { font-family:var(--sans); }
.ego svg .mono { font-family:var(--mono); }

/* Project DAG — static SVG from the layout engine (#701) */
.dag { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:10px; overflow-x:auto; }
.dag svg text { font-family:var(--sans); }
.dag svg .mono { font-family:var(--mono); }
.group a .count { float:right; }

@media (max-width:860px) {
  .cards, .two-col { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .topbar { flex-wrap:wrap; row-gap:6px; padding:10px 12px; }
  .project { display:none; }
  .search { display:none; }  /* filters the sidebar, which is hidden here — restore with the real search UX */
  .main { padding:20px 14px; }
  table { display:block; overflow-x:auto; white-space:nowrap; }
  .kv { grid-template-columns:120px 1fr; }
}