/* ──────────────────────────────────────────────────────────────────
   Global BETA pill styling — fallback for any page that didn't define
   .brand .tag in its own inline <style> block. Scoped to .brand .tag
   so we don't accidentally restyle other .tag uses (e.g. <span class=
   "tag new"> inside changelog list items). Applied 2026-04-25 after
   visual sweep caught activity/battles/academy showing plain "BETA"
   text instead of mint pill.
   ────────────────────────────────────────────────────────────────── */
.brand .tag, .topbar .brand .tag {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  background: rgba(0, 229, 160, 0.12);
  color: #00e5a0;
  border-radius: 2px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────
   Vorepo mobile defensive fixes (2026-04-25).
   Loaded on every page AFTER inline <style> so it overrides safely.
   Goal: prevent horizontal page scroll + make wide tables tappable
   without breaking any page's bespoke layout.
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Defense against any wide child overflowing the viewport. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Tables: fall back to horizontal scroll on small viewports.
     Pages with bespoke mobile table CSS (alerts.html, status.html,
     etc.) override this with `display: block` rules in their own
     inline <style> — those still win because more-specific selectors. */
  table:not([data-mobile-handled]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }

  /* Common pattern: code blocks / pre */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
  }

  /* Form inputs sometimes have explicit width — clamp to viewport. */
  input, select, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Min tap target (Apple/Google guideline 44×44). Apply only to
     bare buttons that don't have explicit min-height already.
     Skip floating fixed-position buttons (hamburger, theme toggle, close —
     they have their own 32×32 sizing intentionally). */
  button:not([class*="icon"]):not([class*="close"]):not(#vorepo-mnav-btn):not(#vorepo-theme-btn):not(#vorepo-mnav-close):not(#vorepo-cmdk-input) {
    min-height: 40px;
  }

  /* Ticker tape labels can crowd on tiny viewports — shrink mono. */
  .ticker-tape, .tt-stream {
    font-size: 11px;
  }
}

/* Smallest devices (≤375px iPhone SE etc.) */
@media (max-width: 375px) {
  .topbar-inner, .footer-inner, .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Global topbar declutter on mobile/tablet (<=900px).
   At narrow viewports, multiple ghost CTAs (Open Terminal, Log In) +
   primary Sign Up + theme toggle + hamburger overflow → primary CTA
   gets clipped to "Sign". Keep ONLY the primary action visible; ghost
   CTAs are reachable via the hamburger drawer. Applied 2026-04-25
   after visual sweep caught it on leaderboard/docs/pricing/repo-demo
   /portfolio/status (any page with own inline <style>, not just legal).
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hyper-specific to beat any JS-injected inline styles. */
  html body header.topbar .nav-right a.btn.btn-ghost,
  html body header.topbar .nav-right a.btn-ghost,
  html body .topbar .nav-right .btn-ghost {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body header.topbar .nav-right a.btn.btn-primary,
  html body .topbar .nav-right .btn-primary {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  .topbar-inner { gap: 10px !important; }
}