/* Mobile platform fixes: preserve readable inputs, safe areas and the visible viewport. */
html { -webkit-text-size-adjust: 100%; }
.app-shell, .auth-page { min-height: 100dvh; }
button, [role="button"], .mobile-nav a, summary { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
dialog.modal, .modal-body { overscroll-behavior: contain; }

.pwa-card { margin-top: 24px; padding: 26px; border: 1px solid var(--line, #e5e5ea); border-radius: 20px; background: #fff; color: var(--ink, #1d1d1f); text-align: left; }
.pwa-card-heading { display: flex; align-items: center; gap: 14px; }
.pwa-icon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 13px; }
.pwa-card-heading > div { min-width: 0; }
.pwa-card-heading h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.pwa-card-heading p { margin: 5px 0 0; color: #62626a; font-size: 13px; line-height: 1.6; }
.pwa-installed { margin-left: auto; flex-shrink: 0; border-radius: 20px; padding: 5px 9px; font-size: 12px; background: #eaf6ed; color: #26733e; }
.pwa-intro { margin: 18px 0; color: #62626a; font-size: 13px; line-height: 1.8; }
.pwa-actions:has(button[hidden]) { display: none; }
.pwa-actions { margin: 0 0 18px; }
.pwa-card [hidden] { display: none !important; }
.pwa-instructions { border-top: 1px solid #e9e9ed; padding-top: 14px; }
.pwa-instructions summary { width: fit-content; padding: 5px 0; font-size: 13px; font-weight: 500; color: #1d1d1f; cursor: pointer; }
.pwa-instructions summary:focus-visible { outline: 3px solid #0071e355; outline-offset: 5px; border-radius: 3px; }
.pwa-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 17px 0 0; }
.pwa-steps strong { font-size: 13px; font-weight: 600; }
.pwa-steps p, .pwa-footnote, .pwa-status { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: #62626a; }
.pwa-footnote { margin-top: 17px; font-size: 12px; }
.pwa-status { padding: 12px 14px; border-radius: 10px; background: #f5f5f7; }
.pwa-card .button:active { filter: brightness(.94); }
@media (hover: hover) and (pointer: fine) {
  .pwa-instructions summary:hover { color: #0071e3; }
}

/* Capability-based sizes also apply to tablets with touch, without disabling zoom. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select,
  .topbar-actions .searchbox input, .actor-switch select { font-size: 16px !important; }
  .modal-close, .pwa-card .button, .pwa-instructions summary { min-height: 44px; }
}
@media (max-width: 800px) {
  .topbar { padding-top: env(safe-area-inset-top, 0px); padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
  .content { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-nav { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .toast, #toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .modal-footer { padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); }
  dialog.modal { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  dialog.drawer { max-height: 100dvh; }
  dialog.drawer .modal-header { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .auth-page { padding-top: calc(30px + env(safe-area-inset-top, 0px)); padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  .pwa-card { padding: 20px; }
  .pwa-steps { grid-template-columns: 1fr; gap: 17px; }
}
@media (max-width: 480px) {
  .pwa-card-heading { flex-wrap: wrap; }
  .pwa-card-heading > div { flex: 1; min-width: 150px; }
  .pwa-installed { margin-left: 66px; }
}
@media (display-mode: standalone) {
  /* Installed app navigation owns refresh; contain scroll in the flow canvas and dialogs. */
  html, body { overscroll-behavior-y: none; }
}