/* ============================================================
   Shared site chrome (nav + footer) for the Switchback site.
   Injected by /assets/chrome.js into #sb-nav and #sb-footer.

   Everything is namespaced `sb-` and styled via class selectors so
   it overrides any leftover bare `nav{}` / `footer{}` rules on a page
   by specificity - converting a page does not require deleting its
   old chrome CSS. Color tokens fall back to literals so the chrome
   renders correctly even on a page that hasn't defined them.
   ============================================================ */

/* Reserve nav height so injected chrome doesn't shift the page on load. */
:root{ --sb-nav-h:57px; --sb-safe-top:env(safe-area-inset-top, 0px); }
#sb-nav{min-height:calc(var(--sb-nav-h) + var(--sb-safe-top))}

/* iOS Safari 26 dropped theme-color support and instead TINTS its own chrome (status bar + bottom
   toolbar) by SAMPLING the page's body/edge background. So the BODY - not just html - must be dark on
   the dark homepage; Safari then samples dark and tints its chrome to match. We do NOT use
   viewport-fit=cover or any safe-area paint, so the page never extends under / paints into Safari's
   toolbar - nothing of ours sits down there, only the native (now dark-tinted) chrome. (theme-color
   is kept for Safari 15-18 and other browsers.) */
html{background:#F4EEE2}
html[data-nav-theme="dark"],
body[data-nav-theme="dark"]{
  background-color:#1A2A20;
}

/* ---------- NAV ---------- */
.sb-nav{
  position:sticky; top:0; z-index:200;
  /* The nav background fills the notch/status-bar inset so it is never bare white behind a notch. */
  padding-top:var(--sb-safe-top);
  background:rgba(244,238,226,.92); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(46,70,54,.10);
  color:var(--pine,#2E4636);
}
.sb-nav-inner{
  max-width:var(--maxw,1180px); margin:0 auto;
  padding:.7rem clamp(18px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  /* Sit above the mobile panel (z-190) so the burger stays tappable to close the menu. */
  position:relative; z-index:191;
}
.sb-logo{
  font-family:'Alfa Slab One',serif; color:var(--pine,#2E4636);
  display:inline-flex; align-items:center; gap:.12em;
  font-size:1.15rem; letter-spacing:.01em; line-height:1; white-space:nowrap;
  text-decoration:none;
}
.sb-logo svg{margin:0 .06em}
.sb-nav-right{display:flex; align-items:center; gap:1.25rem}
.sb-links{
  display:flex; gap:1.25rem; align-items:center;
  font-family:'Zilla Slab',serif; font-weight:500; font-size:.95rem;
}
.sb-links a{color:var(--pine,#2E4636); text-decoration:none; opacity:.85; transition:opacity .15s, color .15s}
.sb-links a:hover{opacity:1}
.sb-links a[aria-current="page"]{opacity:1; color:var(--dust,#C56B47)}
.sb-coord{
  font-family:'Zilla Slab',serif; font-size:.72rem; letter-spacing:.14em;
  color:var(--ink-faint,#6a7a6e); opacity:.6; white-space:nowrap;
}
.sb-cta{
  font-family:'Zilla Slab',serif; font-weight:700; font-size:.9rem;
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--sun,#E0A53B); color:var(--pine,#2E4636);
  padding:.5rem .9rem; border-radius:9px; text-decoration:none;
  box-shadow:0 3px 0 #b07f24; transition:transform .15s, box-shadow .15s;
}
.sb-cta:hover{transform:translateY(-2px); box-shadow:0 5px 0 #b07f24}
.sb-cta:active{transform:translateY(1px); box-shadow:0 1px 0 #b07f24}
.sb-cta-sm{display:none}

/* ---------- NAV: dark / green variant (homepage) ---------- */
.sb-nav--dark{
  background:rgba(26,42,32,.94);
  border-bottom:1.5px solid rgba(224,165,59,.28);
  color:var(--paper,#F4EEE2);
}
.sb-nav--dark .sb-logo{color:var(--paper,#F4EEE2)}
.sb-nav--dark .sb-logo .sb-w2{color:var(--sun,#E0A53B)}
.sb-nav--dark .sb-links a{color:var(--paper,#F4EEE2)}
.sb-nav--dark .sb-links a:hover{color:var(--sun,#E0A53B)}
.sb-nav--dark .sb-links a[aria-current="page"]{color:var(--sun,#E0A53B)}
.sb-nav--dark .sb-coord{color:var(--paper,#F4EEE2); opacity:.45}

/* light variant keeps the wordmark all-pine with a sun diamond */
.sb-w2{color:inherit}

/* ---------- MOBILE: hamburger ---------- */
.sb-burger{display:none}

@media (max-width:760px){
  .sb-links{display:none}
  .sb-coord{display:none}
  .sb-nav-right{gap:.5rem}
  /* Collapse the CTA to a short label so it stays visible next to the burger without squishing. */
  .sb-cta{padding:.5rem .95rem; font-size:1rem}
  .sb-cta-lg{display:none}
  .sb-cta-sm{display:inline}
  .sb-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; min-width:44px; height:44px; margin:-2px -.4rem -2px 0;
    padding:0; border:0; border-radius:10px; flex-shrink:0;
    background:transparent; color:inherit; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .sb-burger:hover{background:rgba(46,70,54,.08)}
  .sb-burger:focus-visible{outline:2px solid var(--dust,#C56B47); outline-offset:2px}
  .sb-burger-ic{position:relative; display:block; width:22px; height:16px}
  .sb-burger-ic span{
    position:absolute; left:0; right:0; height:2px; border-radius:2px;
    background:currentColor;
    transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
  }
  .sb-burger-ic span:nth-child(1){top:0}
  .sb-burger-ic span:nth-child(2){top:7px}
  .sb-burger-ic span:nth-child(3){top:14px}
  /* Morph the three bars into an X when the menu is open. */
  .sb-burger.is-open .sb-burger-ic span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .sb-burger.is-open .sb-burger-ic span:nth-child(2){opacity:0}
  .sb-burger.is-open .sb-burger-ic span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
.sb-nav--dark .sb-burger:hover{background:rgba(244,238,226,.12)}

/* The collapsed "TestFlight" label keeps the CTA visible even on the narrowest phones. */

/* ---------- FOOTER (shared, dark) ---------- */
.sb-footer{
  margin-top:0;
  background:var(--pine-night,#1A2A20); color:rgba(244,238,226,.7);
  padding:2.6rem 0 2.2rem; border-top:1px solid rgba(244,238,226,.1);
}
.sb-foot-inner{
  max-width:var(--maxw,1180px); margin:0 auto; padding:0 clamp(18px,4vw,40px);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.6rem; align-items:flex-start;
}
.sb-foot-logo{
  font-family:'Alfa Slab One',serif; font-size:1.2rem; color:var(--paper,#F4EEE2);
  display:inline-flex; align-items:center; gap:.12em; line-height:1;
}
.sb-foot-logo .sb-w2{color:var(--sun,#E0A53B)}
.sb-foot-tag{font-family:'Zilla Slab',serif; font-size:.8rem; letter-spacing:.04em; line-height:1.7; margin-top:.55rem}
.sb-foot-right{text-align:right; font-family:'Zilla Slab',serif; font-size:.82rem; letter-spacing:.04em; line-height:1.9}
.sb-foot-links a{color:var(--sun,#E0A53B); text-decoration:none}
.sb-foot-links a:hover{text-decoration:underline}
.sb-foot-mail{display:block; margin-top:.3rem; color:rgba(244,238,226,.85)}
.sb-foot-sign{display:block; opacity:.5}
@media (max-width:560px){
  .sb-foot-right{text-align:left}
}

/* ---------- MOBILE: slide-down menu panel ---------- */
body.sb-menu-open{position:fixed; left:0; right:0; width:100%; overflow:hidden}

.sb-mobile-panel{
  position:fixed; left:0; right:0; top:0;
  /* Exact visible-viewport height, measured live via visualViewport while the menu is open (set as
     --sb-menu-vh in JS). svh/dvh alone leave a dark gap as the Safari toolbar collapses on open. */
  height:var(--sb-menu-vh, 100dvh);
  z-index:190; /* below the sticky nav (z-index:200) so the bar + burger stay tappable */
}
/* Scrim starts below the header so the nav stays unblurred, undimmed, and tappable -
   the drawer reads as a second tier dropping out from under a fixed header. */
.sb-mobile-scrim{
  position:absolute; left:0; right:0; top:calc(var(--sb-nav-h) + var(--sb-safe-top)); bottom:0;
  background:rgba(26,42,32,.42);
  opacity:0; transition:opacity .22s ease;
}
.sb-mobile-sheet{
  position:absolute; left:0; right:0; top:calc(var(--sb-nav-h) + var(--sb-safe-top)); /* clears the sticky nav */
  max-height:calc(var(--sb-menu-vh, 100dvh) - var(--sb-nav-h) - var(--sb-safe-top)); overflow-y:auto;
  outline:none; /* focus moves here on open for a11y, but no visible ring on the panel itself */
  background:var(--paper,#F4EEE2);
  border-bottom:1.5px solid rgba(46,70,54,.16);
  box-shadow:0 14px 40px rgba(26,42,32,.22);
  padding:.6rem clamp(18px,4vw,40px) 1.4rem;
  opacity:0;
  /* Fade in place under the header - no slide, top edge stays tucked under the nav. */
  transition:opacity .22s ease;
}
.sb-mobile-panel.is-open .sb-mobile-scrim{opacity:1}
.sb-mobile-panel.is-open .sb-mobile-sheet{opacity:1}

/* Reset against any page-level bare nav/element rules leaking onto this container. */
.sb-mobile-links{
  display:flex; flex-direction:column;
  position:static; z-index:auto; background:transparent;
  margin:0; padding:0; border:0; box-shadow:none;
}
.sb-mobile-links a{
  font-family:'Zilla Slab',serif; font-weight:600; font-size:1.12rem;
  color:var(--pine,#2E4636); text-decoration:none;
  padding:.95rem .2rem; min-height:44px; display:flex; align-items:center;
  border-bottom:1px solid rgba(46,70,54,.10);
  transition:color .15s, padding-left .15s;
}
.sb-mobile-links a:hover{padding-left:.5rem}
.sb-mobile-links a:focus-visible{outline:2px solid var(--dust,#C56B47); outline-offset:-2px; border-radius:6px}
.sb-mobile-links a[aria-current="page"]{color:var(--dust,#C56B47)}
.sb-mobile-links a[aria-current="page"]::before{
  content:"◆"; color:var(--sun,#E0A53B); font-size:.7em; margin-right:.5em;
}

.sb-mobile-cta{margin-top:1.1rem}
.sb-cta--panel{
  width:100%; justify-content:center;
  font-size:1rem; padding:.85rem 1rem;
}

@media (prefers-reduced-motion: reduce){
  .sb-mobile-scrim, .sb-mobile-sheet{transition:opacity .12s ease}
  .sb-mobile-sheet{transform:none}
  .sb-mobile-panel.is-open .sb-mobile-sheet{transform:none}
  .sb-burger-ic span{transition:none}
}

/* ============================================================
   WAITLIST FORM (email + willingness-to-pay capture)
   Drop-in block used in the homepage #waitlist band and on
   /testflight. Lives on a dark pine ground; all text is paper.
   Namespaced sb-wl-*; palette tokens carry literal fallbacks so
   the form renders even on a page that hasn't defined them.
   ============================================================ */
.sb-wl{
  max-width:480px; margin:2.2rem auto 0; text-align:left;
  background:rgba(244,238,226,.045);
  border:1.5px solid rgba(244,238,226,.20);
  border-radius:16px;
  padding:clamp(1.3rem,4.5vw,2rem);
  position:relative;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(244,238,226,.06);
}
/* a small field-guide stamp ornament, top-right */
.sb-wl::before{
  content:""; position:absolute; top:14px; right:14px; width:18px; height:18px;
  background:
    linear-gradient(var(--sun,#E0A53B),var(--sun,#E0A53B)) center/2px 100% no-repeat,
    linear-gradient(var(--sun,#E0A53B),var(--sun,#E0A53B)) center/100% 2px no-repeat;
  transform:rotate(45deg); opacity:.5; pointer-events:none;
}
.sb-wl-title{
  font-family:'Zilla Slab',serif; font-weight:700; font-size:1.5rem; line-height:1.08;
  color:var(--paper,#F4EEE2); margin:0 0 .4rem;
}
.sb-wl-sub{
  font-family:'Lato',system-ui,sans-serif; font-size:.95rem; line-height:1.45;
  color:rgba(244,238,226,.78); margin:0 0 1.4rem;
}
.sb-wl-field{margin-bottom:1.15rem}
.sb-wl-label{
  display:block; font-family:'Zilla Slab',serif; font-weight:600;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,238,226,.7); margin-bottom:.45rem;
}
.sb-wl-input{
  width:100%; font-family:'Lato',system-ui,sans-serif; font-size:1rem;
  color:var(--paper,#F4EEE2); background:rgba(244,238,226,.07);
  border:1.5px solid rgba(244,238,226,.28); border-radius:9px; padding:.8em .9em;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sb-wl-input::placeholder{color:rgba(244,238,226,.42)}
.sb-wl-input:focus{
  outline:none; border-color:var(--sun,#E0A53B); background:rgba(244,238,226,.1);
  box-shadow:0 0 0 3px rgba(224,165,59,.28);
}
.sb-wl-input.is-invalid{
  border-color:var(--dust,#C56B47); box-shadow:0 0 0 3px rgba(197,107,71,.24);
}
.sb-wl-err{
  display:flex; align-items:center; gap:.4em; margin:.45rem 0 0;
  font-family:'Lato',system-ui,sans-serif; font-size:.84rem; color:#eaa589;
}
/* author display:flex would otherwise defeat the [hidden] attribute's UA display:none */
.sb-wl-err[hidden]{display:none}
.sb-wl-err svg{flex:0 0 auto}

/* willingness-to-pay radio group */
.sb-wl-poll{border:0; padding:0; margin:0 0 1.25rem; min-inline-size:0}
.sb-wl-q{
  font-family:'Zilla Slab',serif; font-weight:600; font-size:.95rem; line-height:1.35;
  color:rgba(244,238,226,.92); padding:0; margin-bottom:.65rem;
}
.sb-wl-opts{display:flex; flex-direction:column; gap:.5rem}
.sb-wl-opt{
  display:flex; align-items:center; gap:.7em; position:relative;
  font-family:'Zilla Slab',serif; font-weight:600; font-size:.92rem;
  color:var(--paper,#F4EEE2); padding:.7em 1em; border-radius:9px;
  border:1.5px solid rgba(244,238,226,.24); background:rgba(244,238,226,.05);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.sb-wl-opt:hover{border-color:var(--sun,#E0A53B); transform:translateY(-1px)}
.sb-wl-opt input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.sb-wl-dot{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:1.5px solid rgba(244,238,226,.5); position:relative;
  transition:border-color .15s ease, background .15s ease;
}
.sb-wl-opt.is-picked{background:var(--sun,#E0A53B); border-color:var(--sun,#E0A53B); color:var(--pine,#2E4636)}
.sb-wl-opt.is-picked .sb-wl-dot{border-color:var(--pine,#2E4636); background:rgba(46,70,54,.0)}
.sb-wl-opt.is-picked .sb-wl-dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--pine,#2E4636);
}
/* keyboard focus ring on the pill (native radio is visually hidden) */
.sb-wl-opt:focus-within{outline:3px solid var(--sun,#E0A53B); outline-offset:3px}

/* honeypot - off-screen, never shown to humans */
.sb-wl-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.sb-wl-submit{width:100%; justify-content:center}
.sb-wl-submit[disabled]{opacity:.72; cursor:default; transform:none; box-shadow:0 3px 0 #b07f24}
.sb-wl-spin{display:none; width:15px; height:15px}
.sb-wl-submit.is-busy .sb-wl-spin{display:inline-block; animation:sb-wl-spin .8s linear infinite}
@keyframes sb-wl-spin{to{transform:rotate(360deg)}}
.sb-wl-formerr{
  margin:.8rem 0 0; font-family:'Lato',system-ui,sans-serif; font-size:.86rem;
  color:#eaa589; text-align:center;
}
.sb-wl-fine{
  margin:.95rem 0 0; font-family:'Zilla Slab',serif; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(244,238,226,.66); text-align:center;
}

/* success / confirm-your-email state */
.sb-wl-done{display:none; text-align:center; padding:.6rem 0 .3rem}
.sb-wl.is-done .sb-wl-head,
.sb-wl.is-done .sb-wl-field,
.sb-wl.is-done .sb-wl-poll,
.sb-wl.is-done .sb-wl-submit,
.sb-wl.is-done .sb-wl-formerr,
.sb-wl.is-done .sb-wl-fine{display:none}
.sb-wl.is-done .sb-wl-done{display:block}
.sb-wl.is-done::before{display:none}
.sb-wl-stamp{
  width:56px; height:56px; margin:0 auto .9rem; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--sun,#E0A53B); border-radius:50%; color:var(--sun,#E0A53B);
  transform:rotate(-4deg);
}
.sb-wl-stamp svg{width:28px; height:28px}
.sb-wl-done-title{
  font-family:'Zilla Slab',serif; font-weight:700; font-size:1.45rem; line-height:1.1;
  color:var(--paper,#F4EEE2); margin:0 0 .5rem;
}
.sb-wl-done-msg{
  font-family:'Lato',system-ui,sans-serif; font-size:.98rem; line-height:1.5;
  color:rgba(244,238,226,.82); margin:0 auto; max-width:34ch;
}
.sb-wl-alt{
  margin:1.3rem 0 0; font-family:'Zilla Slab',serif; font-weight:600; font-size:.85rem;
  letter-spacing:.04em; color:rgba(244,238,226,.7); text-align:center;
}
.sb-wl-alt a{color:var(--sun,#E0A53B); text-decoration:none; border-bottom:1.5px solid rgba(224,165,59,.5); padding-bottom:1px}
.sb-wl-alt a:hover{border-bottom-color:var(--sun,#E0A53B)}

@media (prefers-reduced-motion: reduce){
  .sb-wl-opt:hover{transform:none}
  .sb-wl-submit.is-busy .sb-wl-spin{animation:none}
}