/* Header bar — 2 zones: left = brand + breadcrumbs (grows), right = the base-mode
   pill (the primary control). Dark-green family (--hdr-bg from TOKENS.ui).
   (The breadcrumb-search pills live in breadcrumbs.css.) */

.hdr {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 0 14px; background: var(--hdr-bg);
  border-bottom: 1px solid var(--line);
}
/* Right = fixed to its content; left = everything else (the search slot stretches). */
.hdr-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hdr-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }

/* Brand — globe mark (gradient strokes off the crumb depth ramp) + wordmark + version chip. */
.hdr-brand { flex: none; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.hdr-globe { width: 30px; height: 30px; flex: none; transition: transform .25s ease; }
.hdr-brand:hover .hdr-globe { transform: rotate(14deg); }
.hdr-wordmark { font-size: 19px; font-weight: 800; letter-spacing: .04em; color: var(--ink); }
.hdr-ver { font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); }

/* Base modes — ONE flat row of pills (the outer family boxes are gone; each label's 2D/3D
   suffix now carries the grouping). A ⇄ view-sync button sits between each adjacent pair;
   boot.js points its arrow at the swap target. position:relative anchors the pill-menu. */
.hdr-base-mode { position: relative; display: flex; align-items: stretch; gap: 8px; flex: none;
  margin-right: 16px; }
/* Every pill READS as a pill at rest: a faint hue tint + ring (a quiet echo of the active
   state, which escalates to stronger fill + brighter ring + glow below). Base specificity is
   lowest so :hover and :has(input:checked) override it cleanly. */
/* Each pill is as wide as its own content. Equal shares (`flex: 1 1 0`) out of a fixed row
   width don't work here: the labels differ in length, so the longest one ("Navigation 2D")
   overflowed its share — nowrap text ran under the ▾ caret that the 34px right padding
   reserves. Content-width pills can never clip, whatever the label says. */
.mode-seg { --mode-hue: var(--accent);
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
  padding: 12px 34px 12px 18px; border-radius: 999px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink-dim); white-space: nowrap;
  background: color-mix(in srgb, var(--mode-hue) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-hue) 24%, transparent);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.mode-nav   { --mode-hue: var(--crumb-c0); }
.mode-atlas { --mode-hue: var(--crumb-c2); }
.mode-sat   { --mode-hue: var(--crumb-c4); }
.mode-photo3d { --mode-hue: #4285f4; border: 0; font-family: inherit; }
/* Weather pill HIDDEN (James 2026-07-11) — the radio stays in the DOM for the map-type
   contract, but display:inline-flex above out-cascades [hidden], so force it off here. */
.mode-seg[hidden] { display: none; }
.mode-weather { --mode-hue: #aeb4b8; }
.mode-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mode-ico { flex: none; font-size: 24px; line-height: 1; filter: saturate(.55) opacity(.85);
  transition: filter .15s ease; }
/* Icon anchored left, label follows; the pill sizes to the pair. */
.mode-label { flex: none; }
.mode-seg:hover { color: var(--ink);
  background: color-mix(in srgb, var(--mode-hue) 13%, transparent); }
.mode-seg:hover .mode-ico { filter: none; }
.mode-seg:has(input:checked) { color: var(--ink);
  background: color-mix(in srgb, var(--mode-hue) 26%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mode-hue) 70%, transparent),
              0 0 10px color-mix(in srgb, var(--mode-hue) 30%, transparent); }
.mode-seg:has(input:checked) .mode-ico { filter: none; }
.mode-seg.is-active { color: var(--ink);
  background: color-mix(in srgb, var(--mode-hue) 26%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mode-hue) 70%, transparent),
              0 0 10px color-mix(in srgb, var(--mode-hue) 30%, transparent); }
.mode-seg.is-active .mode-ico { filter: none; }
.mode-seg:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-photo3d:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-view-sync { align-self: center; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--crumb-c3) 55%, var(--line));
  background: color-mix(in srgb, var(--crumb-c3) 14%, var(--panel));
  color: var(--ink); font: 700 24px/1 var(--font); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease; }
.mode-view-sync:hover:not(:disabled) { background: color-mix(in srgb, var(--crumb-c3) 28%, var(--panel));
  border-color: color-mix(in srgb, var(--crumb-c3) 85%, var(--line)); }
.mode-view-sync:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-view-sync:disabled { opacity: .28; cursor: default; }

/* Centre-highlight chip — compact toggle sitting immediately after the search box.
   accent ring escalates when checked; default OFF is set by index.html (no `checked`). */
.hdr-hl { flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink-dim);
  background: color-mix(in srgb, var(--panel) 55%, black);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line));
  transition: color .15s ease, border-color .15s ease; }
.hdr-hl:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.hdr-hl:has(input:checked) { color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.hdr-hl .hdr-hl-ico { font-size: 15px; line-height: 1; }
.hdr-hl input { margin: 0; width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }