/* Answer Desk charts: calm and flat. One green for the numbers, amber only when something runs over.
   Every colour comes from the page's own custom properties; nothing here is remote. */

.ch { font-family: var(--font); font-variant-numeric: tabular-nums; color: var(--text); }
.ch-svg { display: block; max-width: 100%; height: auto; overflow: visible; font-family: var(--font); font-variant-numeric: tabular-nums; }
.ch-cols, .ch-linechart { width: 100%; }
.ch-empty { margin: 0; font-size: 13px; color: var(--muted); }

/* Axes, gridlines and values */
.ch-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ch-base { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ch-axis { fill: var(--muted); color: var(--muted); font-size: 11px; }
.ch-val { fill: var(--ink); color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-val.is-none { fill: var(--faint, var(--muted)); color: var(--faint, var(--muted)); font-weight: 400; }

/* Bars and columns: one green; when one is picked out, the rest step back */
.ch-bar { fill: var(--accent); background: var(--accent); }
.ch-cols.has-hi .ch-bar { fill-opacity: 0.3; }
.ch-bars.has-hi .ch-bar { opacity: 0.3; }
.ch-cols.has-hi .ch-bar.is-hi { fill-opacity: 1; }
.ch-bars.has-hi .ch-bar.is-hi { opacity: 1; }
.ch-none { fill: var(--line-strong); }

/* Horizontal bar list (HTML) */
.ch-bars { display: grid; gap: 10px; }
.ch-bar-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(56px, auto); align-items: center; gap: 12px; }
.ch-bar-label { font-size: 13px; line-height: 1.35; color: var(--text); }
.ch-bar-row.is-hi .ch-bar-label { color: var(--ink); font-weight: 600; }
.ch-bar-note { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--muted); }
.ch-bar-track { height: 10px; }
.ch-bars .ch-bar { height: 100%; min-width: 2px; border-radius: 4px; transition: width 0.4s ease; }
.ch-bars .ch-val { font-size: 13px; text-align: right; white-space: nowrap; }

/* Line and area */
.ch-area { fill: var(--accent); fill-opacity: 0.08; stroke: none; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.ch-dot.is-solo { fill: var(--accent); stroke: none; }
.ch-spark { display: inline-block; vertical-align: middle; }
.ch-spark .ch-line { stroke-width: 1.5; }

/* Calendar heatmap: 0 is an empty square, 4 is full green */
.ch-heat .ch-axis { font-size: 9px; }
.heat-0 { fill: var(--line); }
.heat-1 { fill: var(--accent); fill-opacity: 0.22; }
.heat-2 { fill: var(--accent); fill-opacity: 0.45; }
.heat-3 { fill: var(--accent); fill-opacity: 0.7; }
.heat-4 { fill: var(--accent); fill-opacity: 1; }

/* Progress ring */
.ch-ring { display: inline-grid; justify-items: center; gap: 6px; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 0.5s ease; }
.ch-ring-num { fill: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.ch-ring-sub { fill: var(--muted); font-size: 11px; }
.ch-ring-label { max-width: 160px; font-size: 13px; text-align: center; color: var(--muted); }

/* Usage meter */
.ch-meter { display: grid; gap: 6px; }
.ch-meter-text { font-size: 13px; color: var(--text); }
.ch-meter .meter { height: 8px; margin: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }
.meter.is-over .meter-fill { background: var(--you); }
.ch-meter.is-over .ch-meter-text { color: var(--you); font-weight: 600; }

/* Phones: the bar list stacks, and chart text grows back to a readable size as the SVG scales down */
@media (max-width: 520px) {
  .ch-bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ch-bar-label { grid-column: 1 / -1; }
  .ch-cols .ch-axis, .ch-linechart .ch-axis { font-size: 17px; }
  .ch-cols .ch-val, .ch-linechart .ch-val { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-bars .ch-bar, .meter-fill, .ring-fill { transition: none; }
}