/* A5 — configure */
.cfg-form{display:flex;flex-direction:column;flex:1}
.cfg{padding:1.1rem 1rem;display:flex;flex-direction:column;gap:1rem}
.cfg .row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cfg .row label,.cfg .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.cfg .hint{font-size:.72rem;color:var(--ink-60)}
.cfg-range{width:9em;text-align:right}
.stepper .val{border-top:none;border-bottom:none;width:3.2em;min-height:0;padding:.2em 0;text-align:center;
  font-family:var(--mono);font-weight:700;font-size:1rem;-moz-appearance:textfield;appearance:textfield;background:var(--white);border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.stepper .val::-webkit-outer-spin-button,.stepper .val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cfg-fin{border:none;padding:0;margin:0}
.cfg-fin legend{padding:0;margin-bottom:.55rem}
.pkgs{display:flex;flex-direction:column;gap:.55rem}
.pkg{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;cursor:pointer}
.pkg .p-head{flex:1}
.pkg .p-price{border-top:none;padding:.5rem .9rem;white-space:nowrap}
.pkg:has(input:checked){background:var(--lime)}
.pkg:has(input:checked) .p-desc{color:var(--ink)}
.pkg:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* quote total settling — opacity/transform only, one curve */
[data-total]{display:inline-block}
[data-total].settle{animation:settle var(--t3) var(--ease)}
@keyframes settle{from{opacity:.35;transform:translateY(.18em)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-total].settle{animation:none}}

/* Desktop: controls on the left as a job card, the running price on the right. */
@media(min-width:900px){
  .cfg-split{
    display:grid;grid-template-columns:minmax(0,1fr) 380px;
    column-gap:clamp(2rem,4vw,3.5rem);align-items:start;
    padding:0 0 2.5rem;
  }
  .cfg-split > .col-main,.cfg-split > .col-side{display:block;min-width:0}
  .cfg-split > .col-side{position:sticky;top:1.5rem}
  /* the controls read as one job card — a docket being filled in */
  .cfg-split .cfg{max-width:640px;margin-top:1.8rem;padding:1.8rem 1.8rem 2rem;gap:1.15rem;
    background:var(--white);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
  .cfg-split .cfg > .row{padding-bottom:1.15rem;border-bottom:1.5px solid var(--ink-12)}
  .cfg-split .cfg > .hint{padding-bottom:1.15rem;border-bottom:1.5px solid var(--ink-12)}
  .cfg-split .cfg > .row:has(+ .hint){border-bottom:none;padding-bottom:.35rem}
  .cfg-split .cta-dock{position:static;margin-top:1.8rem;border:2px solid var(--ink);
    padding:1.1rem;box-shadow:6px 6px 0 var(--ink)}
  .cfg-split .pkg{background:var(--chalk)}
  .cfg-split .pkg:has(input:checked){background:var(--lime)}
}