/* Construction sequence ("Explode"): caption card with timeline at the bottom of the stage (explode-view.js). */
/* While the sequence plays, building labels would sit on top of the photographs; street labels recede. */
#city-stage.xv-open .plot-label { display: none; }
#city-stage.xv-open .street-label { opacity: .35; }
.xv-card {
  --xv-accent: #c8641e; --xv-accent-bright: #ff8c2a; --xv-blue: #3f7fd6; --xv-ink: #24302b; --xv-muted: #5f6a65; --xv-line: #d9ddd4;
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 6;
  width: min(560px, calc(100% - 44px)); box-sizing: border-box; padding: 10px 14px 10px;
  background: #faf9f5f2; border: 1px solid var(--xv-line); border-radius: 10px;
  box-shadow: 0 10px 30px #26392b2a; color: var(--xv-ink); font-size: 12.5px; line-height: 1.45;
}
.xv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xv-kicker { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--xv-muted); font-weight: 600; }
.xv-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--xv-muted); cursor: pointer; padding: 0 2px; margin-right: -4px; }
.xv-title { margin: 2px 0 4px; font-size: 15.5px; font-weight: 650; line-height: 1.2; letter-spacing: -.1px; }
.xv-caption { margin: 0; color: var(--xv-ink); }
.xv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.xv-chips[hidden] { display: none; }
.xv-chip { font-size: 10.5px; line-height: 1.3; padding: 3px 7px; border-radius: 999px; background: #eef0ea; color: var(--xv-muted); border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xv-chip.is-on { background: #fff0e0; color: #6a3d12; border-color: #f0c9a4; }
.xv-chip-step.is-on { background: var(--xv-accent); color: #fff; border-color: var(--xv-accent); }
.xv-chip-warn.is-on { background: #fff4d6; color: #7a5410; border-color: #e6c886; }
.xv-chip-name.is-on { background: #e8efe9; color: #2a4a35; border-color: #bfd2c4; font-weight: 600; }

/* Timeline: one segment per beat, width proportional to its duration; a playhead runs across. */
.xv-timeline { margin-top: 10px; }
.xv-track { position: relative; height: 30px; cursor: pointer; touch-action: none; outline: none; }
.xv-track:focus-visible { box-shadow: 0 0 0 3px #bd702666; border-radius: 6px; }
.xv-segments { position: absolute; left: 0; right: 0; top: 0; height: 100%; display: flex; gap: 2px; }
.xv-seg { position: relative; flex: 1 1 0; min-width: 6px; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: var(--xv-muted); }
.xv-seg::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 2px; background: #dfe3da; }
.xv-seg.is-past::before, .xv-seg.is-current::before { background: var(--xv-accent-bright); }
.xv-seg-map::before, .xv-seg-wire::before { background: #cfd8d2; }
.xv-seg-map.is-past::before, .xv-seg-wire.is-past::before, .xv-seg-map.is-current::before, .xv-seg-wire.is-current::before { background: var(--xv-accent-bright); }
.xv-seg-dot { display: none; }
.xv-seg-label { position: absolute; left: 0; right: 2px; top: 14px; font-size: 9.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .1px; }
.xv-seg.is-current .xv-seg-label { color: var(--xv-accent); font-weight: 650; }
.xv-seg:focus-visible { outline: 2px solid #bd7026; outline-offset: -2px; border-radius: 4px; }
.xv-playhead { position: absolute; top: 2px; width: 2px; height: 12px; margin-left: -1px; background: var(--xv-ink); border-radius: 1px; pointer-events: none; }
.xv-playhead::after { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--xv-ink); box-shadow: 0 0 0 2px #faf9f5; }

.xv-controls { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.xv-controls button { border: 1px solid var(--xv-line); border-radius: 6px; padding: 5px 10px; font-size: 13px; line-height: 1; background: #fff; color: var(--xv-ink); cursor: pointer; min-width: 32px; }
.xv-controls .xv-play { border-color: var(--xv-accent); background: var(--xv-accent); color: #fff; font-weight: 600; min-width: 40px; }
.xv-controls .xv-rewind { font-size: 11px; color: var(--xv-accent); border-color: #ecc9ad; }
.xv-controls button:focus-visible { outline: 3px solid #bd7026; outline-offset: 2px; }
.xv-explode { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--xv-muted); }
.xv-explode input { width: 90px; accent-color: var(--xv-accent); }
.xv-card[data-kind=photo] .xv-title::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--xv-accent-bright); }
.xv-card[data-kind=map] .xv-title::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 7px; vertical-align: 1px; background: var(--xv-accent-bright); }
.xv-card[data-kind=wire] .xv-title::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; border: 2px solid #1d4e5c; box-sizing: border-box; }

@media (max-width: 700px) {
  /* The evidence panel is a bottom sheet on phones, so the card sits at the top and stays compact. */
  .xv-card { left: 12px; right: 12px; bottom: auto; top: 118px; transform: none; width: auto; padding: 8px 10px 8px; font-size: 11px; }
  .xv-title { font-size: 13px; margin-bottom: 2px; }
  .xv-caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .xv-chips { display: none; }
  .xv-track { height: 24px; }
  .xv-seg-label { top: 12px; font-size: 8.5px; }
  .xv-controls .xv-rewind, .xv-explode span { display: none; }
  .xv-explode input { width: 70px; }
}