/* Shared header identity — court-connectors.html, templates/auth_profile.html,
   templates/crystal_login.html all link to this file instead of keeping their
   own copy. Change a header font/color here, it applies everywhere.

   --skin-main falls back to --navy-light, not --navy: the "Default" theme's
   own main color IS --navy-light (#2A4D80, confirmed against theme_config.json)
   — using --navy here would actually change the out-of-the-box header color,
   not just centralize it. Pages that dynamically load theme_config.json
   (currently just court-connectors.html) get a theme-reactive header for free;
   pages that don't yet still match the real default look instead of drifting
   into their own hardcoded color, same failure mode this file exists to fix. */

header.topbar{
  background:var(--skin-main, var(--navy-light));
  color:var(--paper);
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:12px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  overflow:visible;
}
@media (max-width:400px){
  header.topbar{padding:18px 12px;gap:6px;}
}

.brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  flex-shrink:0;
  overflow:visible;
  text-decoration:none;
}

.brand-name{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:28px;
  color:var(--paper);
  line-height:1.3;
  white-space:nowrap;
  padding-right:6px;
}

/* Quicksand (rounder, closer in spirit to the cursive wordmark than
   Inter reads) — a status marker next to the logo, not part of the
   wordmark itself. */
.brand-beta-tag{
  font-family:'Quicksand',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.8);
  white-space:nowrap;
  margin-left:2px;
}