/* ── Cost calculator ───────────────────────────────────────────────────────
   Site tokens only. Inputs match the chat composer's treatment so the two
   read as the same interface. The results block reserves its own height, so
   nothing moves when the numbers change.                                    */

.sccalc{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:26px 24px;
  margin:32px 0;
  max-width:var(--read);
  margin-inline:auto;
}
.sccalc__head{margin:0 0 20px}
.sccalc .sccalc__title{margin:0 0 8px;font-size:20px;line-height:1.3}
.sccalc .sccalc__sub{margin:0;font-size:13.5px;color:var(--ink-2);max-width:none}

.sccalc__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.sccalc .sccalc__field{display:flex;flex-direction:column;gap:6px;margin:0;max-width:none}
/* display:flex above outranks the UA [hidden] rule, so restate it. */
.sccalc [hidden]{display:none!important}
.sccalc__field--share{grid-column:1 / -1}
.sccalc__field label{font-size:13px;font-weight:600;color:var(--ink)}
.sccalc .sccalc__hint{font-size:12px;color:var(--ink-3);max-width:none}

.sccalc input[type="number"],
.sccalc select{
  width:100%;padding:10px 12px;font:inherit;font-size:15px;
  border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface);color:var(--ink);
}
.sccalc input[type="number"]:focus-visible,
.sccalc select:focus-visible,
.sccalc input[type="range"]:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
.sccalc__rangewrap{display:flex;align-items:center;gap:12px}
.sccalc input[type="range"]{flex:1;accent-color:var(--blue);min-width:0}
.sccalc .sccalc__out{
  font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;
  color:var(--ink);min-width:4ch;text-align:right;
}

.sccalc .sccalc__noscript{
  margin:16px 0 0;padding:12px 14px;font-size:13.5px;max-width:none;
  background:var(--sunk);border:1px solid var(--line);border-radius:8px;color:var(--ink-2);
}

/* Reserved so the result area never changes height as figures change. */
.sccalc__results{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  min-height:330px;
}
.sccalc .sccalc__totalrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 16px;max-width:none;
}
.sccalc__totallabel{font-size:14px;font-weight:600;color:var(--ink-2)}
.sccalc__total{
  font-family:var(--display);font-size:32px;line-height:1;font-weight:700;
  color:var(--blue);font-variant-numeric:tabular-nums;
}

.sccalc__table{width:100%;border-collapse:collapse;font-size:14px;margin:0}
.sccalc__table th,.sccalc__table td{
  padding:9px 10px;border:0;border-bottom:1px solid var(--line);text-align:left;
}
.sccalc__table thead th{
  background:var(--sunk);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
}
.sccalc__table tbody th{font-weight:600;color:var(--ink)}
.sccalc__table .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sccalc__table tbody tr:last-child th,
.sccalc__table tbody tr:last-child td{border-bottom:0}

.sccalc__perreq{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line);
}
.sccalc__perreq div{display:flex;flex-direction:column;gap:3px}
.sccalc__perreq dt{font-size:12px;font-weight:600;color:var(--ink-2)}
.sccalc__perreq dd{
  margin:0;font-size:17px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.sccalc .sccalc__verdict{
  margin:16px 0 0;padding:12px 14px;max-width:none;font-size:14px;line-height:1.55;
  background:var(--blue-tint);border-left:3px solid var(--blue);border-radius:0 8px 8px 0;
  color:var(--ink);
}
.sccalc .sccalc__foot{margin:18px 0 0;font-size:12.5px;color:var(--ink-3);max-width:none}

@media (max-width:700px){
  .sccalc{padding:20px 16px}
  .sccalc__grid{grid-template-columns:1fr}
  .sccalc__perreq{grid-template-columns:1fr}
  .sccalc__total{font-size:27px}
  .sccalc__results{min-height:420px}
  .sccalc__table{font-size:13px}
  .sccalc__table th,.sccalc__table td{padding:8px 7px}
}