/* SloshGauge adapted to a read-only questionnaire completion indicator. */
.checkup-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0;
}
.checkup-progress-copy { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.checkup-progress-question { color: #e0f3ff; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.checkup-progress-count { color: var(--fg-muted); font-size: .875rem; }
.checkup-progress-count strong { color: #8bdfff; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.checkup-progress .slosh-gauge {
  position: relative;
  flex: none;
  width: 76px;
  height: 116px;
  border: 1px solid rgb(139 223 255 / .42);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: #10212f;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 0 20px rgb(73 192 255 / .09);
  font-size: 1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.slosh-gauge__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e5f6ff;
  pointer-events: none;
}
.slosh-gauge__liquid {
  position: absolute;
  inset: 0;
  background: #8bdfff;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  pointer-events: none;
}
.slosh-gauge__liquid .slosh-gauge__value { color: #071c2b; }
.slosh-gauge__ticks {
  position: absolute;
  inset: 0 0 0 auto;
  width: 18%;
  background: repeating-linear-gradient(to top, rgb(130 160 178 / .6) 0 1px, transparent 1px 25%);
  pointer-events: none;
}
@media (max-width: 520px) {
  .checkup-progress { gap: 14px; }
  .checkup-progress .slosh-gauge { width: 68px; height: 104px; }
  .checkup-progress-question { font-size: .875rem; }
}