@layer overscan {
ov-quorum {
  --ov-q-glow: calc(var(--ov-bloom, .2) * 10px);
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-1, 10px);
  color: var(--ov-ink);
}
.ov-quorum__value {
  font-size: calc(var(--ov-size-2, 12px) * 2.2);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 var(--ov-q-glow) currentColor;
}
.ov-quorum__unit { color: var(--ov-faint); }
.ov-quorum__tag,
.ov-quorum__why { grid-column: 1 / -1; letter-spacing: .1em; overflow-wrap: anywhere; }
.ov-quorum__tag:empty,
.ov-quorum__why:empty,
.ov-quorum__foot:empty { display: none; }
ov-quorum:not([data-ov-state="voted"], [data-ov-state="single"]) .ov-quorum__value { font-size: calc(var(--ov-size-2, 12px) * 1.5); letter-spacing: .14em; }
.ov-quorum__scale {
  position: relative;
  block-size: 80px;
  margin-block: 2px 4px;
  font-variant-numeric: tabular-nums;
  border-block-end: var(--ov-rule, 1px) solid var(--ov-line);
}
.ov-quorum__scale[hidden] { display: none; }
.ov-quorum__axis {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 20px;
  border-block-start: var(--ov-rule, 1px) solid var(--ov-line);
}
.ov-quorum__zone {
  position: absolute;
  inset-block-start: 12px;
  block-size: 17px;
  background: color-mix(in srgb, var(--ov-accent) 16%, transparent);
  border-inline: var(--ov-rule, 1px) dashed color-mix(in srgb, var(--ov-accent) 55%, transparent);
}
.ov-quorum__tick {
  position: absolute;
  inset-block-start: 8px;
  block-size: 25px;
  border-inline-start: 3px solid var(--ov-accent);
  box-shadow: 0 0 var(--ov-q-glow) var(--ov-accent);
}
.ov-quorum__votelabel {
  position: absolute;
  inset-block-start: 0;
  transform: translateX(-50%);
  color: var(--ov-accent);
  letter-spacing: .14em;
  text-shadow: 0 0 var(--ov-q-glow) currentColor;
}
.ov-quorum__tolabel {
  position: absolute;
  inset-block-start: 10px;
  margin-inline-start: 4px;
  color: color-mix(in srgb, var(--ov-accent) 75%, var(--ov-faint));
  letter-spacing: .1em;
}
.ov-quorum__mark {
  position: absolute;
  transform: translateX(-50%);
  padding: 1px 4px 0;
  white-space: nowrap;
  color: var(--ov-accent);
  background: color-mix(in srgb, var(--ov-field) 88%, transparent);
  border-block-start: 2px solid currentColor;
}
.ov-quorum__mark b { font-weight: normal; letter-spacing: .12em; color: var(--ov-ink); }
.ov-quorum__mark::before {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 100%;
  border-inline-start: var(--ov-rule, 1px) dashed currentColor;
  opacity: .7;
}
.ov-quorum__mark[data-row="0"]::before { block-size: 6px; }
.ov-quorum__mark[data-row="1"]::before { block-size: 21px; }
.ov-quorum__mark[data-row="2"]::before { block-size: 36px; }
.ov-quorum__mark[data-row="3"]::before { block-size: 51px; }
.ov-quorum__mark[data-row="0"] { inset-block-start: 26px; }
.ov-quorum__mark[data-row="1"] { inset-block-start: 41px; }
.ov-quorum__mark[data-row="2"] { inset-block-start: 56px; }
.ov-quorum__mark[data-row="3"] { inset-block-start: 71px; }
.ov-quorum__mark:not([data-ov-member="in"]) { color: var(--ov-alarm); }
.ov-quorum__mark[data-ov-member="frozen"] { border-block-start-style: dashed; }
.ov-quorum__mark:is([data-ov-member="stale"], [data-ov-member="none"], [data-ov-member="unvoted"]) { border-block-start-style: dotted; }
.ov-quorum__mark[data-ov-member="failed"] { border-block-start: 3px double currentColor; }
.ov-quorum__end { position: absolute; inset-block-start: 4px; color: var(--ov-faint); }
.ov-quorum__end--lo { inset-inline-start: 0; }
.ov-quorum__end--hi { inset-inline-end: 0; }
.ov-quorum__spark { inline-size: 72px; block-size: 16px; overflow: visible; align-self: center; }
.ov-quorum__sparkref { stroke: var(--ov-faint); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.ov-quorum__spark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--ov-q-dash, none);
}
.ov-quorum__chan[data-i="1"] { --ov-q-dash: 7 3; }
.ov-quorum__chan[data-i="2"] { --ov-q-dash: 2 3; }
.ov-quorum__chan[data-i="3"] { --ov-q-dash: 9 3 2 3; }
.ov-quorum__chans { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ov-quorum__chan {
  display: grid;
  grid-template-columns: 24px minmax(6ch, auto) minmax(5ch, auto) auto minmax(0, 1fr) 60px;
  align-items: baseline;
  column-gap: 1.2ch;
  row-gap: 1px;
  color: var(--ov-accent);
}
.ov-quorum__chan:not([data-ov-member="in"]) { color: var(--ov-alarm); }
.ov-quorum__chan[data-ov-member="removed"] { color: var(--ov-faint); }
.ov-quorum__key { inline-size: 24px; block-size: 6px; overflow: visible; }
.ov-quorum__key line { stroke: currentColor; stroke-width: 2; stroke-dasharray: var(--ov-q-dash, none); }
.ov-quorum__name { color: var(--ov-ink); letter-spacing: .12em; }
.ov-quorum__cval { font-variant-numeric: tabular-nums; text-align: end; }
.ov-quorum__chan[data-ov-member="removed"] :is(.ov-quorum__name, .ov-quorum__cval) { text-decoration: line-through; color: var(--ov-faint); }
.ov-quorum__word { padding: 0 5px; border: var(--ov-rule, 1px) solid currentColor; letter-spacing: .12em; white-space: nowrap; }
.ov-quorum__chan[data-ov-member="out"] .ov-quorum__word { border-style: dashed; }
.ov-quorum__chan[data-ov-member="failed"] .ov-quorum__word { border: 3px double currentColor; }
.ov-quorum__chan:is([data-ov-member="frozen"], [data-ov-member="stale"], [data-ov-member="none"], [data-ov-member="unvoted"]) .ov-quorum__word { border-style: dotted; }
.ov-quorum__pips { letter-spacing: .15em; white-space: nowrap; }
.ov-quorum__cwhy { grid-column: 2 / -1; color: var(--ov-faint); line-height: 1.35; overflow-wrap: anywhere; }
.ov-quorum__chan:not([data-ov-member="in"], [data-ov-member="removed"]) .ov-quorum__cwhy { color: var(--ov-alarm); }
.ov-quorum__foot { color: var(--ov-alarm); letter-spacing: .08em; }
.ov-quorum__say {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@container (max-width: 360px) {
  .ov-quorum__chan { grid-template-columns: 24px minmax(0, 1fr) 72px; }
  .ov-quorum__word { grid-column: 2 / 3; justify-self: start; }
  .ov-quorum__pips { grid-column: 2 / 3; }
  .ov-quorum__cwhy { grid-column: 2 / 3; }
  .ov-quorum__spark { grid-column: 3; grid-row: 1 / span 4; align-self: center; }
}
}
