/**
 * media-picker.css — the "choose an image from your library" overlay
 * (window.CBMediaPicker, js/media-picker.js — Video Studio R2.1).
 * Same explicit palette as video-tools.css (mounted outside the outreach
 * dashboard's token scope). It is ALWAYS the front-most surface when open —
 * it is opened FROM another surface (the Polish tray at 4600, or the Launch
 * Studio "Share preview"/Manage modals at .ls-enq/.ls-cmodal = 100060), so it
 * must sit above the highest of those. Hence z-index 100080 (> 100060 modals,
 * > 4600 tray). The global app toast sits just above this (100090) so a
 * "Saved"/error toast is still readable while the picker is open.
 */

.cbmp-overlay {
  position: fixed; inset: 0; z-index: 100080;
  background: rgba(13, 8, 25, 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cbmp-modal {
  background: #ffffff; color: #15172b;
  width: 100%; max-width: 720px; max-height: min(640px, calc(100vh - 40px));
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(13, 8, 25, 0.35);
  display: flex; flex-direction: column;
  animation: cbmp-pop 0.2s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes cbmp-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cbmp-modal { animation: none; } }

.cbmp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 10px; flex: none;
}
.cbmp-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cbmp-close {
  flex: none; border: none; background: transparent; font-size: 22px; line-height: 1;
  color: #9ca3af; cursor: pointer; min-width: 32px; min-height: 32px;
}
.cbmp-close:hover { color: #374151; }

.cbmp-toolbar {
  display: flex; gap: 8px; padding: 0 18px 12px; flex: none;
}
.cbmp-toolbar input[type="search"] {
  flex: 1; min-width: 0;
  border: 1px solid #d0d3e0; border-radius: 8px; padding: 8px 12px;
  font-size: 13px; font-family: inherit;
}
.cbmp-toolbar input[type="search"]:focus { outline: none; border-color: #6a4cf1; }
.cbmp-upload-btn {
  flex: none; border: 1px solid #d0d3e0; border-radius: 8px; background: #fff;
  color: #374151; font-size: 12.5px; font-weight: 600; padding: 8px 14px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.cbmp-upload-btn:hover { border-color: #6a4cf1; color: #6a4cf1; }

.cbmp-grid {
  flex: 1; min-height: 200px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; padding: 2px 18px 14px;
  align-content: start;
}
.cbmp-thumb {
  aspect-ratio: 16 / 10; padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: 10px;
  background: #f3f4f6; cursor: pointer;
}
.cbmp-thumb:hover { border-color: #6a4cf1; }
.cbmp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cbmp-note { grid-column: 1 / -1; font-size: 12.5px; color: #6b7280; padding: 24px 0; text-align: center; }
.cbmp-note.error { color: #c0423a; }
.cbmp-status { flex: none; font-size: 12px; color: #6b7280; padding: 0 18px 12px; min-height: 16px; }
.cbmp-status.error { color: #c0423a; }

@media (max-width: 480px) {
  .cbmp-overlay { padding: 0; align-items: flex-end; }
  .cbmp-modal { max-width: 100%; border-radius: 16px 16px 0 0; }
  .cbmp-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ── A caller's own grouping, inside the shared picker ──────────────────
   Added 2026-08-04 with `open({ decorate })`. Courses needs "What you brought
   for this course" above "Everything else in your library", and a read-state
   line per row; without somewhere to put them, moving courses onto this picker
   would have quietly dropped both. See the note on `decorate` in
   js/media-picker.js. */
.cbmp-group {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 12px 2px 4px;
}
.cbmp-group:first-child { padding-top: 2px; }
.cbmp-fnote { flex: none; font-size: 11.5px; color: #16794a; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   COURSE VIDEO INTAKE — the row that shows a coach her own work while it is
   still getting ready. Spec: docs/projects/course-video-intake/spec.md
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ THIS BLOCK IS MOSTLY ABOUT TEXT NEVER ESCAPING ITS ROW.

   Alex, 2026-08-18, on the mockups: *"make sure that we actually do the
   designing so that text never starts overwriting or bleeding over into each
   other."* He was looking at a real defect, and it is one this screen will hit
   for certain — a course module is called things like "Module 2 — Understanding
   Emotional & Narcissistic Abuse + Attachment & Trauma Bonds", 82 characters,
   in a 720px modal, beside a thumbnail, a state pill, a Remove control and a
   duration.

   The rule, and every part of it is load-bearing:
     1. `.cbmp-filerow` is the flex container and it clips — overflow:hidden, so
        nothing can escape the row no matter what goes wrong inside it.
     2. Fixed furniture (thumb, pill, remove, duration) is `flex: 0 0 auto`.
     3. The text column is `flex: 1 1 auto` AND `min-width: 0`. ⚠️ Without
        min-width:0 a flex item REFUSES to shrink below its content width, so
        the title pushes the pill off instead of ellipsing — this is the actual
        bug, and it is invisible until a title is long enough.
     4. Each text line is `display: block` before it is truncated. ⚠️
        overflow/text-overflow/white-space do NOTHING on an inline <span>, which
        is the second half of the same bug.
   ════════════════════════════════════════════════════════════════════════ */

.cbmp-filerow { overflow: hidden; }

.cbmp-fthumb {
  width: 64px; height: 38px; object-fit: cover; border-radius: 7px;
  flex: 0 0 auto; background: #e9e7f3;
}

/* (3) The one part that is allowed to shrink. */
.cbmp-fmain {
  flex: 1 1 auto; min-width: 0; display: block;
}
/* (4) Block, then truncate. */
.cbmp-fname,
.cbmp-fsub {
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cbmp-fsub { font-size: 11.5px; color: #6b7280; margin-top: 2px; }

/* (2) Furniture never shrinks and never grows. */
.cbmp-badge,
.cbmp-pill,
.cbmp-del,
.cbmp-go,
.cbmp-fsize { flex: 0 0 auto; }

.cbmp-filerow.is-working { background: #fdf3e3; border-color: transparent; }
.cbmp-filerow.is-working .cbmp-badge { background: rgba(180, 83, 9, .14); color: #b45309; }
.cbmp-filerow.is-working .cbmp-fsub { color: #b45309; }
.cbmp-filerow.is-dupe { border-color: #b3261e; border-style: dashed; }

.cbmp-pill {
  font-size: 10.5px; font-weight: 600; border-radius: 99px;
  padding: 3px 9px; letter-spacing: .02em; white-space: nowrap;
}
.cbmp-pill-dupe { background: #fdeceb; color: #b3261e; }

/* Continue a paused upload. Same shape as Cancel so the pair reads as one
   row of choices, in the going-forward colour rather than the undo one. */
.cbmp-go {
  font-size: 11.5px; font-weight: 600; color: #15172b;
  border: 1px solid #d0d3e0; border-radius: 7px;
  padding: 3px 9px; cursor: pointer; background: #fff; white-space: nowrap;
}
.cbmp-go:hover { background: #f2f3f7; }
.cbmp-go:focus-visible { outline: 2px solid #15172b; outline-offset: 2px; }

.cbmp-del {
  font-size: 11.5px; font-weight: 600; color: #b3261e;
  border: 1px solid rgba(179, 38, 30, .3); border-radius: 7px;
  padding: 3px 9px; cursor: pointer; background: #fff; white-space: nowrap;
}
.cbmp-del:hover { background: #fdeceb; }
.cbmp-del:focus-visible { outline: 2px solid #b3261e; outline-offset: 2px; }
/* Armed for the second tap. Filled rather than outlined, so "tap again" does
   not look like the same button it already was. */
.cbmp-del.is-armed,
.cbmp-del.is-armed:hover { background: #b3261e; border-color: #b3261e; color: #fff; }

.cbmp-group {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: #6b7280; margin: 10px 0 9px;
}
.cbmp-group:first-child { margin-top: 2px; }
.cbmp-gcount {
  font-weight: 500; letter-spacing: .02em; text-transform: none;
  font-size: 11px; color: #9ca3af;
}

/* "9 videos · 4 still getting ready" — see the note in media-picker.js. */
.cbmp-foot {
  flex: none; border-top: 1px solid #eceaf4; padding: 10px 18px;
  font-size: 12px; color: #6b7280; min-height: 18px;
}

/* ⚠️ On a phone there is no room for a duration chip beside an 80-character
   module title. Drop the chip rather than let the title lose more of itself —
   the length is already repeated in the "ready in about N minutes" line. */
@media (max-width: 460px) {
  .cbmp-filerow .cbmp-fsize { display: none; }
}

/* The "↓ 3 more below" line. Sits between the scrolling list and the count,
   outside the scroller so it cannot scroll away from the edge it describes.
   See updateScrollCue in media-picker.js — it is measured, never guessed. */
.cbmp-cue {
  flex: none; text-align: center; font-size: 11px; color: #9ca3af;
  padding: 4px 0 2px; letter-spacing: .02em;
}
.cbmp-cue[hidden] { display: none; }

/* ── Views and the star ───────────────────────────────────────────────────
   Alex, 2026-08-18: a favourites star on each image, and folders for where an
   image is used. Both are `media_files` columns that already existed and that
   nothing had ever offered, so this is presentation only. */

/* 🔻 AND THE ROW ITSELF WAS FLUSH TO THE EDGE. Alex, 2026-08-19: *"you haven't
   fixed the UX of the pills touching the borders."* Right — the first fix was
   about the pills' own shape and did nothing about where the row sits. It had
   no side padding at all, so the leftmost pill pressed against the panel's
   border with nothing between them, which is what makes a tidy row read as
   cramped. It scrolls sideways rather than wrapping now too: seven
   destinations wrapping to a second row is the same reflow that made the
   module tabs jump about on the course screen. */
.cbmp-views {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  /* 18px matches .cbmp-grid below, so the pills line up with the
     thumbnails under them rather than sitting on their own margin. */
  padding: 4px 18px 10px;
  scroll-padding-inline: 18px;
  scrollbar-width: thin;
}
/* 🔻 "the all pill … being squeezed too far" — Alex, 2026-08-19.
   `flex` items shrink below their content by default, so the SHORTEST label
   loses the most: "All" collapsed until it read as a disc sitting next to
   proper pills. `flex: none` stops the shrink and the min-width keeps a
   two-or-three-letter label the same shape as its neighbours. Both are needed
   — flex:none alone still leaves "All" narrower than the padding implies. */
.cbmp-view {
  flex: none;
  min-width: 62px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
}
.cbmp-view:hover { border-color: #6a4cf1; }
.cbmp-view.on { background: #111827; border-color: #111827; color: #fff; }
.cbmp-view .n { opacity: 0.6; font-weight: 500; margin-left: 3px; }
.cbmp-view:focus-visible { outline: 2px solid #6a4cf1; outline-offset: 2px; }

/* The tile and its star share a cell. The star is absolutely positioned so it
   sits ON the picture without changing the grid the tiles already lay out in. */
.cbmp-cell { position: relative; }

.cbmp-star {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  /* Dark disc behind it, because a star has to read on a photograph of
     anything — a white star on a beach is invisible. */
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cbmp-star:hover { background: rgba(17, 24, 39, 0.78); }
.cbmp-star.on { color: #fbbf24; }
.cbmp-star:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ── Stock photos (CX18) ──────────────────────────────────────────────────
   A stock tile is the library tile plus a credit and a saving state. It looks
   the same on purpose: the moment it is picked it IS a library picture. */
.cbmp-stock { position: relative; }
.cbmp-stock-by {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; line-height: 1.3; padding: 3px 5px;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  pointer-events: none;
}
/* ⚠️ THE IMPORT IS A ROUND TRIP — we download the file, store it and write a
   row — so the tile has to say it is working or a coach taps it three times. */
.cbmp-stock.is-busy { opacity: .5; pointer-events: none; }
.cbmp-stock.is-busy::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.4);
}