/* ============================================================
   Paragon Content Engine — Operator-ux surfaces (2026-09-02)
   Sign-off queue, New video, batch bar, dashboard cards, nav badge.
   Brand-locked (tokens.css); status colors on data pills only.
   Every tap target on these screens is >= 44 px (.btn.tap, .check).
   ============================================================ */

/* Touch targets (WCAG 2.5.5): the primary/secondary actions on the operator
   screens and every checkbox label hit box. */
.btn.tap { min-height: 44px; min-width: 44px; padding: 0.6rem 1.1rem; touch-action: manipulation; }
label.check {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 var(--sp-2); cursor: pointer; touch-action: manipulation;
}
label.check input { width: 1.15rem; height: 1.15rem; margin: 0; }

/* Sidebar count badge (the sign-off queue). Bone-on-dusty reads on the cocoa
   sidebar; the aria-label carries the count for AT. */
.nav-badge {
  margin-left: auto; min-width: 1.5rem; padding: 0 0.45rem;
  border-radius: var(--radius-pill); background: var(--dusty-blue-soft); color: var(--cocoa); /* 7:1 on the soft blue; the base dusty was 4.5:1 */
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; text-align: center;
  line-height: 1.5rem;
}
.nav-link.active .nav-badge { background: var(--bone); }

/* A cross-navigation notice (components/flash.js): the previous view's partial
   failure, rendered inline at the top of the page it lands on. Text carries
   the state; the border is a cue, not the message. */
.flash {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--st-flagged); background: var(--card-deep); color: var(--cocoa);
  border-radius: var(--radius-sm); overflow-wrap: anywhere;
}

/* A deep-linked section (#/idea/x?section=drafts) lands with breathing room. */
section.anchor { scroll-margin-top: var(--sp-4); outline: none; }

/* ---- Sign-off queue ---- */
.so-list { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 46rem; }
.so-item { padding: var(--sp-4) var(--sp-5); }
.so-head { gap: var(--sp-2); }
.so-title { font-size: var(--fs-h3); margin: var(--sp-2) 0 0; overflow-wrap: anywhere; text-wrap: pretty; }
.so-title a { color: var(--cocoa); }
.so-draft { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rule-soft); }
.so-draft-head { gap: var(--sp-2); }
.so-pills { gap: var(--sp-2); }
/* A long draft scrolls inside its own box rather than pushing the actions off
   the first screen; the text stays fully readable. */
.so-item .draft-content { max-height: 24rem; overflow: auto; }
.so-findings { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.so-findings li { line-height: var(--lh-tight); }
.so-clean { margin-top: var(--sp-3); }
.so-blocked { margin: var(--sp-2) 0 0; color: var(--st-flagged-text); }
.so-blocked a { color: var(--dusty-ink-deep); text-decoration: underline; }
.so-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.so-note {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--card-deep); border-radius: var(--radius-sm);
}
.so-note label { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusty-ink); margin-bottom: var(--sp-1); }
.so-note .inp { width: 100%; }
.so-note .so-actions { margin-top: var(--sp-3); }
@media (max-width: 620px) {
  .so-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Batch bar (Pipeline multi-select) ---- */
.batch-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-card);
}
.batch-bar.is-empty { display: none; }
.batch-count { font-weight: 600; color: var(--cocoa); }
.batch-cap { margin-left: auto; }
.batch-progress { flex-basis: 100%; color: var(--dusty-ink-deep); min-height: 1.2em; }
.batch-progress:empty { display: none; }
.batch-pick { margin-left: auto; }

/* ---- New video ---- */
.nv-form { max-width: 46rem; }
.nv-form textarea { min-height: 12rem; font-family: var(--font-sans); line-height: var(--lh-body); }
.nv-form .row.between { align-items: center; }

/* ---- Video section: transcript summary + form ---- */
.video-meta { margin-top: var(--sp-3); }
.video-meta-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.video-hooks { margin: var(--sp-1) 0 0; padding-left: 1.2rem; color: var(--cocoa-soft); }
.video-transcript { margin-top: var(--sp-3); }
.video-transcript textarea { font-family: var(--font-sans); line-height: var(--lh-body); }
[data-transcript-toggle] { margin-top: var(--sp-3); }

/* ---- Dashboard (operator's morning) ---- */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.dash-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-card .btn { align-self: flex-start; }
.dash-card > * { min-width: 0; }
.dash-video { border-left: 3px solid var(--dusty-blue); }
.dash-n { font-family: var(--font-mono); color: var(--cocoa); text-transform: none; letter-spacing: 0; }
.dash-counts { display: flex; flex-direction: column; gap: var(--sp-1); color: var(--cocoa); }
.dash-section { margin-bottom: var(--sp-4); }
.dash-section > .row.between { gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dash-list { display: flex; flex-direction: column; }
.dash-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0; border-top: 1px solid var(--rule-soft); min-width: 0;
}
.dash-row:first-child { border-top: 0; }
.dash-row .t { flex: 1 1 14rem; min-width: 0; color: var(--cocoa); text-decoration: none; overflow-wrap: anywhere; }
.dash-row a.t:hover { text-decoration: underline; color: var(--dusty-ink-deep); }
.dash-row .sched-when { flex: 0 0 auto; }
.dash-disc .body { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* inside the column body the title must not inherit the row's 14rem flex-basis (it would become HEIGHT) */
.dash-disc .body .t { flex: 0 0 auto; }
.dash-metrics { margin-top: var(--sp-2); }
@media (max-width: 620px) {
  .dash-row .btn { flex: 1 1 100%; justify-content: center; }
}