/* ATLAS.OS — shared mobile hardening.
   Linked on every page. Keeps content clear of notches/home indicators,
   stops iOS zoom-on-focus, and lets crowded headers wrap on small phones.
   Desktop is unaffected: safe-area insets resolve to 0 there. */

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

/* Push all content inside the device safe area. The fixed background layers
   (.bg / .bg-overlay) use position:fixed, so they still bleed edge-to-edge
   under the notch — only the readable content is inset. The gap shows --ink,
   which matches the manifest theme_color, so it reads as seamless. */
body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  overflow-x: hidden;
}

/* iOS zooms the page when it focuses an input whose font-size is < 16px.
   Force 16px on phones to prevent the jarring zoom. */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Header can hold 3–4 controls (tag · name · back · log out). Let it wrap
   instead of overflowing on narrow screens. */
@media (max-width: 560px) {
  header {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 12px;
  }
  .who {
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: 12px;
  }
}

/* ── PWA install pill (used by /brand/pwa.js) ───────────────────────────── */
#pwa-install {
  position: fixed;
  z-index: 40;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border: 1px solid var(--blue, #22aee0);
  background: linear-gradient(135deg, rgba(21,148,196, 0.95), rgba(107, 215, 255, 0.9));
  color: #00111a;
  font-family: Orbitron, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(34,174,224, 0.35);
  -webkit-tap-highlight-color: transparent;
}
#pwa-install.show { display: inline-flex; }
#pwa-install svg { width: 16px; height: 16px; }

/* iOS "Add to Home Screen" hint sheet */
#pwa-ios-hint {
  position: fixed;
  z-index: 41;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(92vw, 420px);
  display: none;
  padding: 16px 18px;
  border: 1px solid var(--line, rgba(125, 194, 225, 0.22));
  background: linear-gradient(180deg, rgba(19, 32, 49, 0.98), rgba(9, 16, 26, 0.98));
  color: var(--white, #f5f7fa);
  font-family: Inter, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}
#pwa-ios-hint.show { display: block; }
#pwa-ios-hint b { color: var(--blue2, #6bd7ff); font-family: Orbitron, sans-serif; letter-spacing: 0.1em; }
#pwa-ios-hint .close {
  float: right;
  margin: -4px -4px 0 8px;
  padding: 4px 8px;
  border: 1px solid var(--line, rgba(125, 194, 225, 0.22));
  background: transparent;
  color: var(--muted, #8ea0b2);
  cursor: pointer;
  font-family: Orbitron, sans-serif;
  font-size: 11px;
}