@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Portal bar for the old Tale (R1 bridge; R2 replaces the old Tale).
   One header on every user-facing /tale/ page so the old pages carry the same top
   navigation as the SvelteKit Portal (src/routes/+layout.svelte, src/lib/styles/site.css).
   Injected by /tale/js/portal-bar.js as the first child of <body>.

   Rules:
   - Every token is namespaced (--pb-*) and set on .ae-portal-bar only, so it never
     collides with the old Tale's own :root variables.
   - The theme (localStorage ae_reader_theme / OS preference) paints THIS BAR ONLY,
     via .ae-portal-bar[data-theme]. The old pages, maps and canvases are never repainted.
   - The old pages style bare element selectors (header, nav, a, button). The bar resets
     every inherited/cascaded property with `all: unset` and re-declares what it needs.
   - The script keeps --ae-pb-h on <html> equal to the bar's real height (it grows when the
     nav wraps at <=560px) so pages can offset fixed chrome / 100vh layouts by it. */

.ae-portal-bar,
.ae-portal-bar *:not(svg):not(svg *) {
	/* Not the theme button's icons: `all: unset` would also clear SVG geometry such as `d`. */
	all: unset;
	box-sizing: border-box;
}

.ae-portal-bar {
	/* Light (site.css :root) */
	--pb-paper: #eceee9;
	--pb-paper-2: #e1e5df;
	--pb-ink: #1b2127;
	--pb-ink-soft: #505a63;
	--pb-rule: #c5cbc3;
	--pb-verdigris: #2e6a62;
	--pb-tallow: #9a6a1f;
	--pb-f-caps: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
	--pb-f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	.ae-portal-bar:not([data-theme='light']) {
		--pb-paper: #11161a;
		--pb-paper-2: #182026;
		--pb-ink: #dce0da;
		--pb-ink-soft: #99a3aa;
		--pb-rule: #2c363c;
		--pb-verdigris: #76b8ac;
		--pb-tallow: #d6a655;
		color-scheme: dark;
	}
}

.ae-portal-bar[data-theme='dark'] {
	--pb-paper: #11161a;
	--pb-paper-2: #182026;
	--pb-ink: #dce0da;
	--pb-ink-soft: #99a3aa;
	--pb-rule: #2c363c;
	--pb-verdigris: #76b8ac;
	--pb-tallow: #d6a655;
	color-scheme: dark;
}

/* ---------- the bar: mirrors HEADER SPEC (src/lib/styles/site.css) ---------- */
.ae-portal-bar {
	display: block;
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 1000; /* spec says 20; the old Tale's own chrome runs up to z 900, so the bar sits above it */
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--pb-paper);
	background: color-mix(in srgb, var(--pb-paper) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--pb-rule);
	color: var(--pb-ink);
	font-size: 16px;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.ae-portal-bar .ae-pb-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	max-width: 1180px;
	min-height: 3.25rem;
	margin: 0 auto;
	padding: 0 max(16px, 4vw);
}

.ae-portal-bar .ae-pb-wordmark {
	display: inline-block;
	font-family: var(--pb-f-caps);
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: var(--pb-ink);
	cursor: pointer;
}

.ae-portal-bar .ae-pb-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.2rem 0.6rem;
	font-family: var(--pb-f-caps);
	font-size: 1rem;
	letter-spacing: 0.05em;
	line-height: 1.2;
	color: var(--pb-ink-soft);
}

.ae-portal-bar .ae-pb-dot {
	display: inline;
	color: var(--pb-ink-soft);
}

.ae-portal-bar .ae-pb-link {
	display: inline-block;
	font: inherit;
	letter-spacing: inherit;
	color: var(--pb-ink-soft);
	text-decoration: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0.15rem 0 0.1rem;
	cursor: pointer;
	max-width: 14em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ae-portal-bar .ae-pb-link:hover {
	color: var(--pb-ink);
}

.ae-portal-bar .ae-pb-link[aria-current='page'] {
	color: var(--pb-ink);
	border-bottom-color: var(--pb-tallow);
}

.ae-portal-bar .ae-pb-theme {
	display: inline-flex;
	align-items: center;
	margin-left: 0.4rem;
	color: var(--pb-ink-soft);
	background: transparent;
	border: 1px solid var(--pb-rule);
	border-radius: 2px;
	padding: 0.32rem 0.45rem;
	cursor: pointer;
}

.ae-portal-bar .ae-pb-account + .ae-pb-theme {
	margin-left: 0;
}

.ae-portal-bar .ae-pb-theme:hover {
	color: var(--pb-ink);
	border-color: var(--pb-ink-soft);
}

.ae-portal-bar .ae-pb-theme svg {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The icon for the bar's mode (sun = light, moon = dark), chosen like the tokens above. */
.ae-portal-bar .ae-pb-theme .ae-pb-moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	.ae-portal-bar:not([data-theme='light']) .ae-pb-theme .ae-pb-sun {
		display: none;
	}

	.ae-portal-bar:not([data-theme='light']) .ae-pb-theme .ae-pb-moon {
		display: block;
	}
}

.ae-portal-bar[data-theme='dark'] .ae-pb-theme .ae-pb-sun {
	display: none;
}

.ae-portal-bar[data-theme='dark'] .ae-pb-theme .ae-pb-moon {
	display: block;
}

.ae-portal-bar :focus-visible {
	outline: 2px solid var(--pb-tallow);
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.ae-portal-bar .ae-pb-row {
		padding-block: 0.45rem;
	}

	.ae-portal-bar .ae-pb-nav {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
	}
}

/* ---------- old-Tale chrome that is fixed to the viewport top ----------
   Shared rules for classes from /tale/css/aetheria.css; page-specific offsets live in
   each page's own <style>. --ae-pb-h is the bar's live height (portal-bar.js). */
html.ae-pb-on {
	--ae-pb-h: 53px;
	scroll-padding-top: var(--ae-pb-h);
}

html.ae-pb-on .top-actions {
	top: calc(var(--ae-pb-h) + var(--space-4, 16px));
}

@media (max-width: 768px) {
	html.ae-pb-on .top-actions {
		top: calc(var(--ae-pb-h) + var(--space-2, 8px));
	}
}

/* aetheria.css .topbar (chronicle, character): fixed at top:0 → just below the bar.
   game.html undoes this inside #game-screen, which is already offset as a whole. */
html.ae-pb-on .topbar {
	top: var(--ae-pb-h);
}