/* ===========================================================================
   Topbar float (Phase 3 Step 1, 2026-04-28)
   ---------------------------------------------------------------------------
   The legacy <header class="masthead"> stayed glued to the top edge of the
   page; the new design wants a floating bar that hovers above the globe
   with a few pixels of breathing room from every viewport edge, then
   drops a body downward when the user expands it. Position is `fixed`
   (not sticky) because the globe takes the entire viewport — there's
   no document scroll to anchor against.

   Light/dark themed via existing custom properties. The expand body in
   Step 1 is empty; Step 2 will move the filter rail / preset bar /
   region+group chips inside.
   =========================================================================== */
.topbar-float {
  position: fixed;
  top: var(--sp-3, 12px);
  left: var(--sp-4, 16px);
  right: var(--sp-4, 16px);
  z-index: var(--z-float);
  /* (Glass Terminal, 2026-07-11) tier-1 glass. The opaque fallback (== the old
     --bg-elev-1) ships first; the @supports block below layers translucency +
     backdrop blur. Perf: over the live globe the blur only recomputes during an
     actual drag (requestRenderMode is on) and it's a thin top-edge strip;
     prefers-reduced-transparency (gate at the end of 70-aux) forces the opaque
     fallback. Border swapped from --border to the subtler --glass-hairline;
     a 1px top inset highlight gives the "lit glass edge". */
  background: var(--glass-1-fallback);
  border: 1px solid var(--glass-hairline);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px var(--scrim-08), inset 0 1px 0 var(--glass-highlight);
  /* Bug fix (2026-06-12): `overflow: hidden` used to live here to keep
   * the expandable body from leaking out of the rounded corners — but
   * it ALSO clipped the user-menu dropdown (absolutely positioned
   * inside .topbar-float__actions, extending below the bar), cutting
   * the menu off after the first couple of items. The body has no
   * height transition (display flip via [hidden]), so the only thing
   * the overflow actually protected was the body's square bottom
   * corners — solved instead with a matching border-radius on
   * .topbar-float__body below. */
}
/* (Glass Terminal, 2026-07-11) tier-1 glass enhancement — translucent fill +
   backdrop blur where supported. Kept out of the base rule so unsupported
   browsers (and the reduced-transparency gate) keep the opaque fallback. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar-float {
    background: var(--glass-1-bg);
    -webkit-backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-sat));
  }
}

/* ==========================================================================
   Page split (2026-07-06): globe (index.html, body[data-page="globe"]) vs
   feed (feed.html, body[data-page="feed"]).
   - The .topbar-float is position:fixed and floats over the globe hero on the
     globe page (the hero is full-bleed underneath it). On the FEED page there
     is no hero, so nothing reserves the bar's height — the feed content would
     slide under it. Give the feed .page a top-padding that clears the fixed bar
     (top inset 12px + bar height ~56px + breathing room).
   - Page tabs [Globe|Feed] sit next to the brand in both topbars.
   - The slim globe topbar (.topbar-float--slim) drops search/stats/refresh and
     the expand chevron, so it must NOT use the mobile chevron-collapse — its
     few controls stay inline and wrap.
   ========================================================================== */

/* Feed page: reserve room for the fixed floating topbar (top inset 12px + bar
   height). The bar is a single ~56px row on desktop; on phones it reflows to
   ~2 rows (full-width search wraps below brand + tabs), so the mobile scope
   below reserves more. */
body[data-page="feed"] .page {
  padding-top: calc(var(--sp-3, 12px) + 72px);
}

/* Page tabs — plain links styled as quiet pill tabs beside the brand. */
.page-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-1, 4px);
  flex: 0 0 auto;
}
.page-tab {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.page-tab:hover {
  color: var(--ink);
  background: var(--bg-elev-2);
}
.page-tab.is-active {
  color: var(--ink);
  background: var(--bg);
  border-color: var(--border);
}
.page-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Slim globe topbar: no expand chevron, so drop the head's reserved right gap
   and let the actions sit hard right. */
.topbar-float--slim .topbar-float__head {
  padding-right: var(--sp-4);
}
.topbar-float--slim .topbar-float__actions {
  margin-left: auto;
}

.topbar-float__head {
  display: flex;
  align-items: center;
  /* (Glass Terminal, 2026-07-11) W#8 — one consistent 8px rhythm between every
     child (brand / tabs / search / actions), all vertically centred. */
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  /* Reserve room for the .topbar-float__expand chevron in the bottom-
   * right corner so its hit-target never overlaps the user-menu. */
  padding-right: calc(var(--sp-4) + 28px);
}
.topbar-float__brand {
  /* A1 (2026-07-07 / Glass Terminal 2026-07-11): the designed Playfair wordmark.
     Display serifs read best at bold with *positive* tracking — negative
     tracking smears the high-contrast strokes. Tracking nudged 0.005->0.01em
     for a touch more air (adds <1px total width across "Skimtide", so no reflow
     of the 8px-gapped neighbours). line-height:1 locks the tall serif box for
     precise vertical centring. No tagline / earbrow (operator decision). */
  font-family: var(--font-wordmark);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
  transition: opacity var(--dur-fast) var(--ease);
}
/* The wordmark is an <a href="/"> — a soft fade signals interactivity without a
   full underline; the global :focus-visible baseline supplies the keyboard ring. */
.topbar-float__brand:hover,
.topbar-float__brand:focus-visible { color: var(--ink); opacity: 0.82; }
.topbar-float__search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  position: relative;
}
.topbar-float__search input {
  width: 100%;
  padding: 6px 28px 6px 10px;
  /* (Glass Terminal, 2026-07-11) W#8 — the search reads as an inset "well"
     recessed into the glass bar: a hairline edge, --bg (darker than the topbar
     glass fill) and a 1px inner shadow for depth. */
  border: 1px solid var(--glass-hairline);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  box-shadow: inset 0 1px 2px var(--scrim-10);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.topbar-float__search input::placeholder { color: var(--ink-faint); }
/* Hide the browser's native search clear button — we render our own
   (#search-clear); the native one duplicated it (a white, non-functional ×). */
.topbar-float__search input[type="search"]::-webkit-search-cancel-button,
.topbar-float__search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.topbar-float__search input[type="search"] { -webkit-appearance: none; appearance: none; }
.topbar-float__search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  /* Well brightens its edge + drops the inner shadow on focus (raised toward
     the surface); the accent outline above is the primary focus signal. */
  border-color: var(--accent);
  box-shadow: none;
}
.topbar-float__search .search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 16px;
}
.topbar-float__search .search-clear:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.topbar-float__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}
/* (Glass Terminal, 2026-07-11) W#8 — the Ctrl-K hint adopts the new base <kbd>
   grammar (mono + tabular + glass hairline + --r-sm), sized down for inline use
   inside the palette trigger. Mono is the point: it reads as a keyboard key. */
.topbar-float__actions #palette-trigger kbd {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 2px 6px;
  margin-left: var(--sp-2);
  border: 1px solid var(--glass-hairline);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
  color: var(--ink-muted);
}
.topbar-float__expand {
  /* Tiny corner chevron. 24×24 hit target inside a 16×16 visible glyph. */
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 24px; height: 24px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 50%;
  /* Hidden on desktop: it toggles `.topbar-float__body`, which is an empty
   * Step-1 placeholder div here (abandoned migration) — opening it does
   * nothing. The `max-width: 720px` block below re-enables it, where the same
   * chevron is repurposed as the real mobile menu trigger. */
  display: none;
  place-items: center;
  transition: background var(--dur-fast) var(--ease, ease), transform var(--dur-slow) var(--ease, ease);
}
.topbar-float__expand:hover,
.topbar-float__expand:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}
.topbar-float__expand:focus-visible {
  box-shadow: var(--focus-ring);
}
.topbar-float[data-expanded="true"] .topbar-float__expand-glyph {
  display: inline-block;
  transform: rotate(180deg);
  transition: transform var(--dur-slow) var(--ease, ease);
}
.topbar-float__expand-glyph {
  display: inline-block;
  transition: transform var(--dur-slow) var(--ease, ease);
  font-size: 14px;
  line-height: 1;
}
.topbar-float__body {
  /* Step 1 placeholder — empty. Step 2 will populate with the moved
   * filter rail / preset bar / region+group chips. The display flip
   * (block <-> none via [hidden]) avoids any flash before JS hydrates. */
  border-top: 1px solid var(--border);
  padding: var(--sp-4);
  background: var(--bg-elev-1);
  /* Round the body's own bottom corners now that the shell no longer
   * clips its children (see .topbar-float overflow note). -1px nests
   * inside the shell's 1px border without a sliver of background. */
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
}
.topbar-float[data-expanded="true"] .topbar-float__body {
  /* When the toggle flips data-expanded, JS removes the [hidden]
   * attribute. Body content for now is just an empty div, but the
   * border-top + padding render so the user can confirm the toggle. */
}

/* (Glass Terminal, Wave 2) Coarse-pointer ergonomics for the floating topbar.
   Page tabs get a >=40px tap height (inline-flex so min-height takes effect on
   the <a>); the topbar search field is bumped to 16px to defeat iOS focus-zoom.
   Gated to pointer:coarse — the desktop mouse UI keeps its compact sizing. The
   mobile <=720px reflow itself lives in 60-widgets.css (topbar__head flex-wrap). */
@media (pointer: coarse) {
  .page-tab { min-height: 40px; display: inline-flex; align-items: center; }
  .topbar-float__search input { font-size: 16px; }
}