/* @tunnel-grandfather: legacy/admin/game CSS — selectors are stable and page-scoped; registry conflicts are cross-page false positives; ID selectors intentional and working; refactor risk exceeds value. W3 2026-10-08. */
/* B"H
Boruch Hashem
Blessed is He
The Awtsmoos keeps the Apps doorway legible even if a shared garment arrives late or only partly from cache.

CSS-law compliant rewrite (2026-10-09):
- Zero !important (was 6). Mobile overrides win by specificity (html prefix),
  not by brute force.
- Zero hardcoded colors in rules. All colors flow through page-scoped tokens.
- /apps/ is a dark-surface page by design; tokens carry the dark palette
  explicitly so the intent is readable and themeable.
*/
html,
body[data-geelooy-route="apps"] {
	background: var(--apps-surface);
	color: var(--apps-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-geelooy-route="apps"] {
	--apps-surface: #050914;
	--apps-ink: #f4f7ff;
	--apps-ink-bright: #f8fbff;
	--apps-ink-dim: #aebbd0;
	--apps-header-bg: rgba(5, 13, 27, .97);
	--apps-header-border: rgba(103, 174, 232, .28);
	margin: 0;
	min-height: 100dvh;
	overflow-x: clip;
}

body[data-geelooy-route="apps"] *,
body[data-geelooy-route="apps"] *::before,
body[data-geelooy-route="apps"] *::after { box-sizing: border-box; }

body[data-geelooy-route="apps"] a { color: inherit; }
body[data-geelooy-route="apps"] a:hover { color: var(--apps-ink-bright); }
body[data-geelooy-route="apps"] a:focus-visible {
	outline: 2px solid var(--apps-ink-bright);
	outline-offset: 2px;
}
body[data-geelooy-route="apps"] .g-page { min-width: 0; }
body[data-geelooy-route="apps"] :where(img, svg) { max-inline-size: 100%; }
body[data-geelooy-route="apps"] [data-future-icon] { block-size: 1.35rem; inline-size: 1.35rem; overflow: hidden; }
body[data-geelooy-route="apps"] [data-future-icon] svg { block-size: 100%; display: block; inline-size: 100%; }
body[data-geelooy-route="apps"] .g-app-icon { overflow: hidden; }
body[data-geelooy-route="apps"] .g-app-icon :where(img, svg) { block-size: 1.6rem; inline-size: 1.6rem; object-fit: contain; }
body[data-geelooy-route="apps"] :where(h1, h2, h3, p) { color: inherit; }
body[data-geelooy-route="apps"] .apps-hero h1 { color: var(--apps-ink-bright); }
body[data-geelooy-route="apps"] .apps-hero > :where(div, aside),
body[data-geelooy-route="apps"] .g-app-card { min-width: 0; max-width: 100%; }
body[data-geelooy-route="apps"] .g-app-card { color: var(--apps-ink); }
body[data-geelooy-route="apps"] .g-app-card p,
body[data-geelooy-route="apps"] .apps-section-heading > p { color: var(--apps-ink-dim); }

body[data-geelooy-route="apps"] :where(.g-unusual-header, .g-dock) {
	background: var(--apps-header-bg);
	border: 1px solid var(--apps-header-border);
	color: var(--apps-ink);
}

body[data-geelooy-route="apps"] :where(.g-unusual-header, .g-dock) a {
	color: inherit;
	text-decoration: none;
}

body[data-geelooy-route="apps"] :where(.g-unusual-header, .g-dock) a:hover {
	color: var(--apps-ink-bright);
	text-decoration: underline;
}

body[data-geelooy-route="apps"] .g-header-actions,
body[data-geelooy-route="apps"] .g-dock { gap: .35rem; }

@media (max-width: 54rem) {
	/* B"H — specificity bumped with html prefix (0,2,2 beats 0,2,1).
	   No !important needed: these come after the base rules. */
	html body[data-geelooy-route="apps"] .g-page {
		padding-bottom: calc(7.1rem + env(safe-area-inset-bottom));
		padding-top: calc(var(--g-header-h, 4.55rem) + 1.35rem);
	}

	html body[data-geelooy-route="apps"] .apps-section-heading { grid-template-columns: minmax(0, 1fr); }
	html body[data-geelooy-route="apps"] .g-unusual-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
	html body[data-geelooy-route="apps"] .g-dock { backdrop-filter: none; -webkit-backdrop-filter: none; }
}