/* Gauge root — size is set by JS */
.vocab-gauge {
  position: relative;
  display: inline-block;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* Do NOT make SVG responsive; JS sets fixed px width/height */
.vocab-gauge svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* Threshold labels (absolutely positioned by JS) */
.vocab-gauge .threshold-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-block;
  white-space: pre-line; /* respect \n */
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
  color: #111827;
}
.vocab-gauge .threshold-label.align-left {
  text-align: left;
}
.vocab-gauge .threshold-label.align-right {
  text-align: right;
}

/* Three independent blocks, each positioned by JS at (cx, cy + offset) */
.vocab-gauge .block-cefr,
.vocab-gauge .block-value,
.vocab-gauge .block-pill {
  position: absolute;
  left: 0;
  top: 0; /* JS sets actual left/top */
  transform: translate(-50%, -50%);
  pointer-events: none; /* UI is display-only here */
  text-align: center;
  line-height: 1.1;
}

/* CEFR block visuals (spacing/padding set by JS) */
.vocab-gauge .block-cefr .caption {
  color: #6b7280;
  line-height: 1.1;
}
.vocab-gauge .block-cefr .chip {
  display: inline-block;
  background: #e9edf1;
  color: #111827;
  line-height: 1.1;
  font-weight: 800;
}
.vocab-gauge .block-cefr.is-ghost {
  visibility: hidden;
}

/* Value block */
.vocab-gauge .block-value .value {
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
}
.vocab-gauge .block-value .desc {
  color: #6b7280;
}

/* Reliability pill (padding set by JS) */
.vocab-gauge .block-pill .pill {
  display: inline-block;
  border-radius: 9999px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  background: #eee;
}
.vocab-gauge .block-pill .pill.high {
  background: hsl(152, 76%, 90%);
  color: #065f46;
}
.vocab-gauge .block-pill .pill.low {
  background: hsl(0, 85%, 92%);
  color: #7f1d1d;
}