/* ==========================================
   Conduit mobile adaptations
   ==========================================
   Breakpoints (per phase2-mobile.md):
     > 1024px   desktop (default)
     768-1024   tablet (single-column homepage, notes sidebar still visible)
     < 768px    mobile (stacked layouts, larger touch targets, full-screen modals)

   All rules live in media queries so desktop layout is unaffected.
   ========================================== */

/* -------- Tablet (≤ 1024px) ----------------------------------------- */
@media (max-width: 1024px) {
  .home {
    grid-template-columns: 1fr;
  }
  .home-right {
    position: static;
  }

  /* Notes: drop the sidebar's fixed width, keep it in the flow but narrower */
  .notes-layout {
    grid-template-columns: 180px 260px 1fr;
  }
  .notes-layout[data-preset="manage"] {
    grid-template-columns: 180px 360px 1fr;
  }
}

/* -------- Mobile (≤ 768px) ------------------------------------------ */
@media (max-width: 768px) {
  /* Header: drop the clock, let chips wrap, tighten padding */
  .app-header {
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
    gap: var(--sp-3);
  }
  .app-header-right {
    gap: var(--sp-2);
    flex-wrap: wrap;
  }
  .header-clock {
    display: none;
  }
  .chip--icon {
    min-width: 32px;
    min-height: 32px;
  }

  /* Homepage: already single-column via the 1024 rule; tighten padding */
  .home {
    padding: var(--sp-5);
    gap: var(--sp-5);
  }

  /* Library: tighter padding, 2-col shortcut grid (already set at 720) */
  .library {
    padding: var(--sp-5);
  }

  /* Notes page: collapse three columns to a single vertical stack. The
     user sees Sidebar → List → Detail stacked in natural reading order.
     Not a drill-down (that's a v2); this is just "fit on a phone". */
  .notes-layout,
  .notes-layout[data-preset="reader"],
  .notes-layout[data-preset="manage"] {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .notes-page {
    padding: var(--sp-4);
  }
  .notes-sidebar,
  .notes-list-column {
    max-height: 280px;
    overflow-y: auto;
  }

  /* Settings: already single-column at ≤720; make TOC horizontal scroll
     so it doesn't eat vertical space */
  .settings {
    padding: var(--sp-5) !important;
  }
  .settings-toc {
    overflow-x: auto;
  }
  .settings-toc ul {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-4);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
  }
  .settings-toc li {
    flex: 0 0 auto;
  }

  /* Modals: full-screen overlay with zero-radius edge-to-edge card */
  .modal-overlay {
    padding: 0;
  }
  .modal,
  .modal.modal--wide {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
  }
  .modal-body {
    padding: var(--sp-5);
  }
  .modal-head,
  .modal-foot {
    padding: var(--sp-4) var(--sp-5);
  }

  /* Notification popover: same full-screen treatment */
  .notif-popover {
    position: fixed;
    top: 48px;
    left: var(--sp-3);
    right: var(--sp-3);
    width: auto;
    max-height: calc(100vh - 60px);
  }

  /* Touch targets: bigger buttons for mic / tile-menu / row actions */
  .btn-mic,
  .tile-menu,
  .section-menu,
  .task-check,
  .modal-close {
    min-width: 36px;
    min-height: 36px;
  }

  /* Smart bar results dropdown: stretch to card width on mobile */
  .smart-results,
  .smart-provider-picker {
    max-height: 50vh;
  }

  /* Keybindings rows: wrap so the binding chip doesn't crowd on narrow */
  .keybinding-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label actions"
      "display actions";
    gap: var(--sp-2);
  }
  .keybinding-label { grid-area: label; }
  .keybinding-display { grid-area: display; text-align: left; }
  .keybinding-actions { grid-area: actions; }
}

/* -------- Narrow mobile (≤ 480px) ----------------------------------- */
@media (max-width: 480px) {
  /* Wordmark eats header space; hide it on narrow, brand-mark glyph stays */
  .app-header .wordmark {
    display: none;
  }
  /* Shortcut grid drops to a single column so tiles don't feel cramped */
  .shortcut-grid[data-columns] {
    grid-template-columns: 1fr !important;
  }
}