/* Demo players (src/demo/*): a clip with one row per question, and the
   developer card's decision stream. */
.player {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.04);
}

.player__top {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.play {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--white);
  background: none;
  cursor: pointer;
}

.play svg { width: 16px; height: 16px; fill: var(--white); }
.play:hover { background: rgb(255 255 255 / 0.14); }
.play[aria-pressed="true"] { background: var(--white); }
.play[aria-pressed="true"] svg { fill: var(--ink); }

.player__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.player__name { color: var(--white); }
.player__time { color: rgb(255 255 255 / 0.6); font-variant-numeric: tabular-nums; }

.player__caption {
  min-height: calc(1em * var(--lh-mono));
  margin-top: 4px;
  color: rgb(255 255 255 / 0.9);
  font-size: 13px;
}

.wave {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 6px;
  cursor: pointer;
}

.wave rect { fill: rgb(255 255 255 / 0.28); }
.wave rect.on { fill: var(--white); }

/* Question rows: label, how it was measured, a bar, Sro's answer. A yes
   (or any choice) lights the row; a no stays dim. */
.lanes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.lane {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 6.5rem minmax(0, 1fr) 8.5rem;
  gap: 12px;
  align-items: center;
}
.lane__label { color: rgb(255 255 255 / 0.6); transition: color 0.2s; }
.lane__measured { color: rgb(255 255 255 / 0.4); font-size: 11px; white-space: nowrap; }
.lane__measured--none { font-style: italic; }

.lane__bar {
  height: 6px;
  background: rgb(255 255 255 / 0.12);
}

.lane__fill {
  display: block;
  width: calc(var(--share, 0) * 100%);
  height: 100%;
  background: rgb(255 255 255 / 0.45);
  transition: width 0.5s, background 0.2s;
}

.lane__value {
  color: rgb(255 255 255 / 0.6);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.lane.is-on .lane__label,
.lane.is-on .lane__value { color: var(--white); }
.lane.is-on .lane__fill { background: var(--salmon); }

/* Developer card: decision messages as they arrive. */
.stream { display: flex; flex-direction: column; gap: 8px; }

.stream__log {
  min-height: calc(6 * 1.5em + 24px);
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.6);
  color: #c8f7d1;
  font: 12px / 1.5 var(--mono);
  white-space: pre;
}

.stream__note { color: rgb(255 255 255 / 0.55); font-size: 12px; }

/* Narrow card: the measurement moves under the label, the bar under both. */
@container (max-width: 520px) {
  .lanes { gap: 10px; }
  .lane { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .lane__label { grid-area: 1 / 1; }
  .lane__value { grid-area: 1 / 2; }
  .lane__measured { grid-area: 2 / 1 / 3 / -1; }
  .lane__bar { grid-area: 3 / 1 / 4 / -1; margin-top: 2px; }
}