/* =========================================================================
   Post-call — Action buttons row (New Call, Proceed to Training)
   ========================================================================= */

/* Button styling is shared — see components/shared/buttons.css (.action-btn /
   .action-btn.is-primary). This file only lays out the row. */
.analysis-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

/* =========================================================================
   Post-call — progressive reveal (Quick Coach first, then "Show Results")
   ========================================================================= */

/* Phase-1 gate button — centered under the Quick Coach card. */
.show-results-btn {
  display: block;
  margin: 0.25rem auto 1rem;
}

/* Results wrapper. The cards used to be direct children of .screen (a flex
   column with gap: 0.5rem); inside this wrapper they need the same layout to
   keep their inter-card spacing. Collapsed until the user reveals it. */
#analysis-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#analysis-results[hidden] { display: none; }

/* ---- v2 two-column results layout -------------------------------------- */
/* Post-call analysis runs wider than the other live screens (960px) so the
   evaluation and its supporting cards sit side by side, per the v2 mockup. */
#screen-analysis { max-width: 1180px; }

.pca-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;   /* evaluation column is the wider one */
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1rem;
}
.pca-grid .lcol,
.pca-grid .rcol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;                        /* let children shrink, no overflow */
}
/* Stack to one column on narrow viewports. */
@media (max-width: 860px) {
  .pca-grid { grid-template-columns: 1fr; }
}

/* Per-section loading: while a result card carries `is-loading`, show only its
   title + a local loading line; hide the real content until its data lands. */
.section-loading {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.card.is-loading .section-loading { display: flex; }
/* Terminal state when a section's data never arrived (see _failPendingSections). */
.section-loading.is-failed { font-style: italic; }
.card.is-loading > *:not(.card-title):not(.qa-eval-header):not(.section-loading) {
  display: none;
}
.section-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-emph);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-spinner { animation-duration: 2.4s; }
}