/*
 * psc_chart.css — styles for the `chart_step` PSC widget.
 * Token-only (no raw hex); paired with psc_chart.js + sections/_chart.html.
 */
:root {
  --psc-ch-navy:       var(--bk-navy, #1a1a2e);
  --psc-ch-gold:       var(--bk-gold, #c29954);
  --psc-ch-card:       var(--bk-card, #ffffff);
  --psc-ch-bg:         var(--bk-parchment, #f4f5f7);
  --psc-ch-border:     var(--bk-border, #e9ecef);
  --psc-ch-text:       var(--bk-text, #2d2d3a);
  --psc-ch-text-muted: var(--bk-text-muted, #6c757d);
  --psc-ch-success:    var(--bk-emerald, #10B981);
  --psc-ch-radius-sm:  var(--bk-radius-sm, 6px);
  --psc-ch-radius-pill: var(--bk-radius-pill, 9999px);
}

.psc-chart-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.psc-chart-header .material-symbols-outlined { color: var(--psc-ch-gold); }
.psc-chart-title { font-weight: 600; color: var(--psc-ch-navy); }
.psc-chart-type {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--psc-ch-text-muted);
  background: var(--psc-ch-bg);
  border-radius: var(--psc-ch-radius-pill);
  padding: 0.15rem 0.55rem;
}

.psc-chart-canvas-host { position: relative; width: 100%; }
.psc-chart-canvas { display: block; width: 100%; }

.psc-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin: 0.5rem 0 0.2rem;
}
.psc-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--psc-ch-text-muted);
}
.psc-chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.psc-chart-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--psc-ch-text-muted);
  background: var(--psc-ch-bg);
  border: 1px dashed var(--psc-ch-border);
  border-radius: var(--psc-ch-radius-sm);
}

.psc-chart-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.78rem;
}
.psc-chart-table th,
.psc-chart-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--psc-ch-border);
}
.psc-chart-table th:last-child,
.psc-chart-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.psc-chart-actions { margin-top: 0.9rem; }
.psc-chart-result {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  color: var(--psc-ch-success);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Accessible caption hidden visually but read by screen readers. */
.psc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .psc-chart-canvas-host, .psc-chart-result { transition-duration: 0.01ms !important; }
}