/**
 * iOS Capacitor shell — safe area, zoom, and layout (html.pdc-ios-native only).
 * Web and Android are unaffected.
 *
 * Every native iOS page: fixed `.pixelNav` in the safe area (same position everywhere).
 * Safe area: ios.contentInset is "never" — padding on `.pixelNav` / `.app` only.
 */

html.pdc-ios-native {
  --pdc-safe-area-top: env(safe-area-inset-top, 0px);
  --pdc-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --pdc-ios-fixed-nav-slot: calc(var(--pdc-safe-area-top) + 48px);
  /* Measured `.pixelNav` bottom — sticky codex rails + section heads pin below fixed nav. */
  --pdc-sticky-chrome-top: var(--pdc-ios-fixed-nav-slot);
}

html.pdc-ios-native,
html.pdc-ios-native body {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  height: auto;
  background-color: #08041a;
}

/*
 * Opaque curtain behind the fixed nav — blocks rubber-band overscroll from showing
 * page content under the status bar / heading strap.
 */
html.pdc-ios-native::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pdc-ios-fixed-nav-slot);
  background: rgb(8, 16, 58);
  z-index: 99;
  pointer-events: none;
}

/* Edge-to-edge native shell — no centred “portal” card or bottom letterboxing. */
html.pdc-ios-native .app {
  zoom: 1 !important;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  margin: 0;
  padding: calc(var(--pdc-ios-fixed-nav-slot) + 18px) var(--appPadX, 14px)
    calc(16px + var(--pdc-safe-area-bottom));
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  --appPadX: 14px;
  overflow-x: visible;
  overflow-y: visible;
}

/*
 * Fixed heading strap — same position on dashboard, Flours, Pizza Styles, etc.
 * top: 0 + padding-top clears the notch; strap content sits in the safe area.
 */
html.pdc-ios-native .pixelNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: var(--pdc-safe-area-top);
  padding-left: var(--appPadX, 14px);
  padding-right: var(--appPadX, 14px);
  padding-bottom: 0;
  box-sizing: border-box;
  z-index: 100;
  border-top: none;
  border-bottom: 2px solid rgba(167, 120, 255, 0.95);
  background: linear-gradient(180deg, rgb(8, 16, 58), rgb(5, 12, 48));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

html.pdc-ios-native .pdcLocaleBanner {
  padding: calc(8px + var(--pdc-safe-area-top)) 12px 8px;
  z-index: 13000;
}

html.pdc-ios-native.pdcLocaleBannerOpen body {
  padding-top: calc(52px + var(--pdc-safe-area-top));
}

html.pdc-ios-native.pdcLocaleBannerOpen .app {
  padding-top: calc(var(--pdc-ios-fixed-nav-slot) + 52px);
}

/* -------------------------------------------------------------------------
 * Flours + Pizza Styles: sticky rails / section heads below fixed `.pixelNav`.
 * Use measured chrome bottom — not safe-area + nav-offset (fixed nav is out of flow).
 * ------------------------------------------------------------------------- */

html.pdc-ios-native .knowledgeMain:not(.floursPage) .knowledgeQuickChipsTrack {
  top: calc(
    var(--pdc-sticky-chrome-top) + var(--pdc-knowledge-quick-chips-sticky-gap, 0px)
  );
}

html.pdc-ios-native .knowledgeMain:not(.floursPage) .kSection {
  scroll-margin-top: calc(
    var(--pdc-sticky-chrome-top) + var(--pdc-sticky-knowledge-quick-chips-slot, 0px) +
      max(0px, calc(var(--pdc-sticky-heading-gap, 10px) - var(--pdc-sticky-knowledge-quick-chips-slot, 0px))) +
      14px
  );
}

html.pdc-ios-native .knowledgeMain:not(.floursPage) .kSection .kSectionHead {
  top: calc(
    var(--pdc-sticky-chrome-top) + var(--pdc-sticky-knowledge-quick-chips-slot, 0px) +
      max(0px, calc(var(--pdc-sticky-heading-gap, 10px) - var(--pdc-sticky-knowledge-quick-chips-slot, 0px)))
  );
}

html.pdc-ios-native .knowledgeMain.floursPage .knowledgeCodexPanel {
  scroll-margin-top: calc(var(--pdc-sticky-chrome-top) + 12px);
}

html.pdc-ios-native .knowledgeMain.floursPage .floursCodexStickyRail {
  top: calc(var(--pdc-sticky-chrome-top) + var(--pdc-flours-codex-sticky-gap, 0px));
}

html.pdc-ios-native .knowledgeMain.floursPage .kSection {
  scroll-margin-top: calc(
    var(--pdc-sticky-chrome-top) + var(--pdc-sticky-heading-gap, 10px) + 14px
  );
}

html.pdc-ios-native .floursPage .flourSection {
  scroll-margin-top: calc(
    var(--pdc-sticky-chrome-top) + var(--pdc-sticky-flours-codex-slot, 0px) +
      max(0px, calc(var(--pdc-sticky-heading-gap, 10px) - var(--pdc-sticky-flours-codex-slot, 0px))) +
      14px
  );
}

html.pdc-ios-native .floursPage .flourSection .kSectionHead {
  top: calc(
    var(--pdc-sticky-chrome-top) + var(--pdc-sticky-flours-codex-slot, 0px) +
      max(0px, calc(var(--pdc-sticky-heading-gap, 10px) - var(--pdc-sticky-flours-codex-slot, 0px)))
  );
}

html.pdc-ios-native .floursPage .floursToolbarBlock--find {
  scroll-margin-top: calc(
    var(--pdc-sticky-chrome-top) + var(--pdc-sticky-heading-gap, 10px) + 12px
  );
}

html.pdc-ios-native .knowledgeMain .knowledgeQuickChipsTrack,
html.pdc-ios-native .knowledgeMain .floursCodexStickyRail,
html.pdc-ios-native .knowledgeMain .kSection .kSectionHead,
html.pdc-ios-native .floursPage .flourSection .kSectionHead {
  /* translateZ breaks `position: sticky` in WKWebView. */
  transform: none;
  -webkit-transform: none;
}

html.pdc-ios-native .knowledgeImageLightbox:not([hidden]) {
  padding-top: calc(var(--pdc-sticky-chrome-top) + 12px);
}

html.pdc-ios-native .pdcRecipeDialog {
  top: calc(var(--pdc-sticky-chrome-top) + 12px);
  max-height: calc(
    100dvh - var(--pdc-sticky-chrome-top) - 12px - 20px - var(--pdc-safe-area-bottom)
  );
}

html.pdc-ios-native .pdcSkillModeResetDialog--floating {
  padding-top: calc(var(--pdc-sticky-chrome-top) + 12px);
}

html.pdc-ios-native[data-eat-plan-active]
  main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain)
  .eatPlanQuestFoldHost:not([hidden]) {
  top: calc(var(--pdc-sticky-chrome-top) + 8px);
}