/* ===== benefit-grid =====
   The benefits area reads as one table: the benefit on the left, its limit on
   the right, hairline rules between the rows and a soft divider down the
   middle. It keeps two columns on a phone as well - a row never stacks.

   The ids are repeated on purpose: the phone rules in quote-actions-ribbon.css
   are written class-deep, and this grid has to hold at every width. */
#resultsContainer#resultsContainer .provider-card .benefit-section-list,
#resultsContainer#resultsContainer .provider-card .benefit-section-list.benefit-section-tree{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  gap:0!important;
}
#resultsContainer#resultsContainer .provider-card .benefit-row{
  display:grid!important;
  /* Two thirds for the benefit, one third for its limit. */
  grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important;
  align-items:start!important;
  column-gap:0!important;
  row-gap:0!important;
  flex-wrap:nowrap!important;
  padding:.4rem 0!important;
  border-bottom:1px solid #eef1f3!important;
}
#resultsContainer#resultsContainer .provider-card .benefit-row:last-child{
  border-bottom:0!important;
}
/* Benefit: left-aligned, and the divider runs down its right edge. */
#resultsContainer#resultsContainer .provider-card .benefit-row-label{
  min-width:0!important;
  text-align:left!important;
  padding-right:.65rem!important;
  border-right:1px solid #f0f3f5!important;
  overflow-wrap:anywhere;
}
/* Limit: right-aligned and bold, so the figures read down the column. */
#resultsContainer#resultsContainer .provider-card .benefit-row-value{
  min-width:0!important;
  max-width:none!important;
  text-align:right!important;
  font-weight:800!important;
  white-space:normal!important;
  /* A figure the column cannot hold wraps between the currency and the amount
     rather than splitting the digits. */
  overflow-wrap:normal!important;
  word-break:normal!important;
  margin-left:0!important;
  padding-left:.65rem!important;
}
/* A brochure note keeps its own full-width line under the pair. */
#resultsContainer#resultsContainer .provider-card .benefit-row-note{
  grid-column:1 / -1!important;
  flex:none!important;
  margin:.15rem 0 0!important;
  padding-left:0!important;
  border-right:0!important;
}
/* The looser fallback list, where a card carries no benefit schedule. */
#resultsContainer#resultsContainer .provider-card .benefit-list li{
  padding:.4rem 0!important;
  border-bottom:1px solid #eef1f3!important;
}
#resultsContainer#resultsContainer .provider-card .benefit-list li:last-child{
  border-bottom:0!important;
}
#resultsContainer#resultsContainer .provider-card .benefit-list li .benefit-status{
  margin-left:auto!important;
  text-align:right!important;
  font-weight:800!important;
}
/* Phone: the same two columns, a beat tighter. */
@media (max-width:700px){
  #resultsContainer#resultsContainer .provider-card .benefit-row{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important;
  }
  #resultsContainer#resultsContainer .provider-card .benefit-row-label{
    padding-right:.5rem!important;
  }
  #resultsContainer#resultsContainer .provider-card .benefit-row-value{
    padding-left:.5rem!important;
  }
}