/* 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); }

/* ─── SECTION HEADINGS ───────────────────────── */
#dcp-wrap .section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  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);
}

#dcp-wrap .section-heading .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 .section-heading .copy-btn:hover { color: var(--text); border-color: var(--border-light); }
#dcp-wrap .section-heading .copy-btn:disabled { opacity: 0.5; cursor: default; }
#dcp-wrap .section-heading .copy-btn.running { color: var(--text); border-color: var(--border-light); }

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

#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) ─── */
#dcp-wrap #dcp-app-drop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
#dcp-wrap #dcp-app-drop-overlay.active { display: flex; }
#dcp-wrap #dcp-app-drop-overlay .overlay-icon { font-size: 48px; opacity: 0.6; }
#dcp-wrap #dcp-app-drop-overlay .overlay-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}
#dcp-wrap #dcp-app-drop-overlay .overlay-sub { font-size: 13px; color: var(--text-dim); }
#dcp-wrap #dcp-app-drop-overlay .overlay-ring {
  position: absolute;
  inset: 16px;
  border: 2px dashed var(--border-light);
  border-radius: 0;
  opacity: 0.6;
  pointer-events: none;
}

/* ─── STATUS / LOADING ───────────────────────── */
#dcp-wrap #dcp-status {
  position: relative;
  margin-bottom: 16px;
  padding: 8px 12px;
  font-size: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Menlo', 'Consolas', monospace;
  overflow: hidden;
}
#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;
}
#dcp-wrap #dcp-status.error {
  color: var(--bad);
  border-color: rgba(248,113,113,.4);
  background: rgba(248,113,113,.08);
}
#dcp-wrap #dcp-status.error::after { display: none; }

/* ─── 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;
}

/* ─── 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. */
#dcp-wrap .hash-progress,
#dcp-wrap .row-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  justify-content: flex-end;
}
#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);
  transition: width 80ms linear;
}
#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;
}

/* 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;
}

/* 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;
}

/* ─── 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; }
#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); }

/* ─── 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);
}