/*
 * VINAGO DEVICE EXPERIENCE FOUNDATION — Sprint 22.4 · EPIC 22
 * ============================================================
 * Official Device Experience Contract (RULE 29).
 *
 * Scope (Presentation ONLY):
 *   - Safe Area Foundation (Top / Bottom / Navigation / Status Bar / Gesture)
 *   - Keyboard Experience (visualViewport, auto-scroll, prevent hidden input)
 *   - Orientation Foundation (Portrait / Landscape / Rotation Recovery)
 *   - Tablet & Foldable Layouts (7" / 8" / 10" / Foldable)
 *   - Gesture Insets support
 *   - Viewport Recovery
 *
 * DO NOT:
 *   - Connect business logic
 *   - Modify Runtime / API / Database
 *
 * Loaded AFTER app-shell.css (see inc/device-experience.php) so this
 * contract wins specificity without touching main.css / app-shell.css.
 */

/* ===========================================================
   DEVICE EXPERIENCE TOKENS — Safe Area / Insets Contract
   =========================================================== */
:root {
  /* Top Insets — Safe Area */
  --dxp-top-inset:           env(safe-area-inset-top, 0px);
  --dxp-top-inset-min:       max(env(safe-area-inset-top, 0px), 0px);
  --dxp-top-clearance:       calc(var(--as-header-height, 52px) + var(--dxp-top-inset));

  /* Bottom Insets — Gesture / Navigation */
  --dxp-bottom-inset:        env(safe-area-inset-bottom, 0px);

  /* Navigation Insets — Bottom Nav safe clearance */
  --dxp-nav-safe-bottom:     calc(var(--as-nav-height, 64px) + env(safe-area-inset-bottom, 0px));

  /* Status Bar Insets (Android / iOS dynamic) */
  --dxp-statusbar-inset:     env(safe-area-inset-top, 0px);

  /* Gesture Insets (Android 10+ gesture nav) */
  --dxp-gesture-inset-left:  env(safe-area-inset-left, 0px);
  --dxp-gesture-inset-right: env(safe-area-inset-right, 0px);

  /* FAB safe bottom (above bottom nav + gesture area) */
  --dxp-fab-safe-bottom:     calc(var(--as-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--space-8, 16px));

  /* Keyboard offset — applied via .dxp-keyboard-open (JS) */
  --dxp-keyboard-offset:     0px;

  /* Orientation / Rotation recovery */
  --dxp-orientation-timestamp: 0ms;
}

/* ===========================================================
   PHASE 2 — SAFE AREA FOUNDATION
   =========================================================== */

/* App Header: dynamic top padding (notch / Dynamic Island / status bar) */
#hpAppBar.as-appbar {
  padding-top: var(--dxp-top-inset-min);
}

/* Header inner keeps fixed height — the outer handles the inset */
#hpAppBar.as-appbar .hp-appbar-inner {
  height: var(--as-header-height, 52px);
}

/* Top content clearance — accounts for header + safe-area top */
@media (max-width: 767px) {
  .xos-page-content {
    padding-top: var(--dxp-top-clearance);
  }
}

/* Bottom content clearance — accounts for nav + safe-area bottom */
@media (max-width: 767px) {
  .xos-page-content {
    padding-bottom: calc(var(--dxp-nav-safe-bottom) + var(--space-6, 12px));
  }
}

/* Bottom Navigation: fixed safe-area aware */
#ep12BottomNav.ep12-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: content-box;
}

/* FAB: above bottom nav + gesture inset */
.as-fab {
  bottom: var(--dxp-fab-safe-bottom);
}

/* Left / Right gesture insets — full-bleed modal / sheet content */
.as-fab-sheet,
.ep12-bottom-nav,
.xos-app-layout > [class*="sheet"],
.xos-app-layout > dialog,
.xos-app-layout > [role="dialog"] {
  padding-left:  var(--dxp-gesture-inset-left);
  padding-right: var(--dxp-gesture-inset-right);
}

/* Foldable: dual-screen crease padding (Windows / Galaxy Z Fold web) */
@media (spanning: single-fold-vertical) {
  :root {
    --dxp-crease-padding: env(fold-left, 0px);
  }
  .xos-app-layout {
    padding-left:  var(--dxp-crease-padding);
    padding-right: var(--dxp-crease-padding);
  }
}

/* ===========================================================
   PHASE 3 — KEYBOARD EXPERIENCE
   =========================================================== */

/* Body class set by JS when software keyboard opens.
   We reserve space so bottom nav / FAB stay visible. */
body.dxp-keyboard-open {
  overflow: hidden; /* prevent double-scroll while typing */
}

body.dxp-keyboard-open .xos-page-content {
  /* The JS updates --dxp-keyboard-offset with remaining viewport.
     Content can scroll independently; nav/fab pinned above keyboard. */
  /* (No height change needed — visualViewport CSS not widely supported;
     the JS handler manages scroll + FAB offset below.) */
}

/* FAB rises above keyboard (Keyboard Experience contract) */
body.dxp-keyboard-open .as-fab {
  bottom: calc(var(--dxp-fab-safe-bottom) + var(--dxp-keyboard-offset));
}

/* Disable iOS input zoom on tap (already using 16px inputs where possible) */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-size: 16px; /* iOS: prevents auto-zoom on focus */
}

/* Smooth viewport recovery after keyboard closes */
body.dxp-viewport-recover {
  transition: padding-top var(--motion-duration-normal, 200ms) var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
              padding-bottom var(--motion-duration-normal, 200ms) var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* ===========================================================
   PHASE 4 — ORIENTATION FOUNDATION
   =========================================================== */

/* Portrait default: everything above already covers it */

/* Landscape compact — bottom nav auto-compact (already in app-shell).
   Add: page content bottom clearance keeps FAB tappable. */
@media (orientation: landscape) and (min-width: 568px) and (max-width: 1023px) and (max-height: 600px) {
  .xos-page-content {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px) + var(--space-4, 8px));
  }

  /* PRESENTATION DEFECT FIX (Sprint 22.4 Cert):
     Mobile landscape (e.g. iPhone 14 Pro Max rotated → 932px wide) trips the
     desktop ">= 768px hide nav/FAB" rule. On phones, landscape MUST keep
     bottom nav + FAB visible (compact form). Loaded after app-shell.css so
     this override is authoritative. iPad landscape (1024px+) stays desktop. */
  #ep12BottomNav.ep12-bottom-nav {
    display: flex !important;
  }

  .as-fab {
    display: flex;
  }

  /* FAB smaller + tucked above compact nav in landscape */
  .as-fab {
    --as-fab-size: 48px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px) + var(--space-4, 8px));
  }

  .as-fab-main {
    width: 48px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px;
  }
}

/* Rotation recovery — prevent sticky header overlap fl. */
@supports (height: 100dvh) {
  .xos-app-layout {
    min-height: 100dvh;
  }
}

/* ===========================================================
   PHASE 6 — TABLET & FOLDABLE EXPERIENCE (7" / 8" / 10")
   =========================================================== */

/* Tablet portrait (≥ 768px): wider content, centered container */
@media (min-width: 768px) and (max-width: 1023px) {
  .xos-page-content {
    width: 100%;
    max-width: var(--container-tablet, 720px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablet landscape / small desktop (≥ 1024px):
   Two-column split layout for feed pages. */
@media (min-width: 1024px) {
  .xos-page-content {
    max-width: var(--container-desktop, 1100px);
    margin-left: auto;
    margin-right: auto;
  }

  /* Marketplace feed / search results — content grid keeps list readable */
  .ep12-home .xos-page-content,
  .xos-page-content .ep12-section,
  .xos-page-content .marketplace-feed,
  .xos-page-content .xsp-results {
    width: 100%;
    max-width: 100%;
  }
}

/* Foldable — Galaxy Z Fold 5 (673px unfolded) / Surface Duo */
@media (min-width: 600px) and (max-width: 720px) {
  /* Foldable inner pages: narrower content column to avoid crease */
  .xos-page-content {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6, 12px);
    padding-right: var(--space-6, 12px);
  }
}

/* Foldable spanning — dual-screen mode */
@media (spanning: single-fold-horizontal) {
  /* Content flows across the crease only where safe */
  .xos-page-content {
    padding-left:  env(fold-left, 0px);
    padding-right: env(fold-right, 0px);
  }
}

/* ===========================================================
   PHASE 8 — VIEWPORT RECOVERY (orientation / rotation)
   =========================================================== */
body.dxp-orienting {
  /* Soft fade during rotation — prevents jarring flash */
  animation: dxp-orient-fade var(--motion-duration-normal, 200ms) var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)) both;
}

@keyframes dxp-orient-fade {
  from { opacity: 1; }
  50%  { opacity: 0.92; }
  to   { opacity: 1; }
}

/* ===========================================================
   RESPECT REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .as-fab,
  .as-fab-sheet,
  body.dxp-keyboard-open .as-fab,
  body.dxp-viewport-recover,
  body.dxp-orienting {
    transition: none !important;
    animation: none !important;
  }
}

/* ===========================================================
   END OF DEVICE EXPERIENCE CONTRACT
   =========================================================== */