/* CineQC styles, part 5 of 5: Content Credentials, delivery sheet, markers, autosave, capability, focus, states, PDF brand, samples, projects, what's new. */
/* ── Content Credentials row (main report + Diff cards), v20261105 ── */
.credentials {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  margin-top: 0.75rem; padding: 0.7rem 0.9rem;
  background: var(--noir-onyx); border: 1px solid var(--glass-border); border-radius: 10px;
}
.cred-kicker { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.cred-badge { font-family: var(--font-mono); font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; }
.cred-good { color: #46d39a; }
.cred-warn { color: var(--qc-orange); }
.cred-bad { color: #ff5d6c; }
.cred-neutral { color: var(--text-secondary); }
.cred-ai { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #06080f; background: var(--qc-orange); padding: 0.18rem 0.5rem; border-radius: 4px; }
.cred-line { font-family: var(--font-mono); font-size: 0.85rem; flex: 1 1 18rem; }
.credentials .cred-open { margin-left: auto; }

/* ── Delivery check (Task 2b), v20261110 ── */
.delivery-panel {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--glass-border);
  border-radius: 0.5rem;
  background: var(--noir-onyx);
}
.delivery-panel h2 { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2rem); }
.dc-intro, .dc-hint, .dc-profile-note, .dc-source { color: var(--text-secondary); line-height: 1.6; max-width: 68rem; }
.dc-profile-note, .dc-source { font-size: 0.8rem; margin: 0.6rem 0; }
.dc-source a { color: var(--qc-orange); word-break: break-all; }
.dc-controls, .dc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.9rem 1.2rem; margin: 1rem 0; align-items: end; }
.dc-field { display: grid; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-secondary); }
.dc-field { min-width: 0; }   /* a long profile name must not widen the page at 390 px (WCAG 1.4.10) */
.dc-field input, .dc-field select {
  width: 100%; max-width: 100%; min-width: 0;
  font: inherit; font-size: 0.85rem; color: var(--text-primary); background: var(--noir-void);
  border: 1px solid var(--glass-border); border-radius: 0.3rem; padding: 0.55rem 0.65rem; min-height: 2.4rem;
}
.dc-field input:focus-visible, .dc-field select:focus-visible, .dc-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-captions { border: 1px dashed var(--glass-border); border-radius: 0.4rem; padding: 0.6rem 0.8rem; }
.dc-captions.dc-drag { border-color: var(--accent); }
.dc-check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--text-primary); }
.dc-overall-wrap { margin: 1rem 0 0.5rem; }
.dc-overall { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; padding: 0.45rem 0.9rem; border-radius: 0.4rem; border: 1px solid currentColor; }
.dc-overall.dc-pass { color: var(--ok, #46d39a); }
.dc-overall.dc-warn { color: var(--qc-orange); }
.dc-overall.dc-fail { color: var(--accent2, #ff5d6c); }
.dc-sheet { overflow-x: auto; }
.dc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dc-table th, .dc-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.dc-table thead th { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.dc-table tbody th { font-weight: 600; color: var(--text-primary); }
.dc-measured { font-family: var(--font-mono); white-space: nowrap; }
.dc-tol { color: var(--text-secondary); font-size: 0.75rem; }
.dc-note { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.5; min-width: 14rem; }
.dc-pill { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.dc-pill.dc-pass { color: var(--ok, #46d39a); }
.dc-pill.dc-warn { color: var(--qc-orange); }
.dc-pill.dc-fail { color: var(--accent2, #ff5d6c); }
.dc-pill.dc-not-checked { color: var(--text-secondary); }
.dc-reported { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 1rem 0 0; }
.dc-reported div { display: grid; gap: 0.1rem; }
.dc-reported dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.dc-reported dd { margin: 0; font-family: var(--font-mono); font-size: 0.9rem; }
.dc-profiles { margin-top: 1.4rem; border-top: 1px solid var(--glass-border); padding-top: 1rem; }
.dc-profiles summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; }
.dc-profiles summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dc-actions .export-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dc-msg { min-height: 1.4em; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); }

@media print {
  .pc-h2 { font-size: 15px; margin: 18px 0 4px; }
  .pc-delivery-verdict { font-weight: 700; margin: 0 0 6px; }
  .pc-delivery-verdict.pc-fail { color: #b00020; }
  .pc-delivery th, .pc-delivery td { font-size: 11px; }
  .pc-delivery { page-break-inside: avoid; }
}

/* Export markers (scorer report and Diff) */
.marker-export { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.marker-export-target {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary);
  background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.18)); border-radius: 8px; padding: 0.55rem 0.6rem;
}
.marker-export-target option { color: #111; }
.marker-export-note { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); max-width: 32rem; }

/* Session autosave: Restore bar shown when a file already scored here is dropped again. */
.autosave-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--accent); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.autosave-bar[hidden] { display: none; }
.autosave-bar p { margin: 0; color: var(--text-primary); }
.autosave-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Upfront capability check and Copy diagnostics. */
.capability-note { margin: 0.75rem 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--qc-orange); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.capability-note[hidden] { display: none; }
.capability-note p { margin: 0; color: var(--text-primary); }
.capability-note p + p { margin-top: 0.4rem; }
.diag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }
.diag-check { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-secondary, inherit); }
.diag-msg { color: var(--text-secondary, inherit); }
.diag-text { flex-basis: 100%; width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; background: rgba(0, 0, 0, 0.35); color: var(--text-primary); border: 1px solid var(--border, rgba(255, 255, 255, 0.15)); border-radius: 8px; padding: 0.6rem; }
.diag-text[hidden] { display: none; }

/* Browser matrix note: shown before a drop when this browser cannot do frame-exact capture. */
.browser-note { margin: 0.75rem 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--qc-orange); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.browser-note[hidden] { display: none; }
.browser-note p { margin: 0; color: var(--text-primary); }

/* Accessibility: one visible focus ring for every keyboard stop (WCAG 2.4.7, 2.4.11), tab-stop scrollers, skipped batch clips. */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.batch-table-wrap[tabindex]:focus-visible, .dc-sheet[tabindex]:focus-visible { outline-offset: -2px; }
.bt-skipped { margin: 0.75rem 0 0; padding: 0.6rem 0.9rem; border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; }
.bt-skipped p { margin: 0 0 0.3rem; color: var(--text-primary); }
.bt-skipped ul { margin: 0; padding-left: 1.1rem; }
/* Designed states: empty, loading, error. One family, so they read as one product. */
.qc-state { padding: 1.25rem 1.4rem; border-left: 3px solid var(--accent); background: var(--noir-onyx); color: var(--text-secondary); }
.qc-state[data-kind="error"], .capability-note[data-level="block"] { border-left-color: #ff5d6c; }
.qc-state-title { display: block; margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 800; color: var(--text-primary); }
.capability-note, .browser-note { border-left-width: 3px; }
.capability-note[data-level="block"] { border-color: #ff5d6c; }
.qc-eta { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); }
.qc-eta:empty, .qc-progress[hidden] + .qc-eta { display: none; }
.qc-eta::before { content: ""; flex: 0 0 auto; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: qcSpin 0.9s linear infinite; }
@keyframes qcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qc-eta::before { animation: none; } }
/* PDF details panel (client, project, reviewer, logo) and the branded print scorecard */
.brand-panel { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); border-radius: 10px; }
.brand-panel summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary); }
.brand-panel summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin-top: 0.75rem; align-items: end; }
.brand-logo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); }
.brand-logo-preview { max-height: 2.5rem; max-width: 8rem; background: #fff; border-radius: 4px; padding: 2px; }
.brand-pick { cursor: pointer; }
.brand-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

@page scorecard { margin: 16mm 14mm 18mm; }
@media print {
  #print-scorecard { page: scorecard; }
  .pc-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #ccc; }
  .pc-logo { max-height: 56px; max-width: 160px; object-fit: contain; }
  .pc-brand-fields { display: grid; gap: 2px; font-size: 12px; }
  .pc-brand-fields span { display: inline-block; min-width: 64px; color: #666; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
  .pc-brandline { margin: 14px 0 0; font-size: 11px; color: #555; }
  .pc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 22px; page-break-inside: avoid; }
  .pc-sign-line { border-bottom: 1px solid #111; padding: 14px 0 3px; font-size: 12px; min-height: 18px; }
  .pc-sign-line span { display: block; margin-top: -12px; margin-bottom: 4px; color: #666; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
}
/* Try a sample (scorer, Diff, Provenance) */
.try-sample { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text-secondary, #aaa); }
.try-sample-lead { color: var(--text-primary, #fff); }
.try-sample-note { flex-basis: 100%; line-height: 1.5; }
.try-sample-msg { flex-basis: 100%; min-height: 1.2em; }
.try-sample-btn:disabled { opacity: 0.5; cursor: progress; }
/* Projects and history */
.projects-panel { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); border-radius: 10px; }
.projects-panel summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary); }
.projects-panel summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pj-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0; align-items: end; }
.pj-empty { color: var(--text-secondary); }
.pj-project { margin-top: 1rem; }
.pj-project-head, .pj-shot-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pj-project-head h3 { margin: 0; font-size: 1rem; }
.pj-project-head .export-btn { margin-left: auto; }
.pj-shot { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); border-radius: 8px; }
.pj-shot-head { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); }
.pj-shot-head strong { color: var(--text-primary); }
.pj-spark { color: var(--accent); }
.pj-latest { color: var(--text-primary); }
.pj-shot-head .export-btn { margin-left: auto; }
.pj-shot summary { cursor: pointer; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary); }
.pj-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.75rem; }
.pj-table th, .pj-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); }
/* What's new panel (scorer) and changelog (methodology) */
.whats-new { margin: 0 0 1rem; padding: 0.6rem 1rem; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); border-radius: 10px; }
.whats-new summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary); }
.whats-new summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wn-title { margin: 0.75rem 0 0.4rem; font-size: 1rem; }
.wn-list, .wn-items { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; line-height: 1.6; color: var(--text-secondary); }
.wn-more { margin: 0.25rem 0 0; font-size: 0.85rem; }
.qcg-metric h3 small { font-weight: 400; opacity: 0.7; margin-left: 0.5rem; }