/* ============================================================
   WHAT IT'S WORTH — the hard-cost calculator, as a Bone band
   between #fx and #cta. Section-scoped; every selector prefixed .wv-.

   Ported from the section handoff. The mechanic and every formula are
   kept exactly as delivered; four things changed on the way in:

     - the green on Bone routes through --signal-ink-bone (Signal Moss on
       this build) instead of naming --nv-signal-deep directly, so it moves
       with the colour trial like every other Bone ground on the site.
     - the h2 sits on the raised header step (2.75rem) with #dispatch-board
       and #fx rather than the clamp() the handoff shipped, so the three
       long-headline sections read as one scale.
     - the "9.6% Ohio / 10.5% Oklahoma" field-observation note is gone. The
       handoff flagged it as the section's only unsubstantiated claim and
       asked for a source or a cut; there is no source in hand, so it is cut.
     - Signal stays on the Carbon result panel only. Signal on Bone is
       1.19:1 and is never text here.
   ============================================================ */

.wv{padding:96px 0;background:var(--nv-bone,#F2F0E9);color:var(--nv-carbon,#171918);
  border-top:1px solid var(--nv-border-alt,#C8C6BE)}
.wv *,.wv *::before,.wv *::after{box-sizing:border-box}

/* ---- head ---- */
/* The head runs eyebrow, headline, then three paragraph beats. gap:18px sets
   the rhythm between the blocks; the paragraphs get more room again between
   themselves so the argument reads as three steps rather than one wall. */
.wv-head{max-width:1060px;display:flex;flex-direction:column;gap:20px}
.wv-k{font-family:var(--nv-font-mono,"Geist Mono",ui-monospace,monospace);
  font-weight:500;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nv-slate,#3A3D3B)}
.wv-head h2{margin:0;font-weight:600;font-size:2.375rem;
  line-height:1.15;letter-spacing:-.02em;color:var(--nv-carbon,#171918)}
@media(min-width:769px){ .wv-head h2{font-size:2.75rem} }
.wv-head h2 .sig{color:var(--signal-ink-bone,#41630F)}
.wv-head p{margin:0;font-size:1.0625rem;line-height:1.65;
  color:var(--nv-ash,#5F6461);max-width:62ch;text-wrap:pretty}
.wv-head p + p{margin-top:-4px}
/* the closing beat is the one a reader should leave with, so it gets its own
   air and a hairline above it rather than running on from the paragraph */
.wv-head .wv-close{margin-top:6px;padding-top:18px;border-top:1px solid var(--nv-border-alt,#C8C6BE);
  max-width:66ch}
.wv-head b{color:var(--nv-carbon,#171918);font-weight:600}

/* ---- layout ---- */
.wv-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:32px;margin-top:44px;align-items:start}

/* ---- controls: neutral on purpose. The answer is the accent. ---- */
.wv-panel{border:1px solid var(--nv-fog,#C8C6BE);border-radius:var(--nv-radius,4px);
  padding:22px}
.wv-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.wv-preset{font-family:inherit;cursor:pointer;padding:11px 6px;text-align:center;
  border:1px solid var(--nv-fog,#C8C6BE);border-radius:var(--nv-radius-sm,3px);
  background:transparent;color:var(--nv-carbon,#171918);min-height:0;
  transition:border-color 120ms cubic-bezier(.2,0,0,1),background 120ms cubic-bezier(.2,0,0,1)}
.wv-preset .t{display:block;font-family:var(--nv-font-mono,"Geist Mono",monospace);
  font-weight:500;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}
.wv-preset .s{display:block;font-family:var(--nv-font-mono,"Geist Mono",monospace);
  font-size:.6875rem;letter-spacing:.06em;color:var(--nv-slate,#3A3D3B);margin-top:5px}
.wv-preset:hover{border-color:var(--nv-carbon,#171918)}
.wv-preset[aria-pressed="true"]{background:var(--nv-carbon,#171918);
  border-color:var(--nv-carbon,#171918);color:var(--nv-bone,#F2F0E9)}
.wv-preset[aria-pressed="true"] .s{color:var(--nv-fog,#C8C6BE)}
.wv-preset:focus-visible{outline:2px solid var(--nv-carbon,#171918);outline-offset:2px}

.wv-field{margin-bottom:20px}
.wv-field:last-child{margin-bottom:0}
.wv-flabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:9px}
.wv-flabel .n{font-size:.875rem;color:var(--nv-carbon,#171918)}
.wv-flabel .v{font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:.875rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--nv-carbon,#171918)}

.wv-range{-webkit-appearance:none;appearance:none;width:100%;height:18px;
  background:transparent;cursor:pointer;display:block;margin:0;min-height:0}
.wv-range:focus-visible{outline:2px solid var(--nv-carbon,#171918);outline-offset:3px}
.wv-range::-webkit-slider-runnable-track{height:2px;background:var(--nv-fog,#C8C6BE)}
.wv-range::-moz-range-track{height:2px;background:var(--nv-fog,#C8C6BE)}
.wv-range::-moz-range-progress{height:2px;background:var(--nv-carbon,#171918)}
.wv-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6px;border-radius:999px;
  background:var(--nv-carbon,#171918);border:0}
.wv-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:999px;
  background:var(--nv-carbon,#171918)}

.wv-fnote{font-size:.8125rem;line-height:1.55;color:var(--nv-ash,#5F6461);margin-top:9px}
.wv-fnote b{color:var(--signal-ink-bone,#41630F);font-weight:600}

/* ---- results ---- */
.wv-out{display:flex;flex-direction:column;gap:16px;min-width:0}
.wv-headline{background:var(--nv-carbon,#171918);color:var(--nv-bone,#F2F0E9);
  border-radius:var(--nv-radius,4px);padding:26px 28px}
.wv-headline .l{font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-fog,#C8C6BE)}
.wv-headline .v{font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:clamp(2rem,5vw,3.25rem);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--nv-signal,#D7E84A);margin-top:14px}
.wv-headline .f{font-size:.875rem;line-height:1.6;color:var(--nv-fog,#C8C6BE);margin-top:14px}

.wv-cells{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wv-cell{border:1px solid var(--nv-fog,#C8C6BE);border-radius:var(--nv-radius,4px);padding:20px}
.wv-cell .l{font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-slate,#3A3D3B)}
.wv-cell .v{font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--nv-carbon,#171918);margin-top:11px}
.wv-cell .f{font-size:.8125rem;color:var(--nv-ash,#5F6461);margin-top:8px}

/* the exclusion note. The handoff asked that this not be trimmed in review,
   and it is right: it is the most persuasive thing on the band. */
.wv-excl{border-left:2px solid var(--signal-ink-bone,#41630F);padding:2px 0 2px 18px;
  font-size:.9375rem;line-height:1.65;color:var(--nv-ash,#5F6461)}
.wv-excl b{color:var(--nv-carbon,#171918);font-weight:600}

.wv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

@media(max-width:900px){
  .wv{padding:64px 0}
  .wv-grid{grid-template-columns:1fr;gap:24px}
  .wv-cells{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){ .wv-preset{transition:none} }

/* ============================================================
   CARBON — the same band, inverted.

   #software landed above this section, which moved every ground below it
   one step along: this calculator is now the dark band and #api is the
   light one. Nothing structural changes; only the ground and the values
   that hang off it.

   The one thing that does NOT simply invert is the result headline. On
   Bone it was a Carbon card — depth by dropping value. On Carbon that
   trick is unavailable, so it rises to Graphite instead, which is the
   v3 answer to the same problem in the other direction. Signal stays the
   headline figure: 13.07:1 on Graphite, and the only place on the band
   where it appears.
   ============================================================ */
.wv-carbon{background:var(--nv-carbon,#171918);color:var(--nv-bone,#F2F0E9);
  border-top:1px solid rgba(242,240,233,.10)}
.wv-carbon .wv-k{color:var(--nv-steel,#9EA29F)}
.wv-carbon .wv-head h2{color:var(--nv-bone,#F2F0E9)}
.wv-carbon .wv-head h2 .sig{color:var(--nv-signal,#D7E84A)}
.wv-carbon .wv-head p{color:var(--nv-fog,#C8C6BE)}
.wv-carbon .wv-head .wv-close{border-top-color:rgba(242,240,233,.14)}
.wv-carbon .wv-head b{color:var(--nv-bone,#F2F0E9)}

/* inputs */
.wv-carbon .wv-panel{border-color:rgba(242,240,233,.14)}
.wv-carbon .wv-preset{border-color:rgba(242,240,233,.18);color:var(--nv-fog,#C8C6BE)}
.wv-carbon .wv-preset .s{color:var(--nv-steel,#9EA29F)}
.wv-carbon .wv-preset:hover{border-color:var(--nv-bone,#F2F0E9)}
.wv-carbon .wv-preset[aria-pressed="true"]{background:var(--nv-bone,#F2F0E9);
  border-color:var(--nv-bone,#F2F0E9);color:var(--nv-carbon,#171918)}
.wv-carbon .wv-preset[aria-pressed="true"] .s{color:var(--nv-slate,#3A3D3B)}
.wv-carbon .wv-flabel .n{color:var(--nv-bone,#F2F0E9)}
.wv-carbon .wv-flabel .v{color:var(--nv-bone,#F2F0E9)}
.wv-carbon .wv-range::-webkit-slider-runnable-track{background:rgba(242,240,233,.20)}
.wv-carbon .wv-range::-moz-range-track{background:rgba(242,240,233,.20)}
.wv-carbon .wv-range::-moz-range-progress{background:var(--nv-signal,#D7E84A)}
.wv-carbon .wv-range::-webkit-slider-thumb{background:var(--nv-signal,#D7E84A)}
.wv-carbon .wv-range::-moz-range-thumb{background:var(--nv-signal,#D7E84A)}
.wv-carbon .wv-fnote{color:var(--nv-steel,#9EA29F)}
.wv-carbon .wv-fnote b{color:var(--nv-signal,#D7E84A)}

/* results */
.wv-carbon .wv-headline{background:var(--nv-graphite,#222523);
  border:1px solid rgba(242,240,233,.12)}
.wv-carbon .wv-cell{border-color:rgba(242,240,233,.14)}
.wv-carbon .wv-cell .l{color:var(--nv-steel,#9EA29F)}
.wv-carbon .wv-cell .v{color:var(--nv-bone,#F2F0E9)}
.wv-carbon .wv-cell .f{color:var(--nv-steel,#9EA29F)}

.wv-carbon .wv-excl{border-left-color:var(--nv-signal,#D7E84A);
  color:var(--nv-fog,#C8C6BE)}
.wv-carbon .wv-excl b{color:var(--nv-bone,#F2F0E9)}