.ch{ margin:0; }
.ch-read{ margin:0 0 12px; min-height:1.6em; font-size:14.5px; color:var(--bone); overflow-wrap:anywhere; }
.ch-read[data-rest]{ color:var(--bone-dim); }
.ch .scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
.ch-more{ display:none; margin:8px 0 0; font-size:13px; color:var(--bone-mid); }
.ch.ch-wide > .ch-more{ display:block; }
.ch.ch-wide:not(.ch-at-end) > .scroll{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
}
.chart{ display:block; width:100%; height:auto; }
.ch > .scroll > .inner{ display:grid; grid-template-columns:minmax(0,1fr); }
.ch > .scroll > .inner > svg{ grid-area:1 / 1; }
.ch-frozen{ position:sticky; left:0; z-index:1; align-self:start; justify-self:start;
  overflow:visible; pointer-events:none; }
.ch-frozen .ch-ground{ fill:var(--ch-ground, var(--void)); pointer-events:auto; }

.axis,.tick{ stroke:var(--bone-dim); stroke-width:1; }
.gridline{ stroke:var(--edge-soft); stroke-width:1; }
.ax{ font:400 12px var(--f); fill:var(--bone-mid); font-variant-numeric:tabular-nums; }
.alabel{ font:700 12px var(--f); fill:var(--bone-dim); }
.wl{ font:700 12px var(--f); fill:var(--bone-mid); font-variant-numeric:tabular-nums; }
.wl.b-bronze{ fill:var(--bronze-warm); }  .wl.b-silver{ fill:var(--silver); }
.wl.b-golden{ fill:var(--gold); }         .wl.b-devil{ fill:var(--devil-tier-hi); }
.wl.b-levi{ fill:var(--levi-edge); }
.ch-zones line,.ch-anno line{ stroke:var(--bone-dim); stroke-width:1; fill:none; }
.ch-anno line.wall{ stroke-dasharray:3 4; }
.ch-anno-label{ font:700 12px var(--f); fill:var(--bone-mid); }
.ch-anno circle{ fill:var(--bone); stroke:var(--void); stroke-width:1.5; }
.ch-anno-label.pk{ font:700 12px var(--f); fill:var(--bone); font-variant-numeric:tabular-nums;
  paint-order:stroke; stroke:var(--void); stroke-width:3px; stroke-linejoin:round; }

.ch-hit{ fill:transparent; touch-action:pan-y; cursor:crosshair; }
.ch-cross{ stroke:var(--bone-dim); stroke-width:1; }
.mk-ring{ fill:none; stroke:var(--bone); stroke-width:2;
  filter:drop-shadow(0 0 1px var(--void)) drop-shadow(0 0 1px var(--void)); }
.ch-marks :focus,.ch-cursor :focus{ outline:none; }
.ch-off{ display:none; }
.ch-foot{ margin:12px 0 0; font-size:13px; color:var(--bone-dim); }
.ch-state{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 10px; padding:8px 10px;
  background:var(--ash); border:1px solid var(--edge); font-size:13px; color:var(--bone-mid); }
.ch-state[hidden]{ display:none; }
.btn.ghost{ appearance:none; cursor:pointer; background:none; border:1px solid var(--bone-dim);
  border-radius:var(--r1); padding:3px 9px; font:700 11px/1.3 var(--f); color:var(--bone); }

#dd-tip{
  position:fixed; z-index:30; pointer-events:none; padding:8px 10px; max-width:360px;
  background:var(--ash); border:1px solid var(--edge); border-radius:var(--r1);
  font:400 13px/1.45 var(--f); color:var(--bone); font-variant-numeric:tabular-nums;
}
#dd-tip dl{ margin:0; display:grid; grid-template-columns:auto auto; gap:2px 14px; }
#dd-tip dt{ color:var(--bone-mid); }
#dd-tip dd{ margin:0; text-align:right; }
#dd-tip .ch-tip-on{ color:var(--bone); font-weight:700; }

.ch .ch-legends{ display:grid; margin:0 0 10px; }
.ch .ch-legends.ch-off{ display:none; }
.ch .ch-legends > .legend{ grid-area:1 / 1; align-self:start; }
.ch .ch-legends > .ch-ghost{ visibility:hidden; }
.ch .legend{ display:flex; flex-wrap:wrap; gap:2px 18px; margin:0; padding:0; list-style:none; }
.ch .legend button{
  display:flex; align-items:center; gap:8px; min-height:24px; padding:4px 2px;
  background:none; border:0; cursor:pointer; font:400 13px/1 var(--f); color:var(--bone-mid);
}
.ch .legend button:hover{ color:var(--bone); }
.ch .legend button[aria-pressed="false"]{ color:var(--bone-dim); text-decoration:line-through; }
.sw{ width:9px; height:9px; flex:none; display:inline-block; background:var(--bone-dim); }

details.ch-table{ margin:14px 0 0; border-top:1px solid var(--edge-soft); padding-top:8px; }
details.ch-table > summary{
  cursor:pointer; font:700 11.5px/1 var(--f); letter-spacing:.13em;
  text-transform:uppercase; color:var(--bone-dim); padding:5px 0;
}
details.ch-table > summary:hover{ color:var(--bone); }
details.ch-table .scroll{ max-height:320px; overflow:auto; margin-top:10px; }
details.ch-table table{ width:100%; border-collapse:collapse; font-size:13.5px; }
details.ch-table caption{ caption-side:top; padding:0 0 8px; text-align:left;
  font:400 13px/1.4 var(--f); letter-spacing:0; text-transform:none; color:var(--bone-dim); }
details.ch-table th,details.ch-table td{
  padding:6px 10px; text-align:right; border-bottom:1px solid var(--edge-soft); white-space:nowrap;
  font-size:inherit;
}
details.ch-table tbody tr:hover{ background:none; }
details.ch-table tbody tr:last-child td,
details.ch-table tbody tr:last-child th{ border-bottom:1px solid var(--edge-soft); }
details.ch-table th{ background:var(--void); color:var(--bone-dim);
  font:700 12px/1.4 var(--f); letter-spacing:.12em; text-transform:uppercase; }
details.ch-table thead th{ position:sticky; top:0; z-index:1; }

.dg-pleb{ --dg:var(--pleb-hi); }         .dg-bronze{ --dg:var(--bronze-warm); }
.dg-silver{ --dg:var(--silver); }        .dg-golden{ --dg:var(--gold); }
.dg-devil{ --dg:var(--devil-tier-hi); }  .dg-levi{ --dg:var(--levi-edge); }
.dg-all{ --dg:var(--bone); }
.dgl{ stroke:var(--dg); stroke-width:2; fill:none; }
.dgb{ fill:var(--dg); fill-opacity:.8; }
.sw.dgl,.sw.dgb,.dgs .sw{ background:var(--dg); }