/* ============================================================================
   mobile.css — Rankd landing shared MOBILE-ONLY layer (redesign-v2)
   ----------------------------------------------------------------------------
   Loaded on all 5 site pages. ENTIRELY media-query-scoped: nothing here alters
   the desktop (>=768px) rendering of any EXISTING element. The only >=768px rule
   sets display:none on net-new chrome (.rankd-nav-trigger / .rankd-mobile-menu /
   [data-m-acc-header]) which does not exist on desktop, so it matches nothing
   there. Mobile boundary = 767px (site-wide; == Tailwind md-1).
   Sections: A. nav hamburger (C.1) · B. accordion engine (A.1) · C. footer (C.3)
   ============================================================================ */

/* ---- Desktop guard: net-new chrome never renders >=768px ----------------- */
@media (min-width: 768px) {
  .rankd-nav-trigger,
  .rankd-mobile-menu,
  [data-m-acc-header] { display: none !important; }
}

/* ===========================================================================
   A. NAV HAMBURGER (mobile-only) — §C.1
   =========================================================================== */
@media (max-width: 767px) {

  /* Trigger — terminal text button, matches the status-bar typography */
  .rankd-nav-trigger {
    display: inline-flex;
    align-items: center;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-primary, #e6edf3);
    background: none;
    border: 0;
    padding: 6px 6px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    position: relative;            /* anchor the ::before tap-pad */
  }
  /* Tap-target: keep the 72x29 VISUAL, expand the TAPPABLE area to >=44px tall via an
     invisible ::before that forwards taps to the button. Unlike the §E progress-tab pad
     (centered), this trigger sits at the viewport TOP edge (bar = 28px, trigger center
     ~14px from top), so a CENTERED 44px pad would push ~8px off-screen (only ~36px
     reachable). Anchor it DOWNWARD (top:0 -> 44px) so the full 44px is on-screen and
     reachable. left:0/right:0 = the trigger's own width (no neighbor-tap theft). */
  .rankd-nav-trigger::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: 0; height: 44px;
  }
  .rankd-nav-trigger:hover { color: var(--accent, #ffbe26); }
  .rankd-nav-trigger:focus-visible {
    color: var(--accent, #ffbe26);
    outline: 1px solid var(--accent, #ffbe26);
    outline-offset: 2px;
  }

  /* Mobile top bar = 2 items: [ MENU ] hard-left + [RANKD] hard-right. The center
     zone (injected MENU trigger) is pulled ahead of the brand with order:-1 so it
     auto-places into col1=1fr (left edge, where the flex zone left-aligns the trigger);
     the brand then takes col2=auto, which the expanding 1fr pushes to the right edge;
     col3=0 collapses the (now-empty) right zone. GET ACCESS leaves the bar — it lives
     in the MENU dropdown now. The 2-class bar selector outranks the page's 1-class grid
     template; the 3-class center selector outranks the page's 2-class zone-center hide. */
  .rankd-status-bar.rankd-status-bar-top { grid-template-columns: 1fr auto 0; }
  .rankd-status-bar.rankd-status-bar-top .rankd-status-bar-brand { font-size: 14px; }   /* match the 14px [ MENU ] */
  .rankd-status-bar.rankd-status-bar-top .rankd-status-bar-zone-center { display: flex; order: -1; }
  .rankd-status-bar-zone-center .nav-center-link,
  .rankd-status-bar-zone-center .nav-center-current { display: none; }
  .rankd-status-bar.rankd-status-bar-top .rankd-status-bar-cta { display: none; }

  /* Bottom status bar (§C.4): the 4-item desktop strip (● LIVE | feed counter |
     clock | © RANKD across two zones) wraps + overflows the 24px bar at phone
     widths. Collapse to one clean line — keep ONLY "● LIVE" (left zone) + the live
     clock (right zone); hide the feed counter, the redundant © (it's in the footer
     directly above), and both │ separators. No copy change (items hidden, not
     reworded). Desktop frozen — this is <=767 only. */
  .rankd-status-bar-bottom .rankd-status-bar-zone > *:not(.rankd-status-bar-online):not(#rankd-live-clock) {
    display: none;
  }

  /* Overlay — fixed, above the status bars (~9100), below index signal-modal (9200) */
  .rankd-mobile-menu { position: fixed; inset: 0; z-index: 9150; display: none; }
  .rankd-mobile-menu.is-open { display: block; }

  .rankd-mobile-menu-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 10, 10, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .rankd-mobile-menu-panel {
    position: absolute; top: 0; left: 0; right: 0;
    background: var(--canvas, #0a0a0a);
    border-bottom: 1px solid var(--hairline-strong, #333333);
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
    display: flex;
    flex-direction: column;
  }

  .rankd-mobile-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--bar-top, 28px);
    margin-bottom: 6px;
  }
  .rankd-mobile-menu-title {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-tertiary, #6b6b6b);
  }
  .rankd-mobile-menu-x {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.08em;
    background: none; border: 0;
    color: var(--ink-secondary, #a3a3a3);
    padding: 8px 8px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rankd-mobile-menu-x:hover,
  .rankd-mobile-menu-x:focus-visible { color: var(--accent, #ffbe26); }

  .rankd-mobile-menu-link {
    display: flex; align-items: center;
    min-height: 52px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-secondary, #a3a3a3);
    text-decoration: none;
    border-top: 1px solid var(--hairline, #262626);
    -webkit-tap-highlight-color: transparent;
  }
  .rankd-mobile-menu-link:first-of-type { border-top: 0; }
  .rankd-mobile-menu-link:hover,
  .rankd-mobile-menu-link:active,
  .rankd-mobile-menu-link:focus-visible { color: var(--ink-primary, #e6edf3); }
  .rankd-mobile-menu-link[aria-current="page"] { color: var(--accent, #ffbe26); }
  .rankd-mobile-menu-link[aria-current="page"]::before {
    content: "\203A\00A0";
    color: var(--accent, #ffbe26);
  }
  /* the menu's Get Access — accent so the last item reads as the CTA */
  .rankd-mobile-menu-cta,
  .rankd-mobile-menu-cta:hover,
  .rankd-mobile-menu-cta:active,
  .rankd-mobile-menu-cta:focus-visible { color: var(--accent, #ffbe26); }

  /* Animated reveal only when motion is allowed */
  @media (prefers-reduced-motion: no-preference) {
    .rankd-mobile-menu-panel { transition: transform 160ms ease, opacity 160ms ease; }
    .rankd-mobile-menu:not(.is-open) .rankd-mobile-menu-panel { transform: translateY(-8px); opacity: 0; }
    .rankd-mobile-menu.is-open .rankd-mobile-menu-panel { transform: translateY(0); opacity: 1; }
  }
}

/* ===========================================================================
   B. MOBILE ACCORDION ENGINE — §A.1
   Reusable collapse-on-tap component. Inert until §D adds [data-m-acc] markup.
   Mechanism = grid-template-rows 0fr -> 1fr (house pattern, matches .tool-panel).
   =========================================================================== */
@media (max-width: 767px) {

  [data-m-acc-header] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; width: 100%; text-align: left; cursor: pointer;
    background: transparent; border: 0;
    padding: 18px 0;
    color: inherit;                 /* adapt to the section (dark text on vt-light, light on dark) */
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 300; letter-spacing: -0.01em;
    text-transform: uppercase; font-size: 17px; line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }
  [data-m-acc-header]:focus-visible {
    outline: 1px solid var(--accent, #ffbe26); outline-offset: 2px;
  }

  [data-m-acc-label] { flex: 1 1 auto; min-width: 0; }
  [data-m-acc-dupe] { display: none; }   /* original title/eyebrow the header re-states — hidden on mobile */

  [data-m-acc-chev] {
    flex: 0 0 auto;
    color: var(--ink-tertiary, #6b6b6b);
    font-size: 15px;
    transition: color 220ms ease, transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  [data-m-acc-item] { border-top: 1px solid var(--hairline, #262626); }
  [data-m-acc-item]:last-child { border-bottom: 1px solid var(--hairline, #262626); }

  [data-m-acc-body] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 360ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  [data-m-acc-body-inner] { overflow: hidden; min-height: 0; }
  [data-m-acc-body-inner] > *:last-child { padding-bottom: 20px; }

  [data-m-acc-item].is-open > [data-m-acc-header] { color: var(--accent, #ffbe26); }
  [data-m-acc-item].is-open > [data-m-acc-header] [data-m-acc-chev] {
    color: var(--accent, #ffbe26);
    transform: rotate(90deg);
  }
  [data-m-acc-item].is-open > [data-m-acc-body] { grid-template-rows: 1fr; }

  @media (prefers-reduced-motion: reduce) {
    [data-m-acc-body], [data-m-acc-chev] { transition: none; }
  }
}

/* ===========================================================================
   C. FOOTER MOBILE CLEANUP — §C.3
   2-col link row (INSIDE RANKD | LEGAL), CONNECT full-width below, looser rhythm.
   #footer specificity intentionally outweighs Tailwind's single utility class
   (the Play CDN injects its <style> at runtime, so source order is unreliable).
   Desktop md:grid-cols-3 is untouched — every rule lives below 768px.
   =========================================================================== */
@media (max-width: 767px) {
  #footer .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 28px;
  }
  #footer .grid.md\:grid-cols-3 > div:nth-child(3) { grid-column: 1 / -1; }
  #footer .grid.md\:grid-cols-3 ul { margin-top: 14px; }
}

/* ===========================================================================
   D. MOBILE SWIPE CAROUSEL — §A.2 (reusable; league Verification + index §01)
   Native CSS scroll-snap (touch swipe + momentum) + a thin JS dots layer
   (mobile.js mobileCarousel). Namespaced [data-m-carousel*] — independent of the
   accordion engine + chrome. Inert until a page adds the markup. The wrapper is
   display:contents >=768 so desktop is byte-identical; everything else is <=767.
   Per-page tunables: --m-carousel-peek (slide width) · --m-carousel-edge (gutter).
   =========================================================================== */
@media (min-width: 768px) {
  [data-m-carousel] { display: contents; }            /* wrapper vanishes on desktop -> byte-identical */
  [data-m-carousel-dots] { display: none; }
}
@media (max-width: 767px) {
  [data-m-carousel-track] {
    display: flex !important;                          /* beat Tailwind .grid (Play CDN runtime order) */
    grid-template-columns: none !important;            /* defensively kill the residual grid utility */
    gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;                         /* horizontal swipes the carousel; vertical falls through to the page (track is overflow-y:hidden) */
    overscroll-behavior-x: contain;                    /* contain only HORIZONTAL overscroll (no browser back-nav past
                                                          the last card); vertical (y) chains to the page so a swipe-up
                                                          on the cards still scrolls to the next section */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    /* bleed to the section's side padding so card 1 aligns to the text column + the next peeks.
       --m-carousel-edge defaults to league's px-6 (24px); index sets it inline to its own gutter. */
    margin-left: calc(-1 * var(--m-carousel-edge, 24px));
    margin-right: calc(-1 * var(--m-carousel-edge, 24px));
    padding-left: var(--m-carousel-edge, 24px);
    padding-right: var(--m-carousel-edge, 24px);
    scroll-padding-left: var(--m-carousel-edge, 24px);
  }
  /* the global ::-webkit-scrollbar{width:0} only hides VERTICAL bars; a horizontal
     scroller's bar is sized by height -> hide it scoped to the track */
  [data-m-carousel-track]::-webkit-scrollbar { display: none; width: 0; height: 0; }

  [data-m-carousel-slide] {
    flex: 0 0 var(--m-carousel-peek, 85%);             /* ~85% width -> ~15% peek of the next card */
    scroll-snap-align: start; scroll-snap-stop: always;
    min-width: 0;
  }

  [data-m-carousel-dots] {
    display: flex; justify-content: center; gap: 2px;
    margin: 12px 0 0; padding: 0; list-style: none;
  }
  /* the BUTTON is the 44x44 tap target; the visible 8px dot is a CENTERED ::before
     (no negative-inset hit-expander that could overlap a neighbor and steal taps) */
  [data-m-carousel-dot] {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  [data-m-carousel-dot]::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--hairline-strong, #333);
    transition: background-color 220ms ease, transform 220ms ease;
  }
  [data-m-carousel-dot][aria-current="true"]::before {
    background: var(--accent, #ffbe26); transform: scale(1.3);
  }
  [data-m-carousel-dot]:focus-visible { outline: 1px solid var(--accent, #ffbe26); outline-offset: -6px; }

  @media (prefers-reduced-motion: no-preference) {
    [data-m-carousel-track] { scroll-behavior: smooth; }
  }
}

/* ===========================================================================
   E. MOBILE TAP-REVEAL OVERLAY — §A.3 (reusable; league Get Rankd + index §02)
   A trigger [data-m-reveal-trigger="K"] pops its keyed panel
   [data-m-reveal-panel="K"] as a fixed-centered modal over a dim backdrop.
   JS = mobile.js mobileReveal(). Namespaced — independent of accordion/carousel/
   chrome. Inert until a page adds [data-m-reveal]. Panels render normally >=768
   (the hide is <=767 only); the injected close button is display:none until <=767.
   =========================================================================== */
[data-m-reveal-close] { display: none; }            /* hidden on desktop even if injected */

@media (max-width: 767px) {
  /* panels hidden by default (this is what makes a host "trigger-only" on mobile).
     !important beats Tailwind display utilities on the panel (e.g. the .flex tiles)
     regardless of Play CDN runtime injection order. */
  [data-m-reveal-panel] { display: none !important; }
  [data-m-reveal-panel].is-active {
    display: block !important;
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 340px); max-height: 80vh;
    overflow: auto; overscroll-behavior: contain;     /* internal scroll never chains to the page */
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7); /* lift the card off the backdrop */
    z-index: 9301;
  }
  /* nudge the panel's first row right-clear of the corner close button (no big top strip) */
  [data-m-reveal-panel].is-active > :first-child { padding-right: 26px; }

  /* NOTE: the JS portals the active panel to <body> so this z-index sits ABOVE the
     backdrop (no ancestor stacking-context can trap it -> the card renders crisp). */
  [data-m-reveal-backdrop] {
    position: fixed; inset: 0; z-index: 9300;
    background: rgba(8, 8, 8, 0.78);                  /* dim only — NO blur (keep the card crisp) */
    touch-action: none;                               /* absorb swipes so the page can't snap away */
    border: 0; padding: 0; margin: 0; cursor: pointer;
  }

  /* close button injected into each active panel by the JS — a small, bare × in the corner */
  [data-m-reveal-close] {
    position: absolute; top: 4px; right: 6px;
    width: 28px; height: 28px; display: grid; place-items: center;
    background: transparent; border: 0; padding: 0;
    color: var(--ink-tertiary, #6b6b6b);
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 2;
  }
  [data-m-reveal-close]:focus { outline: none; }   /* no ring on tap/programmatic focus-into-dialog */
  [data-m-reveal-close]:hover,
  [data-m-reveal-close]:focus-visible { color: var(--accent, #ffbe26); }
  [data-m-reveal-close]:focus-visible { outline: 1px solid var(--accent, #ffbe26); outline-offset: 1px; }   /* keyboard only */

  @media (prefers-reduced-motion: no-preference) {
    [data-m-reveal-panel].is-active { animation: m-reveal-pop 180ms cubic-bezier(0.4, 0, 0.2, 1); }
    [data-m-reveal-backdrop] { animation: m-reveal-fade 160ms ease; }
  }
}
@keyframes m-reveal-pop {
  from { opacity: 0; transform: translate(-50%, -47%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes m-reveal-fade { from { opacity: 0; } to { opacity: 1; } }