/* CalTrack PWA / iPhone layer: loaded only by the PWA build, after app.css (the Android APK never sees this file). */
:root {
  /* safe areas (notch / Dynamic Island / home indicator). Tests can override these variables. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; padding-left: var(--sal); padding-right: var(--sar); }
.app { min-height: 100vh; min-height: 100dvh; }

/* iOS zooms into any input under 16px: keep every field at 16px or larger */
input, select, textarea { font-size: max(16px, 1em) !important; }
.stepper input { width: 52px; }

/* header below the status bar / Dynamic Island */
.topbar { padding-top: calc(14px + var(--sat)); padding-left: calc(16px + var(--sal)); padding-right: calc(16px + var(--sar)); }

/* content and bottom nav above the home indicator */
.view { padding-bottom: calc(var(--nav-h) + var(--sab) + 28px); }
.nav { box-sizing: border-box; height: calc(var(--nav-h) + var(--sab)); padding: 0 var(--sar) var(--sab) var(--sal);
  overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; transform: translateZ(0); }
.nav button { touch-action: manipulation; }
.toast { bottom: calc(var(--nav-h) + var(--sab) + 18px); }
.sheet { max-height: calc(100vh - var(--sat) - 24px); max-height: calc(100dvh - var(--sat) - 24px); padding-left: var(--sal); padding-right: var(--sar); }
.dialog { max-height: calc(100dvh - var(--sat) - var(--sab) - 40px); overflow-y: auto; }

/* momentum scrolling for inner scrollers; horizontal swipes on the calendar go to our own handler */
.sheet .bd, .tablewrap, .chips, .dialog { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.calwrap { touch-action: pan-y; }
button, .chip, .cell, .nav button { touch-action: manipulation; }

/* keyboard open (iOS): hide the fixed nav so it doesn't ride up on top of the keyboard */
html.kb .nav { transform: translateY(120%); transition: transform .2s; }
html.kb .ios-hint { display: none; }

/* standalone: the status bar overlays the page (black-translucent = white icons). Give it a backing that keeps the
   white clock/battery readable: brand colour in light mode, page colour in dark mode. */
.pwa-sbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--sat); background: var(--hero1); pointer-events: none; transition: background .3s; }
html[data-theme=dark] .pwa-sbar { background: var(--bg); }

/* "Install on iPhone" hint (Safari, not yet installed) */
.ios-hint { position: fixed; z-index: 45; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(var(--nav-h) + var(--sab) + 12px);
  max-width: 560px; margin: 0 auto; display: flex; gap: 12px; align-items: center; padding: 14px 14px 14px 16px; border-radius: 20px;
  background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px var(--outline); animation: hintIn .45s var(--ease) both; }
@keyframes hintIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ios-hint img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.ios-hint .t { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.ios-hint .t b { display: block; font-size: 15px; margin-bottom: 2px; }
.ios-hint .share { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; color: #0a84ff; }
.ios-hint .x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; font-size: 18px; line-height: 1; }
.ios-hint::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; background: var(--surface); transform: translateX(-50%) rotate(45deg); box-shadow: 1px 1px 0 var(--outline); }
html.ipad .ios-hint::after { display: none; }