/*
 * KATA'S OWN CONTROL BAR OVER A CHROMELESS FILM — TAC-22.
 *
 * Built to Creative's spec of 13 Oct 2026
 * (.jarvis/notes/2026-10-13-tac22-kata-control-bar-spec.md). Every number below
 * is that document's; nothing here is chosen by the build.
 *
 * Its own sheet, not a block's, because four blocks can show a player and the
 * bar is the same control in all four. `PlayerBar::render()` enqueues it, so a
 * page with no player never loads it.
 */

/* -------------------------------------------------------------------------
 * The plate
 *
 * The map card's glass at bar scale — its formula, its blur and its accent
 * tint — but on the DEEP surface rather than the card's light grey. A film is
 * unknown content: it can be a white wall at second 4 and a night street at
 * second 9, and a light glass cannot carry a fixed mark colour across both.
 * ---------------------------------------------------------------------- */

.kata-pbar {
	position: absolute;
	inset-block-end: 12px;
	inset-inline: 12px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 0;
	box-sizing: border-box;
	block-size: 44px;
	padding: 0;
	border-radius: 12px;

	/* The map card carries this same fallback at :436. */
	background-color: rgba( 17, 19, 20, 0.92 );
	color: #fff;

	/*
	 * Absent until the film is reached for — §7.
	 *
	 * NOT `visibility: hidden`, WHICH IS WHAT IT USED TO BE. That takes the
	 * whole subtree out of the sequential focus order, so the four controls
	 * could not be reached by Tab at all — and `:focus-within` below could
	 * never fire, because nothing inside could ever take focus. A keyboard
	 * reader had no route to play, sound, position or fullscreen (TAC-22 c4).
	 *
	 * `opacity: 0` with `pointer-events: none` is the same absence to the eye
	 * and to the pointer — the plate is invisible and nothing under it can be
	 * clicked by accident — while leaving the row where a Tab can find it. The
	 * first Tab is then a reach for the film, exactly as a hover is, and the
	 * rule below answers it. The labels stay in the accessibility tree, which
	 * is what tells a reader the row is there to reach for.
	 */
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms ease;
}

@supports ( background-color: color-mix( in srgb, red 14%, blue ) ) {
	.kata-pbar {
		background-color: color-mix( in srgb, var( --kata-accent ) 14%, rgba( 17, 19, 20, 0.88 ) );
	}
}

/*
 * 10, not the 24 of `--kata-glass-blur`: the map card's comment records that 10
 * is the value that keeps glass reading as glass over a photograph.
 */
@supports ( backdrop-filter: blur( 10px ) ) {
	.kata-pbar {
		backdrop-filter: blur( 10px ) saturate( 130% );
	}
}

/*
 * Shown once the film has STARTED and while the pointer is over the media or a
 * control holds focus — "THE CONTROL IS NOT ON THE PAGE UNTIL IT IS REACHED
 * FOR". `.is-pointing` is on the media box and `.is-shown` on the bar; both are
 * put there by `player-bar.js`.
 *
 * FOCUS IS NOT GATED ON `.is-started`, AND THE OTHER TWO STILL ARE. A pointer
 * that has not started the film has the block's own centre mark to press, so
 * the bar would be a second play button over the first — which is the thing §7
 * is avoiding. A keyboard has no such mark: the play control a keyboard reader
 * presses IS the one in this row, so gating focus on "the film has started"
 * would gate starting the film on the film having started. The row answers a
 * Tab whatever state the film is in, and goes away again when focus leaves.
 *
 * `pointer-events` is restored with the paint: it is what the absent state
 * takes away in place of `visibility`, so every rule that shows the row has to
 * give it back, or the plate is visible and dead to the mouse.
 */
.is-pointing > .kata-pbar.is-started,
.kata-pbar.is-started.is-shown,
.kata-pbar:focus-within {
	opacity: 1;
	pointer-events: auto;
}

/* 16 at the tablet, 20 at the desktop — §3. */
@media ( min-width: 768px ) {
	.kata-pbar {
		inset-block-end: 16px;
		inset-inline: 16px;
	}
}

@media ( min-width: 1100px ) {
	.kata-pbar {
		inset-block-end: 20px;
		inset-inline: 20px;
	}
}

/* -------------------------------------------------------------------------
 * The buttons
 *
 * 44 x 44 hit area at every width — the floor for a touch target, and it does
 * not shrink on the phone, which is where it matters most. The icon box is 24,
 * centred; the 10 that remains each side is the house grid gap.
 * ---------------------------------------------------------------------- */

.kata-pbar__btn {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: color var( --kata-duration-fast, 180ms ) var( --kata-ease-out, ease );
}

/* Both marks occupy one cell; the state decides which is drawn. */
.kata-pbar__mark {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	inline-size: 24px;
	block-size: 24px;
}

.kata-pbar__mark > svg {
	inline-size: 24px;
	block-size: 24px;
}

.kata-pbar__mark--other,
.kata-pbar__btn[ aria-pressed='true' ] .kata-pbar__mark--rest {
	display: none;
}

.kata-pbar__btn[ aria-pressed='true' ] .kata-pbar__mark--other {
	display: grid;
}

/*
 * Hover is the mark going accent — the design's own button-states board, where
 * the ring-and-arrow control's hover is the mark turning magenta. No background
 * plate, no grey wash.
 */
.kata-pbar__btn:hover,
.kata-pbar__groove:hover {
	color: var( --kata-accent );
}

.kata-pbar__btn:focus-visible,
.kata-pbar__groove:focus-visible {
	color: var( --kata-accent );
	outline: var( --kata-focus-width, 2px ) solid var( --kata-focus-color, #9be4fd );
	outline-offset: var( --kata-focus-offset, 2px );
}

/*
 * The two right-hand buttons touch: the gap between their hit areas is 0 and
 * the optical gap is the 20px of their own padding.
 */

/* -------------------------------------------------------------------------
 * The groove
 *
 * A channel cut INTO the plate, which is why it is darker than the plate at
 * every width and over any film. A groove lighter than its plate reads as a
 * rail laid on top, and then the focus state looks like a bordered text input
 * rather than a slider.
 * ---------------------------------------------------------------------- */

.kata-pbar__groove {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	align-items: center;
	min-inline-size: 40px;
	block-size: 44px;
	margin-inline: 8px;
	outline-offset: 2px;
	cursor: pointer;
	touch-action: none;
}

.kata-pbar__line {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 4px;

	/* Hard ends. Kata's marks are hard-edged; a rounded pill is every other
	   player on the web. */
	border-radius: 0;
	background-color: rgba( 0, 0, 0, 0.55 );
	transition: block-size var( --kata-duration-fast, 180ms ) var( --kata-ease-out, ease );
}

.kata-pbar__groove:hover .kata-pbar__line,
.kata-pbar__groove:focus-visible .kata-pbar__line,
.kata-pbar__groove.is-dragging .kata-pbar__line {
	block-size: 8px;
}

/*
 * THE FILL GROWS FROM THE RIGHT, because the reader's start is the right —
 * `Arrow.php:34` settled that for this site. `inset-inline-start: 0` is the
 * reading edge in both directions, so nothing here needs mirroring.
 */
.kata-pbar__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	inline-size: 0;
	border-radius: 0;
	background-color: var( --kata-accent );
}

/*
 * THE RING FOLLOWS THE LINE, not the 44-tall hit area. A 2px ring at 2px
 * offset round that invisible box draws a rectangle the length of the bar, and
 * the control stops reading as a slider and starts reading as a text input.
 */
.kata-pbar__groove:focus-visible {
	outline: none;
}

.kata-pbar__groove:focus-visible .kata-pbar__line {
	outline: var( --kata-focus-width, 2px ) solid var( --kata-focus-color, #9be4fd );
	outline-offset: var( --kata-focus-offset, 2px );
}

/* -------------------------------------------------------------------------
 * Motion
 *
 * Nothing here is decorative; it is all answering a pointer. Under reduced
 * motion the bar still appears and still hides — it steps instead of fading.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.kata-pbar,
	.kata-pbar__btn,
	.kata-pbar__line {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * THE END OF THE CLIP IS OURS — TAC-22 c5.
 *
 * Measured on the rig that drives a film to its end
 * (`qa-runner/tac22-ended-b1177.php`, shots `qa/shots/b1177-ended`): the
 * moment YouTube reaches ENDED it paints its own end screen over the last
 * frame — a replay ring, the film's title, the channel avatar, a "more
 * videos" chip with a thumbnail, and the YouTube wordmark. That is the whole
 * of what c5 forbids, and no parameter turns it off: `rel=0` only narrows the
 * suggestions to the same channel, it does not remove the screen.
 *
 * So the frame itself goes. `player-bar.js` puts `is-ended` on the media box
 * at ENDED and takes it off when the film plays again; what is left showing
 * is whatever the block draws underneath — its still where there is one, its
 * own ground where there is not. Not `display: none`: the player must keep
 * its box, or the position the bar reports would change under it.
 *
 * A looping hero never reaches ENDED, so this is the three blocks that write
 * their frame on a press.
 * ---------------------------------------------------------------------- */

.is-ended > iframe {
	opacity: 0;
	pointer-events: none;
}

/*
 * IN FULLSCREEN THE BAR IS STILL OURS. The element that goes fullscreen is the
 * media box, not the frame, precisely so these controls travel with it.
 */
:fullscreen .kata-pintro__embed,
:fullscreen .kata-chero-career__embed,
:fullscreen iframe {
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	inset: 0;
}