* { box-sizing: border-box; }
body {
  margin: 0; background: #111; color: #eee;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #1c1c1c; border-bottom: 1px solid #333;
}
header h1 { margin: 0; font-size: 16px; letter-spacing: 0.5px; }
.io { display: flex; gap: 8px; align-items: center; }
.btn {
  display: inline-block; padding: 6px 12px; background: #2a2a2a;
  border: 1px solid #444; border-radius: 4px; color: #eee; cursor: pointer;
  font-size: 13px;
}
.btn:hover { background: #333; }
.status { color: #888; font-size: 12px; margin-left: 8px; }

main {
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px; padding: 12px;
  max-width: 1400px; margin: 0 auto;
}
.video-panel { grid-column: 1; grid-row: 1; }
.events      { grid-column: 1; grid-row: 2; }
.timeline    { grid-column: 1; grid-row: 3; }
.log         { grid-column: 1; grid-row: 4; }
.help        { grid-column: 2; grid-row: 1 / span 4; }

.video-stage { position: relative; line-height: 0; }
video {
  width: 100%; max-height: 60vh; background: #000; border-radius: 6px;
  display: block; object-fit: contain;
}
#overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; border-radius: 6px;
}
.togglebox {
  color: #bbb; font-size: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.togglebox input[type="checkbox"] { accent-color: #6ce676; }
.togglebox input[type="number"] {
  background: #222; border: 1px solid #444; color: #eee; padding: 2px 4px;
  border-radius: 3px; font-size: 12px;
}
.btn-export {
  background: #2a4d2a; color: #cfe9cf; border: 1px solid #4a7d4a;
  padding: 4px 10px; border-radius: 3px; font-size: 12px; cursor: pointer;
}
.btn-export:hover { background: #355c35; }
.cal-controls { display: inline-flex; gap: 4px; align-items: center; }
.btn-cal {
  background: #2a3d4d; color: #cfe1f0; border: 1px solid #4a6c8a;
  padding: 4px 10px; border-radius: 3px; font-size: 12px; cursor: pointer;
}
.btn-cal:hover { background: #355569; }
.btn-cal.active {
  background: #ffd479; color: #222; border-color: #b87a00;
}
.btn-cal-warn {
  background: #4d2a2a; color: #f0cfcf; border: 1px solid #8a4a4a;
  padding: 4px 10px; border-radius: 3px; font-size: 12px; cursor: pointer;
}
.btn-cal-warn:hover { background: #693535; }
.cal-select {
  background: #222; color: #ddd; border: 1px solid #444;
  font-size: 12px; padding: 2px 4px; border-radius: 3px;
}
.cal-window {
  display: inline-flex; gap: 3px; align-items: center;
  font-size: 11px; color: #aaa; padding-left: 4px;
  border-left: 1px solid #333; margin-left: 2px;
}
.cal-num {
  background: #222; color: #ddd; border: 1px solid #444;
  font-size: 11px; padding: 2px 3px; border-radius: 3px;
}
.btn-cal-mini {
  background: #2a3d4d; color: #cfe1f0; border: 1px solid #4a6c8a;
  padding: 1px 4px; border-radius: 2px; font-size: 10px; cursor: pointer;
}
.btn-cal-mini:hover { background: #355569; }
.lm-list {
  display: flex; flex-direction: column; gap: 2px;
}
.lm-row {
  display: grid; grid-template-columns: 16px 1fr auto auto;
  gap: 6px; align-items: center;
  padding: 5px 8px; background: #1d1d1d; border: 1px solid #2a2a2a;
  border-radius: 3px; font-size: 11px; cursor: pointer; color: #bbb;
}
.lm-row:hover { background: #262626; border-color: #444; color: #eee; }
.lm-row.set { background: #18301c; border-color: #2c5a37; color: #cdebd5; }
.lm-row.active { background: #4d3a17; border-color: #b87a00; color: #ffe9b3; }
.lm-marker {
  width: 10px; height: 10px; border-radius: 50%; background: #444;
  border: 1px solid #666;
}
.lm-marker.on { background: #6ce676; border-color: #2c5a37; }
.lm-label { line-height: 1.2; }
.lm-id    { font-family: monospace; color: #888; font-size: 10px; }
.lm-clear { color: #f57a7a; font-weight: bold; padding: 0 4px; cursor: pointer; }
.lm-clear:hover { color: #fff; background: #f57a7a; border-radius: 2px; }
.playback {
  display: flex; gap: 18px; align-items: center; margin-top: 8px;
  padding: 8px; background: #1a1a1a; border-radius: 4px; font-size: 13px;
}
.playback .time { font-variant-numeric: tabular-nums; color: #ccc; }
.playback .score b { color: #6ce676; font-size: 15px; }
.speed button {
  background: #252525; border: 1px solid #3a3a3a; color: #ccc;
  padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;
  margin-left: 2px;
}
.speed button.on { background: #3a5f8f; border-color: #5981b3; color: #fff; }

h2 { font-size: 13px; color: #bbb; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.8px; }
.hint { color: #666; font-size: 11px; font-weight: normal; text-transform: none; margin-left: 8px; }

.btn-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
#eventsDetails { }
#eventsDetails summary {
  cursor: pointer; padding: 4px 0; user-select: none;
  list-style: none;
}
#eventsDetails summary::-webkit-details-marker { display: none; }
#eventsDetails summary::before {
  content: "▸"; display: inline-block; width: 14px; color: #888;
  transition: transform 0.15s;
}
#eventsDetails[open] summary::before { content: "▾"; }
#eventsDetails .btn-grid { margin-top: 8px; }

.ev-btn {
  padding: 10px 8px; background: #242424; border: 1px solid #3a3a3a;
  border-radius: 4px; color: #eee; cursor: pointer; text-align: left;
  font-size: 12px; line-height: 1.3;
}
.ev-btn:hover { background: #2e2e2e; border-color: #555; }
.ev-btn kbd {
  display: inline-block; background: #111; border: 1px solid #444;
  border-radius: 3px; padding: 1px 6px; font-size: 11px; margin-right: 6px;
  color: #ffd479;
}
.ev-btn b { display: block; margin-top: 2px; color: #ddd; font-weight: 500; }

.timeline-bar {
  position: relative; height: 60px; background: #1a1a1a;
  border: 1px solid #2f2f2f; border-radius: 4px; overflow-x: auto; overflow-y: hidden;
  cursor: crosshair;
}
.tl-inner {
  position: relative; height: 100%; min-width: 100%;
}
.tl-marker {
  position: absolute; width: 3px; border-radius: 1px; cursor: pointer;
}
/* rally_start / rally_end are slightly wider so they're visible under serve/shot markers */
.tl-marker.c-rally_start, .tl-marker.c-rally_end { width: 5px; }
/* Offset serve markers right so they sit next to rally_start (not on top of it) */
.tl-marker.c-serve_P1, .tl-marker.c-serve_P2 { transform: translateX(6px); }
.tl-marker.lane-top { top: 2px;  height: 18px; }   /* Ground-truth lane */
.tl-marker.lane-mid { top: 2px;  bottom: 2px; }    /* User-created: full height */
.tl-marker.lane-bot { bottom: 2px; height: 18px; } /* Pipeline lane */
.tl-lane-label {
  position: absolute; left: 2px; font-size: 9px; color: #666;
  letter-spacing: 0.5px; pointer-events: none; z-index: 1;
}
.tl-lane-label.top { top: 2px; }
.tl-lane-label.bot { bottom: 2px; }
.tl-marker.selected { outline: 2px solid #ffd479; z-index: 2; }
.tl-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #ff4d4d;
  pointer-events: none; z-index: 3;
}

.event-log {
  max-height: 260px; overflow-y: auto; background: #1a1a1a;
  border: 1px solid #2f2f2f; border-radius: 4px;
}
.log-row {
  display: flex; gap: 10px; padding: 5px 10px; cursor: pointer;
  border-bottom: 1px solid #222; font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.log-row:hover { background: #222; }
.log-row.selected { background: #2d3a52; }
.log-row.current  {
  background: #1f3a2c;
  border-left: 3px solid #6ce676;
  padding-left: 7px;   /* compensate for 3px border so text doesn't shift */
}
.log-row.current.selected {
  background: #2a4a55;
}
.path {
  display: inline-block; font-size: 11px; padding: 0 4px;
  color: #ffd479; background: #2a2620; border-radius: 3px;
  font-weight: 600; letter-spacing: 0.3px;
}
.log-row .ts { color: #888; width: 60px; }
.log-row .type { flex: 1; color: #ddd; }
.log-row .meta { color: #888; }
.src-badge {
  display: inline-block; font-size: 9px; padding: 1px 4px;
  border-radius: 2px; background: #333; color: #bbb;
  letter-spacing: 0.5px; font-weight: 600;
}
.src-badge.src-gt { background: #3a5a3a; color: #c0f0c0; }   /* GT = greenish */
.src-badge.src-pp { background: #5a3a5a; color: #f0c0f0; }   /* Pipeline = purpleish */

/* Confidence badges */
.conf-badge {
  display: inline-block; font-size: 10px; padding: 1px 5px;
  border-radius: 8px; font-weight: 600; margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.conf-high   { background: #2d5a2d; color: #b3eab3; }
.conf-med    { background: #5a4a2d; color: #ead4a0; }
.conf-low    { background: #5a2d2d; color: #eaa5a5; }
.conf-reject { background: #8b1d1d; color: #fff;    }

.expand-hint { color: #666; font-size: 10px; margin-left: 4px; }
.log-row.selected .expand-hint { color: #ffd479; }

/* Side pane: event-check details */
.check-pane {
  background: #161616;
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 11px; color: #ddd;
}
.check-pane h3 {
  margin: 0 0 8px;
  font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: #ffd479;
}
.cp-header { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.cp-header .cp-time { font-variant-numeric: tabular-nums; color: #aaa; }
.cp-header .cp-type { color: #ccc; flex: 1; font-weight: 500; }
.cp-summary { color: #888; font-size: 10px; margin-bottom: 8px; }
.cp-checks { list-style: none; padding: 0; margin: 0; }
.cp-check {
  padding: 4px 0;
  border-top: 1px solid #222;
}
.cp-check:first-child { border-top: 0; }
.cp-check-head { display: flex; gap: 6px; align-items: center; }
.cp-sym { width: 14px; }
.cp-name {
  font-weight: 500; flex: 1;
  letter-spacing: 0.2px;
}
.cp-evidence {
  margin-left: 22px; margin-top: 2px;
  color: #888; font-size: 10px; line-height: 1.4;
}
.cp-pass .cp-name { color: #b8e8b8; }
.cp-fail .cp-name { color: #e8a5a5; }
.cp-n\/a .cp-name { color: #888; }
.cp-detail {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed #333;
  color: #aaa; font-size: 10px;
}
.cp-section {
  margin: 10px 0 4px;
  font-size: 10px; letter-spacing: 0.4px;
  text-transform: uppercase; color: #ffd479;
  border-bottom: 1px solid #333; padding-bottom: 2px;
}
.cp-features { list-style: none; padding: 0; margin: 0; }
.cp-feature {
  display: flex; gap: 8px; padding: 2px 0;
  border-top: 1px solid #222; font-size: 11px;
}
.cp-feature:first-child { border-top: 0; }
.cp-fname { flex: 1; color: #bbb; }
.cp-fval  { color: #b8e8b8; font-variant-numeric: tabular-nums; }
.empty-state {
  color: #666; font-size: 11px; padding: 8px; margin: 0;
  font-style: italic;
}

/* Match dropdown */
.match-picker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #bbb;
}
.match-picker select {
  background: #2a2a2a; color: #eee; border: 1px solid #444;
  border-radius: 4px; padding: 4px 8px; font-size: 13px;
  cursor: pointer;
}
.match-picker select:hover { background: #333; }

.help { background: #1a1a1a; padding: 12px; border-radius: 4px; border: 1px solid #2f2f2f; font-size: 12px; }
.help h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: #bbb; }
.help ul { margin: 0; padding-left: 14px; list-style: none; }
.help li { padding: 3px 0; color: #bbb; }
kbd {
  background: #111; border: 1px solid #3a3a3a; border-radius: 3px;
  padding: 1px 6px; font-size: 11px; color: #ffd479;
}

/* Event-type colors */
.c-rally_start { background: #8ce18c; }
.c-rally_end   { background: #ff6666; }
.c-serve_P1    { background: #7aa6e6; }
.c-serve_P2    { background: #e67aa6; }
.c-shot_P1     { background: #5b84bd; }
.c-shot_P2     { background: #bd5b84; }
/* doubles: Team B (far) gets warm tones */
.c-shot_P3     { background: #d97f3d; }
.c-shot_P4     { background: #3da9a9; }
.c-serve_P3    { background: #ff9a4d; }
.c-serve_P4    { background: #4dc7c7; }
.c-shuttle_landed_near { background: #e0c467; }
.c-shuttle_landed_far  { background: #c48767; }
.c-let         { background: #aaa; }