/* ==========================================================================
   "Recorded vitals" card. Chart status colours are validated as a set
   (dataviz validator, white surface): green #138a6e, yellow #c29b00,
   red #c0392b. The app's --go/--warn amber failed against --stop, so the
   chart carries its own three. Text stays in ink tokens; colour marks only.
   ========================================================================== */

#vc-card, .vc-scope {
  --vc-ok:   #138a6e;
  --vc-warn: #c29b00;
  --vc-warn-ink: #7a6100;   /* text on light ground: 5.4:1 */
  --vc-crit: #c0392b;
}

/* ---- tabs ---------------------------------------------------------------- */
.vc-tabs { display: flex; gap: 4px; }
.vc-tabs button {
  font: inherit; font-size: 13.5px; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.vc-tabs button.is-on {
  background: var(--accent-soft); color: var(--ink);
  border-color: var(--accent); font-weight: 600;
}
.vc-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- grid ---------------------------------------------------------------- */
.vc-scroll { overflow-x: auto; }
.vc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vc-table th, .vc-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--line-soft);
  text-align: left; white-space: nowrap;
}
.vc-table th { font-size: 12px; color: var(--muted); font-weight: 600; }
.vc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.vc-unit { font-weight: 400; color: var(--muted); font-size: 0.85em; }
.vc-sep { color: var(--muted); padding: 0 1px; }
.vc-src { color: var(--muted); font-size: 13px; }

.vc-table tbody tr { box-shadow: inset 3px 0 0 transparent; }
.vc-row-warning  { box-shadow: inset 3px 0 0 var(--vc-warn) !important; }
.vc-row-critical { box-shadow: inset 4px 0 0 var(--vc-crit) !important;
                   background: var(--stop-soft); }

.vc-warning  { color: var(--vc-warn-ink); font-weight: 700; }
.vc-critical { color: var(--vc-crit); font-weight: 800; }

.vc-status { font-size: 13px; font-weight: 600; white-space: nowrap; }
.vc-status-normal   { color: var(--vc-ok); font-weight: 500; }
.vc-status-warning  { color: var(--vc-warn-ink); }
.vc-status-critical { color: var(--vc-crit); }

/* ---- charts -------------------------------------------------------------- */
#vc-chart { position: relative; }
.vc-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  font-size: 13px; color: var(--ink-soft); margin-bottom: 10px;
}
.vc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.vc-legend-note { color: var(--muted); font-size: 12.5px; flex-basis: 100%; }

.vc-multiples {
  display: grid; gap: 14px 22px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.vc-fig { margin: 0; min-width: 0; }
.vc-fig figcaption {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 14px; margin-bottom: 2px;
}
.vc-key { color: var(--muted); font-size: 12.5px; }
.vc-counts { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }

.vc-grid   { stroke: var(--line-soft); stroke-width: 1; }
.vc-ax     { fill: var(--muted); font-size: 11px; }
.vc-direct { fill: var(--ink-soft); font-size: 11px; font-weight: 600; }
.vc-line   { stroke: var(--ink-soft); stroke-width: 2; stroke-linejoin: round;
             stroke-linecap: round; opacity: 0.85; }
.vc-normal { fill: var(--vc-ok); opacity: 0.09; }

.vc-mk { stroke: #fff; stroke-width: 2; paint-order: stroke; }
.vc-mk-normal   { fill: var(--vc-ok); }
.vc-mk-warning  { fill: var(--vc-warn); stroke: #fff; }
.vc-mk-critical { fill: var(--vc-crit); }
.vc-hit { fill: transparent; cursor: default; }
.vc-hit:hover { fill: rgba(0, 0, 0, 0.06); }

.vc-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 150px; padding: 8px 10px;
  background: var(--card, #fff); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); font-size: 13px; line-height: 1.45;
  transform: translateY(-100%);
}
.vc-tip-when { color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  #vc-card .card-head { flex-wrap: wrap; gap: 8px; }
  .vc-multiples { grid-template-columns: 1fr; }
}

/* ---- the monthly review page's Table / Graph toggle ---------------------- */
.vd-viewbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }