/* Liquid glass: the navigation pill (water engine in liquidnav.js), the glass chips (logo, menu button), the phone
   sheet and the call to action buttons. Loaded by the shell after beats.css. Tokens only: kobalt is the one accent,
   papier and inkt do the rest. No ring, no glow copy and no blurred layer around any button: a blurred copy of an
   element shows as a square on iOS (KIT.md). The glass tints are tokens from theme.css, so the dark theme restyles the pills,
   chips and the sheet; the cobalt and frosted buttons keep a fixed white text (--paper-fixed). */

.nimbus-nav, .glass-chip {
  --n-tint: var(--glass-tint); --n-fg: var(--inkt); --n-fg-soft: var(--grafiet); --n-rim: var(--glass-rim);
  --n-glass: blur(10px) saturate(1.2) brightness(1.08);
  --n-edge: inset 0 1px 1px var(--n-rim), inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -1px 1px rgba(28,28,30,.05), 0 12px 32px -14px rgba(59,91,219,.38), 0 2px 6px rgba(28,28,30,.08);
}
.nimbus-nav[data-tone="dark"], .glass-chip[data-tone="dark"] { --n-tint: rgba(28,28,30,.55); --n-fg: var(--paper-fixed); --n-fg-soft: rgba(255,255,255,.66); --n-rim: rgba(255,255,255,.34); }
/* over a dark surface the labels go ink, the tint stays light (site.js sets .over-ink on the header) */
.site-header.over-ink .nimbus-nav[data-tone="light"] { --n-fg-soft: var(--n-fg); }
/* in the dark theme the labels are light already: .over-ink keeps the dark tone values */
html[data-theme="dark"] .site-header.over-ink .nimbus-nav { --n-fg: var(--paper-fixed); --n-fg-soft: rgba(255,255,255,.66); }

/* The pill. The glass is a layer behind the items; the water canvas and the fallback drop sit between. */
.nimbus-nav { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; isolation: isolate; font: 500 15px/1 var(--font-sans); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.nimbus-glass { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; pointer-events: none; background: var(--n-tint); -webkit-backdrop-filter: var(--n-glass); backdrop-filter: var(--n-glass); box-shadow: var(--n-edge); }
/* before liquidnav.js has run (or when it cannot), the pill carries the glass itself; the engine sets data-gl */
.nimbus-nav:not([data-gl]) { background: var(--n-tint); -webkit-backdrop-filter: var(--n-glass); backdrop-filter: var(--n-glass); box-shadow: var(--n-edge); }
.nimbus-water { position: absolute; left: -14px; top: -14px; z-index: -1; pointer-events: none; }
.nimbus-nav[data-gl="off"] .nimbus-water { display: none; }
.nimbus-drop { display: none; position: absolute; left: 0; top: 6px; width: 12px; height: 42px; border-radius: 999px; z-index: -1; pointer-events: none; will-change: transform, width;
  background: radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%), rgba(255,255,255,.38);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 6px rgba(59,91,219,.28), inset 0 0 0 1px rgba(59,91,219,.12), 0 6px 16px -6px rgba(59,91,219,.45);
  transition: transform .55s cubic-bezier(.3,1.35,.5,1), width .55s cubic-bezier(.3,1.35,.5,1), height .3s ease, top .3s ease; }
.nimbus-nav[data-gl="off"] .nimbus-drop { display: block; }

.nimbus-item { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--n-fg-soft); font: inherit; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .25s; -webkit-tap-highlight-color: transparent; }
.nimbus-item:hover, .nimbus-item[aria-current="page"], .nimbus-item[aria-pressed="true"] { color: var(--n-fg); text-decoration: none; }
.nimbus-item:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; }
.nv-ico { position: relative; display: inline-flex; flex: none; }
.nv-ico svg { display: block; width: 16px; height: 16px; }

/* Glass chips: the logo capsule and the round menu button. Same recipe as the pill, smaller. */
.glass-chip { background: var(--n-tint); -webkit-backdrop-filter: var(--n-glass); backdrop-filter: var(--n-glass); box-shadow: var(--n-edge); border-radius: 999px; padding: 8px 12px; -webkit-tap-highlight-color: transparent; }
.glass-chip--round { width: 44px; height: 44px; padding: 0; }
.glass-chip:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; }

/* Glass panel: the phone menu sheet. More tint than the pill, because text sits straight on it. */
.glass-panel { background: var(--glass-panel-tint); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: inset 0 1px 1px var(--glass-rim), 0 24px 48px -24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.08); }

/* Buttons. Primary and the floating button are cobalt glass: a top rim gradient over kobalt, a white rim line,
   an inner shade and one soft shadow below. Hover lifts, active presses. No ring, no glow copy. */
.btn { border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.btn-primary, .fab { color: var(--paper-fixed); background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%), var(--kobalt); border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.18), 0 12px 28px -12px rgba(59,91,219,.65);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.btn-primary:hover, .fab:hover { color: var(--paper-fixed); background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%), var(--kobalt); border-color: rgba(255,255,255,.6); transform: translateY(-1px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -2px 6px rgba(0,0,0,.18), 0 14px 30px -12px rgba(59,91,219,.72); }
.btn-primary:active, .fab:active { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%), var(--kobalt-active); transform: translateY(1px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 3px 8px rgba(0,0,0,.3), 0 6px 14px -8px rgba(59,91,219,.6); }
.btn-primary:focus-visible, .fab:focus-visible { outline: 3px solid var(--kobalt-ring); outline-offset: 3px; }
.fab-ic { box-shadow: inset 0 1px 1px rgba(255,255,255,.45); }

/* Closing bands (spec 11): a bigger button with a light sweep (a pseudo element; off under reduced motion) and one line under it. */
.cta-band .btn-primary, .cta-band .btn-secondary { min-height: 62px; padding: 0 36px; font-size: 1.15rem; }
.btn-primary, .fab, .cta-band .btn-secondary { position: relative; overflow: hidden; }
.btn-primary::after, .fab::after, .cta-band .btn-secondary::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 36%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-18deg); animation: sheen 6s ease-in-out infinite; pointer-events: none; }
.beats-static .btn-primary::after, .beats-static .fab::after, .beats-static .cta-band .btn-secondary::after { animation: none; display: none; }   /* the static page runs no animation */
@keyframes sheen { 0%, 72% { left: -70%; } 100% { left: 140%; } }

/* Secondary: a paper pill with the lijn border; on an ink surface (the closing curtain) frosted white glass. */
.btn-secondary { background: var(--papier); color: var(--inkt); border: 1px solid var(--lijn); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.btn-secondary:hover { background: var(--nevel); border-color: var(--lijn-sterk); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(1px); }
.cta-band .btn-secondary, .cta-band--curtain .curtain-copy .btn-secondary {
  color: var(--paper-fixed); background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 12px 28px -14px rgba(0,0,0,.5); }
.cta-band .btn-secondary:hover, .cta-band--curtain .curtain-copy .btn-secondary:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.72); }
.cta-band .btn-secondary:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .fab::after, .cta-band .btn-secondary::after { animation: none; display: none; }
  .nimbus-drop, .nimbus-item, .btn-primary, .btn-secondary, .fab { transition: none; }
  .btn-primary:hover, .fab:hover, .btn-secondary:hover, .btn-primary:active, .fab:active, .btn-secondary:active { transform: none; }
}