/* ============================================================================
   jp-nf-menu.css — the Night Flight mobile menu — v1.7.23
   ----------------------------------------------------------------------------
   One menu, every mobile page: information architecture aligned 1:1 with the
   desktop nav (For Patients · For Clinics & Employers · Free Quote), wearing
   the Night Flight identity — navy night sheet, starfield, the route line
   running down the items like waypoints, stamp group labels, and a
   boarding-pass CTA at the bottom.

   jp-nf-menu.js renders the sheet and takes over the existing #nav-hamburger
   trigger (jpToggleMenu). The legacy drawer stays in the DOM, unused.
   ========================================================================== */

#nf-menu-scrim { position: fixed; inset: 0; z-index: 11000; background: rgba(2, 8, 22, .6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .24s ease; }
#nf-menu-scrim.on { opacity: 1; pointer-events: auto; }

#nf-menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 11001;
  width: min(360px, 88vw); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #04102A 0%, #071F4E 55%, #0A2D6E 100%);
  box-shadow: -24px 0 80px rgba(0, 0, 0, .6);
  transform: translateX(104%); transition: transform .28s cubic-bezier(.32, .9, .35, 1);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding-top: env(safe-area-inset-top, 0px); }
#nf-menu.on { transform: translateX(0); }
#nf-menu::before {                        /* starfield */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 8%,  rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 14%,     rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 28%,     rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 44%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 62%,     rgba(255,255,255,.25) 50%, transparent 51%); }

/* header */
#nf-menu .hd { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); position: relative; }
#nf-menu .hd img { height: 26px; filter: brightness(0) invert(1); }
#nf-menu .hd .word { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
#nf-menu .hd .x { margin-left: auto; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: #fff; font-size: 17px; cursor: pointer; font-family: inherit; }

/* scrollable body with the route line */
#nf-menu .bd { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px 16px 14px; position: relative; }
#nf-menu .bd::before { content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px;
  width: 2px; background: linear-gradient(180deg, rgba(0,201,192,.55), rgba(0,201,192,.12));
  box-shadow: 0 0 10px rgba(0, 201, 192, .35); }

/* group labels — v1.7.34: straightened and quieter (the stamps live on the
   marketing pages; in a menu they read as clutter) */
#nf-menu .grp { display: block; margin: 20px 0 10px 26px; font-size: 11px;
  font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(127, 231, 226, .85); }
#nf-menu .grp:first-child { margin-top: 4px; }

/* waypoint items — v1.7.34: visible card affordance (obviously tappable),
   title and subtitle stacked on their own lines, chevron as a clear cue */
#nf-menu .it { position: relative; display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px 14px; padding: 12px 14px 12px 22px; min-height: 58px;
  border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background .15s, border-color .15s, transform .1s; }
#nf-menu .it:active { background: rgba(255, 255, 255, .10);
  border-color: rgba(0, 201, 192, .4); transform: scale(.985); }
#nf-menu .it::before {                    /* the waypoint dot on the route */
  content: ""; position: absolute; left: -11.5px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: #04102A;
  border: 2px solid #00C9C0; box-shadow: 0 0 8px rgba(0, 201, 192, .55); }
#nf-menu .it .tx { flex: 1; min-width: 0; }
#nf-menu .it .t { display: block; font-size: 15px; font-weight: 800; color: #fff;
  line-height: 1.25; }
#nf-menu .it .s { display: block; font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, .55); margin-top: 3px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nf-menu .it .ch { color: rgba(127, 231, 226, .9); font-size: 17px; font-weight: 700;
  flex-shrink: 0; line-height: 1; }
#nf-menu .it.now { background: rgba(0, 201, 192, .12);
  border-color: rgba(0, 201, 192, .45); }
#nf-menu .it.now .t { color: #7FE7E2; }

/* boarding-pass CTA footer */
#nf-menu .ft { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 2px dashed rgba(255, 255, 255, .18); position: relative; }
#nf-menu .ft::before, #nf-menu .ft::after { content: ""; position: absolute; top: -9px;
  width: 18px; height: 18px; border-radius: 50%; background: #04102A; }
#nf-menu .ft::before { left: -10px; } #nf-menu .ft::after { right: -10px; }
#nf-menu .ft .fare { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 8px; }
#nf-menu .ft .fare .k { font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.42); }
#nf-menu .ft .fare .k:nth-child(2) { text-align: center; }
#nf-menu .ft .fare .k:last-child { text-align: right; }
#nf-menu .ft .fare .k b { display: block; font-size: 12px; color: #7FE7E2;
  letter-spacing: .03em; margin-top: 2px; }
#nf-menu .ft .go { display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, #00C9C0, #00A89F); color: #04102A;
  -webkit-text-fill-color: #04102A;
  font-size: 15px; font-weight: 800; box-shadow: 0 10px 30px rgba(0, 201, 192, .35); }
#nf-menu .ft .go:active { transform: scale(.985); }
/* v1.7.34 — secondary action reads as a button, not stray text */
#nf-menu .ft .alt { display: flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 8px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .8);
  -webkit-text-fill-color: rgba(255, 255, 255, .8); text-decoration: none; }
#nf-menu .ft .alt:active { background: rgba(255, 255, 255, .07); }

/* ── v1.7.24 — the top nav bar joins the night: dark, centered white logo ── */
/* v1.7.30 — the dark top bar moved to jp-night-flight.css (the core sheet),
   so its coverage equals nf-night coverage. This file owns the SHEET only. */
body.nf-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
  #nf-menu { transition: none; } #nf-menu-scrim { transition: none; }
}

/* ── v1.7.32 — the legacy light drawer is structurally dead on night pages.
   Even if a stale binding or cached script opens it, it cannot render:
   there is exactly ONE menu in the Night Flight experience. */
body.nf-night #mobileMenu, body.nf-night #mobileMenu.open {
  display: none !important; }

/* v1.7.33 — belt for the gate in jp-mobile-shell.js: even a stale cached
   shell script cannot paint its header or drawer over a night page. */
body.nf-night .jp-m-appbar, body.nf-night .jp-m-drawer,
body.nf-night .jp-m-overlay,
body.nf-passport .jp-m-appbar, body.nf-passport .jp-m-drawer,
body.nf-passport .jp-m-overlay { display: none !important; }

/* v1.7.50 — floating trigger for app-shell pages without a #nav bar */
#nav-hamburger.nf-fab{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:14px;z-index:9400;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(6,20,52,.72);border:1px solid rgba(255,255,255,.22);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;padding:0}
#nav-hamburger.nf-fab svg{stroke:#fff}
body.nf-menu-open #nav-hamburger.nf-fab{opacity:0;pointer-events:none}