.chart-checkpoints-layer { position:absolute; inset:0; z-index:29; overflow:hidden; pointer-events:none; }
.chart-checkpoints-lines { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.chart-checkpoints-lines line { stroke:#7fa2f7; stroke-width:1; }
.chart-checkpoints-lines circle { fill:#82a8ff; }
.chart-checkpoint { box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; position:absolute; width:min(238px, calc(100% - 20px)); padding:8px 9px; color:#d1d4dc; background:rgba(30,34,45,.97); border:1px solid #5174bc; border-radius:7px; box-shadow:0 6px 20px #0007; font-size:11px; pointer-events:auto; }
.chart-checkpoint[hidden], .chart-checkpoint-marker[hidden] { display:none !important; }
.chart-checkpoint:focus-within { outline:1px solid #a2baff; }
.chart-checkpoint-header { flex:0 0 auto; display:flex; align-items:center; gap:2px; white-space:nowrap; }
.chart-checkpoint-time { flex:1 1 auto; min-width:0; color:#aeb8cd; font:10px ui-monospace,monospace; white-space:nowrap; }
.chart-checkpoint-body { flex:0 1 auto; min-height:0; max-height:7.5em; overflow:auto; overscroll-behavior:contain; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; margin-top:4px; user-select:text; }
.chart-checkpoint-button { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:25px; padding:2px 3px; color:#d5e2ff; background:#29334a; border:1px solid #43516a; border-radius:4px; cursor:pointer; }
.chart-checkpoint-button[hidden] { display:none !important; }
.chart-checkpoint-button:disabled { opacity:.4; cursor:default; }
.chart-checkpoint-button:focus-visible, .chart-checkpoint-marker:focus-visible { outline:2px solid #a2baff; outline-offset:2px; }
.chart-checkpoint-marker { position:absolute; width:24px; height:24px; padding:0; border:1px solid #c2d1ff; border-radius:50%; background:#2962ff; color:white; font-weight:bold; font-size:10px; line-height:22px; text-align:center; pointer-events:auto; cursor:pointer; transform:translate(-50%,-50%); }
.chart-checkpoint-marker.chart-checkpoint-dot { width:18px; height:18px; font-size:9px; line-height:16px; }
.chart-checkpoint-chooser { box-sizing:border-box; position:absolute; z-index:4; width:min(238px, calc(100% - 20px)); max-height:min(240px, calc(100% - 16px)); overflow:auto; padding:8px; color:#d1d4dc; background:#1e222d; border:1px solid #5174bc; border-radius:7px; box-shadow:0 6px 20px #0007; pointer-events:auto; }
.chart-checkpoint-chooser-header { position:sticky; top:-8px; z-index:1; background:#1e222d; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; }
.chart-checkpoint-choice { display:block; width:100%; margin-top:4px; padding:8px; text-align:left; color:#d1d4dc; background:#29334a; border:1px solid #43516a; border-radius:4px; font:11px ui-monospace,monospace; cursor:pointer; }
.chart-checkpoint-recovery { position:sticky; top:0; z-index:31; display:block; box-sizing:border-box; min-height:30px; margin:0 0 6px auto; max-width:100%; padding:7px; color:#fff; background:#2962ff; border:0; border-radius:4px; font-size:11px; cursor:pointer; }
.chart-checkpoint-choice:focus-visible, .chart-checkpoint-recovery:focus-visible { outline:2px solid #a2baff; outline-offset:2px; }
@media (max-width:640px) { .chart-checkpoint { width:min(200px, calc(100% - 20px)); font-size:12px; } .chart-checkpoint-button { min-height:30px; } }