/* 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; }

/* ── Chart primitives (bar/line/pie/radar/heatmap/radial_bar) ── */
.ds-chart {
  width: 100%;
  max-width: 680px;            /* desktop cap (~1.07x viewBox); mobile is container-driven below this. Bounds the upscale factor — kills the 7x balloon */
  background: var(--surface-base);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5);
}
.ds-chart--full { max-width: none; }   /* opt-out for wide dashboard tiles */
/* Center the chart in the Web Participation context only (Producer A wrapper). */
.participation-chart .ds-chart { margin-inline: auto; }

.ds-chart__period { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.ds-chart__title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }

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

/* ── Web label overlay (hybrid responsive) ───────────────────────────────
 * On WEB the SVG draws only graphics; every text label is an absolutely
 * positioned, rem-sized HTML span over the plot box, so labels never clip and
 * stay legible from mobile to desktop. In PDF the SVG keeps its own <text>. */
.ds-chart__plot { position: relative; width: 100%; }
.ds-chart__labels { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.ds-chart__label {
  position: absolute; white-space: nowrap; line-height: 1;
  font-family: var(--font-display); font-size: var(--text-xs); color: var(--text-secondary);
}
.ds-chart__label--scale { font-family: var(--font-mono); color: var(--text-tertiary); }
.ds-chart__label--value { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.ds-chart__label--axis  { color: var(--text-secondary); }
.ds-chart__label--center-value { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--text-primary); }
.ds-chart__label--center-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

/* Strokes are authored in viewBox units but must NOT scale with the box. */
.ds-chart__svg .ds-chart__axis,
.ds-chart__svg .ds-chart__grid,
.ds-chart__svg .ds-chart__line,
.ds-chart__svg .ds-chart__hairline { vector-effect: non-scaling-stroke; }

.ds-chart__axis { stroke: var(--border-default); stroke-width: 1; fill: none; }
.ds-chart__grid { stroke: var(--chart-grid); stroke-width: 1; fill: none; }
.ds-chart__tick { fill: var(--text-tertiary); font-family: var(--font-display); font-size: 12px; }
.ds-chart__scale { fill: var(--text-tertiary); font-family: var(--font-mono); font-size: 11px; }
.ds-chart__vlabel { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); }
/* Heat-cell value text: NO fill here — the per-cell contrast color is set inline. */
.ds-chart__cell-value { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); }
/* NOTE: no `fill` here — per-element fill is authored inline so markers keep their series color. */
.ds-chart__series {}
.ds-chart__marker { stroke: #fff; stroke-width: 1.5; }   /* fill = series color, inline */
.ds-chart__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.ds-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-secondary); }
.ds-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.ds-chart__legend-swatch { width: 10px; height: 10px; border-radius: var(--radius-sm); flex-shrink: 0; }
.ds-chart__legend-value { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 11px; }

.ds-chart__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--space-10) var(--space-4); text-align: center; }
.ds-chart__empty-icon { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--accent-muted); color: var(--accent-hover); display: flex; align-items: center; justify-content: center; }
.ds-chart__empty-icon .material-symbols-rounded { font-size: 28px; }
.ds-chart__empty-title { font-weight: var(--weight-semibold); color: var(--text-secondary); font-size: var(--text-sm); }
.ds-chart__empty-text { font-size: var(--text-xs); color: var(--text-tertiary); max-width: 44ch; line-height: var(--leading-normal); }

/* Chart chrome soul routing (engine + --chart-theme-* untouched). */
.ds-chart__title { font-family: var(--soul-font-display); }
.ds-chart__period .hps-picker,
.ds-chart__period [class*="hps"] { border-radius: var(--soul-radius-control, 10px); }