/* public/island.css — THE floating island nav. ONE definition, TWO hosts.
 *
 *   public/homepage.html   <link rel="stylesheet" href="/island.css">
 *   index.html (React app) <link rel="stylesheet" href="/island.css">
 *
 * It lives in public/ rather than shared/ because the marketing page is plain
 * static HTML with no build step, so a JS-module import can't reach it. A
 * served stylesheet is the one thing both can consume, which is what keeps
 * them from drifting — the app previously carried a hand-built lookalike that
 * was measurably different (shorter, tighter gap, wrong border, no blur).
 *
 * Geometry and motion are fixed here. Colour comes from four variables each
 * host maps onto its own palette:
 *
 *   --island-bg       the pill fill (translucent; the blur does the rest)
 *   --island-ring     hairline border, and the toggle's border
 *   --island-shadow   full box-shadow value
 *   --island-fg       primary text/icon colour (toggle hover)
 *   --island-fg-dim   resting icon colour
 */

.bi-island-rail {
  position: fixed;
  top: var(--island-top, clamp(14px, 1.6vw, 24px));
  left: 0;
  right: 0;
  z-index: var(--island-z, 100);
  display: flex;
  justify-content: center;
  /* the rail spans the viewport so the island centres on the SCREEN, not on a
     parent that may be inset (the app's docked agent panel insets #root).
     pointer-events:none keeps the page clickable either side of the pill. */
  pointer-events: none;
}

.bi-island {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding: 10px 12px 10px 26px;
  /* fixed height so the pill is the same object in both hosts — the marketing
     page's tallest child is a 45px CTA, the app's is a 36px toggle, and without
     this the two islands differ by 7px purely from their contents */
  box-sizing: border-box;
  min-height: 65px;
  max-width: calc(100vw - 24px);
  background: var(--island-bg);
  /* !important is required, and only in the app: shared/design.js ships a
     global `*, *::before, *::after { backdrop-filter: none !important }`
     kill-switch (2026-06-26) added after blur on many scrolling glass cards
     made GPU-constrained Chrome drop the content layer mid-scroll — the
     "black curtain". Two !important declarations are settled by specificity,
     so a class beats `*`.
     Scoped deliberately to this ONE element. It is a single fixed pill, not
     dozens of scrolling cards, and unlike those cards it sits over the MAP
     rather than a uniform background, so the blur is doing real work here.
     If the curtain ever reappears, this rule is the first thing to remove. */
  backdrop-filter: blur(22px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  border: 1px solid var(--island-ring);
  border-radius: 999px;
  box-shadow: var(--island-shadow);
  transition: transform .6s cubic-bezier(.32, .72, 0, 1);
}

/* scrolled state — the island tucks up a hair once you leave the top */
.bi-island-tuck .bi-island { transform: translateY(-3px) scale(.985); }

.bi-island-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--island-ring);
  background: transparent;
  color: var(--island-fg-dim);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: color .16s, border-color .16s, background .16s, transform .12s ease-out;
}
/* keeps the 36px look but gives it a >=44px touch target */
.bi-island-toggle::after { content: ""; position: absolute; inset: -6px; }
.bi-island-toggle:hover  { color: var(--island-fg); }
.bi-island-toggle:active { transform: scale(.92); }
.bi-island-toggle svg    { width: 16px; height: 16px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .bi-island, .bi-island-toggle { transition: none; }
  .bi-island-tuck .bi-island { transform: none; }
}

/* The blur above is forced with !important, which outranks design.js's
   reduced-transparency rule (that one targets [style*="backdrop-filter"], i.e.
   inline styles — it can't see a class). So honour the preference here. */
@media (prefers-reduced-transparency: reduce) {
  .bi-island {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}