/* iOS Safari zooms focused fields when font-size is below 16px */
@media (max-width: 720px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media (max-width: 720px) {
  .nav-actions--desktop {
    display: none;
  }

  .nav-mobile {
    display: block;
  }

  .nav-dock {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  .nav-dock-inner {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .pill--brand {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 14px;
  }

  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html {
    scroll-padding-top: calc(var(--nav-stack-offset) + 16px + env(safe-area-inset-top, 0px));
  }

  main.page-main {
    padding-top: calc(var(--nav-stack-offset) + env(safe-area-inset-top, 0px));
  }

  .bottom-dock {
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
  }

  .bottom-dock-inner {
    gap: 12px;
    padding: 6px 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .bottom-dock__legal {
    order: 3;
    width: 100%;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 4px;
    margin-top: 2px;
  }

  .bottom-dock__link {
    font-size: 10px;
    padding: 4px 6px;
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  :root {
    --nav-stack-offset: 72px;
  }
}