/* pool-shell.css — 2026-09-26 static batch (#1)
   Mobile menu fix for all pool pages (index, status, proof, merge).
   Root cause: pool-append.css / theme.css tail set `.topbar-meta{display:flex}` unconditionally,
   overriding the mobile `display:none`; and `.topbar` backdrop-filter makes the fixed menu
   resolve against the 68px header, so it rendered as an opaque strip covering the logo.
   Loaded LAST so it wins. No colour changes here (merge styling untouched). */

.nav-toggle[hidden] { display: none !important; }

@media (max-width: 960px) {
  /* fixed children must resolve against the viewport, not the header */
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 8, 9, 0.96);
  }
  .topbar-inner { position: relative; }
  .brand { position: relative; z-index: 121; min-width: 0; }

  .topbar-meta,
  #site-nav.topbar-meta {
    display: none !important;
    position: fixed;
    inset: auto;
    top: var(--header-h, 4.25rem);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    z-index: 110;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.25rem 2rem;
    overflow-y: auto;
    background: #0a0809;
    border-top: 1px solid var(--chrome-border, rgba(58, 42, 44, 0.55));
  }
  body.nav-open .topbar-meta,
  body.nav-open #site-nav.topbar-meta { display: flex !important; }

  .topbar-meta .chip { align-self: flex-start; }
  .topbar-meta .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin: 0;
  }
  .topbar-meta .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
    border-radius: var(--radius-sm, 10px);
  }
  .topbar-meta .nav-links--sub {
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-subtle, rgba(58, 42, 44, 0.55));
  }
  .nav-toggle { display: inline-flex; }
}

/* small phones: keep wordmark and status pill from touching */
@media (max-width: 420px) {
  .topbar-inner { gap: 0.4rem; }
  .brand { gap: 0.5rem; }
  .brand-text h1 { font-size: 0.95rem; }
  .topbar-end { gap: 0.35rem; }
  .topbar-end .status-badge { font-size: 0.66rem; padding: 0.25rem 0.5rem; gap: 0.3rem; white-space: nowrap; }
}