/* TUHI CONSOLE — the RULEBOOK viewer (#rulebook), the 📘 link in the header, and VIDUR's panel. Tokens from tuhi-shell.css only, so
   light and dark follow html.tuhi / html.tuhi.light. No inline style anywhere (the CSP forbids it). */

/* ── the 📘 link (header) ── */
.tc-rb-link{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:99px; border:1px solid var(--bd);
  background:var(--surface-2); color:var(--fg-2); font-size:12px; font-weight:650; text-decoration:none; white-space:nowrap; }
.tc-rb-link:hover{ border-color:var(--acc); color:var(--acc-fg); background:var(--acc-soft); }
.tc-rb-link[hidden]{ display:none; }
@media (max-width:767px){ .tc-rb-link .tc-rb-lt{ display:none; } .tc-rb-link{ padding:0 7px; } }

/* ── index ── */
.tc-rb-index{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; }
.tc-rb-ix{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.tc-rb-ix li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:7px 2px; border-bottom:1px solid var(--bd-soft); }
.tc-rb-ix li:last-child{ border-bottom:0; }
.tc-rb-ix a{ color:var(--fg); font-weight:600; font-size:13.5px; text-decoration:none; }
.tc-rb-ix a:hover{ color:var(--acc-fg); text-decoration:underline; }
.tc-rb-ixname{ color:var(--mut); font-size:11.5px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; flex:none; }
.tc-rb-filter{ height:34px; min-width:220px; padding:0 12px; border-radius:8px; }

/* ── one rulebook ── */
.tc-rb-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tc-rb-sp{ flex:1; }
.tc-rb-back{ display:inline-flex; align-items:center; gap:4px; color:var(--acc-fg); font-weight:600; font-size:13px; text-decoration:none; }
.tc-rb-doc{ background:var(--surface); border:1px solid var(--bd); border-radius:12px; padding:22px 26px; max-width:1100px; color:var(--fg); line-height:1.6; font-size:14px; min-width:0; overflow-wrap:anywhere; }
@media (max-width:767px){ .tc-rb-doc{ padding:14px; } }
.tc-rb-doc h2, .tc-rb-doc h3, .tc-rb-doc h4, .tc-rb-doc h5, .tc-rb-doc h6{ scroll-margin-top:calc(var(--top-h) + 14px); color:var(--fg); line-height:1.3; }
.tc-rb-doc .tc-rb-h1{ font-size:22px; margin:0 0 12px; }
.tc-rb-doc .tc-rb-h2{ font-size:18px; margin:26px 0 8px; padding-top:10px; border-top:1px solid var(--bd-soft); }
.tc-rb-doc .tc-rb-h3{ font-size:15.5px; margin:20px 0 6px; }
.tc-rb-doc .tc-rb-h4, .tc-rb-doc .tc-rb-h5, .tc-rb-doc .tc-rb-h6{ font-size:14px; margin:16px 0 4px; color:var(--fg-2); }
.tc-rb-doc p{ margin:8px 0; }
.tc-rb-doc a{ color:var(--acc-fg); }
.tc-rb-doc code{ background:var(--code-bg); color:var(--code-fg); border-radius:5px; padding:1px 5px; font-size:12.5px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.tc-rb-doc .tc-rb-code{ background:var(--code-bg); color:var(--code-fg); border-radius:8px; padding:12px 14px; overflow-x:auto; font-size:12.5px; line-height:1.5; }
.tc-rb-doc .tc-rb-code code{ background:none; padding:0; }
.tc-rb-doc .tc-rb-list{ margin:6px 0; padding-left:22px; }
.tc-rb-doc .tc-rb-list li{ margin:3px 0; }
.tc-rb-doc .tc-rb-quote{ margin:10px 0; padding:6px 14px; border-left:3px solid var(--acc); background:var(--acc-soft); border-radius:0 8px 8px 0; color:var(--fg-2); }
.tc-rb-doc hr{ border:0; border-top:1px solid var(--bd); margin:18px 0; }
.tc-rb-table{ overflow-x:auto; margin:10px 0; }
.tc-rb-doc table{ border-collapse:collapse; width:100%; font-size:13px; }
.tc-rb-doc th, .tc-rb-doc td{ border:1px solid var(--bd); padding:6px 9px; text-align:left; vertical-align:top; }
.tc-rb-doc th{ background:var(--surface-2); font-weight:700; }
.tc-rb-doc .tc-rb-ac{ text-align:center; } .tc-rb-doc .tc-rb-ar{ text-align:right; }
.tc-rb-path{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:var(--fg-2); }
.tc-rb-hit{ background:var(--acc-soft); box-shadow:-10px 0 0 var(--acc-soft); border-radius:6px; transition:background .6s; }
.tc-rb-diagram{ margin:14px 0; padding:12px; border:1px solid var(--bd); border-radius:10px; background:var(--chart-surf); }
.tc-rb-svgwrap{ overflow-x:auto; text-align:center; }
.tc-rb-svg{ max-width:100%; height:auto; }
.tc-rb-diagram figcaption{ margin-top:6px; color:var(--mut); font-size:12px; text-align:center; }
.tc-rb-mmsrc{ margin:0; white-space:pre; overflow-x:auto; font-size:12px; color:var(--code-fg); background:var(--code-bg); border-radius:8px; padding:10px; }
.tc-rb-mmsource{ margin-top:6px; font-size:12px; color:var(--mut); }
.tc-rb-mmsource summary{ cursor:pointer; }
.tc-rb-mmfail::before{ content:"This diagram could not be drawn — its source:"; display:block; color:var(--warn-fg); font-size:12px; margin-bottom:6px; }

/* ── VIDUR ── */
html.tuhi #vidurBtn .tc-i{ margin-right:2px; }
html.tuhi #vidurBtn.on{ border-color:var(--acc); color:var(--acc-fg); background:var(--acc-soft); }
.tc-vd{ position:fixed; top:var(--top-h); right:0; bottom:0; width:min(420px, 100vw); z-index:60; display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--bd); box-shadow:var(--shadow-md); }
.tc-vd[hidden]{ display:none; }
.tc-vd-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--bd); }
.tc-vd-who{ display:flex; flex-direction:column; min-width:0; flex:1; }
.tc-vd-who b{ font-size:14px; color:var(--fg); }
.tc-vd-who small{ color:var(--mut); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-vd-note{ padding:8px 14px; font-size:11.5px; color:var(--mut); border-bottom:1px solid var(--bd-soft); line-height:1.45; }
.tc-vd-log{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.tc-vd-msg{ max-width:94%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; }
.tc-vd-msg.me{ align-self:flex-end; background:var(--acc); color:var(--on-acc); border-bottom-right-radius:4px; white-space:pre-wrap; }
.tc-vd-msg.vd{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--bd-soft); color:var(--fg); border-bottom-left-radius:4px; }
.tc-vd-msg.err{ border-color:var(--err-bd); background:var(--err-bg); color:var(--err-fg); }
.tc-vd-msg p{ margin:4px 0; } .tc-vd-msg .tc-rb-list{ margin:4px 0; padding-left:18px; }
.tc-vd-msg code{ background:var(--code-bg); color:var(--code-fg); border-radius:4px; padding:0 4px; font-size:12px; }
.tc-vd-msg pre{ overflow-x:auto; background:var(--code-bg); padding:8px; border-radius:6px; font-size:12px; }
.tc-vd-msg table{ border-collapse:collapse; font-size:12px; } .tc-vd-msg th, .tc-vd-msg td{ border:1px solid var(--bd); padding:3px 6px; }
.tc-vd-steps{ display:flex; flex-wrap:wrap; gap:4px; }
.tc-vd-step{ font-size:11px; color:var(--mut); border:1px solid var(--bd-soft); border-radius:99px; padding:1px 8px; }
.tc-vd-step.bad{ color:var(--warn-fg); border-color:var(--warn-bd); }
.tc-vd-cards{ display:flex; flex-wrap:wrap; gap:6px; }
.tc-vd-card{ display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:4px 10px; border-radius:99px; border:1px solid var(--bd); background:var(--surface);
  color:var(--acc-fg); text-decoration:none; font-weight:600; cursor:pointer; }
.tc-vd-card:hover{ border-color:var(--acc); background:var(--acc-soft); }
.tc-vd-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 8px; }
.tc-vd-form{ display:flex; gap:8px; padding:10px 14px 14px; border-top:1px solid var(--bd); }
.tc-vd-form textarea{ flex:1; resize:none; min-height:42px; max-height:140px; border-radius:10px; padding:10px 12px; font-size:13.5px; font-family:inherit; }
.tc-vd-thinking{ align-self:flex-start; color:var(--mut); font-size:12.5px; }

/* ── the LEFT PANEL (owner, 2026-11-07: "rulebook left panel is missing") ── */
.tc-rb-layout{ display:grid; grid-template-columns:250px minmax(0, 1fr); gap:20px; align-items:start; margin-top:10px; }
.tc-rb-layout .tc-rb-doc{ max-width:none; }
.tc-rb-side{ position:sticky; top:calc(var(--top-h) + 14px); max-height:calc(100vh - var(--top-h) - 28px); overflow:auto; display:flex; flex-direction:column; gap:16px;
  background:var(--surface); border:1px solid var(--bd); border-radius:12px; padding:12px; font-size:13px; }
.tc-rb-toch{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin:0 0 6px 6px; }
.tc-rb-side nav{ display:flex; flex-direction:column; }
.tc-rb-side nav a{ display:block; padding:5px 8px; border-radius:7px; color:var(--fg-2); text-decoration:none; line-height:1.35; border-left:2px solid transparent; }
.tc-rb-side nav a:hover{ background:var(--surface-2); color:var(--fg); }
.tc-rb-side nav a.on{ background:var(--acc-soft); color:var(--acc-fg); border-left-color:var(--acc); font-weight:650; }
.tc-rb-side .tc-rb-toc-h3{ padding-left:20px; font-size:12.5px; }
@media (max-width:1023px){ .tc-rb-layout{ grid-template-columns:minmax(0, 1fr); } .tc-rb-side{ position:static; max-height:none; } .tc-rb-others{ display:none !important; } }

/* ── every diagram: a Full screen button, and the full-screen view ── */
.tc-rb-figbar{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; margin:-4px 0 4px; }
.tc-rb-fsbtn{ display:inline-flex; align-items:center; gap:5px; 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; }
.tc-rb-fsbtn:hover, .tc-rb-fsbtn:focus-visible{ border-color:var(--acc); color:var(--acc-fg); background:var(--acc-soft); outline:none; }
.tc-rb-svgwrap{ cursor:zoom-in; }
.tc-rb-fs{ position:fixed; inset:0; z-index:1000; background:var(--bg); display:flex; flex-direction:column; }
.tc-rb-fsbar{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--bd); background:var(--surface); }
.tc-rb-fstitle{ font-size:14px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-rb-fsctl{ display:inline-flex; align-items:center; justify-content:center; 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:13px; cursor:pointer; }
.tc-rb-fsctl:hover, .tc-rb-fsctl:focus-visible{ border-color:var(--acc); color:var(--acc-fg); outline:none; }
.tc-rb-fsstage{ position:relative; flex:1; overflow:hidden; cursor:grab; touch-action:none; outline:none; }
.tc-rb-fsstage.drag{ cursor:grabbing; }
.tc-rb-fsstage svg{ position:absolute; left:0; top:0; transform-origin:0 0; }
body.tc-rb-fsopen{ overflow:hidden; }

/* VIDUR — prominent, and DOCKED: when open the page makes room for it instead of being covered (owner, 2026-11-07) */
html.tuhi #vidurBtn{ background:var(--acc) !important; color:var(--on-acc) !important; border-color:var(--acc) !important; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.12); }
html.tuhi #vidurBtn:hover{ filter:brightness(1.08); }
html.tuhi #vidurBtn.on{ background:var(--acc) !important; color:var(--on-acc) !important; box-shadow:0 0 0 3px var(--acc-soft); }
html.tuhi #vidurBtn .tc-i, html.tuhi #vidurBtn svg{ color:var(--on-acc) !important; }
@media (min-width:1100px){
  /* the TOP BAR never moves (owner, 2026-11-07): only the page below it makes room; Vidur opens under the bar */
  html.tc-vd-docked #view, html.tc-vd-docked #foot{ margin-right:min(420px, 100vw); transition:margin-right .2s ease; }
  html.tc-vd-docked .tc-vd{ box-shadow:none; border-left:1px solid var(--bd); }
}

/* go: links — "→ Open …" calls to action (TC.goButton); their words alone when this person cannot open the place here */
.tc-go{ display:inline-flex; align-items:center; max-width:100%; margin:1px 2px; padding:3px 10px; border:1px solid var(--acc); border-radius:99px; background:var(--acc-soft);
  color:var(--acc-fg); font:inherit; font-size:.92em; font-weight:650; line-height:1.35; text-align:left; white-space:normal; cursor:pointer; vertical-align:baseline; }
.tc-go:hover{ background:var(--acc); color:var(--on-acc, #fff); }
.tc-go:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.tc-goplain{ font-weight:600; }
.tc-vd-acts{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }