/* ============================================================
   THE WHEEL LIFE - SHARED CHROME STYLES (v199)
   ONE ruleset for header + menu. No per-page color divergence.
   ============================================================ */

/* ---- header ---- */
#wlcHeader{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:#0E0F10; border-bottom:1px solid #23282B;
}
html.wl-ios #wlcHeader,
html.wl-native #wlcHeader{ padding-top:calc(12px + env(safe-area-inset-top)); }

#wlcHeader .wlc-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
#wlcHeader .wlc-rider{ width:30px; height:auto; }
#wlcHeader .wlc-wm{ font-family:'Bungee',sans-serif; font-size:17px; letter-spacing:.4px; color:#D7DBDE; }
#wlcHeader .wlc-wm b{ color:#5C89B2; }

#wlcHeader .wlc-burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; cursor:pointer; padding:8px;
}
#wlcHeader .wlc-burger span{ display:block; height:2px; width:100%; background:#D7DBDE; border-radius:2px; }

/* ---- native header (build 48): no burger -- centered wordmark, rider icon left (Onewheel),
   EUC rider icon right, both purely decorative. 3-column grid keeps the wordmark true-centered
   under the notch regardless of the two icons' widths. ---- */
html.wl-native #wlcHeader{
  display:grid; grid-template-columns:1fr auto 1fr; justify-content:normal;
}
html.wl-native #wlcHeader .wlc-brand-ctr{ justify-self:center; text-decoration:none; }
html.wl-native #wlcHeader .wlc-hside{ display:flex; align-items:center; }
html.wl-native #wlcHeader .wlc-hleft{ justify-self:start; justify-content:flex-start; }
html.wl-native #wlcHeader .wlc-hright{ justify-self:end; justify-content:flex-end; }
html.wl-native #wlcHeader .wlc-rider-ic{ width:26px; height:26px; display:block; }

/* ---- menu overlay (web only -- native never mounts #wlcMenu) ---- */
#wlcMenu{ display:none; position:fixed; inset:0; z-index:1100; background:rgba(6,8,10,.72); }
#wlcMenu.on{ display:block; }
#wlcMenu .wlc-menu-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(78vw,320px);
  background:#121517; border-left:1px solid #23282B;
  padding:calc(24px + env(safe-area-inset-top)) 24px 24px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:-12px 0 40px rgba(0,0,0,.5);
}
#wlcMenu .wlc-menu-x{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px;
  background:none; border:none; color:#9AA1A6; font-size:28px; line-height:1; cursor:pointer;
}

/* ---- menu items: ONE color rule (no per-page blue) ---- */
#wlcMenu .wlc-menu-item{
  font-family:'Space Mono',monospace; font-size:15px; letter-spacing:1px; text-transform:uppercase;
  color:#D7DBDE; text-decoration:none; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#wlcMenu .wlc-menu-item:active{ color:#9AA1A6; }
/* current page: ONE defined treatment (sky underline accent), applied by the component */
#wlcMenu .wlc-menu-item.is-active{ color:#5C89B2; }

/* ---- account row ---- */
#wlcMenu .wlc-acct{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
#wlcMenu .wlc-signin{
  font-family:'Space Mono',monospace; font-size:15px; letter-spacing:1px; text-transform:uppercase;
  background:#5C89B2; color:#0E0F10 !important; text-align:center; border-radius:999px;
  padding:14px; text-decoration:none;
}
#wlcMenu .wlc-handle{
  font-family:'Space Mono',monospace; font-size:15px; text-transform:none; letter-spacing:.5px;
  color:#D7DBDE; text-decoration:none; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
/* founder-lime: ONE check, ONE rule */
#wlcMenu .wlc-handle.wlc-founder{ color:#C6FF3D; }
#wlcMenu .wlc-logout{
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color:#9AA1A6; text-decoration:none; padding:12px 0;
}

/* ---- native-only: hide Premium + Get-The-App ANYWHERE in the chrome (menu AND footer) ----
   (kept harmless even though native no longer mounts #wlcMenu/#wlcFooter at all) */
html.wl-native .wlc-premium,
html.wl-native .wlc-getapp{ display:none !important; }

/* ============================================================
   WL_TABBAR (native-only bottom tab bar) -- Map/Events/Community/Gear/Account.
   Sky accent for the active tab, matching the web drawer's is-active rule --
   lime stays reserved for Founder per the brand guide.
   ============================================================ */
#wlcTabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  display:flex; background:#0E0F10; border-top:1px solid #23282B;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
#wlcTabbar .wlc-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; text-decoration:none; color:#9AA1A6;
}
#wlcTabbar .wlc-tab-ic{ width:23px; height:23px; display:block; }
#wlcTabbar .wlc-tab-ic svg{ width:100%; height:100%; }
#wlcTabbar .wlc-tab-lb{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.3px; text-transform:uppercase;
}
#wlcTabbar .wlc-tab.is-active{ color:#5C89B2; }
#wlcTabbar .wlc-tab:active{ opacity:.6; }

/* content clears the tab bar the same way it already clears the header -- --wlc-tabbar-h is
   published by wl-chrome.js's mountTabbar(), already includes the safe-area inset. */
html.wl-has-tabbar body{ padding-bottom:var(--wlc-tabbar-h,64px); }
html.wl-has-tabbar .cp-sheet{ bottom:var(--wlc-tabbar-h,64px); z-index:1000; }

/* ============================================================
   NATIVE ACCOUNT DRAWER (build 48) -- the Account tab adds .wl-drawer-r to the shared
   #wlModalBg (index.html's login/account/profile modal host) right before opening it, so the
   SAME modal renders as a right-side slide-out instead of a centered box. index.html's own
   close() strips the class again on dismiss, so every other use of #wlModalBg (sign-in from
   elsewhere, Premium/pay flow) is unaffected. High specificity here (html class + id + class)
   beats index.html's inline .wl-modal-bg/.wl-modal rules regardless of stylesheet order.
   ============================================================ */
html.wl-native #wlModalBg.wl-drawer-r{
  justify-content:flex-end; align-items:stretch; padding:0; backdrop-filter:blur(2px);
}
html.wl-native #wlModalBg.wl-drawer-r .wl-modal{
  width:min(86vw,380px); max-width:none; height:100%; max-height:none; margin:0;
  border-radius:0; border-top:none; border-right:none; border-bottom:none;
  border-left:1px solid #2a3036;
  padding:calc(20px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
  animation:wlDrawerIn .22s ease-out;
}
@keyframes wlDrawerIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

/* account drawer extras (Socials / Upgrade / Support) -- native-only rows appended by
   index.html's renderAccount(), beneath the existing Edit Profile / Log Out buttons */
html.wl-native .wl-acct-social{
  display:flex; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06);
}
html.wl-native .wl-acct-social a{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#5C89B2; text-decoration:none;
}
html.wl-native .wl-acct-support{
  display:block; margin-top:14px; font-family:'Space Mono',monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:#9AA1A6; text-decoration:none;
}

/* ============================================================
   ONE FOOTER (v203) -- WEB ONLY now; native never mounts #wlcFooter
   ============================================================ */
/* self-contained: pages have bare footer{} element rules + body font/line-height that would bleed in.
   Every inherited/element-level property is pinned here so the footer renders identically on every page. */
#wlcFooter{ background:#0E0F10; border-top:1px solid #23282B; color:#D7DBDE;
  margin:40px 0 0; padding:0; font-size:14px; line-height:1.5; font-family:'Space Grotesk',Arial,sans-serif;
  text-align:left; box-sizing:border-box; width:100%; }
#wlcFooter *{ box-sizing:border-box; line-height:1.5; }
#wlcFooter a{ padding:0; margin:0; text-decoration:none; font-weight:400; font-style:normal; }
#wlcFooter nav{ display:flex; padding:0; margin:0; }
#wlcFooter .wlcf-social a{ display:flex; align-items:center; gap:6px; width:auto; height:auto; padding:0; margin:0; line-height:0;
  font-family:'Space Grotesk',Arial,sans-serif; font-size:14px; font-weight:400; letter-spacing:normal; text-transform:none;
  text-decoration:none; color:#D7DBDE; }
#wlcFooter .wlcf-social svg{ width:16px; height:16px; }
#wlcFooter .wlcf-in{ max-width:1120px; margin:0 auto; padding:26px 20px calc(26px + env(safe-area-inset-bottom)); }
#wlcFooter .wlcf-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
#wlcFooter .wlcf-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
#wlcFooter .wlcf-brand img{ width:28px; height:auto; }
#wlcFooter .wlcf-wm{ font-family:'Bungee',sans-serif; font-size:15px; letter-spacing:.4px; color:#D7DBDE; }
#wlcFooter .wlcf-wm b{ color:#5C89B2; }
#wlcFooter .wlcf-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
#wlcFooter .wlcf-links a{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#5C89B2; text-decoration:none; }
#wlcFooter .wlcf-links a:active{ color:#D7DBDE; }
#wlcFooter .wlcf-bottom{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); }
#wlcFooter .wlcf-social{ display:flex; gap:14px; align-items:center; }
#wlcFooter .wlcf-social svg{ display:block; }
#wlcFooter .wlcf-acct{ display:flex; align-items:center; gap:14px; }
#wlcFooter .wlcf-handle{ font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.5px; color:#D7DBDE; text-decoration:none; }
#wlcFooter .wlcf-handle.wlc-founder{ color:#C6FF3D; }   /* founder-lime: same rule as the menu */
#wlcFooter .wlcf-logout, #wlcFooter .wlcf-signin{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1A6; text-decoration:none; }
#wlcFooter .wlcf-copy{ font-family:'Space Grotesk',sans-serif; font-size:12px; color:#9AA1A6; }
@media (max-width:640px){ #wlcFooter .wlcf-top, #wlcFooter .wlcf-bottom{ flex-direction:column; align-items:flex-start; } }


/* ============================================================
   GLOBAL POPUP / OVERLAY SAFE-AREA (v202) -- ONE rule for ALL overlays
   Every modal / popup / sub-view / page-like overlay starts BELOW the shared header.
   --wlc-header-h = the header's MEASURED height, published by wl-chrome.js, and it already
   includes env(safe-area-inset-top). So "below the header" == "below the notch" everywhere.
   Any new overlay inherits this by using one of these container classes. No per-popup fixes.
   ============================================================ */
:root{ --wlc-header-h:71px; }   /* fallback only; wl-chrome.js overrides with the live measurement */

.wl-modal-bg, .wl-modal-bg2, .wl-share-bg, .wlcl-ov, .ev-modal-bg, .wlpv{
  padding-top:calc(var(--wlc-header-h,71px) + 12px) !important;
  box-sizing:border-box;
}

/* dim-backdrop modals sit ABOVE the shared chrome (they dim it); the box still starts below its line.
   .ev-modal-bg (Suggest a trail) was z-index 100 -- UNDER the header, which painted over it. Normalized. */
.ev-modal-bg{ z-index:9000 !important; }

/* page-like full-screen overlays (profile) sit BELOW the shared header so the header + hamburger stay
   visible and usable above them -- the same "acts like a page" treatment Community now gets.
   Their own sub-nav (Back to map / Log out) starts below the header, clear of the notch. */
.wlpv{ z-index:900 !important; }