/* Dice roll statistics chart (rollstats.js). Text uses text tokens, never the bar colour. */

.roll-stats { position: relative; }
.rs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rs-chart { width: 100%; height: auto; display: block; overflow: visible; }
.rs-axis { stroke: var(--border); stroke-width: 1; }
.rs-bar { fill: var(--rs-bar); }
.rs-col.seven .rs-bar { fill: var(--rs-seven); }
.rs-col:hover .rs-bar, .rs-hit:focus + .rs-bar { opacity: 0.85; }
.rs-expected { stroke: var(--rs-expected); stroke-width: 1.5; stroke-dasharray: 3 2; opacity: 0.7; }
.rs-value { fill: var(--text); font: 600 9px var(--mono); text-anchor: middle; }
.rs-label { fill: var(--muted); font: 500 10px var(--font); text-anchor: middle; }
.rs-label.seven { fill: var(--text); font-weight: 800; }
.rs-caption { fill: var(--muted); font: 500 7.5px var(--font); text-anchor: middle; }
.rs-hit { fill: transparent; cursor: default; outline: none; }
.rs-hit:focus-visible { stroke: var(--orange); stroke-width: 1.5; }
.rs-tip {
  position: absolute; top: 18px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; font-size: 0.75rem; color: var(--text); box-shadow: var(--shadow);
}
.rs-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.rs-table th, .rs-table td { text-align: right; padding: 2px 6px; border-bottom: 1px solid var(--border); }
.rs-table th:first-child, .rs-table td:first-child { text-align: left; }
.rs-table th { color: var(--muted); font-weight: 500; }
.rs-legend { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 0.72rem; color: var(--muted); }
.rs-legend-line { width: 18px; border-top: 1.5px dashed var(--rs-expected); opacity: 0.8; }