/* CoreCMO — explainer player (v1.144.0)
   ==========================================================================
   Styling for the coded explainers. Every colour, radius and space is a token
   so the token guard stays quiet and a theme change reaches these too.

   The player is designed to work MUTED and with no audio track at all. The
   caption IS the narration. That is not a limitation worked around: people
   watch product explainers with the sound off, autoplaying audio on a product
   page is hostile, and a caption can be corrected by editing a line of JSON
   rather than re-recording a voiceover.
   ========================================================================== */

.cc-exp {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  margin: var(--s-5) 0;
}

.cc-exp__stage {
  position: relative;
  background: var(--surface-sunken);
  /* Fixed aspect so the caption never jumps as scenes swap. */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cc-exp__stage svg { width: 100%; height: 100%; display: block; }

.cc-exp__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--m-base) var(--ease-out);
}
.cc-exp__scene[data-on="1"] { opacity: 1; }

.cc-exp__cap {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--edge);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  /* Reserve the tallest caption's height so the control bar never shifts. */
  min-height: 5.5rem;
}

.cc-exp__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-4);
  flex-wrap: wrap;
}

.cc-exp__btn {
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: var(--text-inverse);
  border: 0;
  border-radius: var(--r-sm);
  font-weight: var(--w-semibold);
  font-size: var(--t-sm);
  cursor: pointer;
}
.cc-exp__btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--edge);
}

.cc-exp__dots { display: flex; gap: var(--s-2); margin-left: auto; }
.cc-exp__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--edge-strong);
  border: 0; padding: 0; cursor: pointer;
}
.cc-exp__dot[aria-current="true"] { background: var(--accent); }

.cc-exp__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--slate);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

/* Storyboard fallback. Used for prefers-reduced-motion and when JS is off:
   every scene shown at once, in order, as a readable sequence. An explainer
   that becomes a blank box for someone who has asked their machine to stop
   animating things is worse than no explainer. */
.cc-exp__board { padding: var(--s-5); display: grid; gap: var(--s-5); }
.cc-exp__board-item { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-4); align-items: start; }
.cc-exp__board-art { background: var(--surface-sunken); border-radius: var(--r-sm); aspect-ratio: 16 / 9; overflow: hidden; }
.cc-exp__board-art svg { width: 100%; height: 100%; }
.cc-exp__board-cap { font-size: var(--t-sm); line-height: var(--lh-body); color: var(--text); }

@media (max-width: 600px) {
  .cc-exp__board-item { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-exp__scene { transition: none; }
}

/* "Waiting on someone" — the third field state (v1.146.0).
   Lives here rather than in style.css because it ships with the same group of
   onboarding changes and can be lifted out together if the idea does not land.

   Visually quiet by default on purpose. 335 fields each carrying a loud
   control would turn the Brief into a wall of buttons, which is the problem
   this whole run of releases has been undoing. It is a small text affordance
   until it is used, and only then does it mark the field. */
.cc-defer { margin-top: 0.35rem; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

.cc-defer__btn {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--t-xs);
  color: var(--slate);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-defer__btn:hover { color: var(--accent); }

.cc-defer[data-on="1"] .cc-defer__btn {
  color: var(--warning);
  font-weight: var(--w-semibold);
  text-decoration: none;
}

.cc-defer__note {
  flex: 1;
  min-width: 180px;
  padding: 0.3rem 0.5rem;
  font-size: var(--t-xs);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--surface);
}

/* The field itself. A left rule rather than a fill, so a deferred field still
   reads as an input you can type into the moment the answer arrives. */
[data-deferred="1"] {
  border-left: 3px solid var(--warning);
}

/* A parked field inside a prompt (v1.147.0). Reads as deliberate rather than
   missing: the unfilled style is a prompt to go and fill it, and this one is
   the opposite instruction. Dotted rather than solid so it is visibly a
   different kind of blank at a glance. */
.placeholder-deferred {
  background: var(--warning-quiet);
  border-bottom: 1px dotted var(--warning);
  color: var(--text);
  cursor: help;
  padding: 0 0.15em;
}