/* Unbid revenue calculator. Uses the site's tokens from styles.css only. */

.calc-intro{max-width:68ch;margin-bottom:32px}
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:stretch}
.calc-panel{background:var(--white);border:1px solid var(--concrete-200)}
.calc-panel>.mono{color:var(--zinc-700);margin-bottom:16px}

/* inputs */
.calc-inputs{padding:24px}
.cpresets{display:flex;flex-wrap:wrap;gap:8px}
.cpresets .chip{font-variant-numeric:tabular-nums}
.cpresets .chip[aria-pressed="true"]{background:var(--hivis);color:var(--bitumen)}
.cpresets .chip[aria-pressed="true"]:hover{background:var(--hivis-deep)}
.cpnote{color:var(--zinc-700);margin:12px 0 20px}
.cfield{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 0;border-top:1px solid var(--concrete-200)}
.cfield:first-of-type{border-top:0;padding-top:0}
.cfield label{font-weight:600;font-size:16.5px}
.cfield .hint{grid-column:1/-1;font-size:14.5px;color:var(--zinc-700);margin-top:2px}
.cfield input[type="number"]{
  width:136px;min-height:48px;padding:10px 12px;text-align:right;
  font-family:var(--mono);font-weight:500;font-size:17px;font-variant-numeric:tabular-nums;
  color:var(--bitumen);background:var(--concrete-50);border:1px solid var(--concrete-200);border-radius:2px;
  -moz-appearance:textfield;appearance:textfield;
}
.cfield input[type="number"]::-webkit-outer-spin-button,
.cfield input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cfield input[type="number"]:focus{border:2px solid var(--bitumen);outline:2px solid var(--steelblue);outline-offset:2px;padding:9px 11px}
.cfield input[type="range"]{grid-column:1/-1;width:100%;margin:4px 0 0;accent-color:var(--bitumen);cursor:pointer;min-height:24px}
.cfield input[type="range"]:focus-visible{outline:2px solid var(--steelblue);outline-offset:4px}

/* results */
/* results ride the full height of the inputs panel: the rules space evenly, bottoms align */
.calc-results{padding:24px;display:flex;flex-direction:column;gap:24px;justify-content:space-between}
.cblock{border-top:1px solid var(--concrete-200);padding-top:20px}
.cblock:first-child{border-top:0;padding-top:0}
.cblock>.mono{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--zinc-700);margin-bottom:12px}
.cblock>.mono .tag{background:var(--hivis);color:var(--bitumen)}
.cblock>.mono .muted{color:var(--zinc-700)}

.chero{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:8px}
.chero b{font-family:var(--display);font-weight:700;font-size:clamp(48px,7vw,84px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.chero .mono{color:var(--zinc-700)}
.csub{color:var(--zinc-700);max-width:60ch}
.csub b{color:var(--bitumen);font-weight:600;font-variant-numeric:tabular-nums}

.ctiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ctiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ctiles-2+.ctiles-2{margin-top:24px;padding-top:20px;border-top:1px solid var(--concrete-200)}
.ctiles-2 .ctile b{font-size:clamp(38px,4.4vw,52px)}
.ctiles-sm .ctile b{font-size:28px}
.ctile b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctile b i{font-family:var(--mono);font-style:normal;font-weight:500;font-size:.48em;letter-spacing:0;color:var(--zinc-700);margin-right:.15em;vertical-align:.14em}
.ctile span{display:block;margin-top:10px;color:var(--zinc-700)}

.cdelta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--zinc-700);font-variant-numeric:tabular-nums}
.cdelta b{color:var(--bitumen);font-weight:500}
.ccons{margin-top:16px;padding:16px;background:var(--concrete-100);font-size:14.5px;color:var(--zinc-700);font-variant-numeric:tabular-nums}
.ccons b{color:var(--bitumen);font-weight:600}

.ccta{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.ccta .mono{color:var(--zinc-700)}

/* .cfoot (small print) now lives in styles.css — shared by index, pricing and this page */

@media (max-width:820px){
  .calc{grid-template-columns:1fr}
}
@media (max-width:480px){
  .ctiles{grid-template-columns:1fr 1fr}
  .ctile:last-child{grid-column:1/-1}
  .ctiles-2{grid-template-columns:1fr}
  .ctiles-2 .ctile:last-child{grid-column:auto}
  .ctiles-2 .ctile b{font-size:40px}
  .cfield input[type="number"]{width:112px}
  .chero b{font-size:44px}
}
@media (max-width:720px){
  .cfoot{font-size:12px}
}
@media (prefers-reduced-motion:no-preference){
  .ctile b,.chero b{transition:color 120ms linear}
}
@media (max-width:480px){
  .cdelta span[aria-hidden]{display:none}
}