.calc{--paper:var(--sj-surface-100);--surface:var(--sj-surface-000);--ink:var(--sj-ink);--muted:var(--sj-ink-muted);--rule:var(--sj-line);
  --accent:var(--sj-harbor);--focus:var(--sj-harbor);--accent-soft:var(--sj-harbor-tint);--warn:var(--sj-alert);
  --warn-soft:color-mix(in srgb,var(--sj-alert) 12%,var(--sj-surface-000));
  --seg-a:var(--sj-ink);--seg-b:var(--sj-line-strong);--kept:var(--sj-line);
  max-width:1180px;margin:0 auto;padding:24px 20px 64px;color:var(--ink);font-family:var(--sj-font-sans);
  font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
@media (max-width:919px){.calc{padding-bottom:96px}}
.calc,.calc *,.calc *::before,.calc *::after{box-sizing:border-box}
/* cost.js builds the tool list after the first paint. Until it adds .ready, what sits below the
   list stays invisible (it keeps its space), so the list growing shifts nothing visible.
   Without scripting nothing is hidden. */
@media (scripting:enabled){.calc:not(.ready) .time,.calc:not(.ready) .panel,.calc:not(.ready) .below,
  .calc:not(.ready) .src,.calc:not(.ready) .foot{visibility:hidden}}
.calc a{color:var(--accent)}
.calc :focus-visible,.calc-mbar :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.calc h1,.calc h2,.calc .big{font-family:var(--sj-font-serif)}
.calc h1{font-weight:600;font-size:clamp(30px,4.6vw,48px);line-height:1.1;letter-spacing:-.01em;margin:0 0 16px;max-width:20ch}
.calc .lede{font-size:18px;color:var(--muted);max-width:62ch;margin:0 0 28px}
.calc h2{font-size:22px;font-weight:600;margin:0 0 6px}
.calc h3{font-size:15px;font-weight:600;margin:0}
.calc p{margin:0 0 12px}
.calc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.calc .presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 36px}
.calc .presets span{color:var(--muted);font-size:15px;margin-right:4px}
.calc .chip{appearance:none;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;padding:7px 14px;border-radius:999px;cursor:pointer}
.calc .chip:hover{border-color:var(--muted)}
.calc .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.calc .layout{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:920px){.calc .layout{grid-template-columns:minmax(0,1fr) 380px;gap:48px}}

.calc .group{margin:0 0 28px}
.calc .group-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:2px}
.calc .group-head small{color:var(--muted);font-size:13px}
.calc .row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.calc .row input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);margin:0;cursor:pointer}
.calc .row label.name{cursor:pointer}
.calc .row .title{font-weight:600}
.calc .row .plan{color:var(--muted);font-size:14px}
.calc .row .note{grid-column:2 / -1;color:var(--muted);font-size:13px;line-height:1.4}
.calc .row .note:empty{display:none}
.calc .row.off .price-wrap,.calc .row.off .price-wrap input{color:var(--muted)}
.calc .price-wrap{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.calc .money{display:flex;align-items:center;border:1px solid var(--rule);border-radius:6px;background:var(--surface);padding:0 8px}
.calc .money span{color:var(--muted);font-size:14px}
.calc .money input{width:64px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;padding:6px 2px;text-align:right;font-variant-numeric:tabular-nums}
.calc .money input:focus{outline:none}
.calc .money:focus-within{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.calc .qty{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.calc .qty input{width:44px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;padding:5px 4px;text-align:center}
.calc .per{font-size:13px;color:var(--muted);min-width:24px}

.calc .time{margin-top:8px;padding:16px;border:1px dashed var(--rule);border-radius:10px}
.calc .time .fields{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:10px;align-items:center}
.calc .time label{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}

.calc .panel{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:24px}
@media (min-width:920px){.calc .panel{position:sticky;top:20px}}
.calc .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 18px}
.calc .cols .label{font-size:14px;color:var(--muted)}
.calc .big{font-size:38px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.calc .big small{font-family:var(--sj-font-sans);font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
.calc .cols .sub{font-size:13px;color:var(--muted)}
.calc .us .big{color:var(--accent)}

.calc .bars{margin:6px 0 18px}
.calc .bar{display:flex;height:18px;gap:2px;margin:4px 0 10px;border-radius:3px;overflow:hidden}
.calc .bar i{display:block;height:100%;min-width:2px}
.calc .bar-label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.calc .bar i{transition:flex-basis .35s ease}}

.calc .verdict{border-radius:10px;padding:14px 16px;margin:0 0 18px}
.calc .verdict.save{background:var(--accent-soft)}
.calc .verdict.more{background:var(--warn-soft)}
.calc .verdict .big{font-size:30px}
.calc .verdict.save .big{color:var(--accent)}
.calc .verdict.more .big{color:var(--warn)}
.calc .verdict p{font-size:14px;margin:4px 0 0}

.calc dl.lines{margin:0 0 16px;font-size:15px}
.calc dl.lines div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--rule)}
.calc dl.lines dt{color:var(--muted)}
.calc dl.lines dd{margin:0;font-weight:600;text-align:right}

.calc .seg{display:flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin:8px 0 6px}
.calc .seg button{flex:1;appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;padding:8px 4px;cursor:pointer;border-right:1px solid var(--rule)}
.calc .seg button:last-child{border-right:0}
.calc .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.calc .seg button:disabled{color:var(--muted);opacity:.5;cursor:not-allowed}
.calc .hint{font-size:13px;color:var(--muted);margin:0 0 14px}
.calc .hint.tight{margin:4px 0 0}
.calc .toggle{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0;cursor:pointer}
.calc .toggle input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}

.calc .btn{display:inline-block;appearance:none;border:0;background:var(--sj-harbor);color:var(--sj-on-harbor);font:inherit;font-weight:600;padding:.7rem 1.1rem;border-radius:8px;text-decoration:none;cursor:pointer}
.calc .btn:hover{opacity:.9}
.calc .calc-cta{margin:0 0 14px}

.calc .below{margin-top:56px;display:grid;gap:40px}
@media (min-width:920px){.calc .below{grid-template-columns:1fr 1fr}}
.calc .plans{display:grid;gap:0}
.calc .plan-row{padding:14px 0;border-top:1px solid var(--rule)}
.calc .plan-row .top{display:flex;justify-content:space-between;gap:12px}
.calc .plan-row p{font-size:14px;color:var(--muted);margin:4px 0 0}
.calc .table-wrap{overflow-x:auto}
.calc table{border-collapse:collapse;width:100%;font-size:14px}
.calc th,.calc td{text-align:left;padding:8px 10px 8px 0;border-top:1px solid var(--rule);vertical-align:top}
.calc th{font-weight:600;color:var(--muted);font-size:13px}
.calc td.r,.calc th.r{text-align:right}
.calc .fine{font-size:13px;color:var(--muted);max-width:70ch}
.calc .src{margin-top:56px}
.calc .foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--rule)}

.calc .edit{display:none;margin-top:40px;padding:20px;border:2px solid var(--accent);border-radius:12px}
.calc .edit.on{display:block}
.calc .edit .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.calc .edit label{font-size:13px;color:var(--muted);display:grid;gap:4px}
.calc .edit input[type=number]{border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;padding:6px 8px}
.calc .edit input[type=text]{width:100%;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit;font-size:13px;padding:8px}
.calc .edit .share{gap:6px}
.calc .edit .copy-row{margin-top:12px}

.calc-mbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--sj-ink);color:var(--sj-surface-100);font-family:var(--sj-font-sans);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:12px}
.calc-mbar a{color:var(--sj-surface-100);font-size:14px}
.calc-mbar .mlbl{font-size:12px;opacity:.75}
.calc-mbar .num{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
@media (min-width:920px){.calc-mbar{display:none}}