/* ═══════════════════════════════════════════════════════════════════════════
   Lateral — shared site chrome: the nav pill and the footer.
   ───────────────────────────────────────────────────────────────────────────
   Before this file the site carried three different navigations — the glass
   pill on the homepage, a plain wordmark header on the product pages, and a
   third inline-styled one on jobs — and five different footers, two of which
   were missing entirely. A visitor crossing from /fleet/ to / went through
   what read as two different companies.

   Everything here is loaded by EVERY page, immediately after theme.css and
   before the page's own stylesheet, so a page can still override. It depends
   on nothing but theme.css tokens: the scene colours are declared locally with
   fallbacks so a page that never loads home.css still gets a correct pill.

   The markup that goes with it is stamped by build_chrome.py. Edit the
   generator, not the generated HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Liquid Glass on paper: a white wash, not a dark tint. The saturate() is
     what keeps it from reading as frosted plastic — it pulls colour up out of
     whatever is scrolling underneath, which is the whole point of the effect. */
  --glass-bg:  rgba(255, 255, 255, .72);
  --glass-brd: rgba(0, 0, 0, .08);
  --glass-hi:  rgba(255, 255, 255, .7);   /* the inner top highlight */
  --glass-sh:  rgba(0, 0, 0, .10);
  --chrome-ink: #f5f5f7;          /* footer band — Apple's grey, not black */
  --chrome-txt: #1d1d1f;
  --chrome-dim: #6e6e73;
}

/* The chrome is NOT tinted. A section may wear its own hue (see .tint-* in
   theme.css), but the nav and the footer sit on every page, so "this is
   pressable" has to look the same on all of them — a Get-Lateral button that
   changed colour per page would read as a different button. */
.nav-pill, footer.soar-foot {
  --accent: var(--sys); --accent-text: var(--sys-text); --accent-ink: var(--sys-ink);
}
:root[data-theme="dark"] .nav-pill, :root[data-theme="dark"] footer.soar-foot {
  --accent: var(--sys-dark); --accent-text: var(--sys-dark-text);
}

/* ── Liquid Glass primitive ──────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 24px var(--glass-sh);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .96); }
  .on-dark .glass, .engine-track .glass { background: rgba(18, 20, 26, .94); }
}

/* Glass floating over an art-directed DARK band has to be a dark tint, or the
   white wash turns into a bright slab sitting on a night scene. The tokens are
   redeclared on the band; the .glass rule itself never changes. */
:root[data-theme="dark"],
.on-dark, .engine-track, .isl-track,
/* glass floating INSIDE the hazard map frame — the map is a night chart even
   though the page around it is white, so its legend and callouts are dark */
.map-legend, .hz-callout {
  --glass-bg:  rgba(18, 20, 26, .58);
  --glass-brd: rgba(255, 255, 255, .14);
  --glass-hi:  rgba(255, 255, 255, .10);
  --glass-sh:  rgba(0, 0, 0, .35);
}

/* A whole page pinned to dark — the signed-in apps — takes the dark chrome
   too, or it would wear the marketing site's white nav over its own dark UI. */
:root[data-theme="dark"] {
  --chrome-ink: #04060a;
  --chrome-txt: #f5f5f7;
  --chrome-dim: rgba(235, 235, 240, .55);
}
:root[data-theme="dark"] .nav-pill a:hover,
:root[data-theme="dark"] .nav-pill a[aria-current="page"] { background: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .nav-more { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .nav-menu { background: rgba(16, 18, 23, .96);
  border-color: rgba(235, 235, 240, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .nav-menu a:hover,
:root[data-theme="dark"] .nav-menu a:active { background: rgba(245, 245, 247, .12); }
:root[data-theme="dark"] .soar-foot { border-top-color: rgba(235, 235, 240, .12); }
:root[data-theme="dark"] .soar-foot .fbrand p,
:root[data-theme="dark"] .soar-foot h4,
:root[data-theme="dark"] .soar-foot .tag,
:root[data-theme="dark"] .soar-foot-base { color: rgba(235, 235, 240, .5); }
:root[data-theme="dark"] .soar-foot .tag { border-color: rgba(235, 235, 240, .18); }
:root[data-theme="dark"] .soar-foot-base { border-top-color: rgba(235, 235, 240, .1); }

/* ── Floating glass nav (the app's tab bar, translated) ──────────────────── */
.nav-pill {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 100; border-radius: 999px;
  display: flex; align-items: center; gap: 4px;
  /* nowrap is load-bearing, not decoration: product.css styles the bare `nav`
     element with flex-wrap:wrap, which caught this pill and broke it onto two
     lines on a phone — and the over-wide pill then widened the whole document,
     so every product page scrolled sideways. */
  flex-wrap: nowrap;
  padding: 7px 10px;
  max-width: min(96vw, 840px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               Inter, system-ui, sans-serif;
}
.nav-pill a {
  color: var(--chrome-dim); text-decoration: none;
  font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-pill a:hover { color: var(--chrome-txt); background: rgba(0, 0, 0, .05); }
.nav-pill .brand { font-weight: 700; font-size: 15px; color: var(--chrome-txt); padding-right: 8px; }
/* the page you are already on, so the pill orients rather than just links */
.nav-pill a[aria-current="page"] { color: var(--chrome-txt); background: rgba(0, 0, 0, .06); }
.nav-pill .cta { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* The neon CTA is CSS now, so the nav's own filled-pill styling has to come
   back off or the tube sits inside a second button. neon.css supplies the
   border, the glow and the colour; this only fixes the footprint so it lines
   up with the nav's other items.
   .cta-neon is kept for the artwork still used in page bodies. */
.nav-pill .cta.neon,
.nav-pill .cta.neon:hover,
.nav-pill .cta.neon[aria-current="page"] { background: none; color: var(--neon); }
.nav-pill .cta.neon { padding: 7px 15px; line-height: 1.25; }
@media (max-width: 860px) { .nav-pill .cta.neon { padding: 6px 13px; font-size: 13px; } }
.nav-pill .cta-neon,
.nav-pill .cta-neon:hover,
.nav-pill .cta-neon[aria-current="page"] { background: none; padding: 0; }
.nav-pill .cta-neon img { display: block; height: 40px; width: auto; }
@media (max-width: 860px) { .nav-pill .cta-neon img { height: 36px; } }
.nav-pill .cta:hover,
.nav-pill .cta[aria-current="page"] { background: var(--sys-hover); color: var(--accent-ink); }

/* ── Overflow menu ────────────────────────────────────────────────────────
   Desktop shows every link inline and hides the button; a phone can only fit
   three, so below 860px the links collapse into the button instead of simply
   disappearing the way they used to. */
.nav-more { display: none; }
.nav-menu { display: none; }

@media (max-width: 860px) {
  .nav-pill { gap: 0; padding: 6px 8px; }
  .nav-pill a { padding: 7px 9px; font-size: 12.5px; }
  .nav-pill a.hide-sm { display: none; }
  .nav-more {
    display: grid; place-items: center; width: 34px; height: 30px;
    margin: 0 2px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(0, 0, 0, .06); color: var(--chrome-txt);
  }
  .nav-more svg { width: 16px; height: 11px; display: block; }
  .nav-more[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }

  .nav-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    display: none; flex-direction: column; min-width: 214px; padding: 8px;
    border-radius: 20px; z-index: 120;
    /* opaque enough to read against a bright hero — the shared .glass tint is
       built for panels over imagery, not for text menus */
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
    max-height: calc(100svh - 90px); overflow-y: auto;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a {
    display: block; padding: 11px 14px; border-radius: 12px;
    font-size: 15px; font-weight: 500; color: var(--chrome-txt);
    text-decoration: none; white-space: nowrap;
  }
  .nav-menu a:active, .nav-menu a:hover { background: rgba(0, 0, 0, .05); }
  .nav-menu hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .08); margin: 6px 10px; }
}

/* A phone fits the brand, the menu button and the CTA — nothing else. Map and
   Fleet stay inline on a tablet and fold into the menu below this. */
@media (max-width: 560px) {
  .nav-pill > a[href="/map/"], .nav-pill > a[href="/fleet/"] { display: none; }
  .nav-pill .brand { padding-right: 4px; }
}

/* Pages built on product.css / careers open their content at the very top of
   the document, where the fixed pill would sit on top of it. The homepage's
   hero is deliberately full-bleed underneath the pill, so this is opt-in. */
body.chrome-pad { padding-top: 82px; }

/* ── Footer ──────────────────────────────────────────────────────────────
   One footer, everywhere. It doubles as the site map: before this, /data,
   /hazard and /marketplace were reachable only by typing the URL or finding
   the one card that linked them. */
footer.soar-foot {
  background: var(--chrome-ink);
  border-top: 1px solid rgba(0, 0, 0, .09);
  /* Some pages centre their body with flex (support.html) — without this the
     footer shrink-wraps to its content and floats as an inset band. Both
     properties are inert in ordinary block flow, so this is safe everywhere. */
  align-self: stretch;
  margin-top: auto;
  color: var(--chrome-dim);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               Inter, system-ui, sans-serif;
  font-size: 14px; line-height: 1.6;
  padding: 54px 22px 46px;
}
.soar-foot-in {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 34px 26px;
  grid-template-columns: 1.5fr repeat(4, 1fr);
}
@media (max-width: 900px) { .soar-foot-in { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .soar-foot-in { grid-template-columns: 1fr 1fr; } }

.soar-foot .fbrand { grid-column: 1 / -1; }
@media (min-width: 901px) { .soar-foot .fbrand { grid-column: auto; } }
.soar-foot .fbrand .fmark {
  display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  color: var(--chrome-txt); margin-bottom: 10px; text-decoration: none;
}
.soar-foot .fbrand p { max-width: 30ch; color: #86868b; font-size: 13.5px; }

.soar-foot h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #86868b; margin-bottom: 12px;
}
.soar-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.soar-foot a { color: var(--chrome-dim); text-decoration: none; }
.soar-foot a:hover { color: var(--chrome-txt); text-decoration: underline; }
.soar-foot .tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #86868b; border: 1px solid rgba(0, 0, 0, .16);
  vertical-align: 1px;
}

.soar-foot-base {
  max-width: 1180px; margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, .09);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: #86868b;
}
.soar-foot-base .disclaim { max-width: 56ch; }

/* The footer is the site's quiet grey band, the way Apple's is: #f5f5f7 under
   a white page, small type, no borders inside it. An art-directed dark section
   ABOVE it therefore ends cleanly rather than bleeding into it. */