/* SourcingPromo — the price calculator on /quote-calculator/. Tokens and the panel, field and
   button classes come from tokens.css, style.css and forms.css; only "calc-" classes live here. */

/* The script hides whole blocks and table rows with [hidden], while the rules below set a
   display of their own: this keeps the attribute winning. */
.calc-layout [hidden]{display:none !important}

/* ---------- head ---------- */
.calc-hero__title{max-width:24ch}
.calc-hero .lede{max-width:64ch}

/* ---------- layout ---------- */
.calc-section{padding-top:clamp(1.5rem,3vw,2.5rem)}
.calc-layout{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:960px){
  .calc-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .calc-result{position:sticky;top:5.5rem}
}
.calc-main{min-width:0}
.calc-card .note{max-width:62ch}

/* ---------- the quantity slider ---------- */
.calc-tier{display:flex;flex-direction:column;gap:.55rem}
.calc-tier__scale{
  display:flex;justify-content:space-between;gap:.5rem;
  font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.calc-tier__scale span{flex:1 1 0;text-align:center}
.calc-tier__scale span:first-child{text-align:left}
.calc-tier__scale span:last-child{text-align:right}
.calc-tier__value{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.calc-tier__value strong{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}

input[type=range]{
  width:100%;margin:.2rem 0;padding:0;height:1.6rem;background:transparent;
  accent-color:var(--brand);cursor:pointer;
}

/* ---------- freight channels ---------- */
.calc-channels{display:flex;flex-wrap:wrap;gap:.45rem;border:0;margin:0;padding:0}
.calc-channels legend{
  font-size:var(--step--1);font-weight:600;color:var(--ink-2);
  padding:0 0 .45rem;display:block;width:100%;
}
.calc-radio{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.42rem .8rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper);font-size:var(--step--1);font-weight:560;color:var(--ink-2);
  transition:background-color .15s,border-color .15s,color .15s;
}
.calc-radio:hover{border-color:var(--ink-3);color:var(--ink)}
.calc-radio input{accent-color:var(--brand);margin:0;cursor:pointer}
.calc-radio:has(input:checked){background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark);font-weight:640}
.calc-radio--off,.calc-radio:has(input:disabled){
  opacity:.5;cursor:not-allowed;background:var(--sand-2);border-style:dashed;
  text-decoration:line-through;text-decoration-color:var(--ink-3);
}
.calc-radio--off:hover{border-color:var(--line-strong);color:var(--ink-2)}
.calc-radio--off input{cursor:not-allowed}

/* ---------- result panel ---------- */
.calc-panel{gap:.9rem}
.calc-empty{margin:0;color:var(--ink-3);font-size:var(--step--1);line-height:1.5}
.calc-body{display:flex;flex-direction:column;gap:.85rem}
.calc-picked{margin:0;display:flex;flex-direction:column;gap:.15rem}
.calc-picked__name{font-size:1.0625rem;font-weight:650;line-height:1.25;letter-spacing:-.01em}

/* ---------- the four lines ---------- */
.calc-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.calc-lines th,.calc-lines td{
  padding:.6rem 0;text-align:left;vertical-align:baseline;
  border-top:1px solid var(--line);
}
.calc-lines tbody tr:first-child th,
.calc-lines tbody tr:first-child td{border-top:0;padding-top:.15rem}
.calc-lines th{
  font-size:var(--step--1);font-weight:600;color:var(--ink-2);line-height:1.35;
  padding-right:.9rem;width:60%;
}
.calc-lines th .small{display:block;font-weight:400;letter-spacing:0;line-height:1.4}
.calc-lines td{text-align:right;white-space:nowrap;vertical-align:top}
.calc-amount{display:block;font-size:1.0625rem;font-weight:680;letter-spacing:-.01em}
.calc-unit{display:block;line-height:1.3;margin-top:.05rem}

.calc-hint{
  margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2);
  border-left:2px solid var(--brand);padding-left:.7rem;
}
.calc-lead{margin:0;color:var(--ink-2);line-height:1.5}

/* ---------- the fixed quote notes ---------- */
.calc-notes{
  margin:0;padding:.75rem .85rem .75rem 2rem;list-style:decimal;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  font-size:.75rem;line-height:1.55;color:var(--ink-3);
  display:grid;gap:.3rem;
}
.calc-notes li::marker{font-weight:700;color:var(--ink-2)}

.calc-actions{display:flex;flex-direction:column;gap:.45rem;margin:0}
.calc-actions .small{line-height:1.45}