/* ============================================================
   EvilynAI — Bird-track labelling
   ============================================================
   A full-surface overlay: backlog on one screen, the classify
   working surface on the other. Screen real estate follows the
   decision: the current frame large, the strip beneath it, the
   picker beside it, and an action bar pinned so the record
   control — and the pre-fill notice next to it — can never
   scroll out of view.
   ============================================================ */

.bird-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8,6,10,0.88);
  backdrop-filter: blur(6px);
  display: flex; align-items: stretch; justify-content: center;
  padding: var(--space-4);
  animation: birdFade var(--dur-base) var(--ease-out);
}
@keyframes birdFade { from { opacity: 0; } to { opacity: 1; } }

.bird-shell {
  flex: 1; min-width: 0; max-width: 1560px;
  display: flex; flex-direction: column;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

/* ── header ───────────────────────────────────────────────── */
.bird-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(168,24,28,0.07), transparent);
}
.bird-head__titlewrap { display: inline-flex; align-items: center; gap: 9px; }
.bird-head__titlewrap [data-icon] { color: var(--crimson-300); }
.bird-head__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--fg-1); }
.bird-head__title em { color: var(--accent); font-style: italic; }
.bird-head__run {
  font-family: var(--font-ui); font-size: 11.5px; color: var(--fg-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.bird-switch {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--fg-3);
}
.bird-switch input { accent-color: var(--accent); }
.bird-switch:hover { color: var(--fg-2); }

.bird-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ── backlog ──────────────────────────────────────────────── */
.bird-backlog { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: var(--space-4); gap: var(--space-4); }

.bird-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bird-toolbar__spacer { flex: 1; }

.bird-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.bird-seg__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--fg-3);
  padding: 5px 13px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bird-seg__btn:hover { color: var(--fg-1); background: rgba(255,255,255,0.03); }
.bird-seg__btn.is-on { background: var(--accent-soft); color: var(--crimson-200); }

.bird-camera { display: inline-flex; align-items: center; gap: 4px; }
.bird-input {
  background: var(--ink-950); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg-2); font-family: var(--font-ui); font-size: 12px; padding: 5px 9px;
}
.bird-input:focus { outline: none; border-color: var(--accent); }
.bird-textarea { width: 100%; font-family: var(--font-body); resize: vertical; }

.bird-rows { display: flex; flex-direction: column; gap: 6px; }
.bird-row {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 9px 12px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bird-row:hover { border-color: var(--border-warm); background: rgba(168,24,28,0.05); }
.bird-row__hero {
  flex: 0 0 auto; width: 84px; height: 62px;
  background: var(--ink-1000); border-radius: var(--radius-sm); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bird-row__main { flex: 1; min-width: 0; }
.bird-row__id { font-size: 12px; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bird-row__meta { font-family: var(--font-ui); font-size: 11px; color: var(--fg-4); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
.bird-row__dot { opacity: 0.5; }
.bird-row__guess { font-style: italic; }
.bird-row__guess em { color: var(--fg-3); font-style: normal; }
.bird-row__tail { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; color: var(--fg-4); }

.bird-tag {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 8px; color: var(--fg-4);
  display: inline-flex; align-items: center; gap: 4px;
}
.bird-tag--decided { color: var(--success); border-color: rgba(107,138,90,0.45); }
.bird-tag--split { color: var(--warning); border-color: rgba(201,148,43,0.45); }

.bird-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); }
.bird-pager__count { font-family: var(--font-ui); font-size: 11.5px; color: var(--fg-4); }
.bird-pager__vocab { opacity: 0.75; }

.bird-vocab-warn { margin-bottom: calc(var(--space-2) * -1); }
.bird-loading { display: flex; align-items: center; gap: 9px; color: var(--fg-3); font-family: var(--font-ui); font-size: 12.5px; padding: var(--space-7) 0; justify-content: center; }
.bird-loading [data-icon] { animation: birdSpin 1.1s linear infinite; }
@keyframes birdSpin { to { transform: rotate(360deg); } }

/* ── notices ──────────────────────────────────────────────── */
.bird-notice {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elev-2); padding: var(--space-5);
  text-align: center; max-width: 620px; margin: var(--space-6) auto;
}
.bird-notice__icon { color: var(--fg-4); margin-bottom: var(--space-2); }
.bird-notice__title { font-family: var(--font-display); font-size: 21px; color: var(--fg-1); }
.bird-notice__body { font-size: 13.5px; color: var(--fg-3); margin-top: var(--space-2); }
.bird-notice__actions { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; }
.bird-notice--err  { border-color: rgba(168,24,28,0.4); }
.bird-notice--err  .bird-notice__icon { color: var(--danger); }
.bird-notice--warn { border-color: rgba(201,148,43,0.4); }
.bird-notice--warn .bird-notice__icon { color: var(--warning); }
.bird-notice--ok   { border-color: rgba(107,138,90,0.4); }
.bird-notice--ok   .bird-notice__icon { color: var(--success); }
.bird-recorded { font-size: 11.5px; color: var(--fg-3); margin-top: var(--space-3); word-break: break-word; }

/* ── classify ─────────────────────────────────────────────── */
.bird-classify {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "left right" "bar bar";
  gap: 0;
}
.bird-classify__left  { grid-area: left;  min-width: 0; display: flex; flex-direction: column; padding: var(--space-4); gap: var(--space-3); overflow: hidden; }
.bird-classify__right { grid-area: right; min-width: 0; border-left: 1px solid var(--border); padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }

/* The stage. Crops are 120–400px on the long axis, so they are upscaled into a
   fixed box — `contain`, never `cover`: cropping the evidence further could
   hide the wing bar the call turns on. */
.bird-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--ink-1000); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.bird-stage__viewport { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.bird-stage__inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform-origin: center; transition: transform var(--dur-fast) var(--ease-out); }
/* width/height + `contain` rather than max-* : the crops are 120–400px on the
   long axis, so max-* would leave them at native size — postage stamps on a
   high-DPI screen. `contain` scales them up into the box while keeping each
   frame's own aspect ratio, and never crops the evidence further. */
.bird-stage__inner .crop { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.bird-stage--empty { background: var(--ink-950); }
.bird-stage__bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3);
  padding: 6px 10px; border-top: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 11px; color: var(--fg-4);
}
.bird-stage__file { color: var(--fg-2); font-size: 11.5px; }
.bird-stage__zoom { min-width: 40px; text-align: center; }

.bird-mini {
  appearance: none; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--fg-3); cursor: pointer;
  font-family: var(--font-ui); font-size: 10.5px; padding: 2px 7px;
  display: inline-flex; align-items: center; gap: 4px;
}
.bird-mini:hover { color: var(--fg-1); border-color: var(--border-warm); }
.bird-mini.is-on { color: var(--crimson-200); border-color: var(--crimson-500); background: var(--accent-soft); }
.bird-mini:disabled { opacity: 0.35; cursor: default; }
.bird-mini--keys { align-self: flex-start; }

/* The strip: already sampled and already ordered by the producer. Never
   re-sampled, never reordered. Selecting a cell moves `decided_from`. */
.bird-strip { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.bird-strip__cell {
  position: relative; flex: 0 0 auto; width: 86px; height: 64px; cursor: pointer;
  background: var(--ink-1000); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0;
}
.bird-strip__cell:hover { border-color: var(--border-warm); }
.bird-strip__cell.is-current { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.bird-strip__n {
  position: absolute; left: 3px; bottom: 2px;
  font-family: var(--font-ui); font-size: 9.5px; color: var(--fg-2);
  background: rgba(8,6,10,0.75); border-radius: 2px; padding: 0 4px;
}
.bird-strip__hero { position: absolute; right: 3px; top: 1px; font-size: 11px; color: var(--warning); text-shadow: 0 0 4px rgba(0,0,0,0.9); }

.bird-trackmeta {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 11px; color: var(--fg-4);
}
.bird-trackmeta__note { font-style: italic; }

/* ── crops ────────────────────────────────────────────────── */
.crop { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.crop--pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
.crop--loading { width: 100%; height: 100%; background: linear-gradient(100deg, var(--ink-900), var(--ink-800), var(--ink-900)); background-size: 200% 100%; animation: birdShimmer 1.3s var(--ease-in-out) infinite; }
@keyframes birdShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.crop--failed { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fg-4); }

/* ── picker ───────────────────────────────────────────────── */
.bird-picker { display: flex; flex-direction: column; gap: var(--space-4); }
.bird-pass { display: flex; flex-direction: column; gap: 7px; }
.bird-pass__label { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.bird-pass__hint { font-family: var(--font-body); font-style: italic; font-size: 11.5px; color: var(--fg-4); }
.bird-pass__desc { font-family: var(--font-body); font-size: 11.5px; color: var(--fg-4); line-height: 1.5; }

.bird-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--fg-3); font-size: 12px; padding: 4px 11px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bird-chip:hover { border-color: var(--border-warm); color: var(--fg-1); }
.bird-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--crimson-100); }
.bird-chip--sm { font-size: 11px; padding: 3px 9px; }
.bird-chip.is-carried { cursor: default; border-style: dashed; color: var(--fg-4); }
.bird-chip__x { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 2px; display: inline-flex; }
.bird-chip__x:hover { color: var(--crimson-300); }
.bird-chip kbd, .bird-keymap kbd, .btn kbd, .bird-action kbd {
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1;
  border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px;
  color: var(--fg-4); background: rgba(255,255,255,0.03);
}

.bird-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 7px; }
.bird-action {
  text-align: left; cursor: pointer; padding: 9px 11px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bird-action:hover { border-color: var(--border-warm); }
.bird-action.is-on { border-color: var(--accent); background: var(--accent-soft); }
.bird-action__head { display: flex; align-items: center; gap: 6px; }
.bird-action__title { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--fg-1); }
.bird-action__blurb { font-family: var(--font-body); font-size: 11px; color: var(--fg-4); margin-top: 3px; line-height: 1.45; }
.bird-action__name { font-size: 10px; color: var(--fg-4); opacity: 0.7; margin-top: 4px; }

.bird-attr { display: flex; flex-direction: column; gap: 5px; margin-top: var(--space-2); }
.bird-attr__key { font-size: 11px; color: var(--fg-3); }
.bird-attr--carried { border-left: 2px solid var(--border-warm); padding-left: var(--space-3); }

/* ── advanced drawer ──────────────────────────────────────── */
.bird-drawer { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elev-2); }
.bird-drawer__toggle {
  width: 100%; display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: transparent; border: 0; padding: 9px 11px;
  font-family: var(--font-ui); font-size: 12px; color: var(--fg-3);
}
.bird-drawer__toggle:hover { color: var(--fg-1); }
.bird-drawer__body { padding: 0 11px 12px; display: flex; flex-direction: column; gap: var(--space-4); }
.bird-field { display: flex; flex-direction: column; gap: 6px; }

/* ── the pinned action bar ────────────────────────────────── */
.bird-bar {
  grid-area: bar;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(168,24,28,0.05));
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.bird-bar__row { display: flex; align-items: flex-end; gap: var(--space-5); }
.bird-bar__summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bird-bar__none { font-family: var(--font-ui); font-size: 12.5px; color: var(--fg-4); }
.bird-bar__verdict { font-size: 15px; color: var(--crimson-100); }
.bird-bar__split { font-family: var(--font-body); font-size: 11.5px; color: var(--warning); }
.bird-bar__attrs { font-size: 11px; color: var(--fg-3); }
.bird-bar__attest { font-family: var(--font-body); font-style: italic; font-size: 11.5px; color: var(--fg-4); }
.bird-bar__attest .mono { font-style: normal; color: var(--fg-2); }
.bird-bar__blocked { font-family: var(--font-ui); font-size: 11.5px; color: var(--warning); }
.bird-bar__ctl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-3); }
.bird-bar__run { font-family: var(--font-ui); font-size: 11px; color: var(--fg-4); }

.btn--record { font-size: 13px; padding: 9px 18px; border-color: var(--crimson-500); color: var(--crimson-100); background: rgba(168,24,28,0.16); }
.btn--record:not(:disabled):hover { background: rgba(168,24,28,0.28); }

/* The pre-fill notice sits next to the record control, not only at the top of
   the picker: anything that can scroll out of view will, and this will not. */
.bird-prefill {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--warning);
  border: 1px dashed rgba(201,148,43,0.45); border-radius: var(--radius-sm);
  background: rgba(201,148,43,0.07); padding: 6px 10px;
}
.bird-errors {
  list-style: none; margin: 0; padding: 8px 12px;
  border: 1px solid rgba(168,24,28,0.4); border-radius: var(--radius-sm);
  background: rgba(168,24,28,0.08); color: var(--crimson-200);
  font-family: var(--font-ui); font-size: 11.5px; display: flex; flex-direction: column; gap: 3px;
}
.bird-undo {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--fg-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev-2); padding: 6px 10px;
}
.bird-undo [data-icon] { color: var(--success); }
.bird-undo__note { color: var(--fg-4); font-style: italic; }
.bird-undo--standalone { margin-bottom: var(--space-2); }

/* ── key map ──────────────────────────────────────────────── */
.bird-keymap { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elev-2); padding: 10px 12px; }
.bird-keymap__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bird-keymap__list { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0; align-items: baseline; }
.bird-keymap__list dt { display: flex; gap: 3px; flex-wrap: wrap; }
.bird-keymap__list dd { margin: 0; font-family: var(--font-ui); font-size: 11px; color: var(--fg-4); }

/* ── narrow screens ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .bird-classify { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "left" "right" "bar"; overflow-y: auto; }
  .bird-classify__left { overflow: visible; }
  .bird-classify__right { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
  .bird-stage { min-height: 46vh; }
}