/* The header. One bar, fixed, on every surface.
 *
 * It used to be two floating islands - a brand mark at top left and a tab
 * group floating near the middle - with the CSS for both copied inline into
 * eleven files. That is why it drifted: the yardage app grew its own variant,
 * the back office grew a third, and nothing could be changed in one place.
 *
 * This file is the only definition. Every page links it and carries the same
 * markup:
 *
 *   <header class="chrome">
 *     <a class="brand-mark" href="index.html">…logo… <span class="brand-label">The Clubhouse</span></a>
 *     <nav class="tabs" aria-label="Sections">
 *       <button class="tab is-map" data-map aria-expanded="false">Games</button>
 *       <a class="tab" href="yardage/">Layouts</a>
 *       <a class="tab" href="book.html">Book</a>
 *     </nav>
 *   </header>
 *
 * The class names are load-bearing elsewhere and must not be renamed:
 * flyover.js binds the map to [data-map], analytics.js counts clicks on .tab,
 * and motion.css gives a.brand-mark, nav.tabs and .tab.on their
 * view-transition names so the bar persists across a navigation.
 *
 * Height is --chrome-h in tokens.css. Anything else fixed to the top of a page
 * offsets from it rather than guessing.
 */

.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9;
  height: var(--chrome-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  background: var(--panel-strong);
  border-bottom: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------- the brand mark */

.chrome .brand-mark {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
  margin-right: auto;                       /* the tabs sit at the other end */
}
.chrome .brand-mark img {
  display: block; width: 30px; height: 30px; object-fit: contain;
}
.chrome .brand-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-dim);
  white-space: nowrap; transition: color .15s ease;
}
.chrome .brand-mark:hover .brand-label { color: var(--text); }
.chrome .brand-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- the tabs */

.chrome .tabs { display: flex; }
.chrome .tab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none;
  color: var(--text-dim);
  border: 1px solid var(--hair);
  padding: 8px 14px;
  background: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
/* A <button> in the bar must not carry `font: inherit` - the shorthand beats
   .tab's own font-family on specificity and renders one tab in body serif at
   16px beside two mono ones. It did, on all ten pages, for weeks. */
.chrome button.tab {
  font-weight: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.chrome .tab + .tab { border-left: none; }
.chrome .tab:hover { color: var(--text); border-color: var(--text-dim); }
.chrome .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Where you are. The map button is a control, not a place, so it takes a
   pressed state rather than .on - and never aria-current. */
.chrome .tab.on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.chrome .tab.is-map[aria-expanded="true"] {
  color: var(--accent); border-color: var(--accent);
}

/* --------------------------------------------------------------- the pages
   A page clears the bar with its own top padding, adding var(--chrome-h) to
   whatever breathing room it already wanted. There is deliberately no
   `body.has-chrome { padding-top: … }` helper here: at (0,1,1) it outranks a
   page's own `body { padding: … }` whatever the source order, so it would
   silently replace that page's spacing rather than add to it.

   The games need nothing - their canvas is fixed to the viewport and the bar
   simply sits over it. */

@media (max-width: 820px) {
  .chrome { gap: 10px; padding: 0 clamp(12px, 4vw, 20px); }
  .chrome .brand-label { display: none; }
  .chrome .brand-mark img { width: 26px; height: 26px; }
  .chrome .tab { padding: 8px 10px; font-size: 10px; letter-spacing: .14em; }
}
@media (max-width: 380px) {
  .chrome .tab { padding: 8px 8px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .chrome .tab, .chrome .brand-label { transition: none; }
}