/* Qualiflai Demo Center: replay player + notification ladder
   Two components, both driven by the same timeline JSON schema:
     { scenario, business, durationSec, events: [{ t, lane, text, detail?, status? }] }
   Styles use the house tokens declared in demo/demo.css, so load this after it. */

/* ============================================================
   1. REPLAY PLAYER
   ============================================================ */
.replay {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: var(--accent-line);
  margin-top: 48px;
}
.replay-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 20px;
  padding: 22px 26px; border-bottom: 1px solid var(--border);
}
.replay-scenario {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.15;
}
.replay-business { font-size: 13px; color: var(--muted); }
.replay-silent {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); border: 1px solid rgba(29,158,117,0.4); padding: 4px 10px;
  white-space: nowrap;
}

.replay-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.replay-stage > * { min-width: 0; }
.replay-sysdetail, .replay-systext, .replay-bubble { overflow-wrap: anywhere; }
.replay-col { background: var(--bg2); padding: 24px 26px 28px; min-height: 340px; }
.replay-col-label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.replay-col-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* conversation side */
.replay-turn { margin-bottom: 14px; max-width: 92%; opacity: 0; transform: translateY(10px); }
.replay-turn.in { opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.replay-turn.dim { opacity: .42; }
.replay-who {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.replay-bubble {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 12px 15px; font-size: 14px; line-height: 1.6; color: var(--text);
}
.replay-turn.side-b { margin-left: auto; }
.replay-turn.side-b .replay-who { text-align: right; }
.replay-turn.side-b .replay-bubble { border-left: 2px solid var(--teal); background: rgba(29,158,117,0.07); }
.replay-detail { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.55; }

/* behind the scenes side */
.replay-sys { list-style: none; border-left: 1px solid var(--border); }
.replay-sysitem { position: relative; padding: 0 0 20px 24px; opacity: 0; transform: translateY(10px); }
.replay-sysitem.in { opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.replay-sysitem:last-child { padding-bottom: 0; }
.replay-sysitem::before {
  content: ''; position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 4px var(--bg2);
}
.replay-sysitem.fresh::before { animation: sysPing .9s ease-out; }
@keyframes sysPing {
  0%   { box-shadow: 0 0 0 4px var(--bg2), 0 0 0 0 rgba(29,158,117,.55); }
  100% { box-shadow: 0 0 0 4px var(--bg2), 0 0 0 14px rgba(29,158,117,0); }
}
.replay-systext { font-size: 14px; color: var(--text); line-height: 1.55; }
.replay-sysdetail {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.5;
}
.replay-t {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--teal); margin-bottom: 3px;
}

/* Status tags. Always real text in the markup, never a pseudo-element or a
   background image, so they are selectable and a screen reader reads them. */
.replay-tag, .ladder-tag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 2px 7px;
  border: 1px solid rgba(255,255,255,0.16);
}
/* "coming": not built yet. Dashed, like the pending image slots. */
.tag-coming { border: 1px dashed rgba(255,255,255,0.22); }
/* "per tenant": built and working, switched on per customer. Solid and
   filled, so it does not read as a placeholder the way the dashed one does. */
.tag-gated { background: rgba(255,255,255,0.05); }

/* A planned step is greyed out. A gated step is deliberately left alone: it
   renders exactly like a live step, because it is one. */
.replay-turn.planned .replay-bubble,
.replay-sysitem.planned .replay-systext { color: var(--muted); }
.replay-sysitem.planned::before { background: transparent; border: 1px solid var(--muted); }

/* caption bar */
.replay-caption {
  border-top: 1px solid var(--border);
  padding: 16px 26px; min-height: 62px;
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3);
}
.replay-caption-who {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); flex-shrink: 0;
}
.replay-caption-text { font-size: 15px; color: var(--text); line-height: 1.5; }

/* controls */
.replay-controls {
  border-top: 1px solid var(--border);
  padding: 14px 26px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.replay-btn {
  background: var(--teal); color: #fff; border: none; cursor: pointer;
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.replay-btn:hover { background: var(--teal-light); }
.replay-btn svg { width: 15px; height: 15px; fill: #fff; }
.replay-scrub {
  flex: 1; min-width: 140px; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--border); cursor: pointer; outline: none;
}
.replay-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%; background: var(--teal); cursor: pointer;
}
.replay-scrub::-moz-range-thumb {
  width: 13px; height: 13px; border: none; border-radius: 50%; background: var(--teal); cursor: pointer;
}
.replay-scrub:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.replay-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted); flex-shrink: 0; min-width: 74px; text-align: right;
}
.replay-speed {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif; font-size: 12px; padding: 8px 10px; cursor: pointer;
}
.replay-speed:hover { border-color: var(--teal); color: var(--text); }

.replay-msg { padding: 40px 26px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.replay-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--teal); word-break: break-all;
}

/* ============================================================
   2. NOTIFICATION LADDER
   ============================================================ */
.ladderc {
  background: var(--bg2); border: 1px solid var(--border);
  border-top: var(--accent-line); margin-top: 48px;
}
.ladderc-head {
  padding: 22px 26px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
}
.ladderc-scenario {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15;
}
.ladderc-business { font-size: 13px; color: var(--muted); }
.ladderc-body { padding: 34px 26px 30px; }

.ladderc-rungs { list-style: none; position: relative; padding-left: 62px; }
/* the spine: a dim track with a teal fill that grows as rungs light */
.ladderc-rungs::before {
  content: ''; position: absolute; left: 23px; top: 10px; bottom: 10px;
  width: 2px; background: var(--border);
}
.ladderc-fill {
  position: absolute; left: 23px; top: 10px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--teal-light), var(--teal));
  transition: height .5s cubic-bezier(.16,1,.3,1);
}
.ladderc-rung { position: relative; padding-bottom: 30px; }
.ladderc-rung:last-child { padding-bottom: 0; }
.ladderc-dot {
  position: absolute; left: -62px; top: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg3);
  transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.ladderc-dot svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s ease; }
.ladderc-rung.lit .ladderc-dot { border-color: var(--teal); background: rgba(29,158,117,0.1); transform: scale(1.04); }
.ladderc-rung.lit .ladderc-dot svg { stroke: var(--teal); }
.ladderc-rung.firing .ladderc-dot { animation: rungPing .8s ease-out; }
@keyframes rungPing {
  0%   { box-shadow: 0 0 0 0 rgba(29,158,117,.5); }
  100% { box-shadow: 0 0 0 16px rgba(29,158,117,0); }
}
.ladderc-when {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--teal); margin-bottom: 4px;
}
.ladderc-channel {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: 6px; line-height: 1.2;
}
.ladderc-text { font-size: 14px; color: var(--text); line-height: 1.6; }
.ladderc-detail { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 5px; }
.ladderc-rung { opacity: .45; transition: opacity .35s ease; }
.ladderc-rung.lit { opacity: 1; }
.ladderc-rung.planned .ladderc-channel { color: var(--muted); }
.ladderc-foot {
  border-top: 1px solid var(--border); padding: 14px 26px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ladderc-note { font-size: 13px; color: var(--muted); flex: 1; min-width: 200px; }
.ladderc-replay {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; padding: 9px 16px; cursor: pointer; transition: border-color .2s, color .2s;
}
.ladderc-replay:hover { border-color: var(--teal); color: var(--teal); }

/* ============================================================
   3. EXPLAINER VIDEO SLOT
   ============================================================ */
.explainer-video { margin: 48px 0 0; background: var(--bg2); border: 1px solid var(--border); }
.explainer-video video, .explainer-video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: none; }
.explainer-video figcaption { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 16px 22px; border-top: 1px solid var(--border); }
.explainer-video.pending { border-style: dashed; border-color: rgba(29,158,117,0.35); }
.explainer-video.pending figcaption { border-top-style: dashed; }
.explainer-video.pending .video-slot {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 32px 24px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px),
    var(--bg3);
}
.video-slot-play {
  width: 62px; height: 62px; border: 1px solid rgba(29,158,117,0.45); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.video-slot-play svg { width: 20px; height: 20px; fill: var(--teal); margin-left: 3px; }
.video-slot-tag {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); border: 1px solid rgba(29,158,117,0.4); padding: 5px 12px;
}
.video-slot-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted); word-break: break-all;
}

/* ============================================================
   4. ARTIFACT STRIP (what lands in Slack, Teams, inbox)
   ============================================================ */
.artifact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; }
.artifact-strip.two-up { grid-template-columns: repeat(2, 1fr); }
.artifact {
  background: var(--bg2); border: 1px solid var(--border); margin: 0;
  display: flex; flex-direction: column;
}
/* these renders are tall documents of very different lengths; cap them so a
   strip of three reads as one row, and crop from the top where the useful
   part is. The full image is one click away on the screen share anyway. */
.artifact img { width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: top; display: block; }
.artifact-chan {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
  padding: 14px 18px 0;
}
.artifact figcaption { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 14px 18px; }
.artifact.pending { border-style: dashed; border-color: rgba(29,158,117,0.35); }
.artifact.pending .shot-slot {
  flex: 1; min-width: 0; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 32px 20px; text-align: center; margin: 14px 18px 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px),
    var(--bg3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .replay-stage { grid-template-columns: 1fr; }
  .replay-col { min-height: 0; padding: 22px 20px 26px; }
  .replay-head, .replay-caption, .replay-controls, .ladderc-head, .ladderc-foot { padding-left: 20px; padding-right: 20px; }
  .replay-turn { max-width: 100%; }
  .replay-caption { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ladderc-body { padding: 28px 20px 26px; }
  .ladderc-rungs { padding-left: 52px; }
  .ladderc-rungs::before, .ladderc-fill { left: 19px; }
  .ladderc-dot { left: -52px; width: 40px; height: 40px; }
  .artifact-strip, .artifact-strip.two-up { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .replay-turn, .replay-sysitem { opacity: 1 !important; transform: none !important; }
  .ladderc-rung { opacity: 1 !important; }
}