/* Small floating materials. Load after skin.css and feature styles.
 * Visibility, focus, Escape, scroll locking and click behavior stay with main.js.
 * Opaque first: unsupported filters and accessibility preferences keep solid UI.
 */
html:root {
	--tt-float-solid: #fff;
	--tt-float-glass: rgba(255,255,255,.92);
	--tt-float-text: #20242b;
	--tt-float-muted: #566273;
	--tt-float-accent: #1266b0;
	--tt-float-border: rgba(63,82,106,.19);
	--tt-float-shadow: 0 14px 36px rgba(20,32,48,.14), 0 2px 5px rgba(20,32,48,.06);
	--tt-float-inverse-solid: #29313c;
	--tt-float-inverse-glass: rgba(30,38,49,.92);
}
html.is-dark {
	--tt-float-solid: #20242b;
	--tt-float-glass: rgba(32,36,43,.94);
	--tt-float-text: #f1f4f7;
	--tt-float-muted: #b8c2cf;
	--tt-float-accent: #80beef;
	--tt-float-border: rgba(202,216,234,.22);
	--tt-float-shadow: 0 14px 36px rgba(0,0,0,.34), 0 2px 5px rgba(0,0,0,.18);
}

html:root :is(.tapdown-search-panel,.tapdown-user-menu__panel,.app-actions__menu,.app-actions__sharepanel,.tapdown-tag-sort__panel) {
	background: var(--tt-float-solid);
	color: var(--tt-float-text);
	border: 1px solid var(--tt-float-border);
	box-shadow: var(--tt-float-shadow);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html:root .tapdown-search-panel :is(.tapdown-search-panel__loading,.tapdown-search-panel__empty,.tapdown-search-panel__heading button,.tapdown-search-panel__chip-delete,.tapdown-search-panel__ranking a,.tapdown-search-panel__ranking-tabs button) {
	color: var(--tt-float-muted);
}
html:root .tapdown-search-panel__ranking a::before { color: var(--tt-float-muted); }
html:root .tapdown-search-panel__ranking li:nth-child(-n+3) a::before,
html:root .tapdown-search-panel__ranking h2 strong { color: var(--tt-float-accent); }
html:root .tapdown-search-panel__ranking-tabs button[aria-pressed="true"] { color: var(--tt-float-text); }
html:root .tapdown-search-panel__chip { color: var(--tt-float-muted); }
html:root .tapdown-search-panel__heading strong,
html:root .tapdown-search-panel__ranking h2 { line-height: 1.5; }
html:root .tapdown-user-menu__panel :is(.tapdown-user-menu__identity span,.tapdown-user-menu__sponsor em),
html:root .tapdown-tag-sort__panel a { color: var(--tt-float-muted); }
html:root .app-actions__sharepanel .share-item { color: var(--tt-float-text); }

/* The small media switcher sits over imagery, so it uses a heavier dark material. */
html:root :is(.tapdown-rtip,.media-gallery__tabs) {
	background: var(--tt-float-inverse-solid);
	color: #fff;
	border: 1px solid rgba(255,255,255,.22);
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html:root .tapdown-rtip { font-weight: 500; }

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
	html:root :is(.app-actions__menu,.app-actions__sharepanel,.tapdown-tag-sort__panel) {
		background: var(--tt-float-glass);
		-webkit-backdrop-filter: blur(12px) saturate(120%);
		backdrop-filter: blur(12px) saturate(120%);
	}
	/* On narrow screens these panels occupy substantial space; use solid surfaces. */
	@media (min-width:992px) and (min-height:650px) {
		html:root :is(.tapdown-search-panel,.tapdown-user-menu__panel) {
			background: var(--tt-float-glass);
			-webkit-backdrop-filter: blur(16px) saturate(120%);
			backdrop-filter: blur(16px) saturate(120%);
		}
	}
	html:root .media-gallery__tabs {
		background: var(--tt-float-inverse-glass);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	/* A tooltip can overlap a share menu. Only frost it when no other menu is open.
	 * Browsers without :has retain the opaque tooltip above. */
	@supports selector(body:has(*)) {
		html:root body:not(:has(.tapdown-search-panel:not([hidden]),.tapdown-user-menu__panel[data-ui-state="open"],.app-actions__menu[data-ui-state="open"],.app-actions__sharepanel[data-ui-state="open"],.tapdown-tag-sort[open])) .tapdown-rtip {
			background: var(--tt-float-inverse-glass);
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
		}
	}
}

/* A future nested menu must not create glass on glass. Child controls remain solid. */
html:root :is(.tapdown-search-panel,.tapdown-user-menu__panel,.app-actions__menu,.app-actions__sharepanel,.tapdown-tag-sort__panel) :is(.tapdown-search-panel,.tapdown-user-menu__panel,.app-actions__menu,.app-actions__sharepanel,.tapdown-tag-sort__panel) {
	background: var(--tt-float-solid);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* QR reading, dense emoji pickers, dialogs, and navigation remain opaque. */
html:root :is(.tapdown-group-card,.tapdown-smile,.tapdown-descmodal__box,.tapdown-loginmodal__box,.tapdown-login__box,.tapdown-dlmodal__box,.tapdown-download-modal__box,.tapdown-vip-recharge-modal__box,.tapdown-recharge-choice-modal__box,.tapdown-arcade-confirm__dialog) {
	background: var(--tt-bg-card);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html:root :is(.tapdown-loginmodal__mask,.tapdown-login__mask,.tapdown-dlmodal__mask,.tapdown-download-modal__mask,.tapdown-vip-recharge-modal__mask,.tapdown-recharge-choice-modal__mask,.tapdown-descmodal__mask,.tapdown-arcade-confirm,.tapdown-arcade-player__login) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html:root .tapdown-arcade-player__login { background: #111820; }
html:root .tapdown-arcade-player__backdrop { filter: saturate(.75) brightness(.25); }
/* Static labels and profile sections do not need floating material. */
html:root :is(.tapdown-hero__badge,.tapdown-hero__tagchip) {
	background: #29313c;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
@media (max-width:767px) {
	html:root .tapdown-user-hero .tapdown-user-archive {
		background: #29394d;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
html:root :is(.tapdown-dlmodal__qr,.tapdown-group-card__qr),
html:root :is(.tapdown-dlmodal__qr,.tapdown-group-card__qr) :is(img,canvas,svg) {
	background: #fff;
	opacity: 1;
	filter: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transform: none;
	animation: none;
	transition: none;
	forced-color-adjust: none;
}

/* Material does not animate. Keep existing uiLayer timing and immediate keyboard input. */
html:root .tapdown-search-panel { transition: none; }
html:root .tapdown-rail__list > li > a { transition: opacity 125ms var(--tt-control-ease); }
html:root[data-ui-input="keyboard"] .tapdown-rail__list > li > a { transition: none; }
html:root :is(.tapdown-tag-sort__panel,.app-actions__sharepanel) :is(a,button) {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
html:root :is(.tapdown-tag-sort__panel,.app-actions__sharepanel) :is(a,button):active { opacity: .76; }
html:root :is(.tapdown-tag-sort__panel,.app-actions__sharepanel) :is(a,button):focus-visible {
	outline: 3px solid var(--tt-primary);
	outline-offset: 2px;
}
@media (hover:hover) and (pointer:fine) {
	html:root .tapdown-search-panel__heading button:hover,
	html:root .tapdown-search-panel__chip:hover,
	html:root .tapdown-tag-sort__panel a:hover,
	html:root .tapdown-search-panel__ranking a:hover span { color: var(--tt-float-accent); }
}
@media (pointer:coarse) {
	/* Avoid iOS focus zoom and keep finger targets separate at tablet sizes too. */
	html:root .tapdown-search input { font-size: 16px; }
	html:root .tapdown-search-panel__ranking a,
	html:root .tapdown-search-panel__heading button { min-height: 44px; }
	html:root .tapdown-search-panel__chip { height: 44px; }
	html:root .tapdown-search-panel__chip-delete { width: 44px; height: 44px; flex: 0 0 44px; }
	html:root .app-actions__sharepanel .share-item { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
	html:root .tapdown-rail__list > li > a { transition: none; }
	html:root .tapdown-arcade-player__loading span { animation: none; }
}

/* Preference fallbacks override every small material, including inverse tooltips. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
	html:root {
		--tt-float-glass: var(--tt-float-solid);
		--tt-float-inverse-glass: var(--tt-float-inverse-solid);
	}
	html:root :is(.tapdown-search-panel,.tapdown-user-menu__panel,.app-actions__menu,.app-actions__sharepanel,.tapdown-tag-sort__panel,.tapdown-rtip,.media-gallery__tabs) {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}
@media (prefers-contrast:more) {
	html:root :is(.tapdown-search-panel,.tapdown-user-menu__panel,.app-actions__menu,.app-actions__sharepanel,.tapdown-tag-sort__panel) {
		--tt-float-muted: var(--tt-float-text);
		border-color: var(--tt-float-text);
	}
	html:root :is(.tapdown-rtip,.media-gallery__tabs) { border-color: #fff; }
}
@media (forced-colors:active) {
	html:root {
		--tt-float-solid: Canvas;
		--tt-float-glass: Canvas;
		--tt-float-text: CanvasText;
		--tt-float-muted: CanvasText;
		--tt-float-border: CanvasText;
		--tt-float-inverse-solid: Canvas;
		--tt-float-inverse-glass: Canvas;
	}
	html:root :is(.tapdown-search-panel,.tapdown-user-menu__panel,.app-actions__menu,.app-actions__sharepanel,.tapdown-tag-sort__panel,.tapdown-rtip,.media-gallery__tabs) {
		background: Canvas;
		color: CanvasText;
		border-color: CanvasText;
		box-shadow: none;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
	html:root .media-gallery__tab { color: ButtonText; }
	html:root .media-gallery__tab.is-active { background: Highlight; color: HighlightText; }
	html:root .tapdown-search-panel__ranking li:nth-child(-n+3) a::before { color: LinkText; }
}