/* THE RULEBOOK SCREEN (js/tuhi/rulebook.js) and the header's 📘 Rulebook link (js/tuhi/sidebar.js). Tokens only (css/tuhi-shell.css),
   so light and dark follow the console's theme. A signed-in stylesheet: shell.js switches it with the other data-css="app" sets. */

/* ── the header link ── */
.bt-crumb .bt-crumb-rb{ display:inline-flex !important; align-items:center; gap:4px; margin-left:10px; padding:2px 9px; border-radius:99px; flex:none;
  border:1px solid var(--bd); color:var(--fg-2); font-size:12px; font-weight:650; text-decoration:none; background:var(--surface-2); }
.bt-crumb .bt-crumb-rb:hover, .bt-crumb .bt-crumb-rb:focus-visible{ color:var(--acc-fg); border-color:var(--acc); background:var(--acc-soft); outline:none; }
@media (max-width:767px){ .bt-crumb-rbt{ display:none; } .bt-crumb .bt-crumb-rb{ margin-left:6px; padding:2px 7px; } }

/* ── the index ── */
.rbk .db-sub a, .rbk-crumbs a{ color:var(--acc-fg); }
.rbk-crumbs{ font-size:12.5px; margin-bottom:6px; }
.rbk-crumbs a{ display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.rbk-groups{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.rbk-group{ padding:14px 16px; }
.rbk-group h2{ margin:0 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
.rbk-group ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rbk-link{ color:var(--fg); font-weight:650; text-decoration:none; }
.rbk-link:hover{ color:var(--acc-fg); text-decoration:underline; }
.rbk-purpose{ color:var(--fg-2); font-size:12.5px; margin-top:2px; }
.rbk-verified{ color:var(--mut); font-size:11.5px; margin-top:2px; }
.rbk-warn{ color:var(--warn-fg); }
.rbk-empty{ padding:16px; color:var(--fg-2); }

/* ── one rulebook ── */
.rbk-layout{ display:grid; grid-template-columns:220px minmax(0, 1fr); gap:16px; align-items:start; }
.rbk-toc{ position:sticky; top:calc(var(--top-h, 56px) + 12px); padding:10px; display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 120px); overflow:auto; }
.rbk-toc a{ color:var(--fg-2); text-decoration:none; font-size:12.5px; padding:5px 8px; border-radius:7px; }
.rbk-toc a:hover{ background:var(--surface-2); color:var(--fg); }
.rbk-toc a.on{ background:var(--acc-soft); color:var(--acc-fg); font-weight:650; }
@media (max-width:1023px){ .rbk-layout{ grid-template-columns:minmax(0, 1fr); } .rbk-toc{ position:static; flex-direction:row; flex-wrap:wrap; max-height:none; } }

.rbk-doc{ padding:18px 24px 26px; color:var(--fg); font-size:14px; line-height:1.6; min-width:0; overflow-wrap:anywhere; }
@media (max-width:767px){ .rbk-doc{ padding:14px 14px 20px; } }
.rbk-doc h1{ font-size:21px; margin:0 0 10px; }
.rbk-doc h2{ font-size:17px; margin:26px 0 8px; padding-top:10px; border-top:1px solid var(--bd-soft); }
.rbk-doc h3{ font-size:15px; margin:20px 0 6px; color:var(--fg-2); }
.rbk-doc h1, .rbk-doc h2, .rbk-doc h3{ scroll-margin-top:calc(var(--top-h, 56px) + 16px); border-radius:6px; transition:background .6s, box-shadow .6s; }
.rbk-doc .rbk-hit{ background:var(--acc-soft); box-shadow:-10px 0 0 var(--acc-soft); }
.rbk-doc p, .rbk-doc ul, .rbk-doc ol{ margin:8px 0; }
.rbk-doc li{ margin:3px 0; }
.rbk-doc a{ color:var(--acc-fg); }
.rbk-doc code{ background:var(--code-bg); color:var(--code-fg); border-radius:5px; padding:1px 5px; font-size:12.5px; }
.rbk-doc pre{ background:var(--code-bg); color:var(--code-fg); padding:10px 12px; border-radius:8px; overflow-x:auto; font-size:12.5px; }
.rbk-doc pre code{ background:none; padding:0; }
.rbk-doc blockquote{ margin:10px 0; padding:6px 12px; border-left:3px solid var(--acc); background:var(--surface-2); color:var(--fg-2); border-radius:0 8px 8px 0; }
.rbk-doc hr{ border:0; border-top:1px solid var(--bd); margin:18px 0; }
.rbk-tablewrap{ overflow-x:auto; margin:10px 0; }
.rbk-doc table{ border-collapse:collapse; width:100%; font-size:13px; }
.rbk-doc th, .rbk-doc td{ border:1px solid var(--bd); padding:6px 9px; text-align:left; vertical-align:top; }
.rbk-doc th{ background:var(--surface-2); color:var(--fg); font-weight:650; }
.rbk-doc .rbk-path{ font-family:var(--mono, ui-monospace, monospace); font-size:12.5px; color:var(--fg-2); }
.rbk-mermaid{ margin:14px 0; padding:12px; border:1px solid var(--bd-soft); border-radius:10px; background:var(--surface-2); text-align:center; overflow-x:auto; color:var(--mut); font-size:12.5px; }
.rbk-mermaid.drawn{ color:inherit; }
.rbk-mermaid svg{ max-width:100%; height:auto; }
.rbk-mermaid-bad{ text-align:left; }
.rbk-raw{ white-space:pre-wrap; }

/* ── 📘 links on other screens (Data Flow's header and lane help) ── */
.dfx-rb{ color:var(--acc-fg); font-weight:600; text-decoration:none; white-space:nowrap; }
.dfx-rb:hover{ text-decoration:underline; }
.dfx-rbs .dfx-rb{ display:inline-block; margin:2px 8px 2px 0; }

/* every diagram: Full screen (owner, 2026-11-07) */
.rbk-mermaid.drawn{ position:relative; }
.rbk-fsbtn{ position:absolute; top:8px; right:8px; z-index:1; height:28px; padding:0 10px; border-radius:8px; border:1px solid var(--bd); background:var(--surface); color:var(--fg-2); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.rbk-fsbtn:hover, .rbk-fsbtn:focus-visible{ border-color:var(--acc); color:var(--acc-fg); background:var(--acc-soft); outline:none; }
.rbk-mermaid.drawn svg{ cursor:zoom-in; }
.rbk-fs{ position:fixed; inset:0; z-index:2000; background:var(--bg); display:flex; flex-direction:column; }
.rbk-fsbar{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--bd); background:var(--surface); }
.rbk-fstitle{ font-size:14px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbk-sp{ flex:1; }
.rbk-fsctl{ min-width:34px; height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--bd); background:var(--surface-2); color:var(--fg); font:inherit; font-size:14px; cursor:pointer; }
.rbk-fsctl:hover, .rbk-fsctl:focus-visible{ border-color:var(--acc); color:var(--acc-fg); outline:none; }
.rbk-fsstage{ position:relative; flex:1; overflow:hidden; cursor:grab; touch-action:none; outline:none; }
.rbk-fsstage.drag{ cursor:grabbing; }
.rbk-fsstage svg{ position:absolute; left:0; top:0; transform-origin:0 0; }
body.rbk-fsopen{ overflow:hidden; }
/* the 📘 chip reads as a button */
.bt-crumb .bt-crumb-rb{ cursor:pointer; background:var(--acc-soft) !important; color:var(--acc-fg) !important; border-color:var(--acc) !important; font-weight:650; }