/* DCP Inspector — scoped to #dcp-wrap. Mirrors the drp_inspector visual
   system so the two inspectors feel like siblings. */

#dcp-wrap {
  --bg: #0f0f10;
  --surface: #1a1a1a;
  --surface2: #1e1e1e;
  --surface3: #262626;
  --border: rgba(255,255,255,0.14);
  --border-light: rgba(255,255,255,0.2);
  --text: #e9e9e9;
  --text-muted: #aaaaaa;
  --text-dim: #888;
  --accent: #d8d8d8;
  --accent-dim: rgba(255,255,255,0.06);
  --accent-glow: rgba(255,255,255,0.12);
  --ok:   #34d399;
  --warn: #facc15;
  --bad:  #f87171;
  --info: #60a5fa;
  --enc:  #f87171;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

#dcp-wrap *, #dcp-wrap *::before, #dcp-wrap *::after { box-sizing: border-box; }

#dcp-wrap code {
  font-family: 'Menlo', 'Consolas', monospace;
  background: var(--surface3);
  padding: 1px 4px;
  border: 1px solid var(--border);
  font-size: 11px;
}

/* ─── DROP ZONE ─────────────────────────────────── */
#dcp-wrap #dcp-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 24px;
  padding: 24px;
}

#dcp-wrap .dcp-badge { display: flex; align-items: center; gap: 10px; }
#dcp-wrap .dcp-badge h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
  margin: 0;
}
#dcp-wrap .dcp-badge h1 span { color: var(--accent); }

#dcp-wrap .drop-area {
  border: 1.5px dashed var(--border-light);
  border-radius: 0;
  padding: 56px 80px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
  min-width: 380px;
}

#dcp-wrap .drop-area:hover,
#dcp-wrap .drop-area.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}

#dcp-wrap .drop-area .drop-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
#dcp-wrap .drop-area p { color: var(--text-dim); font-size: 14px; margin-bottom: 4px; }
#dcp-wrap .drop-area .browse-label {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#dcp-wrap .drop-area .file-types {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
#dcp-wrap .sample-row { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* ─── APP ─────────────────────────────────────── */
#dcp-wrap #dcp-app {
  padding: 24px 28px;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

#dcp-wrap #dcp-app-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

#dcp-wrap #dcp-app-header .title-group { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#dcp-wrap #dcp-app-header .header-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Multi-CPL dropdown row. Only visible when 2+ CPLs are present in the
   package; the renderer toggles the [hidden] attribute. Aligned to the
   left so the label, select and hint flow naturally on a single line. */
#dcp-wrap #dcp-app-header .header-row-3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}
#dcp-wrap .cpl-selector-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.7px;
}
#dcp-wrap .cpl-selector {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 0;
  min-width: 320px;
  max-width: 100%;
  cursor: pointer;
}
#dcp-wrap .cpl-selector:hover { border-color: var(--text-dim); }
#dcp-wrap .cpl-selector:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 1px var(--info);
}
#dcp-wrap .cpl-selector-hint {
  color: var(--text-dim);
  font-size: 10px;
}

#dcp-wrap #dcp-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  word-break: break-all;
}

#dcp-wrap #dcp-app-header .meta-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
}

#dcp-wrap .pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  gap: 4px;
  align-items: center;
}
#dcp-wrap .pill strong { color: var(--text); font-weight: 500; }

#dcp-wrap .pill.pill-ok       { border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.08); color: var(--ok); }
#dcp-wrap .pill.pill-ok strong { color: var(--ok); }
#dcp-wrap .pill.pill-warn     { border-color: rgba(250,204,21,0.40); background: rgba(250,204,21,0.10); color: var(--warn); }
#dcp-wrap .pill.pill-warn strong { color: var(--warn); }
#dcp-wrap .pill.pill-bad      { border-color: rgba(248,113,113,0.40); background: rgba(248,113,113,0.10); color: var(--bad); }
#dcp-wrap .pill.pill-bad strong { color: var(--bad); }
#dcp-wrap .pill.pill-encrypted {
  border-color: rgba(248,113,113,0.55);
  background: rgba(248,113,113,0.18);
  color: var(--bad);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
#dcp-wrap .pill.pill-encrypted strong { color: var(--bad); }
#dcp-wrap .pill.pill-info {
  border-color: rgba(96,165,250,0.40);
  background: rgba(96,165,250,0.10);
  color: var(--info);
}
#dcp-wrap .pill.pill-info strong { color: var(--info); }

#dcp-wrap .header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

#dcp-wrap .reset-btn,
#dcp-wrap .info-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 0;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 11px;
  transition: color 0.15s, border-color 0.15s;
}
#dcp-wrap .reset-btn:hover,
#dcp-wrap .info-btn:hover { color: var(--text); border-color: var(--border-light); }

/* Export-report split button. The trigger looks like a regular reset-
   btn; clicking it opens a small menu of export formats anchored to
   the bottom-right of the button. The menu closes on outside click
   or Escape — wiring lives in dcpToggleExportMenu / its document
   listener. */
#dcp-wrap .dcp-export-menu {
  position: relative;
  display: inline-block;
}
#dcp-wrap .dcp-export-options {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  background: var(--surface2);
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  padding: 4px;
}
#dcp-wrap .dcp-export-options[hidden] { display: none; }
#dcp-wrap .dcp-export-options button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  border-radius: 0;
  transition: background 0.12s;
}
#dcp-wrap .dcp-export-options button:hover {
  background: var(--surface3);
}
#dcp-wrap .dcp-export-icon {
  font-size: 14px;
  width: 18px;
  flex-shrink: 0;
  line-height: 1.2;
  text-align: center;
}
#dcp-wrap .dcp-export-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#dcp-wrap .dcp-export-label strong {
  font-weight: 600;
  color: var(--text);
}
#dcp-wrap .dcp-export-label small {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ─── SECTION HEADINGS ───────────────────────── */
#dcp-wrap .section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}
/* The chevron sits to the left of each heading title. CSS-only
   indicator that flips when the section collapses, so the user
   sees the section state without needing another DOM element. */
#dcp-wrap .section-heading h2::before {
  content: '▾';
  display: inline-block;
  margin-right: 6px;
  color: var(--text-dim);
  font-size: 10px;
  width: 10px;
  text-align: center;
  transition: transform 0.15s ease;
}
#dcp-wrap .dcp-section.collapsed .section-heading h2::before {
  transform: rotate(-90deg);
}
/* When a section is collapsed, its body (.chart-card) is hidden.
   The heading stays visible so the user can click again to expand. */
#dcp-wrap .dcp-section.collapsed > .chart-card { display: none; }
#dcp-wrap .dcp-section.collapsed { margin-bottom: 12px; }

#dcp-wrap .section-heading h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}

#dcp-wrap .section-heading .heading-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Generic copy-btn — applies to every .copy-btn inside the inspector
   (section headings, caption-block heads, marker-add buttons, etc.)
   so all of them share the same visual treatment. Variants like
   .marker-add-btn layer their own size adjustments on top. */
#dcp-wrap .copy-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 0;
  padding: 3px 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#dcp-wrap .copy-btn:hover { color: var(--text); border-color: var(--border-light); }
#dcp-wrap .copy-btn:disabled { opacity: 0.5; cursor: default; }
#dcp-wrap .copy-btn.running { color: var(--text); border-color: var(--border-light); }

/* Section-heading action slot — used by the Composition / Marker
   Hints panes to host the Edit Composition (or Save + Cancel)
   buttons populated by dcpRenderEditControls(). Empty slot collapses
   so unrelated panes' headings don't gain a phantom column. */
#dcp-wrap .section-actions {
  display: inline-flex;
  gap: 6px;
}
#dcp-wrap .section-actions:empty { display: none; }

/* ─── Version Files (added via "＋ Add Version File") ────── */
#dcp-wrap .vf-block {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  transition: background 0.35s ease, border-color 0.35s ease;
}
#dcp-wrap .vf-block:first-child { margin-top: 0; }
/* Brief highlight when a new Version File is added, so the user
   notices the block appearing below the existing panes. Removed by
   JS after ~1.8s. */
#dcp-wrap .vf-block.vf-block-flash {
  background: rgba(96,165,250,0.14);
  border-color: rgba(96,165,250,0.55);
}
#dcp-wrap .vf-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
#dcp-wrap .vf-block-title {
  font-family: 'Menlo','Consolas',monospace;
  font-size: 12px;
  color: var(--text);
  flex: 1;
  word-break: break-all;
}
#dcp-wrap .vf-summary {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
#dcp-wrap .vf-verdict {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0 8px;
}
#dcp-wrap .vf-verdict.is-broken { color: var(--bad); }
#dcp-wrap .vf-verdict.is-vf     { color: var(--info); }
#dcp-wrap .vf-verdict.is-ov     { color: var(--ok); }
#dcp-wrap .vf-cpl-block { margin-top: 10px; }
#dcp-wrap .vf-cpl-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
#dcp-wrap .vf-cpl-label { color: var(--text); }
#dcp-wrap .vf-cpl-uuid {
  font-family: 'Menlo','Consolas',monospace;
  color: var(--text-dim);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}
#dcp-wrap .vf-asset-table {
  font-family: 'Menlo','Consolas',monospace;
  font-size: 10px;
}
/* Composition summary above each VF CPL's asset table. 2-column
   grid — short label on the left, value on the right — mirrors the
   Composition pane in the primary inspector so VFs / OVs added via
   "+ Add Version File" surface their metadata the same way. */
#dcp-wrap .vf-cpl-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 6px 0 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
}
#dcp-wrap .vf-cpl-summary-k {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.6px;
  align-self: center;
}
#dcp-wrap .vf-cpl-summary-v {
  font-family: 'Menlo','Consolas',monospace;
  color: var(--text);
  word-break: break-all;
}
#dcp-wrap .vf-row-missing,
#dcp-wrap .vf-row-vf_missing_file,
#dcp-wrap .vf-row-ov_missing_file { background: rgba(248,113,113,0.06); }

/* ─── Generic modal overlay (Remove CPLs, future dialogs) ─── */
/* Lives outside #dcp-wrap so it can cover the full viewport without
   inheriting the page padding. Matches KDM Manager's modal style:
   dimmed backdrop, centered card, slide-in animation. */
.dcp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: dcp-modal-fade 0.15s ease-out;
}
.dcp-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.20);
  color: #e9e9e9;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  animation: dcp-modal-slide 0.18s ease-out;
}
.dcp-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.dcp-modal-head h3 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  flex: 1;
}
.dcp-modal-close {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
}
.dcp-modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.dcp-modal-body {
  padding: 14px 16px;
  overflow-y: auto;
}
.dcp-modal-hint {
  margin: 0 0 12px;
  color: #aaaaaa;
  line-height: 1.45;
}
.dcp-modal-warn {
  margin: 10px 0 0;
  padding: 6px 10px;
  color: #facc15;
  background: rgba(250,204,21,0.08);
  border: 1px solid rgba(250,204,21,0.30);
}
.dcp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
/* Remove CPLs list rows. */
.dcp-remove-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dcp-remove-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dcp-remove-row:hover { background: #262626; border-color: rgba(255,255,255,0.20); }
.dcp-remove-row input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
}
.dcp-remove-row-info { flex: 1; min-width: 0; }
.dcp-remove-row-file {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: #e9e9e9;
  word-break: break-all;
}
.dcp-remove-row-title {
  font-size: 11px;
  color: #aaaaaa;
  margin-top: 2px;
  word-break: break-all;
}
.dcp-remove-active-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,0.40);
  background: rgba(96,165,250,0.08);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@keyframes dcp-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dcp-modal-slide { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

#dcp-wrap .dcp-section { margin-bottom: 28px; }

/* Single-MXF mode (set on <body> as `.dcp-single-asset` by
   dcpRenderAll when state._singleAsset is true). Every section heading
   stays visible so the page structure reads the same regardless of
   the source — but inapplicable sections are greyed out and have
   their body hidden so the user can see what would be there in a full
   DCP. The one exception is the Composition pane, which is hidden
   entirely because a synthetic one-reel CPL has no real composition
   metadata to surface.
   The `.dcp-section-disabled` class is applied in JS to whichever
   sections don't apply to the current essence kind. */
body.dcp-single-asset #dcp-app .dcp-section.dcp-section-disabled {
  opacity: 0.45;
  pointer-events: none;
}
body.dcp-single-asset #dcp-app .dcp-section.dcp-section-disabled > .chart-card {
  display: none;
}
body.dcp-single-asset #dcp-app .dcp-section.dcp-section-disabled .section-heading h2::before {
  /* The collapsible-section chevron isn't meaningful for a disabled
     section — replace it with a dim em-dash so the heading reads as
     "intentionally blank" rather than "click to expand". */
  content: '—';
  transform: none;
}
/* Composition pane heading stays visible in single-asset mode (greyed
   out via the same .dcp-section-disabled pattern as the other
   inapplicable sections). A synthetic CPL has no real composition
   metadata worth showing, so the body collapses — but the heading
   keeps the page structure consistent with full-DCP mode. */
/* Show the heading for #dcp-markers-section / #dcp-timeline-section
   in single-asset mode. These two have a `hidden` attribute on the
   section element itself (because they're conditionally surfaced for
   full DCPs only when markers / multi-reel timelines exist). In
   single-asset mode we always want the heading visible so the user
   can see the section structure — JS strips the attribute and adds
   .dcp-section-disabled instead. */

/* Hide the export / add-VF / open-another buttons since they assume a
   full DCP context; keep "Open another folder" so the user can leave
   single-asset mode the same way they came in. */
body.dcp-single-asset #dcp-app .header-actions .dcp-export-menu,
body.dcp-single-asset #dcp-app .header-actions button[onclick*="dcpAddVersionFileClick"] {
  display: none;
}
/* Synthetic-CPL props that don't make sense for a single MXF: the
   "CPL" count pill, the Edit Composition / Edit Captions / Append /
   Save / Remove buttons (all assume a real CPL/PKL to round-trip),
   the CPL switcher row. */
body.dcp-single-asset #dcp-cpl-selector,
body.dcp-single-asset #dcp-composition-actions,
body.dcp-single-asset #dcp-captions-actions,
body.dcp-single-asset .meta-pills .pill-cpl-count {
  display: none !important;
}

#dcp-wrap .chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 18px;
}

#dcp-wrap .cat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ─── DROP OVERLAY (when dragging onto app) ─── */
/* Split into two equal-height zones stacked vertically: the top
   zone REPLACES the loaded package, the bottom zone ADDS a
   supplemental Version File alongside it. Each zone has its own
   dragenter/drop wiring; pointer-events are enabled on the zones
   themselves (not the outer overlay) so dragenter/dragleave can
   independently toggle each zone's hover state. */
#dcp-wrap #dcp-app-drop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
#dcp-wrap #dcp-app-drop-overlay.active {
  display: grid;
  /* 3:1 split — Replace zone is the much more common action (loading
     a fresh DCP into the inspector) so it takes the bulk of the
     overlay. The bottom Add-VF zone is still a clear drop target but
     reads as the secondary option, matching the relative frequency
     of the two flows. */
  grid-template-rows: 3fr 1fr;
  gap: 12px;
  padding: 16px;
}
#dcp-wrap #dcp-app-drop-overlay .overlay-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--border-light);
  background: rgba(255,255,255,0.02);
  text-align: center;
  padding: 32px 24px;
  transition: border-color 0.15s, background 0.15s;
  pointer-events: auto;
}
#dcp-wrap #dcp-app-drop-overlay .overlay-zone.is-hover {
  border-color: var(--info);
  background: rgba(96,165,250,0.10);
}
#dcp-wrap #dcp-app-drop-overlay .overlay-zone.overlay-zone-add.is-hover {
  border-color: var(--ok);
  background: rgba(52,211,153,0.10);
}
#dcp-wrap #dcp-app-drop-overlay .overlay-icon { font-size: 40px; opacity: 0.65; }
#dcp-wrap #dcp-app-drop-overlay .overlay-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}
#dcp-wrap #dcp-app-drop-overlay .overlay-sub {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 480px;
}

/* ─── STATUS / LOADING ───────────────────────── */
/* Mirrors KDM Manager's floating notification banner. Fixed-position
   at the top of the viewport so it's visible regardless of scroll
   position; site-wide navbar is sticky at top:0 ~55px tall, so we
   park at 64px and out-rank its z-index. Auto-dismiss for success
   messages, manual × for errors. */
#dcp-wrap #dcp-status {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 720px;
  z-index: 1040;
  font-size: 12px;
  padding: 10px 36px 10px 14px;   /* extra right padding for the × button */
  font-family: 'Menlo', 'Consolas', monospace;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: 4px;
  color: var(--text);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: dcp-status-in 0.18s ease-out;
}
#dcp-wrap #dcp-status[data-tone="error"],
#dcp-wrap #dcp-status.error {
  border-left-color: var(--bad);
  color: var(--bad);
}
/* Streaming-progress bar at the bottom of the banner — preserved
   from the previous in-flow design so long-running runners still
   show their progress. dcpSetProgress drives --dcp-progress. */
#dcp-wrap #dcp-status::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--dcp-progress, 0%);
  background: var(--text);
  transition: width 0.18s ease-out;
  pointer-events: none;
}
#dcp-wrap #dcp-status[data-tone="error"]::after,
#dcp-wrap #dcp-status.error::after { display: none; }
#dcp-wrap #dcp-status .dcp-status-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
#dcp-wrap #dcp-status .dcp-status-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
@keyframes dcp-status-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── TABLES ─────────────────────────────────── */
#dcp-wrap .dcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

#dcp-wrap .dcp-table thead th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  text-align: left;
  font-weight: 600;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border);
}
/* Header cells inherit their column's padding/alignment from
   the col-* classes — but NOT the column's monospace font, since
   header labels read better in the body sans. Override here. */
#dcp-wrap .dcp-table thead th.col-mono,
#dcp-wrap .dcp-table thead th.col-size {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#dcp-wrap .dcp-table tbody td {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

#dcp-wrap .dcp-table tbody tr:last-child td { border-bottom: none; }

#dcp-wrap .dcp-table .col-name   { font-family: 'Menlo','Consolas',monospace; color: var(--text); word-break: break-all; }
#dcp-wrap .dcp-table .col-status {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  padding-left: 12px;
}
#dcp-wrap .dcp-table .col-mono {
  font-family: 'Menlo','Consolas',monospace;
  color: var(--text);
  padding-left: 12px;
}
#dcp-wrap .dcp-table .col-size {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  padding-left: 12px;
  color: var(--text-dim);
  font-family: 'Menlo','Consolas',monospace;
}
#dcp-wrap .dcp-table .col-label {
  width: 1%;
  white-space: nowrap;
  padding-right: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.7px;
}
/* Source column structure: a primary name line plus zero-or-more
   stacked "↩ satisfies <other-package>" tags below it. Each tag is
   a block-level div on its own line so multi-VF cross-references
   stack cleanly rather than joining into one long comma-separated
   blob. */
#dcp-wrap .dcp-table .col-label .asset-source-name {
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  font-size: 11px;
}
#dcp-wrap .dcp-table .col-label .asset-origin-cross {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--info);
  cursor: help;
}

/* ─── BADGES ─────────────────────────────────── */
#dcp-wrap .row-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 1px 6px;
  border: 1px solid;
  text-transform: uppercase;
  vertical-align: middle;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#dcp-wrap .row-badge.ok       { color: var(--ok);   border-color: rgba(52,211,153,0.35);  background: rgba(52,211,153,0.08); }
#dcp-wrap .row-badge.warn     { color: var(--warn); border-color: rgba(250,204,21,0.40);  background: rgba(250,204,21,0.10); }
#dcp-wrap .row-badge.bad      { color: var(--bad);  border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); }
#dcp-wrap .row-badge.info     { color: var(--info); border-color: rgba(96,165,250,0.40);  background: rgba(96,165,250,0.10); }
#dcp-wrap .row-badge.pending  { color: var(--text-dim); border-color: var(--border); background: var(--surface3); }
#dcp-wrap .row-badge.running  { color: var(--info); border-color: rgba(96,165,250,0.40); background: rgba(96,165,250,0.10); }

/* ─── PER-ROW PROGRESS BAR ───────────────────── */
/* Used by the checksum table (`hash-progress`) AND the bitrate table
   (`row-progress`) to surface per-asset progress alongside the global
   progress bar. The shared rule set keeps both panes visually
   consistent — the streaming runner drives `width: pct%` on the bar
   and updates the small percent readout next to it. */
/* Inline progress: sits in the Computed column where the SHA-1
   eventually lands, replacing the "…" placeholder. inline-flex +
   no margin keeps the bar within the row's natural line-height so
   the row doesn't grow taller while hashing. */
#dcp-wrap .hash-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
/* Bitrate Peak-column progress: inline-flex so the row keeps its
   natural height (no extra row growth while the picture MXF is
   scanned). Mirrors the hash-progress inline behavior. */
#dcp-wrap .row-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
/* Peak column: the value sits on top until the runner kicks in and
   hides it, then the inline progress bar takes its place. */
#dcp-wrap .col-peak { white-space: nowrap; }
#dcp-wrap .hash-progress[hidden],
#dcp-wrap .row-progress[hidden] { display: none; }
#dcp-wrap .hash-progress-track,
#dcp-wrap .row-progress-track {
  width: 110px;
  height: 4px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
#dcp-wrap .hash-progress-bar,
#dcp-wrap .row-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--info);
  /* No CSS transition — the JS rAF smoother (dcpSmoothProgress in
     dcp_inspector.js) drives the bar directly at the browser's
     refresh rate. A CSS transition on top of that would fight
     the rAF animation and re-introduce the very stutter the
     smoother was added to fix. */
}
#dcp-wrap .hash-progress-pct,
#dcp-wrap .row-progress-pct {
  font-family: 'Menlo','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--text-dim);
  min-width: 32px;
  text-align: right;
}

#dcp-wrap .empty-row {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
}

/* Audio Analysis pane disabled-state. Used when the DCP is encrypted
   and no DKDM is loaded — section header still renders, body shows
   a greyed-out yellow message so the user can see WHY the analysis
   isn't running and what to do about it. */
#dcp-wrap .audio-disabled {
  padding: 24px 16px;
  text-align: center;
  background: var(--surface3);
  border: 1px dashed rgba(250, 204, 21, 0.30);
  color: var(--text-dim);
}
#dcp-wrap .audio-disabled-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--warn);
  margin-bottom: 6px;
}
#dcp-wrap .audio-disabled-body {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
}
#dcp-wrap .audio-disabled-link {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Encrypted-DCP banner — page-level. Surfaces between the header
   and the first section pane when state.encrypted is true and no
   DKDM-unlocked content keys are loaded. Provides an inline drop
   area so the user can unlock without navigating to /dcp_keys.
   Yellow palette mirrors the per-pane bitrate-banner-warn pattern. */
#dcp-wrap #dcp-encrypted-banner { margin-bottom: 24px; }
#dcp-wrap .dcp-encrypted-card {
  border: 1px solid rgba(250, 204, 21, 0.40);
  border-left: 4px solid var(--warn);
  background: rgba(250, 204, 21, 0.08);
  padding: 14px 18px;
}
#dcp-wrap .dcp-encrypted-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
#dcp-wrap .dcp-encrypted-body {
  font-size: 11px;
  color: var(--text);
  line-height: 1.6;
}
#dcp-wrap .dcp-encrypted-cpl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface3);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
#dcp-wrap .dcp-encrypted-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
}
#dcp-wrap .dcp-encrypted-cpl-val {
  font-family: 'Menlo','Consolas',monospace;
  color: var(--text);
}
#dcp-wrap .dcp-encrypted-cpl-title {
  color: var(--text-muted);
  font-size: 10px;
}
#dcp-wrap .dcp-encrypted-link-row { margin-top: 6px; }
#dcp-wrap .dcp-encrypted-link {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: inherit;
  cursor: pointer;
}
/* Recommendation block — gives the user a clear next step when no
   DKDM is loaded yet, with a link to KDM Manager so they can generate
   or import one. font-size: inherit on .dcp-encrypted-link keeps the
   inline link on the same text baseline as the surrounding sentence. */
#dcp-wrap .dcp-encrypted-recommend {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 2px solid rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.06);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}
#dcp-wrap .dcp-encrypted-drop {
  margin-top: 12px;
  border: 1.5px dashed rgba(250, 204, 21, 0.40);
  background: var(--surface2);
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#dcp-wrap .dcp-encrypted-drop:hover,
#dcp-wrap .dcp-encrypted-drop.drag-over {
  border-color: var(--warn);
  background: rgba(250, 204, 21, 0.05);
}
#dcp-wrap .dcp-encrypted-drop-label {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 4px;
}
#dcp-wrap .dcp-encrypted-drop-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* In-pane banners. Used by Bitrate Analysis to surface non-fatal
   conditions that would otherwise leave a row in an opaque
   "unmeasured" state — e.g. picture MXF is encrypted, no KDM, peak
   instantaneous bitrate cannot be measured. The banner sits above
   the table so the user sees the explanation regardless of where
   they're scrolled. */
#dcp-wrap .bitrate-banner {
  font-size: 11px;
  line-height: 1.5;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-left: 3px solid;
  background: var(--surface3);
  color: var(--text);
}
#dcp-wrap .bitrate-banner strong { color: var(--text); font-weight: 600; }
#dcp-wrap .bitrate-banner-warn {
  border-left-color: var(--warn);
  background: rgba(250, 204, 21, 0.08);
}
#dcp-wrap .bitrate-banner-warn strong { color: var(--warn); }

/* ─── COMPOSITION SUMMARY ──────────────────────── */
#dcp-wrap .comp-block {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 12px;
}
#dcp-wrap .comp-block .lbl {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.7px;
  align-self: center;
}
#dcp-wrap .comp-block .val { color: var(--text); word-break: break-all; }
#dcp-wrap .comp-block .val.mono { font-family: 'Menlo','Consolas',monospace; }
#dcp-wrap .comp-block .val.warn-text { color: var(--warn); }
/* Per-token highlighting inside the Title value. Tokens flagged by
   the ISDCF auditor (unrecognized, aspect-mismatched) light up
   yellow with a soft tint; the rest of the title stays in the
   default text color so the eye is drawn directly to the bad parts.
   The `_` separator is kept dim so the token boundaries read as
   structural, not part of the data. */
#dcp-wrap .comp-block .val .title-token-warn {
  color: var(--warn);
  background: rgba(250, 204, 21, 0.12);
  padding: 0 2px;
  border-radius: 2px;
}
#dcp-wrap .comp-block .val .title-sep {
  color: var(--text-dim);
}

/* ─── In-place CPL editor ────────────────────── */
/* The "Edit Composition" toggle bar sits above the comp-block.
   Mirrors the per-pane copy-btn style for the primary action and the
   header reset-btn for the cancel. The hint text on the right
   explains what saving will do (single-CPL download vs ZIP). */
#dcp-wrap .comp-edit-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#dcp-wrap .comp-edit-hint {
  font-size: 10px;
  color: var(--text-dim);
}
#dcp-wrap .comp-edit-hint code {
  font-size: 10px;
  padding: 0 3px;
}
/* Encrypted-DCP warning variant — yellow tint so it's visually
   distinct from the informational base hint. Used inside the
   Composition pane when entering edit mode on an encrypted package
   (the user has to acknowledge the consequences via a confirm()
   dialog first; this banner is the persistent reminder). */
#dcp-wrap .comp-edit-bar.comp-edit-bar-warn {
  background: rgba(195, 154, 58, 0.10);
  border: 1px solid var(--warn, #c39a3a);
  padding: 8px 10px;
}
#dcp-wrap .comp-edit-bar.comp-edit-bar-warn .comp-edit-hint {
  color: var(--warn, #c39a3a);
  font-size: 11px;
  line-height: 1.4;
}
#dcp-wrap .comp-edit-bar.comp-edit-bar-warn .comp-edit-hint strong { color: var(--warn, #c39a3a); }

/* DCNC slot builder grid. Each slot is a labeled cell with a small
   uppercase label and an input/select. The layout flows responsively
   so the grid wraps on narrower viewports. */
#dcp-wrap .cpe-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 10px;
}
#dcp-wrap .cpe-slot-grid > label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#dcp-wrap .cpe-slot-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
#dcp-wrap .cpe-slot-input {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 0;
  width: 100%;
  min-width: 0;
}
#dcp-wrap .cpe-slot-input:hover { border-color: var(--text-dim); }
#dcp-wrap .cpe-slot-input:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 1px var(--info);
}
#dcp-wrap .cpe-slot-input-wide { min-width: 280px; }
/* Read-only fields (Kind derived from Type, Issued auto-stamped at
   save). Visually distinct so the user doesn't try to click and edit. */
#dcp-wrap .cpe-slot-input-readonly {
  color: var(--text-dim);
  background: var(--surface3);
  cursor: not-allowed;
}
#dcp-wrap .cpe-slot-input-readonly:focus { box-shadow: none; border-color: var(--border); }
#dcp-wrap .cpe-derived-hint {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 8px;
  font-style: italic;
}

/* Live-assembled title preview shown above the slot grid. Reads as
   the current `_`-joined string so the user sees what their inputs
   will produce in real time. */
#dcp-wrap .cpe-title-preview {
  font-family: 'Menlo','Consolas',monospace;
  font-size: 12px;
  background: var(--surface3);
  padding: 4px 8px;
  border: 1px solid var(--border);
  word-break: break-all;
}

#dcp-wrap .cpe-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
}
#dcp-wrap .cpe-checkbox input { margin: 0; }

/* "+ Add FFEC" buttons in the marker hints pane. Smaller variant of
   the section copy-btn so the row stays compact. */
#dcp-wrap .marker-add-btn {
  font-size: 10px;
  padding: 2px 8px;
}

/* ─── ISDCF tokens ─────────────────────────────── */
#dcp-wrap .isdcf-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
}
#dcp-wrap .isdcf-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}
#dcp-wrap .isdcf-token .key {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
/* Highlight chips that the auditor flagged — unrecognized tokens
   (couldn't be placed into an ISDCF slot) and aspect tokens that
   disagree with the CPL picture aspect. The yellow tint matches the
   warn-text color used elsewhere in the comp-block, with a slightly
   stronger border so the chip reads as a soft warning at a glance. */
#dcp-wrap .isdcf-token.isdcf-token-warn {
  color: var(--warn);
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.08);
}
#dcp-wrap .isdcf-token.isdcf-token-warn .key {
  color: var(--warn);
  opacity: 0.85;
}

/* In-pane progress bar shown while dcpRunAudioAnalysis is decoding PCM.
   Lives inside #dcp-audio so progress stays visible after the floating
   banner auto-dismisses (the banner stays up for the longer running
   tasks but multi-reel audio is the slowest job in the inspector). */
#dcp-wrap .audio-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
#dcp-wrap .audio-progress-label {
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.3px;
}
#dcp-wrap .audio-progress-track {
  position: relative;
  height: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
#dcp-wrap .audio-progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--accent);
  width: 0%;
  /* No CSS transition — driven by the rAF smoother. See the same
     comment on .hash-progress-bar for rationale. */
}
#dcp-wrap .audio-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  color: var(--text-dim);
}

/* ─── Audio meters ────────────────────────────── */
#dcp-wrap .audio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
#dcp-wrap .audio-card {
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 10px 12px;
}
#dcp-wrap .audio-card .ac-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
#dcp-wrap .audio-card .ac-value {
  font-family: 'Menlo','Consolas',monospace;
  font-size: 16px;
  color: var(--text);
}
#dcp-wrap .audio-card .ac-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

#dcp-wrap .channel-bars {
  display: grid;
  /* idx | name | bar | rms-label | rms-num | peak-label | peak-num
     Labels are sized to max-content; numerics get a fixed-ish min width so
     "−40.5 dB" and "−101.5 dB" line up right-justified across rows. */
  grid-template-columns: max-content max-content 1fr max-content max-content max-content max-content;
  gap: 4px 8px;
  margin-top: 8px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  align-items: center;
}
#dcp-wrap .channel-bars .ch-num-idx {
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}
#dcp-wrap .channel-bars .ch-name  { color: var(--text-muted); }
#dcp-wrap .channel-bars .ch-label { color: var(--text-muted); text-align: left; padding-left: 8px; }
#dcp-wrap .channel-bars .ch-num   { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; min-width: 8ch; }
#dcp-wrap .channel-bars .ch-num.is-peak { color: var(--text-dim); }
#dcp-wrap .channel-bars .ch-bar {
  height: 6px;
  background: var(--surface3);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
#dcp-wrap .channel-bars .ch-bar > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ok);
}
#dcp-wrap .channel-bars .ch-bar.silent > span { background: var(--bad); }
#dcp-wrap .channel-bars .ch-bar.hot    > span { background: var(--warn); }

/* Clickable header pills (warn / fail) jump to the relevant entry in
   the Compliance Checks pane. The hover state hints at the action. */
#dcp-wrap .pill.pill-clickable {
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s, transform 0.05s;
}
#dcp-wrap .pill.pill-clickable:hover { filter: brightness(1.25); }
#dcp-wrap .pill.pill-clickable:active { transform: translateY(1px); }

/* Flash animation when the user jumps from a header pill into a
   compliance row. Tinted by status — warn rows pulse yellow, fail rows
   pulse red — so the eye lands on the right entry immediately. */
@keyframes dcp-flash-warn {
  0%   { background: rgba(250,204,21,0.35); }
  100% { background: transparent; }
}
@keyframes dcp-flash-fail {
  0%   { background: rgba(248,113,113,0.35); }
  100% { background: transparent; }
}
#dcp-wrap .compliance-table tr.check-warn.jump-flash td { animation: dcp-flash-warn 1.5s ease-out 1; }
#dcp-wrap .compliance-table tr.check-fail.jump-flash td { animation: dcp-flash-fail 1.5s ease-out 1; }

/* ─── Compliance check groups ────────────────────── */
#dcp-wrap .compliance-group { margin-top: 14px; }
#dcp-wrap .compliance-group:first-child { margin-top: 0; }
/* Per-CPL grouping for multi-CPL packages. Each block wraps the
   per-CPL compliance categories with a small header so it's clear
   which CPL the results below belong to. Single-CPL packages skip
   this wrapper entirely. */
#dcp-wrap .compliance-cpl-block {
  margin-top: 22px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
#dcp-wrap .compliance-cpl-block:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
#dcp-wrap .compliance-cpl-head {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
  padding-bottom: 4px;
}
#dcp-wrap .compliance-cpl-title {
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Menlo', 'Consolas', monospace;
  color: var(--text);
}
#dcp-wrap .compliance-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border);
}
#dcp-wrap .compliance-group-title {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.8px;
}
#dcp-wrap .compliance-group-count {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}
#dcp-wrap .compliance-table { margin-top: 4px; }
#dcp-wrap .compliance-table tbody td {
  padding: 6px 8px 6px 0;
  font-size: 11px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
#dcp-wrap .compliance-table tbody tr:last-child td { border-bottom: none; }
#dcp-wrap .compliance-table tr.check-fail td:first-child { color: var(--bad); }
#dcp-wrap .compliance-table tr.check-warn td:first-child { color: var(--warn); }
#dcp-wrap .compliance-table tr.check-pass td:first-child { color: var(--text-muted); }
#dcp-wrap .compliance-table tr.check-skip td:first-child { color: var(--text-dim); font-style: italic; }
#dcp-wrap .compliance-table tr.check-hint td:first-child { color: var(--info); }

/* Sub-bullet list rendered beneath a check's headline message — used
   for roll-up checks (e.g. DCNC) that summarise multiple sub-issues so
   the user can see *what* failed, not just *that* something failed. */
#dcp-wrap .compliance-table .check-details {
  margin: 4px 0 0 0;
  padding-left: 18px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: normal;
  list-style: disc;
}
#dcp-wrap .compliance-table .check-details li {
  margin-top: 2px;
  line-height: 1.4;
}
#dcp-wrap .compliance-table tr.check-warn .check-details { color: var(--text-muted); }
#dcp-wrap .compliance-table tr.check-fail .check-details { color: var(--text-muted); }

/* ─── Timeline View ──────────────────────────────── */
/* Lays out per-reel essence tracks on a single composition clock.
   Each row is { label | track }; the track is an absolutely-
   positioned canvas where segments and pins sit at `left:X%` /
   `width:X%` relative to the total composition duration. */
#dcp-wrap .timeline-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
#dcp-wrap .timeline-lane-chip {
  border-color: var(--border-light);
  color: var(--text);
  background: var(--surface3);
}
#dcp-wrap .timeline-lane-chip-picture  { border-color: rgba(96,165,250,0.55); background: rgba(96,165,250,0.10); color: var(--info); }
#dcp-wrap .timeline-lane-chip-sound    { border-color: rgba(52,211,153,0.55); background: rgba(52,211,153,0.10); color: var(--ok); }
#dcp-wrap .timeline-lane-chip-subtitle { border-color: rgba(250,204,21,0.55); background: rgba(250,204,21,0.10); color: var(--warn); }
#dcp-wrap .timeline-lane-chip-caption  { border-color: rgba(244,114,182,0.55); background: rgba(244,114,182,0.10); color: #f9a8d4; }
#dcp-wrap .timeline-lane-chip-aux      { border-color: var(--border-light); background: var(--surface3); color: var(--text-muted); }

#dcp-wrap .timeline-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#dcp-wrap .timeline-row {
  display: flex;
  align-items: stretch;
  min-height: 22px;
}
#dcp-wrap .timeline-row-label {
  flex: 0 0 110px;
  min-width: 110px;
  max-width: 110px;
  padding-right: 10px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  align-self: center;
  text-align: right;
  white-space: nowrap;
}
#dcp-wrap .timeline-row-track {
  position: relative;
  flex: 1;
  height: 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

/* Ruler row: ticks for major time positions. The track itself is
   borderless and short — it's a label strip, not a lane. */
#dcp-wrap .timeline-row-ruler .timeline-row-track {
  height: 22px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
}
#dcp-wrap .timeline-tick {
  position: absolute;
  top: 0;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 9px;
  color: var(--text-muted);
}
#dcp-wrap .timeline-tick-mark {
  width: 1px;
  height: 6px;
  background: var(--border-light);
  margin-bottom: 2px;
}
#dcp-wrap .timeline-tick-label { line-height: 1; }
#dcp-wrap .timeline-tick-center {
  transform: translateX(-50%);
  text-align: center;
}
#dcp-wrap .timeline-tick-center .timeline-tick-mark { margin-left: auto; margin-right: auto; }
#dcp-wrap .timeline-tick-end {
  transform: translateX(-100%);
  text-align: right;
}
#dcp-wrap .timeline-tick-end .timeline-tick-mark { margin-left: auto; }
#dcp-wrap .timeline-tick-start { text-align: left; }

/* Reel header strip — one block per reel. Reads as a compact bar
   above the tracks so the reel boundaries are visible without
   needing dividers in every lane. */
#dcp-wrap .timeline-row-reels .timeline-row-track {
  height: 20px;
  background: transparent;
  border: none;
}
#dcp-wrap .timeline-reel-block {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border-light);
}
#dcp-wrap .timeline-reel-block:first-child { border-left: 1px solid var(--border); }
/* Sticky "Reel N" caption — clamped to the visible portion of the
   reel block by dcpRenderTimeline. pointer-events:none keeps hover
   on the underlying block (so the block's title tooltip still fires). */
#dcp-wrap .timeline-reel-label {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}
#dcp-wrap .timeline-reel-label > span {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Lane segments. Each segment is positioned by left/width
   percentages calculated against the total composition duration.
   The colored bar is one element; the filename label is a sibling
   overlay clamped to the visible portion so it follows the viewport. */
#dcp-wrap .timeline-segment {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border: 1px solid;
  cursor: default;
}
#dcp-wrap .timeline-seg-label {
  position: absolute;
  top: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 10px;
  font-family: 'Menlo', 'Consolas', monospace;
  color: var(--text);
  pointer-events: none;
}
#dcp-wrap .timeline-seg-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#dcp-wrap .timeline-seg-picture  { background: rgba(96,165,250,0.28); border-color: rgba(96,165,250,0.70); }
#dcp-wrap .timeline-seg-sound    { background: rgba(52,211,153,0.25); border-color: rgba(52,211,153,0.70); }
#dcp-wrap .timeline-seg-subtitle { background: rgba(250,204,21,0.22); border-color: rgba(250,204,21,0.70); }
#dcp-wrap .timeline-seg-caption  { background: rgba(244,114,182,0.20); border-color: rgba(244,114,182,0.65); }
#dcp-wrap .timeline-seg-aux      { background: var(--surface3);         border-color: var(--border-light); color: var(--text-muted); }
/* Lock-icon affix for encrypted segment labels. The bar stays plain;
   the icon rides next to the filename on the sticky label overlay. */
#dcp-wrap .timeline-seg-label.timeline-seg-encrypted::after {
  content: '🔒';
  margin-left: 6px;
  font-size: 9px;
  opacity: 0.75;
}
/* When the sticky label is narrower than its text can usefully render,
   `dcpRenderTimeline()` tags it `timeline-label-cramped` so the inner
   text hides instead of degrading to a single clipped glyph. The
   title tooltip keeps the filename reachable on hover. */
#dcp-wrap .timeline-seg-label.timeline-label-cramped > span,
#dcp-wrap .timeline-reel-label.timeline-label-cramped > span { display: none; }
#dcp-wrap .timeline-seg-label.timeline-label-cramped { padding: 0; }

/* Row-track clipping so elements positioned outside the visible
   zoom range (negative left, left > 100%) don't bleed into adjacent
   rows. We use overflow-x:clip + overflow-y:visible (where supported)
   so marker labels above the marker track stay visible. */
#dcp-wrap .timeline-row-track {
  overflow-x: hidden;
}
#dcp-wrap .timeline-row-markers .timeline-row-track {
  overflow: visible;   /* let marker label badges escape the top edge */
}

/* Zoom rubber-band drawn while the user click-drags. Lives inside the
   timeline-container at z-index above the row-tracks. */
#dcp-wrap .timeline-container { position: relative; cursor: crosshair; }
#dcp-wrap .timeline-container.timeline-panning { cursor: grabbing; }
#dcp-wrap .timeline-zoom-rubberband {
  position: absolute;
  background: rgba(96,165,250,0.18);
  border: 1px solid rgba(96,165,250,0.70);
  pointer-events: none;
  z-index: 10;
}

/* Persistent vertical playhead placed by a click anywhere on the
   timeline track area. The overlay starts at the label-gutter edge
   (110px) and spans the rest of the container, so the cursor's
   `left: X%` is interpreted as a percentage of the *track* width
   (matching tToPct's reference frame) rather than the whole row. */
#dcp-wrap .timeline-cursor-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 110px;
  right: 0;
  pointer-events: none;
  z-index: 8;
}
#dcp-wrap .timeline-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(96,165,250,0.90);
  box-shadow: 0 0 4px rgba(96,165,250,0.55);
}
#dcp-wrap .timeline-cursor-label {
  position: absolute;
  top: 2px;
  left: 0;
  background: var(--surface3);
  border: 1px solid rgba(96,165,250,0.55);
  color: var(--info);
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  white-space: nowrap;
  line-height: 1.2;
}
/* Edge-aware anchoring for the cursor's timecode badge — mirrors
   the marker-anchor classes. */
#dcp-wrap .timeline-cursor-anchor-center .timeline-cursor-label { transform: translateX(-50%); }
#dcp-wrap .timeline-cursor-anchor-left   .timeline-cursor-label { transform: none; }
#dcp-wrap .timeline-cursor-anchor-right  .timeline-cursor-label { transform: translateX(-100%); }
#dcp-wrap .timeline-hint {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

/* Zoom-status chip — appears in the summary row when the user has
   zoomed in. Click resets to full. */
#dcp-wrap .timeline-zoom-chip {
  cursor: pointer;
  font-family: 'Menlo', 'Consolas', monospace;
  text-transform: none;
  letter-spacing: 0.2px;
}
#dcp-wrap .timeline-zoom-chip:hover {
  background: rgba(96,165,250,0.20);
  border-color: rgba(96,165,250,0.70);
}

/* Lane-expand chevron — sits in the row-label gutter on lanes that
   have caption/subtitle cues. Click toggles the cue-strip row. */
#dcp-wrap .timeline-row-label .timeline-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 0 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface3);
  border: 1px solid var(--border);
  cursor: pointer;
  height: 14px;
  line-height: 1;
  vertical-align: middle;
}
#dcp-wrap .timeline-expand-btn:hover {
  color: var(--text);
  border-color: var(--border-light);
}
#dcp-wrap .timeline-expand-btn.is-expanded {
  color: var(--info);
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.10);
}
#dcp-wrap .timeline-expand-caret { font-size: 8px; line-height: 1; }
#dcp-wrap .timeline-expand-count { font-variant-numeric: tabular-nums; }

/* Cue strip — a thin row beneath an expanded caption/subtitle lane,
   one block per cue. Hover surfaces the cue text via the title
   attribute (browser-native tooltip). The blocks themselves stay
   visually quiet so we don't get a wall of color on long features. */
#dcp-wrap .timeline-row-cues { min-height: 14px; }
#dcp-wrap .timeline-row-cues .timeline-row-track {
  height: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
#dcp-wrap .timeline-row-label-cues {
  color: var(--text-dim);
  font-size: 8px;
  letter-spacing: 0.5px;
}
#dcp-wrap .timeline-cue {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: rgba(250,204,21,0.55);
  border-left: 1px solid rgba(250,204,21,0.85);
  cursor: help;
  min-width: 1px;
}
#dcp-wrap .timeline-cue:hover { background: rgba(250,204,21,0.95); }
#dcp-wrap .timeline-cue-caption {
  background: rgba(244,114,182,0.45);
  border-left-color: rgba(244,114,182,0.85);
}
#dcp-wrap .timeline-cue-caption:hover { background: rgba(244,114,182,0.95); }

/* Instant tooltip for caption-cue hover previews. Lives at the body
   level so its z-index can sit above everything and it isn't clipped
   by any container's overflow:hidden. `white-space: pre-line` lets the
   tipLines newline-joined string render with line breaks. */
.dcp-tl-tip {
  position: fixed;
  z-index: 10000;
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,0.20);
  color: #e9e9e9;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.45;
  padding: 6px 9px;
  pointer-events: none;
  white-space: pre-line;
  max-width: 520px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Marker lane sits above the tracks. Pins are tall narrow stems
   with a small label badge — keep them visually distinct from the
   lane segments so the marker timing reads at a glance. */
#dcp-wrap .timeline-row-markers { min-height: 34px; }
#dcp-wrap .timeline-row-markers .timeline-row-track {
  height: 34px;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border);
}
/* Marker pin: a zero-width anchor at the exact marker time.
   The stem (vertical line) sits centered on that anchor, and the
   label is positioned absolutely with its own anchor class so it
   can shift independently when the marker sits near a timeline edge
   (otherwise a label at left:0% / 100% would extend past the
   timeline's visible bounds). */
#dcp-wrap .timeline-marker-pin {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: auto;
}
#dcp-wrap .timeline-marker-stem {
  position: absolute;
  top: 14px;       /* leave room above for the label badge */
  bottom: 0;
  left: -0.5px;    /* center the 1px line on the anchor */
  width: 1px;
  background: var(--text-muted);
}
#dcp-wrap .timeline-marker-label {
  position: absolute;
  top: 0;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 8.5px;
  letter-spacing: 0.4px;
  padding: 1px 4px;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.2;
}
/* Edge-aware anchors: center on stem for the middle of the timeline,
   align to the left/right edge of the visible area otherwise. */
#dcp-wrap .timeline-marker-anchor-center .timeline-marker-label { left: 0; transform: translateX(-50%); }
#dcp-wrap .timeline-marker-anchor-left   .timeline-marker-label { left: 0; transform: none; }
#dcp-wrap .timeline-marker-anchor-right  .timeline-marker-label { left: 0; transform: translateX(-100%); }
#dcp-wrap .timeline-marker-first .timeline-marker-stem { background: var(--ok); }
#dcp-wrap .timeline-marker-first .timeline-marker-label { color: var(--ok); border-color: rgba(52,211,153,0.45); }
#dcp-wrap .timeline-marker-last  .timeline-marker-stem { background: var(--warn); }
#dcp-wrap .timeline-marker-last  .timeline-marker-label { color: var(--warn); border-color: rgba(250,204,21,0.45); }
#dcp-wrap .timeline-marker-other .timeline-marker-stem { background: var(--info); }
#dcp-wrap .timeline-marker-other .timeline-marker-label { color: var(--info); border-color: rgba(96,165,250,0.45); }

/* ─── Marker Hints (MainMarkers from CPL) ────────── */
#dcp-wrap .marker-group { margin-top: 14px; }
#dcp-wrap .marker-group:first-child { margin-top: 0; }
#dcp-wrap .marker-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
/* Container for the "+ Add FFOC" / "+ Add LFOC" buttons that live in
   the group head (instead of inside the marker table — the table was
   pushed off the right edge with that extra column). */
#dcp-wrap .marker-group-add {
  display: inline-flex;
  gap: 4px;
}
#dcp-wrap .marker-group-add:empty { display: none; }

/* Editable marker rows — appear only in edit mode. The Frame Offset
   and Annotation columns become inputs, and a delete button rides at
   the right of each row. The fixed table-layout from the read-only
   variant is relaxed here so the input columns flex to fill space. */
#dcp-wrap .marker-table-editable { table-layout: auto; }
#dcp-wrap .marker-table-editable .cpe-marker-offset {
  width: 130px;
  font-family: 'Menlo','Consolas',monospace;
}
#dcp-wrap .marker-edit-row td { padding: 4px 6px 4px 0; }
/* Live-converted timecode hint shown next to the offset input.
   Whatever the user types (frames or HH:MM:SS:FF) gets resolved
   into a canonical TC and surfaced here so they can see what their
   value maps to. */
#dcp-wrap .cpe-marker-tc-hint {
  display: inline-block;
  margin-left: 6px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 10px;
  color: var(--text-dim);
  vertical-align: middle;
}

/* Header cells in the marker table need the same left-padding as the
   body cells so column contents line up under their headers. The
   col-mono class on body cells adds padding-left:12px; headers
   inherit that here for the columns that use col-mono. */
#dcp-wrap .marker-table thead th:nth-child(1),
#dcp-wrap .marker-table thead th:nth-child(3),
#dcp-wrap .marker-table thead th:nth-child(4),
#dcp-wrap .marker-table thead th:nth-child(5) {
  padding-left: 12px;
}
#dcp-wrap .marker-group-title {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.8px;
}
#dcp-wrap .marker-group-codes {
  margin-left: auto;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}
#dcp-wrap .marker-group-summary {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: var(--text);
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--surface3);
  border-left: 2px solid var(--info);
}
/* Marker hint tables: lock column widths so the four rendered tables
   (one per section group) share identical column proportions, even
   when their content differs. Without table-layout: fixed each table
   auto-sizes independently and the columns visibly drift between
   groups. */
#dcp-wrap .marker-table {
  margin-top: 8px;
  font-size: 11px;
  table-layout: fixed;
  width: 100%;
}
#dcp-wrap .marker-table thead th,
#dcp-wrap .marker-table tbody td {
  padding: 4px 8px 4px 0;
  vertical-align: top;
}
#dcp-wrap .marker-table tbody td {
  border-bottom: 1px solid var(--border);
}
#dcp-wrap .marker-table tbody tr:last-child td { border-bottom: none; }
/* Column widths shared across every marker group's table. */
#dcp-wrap .marker-table th:nth-child(1),
#dcp-wrap .marker-table td:nth-child(1) { width: 60px; }   /* Label */
#dcp-wrap .marker-table th:nth-child(3),
#dcp-wrap .marker-table td:nth-child(3) { width: 110px; }  /* Timecode */
#dcp-wrap .marker-table th:nth-child(4),
#dcp-wrap .marker-table td:nth-child(4) { width: 110px; }  /* Frame */
#dcp-wrap .marker-table th:nth-child(5),
#dcp-wrap .marker-table td:nth-child(5) { width: 90px; }   /* Seconds */
#dcp-wrap .marker-table th:nth-child(6),
#dcp-wrap .marker-table td:nth-child(6) { width: 70px; }   /* Reel (when shown) */

/* "Not present" marker rows. Each marker section in DCP_MARKER_SECTIONS
   always renders, present or not — when absent we color the rows by
   requirement: required composition bounds in red, recommended-for-
   feature credits in yellow, plain optional sections in dim grey. */
#dcp-wrap .marker-table tr.marker-row-absent td {
  color: var(--text-dim);
  font-style: italic;
}
#dcp-wrap .marker-table tr.marker-row-warn td {
  color: var(--warn);
  background: rgba(250, 204, 21, 0.06);
}
#dcp-wrap .marker-table tr.marker-row-fail td {
  color: var(--bad);
  background: rgba(248, 113, 113, 0.06);
}
#dcp-wrap .marker-group-missing-recommended .marker-group-head {
  border-bottom-color: rgba(250, 204, 21, 0.35);
}
#dcp-wrap .marker-group-missing-required .marker-group-head {
  border-bottom-color: rgba(248, 113, 113, 0.35);
}

/* ─── Asset Cross-Reference table ────────────────── */
#dcp-wrap .assets-table .col-ref-head {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding: 4px 10px 4px 0;
}
#dcp-wrap .assets-table .col-size-head {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 14px;
}
#dcp-wrap .assets-table td.col-ref {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding: 5px 10px 5px 0;
}
#dcp-wrap .ref-cell {
  display: inline-block;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 700;
  width: 18px;
  text-align: center;
  line-height: 18px;
}
#dcp-wrap .ref-cell.ref-ok      { color: var(--ok); }
#dcp-wrap .ref-cell.ref-self    { color: var(--info); }
#dcp-wrap .ref-cell.ref-na      { color: var(--text-dim); }
#dcp-wrap .ref-cell.ref-warn    { color: var(--warn); }
#dcp-wrap .ref-cell.ref-bad     { color: var(--bad); }
#dcp-wrap .assets-table tr.missing-asset td {
  background: rgba(248,113,113,0.05);
}
#dcp-wrap .assets-table .asset-uuid {
  margin-top: 2px;
  font-size: 9px;
  font-family: 'Menlo', 'Consolas', monospace;
  color: var(--text-dim);
  letter-spacing: 0;
}

/* ─── Captions / Subtitles ───────────────────────── */
#dcp-wrap .caption-block {
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 14px 16px;
}
#dcp-wrap .caption-block .caption-head {
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
#dcp-wrap .caption-block .caption-head strong { color: var(--text); }
#dcp-wrap .caption-block .caption-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#dcp-wrap .caption-block .caption-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Prominent CCAP / OCAP / SUB badge so the caption type is the first
   thing the eye lands on in the pane. */
#dcp-wrap .caption-kind-badge {
  display: inline-block;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 0;
  text-transform: uppercase;
}
#dcp-wrap .caption-kind-badge.ccap {
  color: #34d399;
  border-color: rgba(52,211,153,0.45);
  background: rgba(52,211,153,0.10);
}
#dcp-wrap .caption-kind-badge.ocap {
  color: #60a5fa;
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.10);
}
#dcp-wrap .caption-kind-badge.sub {
  color: var(--text-muted);
  border-color: var(--border-light);
  background: var(--surface3);
}
#dcp-wrap .caption-block .caption-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
#dcp-wrap .caption-block .caption-toggle {
  display: flex;
  align-items: center;
}
#dcp-wrap .caption-block details > summary { outline: none; }

/* Caption preview area: cap the cue list height and let it scroll
   internally, so a feature-length caption file with hundreds of cues
   doesn't stretch the rest of the page off-screen. */
#dcp-wrap .cue-scroll {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#dcp-wrap .cue-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

/* Cue table — preserves newlines and highlights RDD52 violations. */
#dcp-wrap .cue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
#dcp-wrap .cue-table thead th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  text-align: left;
  font-weight: 600;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border);
}
/* Match the body-cell left padding on the # column header. */
#dcp-wrap .cue-table thead th:first-child { padding-left: 12px; }
#dcp-wrap .cue-table tbody td {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
#dcp-wrap .cue-table tbody tr:last-child td { border-bottom: none; }
#dcp-wrap .cue-table tbody tr.violation { background: rgba(250,204,21,0.05); }
#dcp-wrap .cue-table tbody tr.violation td { border-bottom-color: rgba(250,204,21,0.2); }
#dcp-wrap .cue-table .col-num {
  width: 1%;
  white-space: nowrap;
  color: var(--text-muted);
  padding-left: 12px;
  padding-right: 12px;
  font-size: 10px;
}
#dcp-wrap .cue-table .col-tc {
  width: 1%;
  white-space: nowrap;
  font-family: 'Menlo','Consolas',monospace;
  color: var(--text-dim);
  padding-right: 14px;
}
#dcp-wrap .cue-table .col-text pre {
  margin: 0;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}
/* Tighten the captions audit-grid minmax so all five HUD cards fit
   on a single line at typical viewport widths. The default
   audio-grid uses 220px which forces a wrap when there are 5 cards.
   Caption-specific override drops to 160px so 5 × 160 = 800px + gaps
   fits comfortably in the chart-card. */
#dcp-wrap .audio-grid.cpe-caption-cards-host {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  #dcp-wrap .audio-grid.cpe-caption-cards-host {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Language editor row in caption edit mode. Full-width row above
   the audit cards. */
#dcp-wrap .caption-lang-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface3);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
#dcp-wrap .caption-lang-editor .cpe-slot-input {
  min-width: 240px;
  max-width: 320px;
}
/* Stateful hint span next to the language input. Updated in place
   by dcpEditCaptionLanguage as the user types — green check when
   the value resolves against the ISDCF registry, yellow warning
   when it doesn't (or has a hyphen, which belongs to the
   composition-title slot, not the SubtitleReel <Language>). */
#dcp-wrap .caption-lang-editor .caption-lang-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
#dcp-wrap .caption-lang-editor .caption-lang-hint-ok {
  color: var(--ok);
  font-style: normal;
}
#dcp-wrap .caption-lang-editor .caption-lang-hint-warn {
  color: var(--warn);
  font-style: normal;
}

/* Caption text textarea. Always present; gated by readonly attribute
   when not in edit mode so the cue table reads as a clean
   decomposition by default. The "Edit Captions" button in the head
   toggles the .cue-edit-on / .cue-edit-readonly modifier classes. */
#dcp-wrap .cue-table .col-text textarea.cue-edit {
  width: 100%;
  min-height: 1.5em;
  margin: 0;
  padding: 2px 4px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  box-sizing: border-box;
}
/* Read-only state — the default. No hover affordance, looks just
   like the old <pre> rendering. */
#dcp-wrap .cue-table .col-text textarea.cue-edit-readonly {
  cursor: default;
}
/* Edit-mode state — the textarea gains a subtle outline + hover
   background so the user can tell which cells are interactive. */
#dcp-wrap .cue-table .col-text textarea.cue-edit-on {
  background: var(--surface3);
  border-color: var(--border);
  resize: vertical;
}
#dcp-wrap .cue-table .col-text textarea.cue-edit-on:hover {
  border-color: var(--text-dim);
}
#dcp-wrap .cue-table .col-text textarea.cue-edit-on:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 1px var(--info);
}
/* `caption-warn` covers any RDD52 violation (line-count OR per-line
   character cap). `too-long-line` is a finer-grained marker for the
   character-cap subset; both are coloured yellow. */
#dcp-wrap .cue-table .col-text pre.caption-warn,
#dcp-wrap .cue-table .col-text pre.too-long-line,
#dcp-wrap .cue-table .col-text textarea.cue-edit.caption-warn,
#dcp-wrap .cue-table .col-text textarea.cue-edit.too-long-line { color: var(--warn); }

/* Reel badge in the caption block head — only rendered when the
   package has multiple caption-bearing reels. Compact uppercase
   monospace pill; differentiates from the CCAP/OCAP/SUB kind badge. */
#dcp-wrap .caption-reel-badge {
  display: inline-block;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-right: 4px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text-dim);
}

/* Encrypted-MXF read-only badge inside caption-block heads. Same
   shape as the reel badge but tinted warning-yellow so it reads as a
   capability constraint, not a metadata tag. */
#dcp-wrap .caption-readonly-badge {
  display: inline-block;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-left: 6px;
  border: 1px solid var(--warn, #c39a3a);
  background: rgba(195, 154, 58, 0.12);
  color: var(--warn, #c39a3a);
  cursor: help;
}
/* Encrypted-but-DKDM-unlocked badge — same shape as the read-only
   badge but tinted green so the user can tell at a glance that the
   block IS editable. The save path will re-encrypt under the same
   content key the DKDM grants. */
#dcp-wrap .caption-encrypted-badge {
  display: inline-block;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-left: 6px;
  border: 1px solid var(--ok, #4caf50);
  background: rgba(76, 175, 80, 0.12);
  color: var(--ok, #4caf50);
  cursor: help;
}