/* chrome.css: owned by the foundation (065/004; the nav rebuilt in round 3, 065/015), design
   package §14 (the nav, the close and the footer). */

/* ---------- The nav ----------
   Fixed at --nav-top. One markup, two layouts (README, "The nav"):
   - The islands, from 1240px wide in landscape (the media query below; narrower, the three
     pills don't fit in every language, so the bar stays): three separate glass pills, 58px
     tall, on the rails. The wordmark at the start; the links (Pricing, About us, Security & Legal, FAQ)
     centred on the viewport; the language menu, Log in and Join the waitlist at the end. The
     current page's link is Gold and carries aria-current="page".
   - The bar, everywhere else: one glass pill 52px tall, 16px from each side, holding the
     wordmark, Join the waitlist and the menu button, which opens the menu card (below).
   Nothing in it moves or measures. Immersive (<html data-immersive>, set by the panel): the nav
   slides up out of view, and comes back while anything inside it has focus or the menu card is
   open (<html data-nav-open>, nav.js). */
.nav {
  --nav-bar-h: 52px;
  position: fixed;
  inset-block-start: var(--nav-top);
  inset-inline: 0;
  z-index: var(--z-header);
  pointer-events: none;
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.35s var(--ease-out);
}
:root[data-immersive]:not([data-nav-open]) .nav:not(:focus-within) {
  transform: translateY(calc(-100% - var(--nav-top) - 8px));
  opacity: 0;
}
:root[data-immersive]:not([data-nav-open]) .nav:not(:focus-within) :is(.nav__bar, .nav__island) {
  pointer-events: none;
}

/* The bar: one pill. Its parts are the islands' own, with the links, the language menu and
   Log in put away (the menu card holds them). */
.nav__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  block-size: var(--nav-bar-h);
  margin-inline: 16px;
  padding-inline: 16px 7px; /* the menu button sits 8px inside the pill, as from its top */
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
}
.nav__brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  margin-inline-end: auto;
  color: var(--gold);
}
.nav__brand .mark {
  width: auto;
  height: 15px;
}
.nav__links,
.lang-menu,
.nav__login {
  display: none;
}
.nav__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}
.nav__actions > *,
.lang-menu__button > svg {
  flex: none;
}
/* Join the waitlist, drawn 30px tall; its touch target is 44px (::after). */
.nav .nav__join {
  position: relative;
  min-height: 30px;
  padding-inline: 12px;
  font-size: 0.78125rem;
}
.nav .nav__join::after {
  position: absolute;
  inset-block: -7px;
  inset-inline: 0;
  content: '';
}

/* The menu button and the card's close button, which covers it while the card is open: 36px
   round on Surface 3, a 44px touch target (::after). */
.nav__menu,
.nav-card__x {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ivory);
  cursor: pointer;
}
.nav__menu::after,
.nav-card__x::after {
  position: absolute;
  inset: -4px;
  content: '';
}
.nav__menu svg,
.nav-card__x svg {
  width: 18px;
  height: 18px;
}
.nav__menu[aria-expanded='true'] .nav__menu-open,
.nav__menu:not([aria-expanded='true']) .nav__menu-close {
  display: none;
}
/* Without nav.js (no JS, or no <dialog>), the link stands in for the button: they look the
   same, so the swap when nav.js sets data-nav-ready moves nothing. */
.nav[data-nav-ready] .nav__menu--link,
.nav:not([data-nav-ready]) button.nav__menu {
  display: none;
}

@media (max-width: 359.98px) {
  .nav__bar {
    gap: 8px;
    padding-inline-start: 12px;
  }
  .nav__brand .mark {
    height: 14px;
  }
  .nav .nav__join {
    padding-inline: 10px;
  }
}

/* ---------- The islands: three glass pills on the rails ----------
   From 1240px: from there the three keep 16px or more between them, and 16px or more from the
   window's edges, in every language (measured in Chrome, 065/015: the Arabic actions, 371px,
   and the Russian links, 489px, are the widest; English alone would fit from 1056px). The
   Russian and Arabic actions are wider than their column, so they stand out past the rails
   (by about 10px and 26px once the rails are full) rather than closing on the links. */
@media (min-width: 1240px) and (orientation: landscape) {
  /* The bar is now only the row: a grid whose middle column is centred on the viewport. */
  .nav__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
    block-size: var(--nav-h);
    max-inline-size: var(--rails);
    margin-inline: auto;
    padding-inline: var(--gutter);
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    pointer-events: none;
  }
  .nav__island {
    position: relative;
    display: flex;
    align-items: center;
    block-size: var(--nav-h);
    border-radius: var(--radius-pill);
    pointer-events: auto;
  }
  /* Each island's glass is drawn behind it, not on it: a backdrop-filter on the island would
     make it the backdrop root of the language menu's own glass, which would then blur nothing. */
  .nav__island::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--glass-border);
    border-radius: inherit;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--shadow-float);
    content: '';
  }
  .nav__brand {
    justify-self: start;
    min-height: 0;
    margin: 0;
    padding-inline: 22px;
  }
  .nav__brand .mark {
    height: 17px;
  }
  .nav__links {
    display: flex;
    justify-self: center;
    padding-inline: 26px;
  }
  /* At the rails' end, by an auto margin rather than justify-self: where the actions are wider
     than their column (Russian and Arabic, whose labels are longer), the margin goes to zero,
     so they keep the 16px gap from the links and stand out past the rails instead. */
  .nav__actions {
    gap: 18px;
    margin-inline-start: auto;
    padding-inline: 14px 8px;
  }
  .lang-menu {
    display: block;
  }
  .nav__login {
    display: inline-flex;
  }
  .nav .nav__menu {
    display: none;
  }
  .nav .nav__join {
    min-height: 38px;
    padding-inline: 1rem;
    font-size: 0.875rem;
  }
  .nav .nav__join::after {
    content: none;
  }
}

/* The links: Plex Sans 500 at 14px, Ivory at 86%, Gold-hover on hover, and the current page
   Gold. */
.nav__links ul {
  display: flex;
  gap: 30px;
}
.nav__links a,
.nav__login {
  align-items: center;
  min-height: 44px;
  color: var(--ivory);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__links a {
  display: inline-flex;
  color: color-mix(in srgb, var(--ivory) 86%, transparent);
}
.nav__links a:hover,
.nav__login:hover {
  color: var(--gold-hover);
}
.nav__links a[aria-current='page'] {
  color: var(--gold);
}

/* ---------- The language menu (the islands) ----------
   A <details>: without JS its button opens and closes it, and its items are plain ?lang=
   links. nav.js closes it on Esc, a press outside, focus leaving it and a choice. The button
   shows the page's language from <html lang>, so it is right before any script runs. */
.lang-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--ivory) 14%, transparent);
  border-radius: var(--radius-pill);
  color: var(--ivory);
  list-style: none;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
.lang-menu__button::-webkit-details-marker {
  display: none;
}
.lang-menu__button:hover,
.lang-menu[open] > .lang-menu__button {
  border-color: var(--border-strong);
}
.lang-menu__globe {
  width: 15px;
  height: 15px;
  color: var(--ash);
}
.lang-menu__chevron {
  width: 13px;
  height: 13px;
  color: var(--ash);
}
.lang-menu__code,
.lang-menu__item-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.lang-menu__code {
  display: none;
  line-height: 1.2;
}
:root:lang(en) .lang-menu__code[data-code='en'],
:root:lang(ru) .lang-menu__code[data-code='ru'],
:root:lang(ar) .lang-menu__code[data-code='ar'] {
  display: inline;
}
/* The list drops 8px below the island, aligned with the button. */
.lang-menu__list {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 14px;
  min-inline-size: 11rem;
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-float);
}
.lang-menu__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 40px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  color: var(--ivory);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.lang-menu__list a:hover {
  color: var(--gold-hover);
}
.lang-menu__item-code {
  min-inline-size: 1.75rem;
  color: var(--ash);
}
/* The current language: underlined, as in the footer's switcher. */
.lang-menu__list a[aria-current='true'] span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ---------- The menu card (the bar's menu button) ----------
   A modal <dialog> (nav.js): focus stays inside it, the page behind is inert and doesn't
   scroll (<html data-nav-open>), and Esc closes it. The dialog itself is the whole viewport,
   transparent; inside it:
     - the scrim: Night at 55% over the page, drawn as the shadow of a hole exactly where the
       bar is, so the bar stays bright above it;
     - the close button, exactly over the bar's menu button;
     - the card: 10px below the bar, 16px from each side, Surface 2 at 94% with the frost
       blur, radius 22, a 1px Ivory hairline at 14% and the float shadow. It scrolls inside
       itself on a short screen.
   It fades in over 200ms as it drops 8px (none under reduced motion, base.css). */
.nav-card {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 1);
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--text);
}
.nav-card::backdrop {
  background: none;
}
.nav-card__scrim {
  position: absolute;
  inset-block-start: var(--nav-top);
  inset-inline: 16px;
  block-size: 52px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--scrim) 55%, transparent);
  pointer-events: none;
}
.nav-card__x {
  position: absolute;
  inset-block-start: calc(var(--nav-top) + 8px);
  inset-inline-end: 24px;
}
.nav:not([data-nav-ready]) + .nav-card [data-nav-close],
.nav[data-nav-ready] + .nav-card .nav-card__x--link {
  display: none;
}
.nav-card__panel {
  position: absolute;
  inset-block-start: calc(var(--nav-top) + 62px);
  inset-inline: 16px;
  max-block-size: calc(100% - var(--nav-top) - 78px);
  padding: 12px 16px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--ivory) 14%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow: var(--shadow-float);
}
@keyframes nav-card-drop {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
}
@keyframes nav-card-fade {
  from {
    opacity: 0;
  }
}
.nav-card[open] .nav-card__panel {
  animation: nav-card-drop 200ms var(--ease-out);
}
.nav-card[open] .nav-card__scrim {
  animation: nav-card-fade 200ms var(--ease-out);
}
:root[data-nav-open] {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* The rows: 56px, Plex 500 at 18px in Ivory, an arrow in Ash at the end. */
.nav-card__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 56px;
  color: var(--ivory);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.nav-card__links a:hover {
  color: var(--gold-hover);
}
.nav-card__links a[aria-current='page'] {
  color: var(--gold);
}
.nav-card__links svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ash);
  transform: scaleX(var(--dir));
}

/* The language, segmented: a Surface 2 track, the current language on Surface 3. Each item
   is drawn 36px tall with a 44px touch target. */
.lang-seg {
  margin-block-start: 20px;
}
.lang-seg ul {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}
.lang-seg a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 36px;
  padding-inline: 16px;
  border-radius: var(--radius-pill);
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.lang-seg a::after {
  position: absolute;
  inset-block: -4px;
  inset-inline: 0;
  content: '';
}
.lang-seg a:hover {
  color: var(--ivory);
}
.lang-seg a[aria-current='true'] {
  background: var(--surface-3);
  color: var(--ivory);
}

/* Log in and Join the waitlist, 52px tall, side by side at about 38% and 62%. */
.nav-card__actions {
  display: flex;
  gap: 10px;
  margin-block-start: 28px;
}
.nav-card__actions .btn {
  min-block-size: 52px;
  min-inline-size: 0;
  padding-inline: 1rem;
  font-size: 1rem;
  text-align: center;
  white-space: normal;
}
/* Log in keeps to one line: where its label is longer than 38% allows (Arabic), it takes the
   room it needs from Join, whose longer label may wrap. */
.nav-card__actions .btn--ghost {
  flex: 38 1 0;
  min-inline-size: max-content;
  white-space: nowrap;
}
.nav-card__actions .btn--gold {
  flex: 62 1 0;
}

/* Without nav.js the menu link opens the card by :target, as a plain overlay; its close link
   goes back. Never on the islands' layout, which has no menu button. */
@media (max-width: 1239.98px), (orientation: portrait) {
  .nav:not([data-nav-ready]) + .nav-card:target {
    display: block;
  }
}
@media (min-width: 1240px) and (orientation: landscape) {
  .nav-card {
    display: none;
  }
}

/* ---------- The language switchers: the footer's, the nav's menu and the card's control ----------
   Each lists only the languages marked complete in <html data-langs-complete> and hides itself
   while only one is. Plain links, so they work without JS. The footer's and the menu's current
   language is underlined rather than Gold: Gold stays on the package's short list, and Ivory
   keeps 4.5:1 on the nav's glass whatever scrolls behind it. pnpm landing-v2:check looks for
   the .lang-switch rules below here. */
.lang-switch ul {
  display: flex;
  gap: 0.25rem;
}
:is(.lang-switch, .lang-menu, .lang-seg) li {
  display: none;
}
:root[data-langs-complete~='en'] .lang-switch [data-lang='en'],
:root[data-langs-complete~='ru'] .lang-switch [data-lang='ru'],
:root[data-langs-complete~='ar'] .lang-switch [data-lang='ar'],
:root[data-langs-complete~='en'] :is(.lang-menu, .lang-seg) [data-lang='en'],
:root[data-langs-complete~='ru'] :is(.lang-menu, .lang-seg) [data-lang='ru'],
:root[data-langs-complete~='ar'] :is(.lang-menu, .lang-seg) [data-lang='ar'] {
  display: block;
}
:root:not([data-langs-complete*=' ']) :is(.lang-switch, .lang-menu, .lang-seg) {
  display: none;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 44px;
  color: var(--ivory);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.lang-switch a:hover {
  color: var(--gold-hover);
}
.lang-switch a[aria-current='true'] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ---------- The close (package, section 14): centred, Join the waitlist and Log in ---------- */
.close .h2 {
  margin-block-end: 2.25rem;
}
@media (max-width: 720px) {
  .close .cta .btn {
    flex: 1 1 12rem;
  }
}

/* ---------- The footer, inside the rails ---------- */
.foot__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem 3rem;
  padding-block: 4rem 2rem;
  border-block-start: 1px solid transparent; /* no divider (065/008); the 1px keeps positions */
  color: var(--ash);
  font-size: 0.875rem;
}
.foot__brand .mark {
  width: auto;
  height: 18px;
  margin-block-end: 1rem;
}
/* Four columns (065/015): Product, Company, Help and Legal. */
.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 1.5rem clamp(2rem, 4vw, 4rem);
}
/* Below the wide layout the columns go under the mark and tagline, all four in a row. */
@media (max-width: 1023.98px), (orientation: portrait) {
  .foot__in {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot__cols {
    justify-content: start;
  }
}
.foot__label {
  margin-block-end: 0.75rem;
}
.foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--ivory);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.foot__col a:hover {
  text-decoration: underline;
}
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.foot__tm {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .foot__in {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot__col a {
    min-height: 44px;
  }
}