/*
Shared CSS: design tokens, element defaults and the app layout (stage, slide, presenter shell, reactions bar).

A feature's own CSS lives in a .css file next to its .templ file, nested under the feature's root class,
and is loaded into `@layer features` by /feature-styles.css (see feature_styles.go and AGENTS.md).
The layer order below makes feature styles win over the shared layout without specificity fights.
Write mobile first: phones are the controllers, the big screen is the stage.
*/
@layer tokens, base, layout, features;

/* JetBrains Mono, the Frontiers Bergen website font. Self-hosted (static/fonts, SIL Open Font License in
   static/fonts/OFL.txt) so the app does not depend on Google Fonts over the venue wifi. */
@font-face {
	font-family: "JetBrains Mono";
	src: url("/static/fonts/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/static/fonts/JetBrainsMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@view-transition {
	navigation: auto;
}

@layer tokens {
	:root {
		/* Colors: the Frontiers Bergen website palette (frontiersbergen.dev, "Shades of Purple").
		   There is no official style guide yet; update here when one arrives. */
		--color-text-strong: #fff;
		--color-text-soft: #c5c0e8;
		--color-text-muted: #a599e9;

		--color-primary-text: var(--color-text-soft);
		--color-bg-base: #1e1e3f;
		--color-surface: #2d2b55;
		--color-border: #3a3779;

		/* Accents: orange for the markdown-style "#" before headings, cyan for links, yellow on hover. */
		--color-accent: #ff9d00;
		--color-link: #80ffea;
		--color-link-hover: #fad000;

		/* Layout */
		--stage-max-width: 68rem;

		/* Spacing (base: 1rem = 16px) */
		--space-1: 0.5rem;
		--space-2: 1rem;
		--space-3: 1.5rem;
		--space-4: 2rem;
		--space-5: 3rem;

		/* Type scale (bigger on desktop) */
		--font-body: clamp(1.2rem, 1vw + 1rem, 2.1rem);
		--font-h1: clamp(2.4rem, 2.4vw + 1.4rem, 4.6rem);
		--font-small: clamp(1.05rem, 0.4vw + 1rem, 1.35rem);

		/* Surfaces */
		--surface-presenter: var(--color-surface);
		--surface-glass: hsl(from var(--color-bg-base) h s l / 90%);
		--surface-backstage: var(--color-surface);
		--border-subtle: 1px solid var(--color-border);

		--radius: 12px;

		/* The reactions bar's height, reserved so it never overlaps stage content or presenter notes.
		   Keep it in sync with the bar: 1rem padding top and bottom, plus the reaction buttons
		   (3rem tap targets with 4px around them, pages/root/emoji_counter.css). */
		--reactions-min-height: 5.5rem;
	}
}

@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		color-scheme: dark;
		height: 100%;
		font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		-webkit-font-smoothing: antialiased;
	}

	/* Browsers give form controls their own font; make buttons and inputs use the page font. */
	button,
	input,
	select,
	textarea {
		font: inherit;
	}

	body {
		height: 100%;
		margin: 0;
		display: flex;
		background: var(--color-bg-base);
		color: var(--color-primary-text);
	}
}

@layer layout {
	/* min-width: 0 on the flex wrappers down to the slide: otherwise wide content (a code block) widens
	   the whole page on a phone instead of scrolling inside its own box. */
	#root-page-wrapper {
		min-height: 100vh;
		min-width: 0;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.app {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	/* Presenter shell: slide list on the left, controls on top, the stage below. Not part of the slide. */
	.presenter-layout {
		display: flex;
		flex: 1;
	}

	.presenter-sidebar {
		flex: 1;
		max-width: 20rem;
		overflow-y: auto;
		padding: var(--space-2);
		background: var(--surface-presenter);
		border-right: var(--border-subtle);
	}

	.presenter-main {
		flex: 1;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 0;
	}

	.presenter-bar {
		background: var(--surface-presenter);
		border-bottom: var(--border-subtle);
		padding: var(--space-2) var(--space-3);

		& > * {
			max-width: var(--stage-max-width);
			margin: 0 auto;
		}
	}

	/* The stage holds the active slide. */
	.stage {
		flex: 1;
		display: flex;
		flex-direction: column;

		padding: clamp(1rem, 3vw, 2rem);
		padding-bottom: calc(clamp(1rem, 3vw, 2rem) + var(--reactions-min-height) + env(safe-area-inset-bottom));

		& > * {
			flex: 1;
			display: flex;
			flex-direction: column;
			min-height: 0;
			min-width: 0;
		}
	}

	/* The slide "canvas" every slide starts from. */
	.slide {
		flex: 1;
		width: 100%;
		min-width: 0;
		max-width: var(--stage-max-width);
		margin: 0 auto;

		display: flex;
		flex-direction: column;
		justify-content: center;

		/* Mobile first: little top padding on a phone, where height is scarce.
		   From 40rem up, bias content downward: more top padding than bottom padding. */
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);

		@media (width >= 40rem) {
			padding-top: clamp(2.5rem, 12vh, 9rem);
			padding-bottom: clamp(1.5rem, 6vh, 5rem);
		}

		& h1 {
			margin: 0 0 var(--space-3) 0;
			font-size: var(--font-h1);
			line-height: 1.12;
			letter-spacing: -0.02em;
			color: var(--color-text-strong);

			/* Markdown-style heading marker, like frontiersbergen.dev. Hidden from screen readers. */
			&::before {
				content: "# " / "";
				color: var(--color-accent);
			}
		}

		& a {
			color: var(--color-link);

			&:hover {
				color: var(--color-link-hover);
			}
		}

		& ul {
			margin: 0;
			padding-left: 1.2em;
			font-size: var(--font-body);
			line-height: 1.45;
			color: var(--color-text-soft);
		}

		& li {
			margin-bottom: var(--space-2);

			&:last-child {
				margin-bottom: 0;
			}

			&::marker {
				color: var(--color-text-muted);
			}
		}
	}

	/* Presenter notes: a backstage strip above the reactions bar, only rendered for the presenter. */
	.presenter-notes {
		width: 100%;
		max-width: var(--stage-max-width);

		position: fixed;
		left: 50%;
		bottom: calc(var(--reactions-min-height) + var(--space-2));
		transform: translateX(-50%);
		z-index: 5;
		margin: 0;

		padding: var(--space-3);
		border: var(--border-subtle);
		border-radius: var(--radius);
		background: hsl(from var(--surface-backstage) h s l / 97%);

		font-size: var(--font-small);
		line-height: 1.4;
		color: var(--color-text-soft);

		.presenter-layout & {
			left: calc(50% + 10rem);
		}

		&::before {
			content: "Presenter notes";
			display: block;
			margin-bottom: var(--space-2);

			font-size: 0.85em;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--color-text-muted);
		}
	}

	/* The reactions bar is pinned to the bottom of every screen. */
	.reactions {
		position: sticky;
		bottom: 0;

		min-height: var(--reactions-min-height);

		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);

		padding: var(--space-2) var(--space-3);
		padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));

		background: var(--surface-glass);
		backdrop-filter: blur(8px);
		border-top: var(--border-subtle);
	}
}