/* fm-explainer.css — narrated explainers.
 *
 * Own namespaced file, same merge-safety reason as fm-checklist.css,
 * fm-define.css and fm-doc.css.
 *
 * The transcript sits BESIDE the slide rather than under it, at equal weight.
 * That placement is the argument: it is not a caption track bolted on, it is
 * half the component, and it reads perfectly well with the sound off.
 */

.fm-xp-page { max-width: 940px; margin: 0 auto; }

.fm-xp-hero { padding: 4px 0 26px; border-bottom: 2px solid var(--fm-navy); margin-bottom: 26px; }
.fm-xp-title { font-size: 30px; font-weight: 900; color: var(--fm-navy); margin: 0 0 8px; letter-spacing: -.7px; }
.fm-xp-sub { font-size: 15.5px; line-height: 1.6; color: var(--fm-muted); margin: 0; max-width: 58ch; }
.fm-xp-nosound { font-size: 13px; line-height: 1.55; margin: 14px 0 0; padding: 10px 13px; border-radius: var(--fm-radius-sm); background: var(--fm-bg); border: 1px solid var(--fm-border); color: var(--fm-muted-strong); max-width: 62ch; }

.fm-xp { background: #fff; border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 22px 24px; margin-bottom: 20px; }
.fm-xp-head { margin-bottom: 18px; }
.fm-xp-name { font-size: 20px; font-weight: 800; color: var(--fm-navy); margin: 0; letter-spacing: -.3px; }
.fm-xp-blurb { font-size: 14.5px; color: var(--fm-muted); margin: 4px 0 0; max-width: 62ch; }

.fm-xp-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }

.fm-xp-stage { position: relative; border-radius: var(--fm-radius); background: linear-gradient(160deg, var(--fm-navy) 0%, var(--fm-navy-dark) 100%); color: #fff; display: grid; place-items: center; text-align: center; padding: 30px 22px 34px; min-height: 210px; overflow: hidden; }
.fm-xp-slide { max-width: 100%; }
.fm-xp-big { font-size: clamp(30px, 6vw, 50px); font-weight: 900; line-height: 1.02; letter-spacing: -1.6px; }
.fm-xp-cap { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.82); margin-top: 10px; max-width: 26ch; margin-left: auto; margin-right: auto; }
.fm-xp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.18); }
.fm-xp-bar i { display: block; height: 100%; width: 25%; background: var(--fm-red); transition: width .35s ease; }

.fm-xp-script { display: flex; flex-direction: column; gap: 2px; }
.fm-xp-scripth { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--fm-muted); margin-bottom: 6px; }
.fm-xp-line { text-align: left; font: inherit; font-size: 14px; line-height: 1.55; color: var(--fm-muted); background: none; border: none; border-left: 3px solid transparent; padding: 7px 0 7px 12px; cursor: pointer; transition: color .18s, border-color .18s; }
.fm-xp-line:hover { color: var(--fm-text); }
.fm-xp-line.is-on { color: var(--fm-text); border-left-color: var(--fm-red); font-weight: 500; }

.fm-xp-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fm-border); }
.fm-xp-play { min-height: var(--fm-control-h); padding: 0 22px; border: none; border-radius: var(--fm-radius-sm); background: var(--fm-navy); color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.fm-xp-play:hover { background: var(--fm-navy-dark); }
.fm-xp-play[aria-pressed="true"] { background: var(--fm-red); }
.fm-xp-status { font-size: 13px; color: var(--fm-muted); }
.fm-xp-more { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--fm-navy); text-decoration: underline; text-underline-offset: 2px; }

.fm-xp-foot { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--fm-border); }
.fm-xp-foot p { font-size: 13px; line-height: 1.6; color: var(--fm-muted); margin: 0 0 10px; max-width: 66ch; }
.fm-xp-back { color: var(--fm-navy); font-weight: 700; text-decoration: none; }
.fm-xp-back:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .fm-xp-body { grid-template-columns: 1fr; }
  .fm-xp { padding: 18px 16px; }
  .fm-xp-title { font-size: 24px; }
  .fm-xp-more { margin-left: 0; }
}

/* The embedded variant — the same component in a narrower space.
   The transcript stacks under the slide instead of beside it because the
   column is narrower, not because it matters less. It is still rendered
   first, still complete, still there with the sound off. */
.fm-xp--inline { margin: 16px 0 0; padding: 16px; border-radius: var(--fm-radius); background: var(--fm-bg); border: 1px solid var(--fm-border); }
.fm-xp--inline .fm-xp-head { margin-bottom: 14px; }
.fm-xp--inline .fm-xp-name { font-size: 15.5px; }
.fm-xp--inline .fm-xp-blurb { font-size: 13.5px; }
.fm-xp--inline .fm-xp-body { grid-template-columns: 1fr; gap: 14px; }
.fm-xp--inline .fm-xp-stage { min-height: 150px; padding: 22px 18px 26px; }
.fm-xp--inline .fm-xp-big { font-size: clamp(26px, 5vw, 38px); }
.fm-xp--inline .fm-xp-cap { font-size: 13.5px; }
.fm-xp--inline .fm-xp-line { font-size: 13.5px; padding: 5px 0 5px 11px; }
.fm-xp--inline .fm-xp-ctl { margin-top: 14px; padding-top: 13px; }
.fm-xp--inline .fm-xp-play { min-height: 38px; padding: 0 17px; font-size: 13.5px; }