/* TrustPay site: the header pill (v6, 3 Oct 2026: Forest & Mint, the client logo).
   The pill: compact (50 px, 48 on phones), floating 20 px down (16 on phones), translucent glass (semi-transparent
   fill + backdrop blur), no shadow, no border, no glow. Its fill follows the ground under it (look.js):
     any light section            near-white glass, forest ink
     green card (CTA)             data-ground="brand": a whiter glass
     the dark zone                data-ground="dark": a forest glass, light ink, dark-ground logo
   Dark theme (only when picked): forest glass, light ink. */

.nav { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; will-change: transform; }
/* v7 ONE LOOK: two glasses only, never a mid tone. look.js sets data-ground="dark" while the pill is over the dark zone
   (hero, problem, story, the top of the band under the story, the waitlist's head): a solid forest glass, light ink.
   Elsewhere a solid near-white glass, forest ink. Both are firm enough (.86 / .82) that the links keep 4.5:1 over
   whatever scrolls beneath. */
.nav-bar {
  --glass: rgb(236 242 238 / .86);  /* a tone off the page white, so the bar reads as one shape on white too */
  --glass-ink: #0F201B;
  --glass-ink-2: #2B3D37;
  --glass-hover: rgb(15 32 27 / .06);
  pointer-events: auto; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: .75rem;
  /* r14 (client: like Taskly): a wide floating glass bar, 58 px, 18 px corners, 26 px down; it pulls in and up on scroll */
  width: min(820px, 100% - 3rem); height: 56px; margin: 20px auto 0; padding: 0 9px 0 22px; border-radius: 17px;   /* r18c: the button sits 9 px from the top, bottom and right */
  background: var(--glass); color: var(--glass-ink);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  transition: background-color .3s var(--ease), color .3s var(--ease), width .45s cubic-bezier(.25, 1, .5, 1), padding .45s cubic-bezier(.25, 1, .5, 1), transform .45s cubic-bezier(.25, 1, .5, 1);
}
.nav.is-compact .nav-bar { width: min(720px, 100% - 3rem); }
/* r18 (client): over the hero's green first screen no bar at all, only the items; the white bar fades in past it */
.nav.is-bare:not(.is-open) .nav-bar { --glass: rgb(255 255 255 / 0); -webkit-backdrop-filter: none; backdrop-filter: none;
  width: min(var(--max), 100% - 2 * var(--gut)); padding-inline: 0; --glass-ink-2: #0F201B; }   /* r18b (client): as wide as the hero text; it narrows into the bar on scroll */
/* r18 (client: "make the logo black where the ground doesn't suit"): the gradient shield fades to white at its foot,
   so on every light ground the header logo is solid forest-black; the dark zone keeps the dark-ground file */
.nav-bar .logo-l { filter: brightness(0); }
.brand { position: relative; justify-self: start; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.nav-bar .brand .logo { height: 21px; }
.nav-bar .logo-l { transition: opacity var(--t2) var(--ease); }
.nav-bar .logo-d { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity var(--t2) var(--ease); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 9px; color: var(--glass-ink-2); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease); }
.nav-links a:hover { background: var(--glass-hover); color: var(--glass-ink); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 2px; }
.nav-end .btn-sm { height: 38px; padding: 0 16px; font-size: 14px; font-weight: 550; border-radius: 10px; }
/* light glass: an ink button (Taskly's light state); the dark glass flips it to white */
.nav-end .btn-brand { background: #0F201B; color: #FFFFFF; }
.nav-end .btn-brand:hover { background: #24433A; }
.nav-menu { display: none; }
.nav-sheet {
  pointer-events: auto; width: calc(100% - 32px); margin: 8px auto 0; padding: 10px 20px 18px; border-radius: 16px;
  background: var(--ground-2);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: 50% 0;
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), visibility 0s linear var(--t2);
}
.nav.is-open .nav-sheet { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-sheet a { display: flex; align-items: center; min-height: 56px; font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
@media (min-width: 1024px) { .nav-sheet { display: none; } }
@media (max-width: 1023px) {
  :root { --nav-h: 66px; --pill-b: 70px; }
  .nav-bar, .nav.is-compact .nav-bar { grid-template-columns: 1fr auto; width: calc(100% - 26px); height: 54px; margin-top: 12px; padding: 0 8px 0 18px; border-radius: 16px; }
  .nav-bar { z-index: 2; }
  .nav.is-open { bottom: 0; }   /* .nav's will-change makes it the sheet's frame: let it cover the screen while open */
  /* the open menu (Taskly): a full-height sheet 13 px in from the screen edges, behind the bar */
  .nav-sheet { position: fixed; z-index: 1; inset: calc(env(safe-area-inset-top, 0px) + 13px) 13px 13px; width: auto; margin: 0; padding: 82px 22px 24px; border-radius: 22px; overflow-y: auto; }
  .nav-sheet a { opacity: 0; transform: translateY(20px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
  .nav.is-open .nav-sheet a { opacity: 1; transform: none; }
  .nav.is-open .nav-sheet a:nth-child(2) { transition-delay: .04s; } .nav.is-open .nav-sheet a:nth-child(3) { transition-delay: .08s; }
  .nav.is-open .nav-sheet a:nth-child(4) { transition-delay: .12s; } .nav.is-open .nav-sheet a:nth-child(5) { transition-delay: .16s; } .nav.is-open .nav-sheet a:nth-child(6) { transition-delay: .2s; }
  .nav-links { display: none; }
  .nav-menu {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; color: inherit;
  }
  .nav-menu:hover { background: var(--glass-hover); }
  .nav-menu i { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t2) var(--ease); }
  .nav.is-open .nav-menu i:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.is-open .nav-menu i:last-child { transform: translateY(-4px) rotate(-45deg); }
  /* the open menu: the pill turns solid so the sheet under it reads as one piece */
  .nav.is-open .nav-bar, .nav.is-open[data-ground] .nav-bar { --glass: var(--ground-2); --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-hover: rgb(15 32 27 / .06); }
}
@media (max-width: 480px) {
  .nav-end .btn-sm { height: 38px; padding: 0 14px; }
}

/* over the dark zone: a forest glass, light ink; the logo swaps to its dark-ground file */
.nav[data-ground="dark"] .nav-bar { --glass: rgb(18 38 32 / .82); --glass-ink: #F2F7F4; --glass-ink-2: #D3DED9; --glass-hover: rgb(255 255 255 / .1); }
.nav[data-ground="dark"] .nav-bar .logo-l { opacity: 0; }
.nav[data-ground="dark"] .nav-bar .logo-d { opacity: 1; }
.nav.is-open .nav-bar .logo-l { opacity: 1; }
.nav.is-open .nav-bar .logo-d { opacity: 0; }
/* r16 (client: "make it light colour, white"): over the green grounds (the hero, the mint panels, the waitlist) the bar
   is a white glass, forest ink, the light-ground logo and the forest "Open app"; over the dark zone a forest glass */
.nav[data-ground="banner"] .nav-bar { --glass: rgb(255 255 255 / .94); --glass-ink: #0F201B; --glass-ink-2: #2E433C; --glass-hover: rgb(15 32 27 / .06); }
.nav[data-ground="dark"] .nav-end .btn-brand { background: #FFFFFF; color: #0F201B; }
.nav[data-ground="dark"] .nav-end .btn-brand:hover { background: #E3ECE7; }
.nav.is-open .nav-end .btn-brand { background: #0F201B; color: #FFFFFF; }
/* over the green card: a whiter glass */
.nav[data-ground="brand"] .nav-bar { --glass: rgb(255 255 255 / .8); }

:root[data-theme="dark"] .nav-bar { --glass: rgb(22 43 37 / .64); --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-hover: rgb(255 255 255 / .08); }
:root[data-theme="dark"] .nav[data-ground="dark"] .nav-bar { --glass: rgb(255 255 255 / .08); }
@media (max-width: 1023px) { :root[data-theme="dark"] .nav.is-open .nav-bar { --glass: var(--ground-2); } }

/* browsers without backdrop-filter: a firmer fill so the words stay readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav-bar { --glass: rgb(251 252 251 / .96); }
  .nav[data-ground="brand"] .nav-bar, .nav[data-ground="banner"] .nav-bar { --glass: rgb(255 255 255 / .94); }
  .nav[data-ground="dark"] .nav-bar { --glass: rgb(27 52 44 / .96); }
  :root[data-theme="dark"] .nav-bar { --glass: rgb(22 43 37 / .95); }
}

/* the open menu always uses the light sheet: light logo, ink text */
.nav.is-open .nav-bar .logo-l { opacity: 1 !important; }
.nav.is-open .nav-bar .logo-d { opacity: 0 !important; }