/* ============================================================================
   App shell — mobile/tablet navigation
   ============================================================================
   Owns the hamburger trigger + the drawer's nav-list styling. The drawer
   chrome itself (panel, backdrop, bottom-sheet) comes from the shared
   Drawer.css / BottomSheet.css component styles; this file only styles the
   trigger and the list of pages rendered INSIDE it.

   The desktop `.main-nav` row is hidden ≤768px by style.css (it cannot fit
   the compact rail). This trigger is the replacement. Everything here is
   either desktop-hidden or scoped to the same mobile media query style.css
   uses, so desktop is byte-for-byte unchanged.
   ============================================================================ */

/* Desktop: the real nav row is used; the trigger does not exist visually. */
.shell-nav-toggle {
  display: none;
}

/* Mobile / tablet / any coarse-pointer device — mirrors the media query in
   style.css so the trigger appears exactly when the .nav-btn row is hidden. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .shell-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;          /* pin to the right edge of the header rail */
    flex: 0 0 auto;
    padding: 0;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-fast, 140ms) var(--ease-out, ease),
                background var(--duration-fast, 140ms) var(--ease-out, ease);
  }
  .shell-nav-toggle:hover { background: rgba(255, 255, 255, 0.12); }
  .shell-nav-toggle:active { transform: scale(0.94); }
  .shell-nav-toggle svg { display: block; pointer-events: none; }
}

/* ----------------------------------------------------------------------------
   Drawer / bottom-sheet content — the list of pages
   ---------------------------------------------------------------------------- */
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) 0;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  width: 100%;
  min-height: var(--tap-target-min, 44px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-family: var(--font-ui, inherit);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-medium, 500);
  text-align: left;
  color: var(--color-text, #e6e9ef);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast, 140ms) var(--ease-out, ease);
}

.mobile-nav-item:hover,
.mobile-nav-item:focus-visible {
  background: var(--color-accent-soft, rgba(86, 194, 255, 0.14));
  outline: none;
}

.mobile-nav-item:active {
  background: rgba(255, 255, 255, 0.06);
}

/* Active page — left accent bar + accent text, mirrors desktop .nav-btn.active
   intent without depending on its (desktop-only) styling. */
.mobile-nav-item[aria-current="page"] {
  color: var(--color-accent, #56c2ff);
  background: var(--color-accent-soft, rgba(86, 194, 255, 0.14));
  box-shadow: inset 3px 0 0 0 var(--color-accent, #56c2ff);
}

.mobile-nav-sep {
  height: 1px;
  margin: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--color-border, rgba(255, 255, 255, 0.1));
  border: 0;
}

/* Secondary (utility) actions — sign in/out, report a bug — visually
   lighter than primary page rows. */
.mobile-nav-item.is-utility {
  font-weight: var(--weight-regular, 400);
  color: var(--color-text-muted, #aab3c2);
  font-size: var(--text-sm, 0.875rem);
  min-height: 40px;
}