/* Studio.Ui.Charts styles — satellite of Studio.Ui (ADR-0052). Semantic tokens only
   (--color-*, --color-chart-*, --font-*, --space-*, --radius-*). Load after the product's
   tokens.css and Studio.Ui core's studio-ui.css. */

/* ChartFrame */
.studio-chart-frame { margin: 0; font-family: var(--font-family-body); }
.studio-chart-frame__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.studio-chart-frame__state { display: flex; align-items: center; justify-content: center; padding: var(--space-8); color: var(--color-text-muted); }
.studio-chart-frame__state--error { color: var(--color-status-danger-text); }
.studio-chart-frame__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* PieChart (dasharray donut) */
.studio-pie { width: 100%; max-width: 12rem; transform: rotate(-90deg); }
.studio-pie__track { stroke: var(--color-surface-sunken); }

/* BarChart — gridlines/axis (STUDIO-252) render from color.chart.grid/color.chart.axisText, the
   required chart-chrome roles (see token-schema.md) -- never chart.categorical.*, which is reserved
   for the data marks themselves. container-type below enables the responsive tick-thinning
   (STUDIO-250) that hides --mid axis labels once the chart's own container narrows. */
.studio-bar-chart-frame { display: flex; gap: var(--space-2); container-type: inline-size; }
.studio-bar-chart__axis-labels { display: flex; flex-direction: column; justify-content: space-between; height: 8rem; padding-bottom: 1.25rem; font-size: var(--font-size-xs); color: var(--color-chart-axisText); font-variant-numeric: tabular-nums; text-align: right; flex-shrink: 0; }
@container (max-width: 320px) {
  .studio-bar-chart__axis-label--mid { display: none; }
}
.studio-bar-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 8rem;
  background-image: repeating-linear-gradient(to top, var(--color-chart-grid) 0, var(--color-chart-grid) 1px, transparent 1px, transparent 33.3333%);
  background-repeat: no-repeat; }
.studio-bar-chart__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: 1; height: 100%; justify-content: flex-end; }
.studio-bar-chart__bar { width: 100%; min-height: 2px; background: var(--color-chart-categorical-1); border-radius: var(--radius-sm, var(--radius-md)); }
.studio-bar-chart__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Discrete 5%-step height buckets -- see ChartFormat.Bucket5's own doc comment for why this replaces
   an inline style="height:N%" (silently dropped under a style-src 'self' CSP with no unsafe-inline). */
.studio-bar-chart__bar--h0 { height: 0%; }
.studio-bar-chart__bar--h5 { height: 5%; }
.studio-bar-chart__bar--h10 { height: 10%; }
.studio-bar-chart__bar--h15 { height: 15%; }
.studio-bar-chart__bar--h20 { height: 20%; }
.studio-bar-chart__bar--h25 { height: 25%; }
.studio-bar-chart__bar--h30 { height: 30%; }
.studio-bar-chart__bar--h35 { height: 35%; }
.studio-bar-chart__bar--h40 { height: 40%; }
.studio-bar-chart__bar--h45 { height: 45%; }
.studio-bar-chart__bar--h50 { height: 50%; }
.studio-bar-chart__bar--h55 { height: 55%; }
.studio-bar-chart__bar--h60 { height: 60%; }
.studio-bar-chart__bar--h65 { height: 65%; }
.studio-bar-chart__bar--h70 { height: 70%; }
.studio-bar-chart__bar--h75 { height: 75%; }
.studio-bar-chart__bar--h80 { height: 80%; }
.studio-bar-chart__bar--h85 { height: 85%; }
.studio-bar-chart__bar--h90 { height: 90%; }
.studio-bar-chart__bar--h95 { height: 95%; }
.studio-bar-chart__bar--h100 { height: 100%; }

/* LineChart — gridlines/axis (STUDIO-252) render from color.chart.grid/color.chart.axisText, the
   required chart-chrome roles (see token-schema.md) -- never chart.categorical.*, which is reserved
   for the data marks themselves. container-type below enables the responsive tick-thinning
   (STUDIO-250) that hides --mid gridlines/axis labels once the chart's own container narrows. */
.studio-line-chart-frame { display: flex; gap: var(--space-2); height: 8rem; container-type: inline-size; }
.studio-line-chart__axis-labels { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-chart-axisText); font-variant-numeric: tabular-nums; text-align: right; flex-shrink: 0; }
.studio-line-chart { width: 100%; height: 100%; }
@container (max-width: 320px) {
  .studio-line-chart__axis-label--mid,
  .studio-line-chart__gridline--mid { display: none; }
}
.studio-line-chart__gridline { opacity: 0.6; }

/* UsageMeter */
.studio-usage-meter { font-family: var(--font-family-body); display: flex; flex-direction: column; gap: var(--space-1); }
.studio-usage-meter__head { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.studio-usage-meter__track { height: var(--space-2); background: var(--color-surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.studio-usage-meter__fill { height: 100%; border-radius: var(--radius-full); }
.studio-usage-meter__fill--ok { background: var(--color-action-primary); }
.studio-usage-meter__fill--warning { background: var(--color-status-warning-text); }
.studio-usage-meter__fill--danger { background: var(--color-status-danger-text); }

/* Discrete 5%-step width buckets -- same CSP rationale as the BarChart height buckets above. */
.studio-usage-meter__fill--w0 { width: 0%; }
.studio-usage-meter__fill--w5 { width: 5%; }
.studio-usage-meter__fill--w10 { width: 10%; }
.studio-usage-meter__fill--w15 { width: 15%; }
.studio-usage-meter__fill--w20 { width: 20%; }
.studio-usage-meter__fill--w25 { width: 25%; }
.studio-usage-meter__fill--w30 { width: 30%; }
.studio-usage-meter__fill--w35 { width: 35%; }
.studio-usage-meter__fill--w40 { width: 40%; }
.studio-usage-meter__fill--w45 { width: 45%; }
.studio-usage-meter__fill--w50 { width: 50%; }
.studio-usage-meter__fill--w55 { width: 55%; }
.studio-usage-meter__fill--w60 { width: 60%; }
.studio-usage-meter__fill--w65 { width: 65%; }
.studio-usage-meter__fill--w70 { width: 70%; }
.studio-usage-meter__fill--w75 { width: 75%; }
.studio-usage-meter__fill--w80 { width: 80%; }
.studio-usage-meter__fill--w85 { width: 85%; }
.studio-usage-meter__fill--w90 { width: 90%; }
.studio-usage-meter__fill--w95 { width: 95%; }
.studio-usage-meter__fill--w100 { width: 100%; }

/* BillingStatusBanner (ADR-0082) */
.studio-billing-status-banner__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.studio-billing-status-banner__headline { font-weight: var(--font-weight-medium); }
.studio-billing-status-banner__subtext { font-size: var(--font-size-xs); margin-top: var(--space-1); }
.studio-billing-status-banner__message { font-size: var(--font-size-xs); margin-top: var(--space-1); }
.studio-billing-status-banner__compact { display: flex; align-items: center; gap: var(--space-2); }

/* SegmentedBar */
.studio-segmented-bar { font-family: var(--font-family-body); display: flex; flex-direction: column; gap: var(--space-2); }
.studio-segmented-bar__track { display: flex; height: var(--space-3); border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-sunken); }
.studio-segmented-bar__seg { height: 100%; }
.studio-segmented-bar__seg--neutral { background: var(--color-text-muted); }
.studio-segmented-bar__seg--success { background: var(--color-status-success-text); }
.studio-segmented-bar__seg--warning { background: var(--color-status-warning-text); }
.studio-segmented-bar__seg--danger { background: var(--color-status-danger-text); }
.studio-segmented-bar__seg--info { background: var(--color-status-info-text); }

/* Discrete 5%-step width buckets -- same CSP rationale as the BarChart height buckets above. */
.studio-segmented-bar__seg--w0 { width: 0%; }
.studio-segmented-bar__seg--w5 { width: 5%; }
.studio-segmented-bar__seg--w10 { width: 10%; }
.studio-segmented-bar__seg--w15 { width: 15%; }
.studio-segmented-bar__seg--w20 { width: 20%; }
.studio-segmented-bar__seg--w25 { width: 25%; }
.studio-segmented-bar__seg--w30 { width: 30%; }
.studio-segmented-bar__seg--w35 { width: 35%; }
.studio-segmented-bar__seg--w40 { width: 40%; }
.studio-segmented-bar__seg--w45 { width: 45%; }
.studio-segmented-bar__seg--w50 { width: 50%; }
.studio-segmented-bar__seg--w55 { width: 55%; }
.studio-segmented-bar__seg--w60 { width: 60%; }
.studio-segmented-bar__seg--w65 { width: 65%; }
.studio-segmented-bar__seg--w70 { width: 70%; }
.studio-segmented-bar__seg--w75 { width: 75%; }
.studio-segmented-bar__seg--w80 { width: 80%; }
.studio-segmented-bar__seg--w85 { width: 85%; }
.studio-segmented-bar__seg--w90 { width: 90%; }
.studio-segmented-bar__seg--w95 { width: 95%; }
.studio-segmented-bar__seg--w100 { width: 100%; }
.studio-segmented-bar__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.studio-segmented-bar__legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.studio-segmented-bar__dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); display: inline-block; }
.studio-segmented-bar__legend-value { color: var(--color-text-muted); }