/* Give WebKit an opaque viewport edge instead of blurring the header beneath
   its system UI. This inert strip follows the skin, reserves its own space,
   and never intercepts taps. Safe areas also protect landscape layouts. */
.standalone-top-edge { display: none; }
html[data-display-mode=standalone] {
  --standalone-top-inset: max(8px, env(safe-area-inset-top, 0px));
}
html[data-display-mode=standalone] body {
  padding-top: var(--standalone-top-inset);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
html[data-display-mode=standalone] .standalone-top-edge {
  display: block; position: fixed; inset: 0 0 auto;
  height: var(--standalone-top-inset); background: var(--bg);
  pointer-events: none; z-index: 30;
}

/* Keep primary actions in normal flow in installed apps: iOS standalone
   viewports can displace or clip a fixed bottom bar after launch/resume. */
@media (display-mode: standalone) {
  html body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  html .transport {
    position: static; inset: auto; transform: none; width: 100%; max-width: 490px;
    margin: 12px auto 0; padding: 0; border: 0; background: transparent;
    box-shadow: none; z-index: auto;
  }
}
/* Same layout for the iOS navigator.standalone compatibility path. This sheet
   is loaded after every skin so their compact dock styles cannot override it. */
html[data-display-mode=standalone] body { padding-bottom: env(safe-area-inset-bottom, 0px); }
html[data-display-mode=standalone] .transport {
  position: static; inset: auto; transform: none; width: 100%; max-width: 490px;
  margin: 12px auto 0; padding: 0; border: 0; background: transparent;
  box-shadow: none; z-index: auto;
}