/* Site-wide mobile and alignment layer. Load AFTER styles.css, glass.css and the
 * page stylesheet so these rules win on equal specificity. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  /* Notch / home-indicator safe areas (needs viewport-fit=cover). */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg, video, canvas { max-width: 100%; }

/* ---------- Text alignment and wrapping ---------- */
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
p, li, dd, dt { text-wrap: pretty; overflow-wrap: anywhere; }
.hero, .hero :is(h1, h2, p), .empty, .empty :is(h2, h3, p), .auth h1 {
  text-align: center;
  text-wrap: balance;
}
code, .mono { overflow-wrap: anywhere; }

/* ---------- Flex/grid children that hold text must be allowed to shrink ---------- */
.header-inner > *,
.field-row > *,
.cred > *,
.toast > *,
.auth > *,
.auth-card > *,
.redeem-card > * { min-width: 0; }
.dash-page :is(main, section, article, header, li, dd, dt, div) { min-width: 0; }

/* ---------- Form controls: inherit type, explicit alignment, no iOS zoom ---------- */
input, select, textarea, button {
  font: inherit;
  line-height: 1.3;
  text-align: start;
}
.btn, .dash-signout, .dash-btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  line-height: 1.25;
}
@media (max-width: 899.98px) {
  /* iOS Safari zooms the page when a focused field is below 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px; }
}
@media (pointer: coarse) {
  .btn, .dash-signout, .dash-btn-quiet { min-height: 44px; }
}
@media (max-width: 420px) {
  .field-row .btn { width: 100%; }
}

/* ---------- Safe-area aware fixed and sticky chrome ---------- */
.site-header { top: max(12px, env(safe-area-inset-top, 0px)); margin-inline: auto; }
.toast-stack {
  left: max(var(--pad), env(safe-area-inset-left, 0px));
  right: max(var(--pad), env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) {
  .toast-stack {
    left: auto;
    right: max(24px, env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}