/*
 * sprint12-mobile.css — Sprint 12 mobile UX polish
 *
 * 1. 44px minimum tap targets on all interactive elements
 * 2. iPhone notch / Dynamic Island safe-area insets applied consistently
 * 3. Swipe gesture visual feedback layer
 * 4. Calendar + My Day mobile layout tweaks
 * 5. Bottom nav calendar quick-action badge
 */

/* ── 44px minimum tap targets (iOS HIG) ──────────────────────────────────── */
button,
[role="button"],
a,
.md-row,
.cs-card,
.md-card,
.mobile-tab,
.ss-back {
  min-height: 44px;
  /* Do not override display type — just ensure visual hit area */
}

/* Rows that are flex containers already meet 44px via padding; ensure it */
.md-row {
  min-height: 44px;
  box-sizing: border-box;
}

/* Pill / badge buttons that are otherwise too small */
.md-hdr-btn,
.cs-btn,
.md-cal-cta-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Safe-area insets — apply to all page containers ────────────────────── */
/*
 * The shell already defines --sat/--sar/--sab/--sal in :root.
 * These rules apply them to page-specific wrappers that may not
 * inherit from the shell layout.
 */
.md-page,
.cs-wrap {
  padding-left:  max(var(--sal, 0px), 12px);
  padding-right: max(var(--sar, 0px), 12px);
}

/* When the mobile bottom bar is visible add extra bottom clearance */
@media (max-width: 768px) {
  .md-page,
  .cs-wrap {
    padding-bottom: calc(80px + max(var(--sab, 0px), 8px));
  }

  /* Notch-aware header (Control Tower / My Day) */
  .md-hdr,
  .cs-hdr {
    padding-top: max(var(--sat, 0px), 4px);
  }
}

/* ── Swipe gesture feedback ───────────────────────────────────────────────── */
/*
 * The shell's swipe handler (app-shell-vnext.html) applies .swipe-hint-left /
 * .swipe-hint-right during a live swipe.  These rules provide visual feedback.
 */
#mount.swipe-hint-left {
  transform: translateX(-6px);
  opacity: 0.9;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

#mount.swipe-hint-right {
  transform: translateX(6px);
  opacity: 0.9;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Calendar quick-action / My Day badge styles removed 2026-05-26 —
   My Day parked for v2 (calendar app integrations). Restore when
   pages_vnext/my-day.js is re-registered in route-registry-delivery.js. */

/* ── Calendar settings card mobile ───────────────────────────────────────── */
@media (max-width: 600px) {
  .cs-card { flex-wrap: wrap; }
  .cs-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .cs-btn { flex: 1; text-align: center; font-size: 12px; }
}

/* ── My Day strip — scroll horizontally on tiny screens ─────────────────── */
@media (max-width: 420px) {
  .md-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .md-strip::-webkit-scrollbar { display: none; }
  .md-card {
    flex: 0 0 88px;
  }
}

/* ── Pull-to-refresh safe-area offset ───────────────────────────────────── */
#ss-ptr-arrow,
#ss-ptr-spinner {
  top: max(12px, env(safe-area-inset-top, 12px));
}

/* ── Offline banner safe-area offset ────────────────────────────────────── */
#pwa-offline-banner {
  padding-top: max(8px, env(safe-area-inset-top, 8px));
}

/* ── Push notification permission button ─────────────────────────────────── */
#cs-push-enable {
  width: 100%;
}

@media (min-width: 480px) {
  #cs-push-enable {
    width: auto;
  }
}