/* =========================================================================
   SiteOS — phone layout (≤760px)
   Off-canvas drawer, floating ink bottom nav, bottom-sheet modals.
   ========================================================================= */

.bottom-nav { display: none; }

@media (max-width: 760px) {
  :root { --topbar: 62px; }
  /* Keep focused elements clear of the floating bottom nav. */
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Drawer */
  .main, .app.rail .main { margin-left: 0; }
  .sidebar {
    z-index: 60;   /* above the bottom nav */
    width: 280px; transform: translateX(-102%);
    box-shadow: none; background: var(--bg);
    border-radius: 0 28px 28px 0;
  }
  .app.drawer-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar [data-act='collapse'] { display: none; }
  .sidebar .side-theme { display: inline-grid; }
  .nav-group + .nav-group { margin-top: 10px; }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 59;
    background: rgba(10,12,9,.38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .28s var(--ease);
  }
  .app.drawer-open .scrim { opacity: 1; pointer-events: auto; }

  /* Topbar */
  .topbar { padding: 0 16px; gap: 8px; padding-top: env(safe-area-inset-top); height: calc(var(--topbar) + env(safe-area-inset-top)); }
  .topbar .menu-btn { display: inline-grid; }
  .topbar [data-act='theme'] { display: none; }   /* lives in the drawer footer on phones */
  .search-btn { flex: none; width: 40px; min-width: 0; height: 40px; padding: 0; justify-content: center; }
  .search-btn span, .search-btn kbd { display: none; }
  .new-btn, .sync-badge .sync-text { display: none; }
  .sync-badge { width: 28px; padding: 0; justify-content: center; }
  .site-pill { height: 40px; padding: 0 10px 0 12px; flex: 0 1 auto; }

  /* Page */
  .page { padding: 4px 16px calc(104px + env(safe-area-inset-bottom)); }
  .page-head { margin: 6px 0 18px; align-items: flex-start; }
  .page-title { font-size: 28px; }
  .page-sub { font-size: 14px; }
  .page-actions { width: 100%; }
  .page-actions > .btn { flex: 1; }

  .list-row { flex-wrap: wrap; }
  .list-row > .list-main { flex: 1 1 150px; }
  .grid > [class*='span-'], .span-3.keep { grid-column: span 12; }
  .grid > .span-3.keep, .grid > .span-6.keep { grid-column: span 6; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px; gap: 10px; }
  .kpi-top { gap: 8px; font-size: 12.5px; }
  .kpi-ic { width: 24px; height: 24px; border-radius: 8px; }
  /* Two lines for list titles on phones, so they stay readable next to chips and actions. */
  .list-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kpi-val { font-size: 25px; }
  .card { padding: 18px; border-radius: 24px; }
  .card-foot { margin: 16px -18px -18px; padding: 12px 18px; }
  .card.flush .table th:first-child, .card.flush .table td:first-child { padding-left: 18px; }
  .shortcuts { grid-template-columns: 1fr; }

  /* Bottom sheets */
  .modal-back { place-items: end stretch; padding: 0; padding-top: 40px; }
  .modal, .modal.sm, .modal.md, .modal.lg, .modal.xl {
    max-width: none; max-height: calc(100dvh - 40px);
    border-radius: 28px 28px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheetIn .42s var(--ease) both;
  }
  .modal-back.closing .modal { animation: sheetOut .22s var(--ease) both; }
  .sheet-handle { display: block; padding: 10px 0 2px; cursor: grab; touch-action: none; flex: none; }
  .sheet-handle::before { content: ''; display: block; width: 40px; height: 5px; margin: 0 auto; border-radius: 999px; background: var(--border-2); }
  .modal-head { padding-top: 10px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot > .btn { flex: 1; }
  .modal.confirm .modal-body { padding-top: 14px; }
  @keyframes sheetIn { from { transform: translateY(100%); } }
  @keyframes sheetOut { to { transform: translateY(100%); } }

  .palette-back { padding: 10px 10px; }
  .palette { border-radius: 24px; }
  .pal-foot, .pal-item .pal-hint { display: none; }

  .toasts { left: 12px; right: 12px; align-items: center; bottom: calc(88px + env(safe-area-inset-bottom)); padding-bottom: 0; }

  /* Floating ink bottom nav */
  .bottom-nav {
    display: flex; align-items: center; justify-content: space-around; gap: 4px;
    position: fixed; z-index: 50;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    height: 64px; padding: 0 8px; border-radius: 24px;
    background: var(--ink); color: var(--ink-text-2);
    box-shadow: var(--shadow-lg);
  }
  .bn-item {
    flex: 1; max-width: 76px; height: 48px; border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; color: inherit; text-decoration: none; cursor: pointer;
    font-size: 10.5px; font-weight: 550; -webkit-tap-highlight-color: transparent;
    transition: background .2s var(--ease), color .2s;
  }
  .bn-item.active { background: var(--accent); color: var(--accent-ink); }
  .bn-fab {
    width: 52px; height: 52px; border-radius: 18px; flex: none;
    display: grid; place-items: center; border: 0; cursor: pointer;
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 6px 18px -4px rgba(37,99,235,.5);
    transition: transform .2s var(--spring);
    -webkit-tap-highlight-color: transparent;
  }
  .bn-fab:active { transform: scale(.92); }

  /* "More" and "Quick add" sheets */
  .sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sheet-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px; border-radius: 18px; background: var(--surface-2);
    text-decoration: none; font-size: 12.5px; font-weight: 550; text-align: center; color: var(--text);
    border: 1px solid transparent;
  }
  .sheet-tile.active { border-color: var(--accent-2); background: var(--accent-soft); }
  .sheet-tile .ic-chip { background: var(--surface); }
  .sheet-tile.active .ic-chip { background: var(--accent); color: var(--accent-ink); }
}

@media (max-width: 420px) {
  .grid > .span-3.keep, .grid > .span-6.keep { grid-column: span 12; }
  .field.w-half, .field.w-third { grid-column: span 6; }
}