/* components.css — shared page chrome for the five app pages (horizon/luminate/pupil/loupe/
   refract), extracted 2026-07-17 from five byte-identical per-page copies (verified identical
   before the move; anything that had drifted — #topbar, .brand, .brand-mark, .brand-name,
   .brand-menu-item.active carry each page's own tint/layout — deliberately stayed per-page).
   Loads AFTER tokens.css (where a page uses it) and BEFORE the page's own <style>, so a page
   can still override any of this at equal specificity. login/users don't load it (own scheme).

   .hidden is the one GLOBAL utility: display:none !important, so "add the class, thing hides"
   is finally unconditional. Before this, every element needed its own #id.hidden rule and a
   missing one silently no-opped — that exact foot-gun had five live instances when audited
   (pupil's #certPanelAddRow/#goalAddRow add-rows never hid, both import steps rendered
   stacked, loupe's #importPdfBtn showed on already-imported templates). Every existing
   per-page #x.hidden{display:none} rule agrees with it; !important is what lets it also beat
   the .add-row{display:flex}-style base rules those five sites were losing to. If an element
   must be visible, remove the class — never out-specific it.

   2026-07-17 hardening, found live on a phone: the base reset, body background, #app shell,
   and the .hidden utility are CRITICAL and now live INLINE in every page (duplicated on
   purpose — a failed fetch of this file used to white-screen the app with the menu stuck
   open, and stylesheets have no retry machinery). This file keeps only the cosmetic launcher
   chrome; the <link> tags carry a small onerror cache-busting retry as well. Keep the pages'
   CRITICAL blocks byte-identical to the values that used to be here. */
.brand-caret{
  font-size:9px;
  color:var(--text-dim);
  vertical-align:1px;
}
.brand-sub{
  font-size:inherit; /* identical to the "Vision" brand text, per explicit request */
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-dim);
  margin-left:2px;
}
.brand-menu{
  position:absolute;
  top:100%; left:0;
  margin-top:10px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  overflow:hidden;
  z-index:50;
  min-width:150px;
}
.brand-menu-item{
  display:block;
  padding:10px 14px;
  font-family:var(--font-display);
  /* identical to .brand-name — the menu reads as sibling sub-brands, not a small utility list */
  font-size:17px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-muted);
  text-decoration:none;
  cursor:pointer;
}
.brand-menu-item:hover{background:var(--bg-panel-2);color:var(--text-primary);}
.brand-menu-item.brand-menu-logout{border-top:1px solid var(--border);}
.brand-menu-item.brand-menu-logout:hover{color:var(--danger);}