/* ===== cp_drill_html (HTML form) =====
   NOT root-scoped, on purpose: window.pxShowOverlay moves #cp-drill-overlay
   into the layout's modal portal while it is open, so a :where(.cp-drill-root)
   ancestor would stop matching exactly when these rules are needed. Every
   selector names #cp-drill-overlay, an id this section owns. The --cp-series
   tokens it reads are declared on the overlay in complaints_analytics.css. */

#cp-drill-overlay .px-modal { width: min(980px, calc(100vw - 36px)); max-height: 90vh; }
#cp-drill-overlay .cp-drill-subtitle { margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--px-text-secondary); }
#cp-drill-overlay .cp-drill-none { padding: 1rem 0; }
#cp-drill-overlay .cp-complaint { padding: 1.1rem 0.25rem; border-bottom: 1px solid var(--px-border); }
#cp-drill-overlay .cp-complaint:last-child { border-bottom: 0; }
#cp-drill-overlay .cp-complaint-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
#cp-drill-overlay .cp-complaint-top h3 { margin: 0; font-size: 0.9rem; }
#cp-drill-overlay .cp-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
  font-size: 0.75rem;
}
#cp-drill-overlay .cp-fields dt { margin-bottom: 0.25rem; font-size: 0.65rem; color: var(--px-text-muted); }
#cp-drill-overlay .cp-fields dd { margin: 0; line-height: 1.5; }
#cp-drill-overlay .cp-field-wide { grid-column: span 2; }
#cp-drill-overlay .cp-description {
  max-width: 90ch;
  margin: 0.8rem 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  white-space: pre-line;
}
#cp-drill-overlay .cp-badge-open { color: var(--px-warning-text); background: var(--px-warning-bg); border-color: transparent; }
#cp-drill-overlay .cp-source-staff { border-left: 3px solid var(--cp-series-1); }
#cp-drill-overlay .cp-source-portal { border-left: 3px solid var(--cp-series-2); }
#cp-drill-overlay .cp-source-ai { border-left: 3px solid var(--cp-series-3); }
#cp-drill-overlay .cp-muted { color: var(--px-text-muted); }

@media (max-width: 1240px) {
  #cp-drill-overlay .cp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  #cp-drill-overlay .cp-field-wide { grid-column: 1 / -1; }
}