/* hst-calc.css — Order Form calculator (design/drafts ?theme=order). Everything scoped to .hstc;
   override the tokens on .hstc from the theme if needed. */
.hstc{
  --hstc-ink:#0E1411; --hstc-ink-2:#3F4A44; --hstc-line:#0E141133; --hstc-surface:#fff;
  --hstc-brick:#B5462B; --hstc-brick-2:#9C3A22; --hstc-tint:#E7EFE9; --hstc-ok:#1F6E43; --hstc-now:#8F2D16;
  --hstc-font:"Libre Franklin",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hstc-pad:clamp(16px,3.2vw,28px);
  --hstc-pad:round(clamp(16px,3.2vw,28px),1px); /* whole px keeps the double rule crisp */
  container-type:inline-size;
  box-sizing:border-box; max-width:640px; margin:0; padding:var(--hstc-pad);
  background:var(--hstc-surface); color:var(--hstc-ink); border:2px solid var(--hstc-ink); border-radius:0;
  font:400 16px/1.5 var(--hstc-font); text-align:left;
}
.hstc *,.hstc *::before,.hstc *::after{box-sizing:border-box}
:where(.hstc) :where(p,ul,fieldset){margin:0}
.hstc [hidden]{display:none!important}
.hstc a{color:#1C5440;text-underline-offset:.2em}
.hstc :focus-visible{outline:3px solid var(--hstc-brick);outline-offset:2px}
.hstc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hstc-hd{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:3px solid var(--hstc-ink);
  font:800 14px/18px var(--hstc-font);text-transform:uppercase;letter-spacing:.08em}
.hstc-hd span+span{color:var(--hstc-ink-2);font-weight:700;font-size:12px}

/* controls */
.hstc-lbl{display:block;margin-bottom:6px;font:700 12px/16px var(--hstc-font);text-transform:uppercase;letter-spacing:.06em;color:var(--hstc-ink-2)}
.hstc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.hstc-field{min-width:0}
.hstc select,.hstc input[type=date],.hstc-money{width:100%;min-height:48px;border:1.5px solid var(--hstc-ink);border-radius:0;background:#fff;color:var(--hstc-ink)}
.hstc select,.hstc input[type=date]{font:600 17px/1.2 var(--hstc-font);padding:11px 12px;appearance:none;-webkit-appearance:none}
.hstc select{padding-right:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E1411' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/16px}
.hstc-money{display:flex;align-items:center}
.hstc-money>span{padding:0 0 0 12px;font-weight:700;color:var(--hstc-ink-2)}
.hstc-pct>span{padding:0 12px 0 0}
.hstc-money input{flex:1;min-width:0;border:0;background:transparent;padding:11px 12px;font:600 18px/1.2 var(--hstc-font);font-variant-numeric:tabular-nums;color:inherit}
.hstc-money:focus-within{outline:3px solid var(--hstc-brick);outline-offset:2px}
.hstc-money input:focus-visible{outline:0}
.hstc :disabled{background:var(--hstc-tint);color:var(--hstc-ink);opacity:1;cursor:not-allowed}
.hstc-money:has(:disabled){background:var(--hstc-tint)}
.hstc-hint{margin-top:6px;font-size:13px;line-height:18px;color:var(--hstc-ink-2)}
.hstc-fields+.hstc-hint{margin-top:10px}

.hstc-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:0;padding:0;margin-top:18px}
.hstc-seg label{position:relative;cursor:pointer}
.hstc-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.hstc-seg span{display:block;padding:11px 10px;text-align:center;font-weight:700;font-size:15px;line-height:22px;border:1.5px solid var(--hstc-ink);background:#fff;transition:background-color .15s,color .15s}
.hstc-seg label+label span{border-left-width:0}
.hstc-seg input:checked+span{background:var(--hstc-ink);color:#fff}
.hstc-seg input:focus-visible+span{outline:3px solid var(--hstc-brick);outline-offset:2px}
.hstc-seg input:disabled+span{cursor:not-allowed}
.hstc-seg input:disabled:not(:checked)+span{color:var(--hstc-ink-2)}

.hstc-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-weight:600;cursor:pointer;line-height:22px}
.hstc-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--hstc-ink)}

.hstc-quarters{border:0;padding:0;margin-top:16px;min-width:0}
.hstc-quarters legend{padding:0}
.hstc-qgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px}
.hstc-qgrid .hstc-lbl{letter-spacing:.02em;white-space:nowrap}
.hstc-qgrid .hstc-money input{font-size:16px;padding:11px 8px}
.hstc-qgrid .hstc-money>span{padding-left:8px}
.hstc--threshold>.hstc-field{margin-top:14px}

.hstc-more{margin-top:16px;border-top:1px solid var(--hstc-line);padding-top:12px}
.hstc-more summary{cursor:pointer;font-weight:700;color:#1C5440}
.hstc-more .hstc-seg{margin-top:16px}

/* result: lettered order-form lines, tax lines highlighted, double-ruled total */
.hstc-result{margin-top:22px}
.hstc-result-hd{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;font:700 12px/16px var(--hstc-font);text-transform:uppercase;letter-spacing:.06em;color:var(--hstc-ink-2)}
.hstc-result-hd span+span{text-transform:none;letter-spacing:0;font-size:13px}
.hstc--inline .hstc-result-hd{display:none}
.hstc-math .hstc-note{margin-top:10px;font-size:13px;line-height:18px}
.hstc-rows{counter-reset:line;border-top:1px solid var(--hstc-line)}
.hstc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hstc-line);font-variant-numeric:tabular-nums}
.hstc-rows .hstc-row{counter-increment:line;grid-template-columns:34px minmax(0,1fr) auto}
.hstc-rows .hstc-row::before{content:counter(line,upper-alpha);padding-left:10px;font-weight:800;color:var(--hstc-brick)}
.hstc-row>span:last-child{white-space:nowrap;text-align:right;font-weight:600}
.hstc-row small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--hstc-ink-2);line-height:18px}
.hstc-row.is-tax,.hstc-row.is-answer{background:var(--hstc-tint);font-weight:700}
.hstc-row.is-tax>span:last-child{font-weight:800}
.hstc-total{padding:12px 0 12px 34px;border-bottom:3px double var(--hstc-ink);font:900 26px/32px var(--hstc-font);letter-spacing:-.02em}
.hstc-total>span:last-child{font-weight:900}
.hstc-total small{letter-spacing:0}

.hstc-verdict{margin-top:14px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;padding:10px 14px;border:2px solid var(--hstc-ink);background:var(--hstc-tint)}
.hstc-verdict::before{content:"Status";grid-row:span 2;align-self:center;font:800 11px/1 var(--hstc-font);text-transform:uppercase;letter-spacing:.08em;color:var(--hstc-ink-2)}
.hstc-verdict b{font-size:17px;line-height:22px}
.hstc-verdict small{font-size:13px;line-height:18px;color:var(--hstc-ink-2)}
.hstc-verdict[data-state=must]{border-color:var(--hstc-brick);background:#fff}
.hstc-verdict[data-state=must] b{color:var(--hstc-brick)}
.hstc-verdict[data-state=now]{border-color:var(--hstc-now);background:var(--hstc-now);color:#fff}
.hstc-verdict[data-state=now]::before,.hstc-verdict[data-state=now] small{color:#fff}

.hstc-bar{padding:10px 0 12px 34px;border-bottom:1px solid var(--hstc-line)}
.hstc-bar p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;font-variant-numeric:tabular-nums}
.hstc-bar p span:first-child{font-weight:700}
.hstc-track{display:block;height:8px;margin-top:6px;border:1.5px solid var(--hstc-ink);background:#fff}
.hstc-track span{display:block;height:100%;background:var(--hstc-ok)}
.hstc-bar.is-over .hstc-track span{background:var(--hstc-brick)}

.hstc-math{margin-top:12px;font-size:15px}
.hstc-math summary{cursor:pointer;font-weight:700;color:#1C5440}
.hstc-math p{margin-top:6px;max-width:48ch;font-size:14px;line-height:22px;color:var(--hstc-ink-2);font-variant-numeric:tabular-nums}
.hstc-note{margin-top:8px;max-width:44ch;font-size:13px;line-height:18px;color:var(--hstc-ink-2)}
.hstc-help{margin-top:16px;padding:14px 16px;background:var(--hstc-tint)}
.hstc-help ul{padding-left:1.1em;display:grid;gap:8px;font-size:15px}

.hstc-next{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.hstc-next:empty{display:none}
.hstc-notes{margin-top:12px}
.hstc-notes:empty{display:none}
.hstc-btn{display:inline-flex;align-items:center;gap:.5em;padding:14px 20px;background:var(--hstc-brick);color:#fff!important;font:700 16px/1 var(--hstc-font);text-decoration:none;border:0;transition:background-color .15s}
.hstc-btn:hover{background:var(--hstc-brick-2)}
.hstc-btn:active{transform:translateY(1px)}
.hstc-link{font-weight:700;display:inline-flex;align-items:center;gap:.35em}
.hstc-arr{display:inline-block;width:.95em;height:.95em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.hstc-arr.is-out{transform:rotate(-45deg)}
.hstc-src{margin-top:16px;padding-top:10px;border-top:1px solid var(--hstc-line);font-size:12px;color:var(--hstc-ink-2)}

/* density */
.hstc--compact{--hstc-pad:16px}
.hstc--compact .hstc-fields{grid-template-columns:1fr}
.hstc--compact .hstc-total{font-size:22px;line-height:28px}
.hstc--inline{--hstc-pad:12px 14px;max-width:none;border-width:1.5px}
.hstc--inline .hstc-hd,.hstc--inline .hstc-src{display:none}
.hstc--inline .hstc-seg{margin-top:0}
.hstc--inline .hstc-fields{margin-top:10px}
.hstc--inline .hstc-result{margin-top:10px}
.hstc--inline .hstc-total{font-size:20px;line-height:26px;padding-left:0}
.hstc--inline .hstc-next{margin-top:12px}

/* narrow (phones, sidebars): keep the first CTA close to the top; desktop layout is untouched */
@container (max-width:520px){
  .hstc-fields{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
  .hstc--add-remove .hstc-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .hstc--add-remove .hstc-lbl{font-size:11px;letter-spacing:0}
  .hstc--add-remove select,.hstc--add-remove .hstc-money input{font-size:16px}
  .hstc-lbl{letter-spacing:.02em}
  .hstc-qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hstc-seg{margin-top:12px}
  .hstc-result{margin-top:14px}
  .hstc-result-hd{display:none}
  .hstc-total{font-size:22px;line-height:28px}
  .hstc-verdict{margin-top:10px;padding:8px 12px}
  .hstc-next{margin-top:14px}
}
@container (max-width:279px){
  .hstc--add-remove .hstc-fields{grid-template-columns:minmax(0,1fr)}
  .hstc-verdict{grid-template-columns:1fr}
  .hstc-verdict::before{grid-row:auto;margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){.hstc *{transition:none!important}}