/* =========================================================================
   netex · engines/call-replay.css · recorded call: player, captions, transcript, extracted fields
   Role tokens only, so the player sits on Ink (/ai/ s5) or Paper (/ai/front-desk/) alike.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.nx-callr { display: grid; gap: var(--s-4); container-type: inline-size; }
.nx-callr__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.nx-callr__title { font-size: var(--t-h4); font-weight: var(--w-strong); }
.nx-callr__meta { font: 500 .75rem/1.4 var(--f-mono); color: var(--fg-2); }
.nx-callr__labels { flex-basis: 100%; }
.nx-callr__labels .nx-tipwrap { max-width: 100%; }
.nx-callr__labels .nx-label { white-space: normal; text-align: left; }
.nx-callr__summary { max-width: 72ch; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }

.nx-callr__player { display: grid; gap: var(--s-3); padding: var(--s-4); border: var(--bw) solid var(--rule); background: var(--bg-2); }
.nx-callr__audio { width: 100%; }
.nx-callr__ui { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--s-3); }
.nx-callr__ui[hidden] { display: none; }
.nx-callr__play .nx-icon { width: 18px; height: 18px; }
.nx-callr__play[aria-pressed="true"] [data-when="off"], .nx-callr__play:not([aria-pressed="true"]) [data-when="on"] { display: none; }
.nx-callr__time { font: 500 .8125rem/1 var(--f-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; justify-self: end; }
.nx-callr__time b { color: var(--fg); font-weight: 600; }
.nx-callr__wave { grid-column: 1 / -1; position: relative; height: 56px; cursor: pointer; touch-action: manipulation; }
.nx-callr__wave svg { display: block; width: 100%; height: 100%; }
.nx-callr__wave:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 3px; }
.cr-wave rect { fill: color-mix(in srgb, var(--fg) 28%, transparent); }
.cr-wave.is-played rect { fill: var(--sig); }
.cr-turn { fill: var(--fg-3); }
.cr-turn.is-ai { fill: var(--sig); }
.nx-callr__subs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.nx-callr__subslabel { font: 500 .6875rem/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-callr__subs .nx-seg > * { min-height: 36px; padding-inline: var(--s-3); font-size: .75rem; }
.nx-callr__caption {
	grid-column: 1 / -1;
	min-height: 3.2em;
	padding: var(--s-2) var(--s-3);
	background: var(--ink);
	color: var(--paper);
	font: 500 1rem/1.45 var(--f-sans);
}
.nx-callr__caption:empty { opacity: .5; }

.nx-callr__body { display: grid; gap: var(--s-5) var(--gutter); align-items: start; }
@container (min-width: 780px) { .nx-callr__body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.nx-callr__txhead { margin-bottom: var(--s-2); font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-callr__lines { margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.nx-callr.is-live .nx-callr__lines { max-height: 420px; overflow: auto; overscroll-behavior: contain; position: relative; }
.nx-callr__line { display: grid; gap: 2px; padding: var(--s-2) var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--rule); transition: background-color var(--dur-ui) var(--ease-mech); }
.nx-callr__who { display: flex; gap: var(--s-2); font: 600 .625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-callr__who time { font-weight: 500; color: var(--fg-3); }
.nx-callr__line.is-ai .nx-callr__who { color: var(--sig); }
.nx-callr__text { font-size: .9375rem; line-height: 1.5; }
.nx-callr__orig { font: italic 400 .8125rem/1.45 var(--f-serif); color: var(--fg-2); }
.nx-callr.is-started .nx-callr__line:not(.is-current):not(.is-past) { color: var(--fg-3); }
.nx-callr__line.is-current { background: color-mix(in srgb, var(--sig) 10%, transparent); box-shadow: inset 2px 0 0 var(--sig); }
.cr-w.is-said { color: var(--fg); }
.cr-w.is-on { color: var(--bg); background: var(--sig); box-shadow: 0 0 0 2px var(--sig); }

.nx-callr__panel { display: grid; gap: var(--s-3); }
.nx-callr__fields { display: grid; margin: 0; }
.nx-callr__field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-2); padding: var(--s-2) 0; border-top: var(--bw) solid var(--rule); align-items: baseline; }
.nx-callr__field dt { font: 500 .6875rem/1.35 var(--f-mono); letter-spacing: .03em; color: var(--fg-2); }
.nx-callr__field dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-2); margin: 0; font-size: .875rem; line-height: 1.35; }
.nx-callr__state { margin-left: auto; font: 500 .5625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3); } /* right-aligned, also when a long value wraps it */
.nx-callr__field[data-state="pending"] .nx-callr__val { visibility: hidden; }
.nx-callr__field[data-state="pending"] .nx-callr__state { border-bottom: 1px dashed var(--fg-3); }
.nx-callr__field[data-state="heard"] .nx-callr__state { color: var(--sig); }
.nx-callr__field[data-state="confirmed"] .nx-callr__state { color: var(--fg); }
.nx-callr__field.is-handoff dt { color: var(--leak); }
.nx-callr__handoff { display: none; justify-self: start; padding: 3px 8px; border: 1.5px solid var(--leak); color: var(--leak); font: 600 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.nx-callr__handoff.is-on, .nx-callr:not(.is-live) .nx-callr__handoff, .nx-callr.is-live:not(.is-started) .nx-callr__handoff { display: inline-block; }
.nx-callr__note { font-size: .8125rem; line-height: 1.5; color: var(--fg-2); }
.nx-callr__json summary { cursor: pointer; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-callr__json pre { max-height: 280px; margin: var(--s-2) 0; padding: var(--s-3); overflow: auto; background: var(--ink); color: var(--paper); font: 400 .6875rem/1.45 var(--f-mono); }

html.rm .nx-callr__line { transition: none; }

} /* end @layer pages */