/* ─────────────────────────────────────────────────────────────────────────
   NXUS — shared mobile optimizations
   Loaded on every view page (after each page's own <style> so its !important
   reserves can be reclaimed by source order). Desktop layout is untouched;
   everything here is scoped to phones (≤640px) except the hamburger styles,
   which are inert until the burger is shown on mobile.

   Pairs with nxus_mobile_nav.js, which builds the hamburger DOM from the
   page's existing nav (top tab bar or floating pill), both hidden on phones.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Kill horizontal page scroll — the #1 cause of "broken" mobile.
     Scoped to the root only: setting overflow-x on <body> would compute its
     overflow-y to auto and turn body into a scroll container, breaking the
     position:sticky;top:0 headers these pages rely on. On <html> the value
     propagates to the viewport and sticky keeps working. */
  html { overflow-x: hidden; }

  /* Media never blows out its container. */
  img, video, canvas { max-width: 100%; height: auto; }

  /* Wide data tables scroll inside their own box instead of the whole page.
     Opt out per-table with data-mobile-keep if a page handles its own reflow. */
  table:not([data-mobile-keep]) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 16px inputs stop iOS Safari's focus auto-zoom; also bumps tiny form text. */
  input, select, textarea { font-size: 16px; }
  body { -webkit-text-size-adjust: 100%; }

  /* Both horizontal nav surfaces are replaced by the hamburger on phones:
     the floating pill, and the top tab bar (the row you'd otherwise have to
     drag/scroll sideways). Hidden here, sourced by nxus_mobile_nav.js. */
  .nxus-nav-wrap,
  .vtabs,
  .view-tabs { display: none !important; }

  /* Reclaim the bottom space pages reserved for the now-hidden floating pill.
     (Most pages set body/container padding-bottom:84px for the pill.) */
  body,
  .queue-panel, .queue-container, .main-content, .content, main {
    padding-bottom: 24px !important;
  }
}

/* ── Hamburger (mobile nav) — DOM injected by nxus_mobile_nav.js ───────────── */
/* Anchored TOP-LEFT as the *leading* item of the header bar (iOS nav-bar style):
   bottom-right collides with the in-app browser toolbar, and the right edge is
   where the queue rows put their action buttons. It does NOT float over the
   wordmark — the .nxus-logo is shifted right (below) to give the button its own
   slot, so the two sit side by side in the bar instead of overlapping. */
.nxus-burger {
  display: none;
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 12px;
  z-index: 1003;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: rgba(11, 15, 28, .92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #cfe0ff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nxus-burger svg { width: 22px; height: 22px; }
.nxus-burger:active { transform: scale(.94); }

.nxus-burger-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 1001;
  background: rgba(4, 6, 12, .6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}
.nxus-burger-overlay.open { opacity: 1; }

/* Drops down from under the top-left FAB. */
.nxus-burger-sheet {
  display: none;
  position: fixed;
  z-index: 1002;
  top: max(70px, calc(env(safe-area-inset-top) + 58px));
  left: 12px; right: 12px;
  background: rgba(13, 16, 26, .98);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
  padding: 6px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform .22s cubic-bezier(.34, 1.3, .64, 1), opacity .18s ease;
}
.nxus-burger-sheet.open { transform: translateY(0); opacity: 1; }

.nxus-burger-sheet-title {
  font: 600 11px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: #5b6a8f;
  padding: 10px 12px 8px;
}
.nxus-burger-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: #c7d2e6;
  font: 600 15px/1.1 'Outfit', system-ui, sans-serif;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.nxus-burger-item:active { background: rgba(255, 255, 255, .05); }
.nxus-burger-item.active { background: rgba(77, 142, 247, .12); }
.nxus-burger-ico {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
}
.nxus-burger-ico svg { width: 18px; height: 18px; }

/* Watch list folded into the sheet (replaces the floating pin dock on mobile). */
.nxus-burger-sep { height: 1px; background: rgba(255, 255, 255, .07); margin: 6px 10px; }
.nxus-burger-watch-title {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: #5b6a8f;
  padding: 10px 12px 8px;
}
.nxus-burger-watch-count {
  min-width: 18px; height: 18px; padding: 0 6px; line-height: 18px;
  border-radius: 9px; font: 700 10px/18px 'JetBrains Mono', monospace;
  text-align: center; background: #ffb340; color: #0f1218;
}
.nxus-burger-watch-count.zero { background: #2a2f3d; color: #6b7394; }
.nxus-burger-watch-empty {
  padding: 6px 14px 12px;
  color: #6b7394; font: 400 12px/1.4 'Outfit', system-ui, sans-serif; font-style: italic;
}
.nxus-burger-watch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  cursor: pointer; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.nxus-burger-watch-row:active { background: rgba(255, 255, 255, .05); }
.nxus-burger-watch-wo {
  font: 600 14px/1 'JetBrains Mono', monospace; color: #e1e6f3; letter-spacing: .02em;
}
.nxus-burger-watch-remove {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); border: none;
  color: #9ba3c4; font-size: 15px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nxus-burger-watch-remove:active { background: rgba(255, 77, 106, .15); color: #ff4d6a; }

@media (max-width: 640px) {
  .nxus-burger { display: flex; }
  /* Pins are folded into the hamburger sheet on phones — hide the floating dock. */
  .nxus-pin-dock { display: none !important; }
  /* Reserve the leading slot so the wordmark sits beside the hamburger, never
     under it (the button spans ~12–56px from the left). Every header opens with
     the shared .nxus-logo, so this shifts the brand on every page consistently. */
  .nxus-logo { margin-left: 52px !important; }
}
