/* BrainTrust's additions to Tuhi's header — and nothing else. Everything here is written in Tuhi's own idiom (its
   tokens, its .badge / .ghost / .navmenu / .chip shapes) so the header reads as Tuhi's. */
[hidden]{ display:none !important; }

/* Environment: Local (amber) / Production (green), in the shape of Tuhi's .badge */
.envbadge{ font-size:11px; padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.envbadge.local{ background:rgba(255,159,10,.14); color:#ffc46b; border:1px solid rgba(255,159,10,.35); }
.envbadge.prod{ background:rgba(52,199,89,.12); color:#7ee2a0; border:1px solid rgba(52,199,89,.35); }

/* 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); }
.tenantpick .tenant svg{ width:14px; height:14px; }
.tenantpick select{ padding:5px 8px; font-size:12.5px; }
.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; }
.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; }

/* Account menu: a Tuhi .navmenu, opened from the right edge */
.acct .navmenu.acctmenu{ left:auto; right:0; min-width:230px; }
.acctmenu .acctwho{ padding:8px 12px 6px; 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(--bg); }

/* LIGHT — Tuhi has one light palette, the one it uses when embedded in a light page (html.embed.light in tuhi.css).
   The same rules, keyed on html.light (set by js/tuhi/shell.js from the theme preference). */
html.light{ --bg:#f2f1ee; --card:#ffffff; --fg:#1d1d1f; --mut:#86868b; --bd:#e3e1dc; }
html.light body{ background:var(--bg); color:var(--fg); }
html.light .card{ background:var(--card); border-color:var(--bd); color:var(--fg); }
html.light .card h3, html.light .card h4{ color:var(--fg); }
html.light .muted{ color:var(--mut); }
html.light .ico{ background:#f7f6f4; color:var(--fg); border-color:var(--bd); }
html.light select, html.light input[type=text], html.light input[type=password], html.light input[type=number]{ background:#fff; color:var(--fg); border-color:var(--bd); }
html.light a{ color:#2563eb; }
/* Tuhi's screens paint their inset panels with literal dark colours; in light they take the light panel colours — the
   same attribute-selector technique tuhi.css uses for html.embed.light (`.kg-panel [style*="#1c1f27"]`). */
html.light [style*="background:#0d1015"], html.light [style*="background:#0c0e12"], html.light [style*="background:#12161d"]{ background:#f7f6f4 !important; color:var(--fg); }
html.light [style*="background:#161b26"]{ background:#e6e3dd !important; }
html.light [style*="solid #161b26"]{ border-color:var(--bd) !important; }
html.light button.chip:not(.on){ background:#f7f6f4; color:var(--fg); border-color:var(--bd); }
html.light .badge{ background:#e3ebfb; }
html.light .navmenu{ box-shadow:0 10px 30px rgba(0,0,0,.12); }