/* Dryways Code Block 2 of 5 — cost
   Every selector is rooted at .dw-cb-cost. Nothing here reaches outside that
   element. Extracted from DA-03 prototype v1.3.0; the only change from source
   is the root prefix. Colour, type, rail and breakpoints come from the global
   token layer, never from this file. */

/* ---------- instrument ---------- */
.dw-cb-cost .instrument {
  border:1px solid var(--ctl); border-radius:var(--r);
  background:var(--ground); overflow:hidden;
  display:grid;
  box-shadow:0 1px 2px var(--shadow-1);
}
/* left is the working surface you set; right is the face you read */
.dw-cb-cost .controls { background:var(--panel); }
@media (min-width:1024px) {
  .dw-cb-cost .instrument { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
.dw-cb-cost .controls { padding:clamp(22px,3vw,34px); display:grid; gap:16px; align-content:start; }
@media (min-width:1024px) {
  .dw-cb-cost .controls { border-right:1px solid var(--hair); }
}
.dw-cb-cost .field { display:grid; gap:6px; }
.dw-cb-cost .field label,
.dw-cb-cost .field .lbl { font-size:.84rem; font-weight:600; color:var(--txt); }
.dw-cb-cost .field .help { font-size:.78rem; color:var(--txt-2); }
.dw-cb-cost .ctrl {
  font-family:var(--body); font-size:.95rem; color:var(--txt);
  background:var(--ground); border:1px solid var(--ctl); border-radius:var(--r);
  padding:12px 13px; width:100%;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.dw-cb-cost .ctrl.num { font-family:var(--mono); }
.dw-cb-cost .ctrl:hover { border-color:var(--txt-3); }
.dw-cb-cost .ctrl:focus { outline:none; border-color:var(--cold); box-shadow:0 0 0 3px var(--cold-ring); }
.dw-cb-cost .ctrl::placeholder { color:var(--txt-3); }
.dw-cb-cost .ctrl[aria-invalid="true"] { border-color:var(--accent); }
.dw-cb-cost .readout {
  padding:clamp(22px,3vw,34px);
  display:flex; flex-direction:column; gap:0;
  background:var(--ground);
}
/* The figure is a reading off an instrument, so it is set in the data face
   rather than borrowed from the display face. A price in the headline voice
   is a marketing number; a price in the measurement voice is a measurement. */
.dw-cb-cost .readout .big {
  font-family:var(--mono); font-weight:600;
  letter-spacing:-.045em; line-height:.92;
  font-size:clamp(2.9rem,6.2vw,4.1rem); font-variant-numeric:tabular-nums;
  color:var(--txt); margin:8px 0 0;
}
.dw-cb-cost .readout .big .cur { color:var(--txt-3); font-size:.56em; vertical-align:.30em; margin-right:.04em; font-weight:500; }
.dw-cb-cost .readout .per { font-size:.82rem; color:var(--txt-2); margin:8px 0 0; }
.dw-cb-cost .readout .cmp {
  font-size:.86rem; color:var(--txt); margin:14px 0 0; max-width:42ch;
  padding-left:13px; border-left:2px solid var(--accent);
}
.dw-cb-cost .readout .cmp b { font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
/* the load scale: where this surface sits between a path and a commercial ramp.
   A number alone is not an answer to "is that a lot"; a position on a scale is. */
.dw-cb-cost .scale { margin:22px 0 0; }
.dw-cb-cost .scale-track {
  position:relative; height:7px; border-radius:var(--r);
  background:linear-gradient(90deg,var(--panel) 0%,var(--accent-wash) 55%,var(--accent) 100%);
  border:1px solid var(--hair);
}
.dw-cb-cost .scale-pin {
  position:absolute; top:50%; width:3px; height:19px; border-radius:1px;
  background:var(--txt); transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px var(--ground);
  transition:left .28s cubic-bezier(.16,1,.3,1);
}
.dw-cb-cost .scale-ends {
  position:relative; display:flex; justify-content:space-between; margin-top:10px;
  font-family:var(--mono); font-size:.75rem; color:var(--txt-3);
}
/* the reading tracks the pin rather than sitting in the middle pretending to */
.dw-cb-cost .scale-now {
  position:absolute; top:0; transform:translateX(-50%);
  white-space:nowrap; color:var(--txt); font-weight:500;
  transition:left .28s cubic-bezier(.16,1,.3,1);
}
.dw-cb-cost .readout dl { margin:22px 0 0; display:grid; padding-top:4px; border-top:1px solid var(--hair); }
/* a three-way choice is a segmented control, not a dropdown */
.dw-cb-cost .seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
  border:1px solid var(--ctl); border-radius:var(--r); overflow:hidden; background:var(--ground); }
.dw-cb-cost .seg button {
  min-height:44px; padding:9px 8px; cursor:pointer;
  font-family:var(--body); font-size:.82rem; font-weight:500; line-height:1.25;
  color:var(--txt-2); background:transparent; border:0;
  border-right:1px solid var(--hair);
  transition:background-color .16s ease, color .16s ease;
}
.dw-cb-cost .seg button:last-child { border-right:0; }
.dw-cb-cost .seg button:hover { background:var(--wash); color:var(--txt); }
.dw-cb-cost .seg button[aria-pressed="true"] { background:var(--txt); color:var(--ground); font-weight:600; }
.dw-cb-cost .seg button .w { display:block; font-family:var(--mono); font-size:.75rem; opacity:.75; margin-top:2px; }
.dw-cb-cost .callbar .lbl { color:var(--txt-3); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:767px) {
  .dw-cb-cost .head .callbar .num,
.dw-cb-cost .head .callbar .lbl { display:none; }
}
.dw-cb-cost .form-foot .help { text-align:center; font-size:.8rem; color:var(--txt-2); }
.dw-cb-cost .scale-row { display:flex; align-items:baseline; gap:22px; padding:15px 0; border-top:1px solid var(--hair); }
.dw-cb-cost .scale-row .t { font-family:var(--mono); font-size:.75rem; color:var(--txt-3); flex:0 0 150px; }
.dw-cb-cost .scale-row .d { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }