/* unitprice — the division, then the same rate applied to the reader */
.up{display:grid;gap:clamp(1.2rem,2.6vw,1.8rem)}

/* ------------------------------------------------------ beat one: the sum */
.up__eq{
  display:grid;align-items:center;justify-content:start;
  grid-template-columns:auto auto auto auto auto;gap:.6rem clamp(.9rem,2.4vw,2rem);
}
.up__term{display:grid;gap:.45rem;align-content:start;min-width:0}
.up__fig{
  font-weight:500;font-size:clamp(1.3rem,3.1vw,2.1rem);letter-spacing:-.035em;
  line-height:1;color:var(--text);
}
.up__res{
  font-weight:500;font-size:clamp(2.6rem,7.4vw,4.8rem);letter-spacing:-.05em;
  line-height:.94;color:var(--yellow);text-shadow:0 0 60px rgba(255,214,10,.22);
}
.up__term--res .label{color:var(--yellow)}
.up__foot{font-size:.74rem;line-height:1.4;color:var(--text-4);max-width:15rem}
.up__op{
  font-size:1.5rem;color:var(--text-4);line-height:1;align-self:center;padding-top:.9rem;
}

/* ---------------------------------------------------- beat two: estimator */
.up__est{
  display:grid;gap:1.15rem;border-top:1px solid var(--line);padding-top:clamp(1.3rem,3vw,2rem);
}
.up__est-head{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between}
.up__est-head h3{color:var(--text)}

.up__grid{display:grid;gap:1.15rem;align-items:start}
.up__side{display:grid;gap:.7rem;min-width:0}
.up__knobs{display:grid;gap:.65rem}
.up__knob{
  display:grid;gap:.15rem;padding:.55rem .85rem .35rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  transition:border-color var(--dur-1) var(--ease);
}
.up__knob:focus-within{border-color:var(--line-2)}
.up__knob-top{display:flex;gap:1rem;align-items:baseline;justify-content:space-between}
.up__lab{font-size:.84rem;color:var(--text-2);line-height:1.35}
.up__val{
  font-size:.86rem;font-weight:500;color:var(--yellow);white-space:nowrap;letter-spacing:-.01em;
}
.up__knob input[type=range]{height:2.6rem}

.up__formula{
  font-size:.68rem;letter-spacing:.06em;color:var(--text-4);
  font-variant-numeric:tabular-nums;
}

.up__out{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:1rem clamp(1.4rem,4vw,3rem);
  border-left:2px solid var(--yellow);padding:.15rem 0 .15rem 1.1rem;align-content:start;
}
.up__out-cell{display:grid;gap:.4rem;align-content:start;min-width:0}
.up__out-fig{
  font-weight:500;font-size:clamp(1.5rem,3.8vw,2.4rem);letter-spacing:-.035em;
  line-height:1;color:var(--text);
}
.up__out-fig--y{color:var(--yellow)}
.up__out.is-zero{border-left-color:var(--line-2)}
.up__out.is-zero .up__out-fig{color:var(--text-3)}
.up__hint{
  grid-column:1/-1;font-size:.8rem;line-height:1.5;color:var(--text-3);max-width:38rem;
}
.up__hint:empty{display:none}

@media (min-width:900px){
  .up__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3rem)}
  .up__out{grid-template-columns:1fr;gap:1.2rem}
  .up__out-fig{font-size:clamp(1.7rem,2.9vw,2.4rem)}
}

/* ----------------------------------------------------------------- narrow */
@media (max-width:820px){
  .up__eq{
    grid-template-columns:auto 1fr;justify-content:stretch;
    gap:.35rem .9rem;
  }
  .up__op{grid-column:1;justify-self:center;padding-top:0;font-size:1.15rem}
  .up__term{grid-column:2}
  .up__term:first-child{grid-column:1/-1}
  .up__foot{max-width:none}
}
@media (max-width:720px){
  .up__res{font-size:clamp(2.8rem,17vw,4rem)}
  .up__knob{padding:.6rem .8rem .45rem}
  .up__knob input[type=range]{height:2.9rem}
  .up__lab{font-size:.82rem}
  .up__est-head h3{font-size:1.2rem}
  .up__reset{min-height:2.5rem}
  .up__out{gap:1rem}
}