/* style — the Luma keyframe timeline and adherence.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- Luma Modify keyframe timeline ---------- */
#luma-kf { margin-top: 10px; }
.kf-ticks {
  height: 8px; margin-bottom: 2px;
  background-image: radial-gradient(circle, var(--border-dash) 1.4px, transparent 1.6px);
  background-size: 24px 8px; background-position: center; background-repeat: repeat-x;
}
.kf-strip {
  position: relative; display: flex; height: 50px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; cursor: copy; background: #1d1d20;
}
.kf-strip img {
  flex: 1 1 0; min-width: 0; height: 100%;
  object-fit: cover; opacity: .6; pointer-events: none;
}
.kf-strip:hover img { opacity: .8; }
.kf-mark {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), .8);
  pointer-events: none;
}
.kf-mark::after {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--accent); border-radius: 0 0 3px 3px;
}
/* frame-snapped hover cursor */
.kf-cursor {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, .9); pointer-events: none; z-index: 2;
}
.kf-cursor-lab {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .85); color: #fff; border-radius: 3px;
  font-size: 8.5px; font-weight: 700; padding: 2px 5px; white-space: nowrap;
}
.kf-row { position: relative; height: 68px; margin-top: 7px; }
.kf-chip {
  position: absolute; top: 0; width: 84px; margin-left: -42px;
  max-width: 100%; cursor: grab;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--card);
}
.kf-chip:active, .kf-chip.dragging { cursor: grabbing; }
.kf-chip:hover, .kf-chip.dragging { border-color: var(--accent); z-index: 3; }
.kf-chip.dragover { border-color: var(--accent); background: var(--accent-soft); }
/* The chip a Ctrl+V will land on. Held rather than momentary, because the
   whole point is knowing where the paste goes BEFORE pressing the keys. */
.kf-chip.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); z-index: 3; }
.kf-chip img { width: 100%; height: 47px; object-fit: cover; display: block; pointer-events: none; }
.kf-chip .kf-lab {
  font-size: 8px; text-align: center; padding: 3px 4px; color: var(--text-dim);
  background: rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden;
}
/* hover action bar — sits over the thumb, matches the app's pill buttons */
.kf-acts {
  position: absolute; top: 0; left: 0; right: 0; height: 47px;
  display: none; align-items: center; justify-content: center; gap: 6px;
  background: var(--scrim-light);
}
.kf-chip:hover .kf-acts { display: flex; }
.kf-chip.dragging .kf-acts { display: none; }
.kfa {
  width: 22px; height: 22px; border: none; border-radius: 3px; cursor: pointer;
  background: rgba(0, 0, 0, .75); color: #fff; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.kfa:hover { background: var(--accent); }
.kfa.danger:hover { background: var(--red, #e5484d); }

/* ---------- Adherence (Luma Modify) ---------- */
/* Fixed width — doesn't stretch with the panel, like the Luma platform card */
.adh {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card);
  width: 100%; max-width: 340px;
}
.adh-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--text);
}
.adh-auto {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 9px; letter-spacing: 1.2px; color: var(--text-dim);
}
.adh-body { margin-top: 9px; }
.adh-body.dim { opacity: .35; pointer-events: none; }
.adh-dial { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.adh-lab { font-size: 10.5px; font-weight: 600; color: var(--text); min-width: 62px; }
.adh-range { flex: 1; min-width: 0; }
.adh-val {
  min-width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: #fff; color: #111; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.adh-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.adh-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
  background: none; color: var(--text-dim); font-size: 10px; font-weight: 600;
  padding: 4px 11px;
}
.adh-chip svg { flex: none; }
.adh-chip.on { background: #fff; color: #111; border-color: #fff; }
.adh-sel {
  width: auto; font-size: 10px; padding: 4px 8px; border-radius: 3px;
}