/* ============================================================================
   Calculators ([dg_tool]). One card: inputs on the left, the answer on an ink
   panel on the right; stacked when the card is narrow. Laid out by the card's
   own width (a container query), so the same markup works in a 740px article
   column and across a full calculator page.

   The card sits inside .dg-prose, whose list, heading and spacing rules reach
   in by descent; the resets below are what keep them out.
   ========================================================================= */
.dg-tool{container-type:inline-size;margin:40px 0 0;border:1px solid var(--grey-200);border-radius:20px;
  background:var(--white);box-shadow:var(--shadow-2);overflow:clip;
  font-size:15px;line-height:22px;color:var(--text)}
.dg-tool *{box-sizing:border-box}
.dg-tool :is(p,ul,ol,dl,dd,fieldset){margin:0}
.dg-tool :is(ul,ol){padding:0;list-style:none}
.dg-tool li+li{margin-top:0}
.dg-tool li::before{content:none}

.dg-tool__head{display:flex;gap:var(--sp-4);align-items:flex-start;padding:24px 24px 0}
.dg-tool__icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;
  background:var(--accent);color:var(--ink)}
.dg-tool__kicker{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.04em;color:var(--accent-text)}
.dg-tool .dg-tool__title{margin:2px 0 0;font-family:var(--font-ka);font-size:22px;line-height:30px;
  font-weight:700;letter-spacing:-.005em;color:var(--text);text-wrap:balance}
.dg-tool__sub{margin-top:6px;font-size:15px;line-height:23px;color:var(--text-2)}

.dg-tool__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:24px}
/* Side by side only where the inputs still get two comfortable columns: a
   calculator page, not the 740px article column, where the answer goes under. */
@container (min-width:900px){
  .dg-tool__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
  .dg-tool__out{position:sticky;top:calc(var(--header-h) + var(--wpadmin,0px) + 16px)}
}

/* --- fields ---------------------------------------------------------------- */
.dg-tool__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;align-content:start}
@container (max-width:440px){ .dg-tool__form{grid-template-columns:minmax(0,1fr)} }
.dg-f{min-width:0;padding:0;border:0}
.dg-f--wide{grid-column:1/-1}
.dg-f__l{display:block;margin:0 0 6px;padding:0;font-size:13px;line-height:18px;font-weight:600;color:var(--text)}
.dg-f__in{position:relative}
.dg-f__in :is(input,select){display:block;width:100%;height:48px;margin:0;padding:0 44px 0 14px;
  border:1px solid var(--rule-fn);border-radius:10px;background:var(--white);
  font:inherit;font-size:16px;line-height:20px;color:var(--text);font-variant-numeric:tabular-nums;
  -webkit-appearance:none;appearance:none;-moz-appearance:textfield;
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.dg-f__in select{cursor:pointer;text-overflow:ellipsis}
.dg-f__in input::-webkit-outer-spin-button,.dg-f__in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dg-f__in :is(input,select):hover{border-color:var(--grey-500)}
.dg-f__in :is(input,select):focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(251,202,40,.45)}
.dg-f__in input:disabled{background:var(--grey-100);color:var(--text-3)}
.dg-f__u{position:absolute;right:14px;top:50%;transform:translateY(-50%);max-width:40%;
  font-size:14px;color:var(--text-3);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-f__in:has(.dg-f__u) input{padding-right:calc(14px + var(--u-w,48px))}
.dg-f__in--sel .dg-i{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-3)}
.dg-f__h{margin:6px 0 0;font-size:12px;line-height:17px;color:var(--text-3)}

/* Pills over radio buttons. */
.dg-seg{display:flex;flex-wrap:wrap;gap:6px}
.dg-seg label{position:relative;display:block}
.dg-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dg-seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border:1px solid var(--grey-300);border-radius:999px;background:var(--white);
  font-size:14px;line-height:18px;font-weight:600;color:var(--text-2);white-space:nowrap;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.dg-seg label:hover span{border-color:var(--ink);color:var(--text)}
.dg-seg input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.dg-seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}

/* Switch over a checkbox. */
.dg-sw{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;cursor:pointer}
.dg-sw input{position:absolute;width:1px;height:1px;opacity:0}
.dg-sw__t{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--grey-300);
  transition:background var(--dur-base) var(--ease-standard)}
.dg-sw__t::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(20,20,22,.25);transition:transform var(--dur-base) var(--ease-standard)}
.dg-sw input:checked+.dg-sw__t{background:var(--ink)}
.dg-sw input:checked+.dg-sw__t::after{transform:translateX(18px);background:var(--accent)}
.dg-sw input:focus-visible+.dg-sw__t{outline:2px solid var(--focus);outline-offset:2px}
.dg-sw__l{font-size:14px;line-height:20px;font-weight:600;color:var(--text)}
.dg-sw+.dg-f__h{padding-left:58px;margin-top:0}

/* The power calculator's machine list. */
.dg-rows__hd,.dg-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 66px 36px;gap:8px;align-items:center}
.dg-rows__hd{margin-bottom:6px;font-size:12px;line-height:16px;color:var(--text-3)}
.dg-rows{display:grid;gap:8px}
.dg-row .dg-f__in :is(input,select){height:44px}
.dg-row .dg-f__in input{padding:0 10px}
.dg-row .dg-f__in select{padding-right:34px;font-size:14px}
.dg-row__x{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;
  background:transparent;color:var(--text-3);cursor:pointer}
.dg-row__x:hover{background:var(--grey-100);color:var(--text)}
.dg-row__x:focus-visible{outline:2px solid var(--focus)}
.dg-row__x:disabled{visibility:hidden}
.dg-rows__add{display:inline-flex;align-items:center;gap:6px;min-height:42px;margin-top:10px;padding:0 14px;
  border:1px dashed var(--grey-400);border-radius:10px;background:transparent;
  font:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.dg-rows__add:hover{border-style:solid;border-color:var(--ink);background:var(--grey-100)}
.dg-rows__add:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dg-row__u{display:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--text-3);pointer-events:none}
/* On a phone the machine's name gets its own line, and power and count sit
   under it with their units inside the fields. */
@container (max-width:560px){
  .dg-rows__hd{display:none}
  .dg-rows{gap:12px}
  .dg-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:8px;padding-bottom:12px;
    border-bottom:1px solid var(--grey-200)}
  .dg-row>:first-child{grid-column:1/-1}
  .dg-row .dg-f__in input{padding-right:44px}
  .dg-row__u{display:block}
}

/* --- the answer -------------------------------------------------------------- */
.dg-tool__out{padding:22px 22px 18px;border-radius:16px;background:var(--ink);color:var(--white)}
.dg-out__k{font-size:13px;line-height:18px;color:var(--grey-300)}
.dg-out__big{margin-top:4px;font-family:var(--font-price);font-size:40px;line-height:46px;
  letter-spacing:.01em;color:var(--accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dg-out__sub{min-height:20px;margin-top:4px;font-size:14px;line-height:20px;color:var(--grey-300)}

.dg-out__bar{display:flex;gap:2px;height:10px;margin:18px 0 2px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.dg-out__bar i{display:block;height:100%;min-width:3px;background:var(--c);transition:flex-grow 300ms var(--ease-standard)}

.dg-out__rows{margin-top:14px}
.dg-out__r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.1);font-size:14px;line-height:20px}
.dg-out__r[hidden]{display:none}
.dg-out__r dt{display:flex;align-items:center;gap:8px;color:var(--grey-300)}
.dg-out__r[style*="--c"] dt::before{content:"";flex:none;width:9px;height:9px;border-radius:3px;background:var(--c)}
.dg-out__r dd{margin:0;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dg-out__r.is-key dt{color:var(--white);font-weight:600}
.dg-out__r.is-key dd{color:var(--accent);font-size:15px}

/* Power: the connection to ask for. */
.dg-out__pkg{display:grid;gap:2px;margin-top:16px;padding:12px 14px;border-radius:12px;
  background:rgba(251,202,40,.12);border:1px solid rgba(251,202,40,.35)}
.dg-out__pkg:empty{display:none}
.dg-out__pkg b{font-size:15px;line-height:21px;color:var(--white)}
.dg-out__pkg span{font-size:13px;line-height:19px;color:var(--grey-300)}

/* Lease: the interest, with and without. */
.dg-out__cmp{display:grid;gap:10px;margin-top:18px}
.dg-out__cmp:empty{display:none}
.dg-cmp__r{display:grid;gap:5px}
.dg-cmp__l{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:16px;color:var(--grey-300)}
.dg-cmp__l b{font-weight:600;color:var(--white);font-variant-numeric:tabular-nums}
.dg-cmp__b{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.dg-cmp__b i{display:block;height:100%;border-radius:inherit;background:var(--c,var(--grey-400));transition:width 300ms var(--ease-standard)}

.dg-out__notes{margin-top:14px}
.dg-out__notes:empty{display:none}
.dg-out__notes li{position:relative;padding:8px 0 0 18px;font-size:13px;line-height:19px;color:var(--grey-300)}
.dg-out__notes li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dg-out__notes li.is-warn::before{background:var(--orange-500)}

/* --- footer ------------------------------------------------------------------- */
.dg-tool__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  padding:14px 24px;border-top:1px solid var(--grey-200);background:var(--grey-100)}
.dg-tool__fine{flex:1 1 300px;font-size:12px;line-height:17px;color:var(--text-3)}
.dg-tool__acts{display:flex;flex-wrap:wrap;gap:8px}
.dg-tool .dg-tool__btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;
  border:1px solid var(--grey-300);border-radius:999px;background:var(--white);
  font:inherit;font-size:13px;line-height:16px;font-weight:600;color:var(--text);text-decoration:none;cursor:pointer}
.dg-tool .dg-tool__btn:hover{border-color:var(--ink)}
.dg-tool .dg-tool__btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dg-tool__btn.is-done{background:var(--success-050);border-color:var(--success-600);color:var(--success-600)}
.dg-tool__nojs{padding:0 24px 20px;color:var(--text-2)}

@media (max-width:767px){
  .dg-tool{border-radius:16px}
  .dg-tool__head{padding:20px 18px 0}
  .dg-tool__grid{padding:18px}
  .dg-tool__foot{padding:14px 18px}
  .dg-out__big{font-size:34px;line-height:40px}
}
@media (prefers-reduced-motion:reduce){
  .dg-out__bar i,.dg-cmp__b i{transition:none}
}