/* Performance OS header - ONE file (2026-10-08, Alex: "roll this banner out for all sites in the exact
   same format; Pinarello Q36.5 goes back to the Home page"). Every web app links a byte-identical
   copy right after tokens.css (pipeline/tests/test_theme_chrome.py checks copies and markup).
   Markup (docs/design-system.md "Header"):
     <header class="top os-head">
       <div class="header-row">
         <div class="brand">
           <a class="eyebrow os-home" href="https://performance-os.pinarelloq36-5.com/" title="Back to Home">Pinarello Q36.5 · Performance OS</a>
           <h1>Tool name</h1>   (visually hidden; read by screen readers)
         </div>
         <div class="header-links"> optional quiet links, then user chip + Sign out </div>
       </div>
       optional extra rows (e.g. a tool's area tabs) go here, below the bar
     </header>
   Selectors are header.top.os-head ... so they win over older per-app header rules. Values are
   literal (brand navy #272A49 / Podium Gold, 56 px bar), not tokens: the banner is identical on
   every site, light or dark, and on pages that don't load tokens.css yet. Inter is loaded by the page. */
header.top.os-head { background: #272A49; color: #FFFFFF; padding: 0 24px; border-bottom: 2px solid #D7A738;
  display: flex; flex-direction: column; justify-content: center; min-height: 56px; box-sizing: border-box; }
header.top.os-head .header-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%;
  min-height: 56px; flex-wrap: nowrap; }
header.top.os-head .brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
header.top.os-head .eyebrow { margin: 0; font-family: var(--font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; text-decoration: none; }
header.top.os-head a.os-home { border-radius: 4px; }
header.top.os-head a.os-home:hover { color: #FFFFFF; }   /* brighten only, no underline (Alex) */
header.top.os-head a.os-home:focus-visible { outline: none; box-shadow: 0 0 0 2px #D7A738; }
/* Tool name: kept in the markup (screen readers, page identity) but not shown - the banner is
   just "Pinarello Q36.5 · Performance OS" on every site (Alex 2026-10-08). */
header.top.os-head h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
header.top.os-head .header-links { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
header.top.os-head .header-links a { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
header.top.os-head .header-links a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
header.top.os-head .user-chip { font-size: 12px; color: rgba(255,255,255,.72); white-space: nowrap; }
header.top.os-head .btn-light { height: 26px; padding: 0 12px; border-radius: 6px; font-family: var(--font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 12px; font-weight: 600; background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,.32); cursor: pointer; }
header.top.os-head .btn-light:hover { background: rgba(255,255,255,.08); }
@media (max-width: 720px) {
  header.top.os-head { padding: 0 16px; }
  header.top.os-head .eyebrow.os-home { font-size: 0; }                      /* phone: keep the Home link, show it short */
  header.top.os-head .eyebrow.os-home::before { content: "Q36.5"; font-size: 11px; }
  header.top.os-head .user-chip { display: none; }
}