/* Edit (sync) mode: chalkboard, sync, markers, record button. */

/* ── Chalkboard (sync edit mode) ─────────────────────────── */
#chalkboard {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #3f6037;
  cursor: crosshair;
}

/* ── Sync edit mode ──────────────────────────────────────── */
.sync-mode .bar-tile {
  cursor: grab;
}
.sync-mode.panning,
.sync-mode.panning .bar-tile {
  cursor: grabbing;
}


.sync-mode .bar-tile.sync-over {
  outline-color: #fd7e14;
  background: #fff3cd;
}

/* ── Marker list ─────────────────────────────────────────── */
.marker-item {
  transition: background-color 0.15s;
}
.marker-item:hover {
  background-color: #f8f9fa;
}
.marker-item.active {
  background-color: rgba(200, 169, 107, .18);
  border-color: var(--gp-gold) !important;
}

/* ── Record button ───────────────────────────────────────── */
@keyframes blink-record {
  0%, 66%  { opacity: 1; }
  83%      { opacity: 0.2; }
  100%     { opacity: 1; }
}
#sync-mode-btn.recording {
  animation: blink-record 1.2s linear infinite;
}
.navbar .view-modes .ctrl-btn                       { color: #aaa; width: 3rem; height: 3rem; font-size: 1.5rem; }
.navbar .view-modes .ctrl-btn:hover:not(:disabled)  { color: #fff; background: rgba(255,255,255,.1); }
.navbar #sync-mode-btn.active                       { color: #ff4040; }
.navbar #study-mode-btn.active,
.navbar #performance-mode-btn.active                { color: #fff; }

/* Light navbar variant: invert active/hover so icons stay readable on a light background. */
#main-nav.nav-light .view-modes .ctrl-btn:hover:not(:disabled)  { color: #1c1c1e; background: rgba(0,0,0,.07); }
#main-nav.nav-light #study-mode-btn.active,
#main-nav.nav-light #performance-mode-btn.active                { color: #1c1c1e; }
.view-modes-sep {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  background: rgba(255,255,255,0.3);
  margin: 0 0.5rem;
}

/* ── Repeat-capture mode: button glows orange while waiting for anchor ── */
#repeat-capture-btn.active { color: #fd7e14; }

/* ── Sync-click acknowledgement flash (whole button) ──────────────────── */
@keyframes sync-ack {
  0%   { color: #dc3545; }
  100% { color: currentColor; }
}
#sync-mode-btn.sync-ack {
  animation: sync-ack 0.35s ease-out forwards;
}