/* HEFT v3 /compare. Owned by the compare.html builder. SPEC 6.6.
   Section layout and the calculator layout only: placement, gaps and spacing from tokens.
   Every visible style (inputs, labels, messages, panels, table, cards, dot plot) comes from components.css. */

/* head: the lede runs straight into the first section */
.compare-head{padding-bottom:0}

/* where HEFT loses: one label panel; rows stack on phones so the sentences get the full width */
.compare-loses{max-width:52rem}
.compare-loses .price-label{margin:0}
@media (max-width:767px){
  .compare-loses .price-label--large .price-label__row{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
}

/* the table: the note under it */
.compare-note{margin-top:var(--s-5)}
/* phone cards: keep a gap between the row name and its value (a long name like "Protein per serving" fills 8.5em) */
.compare-card dt{padding-right:var(--s-3)}

/* cost per cup: the homepage dot plot width */
.compare-cost{max-width:52rem}

/* the calculator: one fieldset per tub; two fields a row on phones, four from 768px */
.compare-calc{max-width:52rem}
.calc{display:grid}
.calc__item{min-width:0;margin:0;padding:0 0 var(--s-5);border:0;border-bottom:1px solid var(--rule)}
.calc__item+.calc__item{margin-top:var(--s-5)}
.calc__item legend{padding:0;margin-bottom:var(--s-3)}
.calc__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.calc__field{display:grid;gap:var(--s-1);align-content:start;min-width:0}
.calc__field .join__input{min-width:0}
.calc__cost{display:grid;gap:var(--s-1);align-content:start}
.calc__cost b{display:flex;align-items:center;min-height:48px}
.calc__result{display:block;margin-top:var(--s-5);max-width:none}
.calc__actions{margin-top:var(--s-4)}
.compare-calc-after{margin-top:var(--s-6)}
@media (min-width:768px){
  .calc__fields{grid-template-columns:repeat(4,minmax(0,1fr))}
}