/* Native Capacitor shell only. Capacitor 8 renders edge-to-edge and its SystemBars
   plugin supplies --safe-area-inset-* on Android as a fallback for WebViews whose
   env(safe-area-inset-*) values are wrong. platform.js adds .is-native-app; the
   hosted website therefore keeps its existing layout unchanged. */
html.is-native-app {
  --native-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --native-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --native-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --native-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  background: #f6f1e6;
  scroll-padding-top: var(--native-safe-top);
  scroll-padding-bottom: var(--native-safe-bottom);
}

html.is-native-app body {
  min-height: 100dvh;
  padding: var(--native-safe-top) var(--native-safe-right)
    var(--native-safe-bottom) var(--native-safe-left);
}

/* The writing shell already owns its visual 10/18px gutter. Safe-area padding lives
   outside it, so the cream background continues naturally behind the system bars. */
html.is-native-app .app {
  min-height: calc(100dvh - var(--native-safe-top) - var(--native-safe-bottom));
}

@media (max-height: 759.98px) {
  html.is-native-app .sidebar {
    max-height: calc(100dvh - var(--native-safe-top) - var(--native-safe-bottom) - 36px);
  }
}

/* Fixed app surfaces do not inherit body padding, so protect their interactive
   content directly while leaving their backdrops edge-to-edge. */
html.is-native-app .sheet-overlay {
  padding: var(--native-safe-top) var(--native-safe-right)
    var(--native-safe-bottom) var(--native-safe-left);
}

html.is-native-app .lightbox-overlay {
  padding: calc(24px + var(--native-safe-top))
    calc(24px + var(--native-safe-right))
    calc(24px + var(--native-safe-bottom))
    calc(24px + var(--native-safe-left));
}

html.is-native-app .welcome-card {
  padding-bottom: calc(24px + var(--native-safe-bottom));
}

@media (max-width: 700px) {
  html.is-native-app .welcome-card { padding-bottom: 0; }
  html.is-native-app .welcome-content {
    padding-right: calc(28px + var(--native-safe-right));
    padding-bottom: calc(30px + var(--native-safe-bottom));
    padding-left: calc(28px + var(--native-safe-left));
  }
}

/* Museum page chrome. The body's safe padding establishes the sticky containing
   block, so top: 0 lands exactly below the status bar without doubling the inset. */
html.is-native-app .m-header { top: 0; }
html.is-native-app .m-toast { bottom: calc(28px + var(--native-safe-bottom)); }

html.is-native-app .m-viewer-stage {
  padding: calc(60px + var(--native-safe-top))
    calc(70px + var(--native-safe-right))
    calc(60px + var(--native-safe-bottom))
    calc(70px + var(--native-safe-left));
}
html.is-native-app .m-viewer-close,
html.is-native-app .m-slideshow-close {
  top: calc(14px + var(--native-safe-top));
  right: calc(14px + var(--native-safe-right));
}
html.is-native-app .m-viewer-prev { left: calc(12px + var(--native-safe-left)); }
html.is-native-app .m-viewer-next { right: calc(12px + var(--native-safe-right)); }

html.is-native-app .m-slide-layer,
html.is-native-app .m-display-layer {
  padding: calc(40px + var(--native-safe-top))
    calc(40px + var(--native-safe-right))
    calc(40px + var(--native-safe-bottom))
    calc(40px + var(--native-safe-left));
}
html.is-native-app .m-slideshow-hint {
  bottom: calc(18px + var(--native-safe-bottom));
  padding-right: var(--native-safe-right);
  padding-left: var(--native-safe-left);
}
html.is-native-app .m-display-bar {
  bottom: calc(26px + var(--native-safe-bottom));
  max-width: calc(100vw - var(--native-safe-left) - var(--native-safe-right) - 16px);
}

@media (max-width: 640px) {
  html.is-native-app .m-viewer-stage {
    padding: calc(70px + var(--native-safe-top))
      calc(12px + var(--native-safe-right))
      calc(70px + var(--native-safe-bottom))
      calc(12px + var(--native-safe-left));
  }
  html.is-native-app .m-viewer-prev { left: calc(6px + var(--native-safe-left)); }
  html.is-native-app .m-viewer-next { right: calc(6px + var(--native-safe-right)); }
}