/* app/assets/stylesheets/components/charts.css
 * --------------------------------------------------------------------------
 * Charts — canonical visualization primitives.
 *
 * First entry: .ds-chart-dial (semi-circle tri-segment tier dial).
 *
 * Tier thresholds (Red <=75 / Yellow 75-90 / Green >=90) are encoded as
 * custom properties so future tuning is a token edit rather than a setting
 * or markup change.
 *
 * Arc segments are EQUAL THIRDS (60deg each). The thresholds determine
 * which tier a value falls in for the needle position and color logic,
 * but the three colored zones always occupy a third of the arc each.
 *
 * The needle points to the TIER MIDPOINT (16.5% / 50% / 83%), not the
 * actual value. The actual value is rendered as the centered text label.
 * This matches the legacy React TierGauge behavior the customer expects.
 *
 * The four hardcoded hex colors (navy + red/yellow/green tier palette)
 * are preserved verbatim from the React SPA so the visual matches the
 * still-shipping React app pixel-for-pixel. Wrapped as custom properties
 * for future migration to DS status tokens.
 * -------------------------------------------------------------------------- */

.ds-chart-dial {
  --dial-navy:   #2F3B48;
  --tier-red:    #EA4228;
  --tier-yellow: #F5CD19;
  --tier-green:  #5BE12C;

  /* Tier classification thresholds — informational; logic lives on the model. */
  --tier-red-max:    75;
  --tier-yellow-max: 90;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 384px;
  margin: 0 auto;
}

.ds-chart-dial__svg {
  width: 100%;
  height: auto;
  display: block;
}

.ds-chart-dial__seg {
  fill: none;
}
.ds-chart-dial__seg--red    { stroke: var(--tier-red);    }
.ds-chart-dial__seg--yellow { stroke: var(--tier-yellow); }
.ds-chart-dial__seg--green  { stroke: var(--tier-green);  }

.ds-chart-dial__arrow {
  fill: var(--dial-navy);
}

.ds-chart-dial__value {
  fill: var(--dial-navy);
  text-anchor: middle;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.ds-chart-dial__label {
  background: var(--dial-navy);
  color: #ffffff;
  margin: -36px auto 0;     /* bleeds up under the bottom of the arc */
  height: 32px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  position: relative;
  max-width: 384px;
  width: 100%;
}

.ds-chart-dial__label-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.ds-chart-dial__label-points {
  font-weight: var(--weight-regular);
  opacity: 0.88;
  font-size: 11px;
}

/* ── Size modifiers ───────────────────────────────────────────────────── */
.ds-chart-dial--lg {
  max-width: 384px;
}
.ds-chart-dial--lg .ds-chart-dial__value { font-size: 40px; }

.ds-chart-dial--md {
  max-width: 220px;
}
.ds-chart-dial--md .ds-chart-dial__value { font-size: 24px; }
.ds-chart-dial--md .ds-chart-dial__label { max-width: none; height: 32px; }

.ds-chart-dial--sm {
  max-width: 180px;
}
.ds-chart-dial--sm .ds-chart-dial__value { font-size: 18px; }
.ds-chart-dial--sm .ds-chart-dial__label { max-width: none; height: 26px; font-size: 11px; }