/* festival-lists-page.css — page-local styles for Festival lists and the
   "In festival archives" block (feature_festival_lists.md).

   Ported from the page-local block of claude-design/skills/dc-skill/
   dc-festival-lists.html (frame v4, approved 2026-10-12). Existing tokens
   only; light and dark follow the tokens. The page itself is Library's
   (strip, dc-table--gallery, canonical drawer): this file holds only what
   Library does not have. */

/* ── Strip ────────────────────────────────────────────────────────────── */
.fl-page .lib-topbar { position: relative; }
.fl-page .lib-topbar .fl-gap { flex: 1; }
.fl-page .lib-topbar > .ig-sb { margin-right: 8px; }
/* The bulk-confirm pill is a server-rendered output: its wrapper span is the
   flex item, so it stretched to the strip height and the pill sat at the
   top. Centre the wrapper like the Coverage pill beside it. */
.fl-page .lib-topbar > .shiny-html-output { display: inline-flex; align-items: center;
  align-self: center; margin-right: 8px; }
.fl-count { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-faint);
  margin-left: 4px; white-space: nowrap; align-self: center; }

/* ── Table cells ──────────────────────────────────────────────────────── */
.cur-idc__row { display: inline-flex; gap: 6px; align-items: baseline; min-width: 0; }
.fl-out { color: var(--dc-faint); font-size: 11px; text-decoration: none; }
.fl-out:hover { color: var(--dc-primary); }
.fl-sect { display: block; min-width: 0; }
.fl-resc { display: table; margin-top: 2px; }
.fl-ours { cursor: pointer; }
/* A long award name clips with an ellipsis; the full text is the cell's title. */
.fl-page .tabulator-cell .dc-pill { display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Loading: skeleton rows until the first payload arrives (the output div is
   empty until then). */
.fl-page .dc-table-output:empty {
  background-image: repeating-linear-gradient(
    to bottom, var(--dc-panel-2) 0, var(--dc-panel-2) 14px,
    transparent 14px, transparent 52px);
  background-size: 100% 52px; background-position: 0 24px;
  opacity: .7; animation: fl-pulse 1.4s ease-in-out infinite; }
@keyframes fl-pulse { 50% { opacity: .35; } }

/* ── "Across the archive" rows (Festival lists page drawer). The base `.dd-fest`
   rows live in dc-components.css; this adds the clickable behaviour. ────── */
.fl-across .dd-fest { align-items: flex-start; cursor: pointer; }
.fl-across .dd-fest.is-current { cursor: default; }
.fl-across .dd-fest:not(.is-current):hover .dd-fest__name { color: var(--dc-primary); }
.fl-across .dd-fest__yr { color: var(--dc-muted); padding-top: 2px; }
.fl-across .dd-fest__src { padding-top: 3px; }
.fl-across .dd-fest-sum { border-bottom: 0; padding-bottom: 6px; }

/* ── Match block ──────────────────────────────────────────────────────── */
.fl-acts { display: flex; gap: 6px; margin-top: 12px; }
.fl-acts .btn.is-ghost { opacity: .4; cursor: not-allowed; }
.fl-note { font-size: 11px; color: var(--dc-faint); margin-top: 8px; line-height: 1.45; }
.fl-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.fl-why .ok { color: var(--dc-ink); }
.fl-why .ok i { color: var(--dc-ok); }
.fl-why .no { color: var(--dc-faint); }
.fl-why i { margin-right: 6px; }
.fl-arch .dd-fest__main > .fl-why { margin-top: 6px; }
.fl-arch__state { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.fl-arch__score { font-family: var(--dc-font-mono); font-size: 10px; color: var(--dc-faint); }

/* ── Coverage popover ─────────────────────────────────────────────────── */
.fl-pop { position: absolute; top: calc(100% + 4px); right: 8px; z-index: 30; width: 340px;
  max-width: calc(100vw - 32px); background: var(--dc-panel); border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius); box-shadow: 0 12px 30px -14px rgba(0,0,0,.4); padding: 10px 12px;
  max-height: 70vh; overflow-y: auto; }
.fl-pop[hidden] { display: none; }
.fl-pop .dd-ov > b { flex-basis: 96px; }
.fl-pop .fl-note { margin-top: 6px; }

/* ── Bulk confirm preview (inside .dc-modal) ──────────────────────────── */
.fl-bulk { list-style: none; margin: 0; padding: 0; }
.fl-bulk li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--dc-line); font-size: 13px; }
.fl-bulk li:last-child { border-bottom: 0; }
.fl-bulk small { display: block; font-size: 12px; color: var(--dc-muted); }
.fl-bulk li.is-off { opacity: .55; }