/* ── Left sidebar (Courtyard-style icon rail), site-wide on non-admin pages ── */
    .page-sidebar .sidebar { display:flex !important; top:60px !important; height:calc(100vh - 60px) !important; }
    body.page-sidebar { overflow-x:hidden !important; overflow-y:auto !important; }
    .page-sidebar .main-wrapper {
      margin-left:var(--sidebar-width) !important;
      min-width:0 !important;
      max-width:calc(100% - var(--sidebar-width)) !important;
    }
    .page-sidebar .main-wrapper.sidebar-collapsed {
      margin-left:var(--sidebar-collapsed-width) !important;
      max-width:calc(100% - var(--sidebar-collapsed-width)) !important;
    }
    .page-sidebar .main-wrapper > main { min-width:0 !important; width:100% !important; }
    .page-sidebar .main-wrapper, .page-sidebar .main-wrapper.sidebar-collapsed { height:auto !important; min-height:100vh !important; overflow:visible !important; }
    /* Single scroll container ≤900px. html is the vertical scroller AND the horizontal
       clip (overflow-x:hidden coerces overflow-y→auto, per the note in style.css). body
       must NOT also be a scroll container: some embedded WebViews route the wheel/touch
       to body, which can't scroll (it grows to content height), so the page moves then
       snaps back — while html/body being nested auto/auto is the fragility. Keeping body
       overflow:visible leaves html as the only scroller; the horizontal clip still lives
       on html. Exclude the drawer-open state so its position:fixed scroll-lock holds. */
    @media (max-width:900px){ body.page-sidebar:not(.mobile-menu-open){ overflow:visible !important; } }
    .page-sidebar .sidebar.collapsed .sidebar-brand { display:none !important; }
    .page-sidebar .sidebar.collapsed .sidebar-link-text, .page-sidebar .sidebar.collapsed .sidebar-section-label, .page-sidebar .sidebar.collapsed .sidebar-user-details, .page-sidebar .sidebar.collapsed .sidebar-cta-btn .sidebar-link-text { display:none !important; }
    .page-sidebar .sidebar.collapsed .sidebar-link { justify-content:center !important; padding-left:0 !important; padding-right:0 !important; }
    .page-sidebar .sidebar.collapsed .sidebar-header { justify-content:center !important; }
    /* Collapsed: section labels (Account/Admin/…) are hidden, so draw a hairline above each labelled group
       so the icon groups stay visually separated. :has() targets exactly the sections that had a label. */
    .page-sidebar .sidebar.collapsed .sidebar-nav-section:has(.sidebar-section-label) { margin-top:14px !important; padding-top:14px !important; border-top:1px solid rgba(255,255,255,0.09) !important; }
    .page-sidebar .vaultr-topnav-links { display:none !important; }
    .page-sidebar .vaultr-topnav { grid-template-columns:1fr auto !important; }
    /* ≤960 the hamburger appears (far left): [burger][vaultr] ..... [auth] */
    @media (max-width:960px){ .page-sidebar .vaultr-topnav { grid-template-columns:auto auto 1fr !important; } }
    @media (max-width:900px){
      .page-sidebar .sidebar { top:0 !important; height:100vh !important; }
      /* When closed on a phone the sidebar is a FULL-VIEWPORT-HEIGHT fixed layer
         slid offscreen with translateX(-100%). On its own iOS Safari tolerates it,
         but the moment a second fixed layer appears (the XP sheet after a pack
         open) WebKit's compositing flips and this offscreen layer -- which spans
         the bottom pill zone -- is what makes Safari paint its opaque black tray
         across the bottom of the screen (founder catch 2026-08-19; moving the
         sheet itself did nothing, which is how this was found: diffing the fixed
         layer tree in real WebKit 26.5). visibility:hidden removes it from
         compositing while closed; the element stays in layout for the JS that
         reads it, and it is shown again the instant .mobile-open is set. */
      .page-sidebar .sidebar:not(.mobile-open) { visibility:hidden !important; }
      .page-sidebar .sidebar.mobile-open { visibility:visible !important; }
      .page-sidebar .main-wrapper, .page-sidebar .main-wrapper.sidebar-collapsed {
        margin-left:0 !important;
        width:100% !important;
        max-width:100% !important;
      }
      /* Mobile drawer: slides in ABOVE the topnav (z 1000). */
      .page-sidebar .sidebar.mobile-open { z-index:1200 !important; box-shadow:0 0 60px rgba(0,0,0,.65); }
      .page-sidebar .sidebar-overlay.active { z-index:1100; }
      /* The per-element "expanded nav" rules that used to live here (brand, label,
         section label, user details, link padding, header, toggle) are gone on
         purpose. They keyed the drawer's LAYOUT to .mobile-open, which is set on the
         same frame the slide starts — so the nav reflowed while it was moving. They
         now live unconditionally in #drawer-nav-override below, where they also
         out-rank the .collapsed icon-rail rules. Re-adding a .mobile-open layout
         rule here reintroduces the reflow: at (0,4,0) it would beat the unconditional
         (0,3,0) rules whenever 'collapsed' is absent. */
    }
    

      @media (max-width: 768px) {
        *, *::before, *::after {
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }
        /* NOTE: do NOT re-add backdrop-filter to .vaultr-topnav here. It makes
           the topnav a containing block for its position:fixed descendants, which
           trapped the weekly-challenges bottom sheet + its full-screen backdrop
           inside the 60px nav box — the sheet became undismissable on iOS
           (regression 2026-07-03, reverted). Desktop keeps its blur via style.css. */
        /* Body-level overscroll-contain stays (prevents pull-to-refresh
           weirdness on iOS), but the global `* { touch-action: pan-y }`
           rule that lived here is REMOVED. It was a speculative fix for
           the dead-zone bug that turned out to be unrelated (real cause
           was .main-wrapper overflow:auto, fixed in 309bc624). The rule
           overrode tappable elements' `touch-action: manipulation` and
           was eating clicks on the mobile drawer links — user couldn't
           tap Packs/Marketplace/etc. until refresh (2026-05-24 14:01). */
        html, body { overscroll-behavior-y: contain; }
        /* Mobile intentionally disables backdrop blur for compositor stability.
           Keep the fixed nav opaque enough that page text cannot show through it. */
        .vaultr-topnav { background: rgba(9,9,11,0.98) !important; }
        /* Kill Tawk.to-injected iframes/containers on mobile. User
           reported "box in the middle of the screen where you can't
           scroll" on /packs, refresh fixes it — classic signature of an
           async-loaded iframe (Tawk) sized unpredictably on mobile and
           absorbing touch events in its bounding box. The CSS selectors
           cover both the current Tawk widget IDs and the generic iframe
           pointing at the Tawk origin. Desktop chat still works. */
        iframe[src*="tawk.to"],
        iframe[src*="tawk_"],
        iframe[id^="tawk-"],
        iframe[title*="tawk" i],
        [id^="tawk-"],
        [class*="tawk-"],
        .widget-visible {
          display: none !important;
          pointer-events: none !important;
          visibility: hidden !important;
        }
        /* Belt-and-suspenders: Tawk's initial bootstrap iframe is
           src="about:blank" with a RANDOM id (e.g. "bmpkog814ev81780011766861")
           that the selectors above don't catch. It loads ~300ms after
           page paint, sizes itself to ~353x545 over the viewport, and
           intercepts every tap until the user navigates away. Confirmed
           via Playwright WebKit reproduction 2026-05-28. Killing all
           about:blank iframes on mobile — the only legitimate iframe we
           load is the Coinflow checkout which uses coinflow.cash URLs.
           Coinflow URL never matches about:blank, so this is safe. */
        iframe[src="about:blank"]:not(#cf-frame):not(#wd-frame):not(#dsFrame),
        iframe:not([src]):not(#cf-frame):not(#wd-frame):not(#dsFrame) {
          display: none !important;
          pointer-events: none !important;
          visibility: hidden !important;
        }
      }
    
{# resume the original <style> block — kept the structure intact #}
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }
    

    /* ── Phygitals-style nav: no persistent rail. The hamburger opens a slide-out
       drawer at ALL widths (the existing ≤900 mobile behavior, promoted site-wide).
       Content-side rules are scoped to .mobile-open so they out-specify the
       `.sidebar.collapsed` icon-rail rules (both 0,4,0; later source wins). ── */

    /* Content spans the full width — the rail no longer reserves a column */
    .page-sidebar .main-wrapper,
    .page-sidebar .main-wrapper.sidebar-collapsed {
      margin-left: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
    }

    /* ── No selection, no tap flash, no stuck hover in the drawer ──────────
       (founder call 2026-08-29: "there should never be a colour change or
       highlight when selecting something")

       Three separate effects were all landing on a tap and reading as "this row
       is selected":

       1. TEXT SELECTION. A tap that drifts a pixel, or any long-press, selects
          the row's label and iOS paints its selection tint over the whole line.
          This is the one that produces the ringed row in the screenshot — the
          drawer is a nav, so nothing in it should ever be selectable.
       2. TAP HIGHLIGHT. WebKit's default -webkit-tap-highlight-color paints a
          translucent block over the tapped element. Suppressed elsewhere in the
          app (buttons, modals, the keypad) but never here.
       3. STICKY HOVER. .sidebar-link:hover has a background, and a touch device
          latches :hover on the last thing tapped, so a row stayed lit after the
          finger left. It is now behind @media (hover:hover), so pointer devices
          keep the affordance and touch never sees it.

       .sidebar-link.active is deliberately untouched: that is the CURRENT PAGE
       marker, not a selection state, and it is set server-side rather than by
       the tap. */
    .page-sidebar .sidebar,
    .page-sidebar .sidebar * {
      -webkit-tap-highlight-color: transparent !important;
      -webkit-touch-callout: none !important;
      -webkit-user-select: none !important;
      user-select: none !important;
    }
    .page-sidebar .sidebar a:focus,
    .page-sidebar .sidebar a:focus-visible,
    .page-sidebar .sidebar button:focus,
    .page-sidebar .sidebar button:focus-visible { outline: none !important; }
    /* Kill the latched hover on touch; restore it only where a real pointer is. */
    @media (hover: none) {
      .page-sidebar .sidebar .sidebar-link:hover { background: transparent !important; }
    }

    /* Sidebar becomes an off-canvas drawer everywhere (was a fixed icon rail) */
    .page-sidebar .sidebar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      /* See .sidebar in style.css: svh pins the drawer to the viewport WITH
         browser chrome, so the options hold still while the bar slides. */
      height: 100vh !important;
      height: 100svh !important;
      width: 300px !important;
      max-width: 86vw !important;
      display: flex !important;
      flex-direction: column !important;
      background: #0d0d0f !important;
      border-right: 1px solid #1f1f1f !important;
      transform: translateX(-100%);
      transition: transform .28s cubic-bezier(.22,1,.36,1);
      visibility: hidden;
      z-index: 1200 !important;
    }
    .page-sidebar .sidebar.mobile-open {
      transform: translateX(0);
      visibility: visible !important;
      box-shadow: 0 0 60px rgba(0,0,0,.6);
    }

    /* Backdrop at all widths */
    .page-sidebar .sidebar-overlay {
      position: fixed !important; inset: 0 !important;
      background: rgba(0,0,0,.55) !important;
      opacity: 0; visibility: hidden;
      transition: opacity .25s ease !important;
      z-index: 1100 !important;
    }
    .page-sidebar .sidebar-overlay.active { opacity: 1 !important; visibility: visible !important; }

    /* Hamburger always present; give it a grid slot in the topnav */
    .page-sidebar .vaultr-hamburger,
    .page-sidebar #vaultrHamburger { display: inline-flex !important; align-items: center !important; }
    body.page-sidebar .vaultr-topnav {
      display: flex !important; align-items: center !important;
      gap: 14px !important; flex-wrap: nowrap !important;
      grid-template-columns: none !important;
    }
    body.page-sidebar .vaultr-topnav-auth { margin-left: auto !important; }

    /* The drawer renders the FULL nav (never the collapsed icon rail), all widths.
       These are deliberately NOT scoped to .mobile-open. That class is added at the
       same instant the slide starts, so scoping layout to it meant the first painted
       frames used the closed icon-rail geometry (labels display:none, links centred,
       no side padding, bare 20px icons) and the rows visibly reflowed into place
       during the 280ms slide. The sidebar is off-canvas + visibility:hidden at every
       width (see above), so it is only ever SEEN open — the expanded geometry is
       therefore safe as the resting state, and .mobile-open is left to drive nothing
       but transform/visibility/box-shadow. Each rule is also written against
       `.sidebar.collapsed` so it out-ranks the (0,4,0) icon-rail rules earlier in
       this head; `collapsed` is still on the element at load and its presence must
       not change a single measurement. */
    .page-sidebar .sidebar .sidebar-brand,
    .page-sidebar .sidebar.collapsed .sidebar-brand { display: flex !important; padding: 0 !important; margin: 0 !important; }
    .page-sidebar .sidebar .sidebar-link-text,
    .page-sidebar .sidebar.collapsed .sidebar-link-text,
    .page-sidebar .sidebar .sidebar-cta-btn .sidebar-link-text,
    .page-sidebar .sidebar.collapsed .sidebar-cta-btn .sidebar-link-text { display: inline !important; opacity: 1 !important; width: auto !important; font-size: .98rem !important; }
    .page-sidebar .sidebar .sidebar-user-details,
    .page-sidebar .sidebar.collapsed .sidebar-user-details { display: block !important; }
    .page-sidebar .sidebar .sidebar-toggle,
    .page-sidebar .sidebar.collapsed .sidebar-toggle { display: none !important; }
    .page-sidebar .sidebar .sidebar-header,
    .page-sidebar .sidebar.collapsed .sidebar-header { justify-content: flex-start !important; padding: 10px 12px 10px 22px !important; }
    /* Collapsed drew a hairline above each labelled group to stand in for the hidden
       label. The labels are always shown here, so that border must not come back. */
    .page-sidebar .sidebar .sidebar-nav-section:has(.sidebar-section-label),
    .page-sidebar .sidebar.collapsed .sidebar-nav-section:has(.sidebar-section-label) { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
    /* Drawer header: wordmark only, drop the circular logo mark */
    .page-sidebar .sidebar .vaultr-logo-icon { display: none !important; }

    /* Phygitals link treatment: rounded icon chip + label, rounded active highlight */
    .page-sidebar .sidebar .sidebar-nav,
    .page-sidebar .sidebar.collapsed .sidebar-nav { padding: 10px 12px !important; gap: 3px !important; }
    .page-sidebar .sidebar .sidebar-link,
    .page-sidebar .sidebar.collapsed .sidebar-link {
      display: flex !important; align-items: center !important; gap: 14px !important;
      justify-content: flex-start !important;
      padding: 7px 10px !important; margin: 0 !important;
      border-radius: 12px !important; color: #ededed !important; font-weight: 600 !important;
      /* Colour only. `transition: all` (style.css) animated the padding/gap/radius
         deltas above, which is what stretched the reflow out long enough to see. */
      transition: background-color .15s ease, color .15s ease !important;
    }
    .page-sidebar .sidebar .sidebar-link:hover { background: #18181b !important; }
    .page-sidebar .sidebar .sidebar-link.active { background: #1f1f22 !important; }
    .page-sidebar .sidebar .sidebar-link svg,
    .page-sidebar .sidebar.collapsed .sidebar-link svg {
      width: 40px !important; height: 40px !important; padding: 10px !important;
      box-sizing: border-box !important; flex: 0 0 auto !important;
      background: #1c1c1f !important; border: 1px solid #2a2a2e !important;
      border-radius: 11px !important; color: #e6e6e6 !important;
    }
    .page-sidebar .sidebar .sidebar-link.active svg { background: #2a2a2e !important; }
    .page-sidebar .sidebar .sidebar-section-label,
    .page-sidebar .sidebar.collapsed .sidebar-section-label {
      display: block !important; height: auto !important; opacity: 1 !important;
      color: #8a8a8a !important; font-size: .7rem !important; font-weight: 700 !important;
      letter-spacing: .09em !important; text-transform: uppercase !important;
      padding: 16px 12px 6px !important;
    }