/* Dinged site navigation: a floating glass pill. Markup: header() in tools/build.mjs. Behaviour: js/nav.js.
   Rules that keep it working:
   - The blur sits on .nav-bar::before. No ancestor of .nav-scrim (position:fixed) may carry backdrop-filter,
     filter, transform, perspective, contain or will-change: any of those turns it into the scrim's containing block.
   - Amber is for the one primary action in the page body. Nothing in the nav is amber except the focus ring.
   - Hover styles only for real pointers: (hover:hover) and (pointer:fine).
   Mobile (<900px) uses a compact top pill whose menu opens as a rounded sheet below it, not a bottom tab dock:
   iOS Safari already keeps its own toolbar at the bottom, and a second dock would stack on it and cover content. */

.i-lock{ --i:url(/brand/icons/lock.svg); }
.i-card{ --i:url(/brand/icons/card.svg); }
.i-chat{ --i:url(/brand/icons/chat.svg); }

.nav{
  --nav-h: 52px;          /* pill height */
  --nav-pad: 4px;         /* pill inset around its 44px targets */
  --nav-top: 12px;
  --nav-glass: rgba(23,26,32,.72);   /* #171A20 */
  --nav-rim: rgba(255,255,255,.09);
  --nav-fill: rgba(255,255,255,.115); /* current page */
  --nav-hover: rgba(255,255,255,.05);
  position:sticky; top:0; z-index:50;
  box-sizing:border-box; height:calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)); /* fixed: tucking up shifts nothing */
  padding:calc(var(--nav-top) + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  pointer-events:none; /* the transparent strip around the pill never blocks the page */
  transition:padding-top .2s var(--ease-out);
}
.nav a, .nav summary{ -webkit-tap-highlight-color:transparent; }

/* ---------- the pill ---------- */
.nav-bar{
  position:relative; isolation:isolate; pointer-events:auto;
  display:flex; align-items:center; gap:2px;
  width:fit-content; max-width:100%; height:var(--nav-h); margin-inline:auto; padding:var(--nav-pad);
  border-radius:999px;
}
.nav-bar::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--nav-glass);
  -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px);
  box-shadow:inset 0 0 0 1px var(--nav-rim), 0 1px 2px rgba(0,0,0,.2);
  transition:background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
/* Scrolled over content: tuck up 4px, a touch more opaque, a soft drop so the edge reads over imagery. */
.nav.is-scrolled{ --nav-top: 8px; }
.nav.is-scrolled .nav-bar::before{
  background:rgba(23,26,32,.84);
  -webkit-backdrop-filter:saturate(1.8) blur(28px); backdrop-filter:saturate(1.8) blur(28px);
  box-shadow:inset 0 0 0 1px var(--nav-rim), 0 10px 30px -8px rgba(0,0,0,.6);
}

/* Shared 44px pill target */
.nav-brand, .nav-links a, .nav-cta, .nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  height:44px; border-radius:999px; text-decoration:none; color:var(--ink-2);
  transition:color .15s ease, background-color .15s ease, transform .16s var(--ease-out);
}
.nav-brand:active, .nav-links a:active, .nav-cta:active, .nav-toggle:active{ transform:scale(.96); }
.nav :focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:999px; }

.nav-brand{ padding:0 16px 0 14px; margin-right:6px; }
.nav-brand img{ width:68px; height:auto; }

/* ---------- desktop links ---------- */
.nav-links ul{ display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a{
  position:relative; isolation:isolate; gap:7px; padding:0 14px 0 12px;
  font:500 .875rem/1 var(--font); letter-spacing:-.008em; white-space:nowrap;
}
.nav-links .i{ width:17px; height:17px; vertical-align:0; color:var(--ink-3); transition:color .15s ease; }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"] .i{ color:var(--ink); }
/* Current-page indicator: its own element so the browser can carry it from page to page (view transition below). */
.nav-ind{
  position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--nav-fill); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  view-transition-name:nav-ind;
}

/* ---------- "Sample record": glass secondary, never a second amber button ---------- */
.nav-cta{
  gap:8px; margin-left:8px; padding:0 18px 0 15px;
  font:600 .875rem/1 var(--font); letter-spacing:-.01em; white-space:nowrap; color:var(--ink);
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.nav-cta .i{ width:17px; height:17px; vertical-align:0; }

@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{ color:var(--ink); background:var(--nav-hover); }
  .nav-links a:hover .i{ color:var(--ink-2); }
  .nav-links a[aria-current="page"]:hover{ background:none; }
  .nav-links a[aria-current="page"]:hover .i{ color:var(--ink); }
  .nav-cta:hover{ background:rgba(255,255,255,.13); }
  .nav-brand:hover{ background:var(--nav-hover); }
  .nav-toggle:hover{ background:rgba(255,255,255,.1); }
}

/* Mid widths (tablet landscape, small laptops): same pill, tighter. */
@media (max-width: 1199.98px){
  .nav-brand{ padding:0 12px 0 12px; margin-right:2px; }
  .nav-links a{ gap:6px; padding:0 11px 0 10px; font-size:.84375rem; }
  .nav-links .i{ width:16px; height:16px; }
  .nav-cta{ margin-left:4px; padding:0 15px 0 13px; }
}
@media (max-width: 1023.98px){
  .nav-cta .i{ display:none; }
  .nav-cta{ padding:0 16px; }
}

/* ---------- mobile menu (a <details>; works without JS) ---------- */
.nav-menu{ display:none; }
.nav-toggle{ width:44px; padding:0; cursor:pointer; list-style:none; background:rgba(255,255,255,.06); color:var(--ink); }
.nav-toggle::-webkit-details-marker{ display:none; }
.nav-bars, .nav-bars::before{
  display:block; width:16px; height:1.75px; border-radius:1px; background:currentColor;
  transition:transform .22s var(--ease-out);
}
.nav-bars{ position:relative; transform:translateY(-3px); }
.nav-bars::before{ content:""; position:absolute; left:0; top:6px; }
.nav-menu[open] .nav-bars{ transform:translateY(0) rotate(45deg); }
.nav-menu[open] .nav-bars::before{ transform:translateY(-6px) rotate(-90deg); }

.nav-scrim{
  position:fixed; inset:0; z-index:-2; /* under the pill, over the page */
  background:rgba(6,7,9,.6);
}
.nav-sheet{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  max-height:calc(100vh - var(--nav-h) - var(--nav-top) - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height:calc(100dvh - var(--nav-h) - var(--nav-top) - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:8px; border-radius:28px;
  background:rgba(23,26,32,.9);
  -webkit-backdrop-filter:saturate(1.6) blur(24px); backdrop-filter:saturate(1.6) blur(24px);
  box-shadow:inset 0 0 0 1px var(--nav-rim), 0 24px 60px -12px rgba(0,0,0,.7);
  transform-origin:calc(100% - 26px) -8px;
}
.nav-sheet ul{ display:grid; gap:2px; list-style:none; }
.nav-sheet li a{
  display:flex; align-items:center; gap:14px; min-height:52px; padding:0 16px; border-radius:20px;
  font:600 1.0625rem/1.2 var(--font); letter-spacing:-.018em; color:var(--ink); text-decoration:none;
  transition:background-color .15s ease;
}
.nav-sheet li .i{ width:20px; height:20px; vertical-align:0; color:var(--ink-3); }
.nav-sheet li a:active{ background:var(--nav-hover); }
.nav-sheet li a[aria-current="page"]{ background:var(--nav-fill); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.nav-sheet li a[aria-current="page"] .i{ color:var(--ink); }
.nav-sheet-cta{
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; margin-top:8px; border-radius:999px;
  font:600 1.0625rem/1 var(--font); letter-spacing:-.015em; color:var(--ink); text-decoration:none;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background-color .15s ease, transform .16s var(--ease-out);
}
.nav-sheet-cta .i{ width:20px; height:20px; vertical-align:0; }
.nav-sheet-cta:active{ transform:scale(.98); background:rgba(255,255,255,.12); }
.nav-sheet :focus-visible{ outline-offset:-2px; border-radius:20px; }
.nav-sheet .nav-sheet-cta:focus-visible{ border-radius:999px; }

@media (max-width: 899.98px){
  .nav{ padding-inline:max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); }
  .nav-bar{ width:100%; max-width:560px; }
  .nav-links{ display:none; }
  .nav-menu{ display:block; }
  .nav-brand{ margin-right:auto; padding:0 14px; }
  .nav-brand img{ width:72px; }
  .nav-cta{ margin:0 4px 0 0; padding:0 16px; font-size:.875rem; }
  .nav-cta .i{ display:none; }
  /* The page doesn't scroll under an open sheet (with or without JS). The gutter is kept so nothing shifts. */
  html:has(.nav-menu[open]){ overflow:hidden; scrollbar-gutter:stable; }
}
@media (max-width: 359.98px){
  .nav-cta{ display:none; }
}

@media (prefers-reduced-motion: no-preference){
  .nav-menu[open] .nav-sheet{ animation:nav-sheet-in .22s var(--ease-out); }
  .nav-menu[open] .nav-scrim{ animation:nav-fade-in .22s var(--ease-out); }
  .nav-menu.is-closing .nav-sheet{ animation:nav-sheet-out .16s ease-in forwards; }
  .nav-menu.is-closing .nav-scrim{ animation:nav-fade-out .16s ease-in forwards; }

  /* Page to page, the current-page indicator glides from the old item to the new one (cross-document
     view transition, Chrome 126+ / Safari 18.2+). Everything else swaps instantly, exactly as without it.
     Browsers without support simply show the indicator in place. */
  @view-transition{ navigation:auto; }
}
@keyframes nav-sheet-in{ from{ opacity:0; transform:translateY(-6px) scale(.97); } }
@keyframes nav-sheet-out{ to{ opacity:0; transform:translateY(-4px) scale(.98); } }
@keyframes nav-fade-in{ from{ opacity:0; } }
@keyframes nav-fade-out{ to{ opacity:0; } }

::view-transition-old(root){ animation:none; opacity:0; }
::view-transition-new(root){ animation:none; }
::view-transition-group(nav-ind){ animation-duration:.26s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(nav-ind), ::view-transition-new(nav-ind){ animation-duration:.26s; height:100%; }

@media print{
  .nav{ position:static; }
  .nav-menu, .nav-cta{ display:none; }
}