/* A fixed-height header keeps the sticky strip in the same place in every state. */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(13, 15, 21, .96); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: transform .25s ease;
}
/* /watch includes the nav INSIDE its page .shell, so the header's own .shell padded a
   second time and its right edge stopped short of the player and rail (item 1275). */
.shell > .site-header > .shell { padding-inline: 0; }
.strip {
	position: sticky;
	top: var(--site-header-height, 73px);
	z-index: 40;
	transition: top .25s ease;
}
.strip .day-filter-rows { flex-direction: column; align-items: stretch; gap: 6px; }
.strip .day-filter-rows > .chip-row-frame { flex: none; width: 100%; order: initial; }
.strip .show-label { display: inline; }
.strip .rail-label {
	/* The script measures the longest translated name once and shares its width
	   across all six rows. max-content keeps every name readable before it runs. */
	width: var(--filter-label-width, max-content);
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--bg);
	white-space: nowrap;
}

/* Sticky header slide-away on scroll, every screen size (items 1238/1239; item 1291 dropped
   the old (max-width: 999px), (max-height: 800px) condition so tall desktop windows slide
   too). The header is sticky, so moving it with transform takes nothing out of the flow and
   the list does not jump; the strip just re-pins at the top. */
body.header-hidden .site-header,
.site-header.header-hidden {
	transform: translateY(-100%);
	pointer-events: none;
}
body.header-hidden .strip {
	top: 0;
}
/* Reduced motion: show or hide at once, no slide. */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.strip { transition: none; }
}

/* Phone header layout: compact brand, collapsed nav-menu under burger toggle (width < 1000px) */
@media (max-width: 999px) {
	.strip {
		top: var(--site-header-height, 47px);
	}
	.site-header .top { flex-wrap: nowrap; gap: 8px; padding: 5px 0; position: relative; }
	.site-header .brand { flex: 0 0 auto; }
	.site-header .brand img { height: 30px; }
	.site-header .brand .word { display: none; }
	.site-header .search {
		order: 3; flex: 1 1 auto; flex-basis: auto; min-width: 0;
		max-width: none; margin-left: 0;
	}
	.site-header .search input { padding-top: 6px; padding-bottom: 6px; }
	.site-header .nav-toggle {
		display: inline-flex; order: 5; flex: 0 0 38px;
		height: 36px; margin-left: 0;
	}
	.site-header .nav-menu {
		display: none; position: absolute; top: 100%; right: 0; z-index: 60;
		flex-direction: column; align-items: stretch; gap: 12px; min-width: 200px;
		padding: 14px; background: var(--bg-raise); border: 1px solid var(--line-strong);
		border-radius: var(--r); box-shadow: 0 18px 40px rgba(0,0,0,.55);
	}
	.site-header .top.nav-open .nav-menu { display: flex; }
	.site-header .nav-menu .mainnav { flex-direction: column; gap: 8px; }
	.site-header .nav-menu .locale { flex-direction: column; align-items: stretch; gap: 6px; }
	.site-header .nav-menu .locale label { display: block; }
	.site-header .nav-menu .locale select { width: 100%; }
}

/* Desktop header at 1000px+ (item 1275, Richard 5 Oct 2026: "put language right justified
   and space out Stream and the search box appropriately").
   One row, three groups: logo + Streams on the left, the search box in the middle, the
   Language picker on the right-hand edge. Every gap is the same 24px.

   THE RIGHT EDGE IS THE SHELL'S EDGE. .site-header > .shell is the same 1320px .shell the
   page content uses, so the picker being the last flex item is what lines it up with the
   hero cards below -- no extra offset to keep in step.

   The search box grows into the spare width up to 720px (wider just stretches the
   placeholder across a 1920px screen); past that the leftover is split equally either
   side of it by margin-inline:auto, so it sits centred between Streams and Language
   rather than leaving all the slack in one lump. Auto margins resolve to 0 when there
   is no slack, so narrower screens just get the 24px gaps.

   WHY NO 1000-1399px BURGER ANY MORE. That band used to tuck the pickers behind the menu
   button because Region + Time + Language would not fit beside the search box. Item 1274
   took Region and Time off the page; Language alone fits at 1000px with ~480px left for
   search, so it stays in plain sight on every desktop width and the burger is phone and
   tablet only (below 1000px, unchanged). */
@media (min-width: 1000px) {
	.site-header .top {
		flex-wrap: nowrap;
		gap: 24px;
	}
	.site-header .brand,
	.site-header .mainnav {
		flex: 0 0 auto;
	}
	.site-header .search {
		flex: 1 1 240px;
		min-width: 240px;
		max-width: 720px;
		margin-inline: auto;
	}
	.site-header .locale {
		display: flex; flex: 0 0 auto; gap: 8px;
	}
	.site-header .locale label { display: block; }
	.site-header .locale select#locale-language {
		width: auto; max-width: none; flex-shrink: 0; text-overflow: clip;
	}
	.site-header .nav-toggle {
		display: none;
	}
}

@media (min-width: 1000px) and (max-width: 1399px) {
	/* v2.css wraps rows at 861px. Keep the six rails a single line here and
	   use the same scroll affordance already shown below 1000px. */
	.strip .chip-row-frame { grid-template-columns: minmax(0, 1fr) 28px; gap: 8px; }
	.strip .chip-row { flex-wrap: nowrap; overflow-x: auto; }
	.strip .row-more { display: grid; }
	.strip .row-more[hidden] { display: none; }
}

/* Compact filter chips on phone / narrow widths (width < 1000px) */
@media (max-width: 999px) {
	.strip {
		margin-top: 0;
		padding: 5px 0 5px;
	}
	.strip .shell,
	.strip > .shell {
		padding-top: 0;
		padding-bottom: 0;
		gap: 4px;
	}
	.strip .day-filter-rows {
		gap: 4px;
	}
	.strip .chip-row-frame {
		grid-template-columns: minmax(0, 1fr) 22px;
		gap: 4px;
	}
	.strip .chip-row {
		gap: 4px;
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.strip .rail-label {
		font-size: 9px;
		letter-spacing: .04em;
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.strip .chip {
		font-size: 11px;
		line-height: 14px;
		padding: 3px 7px;
		gap: 4px;
		flex-shrink: 0;
		white-space: nowrap;
	}
	.strip .chip img {
		width: 12px;
		height: 12px;
	}
	.strip .chip .n {
		font-size: 10px;
	}
	.strip .chip.day .n {
		padding: 0 4px;
		font-size: 10px;
		line-height: 1.2;
		min-width: 0;
	}
	.strip .row-more {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		border: 1px solid var(--line-strong);
		background: var(--bg-raise);
		color: var(--ink);
		font-size: 13px;
		line-height: 1;
		display: grid;
		place-items: center;
		cursor: pointer;
		opacity: .72;
		transition: opacity .13s, border-color .13s, color .13s;
	}
	.strip .row-more:hover,
	.strip .row-more:focus-visible {
		opacity: 1;
		border-color: var(--sky);
		color: var(--sky);
	}
	.strip .row-more[hidden] {
		display: none;
	}
}

@media (hover: none) and (max-width: 999px) {
	.strip .shell,
	.strip > .shell {
		gap: 4px;
	}
}

/* Item 1261 (Richard, 5 Oct 2026): on phones the six rows together are 200px tall, not 163px
   -- "slightly too small", "make it 200px". Phone widths only: tablets keep the 999px rules
   above. 6 rows x 28px + 5 gaps x 4px + 11px padding + 1px border = 200px, so the chips,
   labels and arrows all scale by 28/22 to match, and each group stays on one row. */
@media (max-width: 600px) {
	.strip { padding: 6px 0 5px; }
	.strip .chip-row-frame { grid-template-columns: minmax(0, 1fr) 28px; }
	.strip .chip-row { gap: 5px; }
	.strip .rail-label { font-size: 11px; }
	.strip .chip { font-size: 14px; line-height: 18px; padding: 4px 9px; gap: 5px; }
	.strip .chip img { width: 15px; height: 15px; }
	.strip .chip .n,
	.strip .chip.day .n { font-size: 12.5px; }
	.strip .row-more { width: 28px; height: 28px; font-size: 16px; }
}

/* Item 1261: the sound note sits directly under the featured player it is about on phones,
   where the stage shows one slot (app.js moves it there). */
.audio-note.at-stage { margin: 8px 0 0; }

/* Item 1285 (Richard, 6 Oct 2026): on desktop the six rows were 227px tall -- "slightly too
   much height ... reduce it to 200px". Each row is one chip tall, and a chip took its height
   from body's 1.45 line-height (13px x 1.45 + 12px padding + 2px border = 32.84px), spaced
   by 6px. A fixed 16px line box makes every chip 30px, and 4px between rows gives
   6 x 30 + 5 x 4 = 200px. The font stays 13px, so only the air inside the chips goes.
   The 30px is also set as the chip's (border-box) height: at 125% display scaling a 1px border
   snaps to 0.8px and the line box alone came to 29.6px a row.
   Desktop only (1000px and up): tablets and phones keep the 999px and 600px rules above.
   The gap is restated for (hover: none) too, which v2.css widens to 8px on touch laptops. */
@media (min-width: 1000px) {
	.strip .shell,
	.strip > .shell,
	.strip .day-filter-rows { gap: 4px; }
	.strip .chip { height: 30px; line-height: 16px; }
}

/* Item 1292 (Richard, 6 Oct 2026: "170 both"): on a tablet the six rows are 170px tall
   whichever way it is held. Upright a tablet got the 999px rules (22px rows, 11px text,
   152px); on its side the desktop rule above (30px rows, 200px). Here every row is 25px
   with 4px between rows: 6 x 25 + 5 x 4 = 170px, text 12px. The chip's (border-box) height
   is stated, not left to the line box, for the same 125%-scaling reason as item 1285.

   WHICH SCREENS ARE A TABLET. Width alone cannot tell a tablet on its side from a small
   laptop (1280x800 against 1280x720), so this asks for a touch-only primary pointer:
   (hover: none) and (pointer: coarse). A laptop with a mouse or trackpad reports a fine
   pointer that can hover and keeps the 200px desktop rule, touchscreen or not.
     min-width: 601px   phones upright keep item 1261's rule (600px and narrower);
     min-height: 481px  phones on their side (at most ~430px tall) keep the 999px rule,
                        while the shortest tablet on its side, a 7" at 960x600 less the
                        browser bar, is still taller than this;
     max-width: 1399px  a large touch monitor keeps the desktop rule. */
@media (hover: none) and (pointer: coarse) and (min-width: 601px) and (min-height: 481px) and (max-width: 1399px) {
	.strip { margin-top: 0; padding: 5px 0; }
	.strip .shell,
	.strip > .shell {
		padding-top: 0;
		padding-bottom: 0;
		gap: 4px;
	}
	.strip .day-filter-rows { gap: 4px; }
	.strip .chip-row-frame { grid-template-columns: minmax(0, 1fr) 25px; gap: 4px; }
	.strip .chip-row { gap: 5px; flex-wrap: nowrap; overflow-x: auto; }
	.strip .rail-label {
		font-size: 10px;
		letter-spacing: .04em;
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.strip .chip {
		height: 25px;
		font-size: 12px;
		line-height: 15px;
		padding: 4px 8px;
		gap: 5px;
		flex-shrink: 0;
		white-space: nowrap;
	}
	.strip .chip img { width: 13px; height: 13px; }
	.strip .chip .n { font-size: 11px; }
	.strip .chip.day .n { padding: 0 4px; font-size: 11px; line-height: 1.2; min-width: 0; }
	.strip .row-more { display: grid; width: 25px; height: 25px; font-size: 14px; }
	.strip .row-more[hidden] { display: none; }
}