/* The DROID report's chart rules, resolved to its dark palette (rollouts/report/render.py). */
.viz .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 8px; vertical-align: baseline; }
.viz .legend { display: flex; gap: 18px; font-size: 12px; color: #c3c2b7; margin: 16px 0 4px; }
.viz .legend span { display: flex; align-items: center; gap: 7px; }
.progress-chart { position: relative; margin-top: 14px; }
.progress-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.ch-grid { stroke: #2c2c2a; stroke-width: 1; }
.ch-tick { fill: #898781; font-size: 11px; font-variant-numeric: tabular-nums; }
.ch-band { stroke: none; transition: opacity .08s linear; }
svg.has-lit .ch-band { opacity: .34; }
svg.has-lit .ch-band.is-lit { opacity: 1; stroke: #ffffff; stroke-width: 1.25; }
.ch-spacer { fill: none; stroke: #1a1a19; stroke-width: 1.1; }
.ch-seam { fill: none; stroke: #1a1a19; stroke-width: 2; }
.ch-mean { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-dasharray: 4 3; }
.ch-mean-dot { fill: #ffffff; }
.ch-mean-label { fill: #ffffff; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.hover-rule { stroke: #ffffff; stroke-width: 1; opacity: 0; pointer-events: none; }
.hover-tip { position: absolute; top: 8px; pointer-events: none; opacity: 0;
  background: #1a1a19; border: 1px solid rgba(255,255,255,0.10); border-radius: 8px;
  padding: 7px 10px; font-size: 12px; color: #ffffff; line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0,0,0,.14); white-space: nowrap; }
.hover-tip span { display: flex; align-items: center; gap: 7px; }
.hover-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.ch-tip-sub { color: #c3c2b7; }
.ch-legend { flex-wrap: wrap; row-gap: 6px; margin: 14px 0 0; }
.ch-note { color: #898781; }
.ch-panel { margin-top: 26px; }
.ch-panel h3 { font-size: 14px; font-weight: 600; margin: 0; }
.ramp { margin-top: 14px; }
.ramp svg { width: 100%; height: auto; display: block; }
.ramp-grid { stroke: #2c2c2a; stroke-width: 1; }
.ramp-tick { fill: #898781; font-size: 11px; font-variant-numeric: tabular-nums; }
.ramp-rung { fill: #c3c2b7; font-size: 12px; }
.ramp-band { fill: currentColor; stroke: none; opacity: .14; }
.ramp-line { fill: none; stroke: currentColor; stroke-width: 2.2; }
.ramp-dot { fill: currentColor; }
.ramp-legend .swatch { background: currentColor; }
.reach-1 { color: #3987e5; }
.reach-2 { color: #e8a34e; }
.reach-3 { color: #a98ae8; }
.reach-4 { color: #38b0aa; }
.reach-5 { color: #e074ac; }
.reach-6 { color: #c2a173; }