/*
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;

		/* Team colours for team games: the two colours of the Frontiers logo. Text on them is near-black. */
		--color-team-teal: #07d9b2;
		--color-team-orange: #ff9200;

		/* 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);
		/* Diagrams, charts and tiles on the big screen: big enough for the back row, small enough to fit one row. */
		--font-visual: 1.5rem;

		/* 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, for anything that floats just above the bar (the snow globe button).
		   The bar has its own row below the stage, so the stage needs no room for it. 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;
	}

	/* The style guide's button. Features restyle their own buttons in the features layer, which always wins. */
	button {
		min-height: 3rem;
		padding: 0 var(--space-2);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: var(--color-surface);
		color: var(--color-text-strong);
		cursor: pointer;
	}

	/* Text fields sit on the background like a code block: the presenter key, and later ideas and feedback. */
	input {
		min-height: 3rem;
		padding: 0 var(--space-2);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: var(--color-bg-base);
		color: var(--color-text-strong);
	}

	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;

		/* On a phone the page scrolls; from 40rem up (the big screen) the page keeps to the screen's height, so a
		   slide with a lot of text gives up its spacers before anything ends up out of sight. */
		@media (width >= 40rem) {
			min-height: 0;
		}
	}

	/* 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;

		/* A slide with long notes scrolls inside the stage, also on a small screen. */
		.stage {
			/* The presenter's copy of the slide is a working view on a laptop: smaller type, so the slide and its
			   notes fit on the screen together. The projector shows it at full size, and so do the previews. */
			--font-h1: clamp(1.8rem, 1.2vw + 1rem, 3rem);
			--font-body: clamp(1.05rem, 0.5vw + 0.8rem, 1.5rem);
			--font-small: clamp(0.95rem, 0.3vw + 0.8rem, 1.15rem);

			min-height: 0;
			overflow-y: auto;
		}
	}

	.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;

		/* No room needed for the reactions bar: it has its own row below the stage. */
		--stage-padding: clamp(1rem, 3vw, 2rem);
		padding: var(--stage-padding);

		@media (width >= 40rem) {
			min-height: 0;
			overflow-y: auto;
		}

		& > * {
			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;
		/* The slide keeps to the stage's height, so its spacers give way to the content (below). */
		min-height: 0;
		max-width: var(--stage-max-width);
		margin: 0 auto;

		display: flex;
		flex-direction: column;
		/* "safe": a slide taller than the stage starts at the top and scrolls, instead of overflowing at both ends. */
		justify-content: safe center;

		padding-top: var(--space-2);
		padding-bottom: var(--space-2);

		/* From 40rem up, bias content downward: more space above than below. The space is two spacers that give way
		   when the content needs the room, so a slide with a lot of text keeps its heading near the top and its last
		   line on the screen; fixed padding pushed the heading down and the end of the slide out of sight. */
		@media (width >= 40rem) {
			&::before,
			&::after {
				content: "";
				flex: 0 1 clamp(2.5rem, 12vh, 9rem);
			}

			&::after {
				flex-basis: clamp(1.5rem, 6vh, 5rem);
			}
		}

		/* The presenter's view has the controls above the slide and the notes below it: no downward bias there,
		   or the bottom of the slide ends up out of sight. The slide grows with its content and the stage scrolls,
		   so the notes always come after the slide instead of over it. */
		.presenter-layout & {
			min-height: auto;

			&::before,
			&::after {
				display: none;
			}
		}

		& 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 panel below the slide, only rendered for the presenter. In the flow, not over
	   the slide: as a fixed strip, long notes covered the slide itself. */
	.presenter-notes {
		width: 100%;
		max-width: var(--stage-max-width);
		margin: var(--space-2) auto 0;

		padding: var(--space-3);
		border: var(--border-subtle);
		border-radius: var(--radius);
		background: var(--surface-backstage);

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

		&::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);
	}
}