/* ── The site menu ─────────────────────────────────────────────────────────
   One "Menu" pill in the middle of the floating header, which grows into a
   bone-white card listing every page worth reaching: the pages themselves
   first (Pricing, Changelog, Guides, Compare, About), the homepage's tour
   sections last. It replaced a row of in-page anchors, which search engines
   do not treat as the site's structure; real URLs in the header are what
   they read as the pages that matter.

   Shared by every page on top of its own stylesheet (landing.css, legal.css
   or site.css), which keeps owning the pill itself and the iris .btn. The
   tokens it reads (--ink, --marquee, --display...) are defined by each of
   those, with fallbacks here for the few that are not everywhere.

   The card is the toggle's own pill, grown: a clip-path on the card surface
   starts at exactly the toggle's rectangle and opens to the whole card while
   the toggle widens into the Close bar across its top. Only clip-path,
   opacity and transform move, so the open never lays the page out again.

   Open, the card and the header are one shape, not a card laid on a pill:
   the pill turns the card's own white, the card's top is square and flush
   with the pill's top, its shadow starts below the pill, and two small
   concave fillets carry the pill's lower edge round into the card's sides.
   That only works where the pill's edge is straight, so on a wide screen
   the card keeps clear of the pill's round ends and of the items in it;
   below 860px it spans the whole pill and takes the pill's own round top
   instead. */

.menu {
  --menu-toggle-w: 104px;
  --menu-toggle-h: 40px;
  --menu-pad: 8px;
  --menu-ease: var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1));
  /* The header pill's height, where the card leaves the pill. */
  --menu-bar-h: 56px;
  --menu-fillet: 14px;
  --menu-radius-top: 0px;
  /* Where the closed toggle sits inside the card, as clip-path insets. */
  --menu-clip-l: calc(50% - var(--menu-toggle-w) / 2);
  --menu-clip-r: calc(50% - var(--menu-toggle-w) / 2);

  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  /* Clear of the name on the left and of Buy and Download on the right
     (157px), with room for the fillets. */
  width: min(560px, 100% - 360px);
  padding: var(--menu-pad);
  transform: translateX(-50%);
  /* Closed, the card's footprint is invisible and must not swallow clicks
     meant for the page under it; only the toggle takes them. */
  pointer-events: none;
}

/* The surface: the white the card is made of. */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  clip-path: inset(var(--menu-pad) var(--menu-clip-r) calc(100% - var(--menu-pad) - var(--menu-toggle-h)) var(--menu-clip-l) round 20px);
  opacity: 0;
  transition: clip-path 340ms var(--menu-ease), opacity 160ms ease 120ms;
}

.menu[data-open] { pointer-events: auto; }

.menu[data-open]::before {
  clip-path: inset(0 round var(--menu-radius-top) var(--menu-radius-top) 28px 28px);
  opacity: 1;
  transition: clip-path 560ms var(--menu-ease), opacity 120ms ease;
}

/* The lift: a shadow of its own, starting where the card leaves the pill,
   so none of it lands on the header. It arrives once the card has nearly
   grown, and goes first. */
.menu::after {
  content: "";
  position: absolute;
  inset: var(--menu-bar-h) 0 0;
  z-index: -2;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 1px 2px rgba(4, 69, 144, 0.06), 0 24px 60px -18px rgba(4, 69, 144, 0.32);
  /* A blur spreads upward too; the clip keeps it off the pill. */
  clip-path: inset(0 -80px -100px);
  opacity: 0;
  transition: opacity 120ms ease;
}

.menu[data-open]::after {
  opacity: 1;
  transition: opacity 360ms ease 220ms;
}

/* The pill wears the card's white while the menu is open, so the two read
   as one surface. */
.menubar { transition: background-color 200ms ease; }
.menubar:has(> .menu[data-open]) { background-color: #fff; }

/* ── The toggle: Menu, then the Close bar ───────────────────────────────── */

.menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--menu-toggle-w);
  height: var(--menu-toggle-h);
  margin: 0 auto;
  padding: 0 16px;
  color: var(--ink, #0a0d12);
  background: var(--paper-raised, #f3f9ff);
  border: 0;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgba(4, 69, 144, 0.08);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  transition: width 340ms var(--menu-ease), background-color 160ms ease, box-shadow 160ms ease;
}

.menu__toggle:hover {
  background: #e8f2fd;
  box-shadow: inset 0 0 0 1px rgba(4, 69, 144, 0.12);
}

.menu__toggle:focus-visible {
  outline: 2px solid var(--marquee, #0069e0);
  outline-offset: 2px;
}

.menu[data-open] .menu__toggle {
  width: 100%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule, #dbe8f5);
  transition: width 560ms var(--menu-ease), background-color 160ms ease, box-shadow 160ms ease;
}

.menu[data-open] .menu__toggle:hover { background: var(--paper-raised, #f3f9ff); }

/* The fillets where the pill's lower edge turns down into the card's sides.
   They hang off the toggle, which spans the card's inner width when open:
   the card's edge is --menu-pad outside it, and the pill's lower edge is
   the bar's height below the card's top. */
.menu__toggle::before,
.menu__toggle::after {
  content: "";
  position: absolute;
  top: calc(var(--menu-bar-h) - var(--menu-pad));
  width: var(--menu-fillet);
  height: var(--menu-fillet);
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease;
}

.menu__toggle::before {
  right: calc(100% + var(--menu-pad));
  background: radial-gradient(circle at 0 100%, transparent calc(var(--menu-fillet) - 0.5px), #fff var(--menu-fillet));
}

.menu__toggle::after {
  left: calc(100% + var(--menu-pad));
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--menu-fillet) - 0.5px), #fff var(--menu-fillet));
}

.menu[data-open] .menu__toggle::before,
.menu[data-open] .menu__toggle::after {
  opacity: 1;
  transition: opacity 200ms ease 300ms;
}

/* Two bars that cross into an X. One whole pixel at whole-pixel offsets:
   a 1.5px bar at a half-pixel offset is smeared across two rows on a
   standard display and reads as a blurred equals sign, and on a Retina one
   it is heavier than the label's own strokes. */
.menu__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.menu__icon::before,
.menu__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 340ms var(--menu-ease);
}

.menu__icon::before { top: 4px; }
.menu__icon::after { top: 10px; }

.menu[data-open] .menu__icon::before { transform: translateY(3px) rotate(45deg); }
.menu[data-open] .menu__icon::after { transform: translateY(-3px) rotate(-45deg); }

/* The label rolls: Menu leaves upward as Close arrives from below. */
.menu__label {
  display: grid;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3;
}

.menu__label > span {
  grid-area: 1 / 1;
  transition: transform 340ms var(--menu-ease), opacity 200ms ease;
}

.menu__label > span + span { transform: translateY(100%); opacity: 0; }
.menu[data-open] .menu__label > span:first-child { transform: translateY(-100%); opacity: 0; }
.menu[data-open] .menu__label > span + span { transform: none; opacity: 1; }

/* ── The card's contents ────────────────────────────────────────────────── */

.menu__panel {
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 16px 14px;
  visibility: hidden;
  transition: visibility 0s linear 340ms;
}

.menu[data-open] .menu__panel {
  visibility: visible;
  transition-delay: 0s;
}

.menu__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__panel a { text-decoration: none; }

.menu__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}

.menu__kicker {
  margin: 0 0 12px;
  color: var(--fog, #93979f);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu__primary > li > a {
  display: inline-block;
  padding: 3px 0;
  color: var(--ink, #0a0d12);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  transition: color 140ms ease;
}

.menu__panel .menu__secondary { margin: 2px 0 10px; }

.menu__secondary a {
  display: inline-block;
  padding: 3px 0;
  color: var(--ink-soft, #535862);
  font-size: 14px;
  line-height: 1.35;
  transition: color 140ms ease;
}

.menu__foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule, #dbe8f5);
}

.menu__tour {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.menu__tour a {
  color: var(--ink-soft, #535862);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 140ms ease;
}

.menu__panel a:hover { color: var(--marquee, #0069e0); }

/* Discord is the one entry that leaves the site, and it says so before the
   click: Apple's own arrow.up.right (the SF Symbol, rendered to PNG with the
   others), worn as a mask so it takes the link's colour, hover included. It
   sits at the cap height, the way the Mac marks a link out of an app, and
   leans a point further out on hover. */
.menu__panel a[href="/discord"]::after {
  content: "";
  display: inline-block;
  /* The symbol's PNG carries the usual SF padding (the glyph is the middle
     57%), so the box is sized and lifted for the glyph: its top meets the
     cap height, its foot the middle of the x-height. */
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.04em;
  vertical-align: 0.14em;
  background-color: currentColor;
  -webkit-mask: url("/assets/macos/sf/arrow-up-right.png") center / contain no-repeat;
  mask: url("/assets/macos/sf/arrow-up-right.png") center / contain no-repeat;
  opacity: 0.5;
  transition: opacity 140ms ease, transform 200ms var(--menu-ease);
}

.menu__panel a[href="/discord"]:hover::after {
  opacity: 1;
  transform: translate(1px, -1px);
}

.menu__panel a[aria-current="page"] {
  color: var(--marquee, #0069e0);
}

.menu__panel a:focus-visible {
  outline: 2px solid var(--marquee, #0069e0);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The header's Buy and Download, restated for a phone, where the header
   has room for the name and the toggle only. */
.menu__actions {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.menu__actions .menubar__buy { font-size: 15px; }

/* Contents arrive a beat after the card, one row after another, and leave
   together at once. --i is each row's order, set by menu.js. */
.menu__panel li,
.menu__kicker,
.menu__actions {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.menu[data-open] .menu__panel li,
.menu[data-open] .menu__kicker,
.menu[data-open] .menu__actions {
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease, transform 520ms var(--menu-ease);
  transition-delay: calc(110ms + var(--i, 0) * 22ms);
}

/* ── The header around it ───────────────────────────────────────────────── */

.menubar__buy {
  color: var(--ink-soft, #535862);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms ease;
}

.menubar__buy:hover,
.menubar__buy[aria-current="page"] { color: var(--ink, #0a0d12); }

/* Too narrow for the centered card to clear the name and the buttons
   (see .menu's width): the toggle moves to the pill's right end, and open,
   the card is the whole pill, with Buy and Download restated inside it. */
@media (max-width: 860px) {
  .menubar { padding-right: calc(var(--menu-toggle-w, 104px) + 22px); }

  .menu {
    --menu-clip-l: calc(100% - var(--menu-pad) - var(--menu-toggle-w));
    --menu-clip-r: var(--menu-pad);
    --menu-radius-top: 28px;
    left: 0;
    width: 100%;
    transform: none;
  }

  .menu__toggle { margin-right: 0; }

  /* The card is the whole pill here: no pill edge left to join, and the
     shadow can run the card's full height. */
  .menu::after { top: 0; border-radius: 28px; clip-path: none; }
  .menu__toggle::before,
  .menu__toggle::after { display: none; }

  .menu__actions { display: flex; }
}

/* A phone: the name and the toggle, nothing else in the pill. */
@media (max-width: 560px) {
  .menubar > .menubar__buy,
  .menubar > .btn--small { display: none; }
}

@media (max-width: 380px) {
  .menu__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .menu::before,
  .menu[data-open]::before,
  .menu::after,
  .menu[data-open]::after,
  .menu__toggle::before,
  .menu__toggle::after,
  .menu[data-open] .menu__toggle::before,
  .menu[data-open] .menu__toggle::after,
  .menubar,
  .menu__toggle,
  .menu[data-open] .menu__toggle,
  .menu__icon::before,
  .menu__icon::after,
  .menu__label > span,
  .menu__panel li,
  .menu__kicker,
  .menu__actions,
  .menu[data-open] .menu__panel li,
  .menu[data-open] .menu__kicker,
  .menu[data-open] .menu__actions {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}