@layer overscan {
ov-ladder {
  display: grid;
  gap: 8px;
  max-inline-size: 460px;
  padding: 10px 12px;
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-1);
  letter-spacing: 0.8px;
  color: var(--ov-dim);
  background: var(--ov-field);
  border: var(--ov-bezel) solid var(--ov-line-strong);
}
.ov-ladder__head { color: var(--ov-accent-2); letter-spacing: 1.2px; text-transform: uppercase; }
.ov-ladder__head.is-data { color: var(--ov-accent); }
.ov-ladder__rungs { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-ladder__rung {
  position: relative; display: grid; grid-template-columns: 14px 13ch minmax(0, 1fr); gap: 2px 10px;
  align-items: center; padding: 4px 0 4px 0;
}
.ov-ladder__rung::before {
  content: ''; position: absolute; inset-inline-start: 6px; inset-block: 0; inline-size: 2px;
  background: var(--ov-line);
}
.ov-ladder__rung.is-chain::before { background: var(--ov-accent); }
.ov-ladder__rung:first-child::before { inset-block-start: 50%; }
.ov-ladder__rung:last-child::before { inset-block-end: 50%; }
.ov-ladder__mark {
  position: relative; z-index: 1; inline-size: 12px; block-size: 12px; box-sizing: border-box;
  border: 1.5px solid var(--ov-line-strong); background: var(--ov-field); border-radius: 50%;
}
.ov-ladder__name { color: var(--ov-ink); text-transform: uppercase; letter-spacing: 1px; }
.ov-ladder__state { letter-spacing: 1.2px; }
.ov-ladder__why { grid-column: 2 / -1; color: var(--ov-faint); }
.ov-ladder__rung.is-locked .ov-ladder__mark { background: var(--ov-accent); border-color: var(--ov-accent); }
.ov-ladder__rung.is-locked .ov-ladder__state { color: var(--ov-accent); }
.ov-ladder__rung.is-acquiring .ov-ladder__mark { border-color: var(--ov-accent-2); border-style: dashed; }
.ov-ladder__rung.is-acquiring .ov-ladder__state { color: var(--ov-accent-2); }
.ov-ladder__rung.is-off .ov-ladder__name, .ov-ladder__rung.is-noreport .ov-ladder__name { color: var(--ov-dim); }
.ov-ladder__rung.is-noreport .ov-ladder__mark { border-style: dotted; }
.ov-ladder__rung.is-held .ov-ladder__mark { border-color: var(--ov-alarm); }
.ov-ladder__rung.is-held .ov-ladder__state { color: var(--ov-alarm); }
@media (prefers-reduced-motion: no-preference) {
  .ov-ladder__rung.is-acquiring .ov-ladder__mark { animation: ov-ladder-seek 1.2s steps(2) infinite; }
}
@keyframes ov-ladder-seek { 50% { border-color: var(--ov-line-strong); } }
.ov-ladder__void {
  display: grid; place-items: center; min-block-size: 70px;
  color: var(--ov-alarm); text-transform: uppercase; border: 1px dashed var(--ov-line-strong);
}
}