/* Shared narrow-screen guardrails. Components keep their hierarchy and reflow
   at content breakpoints instead of applying a global visual zoom. */
html {
  min-width: 280px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body, .app-shell, .page, .topbar, .bottom-nav { min-width: 0; }
img, video, canvas { max-width: 100%; }
button, input, select, textarea, a { min-width: 0; }

.topbar .brand,
.topbar .brand > div:last-child,
.topbar .topbar-actions { min-width: 0; }

.bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-item { min-width: 0; text-align: center; }
.nav-item small, .nav-item > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .app-shell { width: 100%; }
  .topbar {
    gap: clamp(7px, 2.4vw, 12px);
    padding-inline: clamp(8px, 3vw, 14px);
  }
  .topbar .brand { gap: clamp(7px, 2.8vw, 11px); }
  .topbar .brand h1 { font-size: clamp(14px, 4.4vw, 17px); }
  .topbar .brand p { font-size: clamp(10px, 3.2vw, 12px); }
  .topbar .topbar-actions { gap: clamp(4px, 1.8vw, 8px); }
  .header-balance { min-width: 0; padding-inline: clamp(6px, 2.3vw, 10px); }
  .header-balance strong { font-size: clamp(10px, 3.3vw, 12px); }
  .header-balance-topup,
  .profile-settings-button { flex-basis: clamp(36px, 11vw, 42px); width: clamp(36px, 11vw, 42px); }
  .bottom-nav { padding-inline: clamp(4px, 2vw, 9px); }
  .nav-item { font-size: clamp(.62rem, 3vw, .72rem); }
  .sheet, .modal, .dialog { max-width: 100%; }
}

@media (max-width: 340px) {
  .topbar .brand p { display: none; }
  .header-balance-icon { display: none; }
}