/* BRAINTRUST SHELL + THEME — loaded after css/tuhi.css (Tuhi's verbatim stylesheet), signed-in only.
   This file owns:
     1. THE TOKENS: one palette, light and dark, on html.tuhi (dark) / html.tuhi.light (light). js/tuhi/shell.js sets
        html.light from the theme preference (System follows prefers-color-scheme). Tuhi's own variable names (--bg --card
        --fg --mut --acc --ok --warn --err --bd) are mapped onto them, so every ported rule follows the palette.
     2. THE SHELL: top bar, left sidebar (full / icon rail / mobile drawer), content area, footer.
     3. THE RETUNE: Tuhi's stylesheet and screens hard-code dark literals (#0c0e12 panels, #8b93a7 text, …). They are
        remapped to tokens here — by class, and for inline styles by attribute selector — so no screen's JS changes.
   Contrast: body text ≥ 12:1, muted text ≥ 5.5:1 on every surface, status text ≥ 4.5:1 on its own tint, in both themes. */

[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* DARK — navy-tinted, never pure black */
html.tuhi{
  color-scheme:dark;
  --bg:#0f1524; --surface:#171f31; --surface-2:#131a2a; --surface-3:#202a41; --inset:#111827;
  --bd:#2a3550; --bd-soft:#222c43; --bd-strong:#3a4766;
  --fg:#e7ebf4; --fg-2:#c4cbdb; --mut:#a2acc2;
  --acc:#8b93ff; --acc-hover:#a5abff; --on-acc:#0f1430; --acc-soft:rgba(139,147,255,.16); --acc-fg:#b9beff; --acc-ring:rgba(139,147,255,.35);
  --ok:#4ade80; --ok-fg:#6ee7a0; --ok-bg:rgba(74,222,128,.12); --ok-bd:rgba(74,222,128,.35);
  --warn:#fbbf24; --warn-fg:#fcd34d; --warn-bg:rgba(251,191,36,.12); --warn-bd:rgba(251,191,36,.35);
  --err:#f87171; --err-fg:#fca5a5; --err-bg:rgba(248,113,113,.13); --err-bd:rgba(248,113,113,.4);
  --info:#8cc0ff; --vio:#c4a8ff; --vio-bg:rgba(196,168,255,.14);
  --code-bg:#202a41; --code-fg:#dbe2f0;
  --grid:#2a3550; --chart-surf:#131a2a;
  --top-bg:#141c2e; --side-bg:#121a2b; --foot-bg:#121a2b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 8px 28px rgba(0,0,0,.45);
  /* Tuhi's names */
  --card:var(--surface);
  /* fallbacks some screens read with var(--x, literal) */
  --accent:var(--acc); --soft:var(--surface-3); --line:var(--bd);
  --side-w:252px; --rail-w:64px; --top-h:56px;
}
/* LIGHT — cool tinted neutrals, indigo accent */
html.tuhi.light{
  color-scheme:light;
  --bg:#f3f5f9; --surface:#ffffff; --surface-2:#f6f8fb; --surface-3:#e9edf4; --inset:#f1f4f9;
  --bd:#dfe4ec; --bd-soft:#eaedf3; --bd-strong:#c5cdd9;
  --fg:#172033; --fg-2:#38445a; --mut:#566176;
  --acc:#4f46e5; --acc-hover:#4338ca; --on-acc:#ffffff; --acc-soft:#eef0ff; --acc-fg:#4338ca; --acc-ring:rgba(79,70,229,.25);
  --ok:#15803d; --ok-fg:#13703a; --ok-bg:#e7f6ec; --ok-bd:#b3dfc2;
  --warn:#b45309; --warn-fg:#9a4b06; --warn-bg:#fdf3e2; --warn-bd:#f0d29b;
  --err:#c42b2b; --err-fg:#b32424; --err-bg:#fdeded; --err-bd:#f2c0c0;
  --info:#1d5fc4; --vio:#6d3fd1; --vio-bg:#f3eefe;
  --code-bg:#eef1f7; --code-fg:#2b3550;
  --grid:#e1e6ee; --chart-surf:#f8fafc;
  --top-bg:#ffffff; --side-bg:#f8f9fd; --foot-bg:#ffffff;
  --shadow-sm:0 1px 2px rgba(23,32,51,.06),0 1px 3px rgba(23,32,51,.05); --shadow-md:0 10px 30px rgba(23,32,51,.12);
}

/* ═══ 2. BASE ═════════════════════════════════════════════════════════════════════════════════════════════════════ */
html.tuhi body{ background:var(--bg); color:var(--fg); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:13.5px; -webkit-font-smoothing:antialiased; }
html.tuhi :focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }

/* ═══ 3. SHELL LAYOUT ═════════════════════════════════════════════════════════════════════════════════════════════ */
html.tuhi #app{ display:grid; min-height:100vh; grid-template-columns:var(--side-w) minmax(0,1fr);
  grid-template-rows:var(--top-h) minmax(0,1fr) auto; grid-template-areas:"top top" "side main" "side foot"; }
html.tuhi #app[hidden]{ display:none !important; }

/* ── top bar ── */
html.tuhi header.bt-top{ grid-area:top; position:sticky; top:0; z-index:90; height:var(--top-h); display:flex; align-items:center; gap:12px;
  padding:0 16px 0 12px; background:var(--top-bg); border-bottom:1px solid var(--bd); box-shadow:var(--shadow-sm); }
.bt-burger{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; border:1px solid transparent;
  background:none; color:var(--fg-2); cursor:pointer; flex:none; }
.bt-burger:hover{ background:var(--surface-3); color:var(--fg); }
.bt-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none !important; color:var(--fg) !important; min-width:0; flex:none; }
.bt-brand .brandmark{ flex:none; }
.bt-brand-txt{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.bt-brand-name{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.bt-brand-sub{ font-size:11px; color:var(--mut); font-weight:500; }
/* "you are here" — section › screen › sub-section, always in the header */
html.tuhi nav.bt-crumb{ border-bottom:0; padding:0 0 0 16px; }   /* a <nav>: Tuhi's global nav rule would pad and underline it */
.bt-crumb{ display:flex; align-items:center; gap:4px; min-width:0; margin-left:14px; padding-left:16px; border-left:1px solid var(--bd); height:30px; font-size:13px; white-space:nowrap; overflow:hidden; }
.bt-crumb > span{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.bt-crumb-sec{ color:var(--mut); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; }
.bt-crumb-cur{ color:var(--fg); font-weight:650; flex:0 1 auto; overflow:hidden; }
.bt-crumb-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-crumb-cur .ico{ color:var(--acc-fg); flex:none; }
.bt-crumb-sub{ color:var(--acc-fg); font-weight:650; background:var(--acc-soft); border-radius:99px; padding:2px 9px; }
.bt-crumb-sep{ color:var(--mut); flex:none; }
/* BrainTrust's header is the console's own chrome: Tuhi's embed rule (tuhi.css: html.embed header{display:none}) must never hide it */
html.tuhi.embed header.bt-top{ display:flex !important; }
.bt-badges{ display:flex; align-items:center; gap:8px; min-width:0; margin-left:8px; }
.bt-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; }
.bt-pill{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:99px; font-size:11.5px; font-weight:600;
  white-space:nowrap; border:1px solid var(--bd); background:var(--surface-2); color:var(--fg-2); }
html.tuhi .bigdot{ width:8px; height:8px; border-radius:99px; display:inline-block; flex:none; box-shadow:none; animation:none; }
html.tuhi .live{ color:var(--mut); font-size:10.5px; font-weight:600; }
/* Environment: Local (amber) / Production (green) — strong text on its own tint */
.envbadge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap; letter-spacing:.01em; }
.envbadge::before{ content:""; width:7px; height:7px; border-radius:99px; background:currentColor; }
.envbadge.local{ background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-bd); }
.envbadge.prod{ background:var(--ok-bg); color:var(--ok-fg); border:1px solid var(--ok-bd); }
/* Read-only access (js/readonly.js): the header says so, on every screen */
.robadge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap;
  background:var(--vio-bg); color:var(--vio); border:1px solid var(--bd-strong); }
.robadge svg{ flex:none; }
html.tuhi #refreshBtn{ height:34px; display:inline-flex; align-items:center; gap:6px; }
html.tuhi #acctBtn{ height:34px; display:inline-flex; align-items:center; gap:8px; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-avatar{ width:24px; height:24px; border-radius:99px; background:var(--acc); color:var(--on-acc); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.bt-acct-email{ overflow:hidden; text-overflow:ellipsis; }

/* Tenant switcher (auth.js paints a <label class="tenant"> with a <select>) */
.tenantpick .tenant{ display:inline-flex; align-items:center; gap:6px; color:var(--mut); font-size:12px; }
.tenantpick .tenant svg{ width:14px; height:14px; }
html.tuhi .tenantpick select{ height:34px; padding:0 30px 0 10px; font-size:12.5px; font-weight:600; border-radius:8px; }
.tenantpick .tenant-key{ font-size:12px; color:var(--mut); display:inline-flex; align-items:center; gap:5px; }
.tenantpick .tenant-key svg{ width:13px; height:13px; }

/* Account menu */
.acct .navmenu.acctmenu{ left:auto; right:0; min-width:250px; }
.acctmenu .acctwho{ padding:8px 12px 8px; font-size:13px; border-bottom:1px solid var(--bd); margin-bottom:4px; }
.acctmenu .acctrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 12px; }
.acctmenu .acctrow button.chip{ display:inline-block; width:auto; padding:2px 9px; font-size:11.5px; }
.acctmenu > button{ background:none; border:none; color:var(--fg); padding:8px 12px; border-radius:8px; cursor:pointer; font-size:13px; display:block; width:100%; text-align:left; }
.acctmenu > button:hover{ background:var(--surface-3); }

/* ── sidebar ── (owner, 2026-11-05: "header and menu and submenu should clearly visible")
   Section headings read as headings, not items: larger caps, heavier, --fg-2 (≥ 9:1 light, ≥ 10:1 dark on --side-bg), an accent
   icon, a rule above and air around. Items are --fg-2 at 13.5px. Sub-items are ALWAYS expanded under their parent (no chevron), on
   a 2px guide line; the open screen's parent is lit and its open sub-item is lit more strongly, with an accent segment on the line. */
html.tuhi aside.bt-side{ grid-area:side; position:sticky; top:var(--top-h); align-self:start; height:calc(100vh - var(--top-h)); height:calc(100dvh - var(--top-h));
  background:var(--side-bg); border-right:1px solid var(--bd); display:flex; flex-direction:column; z-index:60; overflow:hidden; }
html.tuhi nav#nav{ display:block; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:12px 10px 16px; border:0; }
.bt-navsec{ margin-top:14px; padding-top:12px; border-top:1px solid var(--bd); }
.bt-navsec:first-child{ margin-top:0; padding-top:0; border-top:0; }
.bt-navlabel{ display:flex; align-items:center; gap:8px; padding:2px 10px 8px; font-size:11.5px; font-weight:800; letter-spacing:.075em; text-transform:uppercase;
  color:var(--fg-2); white-space:nowrap; }
.bt-navlabel .ico{ color:var(--acc-fg); flex:none; }
.bt-navsec.current .bt-navlabel{ color:var(--fg); }
html.tuhi nav#nav button.bt-navitem{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; border-radius:8px;
  padding:7px 10px; min-height:36px; color:var(--fg-2); font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; position:relative; }
html.tuhi nav#nav button.bt-navitem .ico{ color:var(--mut); }
html.tuhi nav#nav button.bt-navitem:hover{ background:var(--surface-3); color:var(--fg); }
html.tuhi nav#nav button.bt-navitem.active{ background:var(--acc-soft); color:var(--acc-fg); font-weight:650; }
html.tuhi nav#nav button.bt-navitem.active .ico{ color:var(--acc-fg); }
html.tuhi nav#nav button.bt-navitem.active::before{ content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--acc); }
.bt-navitem .ico{ flex:none; }
.bt-navtxt{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.bt-subnav{ display:none; margin:3px 0 6px 19px; padding:2px 0 2px 10px; border-left:2px solid var(--bd-strong); }
.bt-navgrp.open > .bt-subnav{ display:block; }
.bt-navgrp.current > .bt-subnav{ border-left-color:var(--acc-ring); }
html.tuhi nav#nav button.bt-subitem{ display:block; width:100%; text-align:left; background:none; border:0; border-radius:7px; padding:6px 10px; min-height:30px; font-size:13px;
  font-weight:500; color:var(--fg-2); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; }
html.tuhi nav#nav button.bt-subitem:hover{ color:var(--fg); background:var(--surface-3); }
html.tuhi nav#nav button.bt-subitem.active{ color:var(--acc-fg); font-weight:700; background:var(--acc-soft); overflow:visible; }
html.tuhi nav#nav button.bt-subitem.active::before{ content:""; position:absolute; left:-12px; top:4px; bottom:4px; width:2px; border-radius:2px; background:var(--acc); }
.bt-side-foot{ flex:none; border-top:1px solid var(--bd); padding:8px 10px; }
.bt-collapse{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; border-radius:8px; padding:7px 10px; color:var(--mut); font-size:12.5px; cursor:pointer; white-space:nowrap; }
.bt-collapse:hover{ background:var(--surface-3); color:var(--fg); }
.bt-scrim{ display:none; }

/* ── content + footer ── */
html.tuhi main#view{ grid-area:main; width:auto; max-width:none; margin:0; padding:24px 28px 32px; min-width:0; }
html.tuhi footer.bt-foot{ grid-area:foot; display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:10px 28px; min-height:44px;
  border-top:1px solid var(--bd); background:var(--foot-bg); color:var(--mut); font-size:12px; }
.bt-foot a{ color:var(--fg-2) !important; text-decoration:none !important; display:inline-flex; align-items:center; gap:5px; }
.bt-foot a:hover{ color:var(--acc-fg) !important; text-decoration:underline !important; }
.bt-foot code{ background:var(--code-bg); color:var(--code-fg); border-radius:5px; padding:1px 6px; font-size:11.5px; }
.bt-foot .bt-foot-sp{ margin-left:auto; }
.bt-foot .bt-fstat{ display:inline-flex; align-items:center; gap:7px; color:var(--fg-2); }

/* ── RAIL: icons only (user-collapsed, or 768–1023px). Hover expands it over the content. ── */
html.tuhi #app.rail{ grid-template-columns:var(--rail-w) minmax(0,1fr); }
#app.rail .bt-side{ width:var(--rail-w); transition:width .16s ease, box-shadow .16s ease; }
#app.rail .bt-navlabel span, #app.rail .bt-navtxt, #app.rail .bt-subnav, #app.rail .bt-collapse span{ display:none; }
#app.rail .bt-navlabel{ justify-content:center; padding:6px 0; }
#app.rail .bt-navsec{ border-top:0; padding-top:0; }
#app.rail .bt-navlabel::after{ content:""; display:block; width:20px; height:1px; background:var(--bd); }
#app.rail nav#nav button.bt-navitem{ justify-content:center; padding:7px 0; }
#app.rail .bt-collapse{ justify-content:center; padding:7px 0; }
#app.rail .bt-side:hover, #app.rail .bt-side:focus-within{ width:var(--side-w); box-shadow:var(--shadow-md); }
#app.rail .bt-side:hover .bt-navlabel span, #app.rail .bt-side:hover .bt-navtxt, #app.rail .bt-side:hover .bt-collapse span,
#app.rail .bt-side:focus-within .bt-navlabel span, #app.rail .bt-side:focus-within .bt-navtxt, #app.rail .bt-side:focus-within .bt-collapse span{ display:inline; }
#app.rail .bt-side:hover .bt-navgrp.open > .bt-subnav, #app.rail .bt-side:focus-within .bt-navgrp.open > .bt-subnav{ display:block; }
#app.rail .bt-side:hover .bt-navlabel, #app.rail .bt-side:focus-within .bt-navlabel{ justify-content:flex-start; padding:2px 10px 8px; }
#app.rail .bt-side:hover .bt-navlabel::after, #app.rail .bt-side:focus-within .bt-navlabel::after{ display:none; }
#app.rail .bt-side:hover nav#nav button.bt-navitem, #app.rail .bt-side:focus-within nav#nav button.bt-navitem{ justify-content:flex-start; padding:7px 10px; }
#app.rail .bt-side:hover .bt-collapse, #app.rail .bt-side:focus-within .bt-collapse{ justify-content:flex-start; padding:7px 10px; }

/* ── MOBILE (< 768px): sidebar is an off-canvas drawer behind the hamburger ── */
@media (max-width:767px){
  html.tuhi #app, html.tuhi #app.rail{ grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "main" "foot"; }
  /* THE MISSING-HEADER BUG (owner screenshot, 2026-11-05): the base rule's align-self:start made this fixed drawer as tall as its
     content; taller than the space under the header, Chrome's abspos alignment then shifted it UP to y=0 — over the header (z 80 > 70),
     hiding the header and the first items. stretch pins it to top:var(--top-h)…bottom:0 and its nav scrolls inside; the header also
     sits above every layer now (z 90). */
  html.tuhi aside.bt-side, #app.rail .bt-side{ position:fixed; top:var(--top-h); left:0; bottom:0; height:auto; align-self:stretch; width:min(86vw,var(--side-w)); transform:translateX(-102%);
    transition:transform .2s ease; box-shadow:var(--shadow-md); z-index:80; }
  #app.drawer .bt-side{ transform:none; }
  #app.rail .bt-navlabel span, #app.rail .bt-navtxt, #app.rail .bt-collapse span{ display:inline; }
  #app.rail .bt-navgrp.open > .bt-subnav{ display:block; }
  #app.rail nav#nav button.bt-navitem{ justify-content:flex-start; padding:7px 10px; }
  #app.rail .bt-navlabel{ justify-content:flex-start; padding:2px 10px 8px; } #app.rail .bt-navlabel::after{ display:none; } #app.rail .bt-navsec:not(:first-child){ border-top:1px solid var(--bd); padding-top:12px; }
  .bt-side-foot{ display:none; }
  #app.drawer .bt-scrim{ display:block; position:fixed; inset:var(--top-h) 0 0 0; background:rgba(10,14,24,.42); z-index:75; }
  html.tuhi main#view{ padding:16px; }
  html.tuhi footer.bt-foot{ padding:10px 16px; }
  .bt-brand-sub, .bt-badges .live, .bt-acct-email, .bt-refresh-txt, .tenantpick .tenant > svg, .bt-badges #hstatus{ display:none; }
  .bt-badges{ margin-left:0; gap:6px; }
  html.tuhi header.bt-top{ gap:6px; padding:0 8px 0 4px; }
  html.tuhi #acctBtn{ padding:0 6px; }
  .bt-foot .bt-foot-sp{ margin-left:0; }
}
@media (min-width:768px){ .bt-burger{ display:none; } }
@media (max-width:1023px) and (min-width:768px){ .bt-brand-sub{ display:none; } .bt-refresh-txt{ display:none; } }
@media (max-width:1279px){ .bt-crumb-sec, .bt-crumb-sec + .bt-crumb-sep{ display:none !important; } .bt-badges .live{ display:none; } }
@media (max-width:1180px) and (min-width:768px){ .bt-badges #hstatus{ display:none; } .bt-acct-email{ max-width:150px; } html.tuhi #acctBtn{ max-width:200px; } }
.bt-crumb{ flex:0 1 auto; }
@media (max-width:767px){ .envbadge{ font-size:0; gap:0; padding:0 8px; } .bt-crumb-cur .ico{ display:none; } .bt-brand-txt{ display:none; } html.tuhi nav.bt-crumb{ margin-left:4px; padding-left:10px; flex:1 1 auto; } .bt-crumb-sub, .bt-crumb-sub ~ *, .bt-crumb-cur + .bt-crumb-sep{ display:none !important; } }

/* ═══ 4. TUHI COMPONENTS, RETUNED TO THE TOKENS ═══════════════════════════════════════════════════════════════════ */
html.tuhi .card{ background:var(--surface); border:1px solid var(--bd); border-radius:12px; box-shadow:var(--shadow-sm); color:var(--fg); }
html.tuhi .card h3{ color:var(--fg-2); font-weight:600; }
html.tuhi .card h4{ color:var(--fg); }
html.tuhi .hero{ background:var(--surface); border-color:var(--bd); box-shadow:var(--shadow-sm); }
html.tuhi .muted{ color:var(--mut); }
html.tuhi .lead{ color:var(--fg-2); }
html.tuhi .note{ background:var(--inset); border-color:var(--bd); color:var(--fg-2); }
html.tuhi .badge{ background:var(--acc-soft); color:var(--acc-fg); font-weight:600; }
html.tuhi th{ color:var(--mut); font-weight:600; font-size:12px; }
html.tuhi th, html.tuhi td{ border-bottom-color:var(--bd-soft); }
html.tuhi a{ color:var(--acc-fg); }
html.tuhi a:hover{ color:var(--acc-hover); }
html.tuhi button.act{ background:var(--acc); color:var(--on-acc); font-weight:600; }
html.tuhi button.act:hover{ background:var(--acc-hover); }
html.tuhi button.ico{ background:var(--surface); color:var(--fg-2); border:1px solid var(--bd-strong); }
html.tuhi button.ico:hover{ color:var(--acc-fg); border-color:var(--acc); }
html.tuhi button.ico.active{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
html.tuhi button.ghost{ border-color:var(--bd-strong); color:var(--fg); background:var(--surface); }
html.tuhi button.ghost:hover{ background:var(--surface-3); }
html.tuhi button.chip{ background:var(--surface); color:var(--fg-2); border:1px solid var(--bd-strong); }
html.tuhi button.chip:hover{ border-color:var(--acc); color:var(--acc-fg); }
html.tuhi button.chip.on{ background:var(--acc); color:var(--on-acc); border-color:var(--acc); }
html.tuhi button.chip.on .muted{ color:var(--on-acc); opacity:.8; }
html.tuhi button.chip.off:hover{ border-color:var(--bd-strong); color:var(--fg-2); }
html.tuhi button.chip.clear{ background:var(--err-bg); color:var(--err-fg); border-color:var(--err-bd); }
html.tuhi button.loading::after{ border-color:var(--acc-ring); border-top-color:var(--on-acc); }
html.tuhi input, html.tuhi select, html.tuhi textarea{ background:var(--surface); border:1px solid var(--bd-strong); color:var(--fg); }
html.tuhi .ctl:focus, html.tuhi .chipin:focus{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-ring); }
html.tuhi pre#logs{ background:var(--inset); border-color:var(--bd); color:var(--fg-2); }
html.tuhi code{ background:var(--code-bg); color:var(--code-fg); border-radius:5px; padding:1px 5px; }
html.tuhi code.k{ background:var(--code-bg); color:var(--code-fg); border:1px solid var(--bd-soft); }
html.tuhi .ok:not(.dot){ color:var(--ok-fg); background:var(--ok-bg); border-color:var(--ok-bd); }
html.tuhi .warn:not(.dot){ color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-bd); }
html.tuhi .err:not(.dot){ color:var(--err-fg); background:var(--err-bg); border-color:var(--err-bd); }
html.tuhi .steps li::before{ background:var(--acc); color:var(--on-acc); }
html.tuhi .navmenu{ background:var(--surface); border-color:var(--bd); box-shadow:var(--shadow-md); }
html.tuhi .navmenu button:hover{ background:var(--surface-3); }
html.tuhi .ovskel{ background:linear-gradient(90deg,var(--surface-3),var(--bd-soft),var(--surface-3)); background-size:220% 100%; }
html.tuhi .flashtoast{ background:var(--surface); border:1px solid var(--ok-bd); color:var(--fg); box-shadow:var(--shadow-md); }
html.tuhi .flashtoast.err{ background:var(--surface); border-color:var(--err-bd); color:var(--err-fg); }
html.tuhi .fchip{ background:var(--acc-soft); border-color:var(--acc-ring); color:var(--acc-fg); }
html.tuhi .fchip button{ color:var(--acc-fg); }
html.tuhi .chipin{ background:var(--surface); border-color:var(--bd-strong); }
html.tuhi .chipmenu, html.tuhi .chipgrp{ background:var(--surface); border-color:var(--bd); }
html.tuhi .chipgrp{ color:var(--mut); }
html.tuhi .chipopt{ color:var(--fg); }
html.tuhi .chipopt:hover{ background:var(--acc-soft); }
html.tuhi details.collapse > summary::before{ color:var(--mut); }
html.tuhi .noteRow .nbtn{ color:var(--mut); }
html.tuhi .switch .track, html.tuhi .toggle .track{ background:var(--bd-strong); }
html.tuhi .switch input:checked + .track, html.tuhi .toggle input:checked + .track{ background:var(--acc); }
html.tuhi .tpill{ background:var(--surface); color:var(--fg-2); border-color:var(--bd-strong); }
html.tuhi .tpill:hover{ color:var(--fg); border-color:var(--acc); }
html.tuhi .tpill.on{ background:var(--acc-soft); color:var(--acc-fg); border-color:var(--acc); }
html.tuhi .vfav{ color:var(--mut); }
html.tuhi .memstat{ background:var(--inset); border-color:var(--bd); }
html.tuhi .behav li{ color:var(--fg-2); }
html.tuhi .egraw .redacted-ph{ color:var(--ok-fg); background:var(--ok-bg); border-color:var(--ok-bd); }
html.tuhi .egraw .restored-ph{ color:var(--vio); background:var(--vio-bg); }
html.tuhi .egraw .sec-h{ color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-bd); }
html.tuhi .viewload i{ border-color:var(--bd); border-top-color:var(--acc); }

/* ── Chanakya Router (js/tuhi/router.js btStyles injects #btcss with dark literals; same selectors, higher specificity) ── */
html.tuhi .bt-sharescroll{ border-color:var(--bd); background:var(--surface-2); }
html.tuhi .bt-econrow, html.tuhi .bt-provrow, html.tuhi .bt-catrow, html.tuhi .bt-sharerow{ border-bottom-color:var(--bd-soft); }
html.tuhi .bt-econhdr, html.tuhi .bt-cathdr, html.tuhi .bt-sharehdr{ color:var(--mut); border-bottom-color:var(--bd); }
html.tuhi .bt-sharescroll .bt-econhdr, html.tuhi .bt-sharescroll .bt-provrow.bt-econhdr{ background:var(--surface-2); }
html.tuhi .bt-provrow.bt-provtot{ border-top-color:var(--bd); }
html.tuhi .bt-provrow:not(.bt-econhdr):hover, html.tuhi .bt-econrow:not(.bt-econhdr):hover, html.tuhi .bt-sharerow:not(.bt-sharehdr):hover, html.tuhi .bt-catrow:not(.bt-cathdr):hover{ background:var(--acc-soft); }
html.tuhi .bt-kpi{ background:var(--surface-2); border-color:var(--bd); }
html.tuhi .bt-spin{ border-color:var(--bd); border-top-color:var(--acc); }
html.tuhi .bt-econq{ background:var(--surface); border-color:var(--bd-strong); }
html.tuhi .bt-chipbtn{ border-color:var(--bd-strong); color:var(--fg-2); }
html.tuhi .bt-chipbtn.on{ border-color:var(--acc); color:var(--acc-fg); background:var(--acc-soft); }
html.tuhi .bt-sort.on{ color:var(--acc-fg); }
html.tuhi .bt-econsub, html.tuhi .bt-catsub, html.tuhi .bt-minil{ color:var(--mut); }
html.tuhi details.bt-cat>summary .bt-econname:first-child:before, html.tuhi details.bt-cat>summary .bt-catname:first-child:before{ color:var(--mut); }
html.tuhi .bt-econtok{ color:var(--fg-2); }
html.tuhi .bt-sharecpc{ color:var(--info); }
html.tuhi .bt-sharespend{ color:var(--warn-fg); }
html.tuhi .bt-minib, html.tuhi .bt-sharebar, html.tuhi .bt-meter{ background:var(--surface-3); }
html.tuhi .bt-minib i, html.tuhi .bt-sharebar i{ background:var(--acc); }
html.tuhi .bt-meter>u{ background:var(--fg); }
html.tuhi .bt-meter-open{ background:repeating-linear-gradient(90deg,var(--surface-3) 0 6px,var(--surface-2) 6px 12px); }
html.tuhi .bt-svg{ background:var(--chart-surf); border:1px solid var(--bd-soft); }
html.tuhi .bt-ax{ fill:var(--mut); }
html.tuhi .bt-lbl, html.tuhi .bt-panel, html.tuhi .bt-endlbl{ fill:var(--fg-2); }
html.tuhi .bt-val{ fill:var(--fg); }
html.tuhi .bt-note{ fill:var(--mut); color:var(--mut); }
html.tuhi .bt-svg rect.bt-hit:hover{ fill:var(--acc-soft); }
html.tuhi .bt-svg [stroke="#12161d"]{ stroke:var(--chart-surf); }
html.tuhi .bt-svg [stroke="#242b36"]{ stroke:var(--grid); }
html.tuhi .bt-preset{ background:var(--surface); color:var(--fg-2); border-color:var(--bd-strong); }
html.tuhi .bt-preset:hover{ border-color:var(--acc); color:var(--acc-fg); }
html.tuhi .bt-preset.on{ background:var(--acc); color:var(--on-acc); border-color:var(--acc); }
html.tuhi .bt-date, html.tuhi .bt-pick{ background:var(--surface); border-color:var(--bd-strong); color:var(--fg); color-scheme:inherit; }
html.tuhi .bt-prov{ color:var(--fg-2); background:var(--surface-2); border-color:var(--bd); }
html.tuhi .bt-tile, html.tuhi .bt-hero, html.tuhi .bt-livecell, html.tuhi .bt-switch{ background:var(--surface-2); border-color:var(--bd); }
html.tuhi .bt-hero{ border-color:var(--acc-ring); }
html.tuhi .bt-flag{ color:var(--warn-fg); }
html.tuhi .bt-chip{ background:var(--surface); color:var(--fg-2); border-color:var(--bd-strong); }
html.tuhi .bt-chip:hover{ border-color:var(--acc); color:var(--acc-fg); }
html.tuhi .bt-tip{ background:var(--surface); border-color:var(--bd-strong); box-shadow:var(--shadow-md); color:var(--fg); }
html.tuhi .bt-tip-h, html.tuhi .bt-tip-r span{ color:var(--mut); }
html.tuhi .bt-tip-r b{ color:var(--fg); }
html.tuhi .bt-empty{ background:var(--surface-2); border-color:var(--bd-strong); color:var(--mut); }
html.tuhi .bt-note-line, html.tuhi .bt-up{ color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-bd); }
html.tuhi .bt-up-row{ border-bottom-color:var(--bd-soft); }
html.tuhi .bt-up-prov, html.tuhi .bt-up-bar{ background:var(--surface-3); }
html.tuhi .bt-filter{ box-shadow:var(--shadow-sm); top:calc(var(--top-h) + 0px); }

/* ── Model Catalogue SVG (catalogue.js CAT_* literals as presentation attributes; CSS wins over them) ── */
html.tuhi #view svg [stroke="#272b34"]{ stroke:var(--grid); }
html.tuhi #view svg [fill="#e6e9ef"]{ fill:var(--fg); }
html.tuhi #view svg [fill="#8a93a6"], html.tuhi #view svg [stroke="#8a93a6"]{ fill:var(--mut); }
html.tuhi #view svg [stroke="#8a93a6"]{ stroke:var(--mut); fill:none; }
html.tuhi #view svg [stroke="#1a1d24"]{ stroke:var(--surface); }

/* ═══ 5. INLINE LITERALS IN THE PORTED SCREENS → TOKENS ═══════════════════════════════════════════════════════════
   Screens write style="background:#0c0e12;color:#8b93a7" etc. Matching the attribute keeps their JS untouched. */
/* dark panels → surfaces */
html.tuhi [style*="background:#0c0e12" i], html.tuhi [style*="background:#0f131a" i], html.tuhi [style*="background:#12161d" i],
html.tuhi [style*="background:#0d1015" i], html.tuhi [style*="background:#0a0d12" i], html.tuhi [style*="background:#0b0e14" i],
html.tuhi [style*="background:#12161f" i], html.tuhi [style*="background:#171a21" i], html.tuhi [style*="background:#161b24" i]{ background:var(--inset) !important; }
html.tuhi [style*="background:#1c2230" i], html.tuhi [style*="background:#1e2430" i], html.tuhi [style*="background:#1a1d24" i],
html.tuhi [style*="background:#1a1d25" i], html.tuhi [style*="background:#161b26" i], html.tuhi [style*="background:#1a1f2b" i],
html.tuhi [style*="background:#2a3140" i], html.tuhi [style*="background:#2f3442" i], html.tuhi [style*="background:#23252e" i],
html.tuhi [style*="background:#272b34" i], html.tuhi [style*="background:#20242d" i], html.tuhi [style*="background:var(--soft,#1a1f29)" i]{ background:var(--surface-3) !important; }
html.tuhi [style*="background:#16243a" i]{ background:var(--acc-soft) !important; }
html.tuhi [style*="background:#0e2a16" i]{ background:var(--ok-bg) !important; }
html.tuhi [style*="background:#3a1616" i], html.tuhi [style*="background:#2a2030" i]{ background:var(--err-bg) !important; }
html.tuhi [style*="background:#3a2a12" i], html.tuhi [style*="background:#3a2318" i]{ background:var(--warn-bg) !important; }
/* dark borders → --bd (an accent left rule stays) */
html.tuhi [style*="solid #1c2230" i]:not([style*="border-left:3px" i]), html.tuhi [style*="solid #161b26" i]:not([style*="border-left:3px" i]),
html.tuhi [style*="solid #2a3140" i]:not([style*="border-left:3px" i]), html.tuhi [style*="solid #2f3442" i]:not([style*="border-left:3px" i]),
html.tuhi [style*="solid #1e2430" i]:not([style*="border-left:3px" i]), html.tuhi [style*="solid #333a49" i]:not([style*="border-left:3px" i]),
html.tuhi [style*="dashed #2f3644" i], html.tuhi [style*="solid #272b34" i]:not([style*="border-left:3px" i]), html.tuhi [style*="solid #3a3d49" i]{ border-color:var(--bd) !important; }
html.tuhi [style*="solid #7a3b2e" i]{ border-color:var(--err-bd) !important; }
/* text colours → semantic tokens (the literal is a dark-theme tint; on a light surface it would be unreadable) */
html.tuhi [style*="color:#5fd39a" i], html.tuhi [style*="color:#46d369" i], html.tuhi [style*="color:#4ade80" i], html.tuhi [style*="color:#34c759" i],
html.tuhi [style*="color:#1a9e5f" i], html.tuhi [style*="color:#3dbc5b" i], html.tuhi [style*="color:#4ad07a" i], html.tuhi [style*="color:#4fa66a" i],
html.tuhi [style*="color:#008300" i], html.tuhi [style*="color:#7ee2a0" i]{ color:var(--ok-fg) !important; }
html.tuhi [style*="color:#ff6b6b" i], html.tuhi [style*="color:#d1495b" i], html.tuhi [style*="color:#e5484d" i], html.tuhi [style*="color:#ff453a" i],
html.tuhi [style*="color:#d24646" i], html.tuhi [style*="color:#e66767" i], html.tuhi [style*="color:#ff8a6a" i], html.tuhi [style*="color:#ff8585" i],
html.tuhi [style*="color:#ff9d96" i]{ color:var(--err-fg) !important; }
html.tuhi [style*="color:#f5a623" i], html.tuhi [style*="color:#ffc46b" i], html.tuhi [style*="color:#f0a83a" i], html.tuhi [style*="color:#c98500" i],
html.tuhi [style*="color:#ff9f0a" i], html.tuhi [style*="color:#e0a33a" i], html.tuhi [style*="color:#f0b34a" i], html.tuhi [style*="color:#e0a33e" i],
html.tuhi [style*="color:#ffcf5a" i], html.tuhi [style*="color:#d18a13" i], html.tuhi [style*="color:#e0803a" i], html.tuhi [style*="color:#e0603a" i],
html.tuhi [style*="color:#ffb066" i], html.tuhi [style*="color:#c9a227" i], html.tuhi [style*="color:#ffc400" i]{ color:var(--warn-fg) !important; }
html.tuhi [style*="color:#8b93a7" i], html.tuhi [style*="color:#8a93a6" i], html.tuhi [style*="color:#9aa0a6" i], html.tuhi [style*="color:#aeb6c6" i],
html.tuhi [style*="color:#6b7280" i], html.tuhi [style*="color:#5b6577" i], html.tuhi [style*="color:#7c8699" i], html.tuhi [style*="color:#9fb0c8" i],
html.tuhi [style*="color:#3a4150" i], html.tuhi [style*="color:#9aa3b4" i]{ color:var(--mut) !important; }
html.tuhi [style*="color:#c2c9d6" i], html.tuhi [style*="color:#cdd1d6" i], html.tuhi [style*="color:#c2cbd8" i], html.tuhi [style*="color:#dbe6f5" i],
html.tuhi [style*="color:#aab2c2" i], html.tuhi [style*="color:#d7dce6" i]{ color:var(--fg-2) !important; }
html.tuhi [style*="color:#e6e9ef" i]{ color:var(--fg) !important; }
html.tuhi [style*="color:#4f8cff" i], html.tuhi [style*="color:#3987e5" i], html.tuhi [style*="color:#6a8dff" i], html.tuhi [style*="color:#5c9bff" i],
html.tuhi [style*="color:#6ea8ff" i], html.tuhi [style*="color:#8fb3ff" i], html.tuhi [style*="color:#cfe0ff" i], html.tuhi [style*="color:#8ab4f8" i],
html.tuhi [style*="color:#7eb6ff" i]{ color:var(--acc-fg) !important; }
html.tuhi [style*="color:#a879ff" i], html.tuhi [style*="color:#7c5cff" i], html.tuhi [style*="color:#9085e9" i], html.tuhi [style*="color:#8a63d8" i],
html.tuhi [style*="color:#a98cf0" i]{ color:var(--vio) !important; }
/* a chip that keeps its fill keeps its white type */
html.tuhi [style*="background:#3987e5" i][style*="color:#fff" i], html.tuhi [style*="background:#2563eb" i]{ color:#fff !important; }
/* the panel headings some screens colour with var(--fg) on a now-light panel already follow the tokens */

/* ═══ 6. OVERVIEW DASHBOARD (js/tuhi/overview.js) ═══════════════════════════════════════════════════════════════ */
.db-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:18px; }
.db-title{ font-size:22px; font-weight:700; letter-spacing:-.015em; margin:0; color:var(--fg); }
.db-sub{ color:var(--mut); font-size:13px; margin-top:4px; }
.db-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--mut); font-size:12px; }
.db-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:16px; }
.db-tile{ background:var(--surface); border:1px solid var(--bd); border-radius:12px; padding:14px 16px 13px; box-shadow:var(--shadow-sm); min-width:0;
  display:flex; flex-direction:column; gap:4px; position:relative; text-align:left; font:inherit; color:inherit; }
a.db-tile, button.db-tile{ cursor:pointer; text-decoration:none !important; color:var(--fg) !important; }
a.db-tile:hover, button.db-tile:hover{ border-color:var(--acc); }
.db-tl{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:var(--mut); letter-spacing:.02em; }
.db-tl .db-ic{ width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--acc-soft); color:var(--acc-fg); flex:none; }
.db-ic.t-ok{ background:var(--ok-bg); color:var(--ok-fg); } .db-ic.t-warn{ background:var(--warn-bg); color:var(--warn-fg); } .db-ic.t-err{ background:var(--err-bg); color:var(--err-fg); }
.db-ic.t-vio{ background:var(--vio-bg); color:var(--vio); }
.db-tv{ font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:6px; color:var(--fg); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-tv small{ font-size:13px; font-weight:600; color:var(--mut); letter-spacing:0; margin-left:4px; }
.db-ts{ font-size:12px; color:var(--mut); line-height:1.45; min-height:17px; }
.db-ts b{ color:var(--fg-2); font-weight:600; }
.db-tag{ display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:99px; font-size:11px; font-weight:700; border:1px solid transparent; }
.db-tag.t-ok{ background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd); }
.db-tag.t-warn{ background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-bd); }
.db-tag.t-err{ background:var(--err-bg); color:var(--err-fg); border-color:var(--err-bd); }
.db-tag.t-acc{ background:var(--acc-soft); color:var(--acc-fg); border-color:var(--acc-ring); }
.db-tag.t-mut{ background:var(--surface-3); color:var(--fg-2); border-color:var(--bd); }
.db-bar{ height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:6px; }
.db-bar > i{ display:block; height:100%; border-radius:99px; background:var(--acc); }
.db-bar.t-warn > i{ background:var(--warn); } .db-bar.t-err > i{ background:var(--err); }
.db-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.db-span-8{ grid-column:span 8; } .db-span-4{ grid-column:span 4; } .db-span-6{ grid-column:span 6; } .db-span-12{ grid-column:span 12; }
@media (max-width:1180px){ .db-span-8, .db-span-4{ grid-column:span 12; } }
@media (max-width:900px){ .db-span-6{ grid-column:span 12; } }
.db-panel{ background:var(--surface); border:1px solid var(--bd); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow-sm); min-width:0; }
.db-ph{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.db-ph h3{ margin:0; font-size:14px; font-weight:650; color:var(--fg); }
.db-ph .db-link{ font-size:12px; font-weight:600; color:var(--acc-fg) !important; text-decoration:none !important; background:none; border:0; cursor:pointer; padding:2px 4px; }
.db-ph .db-link:hover{ text-decoration:underline !important; }
.db-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--mut); margin:-4px 0 8px; }
.db-legend span{ display:inline-flex; align-items:center; gap:6px; }
.db-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.db-chart{ width:100%; height:auto; display:block; }
.db-chart .ax{ fill:var(--mut); font-size:11px; font-variant-numeric:tabular-nums; }
.db-chart .gl{ stroke:var(--grid); stroke-width:1; }
.db-chart .bar{ fill:var(--acc); opacity:.85; } .db-chart .bar.err{ fill:var(--err); opacity:.9; }
.db-chart .line{ fill:none; stroke:var(--warn); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.db-chart .hit:hover{ fill:var(--acc-soft); }
.db-list{ display:flex; flex-direction:column; }
.db-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--bd-soft); font-size:13px; }
.db-row:last-child{ border-bottom:0; }
.db-row .n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); font-weight:500; }
.db-row .n small{ color:var(--mut); font-weight:400; margin-left:6px; }
.db-row .v{ font-variant-numeric:tabular-nums; color:var(--fg-2); text-align:right; white-space:nowrap; font-size:12.5px; }
.db-row .db-bar{ grid-column:1 / -1; margin-top:2px; height:5px; }
.db-kv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 14px; font-size:13px; align-items:baseline; }
.db-kv dt{ color:var(--mut); font-size:12px; }
.db-kv dd{ margin:0; color:var(--fg); min-width:0; overflow-wrap:anywhere; }
.db-empty{ color:var(--mut); font-size:12.5px; line-height:1.55; background:var(--surface-2); border:1px dashed var(--bd-strong); border-radius:10px; padding:14px 16px; }
.db-error{ color:var(--err-fg); font-size:12.5px; background:var(--err-bg); border:1px solid var(--err-bd); border-radius:10px; padding:10px 12px; }
.db-skel{ display:block; height:14px; border-radius:6px; background:linear-gradient(90deg,var(--surface-3),var(--bd-soft),var(--surface-3)); background-size:220% 100%; animation:ovsk 1.15s linear infinite; }
.db-skel.big{ height:28px; width:60%; margin:8px 0 4px; } .db-skel.w40{ width:40%; } .db-skel.w80{ width:80%; } .db-skel.chart{ height:180px; border-radius:10px; }
.db-fails td, .db-fails th{ font-size:12.5px; padding:8px 6px; }
.db-fails td.t{ white-space:nowrap; color:var(--mut); }
.db-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.db-qlink{ display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--bd); border-radius:10px; background:var(--surface-2); cursor:pointer; text-align:left;
  font:inherit; color:var(--fg); font-size:13px; font-weight:500; }
.db-qlink:hover{ border-color:var(--acc); background:var(--acc-soft); color:var(--acc-fg); }
.db-qlink .ico{ color:var(--acc-fg); flex:none; }
.db-qlink small{ display:block; color:var(--mut); font-size:11.5px; font-weight:400; margin-top:1px; }

/* the header / footer status light — after Tuhi's .ok/.warn/.err message face, which would otherwise pad it into a pill */
html.tuhi .bigdot.bigdot{ padding:0; border:0; max-width:none; font-size:0; line-height:0; display:inline-block; width:8px; height:8px; border-radius:99px; }
html.tuhi .bigdot.bigdot.ok{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg); }
html.tuhi .bigdot.bigdot.warn{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg); }
html.tuhi .bigdot.bigdot.err{ background:var(--err); box-shadow:0 0 0 3px var(--err-bg); }

/* framed screens (Gateway, Task Tree) fill the content area between the top bar and the footer */
html.tuhi #view > iframe[src^="/gateway"]{ height:calc(100vh - var(--top-h) - 104px) !important; min-height:520px !important; }
html.tuhi #view > iframe[src^="/tuhi-task-tree"]{ height:calc(100vh - var(--top-h) - 200px) !important; min-height:520px !important; }

/* small phones: the header keeps burger, mark, environment, tenant, refresh and the account avatar on one line */
@media (max-width:767px){
  .bt-badges .bt-pill{ display:none; }
  html.tuhi .tenantpick select{ max-width:96px; }
  html.tuhi #acctBtn svg{ display:none; }
  html.tuhi #refreshBtn{ padding:0 10px; }
  .bt-tools{ gap:4px; flex:none; } .bt-badges{ flex:none; }
}
@media (max-width:479px){
  .bt-brand-txt{ display:none; }
  .db-title{ font-size:19px; }
}

/* ═══ TEAM & ACCESS (js/tuhi/team.js) — the db-* system above, plus its table and forms ══════════════════════════════ */
.tm-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tm-table th{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--bd); white-space:nowrap; }
.tm-table td{ padding:10px; border-bottom:1px solid var(--bd-soft); vertical-align:middle; }
.tm-table tr:last-child td{ border-bottom:0; }
.tm-table td.tm-email{ font-weight:600; color:var(--fg); word-break:break-all; }
.tm-table td.tm-email small{ display:block; font-weight:400; color:var(--mut); font-size:11.5px; margin-top:2px; }
.tm-table td.tm-t{ color:var(--mut); white-space:nowrap; font-size:12px; }
.tm-acts{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.tm-scroll{ overflow-x:auto; margin:0 -4px; padding:0 4px; }
.tm-invite{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.tm-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.tm-field label{ font-size:11.5px; font-weight:600; color:var(--mut); letter-spacing:.02em; }
.tm-field input, .tm-field select, .tm-table select{ height:34px; border-radius:8px; padding:0 10px; font:inherit; font-size:13px; }
.tm-field input{ width:280px; max-width:100%; }
.tm-msg{ margin-top:10px; font-size:12.5px; }
.tm-msg.ok{ color:var(--ok-fg); } .tm-msg.err{ color:var(--err-fg); }
.tm-note{ font-size:12px; color:var(--mut); margin-top:10px; line-height:1.5; }
.tm-roles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.tm-role{ border:1px solid var(--bd); border-radius:10px; padding:11px 12px; background:var(--surface-2); }
.tm-role b{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg); }
.tm-role p{ margin:5px 0 0; font-size:12px; color:var(--mut); line-height:1.45; }
.tm-audit .db-row{ grid-template-columns:minmax(0,1fr) auto; }
.tm-audit .n{ white-space:normal !important; }
@media (max-width:767px){ .tm-field input{ width:100%; } .tm-invite .tm-field{ flex:1 1 100%; } .tm-table .tm-hide-sm{ display:none; } }
/* small phones: the Read-only badge keeps its icon, drops its word (the title still says it) */
@media (max-width:767px){ .robadge{ padding:0 7px; font-size:0; gap:0; } .robadge svg{ width:14px; height:14px; } }

/* ═══ 8. LEARNINGS (L1) (js/tuhi/learnings.js) — Tuhi's renderGraph / renderMemory shapes on this console's tokens ═══════════ */
.l1-root .db-head .db-meta .ghost{ height:32px; display:inline-flex; align-items:center; gap:6px; }
.l1-p{ color:var(--fg-2); font-size:13px; line-height:1.55; margin:8px 0 12px; }
.l1-h4{ margin:14px 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-2); }
.l1-small{ font-size:12px; color:var(--fg-2); }
/* Knowledge Levels */
.l1-levels{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); grid-template-rows:auto auto; gap:14px; margin-bottom:14px; }
.l1-levels .l1-own{ grid-row:span 2; }
@media (max-width:1100px){ .l1-levels{ grid-template-columns:minmax(0,1fr); } .l1-levels .l1-own{ grid-row:auto; } }
.l1-lvl-h{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.l1-lvl-h h3{ margin:0; font-size:15px; font-weight:700; color:var(--fg); }
.l1-badge{ flex:none; width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  background:var(--surface-3); color:var(--fg-2); border:1px dashed var(--bd-strong); }
.l1-badge.on{ background:var(--acc); color:var(--on-acc); border:0; }
.l1-ext{ border-style:dashed; background:var(--surface-2); }
.l1-out{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:7px 12px; border-radius:9px; border:1px solid var(--bd-strong); background:var(--surface);
  color:var(--acc-fg) !important; font-weight:600; font-size:13px; text-decoration:none !important; }
.l1-out:hover{ border-color:var(--acc); background:var(--acc-soft); }
.l1-ms{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:6px; }
@media (max-width:900px){ .l1-ms{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.l1-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:18px; }
@media (max-width:900px){ .l1-cols{ grid-template-columns:minmax(0,1fr); } }
.l1-cols .db-row .n{ white-space:normal; }
.l1-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:16px; }
.l1-ledgers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); column-gap:24px; }
/* Learnings Graph */
.l1-ctl-l{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2); }
.l1g .kg-pn-name{ color:var(--fg); padding-right:30px; overflow-wrap:anywhere; } .l1g .kg-pn-sub, .l1g .kg-empty{ color:var(--mut); }
.l1g .kg-bl{ color:var(--fg-2); }
.l1-desc{ font-size:12.5px; color:var(--fg-2); line-height:1.55; margin:10px 0 0; }
.l1-edge{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:12px; padding:4px 0; border-bottom:1px solid var(--bd-soft); }
.l1-edge .kg-ev-rel{ margin:0; background:var(--surface-3); }
.l1-nb{ background:none; border:0; padding:0; color:var(--acc-fg); font:inherit; font-weight:600; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.l1-nb:hover{ text-decoration:underline; }
/* Memory (L1) */
.l1-tiers{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; }
@media (max-width:900px){ .l1-tiers{ grid-template-columns:minmax(0,1fr); } }
.l1-tier .ms-l{ display:flex; align-items:center; gap:6px; text-transform:capitalize; }
.l1-working{ border-style:dashed; }
.l1-filters{ display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin-bottom:12px; }
.l1-filters .chips{ display:inline-flex; gap:6px; flex-wrap:wrap; margin-right:8px; }
.l1-mem td{ vertical-align:top; }
.l1-stmt{ color:var(--fg); line-height:1.5; min-width:260px; }
.l1-stmt small{ display:block; color:var(--mut); font-size:11.5px; margin-top:2px; }
.l1-conf{ display:flex; align-items:center; gap:8px; min-width:110px; } .l1-conf .db-bar{ flex:1; margin:0; } .l1-conf span{ font-size:12px; color:var(--fg-2); font-variant-numeric:tabular-nums; }
.l1-not{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.l1-not li{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--fg-2); line-height:1.5; }
.l1-not li .ico{ color:var(--err-fg); flex:none; margin-top:2px; }
/* Semantic search (L1) */
.l1-search{ display:flex; gap:8px; }
.l1-search input{ flex:1 1 auto; min-width:0; height:40px; padding:0 14px; font-size:14px; border-radius:10px; border:1px solid var(--bd-strong); background:var(--surface-2); color:var(--fg); }
.l1-search input:focus{ outline:2px solid var(--acc-ring); border-color:var(--acc); }
.l1-search .act{ height:40px; display:inline-flex; align-items:center; gap:6px; padding:0 16px; border-radius:10px; }
.l1-mode{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; margin-bottom:8px; }
.l1-hit .n{ white-space:normal; display:flex; gap:8px; align-items:baseline; } .l1-ht{ color:var(--fg); }
.db-empty .chip{ margin:4px 4px 0 0; }
.l1g .kg-pn-sub{ overflow-wrap:anywhere; }
.l1-hit .db-tag{ white-space:nowrap; flex:none; }