/* Chart-only colours and ring presentation, isolated from the calculator. */
:root {
  --chart-blue: #3699FF;
  --chart-turquoise: #20D6C7;
  --chart-green: #36F3AD;
  --chart-amber: #FFB547;
  --chart-coral: #FF6B6B;
}

/* A dark plotting surface keeps the blue/coral series crisp inside the green band. */
.plot-frame { background: #090A0E; }
.plot-frame .y-axis { color: #c8ccd4; margin-block: 0; }
.cols {
  background: repeating-linear-gradient(to top,transparent 0,transparent calc(20% - 1px),rgba(255,255,255,.12) calc(20% - 1px),rgba(255,255,255,.12) 20%);
  border-bottom-color: rgba(255,255,255,.25);
}
.cols button span { background: var(--chart-blue); }
.cols button:hover span,
.cols button:focus-visible span,
.cols button[aria-pressed=true] span { background: var(--chart-green); }
.cols button[aria-pressed=true]::after { border-inline-color: rgba(54,243,173,.45); }
.cols button:focus-visible { outline-color: var(--chart-green); }
.legend > span:first-child i { background: var(--chart-blue); }
.legend .trend-key { color: var(--chart-coral); }
.bo-selection-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chart-green);
  box-shadow: 0 0 0 2px #090A0E;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 3;
}

.hbar:nth-child(1) { --bar-color: var(--chart-blue); }
.hbar:nth-child(2) { --bar-color: var(--chart-turquoise); }
.hbar:nth-child(3) { --bar-color: var(--chart-amber); }
.hbar .fill { background: var(--bar-color); }
.hbar .lbl b { color: var(--bar-color); }
.hbar[aria-pressed=true] .track { outline: 1px solid var(--chart-green); outline-offset: 3px; }

/* Reference-style finance panels: clean rings, with values in the legend. */
.rings { gap: 12px; align-items: stretch; }
.ring {
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 14px 16px;
  padding: 20px;
  border: 1px solid #25272c;
  border-radius: 12px;
  background: linear-gradient(135deg,#101115,#0b0c0f);
  min-width: 0;
}
.ring h3 { font: 700 21px/1.25 Inter,sans-serif; margin: 0 0 2px; min-height: 0; text-align: center; }
.ring-visual { width: 100%; max-width: 220px; justify-self: center; }
.ring svg circle.seg,
.ring svg circle.seg.on { stroke-width: 36; }
.ring svg.dim circle.seg,
.ring svg.dim circle.seg.on { opacity: 1; }
.ring svg circle.seg.on { filter: brightness(1.06); }
.ring .ctr { font: 700 28px/1.1 Inter,sans-serif; pointer-events: none; }
.ring .ctr small { font-size: 10px; letter-spacing: .15px; }
.ring ul { margin: 0; min-width: 0; }
.ring li button {
  grid-template-columns: 12px minmax(0,1fr) 36px;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  font-size: 10px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.ring li i { width: 12px; height: 12px; border-radius: 3px; }
.ring li button b { font-size: 14px; }
.ring li button[aria-pressed=true],
.ring li button.on,
.ring li button:hover,
.ring li button:focus-visible {
  color: var(--segment-color);
  background: color-mix(in srgb,var(--segment-color) 12%,transparent);
  border-color: color-mix(in srgb,var(--segment-color) 22%,transparent);
}
.ring li button[aria-pressed=true] i { outline: none; }
.ring li button:focus-visible { outline: 2px solid var(--chart-green); outline-offset: 2px; }
/* Preserve the detailed live announcement without adding a second visible legend. */
.ring-readout {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vcols .c { background: var(--chart-blue); opacity: 1; }
.vcols button .v { color: var(--chart-blue); }
.vcols button[aria-pressed=true] .c,
.vcols button:hover .c,
.vcols button:focus-visible .c { background: var(--chart-green); }
.vcols button[aria-pressed=true] .v,
.vcols button:hover .v,
.vcols button:focus-visible .v { color: var(--chart-green); }

#global .range .t { height: 20px; border-radius: 8px; }
#global .range .t i { border-radius: 8px; }
#global .range .t { overflow: hidden; }
#global .range .t i.stack-state { background: var(--chart-blue); border-radius: 8px 0 0 8px; }
#global .range .t i.stack-federal { background: var(--chart-turquoise); border-radius: 0 8px 8px 0; }
#global .range small { display: block; font-size: 9px; line-height: 1.3; margin-top: 3px; color: #b9c3ce; }
#global .range b { white-space: nowrap; font-size: 13px; }
#global .stack-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 10px; color: #c3c7ce; }
#global .stack-key span { display: inline-flex; align-items: center; gap: 6px; }
#global .stack-key i { width: 9px; height: 9px; border-radius: 2px; }
#global .state-key { background: var(--chart-blue); }
#global .federal-key { background: var(--chart-turquoise); }
#global #rRead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.range .t i { background: var(--range-color); }
.range.prop .t i { background: var(--range-color); }
.range[aria-pressed=true] .t { outline: 1px solid var(--chart-green); outline-offset: 3px; }

@media (max-width:1199px) {
  .ring { grid-template-columns: 1fr; padding: 18px; }
  .ring-visual { width: 200px; max-width: 100%; }
  .ring h3 { font-size: 19px; }
  .ring li button { font-size: 11px; }
}
@media (max-width:600px) {
  .rings { grid-template-columns: 1fr; gap: 14px; }
  .ring { padding: 18px; gap: 14px; }
  .ring-visual { width: 190px; }
  .ring li button { min-height: 36px; }
}