/* Two views → one task. People (left) and the agent (right) talk in their own
   terms; scroll lifts the useful phrase out of each message and sets it into
   the shared task. Provenance colour travels with the phrase, then settles. */

.tv {
  --tv-human: #e3ded2;
  --tv-agent: #9bb8ca;
  --tv-ink: var(--text, #edf0ea);
  --tv-dim: var(--text-dim, #a7afa9);
  --tv-subtle: #7d8882;
  --tv-gold: var(--attention, #d8b56f);
  --tv-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  padding-bottom: 0;
}

.tv__runway { position: relative; height: 360svh; margin-top: 0; }
.tv__pin {
  position: sticky; top: var(--nav-h, 72px); height: calc(100svh - var(--nav-h, 72px)); min-height: 0;
  display: flex; align-items: flex-start;
  padding-block: 24px; box-sizing: border-box;
  overflow: visible;
}

/* Beat index: three task groups, the current one in ink */
.tv__beats { display: flex; gap: 40px; list-style: none; margin: 0 0 clamp(24px, 4vh, 48px); padding: 0; }
.tv__beats [data-tv-stage] {
  font: 500 14px/1 var(--font-ops, system-ui); color: var(--tv-subtle);
  background: none; border: 0; padding: 8px 0;
  display: inline-flex; gap: 10px; align-items: baseline;
  transition: color 0.4s var(--tv-ease);
}
.tv__beats [data-tv-stage].is-done { color: var(--tv-dim); }
.tv__beats [data-tv-stage].is-now { color: var(--tv-ink); }
.tv__beats [data-tv-stage].is-now.is-final { color: var(--tv-gold); }

/* Stage: human | task | agent */
.tv__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.tv__view { display: grid; gap: 20px; align-content: center; }
.tv.is-merged .tv__record-title { color: #fff; }
.tv__view-label { font: 500 13px/1.4 var(--font-ops, system-ui); color: var(--tv-subtle); margin: 0 0 4px; }
.tv__view--human .tv__view-label { color: color-mix(in srgb, var(--tv-human) 70%, var(--tv-subtle)); }
.tv__view--agent .tv__view-label { color: color-mix(in srgb, var(--tv-agent) 70%, var(--tv-subtle)); }

.tv__msg {
  --m: 0;
  opacity: var(--m);
  transform: translate3d(0, calc((1 - var(--m)) * 14px), 0);
  will-change: opacity, transform;
}
.tv__msg p { margin: 0; font-size: 16px; line-height: 1.5; }
.tv__meta { font: 400 12.5px/1.4 var(--font-ops, system-ui) !important; color: var(--tv-subtle); margin-bottom: 6px !important; }
.tv__view--human .tv__msg p:not(.tv__meta) { color: color-mix(in srgb, var(--tv-human) 80%, var(--tv-dim)); }
.tv__view--agent .tv__msg p:not(.tv__meta) { color: color-mix(in srgb, var(--tv-agent) 55%, var(--tv-dim)); }

/* The phrase that will be lifted: marked as it is picked up, hollow once sent */
[data-signal] {
  --lift: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: calc(var(--lift) * 100%) 1px;
  padding-bottom: 1px;
  transition: opacity 0.4s var(--tv-ease);
}
[data-signal].is-sent { opacity: 0.55; }

/* Shared task */
.tv__record {
  position: relative;
  background: #0d1417;
  border-radius: 10px;
  padding: 28px 28px 24px;
  z-index: 2;
}
.tv__record-id { display: flex; justify-content: space-between; gap: 16px; font: 400 12.5px/1.4 var(--font-ops, system-ui); color: var(--tv-subtle); }
.tv__record-id [data-tv-status] { transition: color 0.5s var(--tv-ease); }
.tv[data-beat-now="3"] .tv__record-id [data-tv-status] { color: var(--tv-gold); }
.tv__record-title { font: 600 21px/1.25 var(--font-ops, system-ui); letter-spacing: -0.015em; margin: 12px 0 16px; color: var(--tv-ink); }

.tv__fields { margin: 0; display: grid; gap: 2px; }
.tv__field {
  --land: 0;
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px;
  padding: 8px 10px; margin-inline: -10px; border-radius: 6px;
  transition: background-color 0.6s var(--tv-ease);
}
.tv__field dt { font: 500 12.5px/1.6 var(--font-ops, system-ui); color: var(--tv-dim); }
.tv__field dd { margin: 0; position: relative; min-height: 1.5em; font-size: 14.5px; line-height: 1.5; color: var(--tv-dim); }
.tv__value { display: inline-block; opacity: var(--land); transition: color 0.8s var(--tv-ease); }
@media (scripting: none) { .tv__value { opacity: 1; } }
.tv__field.is-landing[data-source="human"] { background: color-mix(in srgb, var(--tv-human) 12%, transparent); }
.tv__field.is-landing[data-source="agent"] { background: color-mix(in srgb, var(--tv-agent) 16%, transparent); }
.tv__field--decision.is-landed { background: color-mix(in srgb, var(--tv-gold) 10%, transparent); }
.tv__field.is-landing[data-source="human"] .tv__value { color: var(--tv-human); }
.tv__field.is-landing[data-source="agent"] .tv__value { color: var(--tv-agent); }
.tv__field--decision .tv__value { color: var(--tv-ink); font-weight: 500; }
.tv__field--decision.is-landed .tv__value { color: var(--tv-gold); }

/* Phrases in flight: clones positioned by the runtime */
.tv__ghost {
  position: absolute; left: 0; top: 0; z-index: 3;
  pointer-events: none;
  font-size: 14.5px; line-height: 1.5; font-family: var(--font-body, system-ui);
  will-change: transform, opacity;
}
.tv__ghost[data-source="human"] { color: var(--tv-human); }
.tv__ghost[data-source="agent"] { color: var(--tv-agent); }

/* Medium screens: tighten the columns */
@media (max-width: 1180px) {
  .tv__stage { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) minmax(0, 1fr); gap: 28px; }
  .tv__msg p { font-size: 15px; }
}

/* Mobile: people above, task in the middle, agent below — one beat at a time */
@media (max-width: 900px) {
  .tv__runway { height: 340svh; margin-top: 0; }
  .tv__pin { padding-block: 16px; align-items: flex-start; }
  .tv__beats { gap: 20px; margin-bottom: 16px; }
  .tv__beats [data-tv-stage] { font-size: 14px; }
  .tv__stage { grid-template-columns: 1fr; gap: 14px; }
  .tv__view { display: block; position: relative; min-height: 96px; }
  .tv__view-label { font-size: 13px; margin-bottom: 6px; }
  .tv__msg { --gone: 0; position: absolute; inset: 24px 0 auto; opacity: calc(var(--m) * (1 - var(--gone))); }
  .tv__msg[data-beat="3"] { --gone: 0 !important; }
  .tv__meta { font-size: 13px !important; }
  .tv__msg p { font-size: 15px; }
  .tv__record { padding: 18px 18px 16px; order: 0; }
  .tv__view--human { order: -1; }
  .tv__view--agent { order: 1; }
  .tv__record-title { font-size: 17px; margin: 8px 0 10px; }
  .tv__field { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 5px 8px; margin-inline: -8px; }
  .tv__field dd { font-size: 15px; }
  .tv__ghost { font-size: 15px; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .tv__msg p { font-size: 15px; }
  .tv__record-title { font-size: 18px; }
  .tv__field { padding-block: 5px; }
  .tv__record { padding: 22px 24px 18px; }
  .tv__record-title { margin-bottom: 10px; }
  .tv__beats { margin-bottom: 20px; }
}

/* Static fallbacks */
.tv.is-static .tv__runway { height: auto; }
.tv.is-static .tv__pin { position: relative; height: auto; padding-block: 24px 96px; }
.tv.is-static .tv__msg, .tv.is-static .tv__field { --m: 1; --land: 1; }
@media (max-width: 900px) {
  .tv.is-static .tv__msg { position: static; margin-bottom: 12px; }
  .tv.is-static .tv__view { min-height: 0; }
}

/* Unchanged marketing heading precedes the animated pin. */
.tv__heading { align-items: start; gap: 24px; margin-bottom: 32px; }
.tv__heading h2 { font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.08; max-width: 22ch; }
.tv__heading .lede { font-size: 15px; line-height: 1.45; margin: 0; }
.tv__heading .eyebrow { margin-bottom: 8px; }
.tv__beats { margin-bottom: 8px; }
.tv__view { gap: 12px; }
@media (max-width: 900px) {
  .tv__view { align-content: start; }
  .tv__heading { gap: 16px; margin-bottom: 24px; }
  .tv__heading h2 { font-size: 28px !important; }
  .tv__heading .lede { font-size: 14px; }
}


/* Balance only positive spare cross-axis space after native nav clearance.
   Flex auto margins resolve to zero at the start when content overflows. */
.tv__pin > .container { margin-block: auto; }

/* Desktop keeps two supporting details; all phrase destinations stay shared. */
@media (max-width: 900px) {
  .tv__field--extra { display: none; }
  .tv__field dt { font-size: 14px; line-height: 1.5; }
  .tv__beats { gap: 24px; margin-bottom: 16px; }
}
.tv__view-label, .tv__meta, .tv__record-id { color: var(--tv-dim); }
.tv__beats [data-tv-stage] { color: var(--tv-dim); }
.tv.is-static .tv__pin { min-height: 0; }