/* ============================================================================
   CONTENT LIBRARY — view-scoped styles
   ----------------------------------------------------------------------------
   Loaded lazily, the first time the library is opened.

   Overrides of shared components are declared as tokens on .v-library rather
   than by re-declaring the component, so a value that differs from the shared
   default is always visible as a deliberate difference.
   ========================================================================= */

.v-library {
  /* A library record is a full metadata sheet — sixty fields across seven
     sections — so it gets a wider panel and a wider label column than the
     board's prep card, and tighter row padding to fit them. */
  --detail-w: 960px;
  --detail-h: 88vh;
  --detail-max: 900px;
  --detail-head-pad: 12px 16px 10px;
  --detail-body-pad: 0 16px 14px;
  --detail-title-size: 18px;
  --detail-title-margin: 3px 44px 7px 0;
  --detail-close-top: 9px;
  --detail-close-right: 11px;
  --frow-key-w: 132px;
  --frow-gap: 0 10px;
  --frow-pad: 2px 0;
  --statuspill-pad: 3px 9px;

  /* Searches twelve fields including full EPG text, so it earns more room. */
  --search-w: 250px;

  --listwrap-pad: 12px 16px 24px;
  --th-pad: 9px 12px;
  --td-pad: 8px 12px;
}

.v-library .detail-title { line-height: 1.22; letter-spacing: 0; }


/* ============ LAYOUT ===================================================== */
.shell { flex: 1 1 auto; min-height: 0; display: flex; }
.main  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.v-library [data-el="stage"] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }


/* ============ CHANNEL SIDEBAR ============================================
   Multi-select. Selecting ADDS to what is shown rather than replacing it,
   and an already-fetched channel comes back from memory instantly.
   ======================================================================== */
.sidebar {
  flex: 0 0 216px; overflow-y: auto; background: var(--surface);
  border-right: 1px solid var(--border); padding: 12px 10px 20px;
}
.sb-head {
  display: flex; align-items: baseline; gap: 6px; padding: 0 6px 8px;
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint);
}
.sb-head .clear {
  margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 11px;
  color: var(--accent); background: none; border: none; padding: 2px 4px;
}
.ch {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1px solid transparent; background: none; border-radius: 6px;
  padding: 7px 9px; font-size: 13px; color: var(--text-muted); margin-bottom: 2px;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.ch:hover { background: var(--surface-2); color: var(--text); }
.ch.on { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
.ch .box {
  width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--border-strong);
  flex: 0 0 auto; display: grid; place-items: center; font-size: 10px; line-height: 1;
}
.ch.on .box { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.ch .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch .ct { font-family: var(--font-mono); font-size: 11px; opacity: .7; }
.sb-empty { padding: 16px 8px; font-size: 12px; color: var(--text-faint); line-height: 1.5; }


/* ============ FILTER BAR ================================================= */
.filterbar {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px; flex: 0 0 auto;
  background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto;
}
.count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.count b { color: var(--text); font-family: var(--font-mono); }


/* ============ CHILD LIST (seasons on a series card, episodes on a season)
   One table style for both levels of the drill-down. Deliberately one and
   not two: the rows carry different columns but they are the same object —
   "the things under this record, click one to go there" — and a second
   nearly-identical block is how .frow ended up defined twice at two widths
   (see the header of shared/ui.css).

   .epgroup and .epcount used to style the season HEADINGS inside a series'
   episode list. Seasons became a level you can stand in rather than a
   heading you scroll past, so those rules had nothing left to match and were
   deleted rather than kept in case — same call as CONFIG.DEMO_MODE.
   ======================================================================== */
.eplist { width: 100%; border-collapse: collapse; }
.eplist td { padding: 4px 8px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.eplist tr:last-child td { border-bottom: none; }
.eplist tr { cursor: pointer; }
.eplist tr:hover { background: var(--surface-2); }
.eplist tr:hover .ephc { color: var(--accent); }
.eplist td:first-child { width: 1%; white-space: nowrap; }

/* Phone: five columns can't share ~340px, so each row becomes a two-line
   card — code · S/E · status on top, title (and TRT) underneath. */
@media (max-width: 560px) {
  .eplist, .eplist tbody { display: block; }
  .eplist tr {
    display: grid; grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "hc num . st" "ti ti ti meta";
    align-items: center; column-gap: 8px; row-gap: 2px;
    padding: 7px 8px; border-bottom: 1px solid var(--border);
  }
  .eplist tr:last-child { border-bottom: none; }
  .eplist td { display: block; padding: 0; border-bottom: none; min-width: 0; }
  .eplist td:first-child { width: auto; grid-area: hc; }
  .eplist .epnum { grid-area: num; }
  .eplist .epst { grid-area: st; justify-self: end; }
  .eplist .eptitle { grid-area: ti; white-space: normal; overflow-wrap: anywhere; }
  .eplist .epmeta { grid-area: meta; justify-self: end; white-space: nowrap; font-size: 11.5px; }
}

/* A season the episodes prove exists but no Season row describes. Stated
   plainly in the house-code column, because that column is otherwise a
   code and a blank there reads as a record that failed to load. */
.eplist .norec {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
}


/* ============ ARTWORK ====================================================
   Aspect-ratio chips, not images. Clicking opens the asset AND copies its
   URL — the URL is what people paste into a delivery form.
   ======================================================================== */
.ratiogrid { display: flex; flex-wrap: wrap; gap: 6px; }
.ratio {
  font-family: var(--font-mono); font-size: 12px; text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 5px; padding: 3px 10px;
  color: var(--accent); background: var(--surface-2); cursor: copy;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.ratio:hover { background: var(--accent-tint); border-color: var(--accent); }
/* An aspect ratio with no asset is shown, dimmed — an absent size is
   information, and hiding it makes the set look complete when it is not. */
.ratio.none { color: var(--text-faint); opacity: .45; border-style: dashed; cursor: default; background: none; }
.ratio.copied { background: var(--s-done-bg); border-color: var(--s-done); color: var(--s-done); }


/* ============ UGC MODE (2026-09-27b) =====================================
   A second mode of the library, switched at the top of the sidebar. It
   reuses .ch, .filterbar, table.list, .detail, .frow, .section, .pill and
   .modal — only what UGC alone needs is defined here.

   ⚠ Each of these has a display value, so each needs its own [hidden] rule
   or setting `hidden` does nothing at all (§12). */
.v-library .filterbar[hidden],
.v-library [data-el="stage"][hidden],
.v-library .ugc[hidden] { display: none; }
.v-library .ugc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.ch .box.radio { border-radius: 50%; font-size: 8px; }

.ugclist td.dim { color: var(--text-faint); }

.ugcdetail { --detail-w: 820px; }
.ugcstep {
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: 7px; align-items: flex-start; line-height: 1.45;
}
.ugcstep input { margin-top: 2px; flex: 0 0 auto; }
.ugcstep.off { opacity: .55; }
.ugcstep b { color: var(--text); }
.ugc-et {
  margin-left: 8px; font-size: 11px; letter-spacing: .04em; text-transform: none;
  color: var(--accent); font-weight: 500;
}
.ugccol { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); margin: 4px 0 4px; }
.ugcwatch { display: flex; gap: 8px; margin: 10px 0 0; }
.ugcwatch .btn { text-decoration: none; }
.ugcwatch .is-off { opacity: .45; cursor: default; }
.ugchint { font-size: 12px; color: var(--text-faint); margin: 6px 0 2px; }
/* 067: the sheet copy's state on the card */
.ugcsync { font-size: 12px; color: var(--text-muted); margin-left: 8px; }
.ugcsync.is-bad { color: var(--danger, #c0392b); font-weight: 600; }
.ugcprev {
  margin: 12px 0 0; padding: 12px 14px; max-height: 42vh; overflow: auto;
  white-space: pre-wrap; word-break: break-word; font-family: var(--font-ui); font-size: 13px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
}


/* ============ NARROW ===================================================== */
@media (max-width: 820px) {
  .sidebar { flex-basis: 170px; }
  .v-library { --search-w: 170px; }
}

/* File Issues (2026-10-07a) — reuses .ugc / .ugcbar / .ugctabs / .list. */
.v-library .fi .grow { flex: 1; }
.fi-kind { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.fi-kind.fi-ottera { background: var(--accent-tint); color: var(--accent); }
.fi-kind.fi-b2_missing { background: color-mix(in srgb, var(--due-late, #c0392b) 14%, transparent); color: var(--due-late, #c0392b); }
.fi-kind.fi-b2_issue { background: color-mix(in srgb, var(--due-soon, #b7791f) 16%, transparent); color: var(--due-soon, #b7791f); }
.fi-more, .fi-dim { color: var(--text-faint); font-size: 12px; }
.fi-unclaimed { color: var(--text-faint); font-style: italic; }
.fi-warn { color: var(--due-late, #c0392b); font-size: 12px; margin-left: 6px; }
.fidetail { --detail-w: 620px; }
.finew .fi-field { margin-bottom: 14px; }
.finew .fi-field .fkey { margin-bottom: 6px; }
.finew .fi-kinds { display: flex; flex-direction: column; gap: 6px; }
.finew .fi-kindopt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.finew .fi-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--text); }
.finew textarea.fi-in { resize: vertical; }
.finew .fi-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .finew .fi-row2 { grid-template-columns: 1fr; } }
.finew .fi-err { color: var(--due-late, #c0392b); font-size: 13px; min-height: 1em; }

/* Standard: .modesw / .ugctabs are .seg tabs (ui.css) */
.modesw { margin: 0 0 14px; }