@import url("/sites/biz/styles.css");

/* =========================================
   3호 (/dev) BESPOKE DEVELOPER HARNESS UI
   ========================================= */
.ctx-meter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #f6f7fa;
  border: 1px solid rgba(18, 22, 32, 0.065);
}

.ctx-meter-label {
  font-size: 11px;
  font-weight: 650;
  color: var(--ink-2);
  flex-shrink: 0;
}

.ctx-meter-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(18, 22, 32, 0.08);
  overflow: hidden;
}

.ctx-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.7s var(--ease-out), background 0.5s ease;
}

.ws-scene.pain-state .ctx-meter-fill {
  width: 99%;
  background: var(--warn-ink);
}

.ws-scene.fixed-state .ctx-meter-fill {
  width: 31%;
  background: var(--ink);
}

.ctx-meter-val {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 660;
  flex-shrink: 0;
}

.ws-scene.pain-state .ctx-meter-val {
  color: var(--warn-ink);
}

.ws-scene.pain-state .ctx-meter-val::after {
  content: attr(data-before);
}

.ws-scene.fixed-state .ctx-meter-val {
  color: var(--ink);
}

.ws-scene.fixed-state .ctx-meter-val::after {
  content: attr(data-after);
}

.mono-rows .s-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
}