/* Detail and observed timing share the main score's count axis and palette. */
[hidden]{display:none!important}
#open-detail[hidden]{display:none}
#score .rulers{height:119px}
.run-observation-strip{height:28px;position:relative;background:#fff9f6;border-bottom:1px solid #eadbd4;touch-action:none;cursor:crosshair}
.run-label{height:28px;display:block;padding:7px 8px 0;font-size:10px;color:#92564b;font-weight:600}
.run-dot{--dot-fill:#cf403b;--dot-edge:#a42e2b;--dot-ink:#923a32;position:absolute;left:0;top:0;min-width:18px;width:18px;height:27px;transform:translateX(-50%);border:0;padding:0;background:transparent!important;overflow:visible;touch-action:none;cursor:ew-resize;z-index:3}
.run-dot[data-timing=on-time]{--dot-fill:#32835c;--dot-edge:#246344;--dot-ink:#246344}
.run-dot[data-timing=unknown]{--dot-fill:#8b9189;--dot-edge:#62685f;--dot-ink:#62685f}
.run-dot:before{content:'';position:absolute;left:4px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--dot-fill);border:1px solid var(--dot-edge);box-shadow:0 0 0 2px var(--paper)}
.run-dot.selected:before{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--dot-edge)}
.run-dot span{position:absolute;left:20px;top:6px;font-size:10px;line-height:15px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dot-ink);background:#fff9f6e8;pointer-events:none}
.run-dot:hover,.run-dot.selected{z-index:5}
.run-dot-tooltip{position:fixed;z-index:40;display:flex;flex-direction:column;gap:4px;max-width:min(320px,calc(100vw - 16px));padding:9px 11px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);box-shadow:0 4px 16px #17382c24;font-size:11px;line-height:1.4;overflow-wrap:anywhere;pointer-events:none}
.run-dot-tooltip strong{font-size:12px}
.run-dot-tooltip span{font-size:10px;color:var(--muted)}
.run-dot-tooltip b{font-weight:600;font-variant-numeric:tabular-nums}
.run-dot-tooltip[data-timing=on-time] b{color:#246344}
.run-reference{position:absolute;top:4px;bottom:3px;border-left:1px dashed #32835c;border-right:1px dashed #32835c;background:#32835c18;pointer-events:none}
.run-difference{position:absolute;top:14px;border-top:1px solid #b95d50;pointer-events:none}
.run-pending-dot{position:absolute;top:9px;width:10px;height:10px;transform:translateX(-50%);background:#cf403b;border:1px solid #a42e2b;border-radius:50%;box-shadow:0 0 0 3px #cf403b30;pointer-events:none;z-index:4}
.run-cue-picker{position:fixed;z-index:30;width:min(320px,calc(100vw - 16px));max-height:min(340px,calc(100dvh - 16px));display:flex;flex-direction:column;border:1px solid #c6d2c5;border-radius:6px;background:var(--paper);box-shadow:0 7px 24px #17382c28;overflow:hidden}
.run-picker-heading{display:flex;align-items:center;padding:7px;gap:6px;border-bottom:1px solid var(--line)}
.run-picker-heading input{flex:1;min-width:0;width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:3px;background:white;font-size:11px}
.run-picker-heading button{border:0;padding:3px 6px;font-size:18px;background:none}
.run-picker-choices{overflow:auto;padding:4px}
.run-picker-group{font-size:9px;color:var(--muted);padding:7px 7px 3px;text-transform:uppercase;letter-spacing:.5px}
.run-picker-choices>button{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;text-align:left;white-space:normal;border:0;background:transparent;padding:8px 7px}
.run-picker-choices>button:hover,.run-picker-choices>button:focus{background:#e7efe5}
.run-picker-choices small{font-size:9px;white-space:nowrap;color:var(--muted)}
.run-picker-choices>button[aria-pressed=true]{background:#dcebe1;box-shadow:inset 3px 0 var(--teal)}
.run-picker-reference{display:flex;gap:8px;align-items:center;padding:0 8px 7px;color:var(--muted);font-size:10px}
.run-picker-reference select{min-width:0;flex:1;width:auto;margin:0;padding:4px;font-size:10px}
.run-picker-actions{display:flex;justify-content:space-between;gap:10px;padding:7px;border-top:1px solid var(--line)}
.run-picker-actions [data-delete-observation]{border:0;color:#a43e2e;background:none}
#cue-detail{flex:1;min-height:0;display:flex;flex-direction:column}
.detail-open #viewport,.detail-open .view-tools,.detail-open #selection-info,.detail-open #edit-selected,.detail-open #open-detail{display:none!important}
.detail-toolbar{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.detail-heading{flex:1;min-width:0;display:flex;gap:10px;align-items:baseline}
.detail-heading h3{margin:0;font:18px Georgia,serif;overflow-wrap:anywhere}
#detail-range{font-size:10px;color:var(--muted)}
#detail-mark-now{border-color:#d7a49b;color:#9b392e;background:#fff6f1}
#detail-viewport{overflow:auto;position:relative;min-height:0;flex:1;scrollbar-width:thin}
#detail-score{width:max-content;min-width:100%;position:relative}
.detail-system{display:grid;grid-template-columns:var(--gutter) auto;position:relative;isolation:isolate}
.detail-axis{position:relative;height:48px;border-bottom:1px solid var(--line);background:var(--paper);touch-action:none}
.detail-axis button{position:absolute;top:12px;width:32px;height:27px;transform:translateX(-50%);padding:0;border:0;background:transparent;font-size:12px}
.detail-axis button.up{font-size:10px;color:var(--muted)}
.detail-axis button:first-of-type{transform:none;text-align:left;padding-left:4px}
.detail-axis button.active{background:var(--teal);color:white;border-radius:3px}
.detail-block-number{position:absolute;top:1px;font-size:8px;color:var(--muted);padding-left:3px}
.detail-name{position:sticky;left:0;z-index:4;text-align:right;background:#f4f6ef;border:0;border-radius:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 12px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-name.selected{box-shadow:inset -3px 0 var(--teal)}
.detail-reference,.detail-track{position:relative;border-bottom:1px solid var(--line);height:44px;touch-action:none;background-image:repeating-linear-gradient(90deg,#e0e7da 0 1px,transparent 1px var(--detail-half));cursor:crosshair}
.detail-reference{height:27px;background:#eef3eb;cursor:default}
.detail-reference span{position:absolute;top:4px;bottom:4px;background:#d9e7df;border:1px solid #9ab9a6;border-radius:2px;overflow:hidden;font-size:10px;padding:1px 7px;white-space:nowrap}
.detail-event{position:absolute;top:7px;height:30px;border:1px solid var(--cue-edge);background:var(--cue-bg);color:var(--cue-ink);padding:4px 8px;border-radius:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;touch-action:none;cursor:grab;user-select:none}
.detail-event.point{border-left:3px solid var(--cue-ink)}
.detail-event.selected{outline:2px solid var(--teal);z-index:2}
.detail-event .detail-edge{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize}
.detail-edge.start{left:0}.detail-edge.end{right:0}
.detail-event-label{pointer-events:none}
.detail-playhead{position:absolute;top:0;bottom:0;width:1px;background:#c15b3e;pointer-events:none;z-index:5}
.detail-status{min-height:30px;padding:7px 12px;display:flex;gap:12px;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}
#detail-info{flex:1;min-width:0}
.detail-status button{padding:0;border:0;color:var(--teal);background:none;font-size:10px}
#detail-event-fields,#detail-observation-fields{display:grid;gap:12px}
#detail-item-error:empty{display:none}
@media(max-width:760px){.detail-toolbar{flex-wrap:wrap;padding:7px}.detail-heading{flex-basis:60%;flex-wrap:wrap;gap:3px}.detail-heading h3{font-size:16px}.detail-status{padding:5px 7px}.run-dot span{max-width:80px}}
@media print{#cue-detail,.run-observation-strip,.run-label,#open-detail,.run-cue-picker,.run-dot-tooltip{display:none!important}}