/* Arrahmah Tube. Tokens mirror the "Arrahmah Tube" DESIGN.md. */

:root {
	--bg: #0F0F10;
	--surface: #1D1C1E;
	--surface-2: #2A2829;
	--surface-3: #343132;
	--ink: #F2F0F0;
	--muted: #A8A4A5;
	--line: #343132;
	--accent: #E3140E;
	--player-bg: #0F0F10;
	--scrim: rgb(15 15 16 / .6);

	--font: Roboto, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--r-sm: 8px;
	--r-md: 12px;
	--r-pill: 999px;

	--header-h: 56px;
	--guide-w: 240px;
	--mini-w: 72px;
	--top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
	--gutter: 24px;

	color-scheme: dark;
}

:root[data-theme="light"] {
	--bg: #FFFFFF;
	--surface: #F2F1F1;
	--surface-2: #F2F1F1;
	--surface-3: #E4E2E2;
	--ink: #141213;
	--muted: #5F5B5C;
	--line: #E4E2E2;
	--scrim: rgb(20 18 19 / .45);
	color-scheme: light;
}

@media (max-width: 600px) {
	body.admin-bar { --wp-admin--admin-bar--height: 0px; }
	:root { --gutter: 12px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 14px/1.45 var(--font);
	-webkit-font-smoothing: antialiased;
}
:where(a) { color: inherit; text-decoration: none; }
:where(img, video) { max-width: 100%; height: auto; }
:where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 8px; z-index: 2000;
	padding: 8px 16px; border-radius: var(--r-sm);
	background: var(--ink); color: var(--bg); font-weight: 600;
}
.skip-link:focus { left: 16px; }

.icon { display: inline-grid; place-items: center; flex: none; }
.icon svg, .icon-btn svg, .pill-btn svg, .search-submit svg { width: 24px; height: 24px; fill: currentColor; display: block; }

.icon-btn {
	width: 40px; height: 40px; flex: none;
	display: inline-grid; place-items: center;
	border: 0; border-radius: 50%; padding: 0;
	background: transparent; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { background: var(--surface-3); }
.icon-btn:disabled { opacity: .3; cursor: default; background: transparent; }

.pill-btn {
	display: inline-flex; align-items: center; gap: 6px;
	height: 36px; padding: 0 16px;
	border: 0; border-radius: var(--r-pill);
	background: var(--surface-2); color: var(--ink);
	font-size: 14px; font-weight: 600; white-space: nowrap;
	cursor: pointer;
}
.pill-btn svg { width: 20px; height: 20px; margin-left: -4px; }
.pill-btn:hover { background: var(--surface-3); }
.pill-btn:active { transform: scale(.98); }
.pill-btn.is-primary { background: var(--accent); color: #FFFFFF; }
.pill-btn.is-primary:hover { background: var(--accent); filter: brightness(1.1); }

/* Masthead */
.masthead {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 200;
	height: var(--header-h);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 0 16px;
	background: var(--bg);
}
.masthead-start, .masthead-end { display: flex; align-items: center; flex: none; }
.masthead-start { gap: 12px; }
.masthead-end { gap: 4px; }

.brand { display: flex; align-items: center; height: 40px; padding: 0 4px; }
.brand-logo { display: block; height: 20px; width: auto; }
.brand-text { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
[data-theme="light"] .brand-logo { filter: invert(1) hue-rotate(180deg) saturate(1.4); }

.masthead-search, .inline-search { display: flex; align-items: center; min-width: 0; }
.masthead-search { flex: 0 1 640px; }
.masthead-search input, .inline-search input {
	flex: 1; min-width: 0; height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line); border-right: 0;
	border-radius: var(--r-pill) 0 0 var(--r-pill);
	background: var(--bg);
	font-size: 16px;
	outline: 0;
}
.masthead-search input:focus, .inline-search input:focus { border-color: var(--muted); }
.search-submit {
	height: 40px; width: 64px; flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--line);
	border-radius: 0 var(--r-pill) var(--r-pill) 0;
	background: var(--surface-2);
	cursor: pointer;
}
.search-submit:hover { background: var(--surface-3); }
.search-back, .search-open { display: none; }

.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: grid; }

@media (max-width: 656px) {
	.masthead { padding: 0 8px 0 12px; gap: 8px; }
	.masthead-search { display: none; }
	.search-open { display: inline-grid; }
	.masthead.is-searching .masthead-start,
	.masthead.is-searching .masthead-end { display: none; }
	.masthead.is-searching .masthead-search { display: flex; flex: 1; }
	.masthead.is-searching .search-back { display: inline-grid; margin-right: 4px; }
	.brand-logo { height: 16px; }
}

/* Guide (drawer by default, docked on wide screens) */
.guide {
	position: fixed; left: 0; top: var(--wp-admin--admin-bar--height, 0px); bottom: 0; z-index: 300;
	width: var(--guide-w);
	padding: 0 12px 16px;
	overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: transparent transparent;
	background: var(--bg);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform .2s ease, visibility .2s;
}
.guide:hover { scrollbar-color: var(--surface-3) transparent; }
.drawer-open .guide { transform: none; visibility: visible; }
.guide-head { display: flex; align-items: center; gap: 12px; height: var(--header-h); padding-left: 4px; }
.guide-scrim { position: fixed; inset: 0; z-index: 250; background: var(--scrim); }
.guide-section { padding: 12px 0; border-bottom: 1px solid var(--line); }
.guide-heading { padding: 6px 12px 4px; font-size: 16px; font-weight: 600; }
.guide-item, .guide-menu a {
	display: flex; align-items: center; gap: 24px;
	height: 40px; padding: 0 12px;
	border-radius: 10px;
	white-space: nowrap;
}
.guide-label { overflow: hidden; text-overflow: ellipsis; }
.guide-item:hover, .guide-menu a:hover { background: var(--surface-2); }
.guide-item.is-active { background: var(--surface-2); font-weight: 600; }
.guide-item.is-active .icon, .mini-item.is-active .icon { color: var(--accent); }
.guide-menu { list-style: none; margin: 0; padding: 0; }
.guide-footer { padding: 16px 12px 0; color: var(--muted); font-size: 12px; }

.mini-guide { display: none; }
.mini-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	height: 74px; padding: 0 2px;
	border-radius: 10px;
	font-size: 10px; line-height: 14px;
	text-align: center;
}
.mini-item .guide-label { max-width: 100%; white-space: nowrap; }
.mini-item:hover { background: var(--surface-2); }

@media (min-width: 792px) {
	body:not(.is-watch) .mini-guide {
		display: flex; flex-direction: column;
		position: fixed; left: 0; top: var(--top); bottom: 0; z-index: 90;
		width: var(--mini-w); padding: 4px;
		background: var(--bg);
	}
	body:not(.is-watch) .page { margin-left: var(--mini-w); }
}

@media (min-width: 1313px) {
	html:not(.guide-mini) body:not(.is-watch) .mini-guide { display: none; }
	html:not(.guide-mini) body:not(.is-watch) .guide {
		top: var(--top); z-index: 90;
		transform: none; visibility: visible; transition: none;
	}
	html:not(.guide-mini) body:not(.is-watch) .guide-head,
	html:not(.guide-mini) body:not(.is-watch) .guide-scrim { display: none; }
	html:not(.guide-mini) body:not(.is-watch) .page { margin-left: var(--guide-w); }
}

/* Page */
.page { display: block; min-width: 0; padding: 0 var(--gutter) 48px; }

/* Chips */
.chips {
	position: sticky; top: var(--top); z-index: 50;
	display: flex; gap: 12px;
	margin: 0 calc(var(--gutter) * -1);
	padding: 12px var(--gutter);
	overflow-x: auto; scrollbar-width: none;
	background: var(--bg);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
	flex: none;
	display: inline-flex; align-items: center;
	height: 32px; padding: 0 12px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	font-weight: 600; white-space: nowrap;
}
.chip:hover { background: var(--surface-3); }
.chip.is-active { background: var(--ink); color: var(--bg); }

/* Archive header */
.archive-head { padding: 24px 0 8px; }
.archive-title { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.archive-sub { margin-top: 6px; color: var(--muted); }
.archive-desc { margin-top: 8px; max-width: 70ch; color: var(--muted); }

/* Video grid */
.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	grid-auto-flow: row dense;
	gap: 40px 16px;
	padding-top: 12px;
}
@media (min-width: 2100px) {
	.video-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.card { min-width: 0; }
.card-thumb, .compact-thumb, .short-thumb {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	background: var(--surface);
}
.card-thumb img, .compact-thumb img, .short-thumb img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.thumb-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.thumb-ph svg { width: 40px; height: 40px; fill: currentColor; }

.card-body { display: flex; gap: 12px; padding-top: 12px; }
.avatar {
	flex: none; display: block; overflow: hidden;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--surface-2);
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; }
.avatar-lg { width: 40px; height: 40px; }
.card-text { min-width: 0; }
.card-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-bottom: 4px;
	font-size: 16px; line-height: 22px; font-weight: 600;
}
.card-meta { color: var(--muted); font-size: 14px; line-height: 20px; }
.card-meta > * { display: block; }
.card-meta a:hover { color: var(--ink); }

/* Shelf */
.shelf {
	grid-column: 1 / -1;
	padding: 24px 0 32px;
	border-top: 4px solid var(--surface-2);
	border-bottom: 4px solid var(--surface-2);
	min-width: 0;
}
.shelf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.shelf-icon { color: var(--accent); }
.shelf-title { font-size: 20px; line-height: 28px; font-weight: 700; }
.shelf-nav { margin-left: auto; display: flex; gap: 4px; }
.shorts-row {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: minmax(160px, calc((100% - 5 * 16px) / 6));
	gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none;
}
.shorts-row::-webkit-scrollbar { display: none; }
.short { display: block; min-width: 0; scroll-snap-align: start; }
.short-thumb { aspect-ratio: 9 / 16; }
.short-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 8px;
	font-size: 16px; line-height: 22px; font-weight: 600;
}
.short-meta { display: block; margin-top: 2px; color: var(--muted); }
@media (max-width: 1100px) {
	.shorts-row { grid-auto-columns: minmax(150px, calc((100% - 3 * 16px) / 4)); }
}

/* Premieres row */
.premieres { padding: 12px 0 32px; margin-bottom: 8px; border-bottom: 4px solid var(--surface-2); min-width: 0; }
.premiere-row {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: minmax(260px, calc((100% - 3 * 16px) / 4));
	gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none;
}
.premiere-row::-webkit-scrollbar { display: none; }
.premiere-row .card { scroll-snap-align: start; }
.shelf-nav:has([data-shelf-prev]:disabled):has([data-shelf-next]:disabled) { visibility: hidden; }

/* Load more */
.feed-more { display: flex; justify-content: center; padding: 32px 0 8px; }
.feed-more.is-loading .pill-btn { opacity: .6; pointer-events: none; }

/* Search results */
.results-wrap { max-width: 1100px; }
.results { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.result { display: flex; gap: 16px; min-width: 0; }
.result .card-thumb { flex: 0 0 min(360px, 45%); }
.result-text { min-width: 0; flex: 1; }
.result-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 18px; line-height: 26px; font-weight: 600;
}
.result-meta { margin-top: 2px; color: var(--muted); font-size: 12px; }
.result-channel { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--muted); font-size: 12px; }
.result-channel:hover { color: var(--ink); }
.result-excerpt {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	max-width: 70ch;
	color: var(--muted); font-size: 12px; line-height: 18px;
}

/* Watch page */
.is-watch .page { padding-top: 24px; }
.watch {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 402px;
	gap: 24px;
	max-width: 1754px;
	margin: 0 auto;
}
.watch-primary { min-width: 0; }
.watch-player {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - var(--top) - 120px);
	margin: 0 auto;
	border-radius: var(--r-md);
	background: var(--player-bg);
}
/* :where() keeps this reset at (0,1,0) so the media rule below still wins. */
.watch-player:where(:not(.is-premiere, :has(.r2m-player))) * { position: static !important; margin: 0 !important; padding: 0 !important; }
.watch-player:where(:not(.is-premiere, :has(.r2m-player))) *::before, .watch-player:where(:not(.is-premiere, :has(.r2m-player))) *::after { display: none !important; }
/* R2 Media Multi-Akun player (Plyr) fills the 16:9 box; portrait videos are pillarboxed. */
.watch-player .r2m-player, .watch-player .r2m-player.is-portrait { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; margin: 0; }
.watch-player .r2m-figure figcaption { display: none; }
.watch-player iframe, .watch-player video, .watch-player img, .watch-player object, .watch-player embed {
	position: absolute !important; inset: 0;
	width: 100% !important; height: 100% !important; max-width: none;
	border: 0; object-fit: contain;
	background: var(--player-bg);
}
.watch-player.is-poster img, .watch-player.is-premiere img { object-fit: cover; }

/* Premiere countdown (player is always dark, whatever the colour mode) */
.premiere-panel {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	padding: 24px;
	background: linear-gradient(rgb(15 15 16 / .55), rgb(15 15 16 / .85));
	color: #F2F0F0;
	text-align: center;
}
.premiere-kicker { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #F2F0F0; }
.premiere-count { font-size: clamp(22px, 3.2vw, 40px); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.premiere-date { color: #A8A4A5; font-size: 14px; }
.premiere-remind { margin-top: 8px; background: var(--accent); color: #FFFFFF; }
.premiere-remind:hover { background: var(--accent); filter: brightness(1.1); }

.badge {
	display: inline-flex; align-items: center;
	margin-top: 6px; padding: 2px 8px;
	border-radius: var(--r-pill);
	background: var(--surface-2); color: var(--accent);
	font-size: 12px; line-height: 18px; font-weight: 600;
}

.watch-title {
	margin-top: 12px;
	font-size: 20px; line-height: 28px; font-weight: 700;
	overflow-wrap: anywhere;
}
.watch-owner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.channel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.channel-text { min-width: 0; }
.channel-name { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.channel-sub { display: block; color: var(--muted); font-size: 12px; line-height: 18px; }
.watch-actions { display: flex; gap: 8px; }

.desc-box {
	margin-top: 12px; padding: 12px;
	border-radius: var(--r-md);
	background: var(--surface-2);
	font-size: 14px; line-height: 20px;
}
.desc-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-weight: 600; }
.desc-meta a { color: var(--muted); }
.desc-meta a:hover { color: var(--ink); }
.desc-body { margin-top: 8px; max-width: 80ch; overflow-wrap: anywhere; }
.js .desc-box:not(.is-open) .desc-body { max-height: 80px; overflow: hidden; }
.js .desc-box.is-long:not(.is-open) { cursor: pointer; }
.js .desc-box.is-long:not(.is-open):hover { background: var(--surface-3); }
.desc-toggle {
	display: none;
	margin-top: 8px; padding: 0;
	border: 0; background: none;
	font-weight: 600; cursor: pointer;
}
.js .desc-box.is-long .desc-toggle { display: inline-block; }
.desc-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.desc-tags a { color: var(--muted); }

.entry-content > * + * { margin-top: 1em; }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.entry-content img { border-radius: var(--r-sm); }
.entry-content figure { max-width: 100%; }
.entry-content h2, .entry-content h3 { line-height: 1.2; margin-top: 1.4em; }

.watch-secondary { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.compact { display: flex; gap: 8px; min-width: 0; }
.compact-thumb { flex: 0 0 168px; border-radius: var(--r-sm); }
.compact-text { min-width: 0; padding-right: 8px; }
.compact-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-bottom: 4px;
	font-size: 14px; line-height: 20px; font-weight: 600;
}
.compact-meta { color: var(--muted); font-size: 12px; line-height: 18px; }
.compact-meta > * { display: block; }

@media (max-width: 1016px) {
	.watch { grid-template-columns: minmax(0, 1fr); }
	.watch-player { max-height: none; }
}

/* Comments */
.comments { margin-top: 24px; }
.comments-title { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 16px; }
.comment-reply-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.comment-form { display: grid; gap: 12px; margin-bottom: 24px; }
.comment-form label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] {
	width: 100%; padding: 8px 0;
	border: 0; border-bottom: 1px solid var(--line);
	background: transparent;
	outline: 0;
}
.comment-form textarea:focus, .comment-form input:focus { border-bottom-color: var(--ink); }
.comment-form textarea { min-height: 72px; height: 96px; resize: vertical; }
.comment-notes { font-size: 12px; color: var(--muted); }
.comment-form-cookies-consent, .comment-subscription-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.comment-form-cookies-consent label, .comment-subscription-form label { display: inline; margin: 0; font-size: 13px; }
.comment-form input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.comment-form .form-submit { margin: 0; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 52px; }
.comment-body { position: relative; padding: 0 0 16px 52px; }
.comment-author .avatar { position: absolute; left: 0; top: 0; width: 40px; height: 40px; }
.comment-author .fn { font-weight: 600; font-size: 13px; }
.comment-author .says { display: none; }
.comment-metadata { font-size: 12px; color: var(--muted); }
.comment-content { margin-top: 4px; }
.reply a { font-size: 12px; font-weight: 600; }

/* Static page */
.prose { max-width: 760px; margin: 0 auto; padding: 32px 0; }
.prose-title { font-size: 32px; line-height: 1.15; font-weight: 700; margin-bottom: 24px; letter-spacing: -.01em; }
.prose .entry-content { font-size: 16px; line-height: 1.65; }

/* Empty state */
.empty-state {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	max-width: 520px; margin: 10vh auto; padding: 0 16px;
	text-align: center;
}
.empty-mark {
	display: grid; place-items: center;
	width: 88px; height: 88px; border-radius: 50%;
	background: var(--surface-2); color: var(--muted);
}
.empty-mark svg { width: 44px; height: 44px; fill: currentColor; }
.empty-title { font-size: 22px; line-height: 1.2; font-weight: 700; }
.empty-text { color: var(--muted); }
.empty-state .inline-search { width: 100%; margin: 4px 0; }

/* Toast */
.toast {
	position: fixed; left: 16px; bottom: 16px; z-index: 1000;
	padding: 12px 16px;
	border-radius: var(--r-sm);
	background: var(--ink); color: var(--bg);
	font-weight: 600;
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.toast.is-shown { opacity: 1; transform: none; }

/* Phones */
@media (max-width: 600px) {
	.page { padding-bottom: 32px; }
	.video-grid { gap: 24px 0; margin: 0 calc(var(--gutter) * -1); }
	.video-grid .card-thumb { border-radius: 0; }
	.card-body { padding: 12px 12px 0; }
	.card-title { font-size: 14px; line-height: 20px; }
	.card-meta { font-size: 12px; line-height: 18px; }
	.card-meta > * { display: inline; }
	.card-meta > a::after { content: " · "; }
	.shelf { padding: 16px 12px 24px; }
	.premieres { padding: 12px 0 24px; }
	.premieres .shelf-head { padding: 0 12px; }
	.premiere-row { grid-auto-columns: 85%; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 12px; scroll-padding: 0 12px; }
	.premiere-row .card-thumb { border-radius: var(--r-md); }
	.premiere-row .card-body { padding: 12px 0 0; }
	.premiere-panel { gap: 4px; padding: 12px; }
	.premiere-kicker, .premiere-date { font-size: 12px; }
	.premiere-remind { margin-top: 4px; height: 32px; }
	.shorts-row { grid-auto-columns: 42%; gap: 8px; }
	.archive-head { padding: 16px 0 4px; }
	.archive-title { font-size: 22px; }

	.result { flex-direction: column; gap: 0; margin: 0 calc(var(--gutter) * -1); }
	.result .card-thumb { flex: none; border-radius: 0; }
	.result-text { padding: 12px; }
	.result-title { font-size: 14px; line-height: 20px; }
	.result-channel { margin: 6px 0 0; }
	.result-excerpt { display: none; }

	.is-watch .page { padding-top: 0; }
	.watch-player {
		position: sticky; top: var(--top); z-index: 40;
		margin: 0 calc(var(--gutter) * -1);
		border-radius: 0;
	}
	.watch-title { font-size: 18px; line-height: 26px; }
	.compact-thumb { flex-basis: 160px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}