/* iOS-style motion, gestures and Liquid Glass.
   RULE: every rule in this file is scoped under `html.ios` so the kill-switch
   (js/ios-flag.js) restores the original look exactly. Mobile-first: desktop
   overrides go inside @media (min-width:1024px), same as style.css. */

/* ══ PHASE 1 — global native-feel polish ══════════════════════════════════ */

/* ── Motion tokens (new names; existing --ease-* tokens are left untouched) ──
   --ios-ease   : iOS's own sheet/push curve. Decelerates hard, no overshoot
                  (DESIGN.md: calm, never a bounce).
   --ios-spring : critically damped spring (ω=12/s, ~600ms to rest) sampled
                  into linear(). Use with duration .6s. Falls back to --ios-ease.
   --ios-spring-snappy : ω=20/s, ~400ms. For small controls and gesture release. */
html.ios{
  --ios-ease:cubic-bezier(.32,.72,0,1);
  --ios-spring:var(--ios-ease);
  --ios-spring-snappy:var(--ios-ease);
  --ios-spring-dur:.6s;
  --ios-spring-snappy-dur:.4s;
  /* Every existing sheet consumes --ease-sheet (the overshoot curve); pointing it
     at the iOS curve here changes all of them at once, only while html.ios. */
  --ease-sheet:var(--ios-ease);
}
@supports (transition-timing-function:linear(0,1)){
  html.ios{
    --ios-spring:linear(0,.0246,.0842,.1628,.2495,.3374,.4219,.5005,.5719,.6356,.6916,.7402,.7822,.8181,.8486,.8743,.896,.9141,.9292,.9418,.9523,.9609,.968,.9739,.9787,.9826,.9859,.9885,.9907,.9924,1);
    --ios-spring-snappy:linear(0,.0446,.1443,.2642,.3849,.4963,.594,.6768,.7452,.8009,.8454,.8807,.9084,.93,.9467,.9596,.9694,.9769,.9826,.987,.9902,.9927,.9946,.9959,1);
  }
}

/* ── No grey tap flash. Safe globally: every tappable already has its own
   :active state (button rule in style.css) or gets one below. ── */
html.ios{-webkit-tap-highlight-color:transparent;}

/* ── Tap responsiveness: no double-tap-zoom wait on anything tappable ── */
html.ios button,
html.ios a,
html.ios [role="button"],
html.ios [onclick],
html.ios .chip{touch-action:manipulation;}

/* ── Controls are not text: no long-press selection / callout on chrome.
   Content text (body copy, inputs, notes) stays selectable. ── */
html.ios button,
html.ios [role="button"],
html.ios .nav-top,
html.ios .nav-bottom,
html.ios .chip,
html.ios .avatar,
html.ios .a11y-row{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}

/* ── Overscroll: no whole-page rubber band showing the wrong background /
   no pull-to-refresh hijack. Inner scrollers keep their own bounce but stop
   chaining into the page behind them. ── */
html.ios,
html.ios body{overscroll-behavior-y:none;}
html.ios .qa-modal,
html.ios .asheet-panel,
html.ios #profilePanel,
html.ios .wc-thread{overscroll-behavior:contain;}

/* ── Blur on the bars needs the -webkit- prefix on older iOS (<18) ── */
html.ios .nav-top{-webkit-backdrop-filter:blur(12px);}
html.ios .nav-bottom{-webkit-backdrop-filter:blur(16px);}

/* ── Press feedback for tappables that aren't <button> (buttons already get
   scale(.98) from style.css). iOS dims a pressed row/card, it doesn't scale it.
   Instant on press, the element's own transition handles the release. ── */
html.ios .chip:active,
html.ios .ob-domain-card:active,
html.ios .inq-domain-card:active,
html.ios .domain-card:active,
html.ios .content-card:active,
html.ios .a11y-row:active,
html.ios .avatar:active{opacity:.6;}

/* ── Sheets: 100vh is the *largest* viewport on iOS Safari (URL bar hidden),
   so a tall sheet overflows the visible area. dvh tracks the real one. ── */
html.ios .qa-modal{
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px);
}

/* ── Profile panel + notif popover sit at a hardcoded top:54px (inline style),
   which ignores the notch/Dynamic Island inset, so on a notched phone they
   start under the top bar. Mobile only: the desktop block in style.css
   re-anchors both with its own !important rules. ── */
@media (max-width:1023px){
  html.ios #profilePanel,
  html.ios #notifPopover{top:var(--nav-top-h)!important;}
}

/* ══ PHASE 2 — Liquid Glass surfaces ══════════════════════════════════════
   Web can't refract (SVG displacement inside backdrop-filter doesn't run in
   Safari), so this is the material as far as CSS goes: heavy blur + saturation
   boost, translucent fill, a bright specular top edge, soft diffuse shadow.
   Several style.css rules are `!important` (body.theme-beige .nav-top/.nav-bottom),
   so the overrides below out-rank them with `html.ios body.theme-beige`. */
html.ios{
  --glass-blur:blur(24px) saturate(1.8);
  --glass-fill:rgba(255,255,255,.62);
  --glass-fill-warm:rgba(247,243,235,.72);
  --glass-edge:rgba(255,255,255,.65);
  --glass-shadow:0 8px 28px rgba(30,42,34,.14),0 1px 3px rgba(30,42,34,.08);
}

/* ── Top bar: glass. The transparent-over-hero state (.nav--transparent, its own
   !important rules in style.css) is deliberately left alone via :not(). ── */
html.ios body.theme-beige .nav-top:not(.nav--transparent){
  background:var(--glass-fill-warm)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 rgba(30,42,34,.06);
}

/* ── Bottom bar: floating capsule. Sits inside the space the old full-width bar
   reserved (--nav-h is unchanged), so no page padding moves. ── */
html.ios body.theme-beige .nav-bottom{
  left:0;right:0;
  width:calc(100% - 24px);max-width:420px;
  margin-inline:auto;
  bottom:max(10px,calc(env(safe-area-inset-bottom,0px) - 6px));
  height:62px;
  /* style.css:2921 gives the old full-width bar padding-bottom:env(safe-area-inset-bottom)
     (~34px on iPhones with a home indicator). The capsule already floats above that
     area via `bottom`, so the padding must go or it squeezes the tabs into the top
     half and leaves the lens hanging below them. Invisible on desktop, where env()=0. */
  padding-bottom:0;box-sizing:border-box;
  border-radius:31px;
  background:var(--glass-fill)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.85);
}
html.ios body.theme-beige .nb-item{padding:6px 2px;}

/* The indicator becomes a glass "lens" under the active tab. The span keeps its
   20%-wide slot geometry (so the existing translateX(-N00%) rules still line up);
   the visible pill is its ::after, inset from the slot edges. */
html.ios .nb-indicator{
  top:0;bottom:0;height:auto;border-radius:0;background:none;
  transition:transform var(--ios-spring-snappy-dur) var(--ios-spring-snappy),opacity var(--dur-fast) linear;
}
html.ios .nb-indicator::after{
  content:'';position:absolute;inset:6px 4px;border-radius:25px;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 1px 6px rgba(30,42,34,.10);
}
/* Insights/Activity have no bottom-bar tab: hide the lens rather than leave it
   parked under Home. */
html.ios .nav-bottom:not(:has(.nb-item.active)) .nb-indicator{opacity:0;}

/* ── Quick-Add FAB: a brass disc inside the capsule instead of a ring-cut circle
   poking out of it. transform is re-stated because the base rule bakes
   translateX(-50%) into rest and :active. ── */
html.ios .nb-plus{
  top:50%;width:48px;height:48px;
  transform:translate(-50%,-50%);
  box-shadow:0 2px 10px rgba(184,146,58,.45),inset 0 1px 0 rgba(255,255,255,.35);
}
html.ios .nb-plus:active{transform:translate(-50%,-50%) scale(.92);}

/* ── Sheets: glass over the dark scrim. Their background/radius/max-height are
   inline styles (js/home.js, js/auth.js), hence !important. Fill stays .9 opaque:
   these sheets hold forms and long Hebrew text, legibility wins over see-through. ── */
html.ios .qa-modal,
html.ios .asheet-panel{
  background:rgba(247,243,235,.9)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-radius:28px 28px 0 0!important;
  box-shadow:0 -8px 32px rgba(30,42,34,.16),inset 0 1px 0 rgba(255,255,255,.7);
}
html.ios .asheet-panel{
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px)!important;
}

/* ── Toasts: glass pill. Success stays solid brass (it carries meaning). ── */
html.ios .toast-msg:not(.toast-success){
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-edge);
}

/* ── Fallbacks: solid paper where transparency is off or unsupported ── */
@media (prefers-reduced-transparency:reduce){
  html.ios body.theme-beige .nav-top:not(.nav--transparent){background:rgb(247,243,235)!important;-webkit-backdrop-filter:none;backdrop-filter:none;}
  html.ios body.theme-beige .nav-bottom{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none;}
  html.ios .nb-indicator::after{background:rgba(184,146,58,.16);box-shadow:none;}
  html.ios .qa-modal,html.ios .asheet-panel{background:var(--bg)!important;-webkit-backdrop-filter:none;backdrop-filter:none;}
  html.ios .toast-msg:not(.toast-success){background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
html.ios body.a11y-high-contrast .nav-top,
html.ios body.a11y-high-contrast .nav-bottom,
html.ios body.a11y-high-contrast .qa-modal,
html.ios body.a11y-high-contrast .asheet-panel{
  background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.ios body.theme-beige .nav-top:not(.nav--transparent){background:rgb(247,243,235)!important;}
  html.ios body.theme-beige .nav-bottom{background:#fff!important;}
  html.ios .qa-modal,html.ios .asheet-panel{background:var(--bg)!important;}
}

/* ══ PHASE 4 — sheets you can drag (behaviour lives in js/sheet-gesture.js) ═══ */

/* Grabber handle. Only on sheets the script marked as swipe-dismissable
   (data-sheet-drag), so it never promises a gesture that isn't there. */
html.ios .qa-modal[data-sheet-drag]::before,
html.ios .asheet-panel[data-sheet-drag]::before{
  content:'';position:absolute;top:6px;left:50%;
  width:36px;height:5px;margin-left:-18px;border-radius:3px;
  background:rgba(30,42,34,.22);pointer-events:none;
}

/* While dragging, nothing inside the sheet should select text or start its own gesture. */
html.ios .qa-modal[data-sheet-drag],
html.ios .asheet-panel[data-sheet-drag]{touch-action:pan-y;}

/* Bell popover: it just appeared before. It has no exit hook (display toggle), so
   this is entrance-only; display:none → block restarts the animation each open. */
@keyframes ios-pop{
  from{opacity:0;transform:scale(.92) translateY(-6px);}
  to{opacity:1;transform:none;}
}
html.ios #notifPopover{
  animation:ios-pop var(--dur-slow) var(--ios-ease) both;
  transform-origin:top left;
}
@media (min-width:1024px){
  html.ios #notifPopover{transform-origin:top right;}
}

/* ══ PHASE 3 — screen transitions (behaviour lives in js/screen-transition.js) ═══ */

/* The per-card fade-up stagger (style.css:133-141) replays on every showScreen AND on
   every innerHTML re-render of a direct child. Under iOS motion the screen as a whole
   animates instead (tab fade / push / pop), so the stagger is switched off.
   :where(.ios) keeps specificity at the original rule's level + 1, no more, so it
   doesn't start beating unrelated class-level animations it didn't already beat. */
html:where(.ios) .screen.active > *{animation:none;}

/* Domain panel on the domains screen: expands in instead of popping. Attribute-driven, so
   it plays once when a domain opens, not on the panel's internal re-renders. No exit
   animation (closeBentoPanel empties the node synchronously). */
@keyframes ios-panel-in{
  from{opacity:0;transform:translateY(-8px) scale(.985);}
  to{opacity:1;transform:none;}
}
html.ios #domainsBentoPanel[data-open]:not([data-open=""]){
  animation:ios-panel-in var(--dur-slow) var(--ios-ease) both;
  transform-origin:top center;
}

/* ══ Compass entrance (behaviour lives in js/compass-entrance.js) ═══════════════ */

/* The old whole-wheel "sunrise" (style.css .hh-sunrise: one rise + brightness bloom) is
   replaced by the per-part assembly. Phones only: desktop (>=1024) is not choreographed by
   compass-entrance.js, so it keeps the original sunrise. */
@media (max-width:1023px){
  html.ios .home-hero-compass.hh-sunrise{animation:none;}
}

/* ══ Swipe-to-complete on open task rows (behaviour lives in js/row-swipe.js) ═══ */
/* Vertical page scroll stays with the browser; horizontal movement on these rows is ours. */
html.ios .action-item.is-open[onclick]{touch-action:pan-y;}