/*
 * footage_picker.css — <footage-picker> right-overlay panel.
 *
 * Wave 19A · ~/Claude Code/IDEAS-CREATOR/[x] - Frontend/_specs/migration_orchestration.md
 *
 * Replaces the centred <swap-modal> with a right-side overlay that
 * slides in over whatever's behind it (chat panel, cv-panel, anything).
 * The picker is mounted as a SIBLING of <surface-shell> at body level
 * so its stacking context isn't constrained by the shell's grid.
 *
 * BEM-style class names (`footage-picker__<part>--<modifier>`). Light
 * DOM (no shadow root); rules apply via global selectors scoped to the
 * footage-picker element.
 */

/* ============================================================
   HOST — full-viewport fixed overlay; toggled by data-open
   ============================================================ */
footage-picker {
  position: fixed;
  inset: 0;
  z-index: 60;          /* above swap-modal (50) so they don't clash */
  pointer-events: none; /* backdrop+panel re-enable below */
}

footage-picker[data-open="false"] {
  /* fully invisible AND non-interactive while closed */
  pointer-events: none;
}

footage-picker[data-open="true"] {
  pointer-events: auto;
}

/* ============================================================
   BACKDROP — soft dim, blocks pointer outside the panel
   ============================================================ */
footage-picker .footage-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
footage-picker[data-open="true"] .footage-picker__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   PANEL — slides in from the right
   ============================================================ */
footage-picker .footage-picker__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Wave 19A2 P5 — panel widens to 92vw (capped at 1600px) so search
     results have generous room. On narrow viewports the existing
     @media rule still pins to 100vw. */
  width: 92vw;
  max-width: 1600px;
  background: var(--surface, #FFFFFF);
  box-shadow: -12px 0 32px rgba(31, 27, 22, 0.18);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 200ms ease;
  pointer-events: auto;
}
footage-picker[data-open="true"] .footage-picker__panel {
  transform: translateX(0);
}

@media (max-width: 600px) {
  footage-picker .footage-picker__panel {
    width: 100vw;
  }
}

/* ============================================================
   HEADER — title + close button
   ============================================================ */
footage-picker .footage-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 12px 22px;
  border-bottom: 1px solid var(--ink-ghost, #ECE3D8);
}
footage-picker .footage-picker__title {
  font-family: var(--display, var(--body, sans-serif));
  font-weight: 600;
  font-size: 16px;
  color: var(--ink, #1F1B16);
}
footage-picker .footage-picker__close {
  border: none;
  background: transparent;
  color: var(--ink-muted, #7A7269);
  font-size: 24px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
footage-picker .footage-picker__close:hover {
  background: var(--canvas-deep, #F4ECE0);
  color: var(--ink, #1F1B16);
}

/* ============================================================
   SEARCH BAR — input + show-description checkbox
   ============================================================ */
footage-picker .footage-picker__searchbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--ink-ghost, #ECE3D8);
}
footage-picker .footage-picker__query {
  flex: 1 1 auto;
  border: 1px solid var(--ink-ghost, #ECE3D8);
  background: var(--canvas, #FBF7F1);
  color: var(--ink, #1F1B16);
  padding: 8px 12px;
  border-radius: var(--radius, 8px);
  font-family: var(--body, sans-serif);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
footage-picker .footage-picker__query:focus {
  border-color: var(--accent, #C5733C);
  background: var(--surface, #FFFFFF);
}
footage-picker .footage-picker__desc-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--ink-muted, #7A7269);
  white-space: nowrap;
  cursor: pointer;
}
footage-picker .footage-picker__desc-toggle input {
  cursor: pointer;
}

/* ============================================================
   ACTIONS — three search buttons
   ============================================================ */
footage-picker .footage-picker__actions {
  display: flex;
  gap: 8px;
  padding: 10px 22px 8px 22px;
  flex-wrap: wrap;
}
footage-picker .footage-picker__btn {
  flex: 1 1 auto;
  border: 1px solid var(--ink-ghost, #ECE3D8);
  background: var(--surface, #FFFFFF);
  color: var(--ink, #1F1B16);
  padding: 6px 10px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
footage-picker .footage-picker__btn:hover:not([disabled]) {
  background: var(--accent-tint, #FBE6D2);
  border-color: var(--accent, #C5733C);
}
footage-picker .footage-picker__btn[disabled] {
  opacity: 0.4;
  cursor: progress;
}

/* ============================================================
   STATUS LINE — "Searching..." / "N results" / errors
   ============================================================ */
footage-picker .footage-picker__status {
  padding: 4px 22px 8px 22px;
  min-height: 18px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--ink-muted, #7A7269);
}
footage-picker .footage-picker__status.is-loading {
  color: var(--accent, #C5733C);
}
footage-picker .footage-picker__status.is-error {
  color: #b94545;
}
footage-picker .footage-picker__status.is-empty {
  color: var(--ink-muted, #7A7269);
  font-style: italic;
}

/* ============================================================
   RESULTS — 2-column grid; cards scroll inside the panel
   ============================================================ */
footage-picker .footage-picker__results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 22px 16px 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-content: start;
}

/* ============================================================
   EMPTY STATE (Wave 19A2 P6) — placeholder when no results
   ============================================================ */
footage-picker .footage-picker__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  background: var(--canvas, #FBF7F1);
  border: 1px dashed var(--ink-ghost, #ECE3D8);
  border-radius: var(--radius, 8px);
  margin-top: 8px;
}
footage-picker .footage-picker__empty-title {
  font-family: var(--display, var(--body, sans-serif));
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink, #1F1B16);
}
footage-picker .footage-picker__empty-body {
  font-family: var(--body, sans-serif);
  font-size: 12px;
  color: var(--ink-muted, #7A7269);
  line-height: 1.45;
  max-width: 540px;
}

/* ============================================================
   ACTIONS — refresh: tighter spacing + better-aligned row (P6)
   ============================================================
   The original .footage-picker__actions used flex-wrap with flex: 1 1 auto
   on each button, which on narrow widths produced uneven button widths.
   Override the children to share equal width via flex-basis: 0 so the
   row reads as three peers. */
footage-picker .footage-picker__actions {
  gap: 10px;
}
footage-picker .footage-picker__actions .footage-picker__btn {
  /* Wave 19A2-FIX P6 — was flex: 1 1 0 which gave each child a 0 base
     and let the longer label ("Find Alternatives") overflow on narrow
     widths. Use flex: 1 1 auto + min-width: 0 so the text can wrap
     gracefully but the buttons share available width by their content
     baseline (no overflow, no cut text). */
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  padding: 8px 12px;
}

/* Wave 19B — secondary embed-mode row. Smaller, less visually loud
   than the primary actions row so the layout stays calm during A/B. */
footage-picker .footage-picker__actions--embed {
  padding: 0 22px 8px 22px;
  gap: 6px;
}
footage-picker .footage-picker__actions--embed .footage-picker__btn {
  font-size: 11px;
  padding: 5px 8px;
  color: var(--ink-muted, #6B5E50);
  background: var(--canvas, #FBF7F1);
  border-color: var(--ink-ghost, #ECE3D8);
}
footage-picker .footage-picker__actions--embed .footage-picker__btn:hover:not([disabled]) {
  background: var(--accent-tint, #FBE6D2);
  color: var(--ink, #2A2018);
}

/* ============================================================
   CARD — one result. Frame around when selected; pill labels state.
   ============================================================ */
footage-picker .footage-picker__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--canvas, #FBF7F1);
  border-radius: var(--radius, 8px);
  padding: 10px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
footage-picker .footage-picker__card:hover {
  background: var(--surface, #FFFFFF);
  transform: translateY(-1px);
}
footage-picker .footage-picker__card--selected {
  border-color: var(--accent, #C5733C);
  background: var(--accent-tint, #FBE6D2);
}
footage-picker .footage-picker__card--selected:hover {
  background: var(--accent-tint, #FBE6D2);
  transform: none;
}

/* ============================================================
   FRAME — thumbnail container; uses .cell-frame's aspect rules
   ============================================================ */
footage-picker .footage-picker__frame {
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--canvas-deep, #F4ECE0);
}
footage-picker .footage-picker__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
footage-picker .footage-picker__missing {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ink-muted, #7A7269);
}

/* ============================================================
   NAME — mono-cased library row name
   ============================================================ */
footage-picker .footage-picker__name {
  font-size: 10.5px;
  color: var(--ink-muted, #7A7269);
  word-break: break-all;
  line-height: 1.3;
}

/* ============================================================
   PILL — "current" / "picked" badge
   ============================================================ */
footage-picker .footage-picker__pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--ink-ghost, #ECE3D8);
  color: var(--ink-muted, #7A7269);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  width: max-content;
}
footage-picker .footage-picker__pill--current {
  background: var(--accent, #C5733C);
  color: var(--surface, #FFFFFF);
}
footage-picker .footage-picker__pill--picked {
  background: var(--accent-deep, #8E4D26);
  color: var(--surface, #FFFFFF);
}

/* ============================================================
   DESC — full description body. Hidden by default; shown when
   data-show-desc="true" on the host.
   ============================================================ */
footage-picker .footage-picker__desc {
  display: none;
  /* Wave 19A2 P5 — body font (not italic serif). Full descriptions are
     long structured prose; the italic serif made them hard to scan.
     pre-wrap preserves intentional line breaks. max-height bumped so
     readers see substantially more before scrolling.
     Wave 19A2-FIX P5 — word-break: break-word + overflow-wrap: anywhere
     so unbroken strings (long URLs, generated IDs) wrap inside the
     card width instead of overflowing the picker panel. */
  font-family: var(--body, sans-serif);
  font-size: 11.5px;
  color: var(--ink-soft, #4A433B);
  line-height: 1.4;
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
footage-picker[data-show-desc="true"] .footage-picker__desc {
  display: block;
}

/* ============================================================
   FOOTER — Cancel + Accept
   ============================================================ */
footage-picker .footage-picker__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px 18px 22px;
  border-top: 1px solid var(--ink-ghost, #ECE3D8);
  background: var(--surface, #FFFFFF);
}
footage-picker .footage-picker__cancel {
  border: 1px solid var(--ink-ghost, #ECE3D8);
  background: transparent;
  color: var(--ink-muted, #7A7269);
  padding: 7px 16px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
footage-picker .footage-picker__cancel:hover {
  background: var(--canvas-deep, #F4ECE0);
  color: var(--ink, #1F1B16);
}
footage-picker .footage-picker__accept {
  border: 1px solid var(--accent, #C5733C);
  background: var(--accent, #C5733C);
  color: var(--surface, #FFFFFF);
  padding: 7px 18px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
footage-picker .footage-picker__accept:hover:not([disabled]) {
  background: var(--accent-deep, #8E4D26);
  border-color: var(--accent-deep, #8E4D26);
}
footage-picker .footage-picker__accept[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}