/* Email cost calculator (/tools/email-cost-calculator/) */
.cc-sub{margin:0 0 -8px;font:700 23px/1.35 var(--ui);color:var(--i-ink)}
.cc-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px 28px;align-items:start}
.cc-f{margin:0;padding:20px;border:1px solid var(--i-line);border-radius:16px;background:#fff;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;min-inline-size:0}
.cc-f:first-child{grid-row:span 2}
.cc-f legend{float:left;width:100%;padding:0;margin:0 0 4px;display:flex;align-items:center;gap:10px;font:700 19px/1.3 var(--ui);color:var(--i-ink)}
.cc-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--i-sel);color:var(--i-blue);font:700 15px var(--ui);flex:none}
.cc-f .pv-btn{cursor:pointer;justify-self:start}
.cc-f .pv-btn[disabled]{opacity:.45;cursor:default}
.cc-picks{display:grid;gap:10px}
.cc-pick{display:flex;gap:8px;align-items:center;min-width:0}
.cc-pick select{flex:1 1 0;width:0;min-width:0;height:46px;padding:0 12px;border:1px solid var(--i-line);border-radius:10px;background:#fff;font:500 17px var(--ui);color:var(--i-ink)}
.cc-pick .pv-btn{width:46px;height:46px;padding:0;justify-content:center;flex:none}
.cc-step{display:flex;gap:8px;align-items:center}
.cc-step .pv-btn{width:46px;height:46px;padding:0;justify-content:center}
.cc-step input{width:110px;height:46px;box-sizing:border-box;text-align:center;border:1px solid var(--i-line);border-radius:10px;font:700 22px var(--ui);color:var(--i-ink)}
.cc-pick select:focus,.cc-step input:focus{outline:3px solid var(--i-blue);outline-offset:1px}
.cc-years{display:flex;flex-wrap:wrap;gap:8px}
.cc-years button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--i-line);background:#fff;font:500 16px var(--ui);color:var(--i-body);cursor:pointer}
.cc-years button svg.i{width:16px;height:16px}
.cc-years button[aria-pressed=true]{background:var(--i-ink);border-color:var(--i-ink);color:#fff}
.cc-years button:focus-visible{outline:3px solid var(--i-blue);outline-offset:2px}

.cc-out{display:grid;gap:16px}
.cc-out:empty{display:none}
.cc-sum{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:var(--i-passbg);color:var(--i-pass)}
.cc-sum svg.i{width:28px;height:28px;flex:none}
.cc-sum b{display:block;font:700 22px/1.3 var(--ui)}
.cc-sum span{font:400 17px/1.5 var(--ui)}
.cc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.cc-card{display:grid;gap:12px;align-content:start;padding:20px;border:1px solid var(--i-line);border-radius:16px;background:#fff;min-width:0}
.cc-card.best{border:2px solid var(--i-pass)}
.cc-hd{display:flex;gap:12px;align-items:flex-start;min-width:0}
.cc-hd .wl canvas.lg{width:100%;height:100%;display:block}
.cc-hd b{display:block;font:700 19px/1.25 var(--ui);color:var(--i-ink)}
.cc-hd small{display:block;font:400 15px var(--ui);color:var(--i-soft)}
.cc-tag{justify-self:start;font:600 13px var(--ui);color:var(--i-pass);background:var(--i-passbg);padding:3px 10px;border-radius:999px}
.cc-total{font:800 36px/1 var(--ui);letter-spacing:-.02em;color:var(--i-ink)}
.cc-total small{display:block;margin-top:6px;font:400 15px/1.4 var(--ui);letter-spacing:0;color:var(--i-soft)}
.cc-avg{margin:0;font:500 16px var(--ui);color:var(--i-body)}
.cc-yrs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cc-yrs li{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;font:400 15px var(--ui);color:var(--i-body)}
.cc-bar{height:10px;border-radius:5px;background:var(--i-rail);overflow:hidden}
.cc-bar i{display:block;height:100%;background:var(--i-blue);border-radius:5px}
.cc-yrs li.up .cc-bar i{background:#c27400}
.cc-yrs em{font:600 15px var(--ui);font-style:normal;color:var(--i-ink);white-space:nowrap}
.cc-notes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cc-notes li{display:flex;gap:8px;font:400 15px/1.45 var(--ui);color:var(--i-body)}
.cc-notes li svg.i{width:16px;height:16px;flex:none;margin-top:2px;color:var(--i-soft)}
.cc-notes li.warn{color:var(--i-amber)}
.cc-notes li.warn svg.i{color:var(--i-amber)}
.cc-card .more{justify-self:start;margin:0;padding:0;display:inline-flex;align-items:center;gap:6px;font:600 15px var(--ui);color:var(--i-blue);text-decoration:none}
.cc-card .more svg.i{width:16px;height:16px}
.cc-card .chk{font:400 13px var(--ui);color:var(--i-soft)}
.cc-empty{margin:0;padding:18px 20px;border:1px dashed var(--i-line);border-radius:14px;font:400 17px var(--ui);color:var(--i-soft)}
.cc-how{margin-top:4px}
@media (max-width:860px){.cc-form{grid-template-columns:minmax(0,1fr)}.cc-f:first-child{grid-row:auto}}
@media (max-width:560px){.cc-cards{grid-template-columns:minmax(0,1fr)}.cc-total{font-size:32px}}
.wl{--s:40px;width:var(--s);height:var(--s);flex:none;border-radius:calc(var(--s) * .26);display:grid;place-items:center;background:#fff;border:1px solid var(--i-line);overflow:hidden}
.wl img{width:74%;height:74%;object-fit:contain}
.wl.letter{border:0;color:#fff;font:800 calc(var(--s) * .45)/1 var(--ui)}
.wl.s40{--s:40px}.wl.s44{--s:44px}.wl.s48{--s:48px}.wl.s72{--s:72px}