/* ============================================================================
   ChatScale — floating nav (.navm)
   ----------------------------------------------------------------------------
   Its own file because two pages use it and neither can host it: index.html
   is self-contained and deliberately does NOT load styles.css, and styles.css
   is loaded by pages that have no .navm markup at all. Two divergent copies
   of a nav is the failure this repo already carries a CLAUDE.md warning about,
   so it lives here and both pages link it.

   One page-level difference, handled by the script rather than by CSS: index
   has a dark full-height hero with a sentinel at its end, so the bar starts
   bare and solidifies past it. A page with no sentinel stays solid from the
   top, which is right for a light page.
   ========================================================================== */

/* The bar used to be rgba(9,4,26,.55) over a 16px backdrop-blur. That reads
   fine over the hero and turns to grey-purple sludge the moment a light
   section slides under it — the same muddy-midtone failure the footer had.
   There is no translucency here now: the bar is either nothing at all or a
   solid surface with a crisp edge.

   It carries nothing over the hero, which is dark and needs no plate behind
   white text, then solidifies once a light section reaches it. Every colour
   is a token so the three surface treatments differ only in what they set.
   Brand colour is the mark's real sweep, sampled off logo.png:
   mint #22ffcd -> cyan #29deff -> indigo #5340fb. (The note in styles.css
   calls it mint-to-pink; that is wrong about the hue.) */
.navm {
  position: fixed; inset: 12px 0 auto; z-index: 50;
  display: flex; justify-content: center;
  padding-inline: 16px; pointer-events: none;

  /* over the hero */
  --nav-bg: transparent;
  --nav-ring: transparent;
  --nav-shadow: none;
  --nav-fg: rgba(240, 238, 250, .82);
  --nav-fg-on: #fff;
  --nav-hover: rgba(255, 255, 255, .10);
  /* the open menu needs its own marker — sharing --nav-hover left the
     active trigger indistinguishable from a passing hover */
  --nav-active-bg: rgba(255, 255, 255, .16);
  --nav-active-fg: #fff;
  /* paper face over the dark hero, lit from behind; see "the action" below */
  --nav-cta-bg: #f8fafc;
  --nav-cta-bg-on: #ffffff;
  --nav-cta-fg: #0f172a;
  --nav-cta-inner: none;
  --nav-cta-ring: #fff;
  --nav-cta-glow: .34;
  --nav-cta-glow-on: .62;

  /* how far the panel hangs below the bar; the bridge spans exactly this */
  --nav-drop: 10px;

  /* How wide the bar is closed. Open it is the window, so there is no second
     value here — see the open sheet below. */
  --nav-w: 940px;

  /* The gutter the open sheet's contents keep off the window's edges. The bar
     and the cards under it both use it, so the logo, the first card and the
     CTA all stand on the same two lines. */
  --nav-pad: clamp(20px, 4vw, 56px);

  transition: top .34s cubic-bezier(.22,1,.36,1),
              padding .34s cubic-bezier(.22,1,.36,1);
}

/* ── the open sheet ──────────────────────────────────────────────────────
   Closed this is a pill floating 12px off the top with 16px either side.
   Open it is not a pill with something hanging under it: it goes to the top
   edge, loses its gutters and its corners, and the panel lands flush against
   its underside with no drop and no top border of its own. Bar and panel are
   then one sheet — white above the seam, the page's paper below it — and the
   only rounding left is at the two bottom corners, where the sheet ends.

   The bar's shadow goes with it. A pill casts one because it is floating; a
   sheet pinned to the top of the window is not, and the shadow it would cast
   between itself and the panel is a line across the middle of one surface.
   The panel keeps its own, which is now the whole assembly's. */
.navm[data-open="1"] {
  top: 0;
  padding-inline: 0;
  --nav-drop: 0px;
}
.navm[data-open="1"] .navm__bar {
  max-width: 100%;
  border-radius: 0;
  border-width: 0 0 1px;
  padding: 12px var(--nav-pad);
  box-shadow: none;
}
.navm__bar {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: var(--nav-w);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-ring);
  box-shadow: var(--nav-shadow);
  transition: background-color .26s var(--nav-ease, cubic-bezier(.22,1,.36,1)),
              border-color .26s, box-shadow .26s,
              max-width .34s cubic-bezier(.22,1,.36,1),
              border-radius .34s cubic-bezier(.22,1,.36,1),
              padding .34s cubic-bezier(.22,1,.36,1);
}

/* Paper, and it is paper because the bar is fixed and crosses both halves of
   the page. Solid state travels ~4900px: roughly 1560 of that is over the
   dark walkthrough and map blocks, the rest over the light run. An ink bar
   was the first default and it disappeared against those dark sections —
   a near-black pill on a near-black ground, legible only by its ring. Paper
   never fails on either ground; it is merely quieter over the light run,
   which the ring and shadow below answer. Ink is still available as
   data-navv="ink" on <html>. */
.navm[data-solid="1"], .navm[data-open="1"], .navm[data-sheet="1"] {
  --nav-bg: #ffffff;
  --nav-ring: #ddd8ea;
  --nav-shadow: inset 0 1px 0 #fff, 0 12px 34px -14px rgba(11,4,33,.38);
  --nav-fg: #565273;
  --nav-fg-on: #0b0421;
  --nav-hover: #f2eefb;
  --nav-active-bg: #0b0421;
  --nav-active-fg: #fff;
  /* Slate on paper, and the halo goes out — a blur of brand hue on white is
     a wash, not light.

     The face is slate rather than the page's violet-black ink, and that is
     the one place this button deliberately leaves the page palette. Every
     candidate that lightened #0b0421 for its hover landed in a washed
     grey-purple, because lifting a violet-black toward white runs it
     through exactly the desaturated midtone this palette keeps failing on;
     the escape hatch tried first was a full-strength indigo hover, which
     just replaced a muddy control with a loud one. Slate has no hue to go
     muddy. #0f172a to #1e293b is a real step on a neutral ramp, so the
     hover is legible without either washing out or shouting.

     The detail work is all on the top edge: a 1px inset highlight that
     strengthens on hover, which is how a physical key catches light, and
     it is doing the job a drop shadow would — an outer dark shadow onto a
     light ground is what produced the grey smudge the .ft comments in
     index.html are about, so there is none here. Label is slate-50 rather
     than pure white; at 14px on a near-black face #fff glares. */
  --nav-cta-bg: #0f172a;
  --nav-cta-bg-on: #1e293b;
  --nav-cta-fg: #f8fafc;
  --nav-cta-inner: inset 0 1px 0 rgba(255,255,255,.10);
  --nav-cta-inner-on: inset 0 1px 0 rgba(255,255,255,.17);
  --nav-cta-ring: #0f172a;
  --nav-cta-glow: 0;
  --nav-cta-glow-on: 0;
}

/* --- alternate: ink --- */
html[data-navv="ink"] .navm[data-solid="1"],
html[data-navv="ink"] .navm[data-open="1"],
html[data-navv="ink"] .navm[data-sheet="1"] {
  --nav-bg: #0b0421;
  --nav-ring: rgba(255, 255, 255, .11);
  --nav-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px -12px rgba(2,0,12,.55);
  --nav-fg: rgba(240, 238, 250, .82);
  --nav-fg-on: #fff;
  --nav-hover: rgba(255, 255, 255, .10);
  /* an ink pill on an ink bar is a hole; these two keep the hero treatment */
  --nav-cta-bg: #f8fafc;
  --nav-cta-bg-on: #ffffff;
  --nav-cta-fg: #0f172a;
  --nav-cta-inner: none;
  --nav-cta-ring: #fff;
  --nav-cta-glow: .34;
  --nav-cta-glow-on: .62;
}

/* --- alternate: brand indigo --- */
html[data-navv="indigo"] .navm[data-solid="1"],
html[data-navv="indigo"] .navm[data-open="1"],
html[data-navv="indigo"] .navm[data-sheet="1"] {
  --nav-bg: #5340fb;
  --nav-ring: rgba(255, 255, 255, .22);
  --nav-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px -12px rgba(40,24,160,.55);
  --nav-fg: #e4e0f7;
  --nav-fg-on: #fff;
  --nav-hover: rgba(255, 255, 255, .16);
  --nav-cta-bg: #ffffff;
  --nav-cta-bg-on: #f8fafc;
  --nav-cta-fg: #0f172a;
  --nav-cta-inner: none;
  --nav-cta-ring: #fff;
  --nav-cta-glow: 0;
  --nav-cta-glow-on: 0;
}

.navm__logo {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--nav-fg-on); text-decoration: none;
  font-weight: 800; font-size: 15px; letter-spacing: -.025em;
  white-space: nowrap;
}
.navm__logo img { width: 30px; height: 30px; display: block; }

.navm__items { display: none; align-items: center; gap: 4px; margin-inline: auto; }
@media (min-width: 900px) { .navm__items { display: flex; } }

.navm__item > button,
.navm__item > a {
  font: inherit; font-size: 15px; font-weight: 500;
  color: var(--nav-fg);
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 14px; border-radius: 999px;
  text-decoration: none; display: inline-block;
  transition: color .18s, background-color .18s;
}
/* the two triggers carry a chevron; the plain links do not */
.navm__item > button { display: inline-flex; align-items: center; gap: 6px; }
.navm__chev {
  width: 13px; height: 13px; flex: none;
  stroke: currentColor; stroke-width: 2.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .26s cubic-bezier(.22,1,.36,1);
}
.navm__item[data-open="1"] .navm__chev { transform: rotate(180deg); }

.navm__item > button:hover,
.navm__item > a:hover { color: var(--nav-fg-on); background: var(--nav-hover); }
.navm__item[data-open="1"] > button,
.navm__item[data-open="1"] > button:hover {
  color: var(--nav-active-fg); background: var(--nav-active-bg);
}

/* --- the action --------------------------------------------------------
   This was a flat mint face, and it was the last survivor of a treatment
   the rest of the page already rejected. styles.css records that the brand
   sweep "stretched across buttons and bars just looked like a rainbow", and
   both other calls to action on the page answer that the same way: the face
   stays ink-or-paper and the sweep appears only as diffuse light BEHIND the
   pill, where it reads as the logo spilling rather than as a coloured
   control. The first button anyone sees was the one still painted brand
   colour, so it did not belong to the set.

   Two things follow. The face now follows the bar instead of being fixed:
   paper over the dark hero — the same pill as the hero CTA a few hundred
   pixels below it — and ink once the bar turns solid, which is the crispest
   thing available on white and reuses the ink the open-menu trigger already
   wears. And the halo only exists over the hero. A blurred gradient behind
   a pill on a WHITE bar is pigment on paper, not light: it runs the brand
   hues through desaturated midtones and lands on exactly the muddy wash the
   .ft comments in index.html were written about. Over the dark hero it is
   light on dark and it works. So it fades out as the bar solidifies, which
   also stops the button competing with the page once you are reading it.

   For the same reason there is no drop shadow under the ink pill: an outer
   dark shadow onto a light ground is what produced the grey smudge that
   note is about. The ink is crisp on its own. */
.navm__ctawrap {
  position: relative;
  display: inline-flex;
  border-radius: 999px;
  /* The halo cannot use the footer's z-index:-1 trick here. .navm is
     position:fixed with a z-index, so it is a stacking context, and a
     negative-z descendant would paint behind .navm__bar's own background —
     invisible the moment the bar turns solid. Isolating the wrapper keeps
     the halo inside it: above the bar, below the pill. */
  isolation: isolate;
}
.navm__ctawrap::before {
  content: '';
  position: absolute; z-index: 0; inset: -2px;
  border-radius: inherit;
  /* The cool half of the mark's sweep only: mint #22ffcd to cyan #29deff.
     The full sweep runs on through indigo #5340fb, and the hero and footer
     buttons do use all three — they are big, and the indigo lobe has room
     to read as light. At nav scale the halo is about 12px deep and that
     lobe just sits there as a violet smudge on one shoulder of the pill,
     which is the wrong note next to a slate face. Mint-to-cyan stays cool
     the whole way and is still unmistakably the logo. */
  background: linear-gradient(90deg, #22ffcd, #29deff, #22ffcd);
  background-size: 200% 100%;
  filter: blur(7px);
  opacity: var(--nav-cta-glow);
  transition: opacity .26s ease, filter .26s ease;
  /* Always lit, motion only on reach — most of this page's traffic is paid
     social and therefore touch, where hover never fires. Perpetual drift is
     the part that reads cheap, not the light. */
  animation: navCtaDrift 6s linear infinite;
  animation-play-state: paused;
}
.navm__ctawrap:hover::before,
.navm__ctawrap:focus-within::before {
  opacity: var(--nav-cta-glow-on);
  filter: blur(10px);
  animation-play-state: running;
}
@keyframes navCtaDrift {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

.navm__cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 999px;
  background: var(--nav-cta-bg); color: var(--nav-cta-fg);
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--nav-cta-inner);
  /* .26s, not .18s: the face changes when the bar does, so it has to cross
     with the bar rather than snap ahead of it */
  transition: background-color .26s, color .26s, box-shadow .26s,
              transform .18s cubic-bezier(.22,1,.36,1);
}
.navm__cta:hover {
  background: var(--nav-cta-bg-on);
  box-shadow: var(--nav-cta-inner-on, var(--nav-cta-inner));
  transform: translateY(-1px);
}
.navm__cta:active { transform: translateY(0); }
.navm__cta:focus-visible { outline: 2px solid var(--nav-cta-ring); outline-offset: 3px; }
.navm__cta svg {
  width: 13px; height: 13px; flex: none;
  stroke: currentColor; stroke-width: 2.6; fill: none;
}

/* the one card every menu item shares */
/* Pinned to the bar's own edges, so it drops out of the bar rather than
   floating near it. Opaque paper, one hairline, a lifted ink-tinted shadow —
   no blur, no tiles inside. Only the height animates between menus. */
.navm__card {
  position: absolute; top: calc(100% + var(--nav-drop)); left: 0; right: 0;
  border-radius: 16px; overflow: hidden;
  background: #faf9fd;                       /* the tray the cards sit on */
  border: 1px solid rgba(11, 4, 33, .10);
  box-shadow: 0 1px 2px rgba(11, 4, 33, .04), 0 24px 56px -22px rgba(11, 4, 33, .38);
  opacity: 0; visibility: hidden;
  transform: translateY(6px) scale(.985);
  transform-origin: top center;
  transition: opacity .19s ease, transform .28s cubic-bezier(.22,1,.36,1),
              height .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .2s;
}
.navm[data-open="1"] .navm__card {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .19s ease, transform .28s cubic-bezier(.22,1,.36,1),
              height .28s cubic-bezier(.22,1,.36,1), visibility 0s;
}
/* There was a strip here that bridged the 10px gap between bar and panel,
   because crossing it took the pointer out of every hover region and the
   panel shut before you reached it. Both halves of that are gone: the menu
   opens on a click and stays open until something closes it, and the open
   sheet has no gap to cross. */

/* Flush, square-shouldered and full-bleed once the bar is: no top border,
   because the bar's own bottom border is the seam between the two halves of
   the sheet, and no side borders, because there is no side left to draw on. */
.navm[data-open="1"] .navm__card {
  border-width: 0 0 1px;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 1px 2px rgba(11, 4, 33, .04), 0 26px 60px -24px rgba(11, 4, 33, .42);
}
.navm[data-open="1"] .navm__card-inner { padding: 14px var(--nav-pad) 20px; }

.navm__card-inner { padding: 10px; }
.navm__card-inner[data-fading="1"] { opacity: 0; transition: opacity .12s ease; }
.navm__card-inner:not([data-fading="1"]) { opacity: 1; transition: opacity .18s ease .06s; }

/* These were rows — a title, one line under it, four across, and no edge of
   their own. That worked while the panel was 940px wide and read as a list
   that had dropped out of the bar. Once the bar opens to 1240 it is not a
   list any more, it is a tray, and four unbounded paragraphs floating in
   that much white paper have no size: the eye cannot tell where one link
   ends and the next begins.

   So the panel goes to the page's paper (#faf9fd) and the links come up off
   it as white cards with a hairline — the two tones and the one edge this
   site already builds every card out of. No gradient face and no drop
   shadow at rest: the step between the two papers is the whole effect, and
   it is a crisp one. The lift on hover is the only shadow, and it is
   ink-tinted rather than grey. */
.navm-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.navm-links a {
  display: grid; gap: 5px; align-content: start;
  padding: 16px 16px 18px; border-radius: 14px;
  background: #fff; border: 1px solid #ece8f6;
  color: #0b0421; text-decoration: none;
  transition: border-color .16s, box-shadow .18s,
              transform .18s cubic-bezier(.22,1,.36,1);
}
.navm-links a:hover, .navm-links a:focus-visible {
  border-color: #ddd8ea;
  box-shadow: 0 12px 26px -16px rgba(11, 4, 33, .40);
  transform: translateY(-2px);
}
.navm-links .t { font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.navm-links .d { font-size: 13.5px; line-height: 1.5; color: #6d6889; }
/* Between the menu's own breakpoint and about 1100px the bar cannot reach
   1240 — width:100% gets there first — so four cards are cut from whatever
   the window allows, and at 900px that is 205px each: every title wraps to
   three lines. Two rows of two instead. */
@media (max-width: 1100px) {
  .navm-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* mobile */
.navm__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: auto;
  border-radius: 999px; border: 1px solid var(--nav-ring);
  background: transparent; color: var(--nav-fg-on); cursor: pointer;
}
@media (min-width: 900px) { .navm__toggle { display: none; } }
.navm__toggle svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }
.navm__sheet {
  pointer-events: auto;
  position: absolute; top: calc(100% + var(--nav-drop)); left: 16px; right: 16px;
  border-radius: 18px; padding: 14px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(11, 4, 33, .12);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: none; flex-direction: column; gap: 2px;
}
.navm[data-sheet="1"] .navm__sheet { display: flex; }
@media (min-width: 900px) { .navm__sheet { display: none !important; } }
.navm__sheet a { color: #4a4663; text-decoration: none; font-size: 15px; padding: 11px 12px; border-radius: 10px; }
.navm__sheet a:hover { background: rgba(11, 4, 33, .06); color: #0b0421; }
/* No CTA is rendered inside the sheet today — the bar keeps its own at every
   width — but if one is ever added back it inherits the bar's tokens, and the
   sheet is paper, so it would arrive as the ink pill and need no inversion. */
.navm__sheet .navm__cta { margin-top: 8px; justify-content: center; }

/* Below the breakpoint the bar becomes three columns — menu, mark, action —
   so the logo sits dead centre regardless of how wide the other two are.
   A flex row with margin-auto would have centred it between them, not in
   the bar. */
@media (max-width: 899px) {
  .navm__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }
  .navm__toggle { order: 1; justify-self: start; margin-left: 0; }
  .navm__logo   { order: 2; justify-self: center; gap: 0; }
  .navm__logo span { display: none; }
  .navm__logo img { width: 34px; height: 34px; }
  .navm__ctawrap { order: 3; justify-self: end; }
  .navm__cta    { padding: 9px 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .navm__card, .navm__card-inner, .navm__cta { transition: none !important; }
  /* the sheet still opens, it just arrives rather than travels */
  .navm { transition: none; }
  .navm__bar { transition: background-color .26s, border-color .26s, box-shadow .26s; }
  .navm__chev, .navm-links a { transition: none !important; }
  /* the halo is decoration; without motion it holds a steady state */
  .navm__ctawrap::before { animation: none; transition: none; }
}