/* ────────────────────────────────────────────────────────────────────────
   Showrunner — Mobile overrides (Tier 1)
   ────────────────────────────────────────────────────────────────────────
   Touch targets, swipeable tabs, mobile-only bottom action bar.
   Layered on top of shell.css + components.css.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Touch-friendly hit areas at ≤768px ───────────────────────────────── */
@media (max-width: 768px) {

  /* Buttons: visual size stays the same, but enforce 44×44 min hit area */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  .btn[data-size="sm"] {
    min-height: 40px;
  }

  /* Sidebar items — easier to tap */
  .sidebar-item {
    min-height: 44px;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-md);
  }
  .sidebar-item-icon {
    width: 20px;
    height: 20px;
  }
  .sidebar-search { min-height: 44px; }
  .sidebar-account { min-height: 56px; }

  /* Inputs: bump to 16px font size to disable iOS auto-zoom on focus */
  .input, .textarea, .select {
    font-size: 16px;
    min-height: 44px;
    height: auto;
    padding: var(--space-3);
  }

  /* Tabs become horizontally scrollable */
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 var(--space-3);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0;
    min-height: 44px;
    scroll-snap-align: start;
    padding: var(--space-3) var(--space-3);
  }

  /* Toast: full width on mobile */
  .toast-region {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--mobile-action-bar-height, 0px) + var(--space-3));
  }
  .toast { max-width: none; width: 100%; }

  /* Modal: full screen on mobile */
  .modal-region:not(:empty) {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Page padding reduction */
  .app-page {
    padding: var(--space-4) var(--space-4) calc(var(--space-12) + var(--mobile-action-bar-height, 0px));
  }

  /* Phase strip stacks two-up on mobile (already in components.css but reinforce) */
  .phase-strip { grid-template-columns: repeat(2, 1fr); }
  .phase-cell { padding: var(--space-3); }

  /* Stats: full width single column */
  .grid-stats { grid-template-columns: 1fr 1fr; }

  /* Context strip (Lead Workspace) — adapt to vertical layout */
  .context-strip {
    padding: var(--space-3) var(--space-4) var(--space-2);
    position: sticky;
    top: var(--topbar-height);
  }
  .context-row { flex-wrap: wrap; gap: var(--space-2); }
  .context-actions {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: var(--space-2);
    overflow-x: auto;
  }

  /* Hide the sidebar quick-search on small screens — Cmd-K doesn't apply */
  .sidebar-search { display: none; }

  /* Topbar tightening */
  .app-topbar { padding: 0 var(--space-4); }
  .topbar-actions .btn:not([data-icon-only="true"]) {
    /* Show icon only on mobile to save space */
  }
}

/* ── Mobile-only bottom action bar (Lead Workspace) ───────────────────── */
.mobile-action-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  display: none;
  align-items: stretch;
  z-index: var(--z-sticky);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Only honor data-visible on mobile viewports. Without this gate, the JS
   (which sets data-visible="true" unconditionally) would override the
   default `display: none` and leak the bar onto desktop as a fake footer. */
@media (max-width: 768px) {
  .mobile-action-bar[data-visible="true"] { display: flex; }
}

.mab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
  min-height: 44px;
  text-decoration: none;
}
.mab-btn:hover, .mab-btn:active { color: var(--text-1); background: var(--surface-3); }
.mab-btn[data-tone="brand"] { color: var(--brand-400); }
.mab-btn[data-tone="brand"]:hover { color: var(--brand-300); }
.mab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
  body { --mobile-action-bar-height: 56px; }
}

/* ── Sidebar overlay scrim on mobile ──────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: calc(var(--z-modal) - 1);
    display: none;
  }
  .sidebar-scrim[data-visible="true"] { display: block; }

  /* Topbar gets a hamburger on mobile */
  .app-topbar .topbar-mobile-trigger {
    display: inline-flex;
  }
}
.topbar-mobile-trigger { display: none; }

/* ── Larger landing card on mobile auth pages ─────────────────────────── */
@media (max-width: 768px) {
  .auth-shell { padding: var(--space-4); }
  .auth-card { padding: var(--space-6); border-radius: var(--radius-lg); }
  .auth-title { font-size: var(--text-xl); }
}

/* ── Safe area insets for iOS notch / home bar ────────────────────────── */
.app-shell {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Increased tap area without visual change — pseudo padding */
.tap-area-pad { position: relative; }
.tap-area-pad::before {
  content: '';
  position: absolute;
  inset: -8px;
  /* makes a transparent halo so a 28px-tall element still has 44px hit area */
}