/* Jarvis — mobile-only styles.
 *
 * CONTAINMENT RULE: every rule in this file lives inside the single media
 * query below, and no mobile rule lives anywhere else. Desktop cannot regress
 * from an edit here, which is what makes the revert two files.
 *
 * The query is the single source of truth for "is this a phone". mobile.js
 * reads --jarvis-mobile back out of the computed style instead of restating
 * the query in JS, so the two can never drift apart.
 *
 * Comma-separated rather than `and ((...) or (...))` for universal support;
 * matchMedia accepts the same string if it is ever needed.
 *
 *   iPhone portrait   390 x 844  -> width trips it.  Mobile.
 *   iPhone landscape  844 x 390  -> height trips it. Mobile. (fixes D3)
 *   iPad mini portrait 744 x 1133 -> neither axis trips. Desktop sidebar,
 *                                    which is correct: it has the vertical
 *                                    space the accordion needs.
 *   any fine-pointer desktop      -> never matches, at any window size.
 *
 * Known edge, accepted: an iPad in a 507px-wide split view keeps the desktop
 * sidebar. Both axes exceed 500. Documented, not fixed.
 */

@media (pointer: coarse) and (max-width: 500px),
       (pointer: coarse) and (max-height: 500px) {

  /* Read by Mobile.isActive(). Nothing else should ever set this. */
  :root { --jarvis-mobile: 1; }

  /* D1: the sidebar was a ~3,300px horizontal scroll strip here — 1 dashboard
     link + 12 group headers + ~45 leaf links at 56px each, plus an accordion
     built for vertical space a phone does not have. On phones the tiles are
     the navigation (see Phase 2); the sidebar is simply not present. */
  .sidebar { display: none; }

  .app-shell {
    flex-direction: column;
    height: 100dvh;
  }

  /* The viewport is now viewport-fit=cover, so the area behind the iOS home
     indicator is ours to pay for. Every mobile scroll container adds the
     inset; this is the first of them. */
  .main-content {
    order: 1;
    padding: var(--sp-3);
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--sp-4));
  }

  /* Above the home indicator, not under it. 44x44 minimum touch target;
     52px gives comfortable margin. */
  .fab {
    bottom: calc(env(safe-area-inset-bottom) + var(--sp-4));
    right: var(--sp-4);
    width: 52px;
    height: 52px;
    font-size: 26px;
  }

  /* The contact quick-log FAB stacks above the primary one. */
  .fab-secondary {
    bottom: calc(env(safe-area-inset-bottom) + var(--sp-4) + 64px);
    right: var(--sp-4);
    width: 52px;
    height: 52px;
  }
}