/* 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; }

  /* On a phone the component is thousands of pixels tall and the controls sat
     under both columns, so a visitor scrolling through a playing timeline had
     no play button, no scrubber and no elapsed time anywhere on screen, and
     nothing told them this was a recording. Sticking the control bar to the
     bottom of the component keeps the player visible the whole way down. */
  .replay-controls {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--bg2);
    border-top: 1px solid var(--border);
  }

  /* The scrubber's hit area was the 4px track, which cannot be reliably
     touched. Grow the input to 44px and paint the 4px track inside it, so the
     target is 44px and the component looks exactly the same. */
  /* The scrubber grows to fill whatever the other three controls leave, and it
     is never reordered. Lifting it onto its own row with `order` read well but
     it decoupled the tab order from the visual order, which is a WCAG 1.3.2
     and 2.4.3 failure, and it held a 133px bar on an iPad for no reason. In
     source order the bar fits one 44px row at 390px, and if a narrower screen
     or a larger font wraps it, it wraps in source order and stays correct. */
  .replay-scrub { flex: 1 1 120px; height: 44px; min-width: 0; background: transparent; }
  .replay-scrub::-webkit-slider-runnable-track { height: 4px; background: var(--border); }
  .replay-scrub::-moz-range-track { height: 4px; background: var(--border); }
  .replay-scrub::-webkit-slider-thumb { margin-top: -7px; width: 18px; height: 18px; }
  .replay-scrub::-moz-range-thumb { width: 18px; height: 18px; }

  /* The rest of the controls to the same 44px floor. */
  .replay-btn { width: 44px; height: 44px; }
  .replay-speed { min-height: 44px; }
  .ladderc-replay { min-height: 44px; }
}

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