/* =====================================================================
   The engine's selector boxes wear one thin outline.

   Every control whose text starts "Select ..." - the member ages, the cover
   limits, the scopes, the plan picker - is outlined in a single hairline: gold
   on the phone sheet, green on the desk. The boxes themselves do not change;
   only the colour of the 1px outline, so the fields stay as light as they were.

   The outlines are not all on the same element: a lone select draws its own
   border, while the benefit rows draw it on the wrapper that holds the select
   and its scope, and the Inpatient row draws it on the same card its golden
   next-step cue uses. All of those are listed here.
   ===================================================================== */

/* Only the colour is set, never the width: a box that already draws a hairline
   keeps exactly that hairline, and a box that draws none stays borderless.
   The repeated #quote-form raises the weight past the member-row rules. */

/* ---------- a phone: thin gold ---------- */
@media (max-width: 1024px) {
  html body[data-mobile="true"] #quote-form#quote-form#quote-form select:not(.principal-age-placeholder):not(.principal-age-error):not(.compare-all-select-required):not(.inpatient-limit-error):not(.zero-count-required),
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .limit-scope-wrapper,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .inpatient-control,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .cover-type-card.insurer-card,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .insurer-card .insurer-control,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .insurer-card #planGroup,
  /* the three cover-type chips read as selectors too */
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .cover-type-toggle label,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .cover-type-toggle label:has(input:checked),
  /* a box that already holds a value keeps the gold hairline rather than
     turning green the way the chosen-fill rule leaves it */
  html body[data-mobile="true"] #quote-form#quote-form#quote-form select.has-selection,
  html body[data-mobile="true"] #quote-form#quote-form#quote-form .children-count-item select.has-selection {
    border-color: #d4af37 !important;
  }
}

/* ---------- a desk: thin green ---------- */
@media (min-width: 1025px) {
  html body #quote-form#quote-form#quote-form select:not(.principal-age-placeholder):not(.principal-age-error):not(.compare-all-select-required):not(.inpatient-limit-error):not(.zero-count-required),
  html body #quote-form#quote-form#quote-form .limit-scope-wrapper,
  html body #quote-form#quote-form#quote-form .inpatient-control,
  html body #quote-form#quote-form#quote-form .insurer-card .insurer-control,
  html body #quote-form#quote-form#quote-form .insurer-card #planGroup {
    border-color: #017a78 !important;
  }
}