/* ===== quote-field-heights =====
   Every selector in the quote engine takes its height from the cover-type
   pills, so the form reads as one grid instead of stepping between 34, 38 and
   44px rows. One height serves desktop and phone alike. */
:root{--quote-field-h:40px;}
/* The repeated id is deliberate: the layout sheets pin these rows with rules up
   to three ids deep (the maternity note among them), and every selector has to
   answer to the same height. */
#quote-form#quote-form#quote-form#quote-form select,
#quote-form#quote-form#quote-form#quote-form input[type="number"],
#quote-form#quote-form#quote-form#quote-form input[type="text"],
#quote-form#quote-form#quote-form#quote-form input[type="tel"],
#quote-form#quote-form#quote-form#quote-form input[type="search"]{
  height:var(--quote-field-h)!important;
  min-height:var(--quote-field-h)!important;
  max-height:var(--quote-field-h)!important;
  box-sizing:border-box!important;
}
/* The cover-type pills themselves sit on the same line height. */
#quote-form#quote-form#quote-form#quote-form .cover-type-toggle label{
  height:var(--quote-field-h)!important;
  min-height:var(--quote-field-h)!important;
  max-height:var(--quote-field-h)!important;
  box-sizing:border-box!important;
}
/* Insurer and plan pickers are selectors too. */
#quote-form#quote-form#quote-form#quote-form .insurer-checkboxes label{
  min-height:var(--quote-field-h)!important;
}

/* ===== quote-card row rhythm =====
   Air between the bands of the card, so the cover type, the member selectors,
   the insurer strip and the limits each read as their own block:

     cover-type row -> members            +7px   (11.2px becomes 18px)
     member selectors -> insurer strip    +8px   (the empty badge row between
                                                  them collapses its own 5.6px
                                                  against this margin, so the
                                                  gap needs 14px to read ~16px)
     insurer strip -> inpatient limit     +9px   (11.2px becomes 20px)

   Only the spacing moves: the heights stay on the single --quote-field-h that
   every selector and the cover-type pills already share. The inline
   margin-bottom each row carries in the markup is why these need !important.
   The inpatient row also carries .insurer-card, so the strip is matched by
   having that card but not the inpatient one. */
#quote-form#quote-form .quote-step-cover > .family-row:has(.cover-type-toggle){
  margin-bottom:18px!important;
}
#quote-form#quote-form .quote-step-cover-selection > .family-row:has(.insurer-card):not(:has(.inpatient-card)){
  margin-top:14px!important;
  margin-bottom:20px!important;
}

/* ===== the phone keeps one 12px between these rows =====
   On a phone the air above stacked on the 12px the mobile sheets already keep
   between the step cards, so the cover-type pills ended 30px above the member
   selectors, the insurers 26px below them and the limit another 32px on. The
   rows carry no air of their own here and the step gap does the spacing, so
   cover type -> members -> insurers -> limit all read 12px apart, in step with
   the rest of the phone column. */
@media (max-width: 1024px){
  #quote-form#quote-form .quote-step-cover > .family-row:has(.cover-type-toggle){
    margin-bottom:0!important;
  }
  #quote-form#quote-form .quote-step-cover-selection > .family-row:has(.insurer-card):not(:has(.inpatient-card)){
    margin-top:0!important;
    margin-bottom:0!important;
  }
}