/* =============================================================================
   topbar.css — SHARED STRUCTURE for #topbar, used by every page
   =============================================================================
   Extracted 2026-08-19 from two copies (portal/css/style.css, css/style.css)
   that had already drifted apart after a few rounds of hand-tuning — this
   file exists so "make the topbar 2px taller" is one edit, not two edits that
   have to be remembered and kept in sync by hand.

   WHAT LIVES HERE vs WHAT STAYS IN EACH PAGE'S OWN style.css
   ----------------------------------------------------------------------------
   This file owns geometry and behaviour: position/size/spacing, flex layout,
   hover/pointer-events mechanics, the responsive breakpoint. It owns NO
   colour and NO font — those come from each page's own style.css, in a
   SECOND #topbar-* rule block that only sets background/border/color/font,
   nothing this file already sets. The split works with zero indirection
   (no --tb-* variable layer to learn) because the two rule blocks never touch
   the same property name for the same selector — CSS just merges them,
   in whatever order the two files load.

   WHY colour can't move here too: the portal's topbar re-colours itself live
   when Dark Basemap is toggled (reads --panel-bg-rgb etc., which
   ui/controls.js's applyBasemapTheme() changes at runtime) and optionally
   again through the theme-technical.css appearance layer. The homepage has
   no such mechanism — its topbar is one fixed dark plate, always. Forcing
   both through one set of colour variables would mean inventing a runtime
   theme switch for the homepage that nothing else on that page needs.

   HOW TO USE ON A NEW PAGE
   ----------------------------------------------------------------------------
   1. Link this file (path depends on the new page's depth: pages under
      Website/ use "css/topbar.css", pages one level down like /portal/ use
      "../css/topbar.css").
   2. Copy the #topbar markup from portal/index.html or index.html — same
      ids/classes (#topbar, #topbar-brand, .tb-tld, #topbar-nav, .tb-item,
      .tb-soon, .tb-current if the new page needs it, .beta-badge).
   3. In the new page's own style.css, add a #topbar rule that sets ONLY:
      background, border (if any), border-radius, box-shadow, backdrop-filter
      (if any), color, font, position, z-index — plus color on #topbar-brand,
      .tb-item, .tb-item + .tb-item::before (the divider), and .beta-badge's
      border/color. Nothing else — if you find yourself repeating a property
      this file already sets, that is a sign that property belongs here
      instead of in every page.
============================================================================= */

/* --topbar-edge-gap / --topbar-height are real custom properties, not just
   literals baked into the rule below, because the portal's own style.css
   needs to read them too: its #controls panel sits right under this band,
   and its --topbar-block calc (edge-gap + height + a portal-only gap-below)
   is what tells #controls where "below the band" actually is. Declared here
   on :root so BOTH files can see them regardless of load order — CSS custom
   properties don't care which file declared them, only where in the cascade
   they land. If you change either number, #controls moves with it
   automatically; you do not have to touch portal/css/style.css at all. */
:root {
  --topbar-edge-gap: 10px;
  --topbar-height: 38px;
}

#topbar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 12px;

  top: var(--topbar-edge-gap);
  left: var(--topbar-edge-gap);
  right: var(--topbar-edge-gap);
  height: var(--topbar-height);

  /* The band spans the window but is mostly empty. Without this, that empty
     strip would swallow map drags / page clicks meant for whatever sits
     under it. The two interactive children opt back in below. */
  pointer-events: none;
}

#topbar-brand,
#topbar-nav {
  pointer-events: auto;
}

#topbar-brand {
  position: relative; /* anchor for .beta-badge's absolute positioning */
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}

/* The TLD is dimmed rather than a different size: same type, less weight in
   the eye, so the band stays one line of text instead of a logo lockup. */
#topbar-brand .tb-tld {
  opacity: 0.55;
}

/* Mark logo, left of the wordmark. #topbar-brand is left as normal inline
   flow (not flex) on purpose: flexing it would put equal `gap` between EVERY
   child, including between "AlgorithmicCooling" and its .tb-tld span, which
   must stay flush as one word. vertical-align does the centring instead,
   scoped to just this one element. width/height HTML attributes (96, the
   SVG's own viewBox) are there so the browser reserves the right box before
   the file loads — without them a slow load shifts the wordmark sideways
   once the image finally has a size. */
.tb-logo {
  height: 16px;
  width: 16px;
  margin-right: 6px;
  vertical-align: middle;
}

#topbar-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  overflow: hidden;
}

.tb-item {
  position: relative; /* containing block for the divider below */
  padding: 3px 9px;
  white-space: nowrap;
  text-decoration: none;
}

/* Divider between adjacent items. `+` means "a .tb-item that follows another
   .tb-item", i.e. every one except the first — 4 items, 3 lines, no stray
   line before the first one.

   A pseudo-element rather than border-left, because a border gets both
   position AND length wrong, and neither is fixable without breaking the
   other:
     POSITION  a border sits on the item's own left edge, which is 9px from
               THIS item's text but 24px from the previous one's (that item's
               9px padding + the nav's 15px gap). Off-centre, so every item
               reads as shoved left inside its own cell.
     LENGTH    a border is always exactly as tall as the element's box. The
               only lever is padding — which also moves the text.
   left: -7.5px lands the line in the middle of the 15px gap; top/bottom then
   set its length independently of the text's own padding.

   👉 TO TUNE THE LINE'S HEIGHT, change top/bottom and nothing else. Bigger =
      shorter line. Equal values keep it vertically centred.
   👉 TO TUNE THE GAP WIDTH, change #topbar-nav's gap above AND this left
      value together — left must always be -(gap / 2) or the line drifts off
      centre. (15px gap → -7.5px; the two numbers are linked, not independent.) */
.tb-item + .tb-item::before {
  content: '';
  position: absolute;
  left: -7.5px;
  top: 2px;
  bottom: 2px;
  width: 1px;
}

/* Placeholders. cursor:default (not not-allowed) because nothing is being
   refused — the item simply is not a destination yet. 0.5 is enough to read
   as inactive while still being legible in a screenshot. */
.tb-soon {
  opacity: 0.5;
  cursor: default;
  user-select: none;
}

.tb-current {
  font-weight: bold;
}

#topbar-brand:hover,
.tb-item:not(.tb-soon):hover {
  color: #fff; /* same literal on every page so far — promote to a page override if that ever needs to differ */
}

/* Below ~720px the four items cannot fit next to the brand. They are hidden
   rather than wrapped: a wrapping nav would double the band's height, and on
   the portal that pushes #controls' fixed --topbar-block out of agreement
   with reality. The brand — the one item that actually navigates home —
   always survives. */
@media (max-width: 720px) {
  #topbar-nav {
    display: none;
  }
}

/* ---- "beta" badge — pinned to the brand's own top-right corner ----
   Anchored to #topbar-brand (position:absolute against that element's
   position:relative) rather than the viewport: a viewport-fixed corner badge
   collides with whatever nav item ends up nearest that corner once the nav
   is right-aligned. The brand's own corner is never occupied by anything
   else, independent of nav content or viewport width.

   right: -33px clears the brand's own text (".io") at the badge's current
   size. 👉 If you change padding/font-size/border below, re-measure this —
   open DevTools, compare #topbar-brand's and .beta-badge's
   getBoundingClientRect(), and set right so their edges land a few px apart.
   pointer-events: none so it can never sit in front of anything clickable.

   🔴 Selector is `#topbar-brand .beta-badge`, not bare `.beta-badge`, and
   that specificity (1,1,0) is load-bearing, not decoration. The portal's own
   page-specific rule sets `font: var(--panel-font)` — a SHORTHAND that also
   assigns font-size/line-height as a side effect — and that rule is only
   (0,1,0). If this selector were the same bare `.beta-badge`, whichever file
   happened to load second would silently win the font-size/line-height fight
   regardless of which one you actually meant to change; every page would
   then have to load topbar.css after its own style.css and stay that way
   forever, which is exactly the kind of ordering trap this file exists to
   avoid. The extra specificity makes the outcome correct independent of
   `<link>` order in any page that ever uses this file. */
#topbar-brand .beta-badge {
  position: absolute;
  top: -4px;
  right: -33px;
  padding: 0.5px 4px;
  border-radius: 2px;
  font-size: 7px;
  line-height: 1.4; /* overrides whatever line-height ratio this page's body/panel font carries — at 7px that ratio would make the box taller than the padding numbers suggest */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}