/* Small additions on top of the design's own `max-width: 820px` breakpoint,
   which already handles nav collapse, section repadding, hero scaling, the
   scrolling demo tab row and the restacked alert cards. Everything here covers
   the lead form, which the design file does not know is interactive.
   The export styles elements inline, so these need !important. */

@media (max-width: 820px) {

  /* iOS Safari zooms the whole page in when a focused input renders below
     16px, and never zooms back out. The design specifies 15px. */
  #lead-email,
  #lead-company {
    font-size: 16px !important;
  }

  /* Comfortable thumb targets on the form. */
  #lead-email,
  #lead-company {
    padding: 14px !important;
  }
  #lead-submit {
    min-height: 50px;
  }

  /* The design intends the demo tab row to scroll inside its pill. The pill
     itself is a flex item sized to its content, so without these it pushes the
     page 6px wider than the viewport and the whole document scrolls sideways
     instead. */
  #demo div:has(> .os-tabs) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .os-tabs {
    min-width: 0 !important;
  }

  /* Tap targets. The design's sizes are visually right but land under the 44px
     touch guideline, so grow the hit area rather than the pill: an invisible
     inset overlay leaves the rendered design untouched. */
  header nav a[href="#contact"] {
    position: relative;
  }
  header nav a[href="#contact"]::after {
    content: '';
    position: absolute;
    inset: -6px -4px;
    border-radius: 999px;
  }

  /* Footer links can simply grow taller - the row is already flex with gaps. */
  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  #contact a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* An alert card's header row keeps its status badge on the same line as the
     author, which squeezes the name into an ellipsis three characters wide
     ("Man..."). Let the row wrap so the badge drops below and the name is
     readable. */
  .os-demo .os-alerthead {
    flex-wrap: wrap !important;
    row-gap: 6px;
  }
  .os-demo .os-alerthead > div {
    min-width: 0;
  }
}

/* Keep the submit button legible while it is mid-request or disabled. */
#lead-submit[disabled] {
  cursor: progress;
}