/* VPS cost calculator (page-templates/tpl-calculator.php). Reuses the tape rail and the result
   cards from components.css (.tape__rail, .tape__strip, .tape__range, .tape__mode …). Tokens only. */
.calc-hero{padding-bottom:clamp(1.5rem,3vw,2.25rem)}
.calc-sec{padding-top:0}
.calc{--tw:26px;display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;padding:clamp(1rem,3vw,2rem);background:var(--surface);border:1px solid var(--rule);border-radius:6px}
.calc__main{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-content:start;min-width:0}
.calc__pick{min-width:0}
.calc__lbl{display:block;margin-bottom:.625rem;padding:0;font-size:1.125rem;font-weight:650;line-height:1.3}
.calc__pick-row{display:flex;flex-wrap:wrap;gap:.5rem}
.calc__pick-row select{flex:1 1 16rem;width:100%;min-width:0}
.calc.is-live .calc__go{display:none}
.calc__help{margin-top:.375rem;font-size:.875rem;line-height:1.45;color:var(--muted)}
.calc__opt{font-size:.875rem;font-weight:400;color:var(--muted)}
.calc__srcs{margin-top:1rem}
.calc__src{padding:.875rem 1rem;background:var(--bg);border-left:3px solid var(--tape-edge);border-radius:0 var(--r) var(--r) 0}
.calc__src>*+*{margin-top:.375rem}
.calc__src-name .muted{font-size:.9375rem}
.calc__vals{font:400 .8125rem/1.55 var(--mono)}
.calc__cite{font-size:.8125rem;line-height:1.55;color:var(--muted)}
.calc__src .ph-flag{margin-top:.5rem}
/* Duration */
.calc__dur{display:grid;gap:1rem;min-width:0}
.calc__readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .875rem;min-height:3.25rem}
.calc__durv{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.calc__hrs{font:400 .875rem/1.4 var(--mono);color:var(--muted)}
.calc__rail{margin-top:-.25rem}
.calc__notch[data-notch=cap] span{left:auto;right:4px}
.calc__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.calc__exact{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.25rem 2.5rem}
.calc__time{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.calc__time legend,.calc__off label{margin-bottom:.375rem;padding:0;font-size:.875rem;font-weight:600;color:var(--muted)}
.calc__unit{display:inline-flex;align-items:center;gap:.375rem}
.calc__unit input{width:5rem;font-family:var(--mono)}
.calc__unit label{font-size:.875rem;font-weight:400}
.calc__off{max-width:21rem}
.calc__off label .calc__opt{font-weight:400}
/* Results */
.calc__res{display:grid;gap:1rem}
.calc__res .calc__lbl{margin:0}
.calc__sum{font-size:1.125rem;font-weight:600;line-height:1.45}
.calc__modes .is-na .tape__cost{color:var(--muted);font-weight:400}
.calc__be{font-size:.9375rem;color:var(--muted)}
.calc__note{padding-left:.75rem;border-left:3px solid var(--notch);font-size:.9375rem}
.calc__share{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;min-height:2.25rem}
.calc__copied{font-size:.875rem;color:var(--muted)}
/* Prices and rules */
.calc__side{display:grid;gap:1.75rem;align-content:start;min-width:0;padding-top:1.75rem;border-top:1px solid var(--rule)}
.calc__side:focus{outline:0}
.calc__fs{display:grid;gap:1rem}
.calc__f{display:grid;gap:.375rem;align-content:start}
.calc__f label{font-size:.9375rem}
.calc__f>input,.calc__f>select{width:100%}
.calc__side input[type=number]{font-family:var(--mono)}
.calc__off>input{width:8rem;font-family:var(--mono)}
.calc__modes .is-na .tape__calc{font-family:var(--sans);font-size:.875rem}
@media (min-width:720px) and (max-width:1023px){.calc__fs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.25rem}}
@media (min-width:1024px){
.calc{grid-template-columns:minmax(0,14fr) minmax(0,10fr);gap:0}
.calc__main{padding-right:2rem}
.calc__side{padding:0 0 0 2rem;border-top:0;border-left:1px solid var(--rule)}
}
@media (max-width:719px){.calc__exact{gap:1rem}.calc__time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.calc__unit{flex-direction:column;align-items:stretch;gap:.25rem}.calc__unit input{width:100%}}

/* How it counts */
.calc-how{display:grid;gap:1.25rem 2.5rem;margin:0;max-width:72rem}
.calc-how>div{padding-top:1rem;border-top:1px solid var(--rule)}
.calc-how dt{display:flex;align-items:center;gap:.5rem;font-weight:650}
.calc-how dt .icon{width:1.25rem;height:1.25rem;color:var(--muted)}
.calc-how dd{margin:.375rem 0 0;color:var(--muted)}
@media (min-width:720px){.calc-how{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Sources table: cards under 720px */
.calc-tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);border-radius:6px}
.calc-tbl table{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums}
.calc-tbl caption{padding:.875rem 1rem .5rem;font-weight:650;text-align:left}
.calc-tbl :is(th,td){padding:.625rem .875rem;border-top:1px solid var(--rule);text-align:left;vertical-align:top}
.calc-tbl thead th{border-top:0;border-bottom:1.5px solid var(--ink);font-size:.8125rem;font-weight:600;color:var(--muted);white-space:nowrap}
.calc-tbl tbody th{font-weight:650}
.calc-tbl td:nth-child(2),.calc-tbl td:nth-child(3),.calc-tbl td:nth-child(4){font-family:var(--mono);font-size:.875rem;white-space:nowrap}
.calc-tbl__plan{display:block;font-size:.875rem;font-weight:400;color:var(--muted)}
.calc-tbl__der{font:400 .75rem var(--sans);color:var(--muted)}
@media (max-width:719px){
.calc-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.calc-tbl tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem 1rem;padding:.875rem 1rem;border-top:1px solid var(--rule)}
.calc-tbl :is(th,td){padding:0;border:0}
.calc-tbl tbody th,.calc-tbl td:last-child{grid-column:1/-1}
.calc-tbl td::before{content:attr(data-label);display:block;font:600 .75rem/1.5 var(--sans);color:var(--muted)}
.calc-tbl td:nth-child(n){white-space:normal}
}
.calc-notes{max-width:46rem;margin-top:1.5rem;font-size:.9375rem;color:var(--muted)}
.calc-notes .ph-flag{margin:0 0 0 .25rem}

/* Read next */
.calc-next{margin:0;padding:0;list-style:none}
.calc-next li{padding-top:1rem;border-top:1px solid var(--rule)}
.calc-next__a{font-weight:650}
.calc-next__a .icon{width:1em;height:1em;margin-left:.25rem;vertical-align:-.125em}
.calc-next p{margin-top:.25rem;font-size:.9375rem;color:var(--muted)}