/* progress view fills full screen height */
#v-progress {
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media(min-width:768px) { #v-progress { height: calc(100vh - 52px); } }
#v-progress .brand { flex-shrink: 0; }
#v-progress .prog-sub { flex-shrink: 0; }
#v-progress .chart-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.prog-sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 16px; }

/* chart container — no card, just on the dark background */
.chart-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* canvas wrapper — height set precisely by JS after flex layout */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

/* custom horizontal legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .02em;
  cursor: default;
}
.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.no-data { font-size: 13.5px; color: var(--ink-faint); font-style: italic; text-align: center; padding: 40px 0; }