/* Global responsive baseline without changing visual design */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100%; overflow-x: hidden; }

/* Media that should never overflow the container */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* Avoid iOS Safari zoom on inputs by keeping font-size >= 16px */
input, select, textarea, button { font: inherit; font-size: 16px; }

/* Container and layout helpers (match existing sizing) */
:root {
  --container-max: 760px;
  --container-pad: 16px;
  --footer-safe: env(safe-area-inset-bottom, 0px);
}

.container { 
  width: min(100%, var(--container-max));
  padding-inline: clamp(12px, 4vw, var(--container-pad));
}

/* Keep header full-width but content constrained; allow wrapping on small screens */
.app-header { max-width: var(--container-max); }
.app-header-wrapper { width: 100%; }
.app-nav-right { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.app-nav-right a { white-space: nowrap; }

@media (max-width: 420px) {
  /* Slightly tighter pills to prevent layout jumps while preserving look */
  .app-nav-right a { padding: 4px 8px !important; font-size: 13px !important; }
}

/* Cards: prevent child shadows/borders from bleeding on rounded corners */
.card { overflow: hidden; }

/* Respect safe areas for fixed elements without changing geometry on desktop */
:where(#quick-fab) { bottom: calc(57px + var(--footer-safe)) !important; }

/* Small utilities (opt-in by class; no visual impact unless used) */
.stack-sm { display: flex; gap: 10px; flex-wrap: wrap; }
.hide-sm { display: none !important; }
@media (min-width: 561px) { .hide-sm { display: initial !important; } }