/* =========================================================================
   netex · engines/first-five.css · the measured opening: waveform, 3 stamped markers, captions
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.tr-five { display: grid; gap: var(--s-4); align-content: start; container-type: inline-size; }
.tr-five__tabs [role="tab"] { font: 600 .8125rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.tr-five__panel { display: grid; gap: var(--s-4); }
.tr-five__panel[hidden] { display: none; }
.tr-five__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
/* no JS: no player controls. JS: the controls hold their place from the first paint (an attribute
   «hidden» can't reserve space: base.css forces display:none) and show once the engine is live. */
html:not(.js) .tr-five__ctl { display: none; }
html.js .tr-five:not(.is-live) .tr-five__ctl { visibility: hidden; }
.tr-five__ctl .nx-icon { width: 18px; height: 18px; }
.tr-five__ctl [data-five-play][aria-pressed="true"] [data-when="off"], .tr-five__ctl [data-five-play]:not([aria-pressed="true"]) [data-when="on"] { display: none; }
.tr-five__note { flex-basis: 100%; color: var(--fg-2); }
.tr-five__note[hidden] { display: none; }

.tr-five__wave { position: relative; display: none; height: 168px; padding-bottom: 46px; border-bottom: var(--bw) solid var(--rule); }
html.js .tr-five__wave, .tr-five.is-live .tr-five__wave { display: block; }
.tr-five__wave svg { display: block; width: 100%; height: 120px; }
.ff-bar { fill: color-mix(in srgb, var(--paper) 16%, transparent); }
.ff-bar.is-on { fill: var(--paper); }
.ff-mark line { stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.ff-mark rect { fill: var(--paper); opacity: 0; }
.ff-mark text { fill: var(--ink); font: 700 10px/1 var(--f-mono); opacity: 0; }
.ff-mark.is-rule line, .ff-mark.is-rule rect { stroke: var(--cyan); fill: var(--cyan); }
.ff-mark.is-on line, .ff-mark.is-on rect, .ff-mark.is-on text { opacity: 1; }
.ff-end { stroke: var(--steel); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ff-head { stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ff-label {
	position: absolute;
	left: calc(var(--x) * 100%);
	bottom: 0;
	display: grid;
	gap: 2px;
	max-width: 32%;
	padding-left: 6px;
	border-left: 1.5px solid var(--paper);
	opacity: 0;
	font: 500 .6875rem/1.25 var(--f-mono);
}
.ff-label b { font-weight: 600; color: var(--paper); }
.ff-label span { color: var(--paper-72); text-transform: uppercase; letter-spacing: .04em; }
.ff-label.is-rule { border-left-color: var(--cyan); }
.ff-label.is-rule b { color: var(--cyan); }
.ff-label.is-on { opacity: 1; }
.tr-five__caption {
	min-height: 3.4em;
	margin: 0;
	padding: var(--s-3) var(--s-4);
	background: var(--ink-2);
	font: 500 clamp(1.0625rem, 1rem + .4vw, 1.375rem)/1.4 var(--f-sans);
	color: var(--paper);
}
html:not(.js) .tr-five__caption { display: none; }
.ff-w { color: var(--steel); transition: color 90ms linear; }
.ff-w.is-on { color: var(--paper); }

/* the three markers as notes (server-rendered; also the reduced-motion view) */
.tr-five__markers { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.tr-mark { border-top: var(--bw) solid var(--rule); }
.tr-mark__s { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; cursor: pointer; list-style: none; }
.tr-mark__s::-webkit-details-marker { display: none; }
.tr-mark.is-end .tr-mark__s { cursor: default; color: var(--fg-2); }
.tr-mark__time { font-weight: 600; color: var(--fg); }
.tr-mark.is-rule .tr-mark__time { color: var(--cyan); }
.tr-mark__title { font: 640 1rem/1.3 var(--f-sans); }
.tr-mark__tag { font: 500 .625rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.tr-mark.is-rule .tr-mark__tag { border-color: var(--cyan); color: var(--cyan); }
.tr-mark__cap { margin: 0 0 var(--s-2) calc(5.2em + var(--s-3)); font: italic 400 1.0625rem/1.45 var(--f-serif); }
.tr-mark__basis { margin: 0 0 var(--s-4) calc(5.2em + var(--s-3)); font-size: .875rem; line-height: 1.55; color: var(--fg-2); max-width: 62ch; }
.tr-mark.is-on .tr-mark__s { box-shadow: inset 2px 0 0 var(--fg); padding-left: var(--s-2); }
.tr-mark__d[open] .tr-mark__title::after { content: ""; }
.tr-five__labels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }

/* chat equivalent */
.tr-chat { display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-5); background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-2: var(--steel-dark); --bg: var(--paper); --bg-2: var(--paper-2); --rule: var(--rule-light); --focus: var(--indigo); --link: var(--cyan-deep); --fg-3: var(--steel-dark); }
.tr-chat__msg { position: relative; max-width: 46ch; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); background: var(--paper-2); border: var(--bw) solid var(--paper-3); font-size: 1rem; line-height: 1.5; }
.tr-chat__badge { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-4); }
.tr-chat__badge .nx-label { background: var(--ink); color: var(--paper); border-color: var(--ink); font: 700 .6875rem/1 var(--f-mono); }
.tr-chat__handoff { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--cyan-deep); background: var(--paper-2); font-size: .9375rem; }
.tr-chat__input { width: 100%; max-width: 46ch; }
.tr-chat__note { color: var(--steel-dark); }

html.rm .ff-w { transition: none; }

} /* end @layer pages */