/* mobile.css — Mobile-friendly overrides for W4H
   Activates below 768px on real viewport OR when body has .narrow class (device frame).
*/

@media (max-width: 768px) {
  /* ──────────────────────────────────────────────────────────
     LANDING
     ────────────────────────────────────────────────────────── */
  .landing-topbar {
    padding: 14px 18px !important;
  }
  .landing-topbar > div:first-child span[class*="mono"] {
    display: none;  /* hide version badge */
  }
  .landing-nav {
    gap: 2px !important;
  }
  /* Hide in-page nav links on mobile, keep only auth buttons */
  .landing-nav > button:nth-child(-n+4) {
    display: none !important;
  }

  .landing-hero {
    padding: 48px 20px 32px !important;
  }
  .landing-hero h1 {
    font-size: clamp(44px, 11vw, 64px) !important;
  }
  .landing-hero p {
    font-size: 16px !important;
    margin-top: 20px !important;
  }
  .landing-hero > div:first-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .landing-hero > div:nth-of-type(2) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .landing-hero > div:nth-of-type(2) button {
    width: 100% !important;
  }

  /* hero canvas – keep aspect but allow smaller height */
  .landing-hero > div[class*="grain"] {
    height: 240px !important;
    padding: 20px !important;
    margin-top: 40px !important;
  }

  /* Value props grid → single column */
  .landing-values {
    padding: 40px 20px !important;
  }
  .landing-values > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* How it works */
  .landing-how {
    padding: 40px 20px !important;
  }
  .landing-how h2 {
    font-size: 32px !important;
  }
  .landing-how-row {
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "num title"
      "num body"
      ". arrow" !important;
    gap: 2px 14px !important;
    padding: 20px 0 !important;
  }
  .landing-how-row > :nth-child(1) { grid-area: num; align-self: start; padding-top: 6px; }
  .landing-how-row > :nth-child(2) { grid-area: title; font-size: 22px !important; }
  .landing-how-row > :nth-child(3) { grid-area: body; margin-top: 4px; }
  .landing-how-row > :nth-child(4) { display: none !important; }

  /* Pricing */
  .landing-pricing {
    grid-template-columns: 1fr !important;
    padding: 32px !important;
    margin: 20px 20px 60px !important;
    gap: 24px !important;
  }
  .landing-pricing h3 {
    font-size: 38px !important;
  }

  /* ──────────────────────────────────────────────────────────
     ONBOARDING
     ────────────────────────────────────────────────────────── */
  .onboarding-shell {
    flex-direction: column !important;
  }
  .onboarding-rail {
    width: 100% !important;
    padding: 20px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .onboarding-rail > div:last-child {
    position: static !important;
    margin-top: 16px !important;
  }

  /* ──────────────────────────────────────────────────────────
     APP SHELL
     ────────────────────────────────────────────────────────── */
  .app-sidebar {
    position: fixed !important;
    left: 0; top: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
    width: 280px !important;
  }
  .app-shell[data-sidebar-open="true"] .app-sidebar {
    transform: translateX(0);
  }
  .app-shell[data-sidebar-open="true"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 40;
  }

  .app-topbar {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .app-topbar-search {
    width: auto !important;
    flex: 1;
  }
  .app-topbar-search input {
    font-size: 13px !important;
  }
  .app-topbar-search span[class*="mono"] {
    display: none !important;  /* hide ⌘K badge */
  }
  /* Hide less-essential topbar buttons on mobile */
  .app-topbar > div:last-child > button:nth-child(2) {
    display: none !important;  /* bell */
  }
  .app-topbar > div:last-child > span {
    display: none !important;  /* divider */
  }
  .app-topbar > div:last-child > button:last-child span.mono {
    display: none !important;  /* handle text in role pill */
  }
  .app-topbar > div:last-child > button:last-child span:nth-child(3) {
    display: none !important;  /* dot separator in role pill */
  }

  .app-content {
    padding: 16px !important;
  }

  /* ──────────────────────────────────────────────────────────
     CHAT
     ────────────────────────────────────────────────────────── */
  .chat-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    position: relative;
  }
  .chat-threadlist {
    display: none !important;
  }
  .chat-context {
    display: none !important;
  }
  .chat-grid[data-pane="threads"] .chat-threadlist { display: block !important; }
  .chat-grid[data-pane="threads"] .chat-messages { display: none !important; }
  .chat-grid[data-pane="context"] .chat-context { display: block !important; border-left: none !important; }
  .chat-grid[data-pane="context"] .chat-messages { display: none !important; }

  /* ──────────────────────────────────────────────────────────
     PROFILE / SPECIMENS
     ────────────────────────────────────────────────────────── */
  .profile-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .specimens-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ──────────────────────────────────────────────────────────
     SCREEN NAV (bottom pill) — scrollable horizontally
     ────────────────────────────────────────────────────────── */
  .screen-nav {
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    bottom: 8px !important;
    padding: 3px !important;
  }
  .screen-nav::-webkit-scrollbar { display: none; }
  .screen-nav button {
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    flex-shrink: 0;
  }

  /* ──────────────────────────────────────────────────────────
     TWEAKS PANEL — bottom sheet on mobile
     ────────────────────────────────────────────────────────── */
  .tweaks-panel {
    top: auto !important;
    bottom: 60px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ──────────────────────────────────────────────────────────
   Hamburger button — hidden on desktop, visible on mobile
   ────────────────────────────────────────────────────────── */
.mobile-menu-btn {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-2);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: inline-flex;
  }
}