/* ============================================================
   KLUB · GOLDEN HOUR · FLOATING NAV (IG-dynamic style)
   Drop-in replacement chrome for .nav + .apphead on mobile screens.
   Requires golden-hour.css (tokens) loaded first.
   Markup contract:
     fnav(active)  -> .fnav-wrap > .fnav (5 tabs, sliding .hl highlight)
     fhead(...)    -> .fhead-row (left action · logo pill · right actions + .fmenu)
   Content clearance: give the scroll body a trailing .fnav-pad
   (or padding-bottom: var(--fnav-clearance)) so nothing hides
   behind the floating bar.
   ============================================================ */
:root { --fnav-h:58px; --fnav-inset:18px; --fnav-drop:14px; --fnav-clearance:100px; --fglass:rgba(13,10,21,.64); --fglass-deep:rgba(13,10,21,.92); }

/* ---------- bottom bar ---------- */
.fnav-wrap { position:absolute; left:0; right:0; bottom:0; z-index:24; display:flex; justify-content:center; padding:0 var(--fnav-inset) calc(var(--fnav-drop) + env(safe-area-inset-bottom, 12px)); pointer-events:none; }
.fnav { pointer-events:auto; position:relative; width:100%; max-width:344px; height:var(--fnav-h); padding:0 6px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; border-radius:var(--r-pill); background:var(--fglass); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border:1px solid var(--hair); box-shadow:0 18px 42px -14px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(247,242,234,.07); transition:transform var(--motion), opacity var(--motion); }
/* sliding highlight: one cell wide, position driven by --fi (0-4) */
.fnav .hl { position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px)/5); border-radius:var(--r-pill); background:rgba(247,242,234,.09); box-shadow:inset 0 0 0 1px rgba(247,242,234,.06); transform:translateX(calc(var(--fi,0)*100%)); transition:transform .42s cubic-bezier(.3,1.35,.35,1); }
.fnav .hl::after { content:''; position:absolute; inset:0; border-radius:inherit; background:var(--sunset-soft); opacity:.3; }
.fnav .hl.off { opacity:0; }
.fnav .i { position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; color:var(--bone-3); font-size:25px; cursor:pointer; transition:color var(--motion-fast), transform var(--motion-fast); }
.fnav .i:active { transform:scale(.9); }
.fnav .i.on { color:var(--bone); }
.fnav .i svg { width:24px; height:24px; }
.fnav .i .navbadge { position:absolute; top:9px; right:calc(50% - 22px); min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#EF4444; color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(13,10,21,.85); }
/* dynamic recede: add .recede to .fnav-wrap while scrolling down (IG minimize) */
.fnav-wrap.recede .fnav { transform:translateY(8px) scale(.9); opacity:.6; }
/* clearance spacer for scroll bodies */
.fnav-pad { flex-shrink:0; height:var(--fnav-clearance); }

/* ---------- floating top header ---------- */
.fhead-row { position:absolute; top:0; left:0; right:0; z-index:22; display:flex; align-items:center; gap:8px; padding:44px 14px 0; pointer-events:none; }
.fhead-row > * { pointer-events:auto; }
.fbtn { width:42px; height:42px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--bone-2); font-size:21px; background:var(--fglass); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border:1px solid var(--hair); box-shadow:0 8px 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(247,242,234,.07); position:relative; cursor:pointer; transition:color var(--motion-fast), transform var(--motion-fast); }
.fbtn:active { transform:scale(.92); }
.fbtn .nb { position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 2px rgba(13,10,21,.85); }
.fbtn .navbadge { position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#EF4444; color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(13,10,21,.85); }
.fpill { height:42px; display:flex; align-items:center; gap:9px; padding:0 15px 0 13px; border-radius:var(--r-pill); background:var(--fglass); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border:1px solid var(--hair); box-shadow:0 8px 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(247,242,234,.07); }
.fpill .wm { font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:-.03em; color:var(--bone); }
.fpill .wm .dot { background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fpill .loc { font-weight:500; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-3); padding-left:9px; border-left:1px solid var(--hair); }
.fpill .h2 { font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:-.02em; color:var(--bone); }
.fhead-row .sp { flex:1; }

/* ---------- options dropdown (anchored to the last .fbtn) ---------- */
.fmenu-anchor { position:relative; }
.fmenu { position:absolute; top:calc(100% + 10px); right:0; min-width:196px; z-index:30; border-radius:18px; padding:6px; background:var(--fglass-deep); backdrop-filter:blur(28px) saturate(150%); -webkit-backdrop-filter:blur(28px) saturate(150%); border:1px solid var(--hair-2); box-shadow:var(--e-3), inset 0 1px 0 rgba(247,242,234,.07); transform-origin:top right; transform:scale(.94) translateY(-4px); opacity:0; pointer-events:none; transition:transform .22s var(--ease), opacity .18s var(--ease); }
.fmenu.open { transform:none; opacity:1; pointer-events:auto; }
.fmenu .mi { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; font-weight:600; font-size:13.5px; color:var(--bone-2); cursor:pointer; transition:background var(--motion-fast), color var(--motion-fast); }
.fmenu .mi:hover { background:rgba(247,242,234,.07); color:var(--bone); }
.fmenu .mi i { font-size:17px; color:var(--bone-3); display:flex; }
.fmenu .mi:hover i { color:var(--bone); }
.fmenu .hr { height:1px; margin:5px 10px; background:var(--hair); }
.fmenu .mi.danger { color:var(--stop); } .fmenu .mi.danger i { color:var(--stop); }

/* ---------- avatar tab (Option A: profile stays in the bar) ---------- */
.fnav .i.you:empty::before { content:''; width:28px; height:28px; border-radius:50%; background:url('https://images.unsplash.com/photo-1500336624523-d727130c3328?w=120&q=80&auto=format') center/cover; }
.fnav .i.you.on::after { content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; box-sizing:border-box; transform:translate(-50%,-50%); border-radius:50%; padding:1.5px; background:var(--sunset); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* ---------- role mode (artist / venue / promoter store tools) ---------- */
.fnav .yav { width:28px; height:28px; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 1px var(--hair-2); }
.fnav .rolechip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-weight:600; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-2); padding:5px 10px; border-radius:999px; background:var(--fglass-deep); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border:1px solid var(--hair); box-shadow:0 6px 16px -6px rgba(0,0,0,.5); }
.fnav.role-artist .rolechip { color:var(--pink-hi); border-color:rgba(255,46,147,.3); }
.fnav.role-venue .rolechip { color:var(--purple-hi); border-color:rgba(139,92,246,.35); }
.fnav.role-promoter .rolechip { color:var(--acid); border-color:rgba(255,210,61,.3); }
.fnav.role-artist .hl::after { background:linear-gradient(112deg, rgba(255,46,147,.4), rgba(255,110,199,.14)); opacity:.45; }
.fnav.role-venue .hl::after { background:linear-gradient(112deg, rgba(139,92,246,.45), rgba(192,132,252,.16)); opacity:.5; }
.fnav.role-promoter .hl::after { background:linear-gradient(112deg, rgba(255,210,61,.35), rgba(255,176,32,.14)); opacity:.45; }