/* BUDGET.leo: two stepped sliders, the DAAN-O-METER, the asterisk and the mandatory checkbox.
   The slider component (js/ui/slider.js) only appears here, so its styles live here too. */

.scr-budget .bud-win .win__body > * + * { margin-top: 14px; }

.scr-budget .bud-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scr-budget .bud-q {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(21px * var(--text-scale));
  line-height: 1.2;
}

/* question 2 + its asterisk */
.scr-budget .bud-q2 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.scr-budget .bud-q2 .bud-q { flex: 1 1 auto; min-width: 0; }

.scr-budget .bud-asterisk {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: var(--pink);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.scr-budget .bud-asterisk:active {
  background: var(--pink-d);
  transform: translate(var(--sh), var(--sh));
  box-shadow: none;
}

.scr-budget .bud-basis { width: 100%; }
.scr-budget .bud-basis .seg__opt { min-height: var(--tap); }

/* ---------- slider ---------- */
.scr-budget .sld {
  --half: 24px; /* half the thumb box: the thumb's centre never leaves the track */
  display: flex;
  flex-direction: column;
}

.scr-budget .sld__head {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.scr-budget .sld__btn {
  flex: none;
  width: var(--tap);
  padding: 0;
}

.scr-budget .sld__btn[disabled] svg { opacity: 0.35; }

.scr-budget .sld__value {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: var(--tap);
  padding: 2px 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-l);
  line-height: 1;
  white-space: nowrap;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  box-shadow: inset 3px 3px 0 0 var(--shade);
}

.scr-budget .sld--pink .sld__value { background: var(--pink-l); box-shadow: inset 3px 3px 0 0 var(--paper); }
.scr-budget .sld--lav .sld__value { background: var(--lav-l); box-shadow: inset 3px 3px 0 0 var(--paper); }

.scr-budget .sld__track {
  position: relative;
  height: 60px;
  margin-top: 2px;
  touch-action: none; /* she drags here; nowhere else */
  cursor: pointer;
  outline-offset: 0;
}

.scr-budget .sld__track:focus-visible { outline: 3px dashed var(--ink); }

.scr-budget .sld__bar {
  position: absolute;
  left: calc(var(--half) - 12px);
  right: calc(var(--half) - 12px);
  top: 50%;
  height: 24px;
  margin-top: -12px;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

.scr-budget .sld__seg {
  flex: 1 1 0;
  min-width: 0;
  background: var(--shade);
}

.scr-budget .sld--lav .sld__seg.is-on { background: var(--lav); }
.scr-budget .sld--pink .sld__seg.is-on { background: var(--pink); }

.scr-budget .sld__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--half);
  right: var(--half);
}

.scr-budget .sld__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--r, 0) * 100%);
  display: grid;
  place-items: center;
  width: calc(var(--half) * 2);
  height: calc(var(--half) * 2);
  transform: translate(-50%, -50%);
  filter: drop-shadow(3px 3px 0 var(--ink));
  pointer-events: none;
}

.scr-budget .sld__track.is-dragging .sld__thumb {
  transform: translate(-50%, calc(-50% - 3px));
  filter: drop-shadow(4px 6px 0 var(--ink));
}

.scr-budget .sld__thumb.sld-bump > svg { animation: squash calc(250ms / var(--speed)) steps(3) 1; }

.scr-budget .sld__ends {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 calc(var(--half) - 14px);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the live remark under slider 1: a small bubble pointing up at the slider */
.scr-budget .bud-quip {
  position: relative;
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: var(--fs-s);
  line-height: 1.3;
  background: var(--lav-l);
  border: var(--bw) solid var(--ink);
}

/* pixel tail pointing up at the slider (a 5x4 grid of 3 px cells); its bottom row opens the border:
     . . K . .
     . K L K .
     K L L L K
     . L L L .   <- on the bubble's top border */
.scr-budget .bud-quip::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -12px;
  width: 15px;
  height: 12px;
  background:
    linear-gradient(var(--ink), var(--ink)) 6px 0 / 3px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 3px 3px / 3px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 9px 3px / 3px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 6px / 3px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 12px 6px / 3px 3px no-repeat,
    linear-gradient(var(--lav-l), var(--lav-l)) 6px 3px / 3px 3px no-repeat,
    linear-gradient(var(--lav-l), var(--lav-l)) 3px 6px / 9px 6px no-repeat;
}

/* DAAN-O-METER */
.scr-budget .bud-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

.scr-budget .bud-meter__face {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--shade);
  border: var(--bw) solid var(--ink);
}

.scr-budget .bud-meter__body { min-width: 0; }

.scr-budget .bud-meter__label {
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.scr-budget .bud-meter__text {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.3;
}

.scr-budget .bud-compare {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  font-size: var(--fs-s);
  line-height: 1.3;
  background: var(--pink-l);
  border: var(--bw) dashed var(--ink);
  animation: pop-in var(--t-med) steps(4) both;
}

/* the mandatory checkbox */
.scr-budget .bud-accept-wrap {
  padding-top: 14px;
  border-top: 3px dotted var(--lav-d);
}

.scr-budget .bud-accept {
  display: flex;
  width: 100%;
  align-items: center;
}

.scr-budget .bud-accept .check__text { min-width: 0; }

/* a size up from the shared box, so the 3 px-grid check mark fits inside the border */
.scr-budget .bud-accept .check__box {
  width: 36px;
  height: 36px;
}

.scr-budget .bud-terms-link {
  display: inline;
  min-height: 0;
  padding: 12px 0; /* a bigger tap area without changing the line */
  margin: -12px 0;
  font: inherit;
  text-decoration-color: var(--pink-d);
}

.scr-budget .bud-accept .check__box.fx-wiggle { animation-iteration-count: 3; }

/* scroll room under the window: enough to bring the checkbox to the middle of the screen,
   above the nav bar and Henk's speech bubble */
.scr-budget .bud-tail {
  flex: none;
  width: 1px;
  height: max(0px, calc(50vh - 175px));
  height: max(0px, calc(50dvh - 175px));
  margin-top: -16px;
}

/* the hand gag: the hand and Henk's paw live in a layer over slider 2's track */
.scr-budget .bud-gag {
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  bottom: -48px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.scr-budget .bud-gag__hand,
.scr-budget .bud-gag__paw {
  position: absolute;
  left: 0;
  top: 0;
}

.scr-budget .bud-gag__hand { filter: drop-shadow(2px 2px 0 var(--ink)); }

@media (min-width: 768px) {
  .scr-budget .bud-q { font-size: calc(22px * var(--text-scale)); }
}