/* ============================================================
   GLOBAL mobile menu standard (Ryan 2-Sep) - THE one place to
   change the triple-dot menus on phones.

   Reference = the DASHBOARD mobile view (measured 430x932):
     - kebab trigger: fixed, top 10px (+ safe-area), right 18px
     - GO logo: top 30px, left 30px
     - menu item text: 14px (Ryan's explicit standard)

   Loaded by partials/favicons.blade.php (the one thing every head
   includes), AFTER page CSS in cascade terms it competes via the
   html-body specificity prefix + !important, which beats every
   page-local !important rule regardless of load order.

   Surfaces covered (the complete mobile-kebab census, 2-Sep):
     dashboard (reference - font only), settings, private chat
     mobile, multi-perspective, landing <=479. Psychometrics, CS
     overlay, briefing mobile, teasers and OTP have no mobile
     kebab by design. Desktop is untouched (max-width guard).
   ============================================================ */
/* ---- ITEM FONT: 14px on EVERY triple-dot menu, EVERY viewport ----
   (Ryan 2-Sep round 2: not just mobile - desktop settings/chat/MP ran
   12px.) line-height 20px = the dashboard rhythm, and keeps 14px text
   from clipping in the pages that declared 13px line boxes. */
html body #gg-dash-menu-wrap a,
html body #gg-dash-menu-wrap button.js-leave-btn,
html body .gg-nav-links .gg-nav-link .gg-menu-text,
html body .gg-nav-links.chat .gg-menu-text,
html body #mp-menu .mp-menu-text,
html body #mp-menu .gg-menu-text,
html body #db-menu-list a,
html body #db-menu-list button {
  font-size: 14px !important;
  line-height: 20px !important;
}

/* ---- DOTS: 4x4 on every trigger, every viewport (Ryan 2-Sep round 2:
   "the damn triple dot size... all consistent" - settings mobile ran
   6px; everyone else 4px = the dashboard reference). */
html body .gg-more-btn .gg-more-dot,
html body #gg-dash-usermenu .gg-more-dot,
html body #mp-kebab span,
html body #db-menu-btn span {
  width: 4px !important;
  height: 4px !important;
}

/* ---- TRIGGER BOX: the dashboard button, everywhere (Ryan 2-Sep round
   3: the markups differ per page - Alpine button vs Webflow anchor vs
   bare spans - and "no wonder they look and feel different". Markup
   stays (IX2 bindings depend on it); the GEOMETRY becomes identical:
   46x40 flex box, horizontal dot row, 5px gaps, centred, pointer.
   Webflow's .gg-more-dot margin-left:5px dies so the gap owns spacing;
   dot transforms (IX2 open-morphs) are left alone. Mobile block bumps
   the box to the dashboard-mobile 44px height. */
/* (Ryan 2-Sep: the PUBLIC HEADER'S bare .gg-more-btn is deliberately
   NOT in this box rule - forcing 46x40/margin-0 there crushed the
   Share+dots quick-stack composition. Its dots keep webflow's own
   margin-left:5px spacing; only the app-page kebabs get the box.) */
html body .gg-more-btn.chat,
html body.gg-body .gg-nav .gg-more-btn.chat,
html body.mcv-body .gg-nav .gg-more-btn.chat,
html body #mp-kebab,
html body #db-menu-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 46px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
html body .gg-more-btn.chat .gg-more-dot,
html body #mp-kebab span,
html body #db-menu-btn span {
  margin: 0 !important;
}

/* ---- MENU/DOTS AXIS (Ryan 2-Sep: "align the menu items to the triple
   dot... vertically aligned visually"): the standard trigger box is 46
   wide but the dot cluster spans ~22, so the visible dots' right edge
   sits 12px inside the box - menus aligned to the box edge overshot by
   exactly that. Every standard-trigger menu shifts 12px so item text
   right-aligns to the DOTS. (Public header keeps webflow geometry.) */
html body #gg-dash-menu-wrap #gg-dash-usermenu + div {
  right: 10px !important; /* Ryan 2-Sep: +2px right (12 - 2) */
}
html body .gg-nav-links.chat {
  margin-right: 10px !important; /* Ryan 2-Sep: +2px right (12 - 2) */
}
/* (#db-menu-list needs NO shift - the briefing page already aligns its
   items to the dots, measured +1px before any correction.) */
/* Public header desktop (landing/faq/compliance, logged-out): items
   measured 11px past the webflow dots - onto the axis. */
@media (min-width: 1024px) {
  html body .gg-nav .gg-nav-links {
    margin-right: 9px !important; /* Ryan 2-Sep: +2px right (11 - 2) */
  }
}
/* Public pages mobile (Ryan 2-Sep, three rounds): the header's own
   containers are a webflow quick-stack maze (the landing re-flex left
   the dots in a SCROLLING container while the share stuck) - so the
   dots and share are simply FIXED like app-page kebabs: on the GO
   logo's visual axis (mark centre ~72 in its box), share left of the
   dots. The menu drops below them; a stray 50px margin-right is
   zeroed so items sit on the dots axis. Applies wherever the public
   header renders on phones (landing, compliance, faq).
   SCOPE (Ryan 2-Sep, "what the fuck did you do to the logged in
   users"): chat mobile and settings carry their OWN #more-menu-toggle
   markup, and the dashboard rides layouts.public too - the unscoped
   version of these rules yanked the chat kebab off the nametag axis.
   .gg-public-page comes from layouts/public's body tag; dashboard and
   the chat surfaces are excluded by class. */
@media (max-width: 767.98px) {
  /* Oli 2-Sep (safe-use pass): "too close to the right, padding should
     be 20 pixels" - dots (and the share under them, same axis) move
     18 -> 20 from the right edge on the public header. */
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) #more-menu-toggle {
    position: fixed !important;
    top: 44px !important;
    right: 20px !important;
    margin: 0 !important;
    z-index: 601;
  }
  /* Ryan 2-Sep #3: share STACKS UNDER the dots on the same right axis
     (dots row 44..70, then a 10px breath). */
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) a.gg-share-btn.homepage {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    margin: 0 !important;
    z-index: 601;
  }
  /* the landing re-absolutes .gg-nav (top 10) and its links (top 0%)
     with page-local rules - FIXED links sidestep every page's container
     games, exactly like the dots. Ryan 2-Sep #3: the menu opens to the
     LEFT of the dots like the original webflow flex row - first item
     top-aligned with the dots row. Oli 2-Sep (safe-use pass): "menu
     items too close to the dots should be 20 pixels margin" - list
     right edge 20px clear of the dots' visible cluster (dots at right
     20, cluster 22 wide -> cluster left edge at right 42; 42+20=62). */
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-nav .gg-nav-links {
    position: fixed !important;
    top: 44px !important;
    right: 60px !important; /* Ryan 2-Sep: +2px right (62 - 2) */
    left: auto !important;
    margin: 0 !important;
  }
  /* Oli 2-Sep (safe-use pass): "line spacing should be half that" =
     half the item margin-bottom (13px) -> 6.5px, per Ryan's own webflow
     implementation of the comment. PUBLIC HEADER ONLY: the shared 13px
     rhythm below is the dashboard-mobile reference Ryan approved for
     the app kebabs (chat/settings/MP/dashboard) and stays. Higher
     specificity than that rule, so this wins here. */
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-nav-links .gg-nav-link {
    margin-bottom: 6.5px !important;
  }
  /* Ryan 2-Sep round 4: per-page vertical trims on the public stack -
     landing up 10px (dots 44->34, share 80->70), signup AND login up
     20px (dots 44->24, share 80->60). The menu list top rides WITH the dots
     on each page so the first item stays top-aligned with the dots row
     (the standard's invariant). Selectors repeat the full :not chain
     so they outrank the base rules above. */
  html body.gg-public-page.gg-body-home:not(.gg-body-dashboard):not(.gg-body-signup-chat) #more-menu-toggle { top: 34px !important; }
  html body.gg-public-page.gg-body-home:not(.gg-body-dashboard):not(.gg-body-signup-chat) a.gg-share-btn.homepage { top: 70px !important; }
  html body.gg-public-page.gg-body-home:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-nav .gg-nav-links { top: 34px !important; }
  html body.gg-public-page.gg-body-signup:not(.gg-body-dashboard):not(.gg-body-signup-chat) #more-menu-toggle,
  html body.gg-public-page.gg-body-login:not(.gg-body-dashboard):not(.gg-body-signup-chat) #more-menu-toggle { top: 24px !important; }
  html body.gg-public-page.gg-body-signup:not(.gg-body-dashboard):not(.gg-body-signup-chat) a.gg-share-btn.homepage,
  html body.gg-public-page.gg-body-login:not(.gg-body-dashboard):not(.gg-body-signup-chat) a.gg-share-btn.homepage { top: 60px !important; }
  html body.gg-public-page.gg-body-signup:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-nav .gg-nav-links,
  html body.gg-public-page.gg-body-login:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-nav .gg-nav-links { top: 24px !important; }
  /* compliance/press etc: the intro title block clears the logo box */
  html body.gg-public-page .gg-generic-content .gg-intro-title.content {
    padding-top: 112px !important;
  }
  /* Ryan 2-Sep (safe-use): the compliance logo hugged the very top
     (box top 0 vs the landing's 8 with a taller box). Reproduce the
     APPROVED landing relationship proportionally - box centre ~9px
     below the dots row - which puts this 101px box at top 16. Scoped
     by :has to the generic-content pages; the landing keeps its own. */
  html body.gg-public-page:has(.gg-generic-content) .gg-logo.smaller {
    top: 16px !important;
  }
}

/* ---- LEAVE ARROW (Ryan 2-Sep): the logout row's arrow icon stays
   HIDDEN until the row is hovered (desktop) or pressed (mobile tap =
   :active), every viewport. Opacity not display, so nothing reflows.
   :hover is guarded per the iOS sticky-hover rule; irrelevant here in
   practice (tapping Leave navigates) but the guard is the standard. */
html body .gg-nav-links .gg-nav-link-logout .gg-nav-icon {
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  html body .gg-nav-links .gg-nav-link-logout:hover .gg-nav-icon {
    opacity: 1 !important;
  }
}
html body .gg-nav-links .gg-nav-link-logout:active .gg-nav-icon,
html body .gg-nav-links .gg-nav-link-logout:focus-visible .gg-nav-icon {
  opacity: 1 !important;
}
/* Ryan 2-Sep: same treatment for any item marked gg-icon-hover-only
   (today: Signup's icon on the LOGIN page, Login's icon on the SIGNUP
   page). */
html body .gg-nav-links .gg-nav-link.gg-icon-hover-only .gg-nav-icon {
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  html body .gg-nav-links .gg-nav-link.gg-icon-hover-only:hover .gg-nav-icon {
    opacity: 1 !important;
  }
}
html body .gg-nav-links .gg-nav-link.gg-icon-hover-only:active .gg-nav-icon,
html body .gg-nav-links .gg-nav-link.gg-icon-hover-only:focus-visible .gg-nav-icon {
  opacity: 1 !important;
}

/* ---- ITEM RHYTHM: dashboard reference = 8px row gap on desktop,
   13px on phones (mobile block below overrides). */
html body .gg-nav-links .gg-nav-link,
html body #mp-menu .mp-menu-link,
html body #mp-menu .mp-menu-dead,
html body #gg-dash-menu-wrap a[class*="mb-"],
html body #db-menu-list a,
html body #db-menu-list button {
  margin-bottom: 8px !important;
}

/* ---- KEBAB POSITION, desktop: the dashboard reference = top 30 /
   right 38. The chat/settings nav relied on the trigger's own margins
   for its resting spot - the trigger-box margin:0 above slid it to
   top -20 (Ryan: "I can literally see half of the triple dots").
   Pinned explicitly; the public header (non-.chat) keeps its layout. */
@media (min-width: 1024px) {
  /* MP desktop kebab rests at right 40 with the 46 box -> visible dots
     at inset 52; the menu aligns to them (was 40). */
  html body #mp-menu {
    right: 50px !important; /* Ryan 2-Sep: +2px right (52 - 2) */
  }
  html body .gg-nav:has(.gg-more-btn.chat) {
    top: 30px !important;
    right: 38px !important;
    margin: 0 !important;
    /* The chat page ships a STUCK Webflow IX2 inline park -
       translate3d(0,-70px,0) - with NO working reveal trigger: users
       could only open the menu because the half-clipped dots happened
       to be clickable (Ryan's "I can see half of the triple dots").
       Fully hiding it would remove menu access; neutralising the park
       puts the dots at the dashboard's 30/38 like every other page.
       !important beats inline styles - the one case it exists for. */
    transform: none !important;
  }
}

/* ---- SETTINGS: the dashboard's open treatment (Ryan 2-Sep) - the
   dropdown fades in gracefully and the rest of the page dims to .25
   while open. The transition is scoped AWAY from chat pages (they
   share gg-body but IX2 drives their opacity frame-by-frame - a CSS
   transition would fight it). The body class comes from the settings
   toggle JS. */
html body.gg-body:not(.gg-body-signup-chat) .gg-nav-links.chat {
  transition: opacity 0.5s ease-out;
}
html body.gg-settings-menu-open > :not(.gg-nav):not(script):not(style) {
  opacity: 0.25 !important;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  /* Ryan 2-Sep (press + "other pages publicly"): pwa.css kills .gg-nav
     and .gg-share-btn on ALL public pages <=768 - the kebab returns
     everywhere layouts.public renders it (compliance, faq, landing
     480-768 band included). Pages that hide their own chrome inline
     (login/signup/otp focus modes) keep winning - those rules are
     page-local and more specific. Share label stays icon-only.
     Scoped to .gg-public-page (minus dashboard/chat) with the fixed
     block above - the blanket version force-showed nav chrome on
     logged-in surfaces that hide it on purpose. */
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-nav,
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-share-btn {
    display: flex !important;
  }
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) .gg-ui-font.share {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {

  /* ---- ITEM RHYTHM, mobile: the dashboard mobile reference = 13px.
     The body.gg-body pair outranks settings' inline (0,4,1) !important
     rules (its logout row is a FORM carrying the gap; the flush
     last-child rules deliberately stay stronger). */
  html body .gg-nav-links .gg-nav-link,
  html body.gg-body .gg-nav-links.chat .gg-nav-link,
  html body.gg-body .gg-nav-links.chat form,
  html body #mp-menu .mp-menu-link,
  html body #mp-menu .mp-menu-dead,
  html body #gg-dash-menu-wrap a[class*="mb-"],
  html body #db-menu-list a,
  html body #db-menu-list button {
    margin-bottom: 13px !important;
  }

  /* ---- TRIGGER BOX, mobile: dashboard-mobile height 44 ---------- */
  html body .gg-more-btn.chat,
  html body.gg-body .gg-nav .gg-more-btn.chat,
  html body.mcv-body .gg-nav .gg-more-btn.chat,
  html body #mp-kebab,
  html body #db-menu-btn {
    height: 44px !important;
  }

  /* ---- KEBAB POSITION: top 10 (+safe-area) / right 18 ---------- */
  /* settings: .gg-nav was top 0/right 0 with 22/20 margins */
  html body.gg-body .gg-nav {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 18px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
  }
  /* multi-perspective: was top safe+8 / right 8; the dropdown
     anchor moves with it so the menu stays under the dots */
  html body #mp-kebab {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 18px !important;
  }
  html body #mp-menu {
    right: 28px !important; /* 18 + 12 - 2 (Ryan 2-Sep +2px right) */
  }
  /* chat mobile (.mcv-body .gg-nav): already ~12/16 via padding -
     pin the same standard so it cannot drift */
  html body.mcv-body .gg-nav {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 18px !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
  }
  /* Ryan 2-Sep cross-apply: the chat kebab BUTTON overflowed its nav by
     16px and hugged the screen edge (right inset 2 - "garbage"); pull it
     back to the standard right-18 like MP/dashboard. Later in file than
     the base margin:0, so this wins. */
  html body.mcv-body .gg-nav .gg-more-btn.chat {
    margin-right: 16px !important;
  }
  /* Ryan 2-Sep cross-apply: MP's nametag mark sat at top 16 while the
     LOVED chat nametag mark sits at top 28 - align MP to chat. */
  html body #mp-head {
    top: calc(env(safe-area-inset-top, 0px) + 28px) !important;
  }

  /* ---- GO LOGO POSITION: top 30 / left 30 ---------------------- */
  /* settings brand (was 20/20). Dashboard brand already renders at
     30/30 (it IS the reference) - untouched. Chat mobile shows the
     companion nametag, not the GO logo - untouched. */
  html body.gg-body a.gg-settings-brand {
    top: 30px !important;
    left: 30px !important;
  }

  /* ---- MP contrast fix, THE ROOT CAUSE (Ryan 2-Sep, three rounds):
     the page's own mobile-only hard-fade IMG #mp-shadow-top sits at
     z-index 10 and painted OVER the z6 chrome - the dots and nametag
     were rendering UNDER a black gradient the whole time (faint on a
     bright video, invisible on a dark one; pointer-events:none made
     hit-tests lie that the dots were topmost). Chrome rides ABOVE the
     fade now; the fade itself already provides all the top darkening
     the earlier scrim attempt duplicated. */
  html body #mp-kebab,
  html body #mp-head,
  html body #mp-menu {
    z-index: 12 !important;
  }
  html body #mp-kebab span {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.65));
  }
  html body #mp-head,
  html body #mp-nametag,
  html body #mp-nametag img {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
  }

  /* ---- MENU GAP: dashboard reference = first item starts 20px below
     the trigger (trigger bottom 54 + 20 = first item top 74). Settings
     measured -4 (overlapping the trigger box); MP sat at 54. */
  html body.gg-body .gg-nav-links.chat {
    padding-top: 24px !important;
  }
  html body #mp-menu {
    /* first row sits 30px inside the container - 44 + 30 = item top 74 */
    top: calc(env(safe-area-inset-top, 0px) + 44px) !important;
  }
}

/* ---- Ryan 2-Sep: briefing kebab items join the +2px-right nudge.
   The list is position:absolute right:11 in the page css - shift the
   edge itself (11 - 2 = 9). NEVER position:relative here: this
   selector outranks the page's position:absolute, and in-flow the
   list inflates the fixed #db-menu box so the dots button slides to
   the box's far left ("the triple dot is out of place", Ryan 2-Sep
   late). `right` composes fine with the translateY reveal; only a
   translateX would have fought it. */
html body #db-menu-list {
  right: 9px;
}

/* ---- ITEM TYPE, phones + tablets (Ryan 3-Sep, verified in devtools first):
   15px on a 16px line box, up from 14/20. Desktop keeps 14/20 - this block
   only exists below the file's own desktop boundary (1024), and it sits
   LAST so it wins the equal-specificity !important tie with the global
   rule above by source order, not by out-specifying it. Same selector list
   as that rule on purpose: one group, every triple-dot menu. */
@media (max-width: 1023.98px) {
  html body #gg-dash-menu-wrap a,
  html body #gg-dash-menu-wrap button.js-leave-btn,
  html body .gg-nav-links .gg-nav-link .gg-menu-text,
  html body .gg-nav-links.chat .gg-menu-text,
  html body #mp-menu .mp-menu-text,
  html body #mp-menu .gg-menu-text,
  html body #db-menu-list a,
  html body #db-menu-list button {
    font-size: 15px !important;
    line-height: 16px !important;
  }
}

/* ---- Ryan 3-Sep (landing, phones): a near-miss on the dots or the share
   glyph landed on the hero behind them and started the first-contact video.
   The glyphs are 22px wide; ::before grows each FIXED anchor's hit box to
   44px in every direction without moving a pixel of Oli's geometry. The
   hero tap handler (home.js) also refuses taps inside this zone. */
@media (max-width: 767.98px) {
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) #more-menu-toggle::before,
  html body.gg-public-page:not(.gg-body-dashboard):not(.gg-body-signup-chat) a.gg-share-btn.homepage::before {
    content: ''; position: absolute; inset: -11px;
  }
}