/* frame_context.css — the movement strip under the canvas.
 *
 * Sits directly beneath the canvas because it is about the image above it, not
 * about the task in the right rail. Quiet at rest: a single button until somebody
 * actually asks for motion, since most pose frames read fine on their own. */

/* ONE ROW, FIXED HEIGHT, ALWAYS. This bar is a sibling of the canvas wrap in a
   flex column, so any change to its height re-lays-out the canvas above it — a
   wrapping bar meant the picture resized itself the moment the label grew or the
   "Back to my frame" button appeared. Controls that come and go are rendered
   once and hidden, and nothing here is allowed to wrap. */
.fc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 34px;
  padding: 5px 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 12px;
}

.fc-bar > button { flex: 0 0 auto; }

.fc-scrub {
  flex: 1 1 120px;
  min-width: 40px;
  accent-color: var(--accent);
}

/* ── where has this clip already been labeled ──────────────────────────── */
/* The slider is the one control that already means "somewhere in this clip", so
   the answer belongs on it. The wrapper exists only to give the marks a
   positioning context that is exactly the slider's own width — it inherits the
   slider's flex sizing so the bar's ONE ROW, FIXED HEIGHT rule above still
   holds, and the marks are absolute, so nothing here can move the canvas. */
.fc-scrub-wrap {
  position: relative;
  flex: 1 1 120px;
  min-width: 40px;
  display: flex;
  align-items: center;
}

.fc-scrub-wrap > .fc-scrub {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* pointer-events NONE on the layer: the slider has to stay grabbable across its
   whole track, marks or no marks. Only the ticks themselves take a click. */
/* The marks sit ON the slider's track, the way a video editor marks chapters:
   a thin red sliver per labeled frame, overlaying the track itself rather than
   hanging under it. The layer is centred on the input's track line. */
.fc-marks {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

.fc-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: #ef4444;
  /* NONE, deliberately: a sliver that took the pointer sat exactly where the
     thumb is grabbed and stole the drag. The ticks are signposts; the slider is
     the control. */
  pointer-events: none;
}

/* On a labeled frame the THUMB is the mark: it turns red and the sliver under
   it hides, so nothing draws through the ball the labeler is holding. */
.fc-scrub.fc-on-mark { accent-color: #ef4444; }
.fc-mark.fc-under { visibility: hidden; }

/* An ROI note somebody left on this frame — a question, not an annotation. */
.fc-mark-roi { background: var(--obs-color, #c084fc); }

/* Another rater's row. Visible, never loud: you should be able to SEE that a
   frame is covered without being steered away from it, because that overlap is
   the thing a multi-rater design is paying for. */
.fc-mark-other {
  background: #ef4444;
  opacity: 0.45;
}

/* Your own work: the red sliver. Declared last on purpose — where kinds stack,
   `mine` wins the fill, because "have I been here" is the question the labeler
   is actually asking before they start. */
.fc-mark-mine {
  background: #ef4444;
  opacity: 1;
}

/* The transport is the keyboard; this says so without shouting. */
.fc-keys {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: nowrap;
}

.fc-speed {
  flex: 0 0 auto;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Shrinks before the transport does: losing the end of a caption costs less than
   losing the pause button. */
.fc-label {
  /* FIXED basis, not auto. The label shares a flex row with the scrub slider,
     and with auto width every digit change ("frame 76" vs "frame 159") resized
     the label — and the slider absorbed the difference, moving the THUMB under
     the pointer mid-drag. The drag then jittered, firing more ticks: the whole
     bar visibly shook, worst on annotated frames where the label swaps format
     entirely. Measured live: label 154.2↔155.4px, slider 1025.2↔1024.1px, every
     tick. A fixed basis (may shrink on narrow screens, never oscillates) and
     tabular digits make the numbers change IN PLACE. */
  flex: 0 1 16em;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

/* Off the pinned frame: state it plainly. The labeler is looking at one frame and
   annotating another, and that must never be something they have to infer. */
.fc-off { color: var(--kp-color, #fdcb6e); }
.fc-off b { color: var(--text); }

/* A quiet border while looking, so "I cannot draw right now" has a visible cause
   rather than feeling like the tool broke. */
.fc-looking {
  border-top-color: var(--kp-color, #fdcb6e);
  box-shadow: inset 0 2px 0 -1px var(--kp-color, #fdcb6e);
}

/* ── what this annotation is for (panel_ui.js) ─────────────────────────── */
/* On the image, not in the right rail: "what am I being asked to do" is a
   question about the thing you are looking at. */

.mission-banner {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.mission-banner-task {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.mission-banner[data-task="pose"] .mission-banner-task { color: var(--kp-color, #fdcb6e); }
.mission-banner[data-task="scars"] .mission-banner-task { color: var(--scar-color, #ff7675); }

.mission-banner-what { font-size: 11px; color: var(--text-muted); }

/* The strip shows a 640x360 scrub proxy; settling loads the real 1920x1080 frame.
   That 3x jump reads as "a filter got applied" unless something names it. */
.fc-preview {
  opacity: .55;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 5px;
  cursor: help;
}