/* The site header -- one component for every page (2026-09-24; before, the
   map pages had `.topbar` in app.css and the text pages `.lnav` in
   landing.css, two copies drifting apart). Behaviour: web/js/nav.js.

   Markup (every page):
     header.site-header[.site-header--app]
       .sh-in
         .sh-lead      a.sh-brand (+ page extras, e.g. #modelName)
         nav.sh-links  the six links; [aria-current="page"] on this page's
         .sh-actions   page controls (map pages: model/run selects),
                       #premiumBadge, .sh-account (#authBtn button on map
                       pages, #navAccount link elsewhere), the ⚙ (.sh-pop
                       #settingsBtn + .sh-menu #settingsMenu) and the ☰
                       (.sh-pop.sh-burger #navBurger + .sh-menu #navDrop)
   `--app` (the map pages) spans the whole window -- its selects need the
   room; the default is centred to the content width.

   Colours come only from tokens.css, so a theme is a new token set, never
   an edit here. Compact (phones, <= 820px): short wordmark, the links move
   into ☰. Desktop: the same switch happens when the links don't fit
   (nav.js sets .nav-tight). */

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
  position: relative;
  /* The header is its menus' stacking context, so it carries their level:
     above a Leaflet map's panes (700) and controls (1000) on /meteograms/
     and /skewt/, below /skewt/'s fullscreen lightbox (2000). */
  z-index: 1100;
}
.sh-in {
  display: flex; align-items: center; gap: 16px;
  height: 56px;
  max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 34px);
}
.site-header--app .sh-in { max-width: none; padding: 0 20px; }

/* ---- wordmark (+ page extras) ---- */
.sh-lead { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex: none; }
.sh-brand {
  font-family: var(--mono); font-size: 22px; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sh-brand b { color: var(--accent); font-weight: 500; }
.sh-brand:hover b { color: var(--accent-hi); }
.brand-short { display: none; }

/* ---- links ---- */
.sh-links {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex: 1; min-width: 0; overflow: hidden;
}
.site-header:not(.site-header--app) .sh-links { justify-content: flex-end; }
.sh-links a {
  font-size: 15.5px; text-decoration: none; color: var(--muted);
  white-space: nowrap; flex: none;
}
.sh-links a:hover { color: var(--ink); }
.sh-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- actions ---- */
.sh-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.sh-account {
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  text-decoration: none; padding: 7px 16px; border-radius: 4px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.sh-account:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.sh-account.signed { background: none; border-color: var(--line); color: var(--muted); font-weight: 400; }
.sh-account.signed:hover { border-color: var(--stale); color: var(--stale); }
.premium-badge {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 1px;
  padding: 4px 9px; border-radius: 3px; white-space: nowrap;
  color: var(--badge-ink); background: var(--badge-bg); border: 1px solid var(--badge-line);
}
.premium-badge.manage { cursor: pointer; }
.premium-badge.manage:hover { background: var(--badge-hover); }
.sh-icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.sh-icon:hover { border-color: var(--accent); color: var(--accent); }

/* ---- the two menus (⚙ and ☰): same panel ---- */
.sh-pop { position: relative; }
.sh-burger { display: none; }
.sh-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1;
  display: flex; flex-direction: column;
  min-width: 200px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 8px 24px var(--shadow-2);
}
.sh-menu[hidden] { display: none; }
.sh-menu a, .sh-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; font: inherit; font-size: 14px; text-align: left; text-decoration: none;
  color: var(--ink); background: none; border: none; border-radius: 3px; cursor: pointer;
}
.sh-menu a:hover, .sh-menu button:hover { background: var(--panel-hover); }
.sh-menu a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.sh-menu .sec {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px;
}
.sh-menu button[aria-checked="true"] { color: var(--active-ink); background: var(--panel-active); }
.sh-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; }

/* ---- desktop, but the links don't fit (nav.js): the burger ---- */
.site-header.nav-tight .sh-links { visibility: hidden; }
.site-header.nav-tight .sh-burger { display: block; }

/* ---- compact: phones ---- */
@media (max-width: 820px) {
  .sh-in {
    height: calc(46px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
    padding-left: 16px; padding-right: 16px; gap: 8px;
  }
  .site-header--app .sh-in { padding-left: 8px; padding-right: 8px; }
  .sh-brand { font-size: 17px; }
  .brand-long { display: none; }
  .brand-short { display: inline; }
  .sh-links { display: none; }
  .sh-burger { display: block; }
  .sh-lead { flex: 1; }
  .sh-actions { gap: 8px; }
  .sh-account { font-size: 13px; padding: 5px 11px; }
  .sh-icon { width: 30px; height: 30px; font-size: 15px; }
  /* "P" on phones: the header is tight (operator, 2026-09-23). The word
     stays in the markup, so screen readers still say "PREMIUM". */
  .premium-badge { font-size: 0; letter-spacing: 0; padding: 3px 6px; }
  .premium-badge::before { content: "P"; font-size: 10px; }
  /* the map pages also carry the model and run selects */
  .site-header--app .sh-actions { gap: 6px; }
  .site-header--app .sh-account { font-size: 12.5px; padding: 4px 9px; }
  .site-header--app .sh-icon { width: 26px; height: 26px; font-size: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header, .sh-account, .sh-icon { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
}