/* ═════════════════════════════════════════════════════════════════════════
   shared-nav.css - canonical .nav* block for the top navigation.

   This block used to be copy-pasted across 4 stylesheets:
     - src/tour/tour.css
     - src/info-weetjes/info-weetjes.css
     - src/image-review/image-review.css
     - src/quiz-image-review/quiz-image-review.css
   Daily audit C1 2026-05-29 found ~80 lines of duplicate .nav* rules.
   Hoisted here so every page renders the same navy bar / easter-egg
   panel / live link without drift. The tour.css copy (the most complete
   one, with .nav-back, .hero-version chip, .nav-link.nav-live pulsing
   dot + reduced-motion guard) is the canonical source - merged here.

   Load order on every page: shared-overlays.css FIRST, then this file,
   then the page-specific stylesheet. The page-specific sheet may still
   add page-namespaced classes on top of .nav-inner (e.g. .iw-nav-title,
   .ir-nav-title) - those stay in the page-specific sheet.

   Depends on these CSS variables (declared in page-specific :root):
     --navy --accent --nav-h --font
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Nav ── */
/* PWA standalone mode on iOS overlays the system status bar (time, wifi, battery)
   on top of the page when status-bar-style is black-translucent. Push the nav
   content down by safe-area-inset-top so logo + buttons don't collide with the
   status icons; the navy background extends up through the safe area for a
   clean unified look. */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--navy);
  height:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.nav-inner{display:flex;align-items:center;height:var(--nav-h);
  padding:0 calc(40px + env(safe-area-inset-right, 0px)) 0 calc(40px + env(safe-area-inset-left, 0px));
  max-width:1280px;margin:0 auto;gap:1.5rem;
  /* Anchor for the nav-easter dropdown so it opens directly under the
     Backbase logo regardless of viewport width. Without this the dropdown
     stays at viewport left edge (40 px) which on wide screens floats
     hundreds of pixels left of the centred logo. */
  position:relative}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-weight:600;letter-spacing:0.06em;font-size:0.95rem;cursor:pointer;transition:opacity 0.15s}
.nav-logo:hover{opacity:0.85}
.nav-logo[aria-expanded="true"] .mark{box-shadow:0 0 0 2px rgba(105,254,255,0.45)}

/* Easter-egg dropdown: tap nav-logo to reveal dev toggles (Sim + Debug)
   on desktop, or just the Version chip on mobile + PWA. The Debug row
   itself is hidden on mobile + PWA via the @media blocks lower down -
   captain wizard 1 wants the Version chip to stay reachable everywhere
   so the Build / SHA is one tap away during a real trip, but passengers
   can't enable live-state console exposure by accident. ?debug=1 URL
   flag still works to override the row gate. */
.nav-easter{
  /* Anchored to .nav-inner (position:relative) so the panel follows the
     logo when the nav is centred on wide viewports. */
  position:absolute;
  top:calc(100% + 4px);
  left:calc(40px + env(safe-area-inset-left, 0px));
  z-index:1500;
  width:260px;padding:12px 14px;
  background:rgba(9,28,53,0.97);color:#fff;
  border:1px solid #69FEFF;border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
  font-size:0.8rem;font-family:var(--font);
}
.nav-easter-head{
  font-size:0.625rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:#69FEFF;margin-bottom:8px;
}
.nav-easter-row{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  column-gap:8px;padding:8px 0;cursor:pointer;
  border-top:1px solid rgba(255,255,255,0.08);
}
.nav-easter-row:first-of-type{border-top:none}
.nav-easter-version{align-items:start;cursor:default;grid-template-rows:auto}
.nav-easter-version .version-badge{margin-left:0;padding:2px 6px;border-left:none;
  color:#69FEFF;font-weight:600;display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;text-align:right}
.nav-easter-version .version-badge-v{font-weight:700;font-size:0.75rem;white-space:nowrap}
.nav-easter-version .version-badge-d{font-weight:400;font-size:0.65rem;
  color:rgba(255,255,255,0.55);white-space:nowrap}
.nav-easter-label{font-weight:600;color:#fff}
.nav-easter-hint{
  grid-column:1;font-size:0.7rem;color:rgba(255,255,255,0.55);margin-top:1px;
}
.nav-easter-toggle{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  width:18px;height:18px;accent-color:#69FEFF;cursor:pointer;
}
.nav-easter-link{
  display:block;padding:10px 0 6px;margin-top:6px;
  border-top:1px solid rgba(255,255,255,0.08);
  text-decoration:none;color:#fff;
}
.nav-easter-link:hover{background:rgba(255,255,255,0.04)}
.nav-easter-link .nav-easter-label{color:#69FEFF;display:block;margin-bottom:1px}
.nav-easter-link .nav-easter-hint{display:block}
@media(max-width:640px){
  .nav-inner{padding:0 calc(16px + env(safe-area-inset-right,0px)) 0 calc(16px + env(safe-area-inset-left,0px));gap:0.75rem}
  .nav-easter{left:calc(12px + env(safe-area-inset-left, 0px));width:240px}
  /* Hide the Debug toggle row on mobile - captain feedback wizard 1: passengers
     shouldn't be able to enable the live-state console exposure by tapping the
     logo. Easter egg + Version chip stay visible; the dev toggle is desktop-only. */
  .nav-easter > label.nav-easter-row{display:none}
}
/* Same Debug-row hide for PWA standalone mode regardless of screen width -
   an iPad in landscape standalone is still 'passenger device' territory.
   The whole panel previously had display:none here; that hid the Version
   chip too, which the captain wants kept. */
@media (display-mode: standalone) {
  .nav-easter > label.nav-easter-row{display:none}
}
.nav-logo .mark{width:24px;height:24px;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;font-size:0.7rem;letter-spacing:0.04em}
.nav-logo .word{color:#fff}
.nav-logo .word b{font-weight:600}
.nav-logo svg{height:30px;width:auto;color:#fff;display:block}
.nav-breadcrumb{font-size:0.8125rem;color:rgba(255,255,255,0.5);font-weight:300;white-space:nowrap}
.nav-breadcrumb span{color:rgba(255,255,255,0.85)}
.nav-spacer{flex:1}
/* Back-arrow icon for minimal-nav pages (status.html). Matches the
   live-tour back arrow visual (36 px circle, white-translucent bg).
   margin-right gives the wordmark next to it real breathing room rather
   than relying on the nav-inner gap alone. */
.nav-back{
  color:#fff;font-size:20px;line-height:1;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;flex-shrink:0;margin-right:8px;
  transition:background 0.15s ease, transform 0.15s ease;
}
.nav-back:hover{background:rgba(255,255,255,0.14)}
.nav-back:active{transform:scale(0.94)}
/* Hero variant: chip lives in the hero below the h1 (status.html).
   Rendered as a plain <span> (not a link) - the user is already on
   status.html, so version-badge.js drops the anchor wrapper here. */
.hero-version{display:inline-block;margin-bottom:1rem}
.hero-version .version-badge{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(255,255,255,0.62);font-size:0.78rem;font-weight:400;
  letter-spacing:0.02em;text-decoration:none;cursor:default;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
}
.hero-version .version-badge-v{font-weight:600;color:rgba(255,255,255,0.9);font-size:0.78rem}
.hero-version .version-badge-d{font-size:0.72rem;color:rgba(255,255,255,0.55)}
.nav-link{font-size:0.8125rem;color:rgba(255,255,255,0.78);font-weight:500;letter-spacing:0.03em;white-space:nowrap;padding:0 0.5rem}
.nav-link:hover{color:#fff}
.nav-link[hidden]{display:none}
/* Live tour visual link: pin icon + pulsing red dot + label. The dot pulses
   via box-shadow expansion to read as a recording / "live" indicator
   without needing a separate animation layer. */
.nav-link.nav-live{display:inline-flex;align-items:center;justify-content:center;
  gap:7px;color:#69FEFF;font-weight:600;
  width:36px;height:36px;border-radius:50%;
  background:rgba(105,254,255,0.06);
  border:1px solid rgba(105,254,255,0.18);
  transition:background 0.18s ease,border-color 0.18s ease,
             transform 0.18s ease,box-shadow 0.18s ease;
  padding:0}
.nav-link.nav-live:hover{
  color:#fff;
  background:rgba(105,254,255,0.18);
  border-color:rgba(105,254,255,0.6);
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(105,254,255,0.1), 0 4px 12px rgba(105,254,255,0.18);
}
.nav-link.nav-live:active{transform:translateY(0)}
.nav-link.nav-live img,
.nav-link.nav-live svg{flex-shrink:0;transition:transform 0.18s ease}
.nav-link.nav-live:hover img,
.nav-link.nav-live:hover svg{transform:scale(1.08)}
.nav-link.nav-live .live-dot{
  width:7px;height:7px;border-radius:50%;background:#FF503C;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,80,60,0.7);animation:nav-live-pulse 1.6s ease-out infinite;
}
@keyframes nav-live-pulse{
  0%   {box-shadow:0 0 0 0 rgba(255,80,60,0.7)}
  70%  {box-shadow:0 0 0 8px rgba(255,80,60,0)}
  100% {box-shadow:0 0 0 0 rgba(255,80,60,0)}
}
@media (prefers-reduced-motion:reduce){
  .nav-link.nav-live .live-dot{animation:none}
  .nav-link.nav-live,
  .nav-link.nav-live img,
  .nav-link.nav-live svg{transition:none}
  .nav-link.nav-live:hover{transform:none}
  .nav-link.nav-live:hover img,
  .nav-link.nav-live:hover svg{transform:none}
}