/* Web/PWA overrides, layered on top of popup.css (which is tuned for the 400px extension popup).
   Loaded only by the generated index.html, so the extension is unaffected. */

:root { color-scheme: dark; }
html { background: var(--bg); }

body {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  max-height: none;
  min-height: 100vh;
  min-height: 100svh;
  overflow-y: auto;
}

/* iOS notch / home-indicator safe areas when launched from the home screen */
header { padding-top: calc(10px + env(safe-area-inset-top)); }
#app { padding-bottom: env(safe-area-inset-bottom); }

/* controls that only make sense inside the extension (reload the extension, desktop notifications) */
.ext-only { display: none !important; }

/* a little more tap room on phones */
@media (max-width: 480px) {
  .row { padding: 10px 9px; }
  .icon-btn { width: 34px; height: 32px; }
  .mini-refresh { width: 30px; height: 30px; }
}