/* =============================================================
   Festveggen — brand stylesheet
   Two surfaces: cream (marketing + host UI) and midnight (the wall).
   Class names mirror the existing markup so e2e tests keep passing.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
	/* Neutrals (warm) */
	--cream: #F8F2E7;
	--paper: #FFFEFB;
	--ink: #1F1A14;
	--ink-2: #574E42;
	--ink-3: #978C7C;
	--slate: #DCD2BE;

	/* Midnight */
	--midnight: #100D22;
	--midnight-elev-1: #1A1638;
	--midnight-elev-2: #251E48;
	--moonlight: #F4F0FF;
	--moonlight-2: #B5AED5;
	--moonlight-3: #6F6890;

	/* Confetti palette */
	--magenta: #FF3D8A;
	--magenta-glow: #FF5BA0;
	--magenta-soft: #FFE0EC;
	--sunshine: #FFD23F;
	--sunshine-soft: #FFF4C8;
	--mint: #5CE1B5;
	--mint-soft: #D6F8EC;
	--periwinkle: #6E7BFF;
	--periwinkle-soft: #E0E3FF;
	--coral: #FF7A59;
	--coral-soft: #FFE2D8;

	/* Vipps brand orange — fixed by Vipps' brand guidelines, not part of
	   our palette. Only used inside .vipps-btn so it's recognizable. */
	--vipps: #FF5B24;
	--vipps-hover: #E64A18;

	/* Semantic */
	--success: #1F7A3A;
	--success-bg: var(--mint-soft);
	--danger: #B5283A;
	--danger-bg: var(--magenta-soft);

	/* Surface aliases — overridden inside .present */
	--bg: var(--cream);
	--surface: var(--paper);
	--fg-1: var(--ink);
	--fg-2: var(--ink-2);
	--fg-3: var(--ink-3);
	--border: var(--slate);
	--accent: var(--magenta);

	/* Type stacks */
	--font-display: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

	/* Radii / shadows */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 32px;
	--radius-full: 9999px;
	--shadow-1: 0 1px 2px rgba(31, 26, 20, 0.04), 0 2px 8px rgba(31, 26, 20, 0.06);
	--shadow-2: 0 2px 4px rgba(31, 26, 20, 0.05), 0 8px 24px rgba(31, 26, 20, 0.08);
	--shadow-3: 0 4px 8px rgba(31, 26, 20, 0.06), 0 24px 48px rgba(31, 26, 20, 0.16);
	--shadow-festive: 0 6px 18px rgba(255, 61, 138, 0.3);

	/* Motion */
	--ease-festive: cubic-bezier(0.32, 0.72, 0, 1);
	--motion-fast: 160ms;
	--motion-base: 320ms;
	--motion-slow: 640ms;
}

/* =============================================================
   Base
   ============================================================= */

html {
	height: 100%;
	background: var(--bg);
}

body {
	min-height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--fg-1);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	box-sizing: border-box;
}

a {
	color: inherit;
}

a:hover {
	color: var(--magenta);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--fg-1);
	margin: 0 0 .6em;
	text-wrap: balance;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p { margin: 0 0 1em; text-wrap: pretty; }

code, .mono { font-family: var(--font-mono); }

/* =============================================================
   Header / wordmark
   ============================================================= */

header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 2rem;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

header h1 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.03em;
	margin: 0;
}

header h1::after {
	content: '.';
	color: var(--magenta);
}

header a {
	font-size: 0.95rem;
	color: var(--fg-2);
	text-decoration: none;
	transition: color var(--motion-fast);
}

header a:hover {
	color: var(--fg-1);
}

/* =============================================================
   Main / footer
   ============================================================= */

main.content {
	flex: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 2rem 4rem;
}

footer {
	margin-top: auto;
	padding: 2rem;
	text-align: center;
	color: var(--fg-3);
	font-size: 0.85rem;
	border-top: 1px solid var(--border);
}

footer b {
	color: var(--fg-1);
}

footer a:hover {
	color: var(--magenta);
}

/* =============================================================
   Buttons
   ============================================================= */

button,
.button,
input[type=submit] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background: var(--ink);
	color: var(--cream);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition: transform var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}

button:hover,
.button:hover,
input[type=submit]:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-2);
}

button:active,
.button:active,
input[type=submit]:active {
	transform: scale(0.98);
}

.button.big,
input[type=submit].big {
	padding: 0.95rem 1.6rem;
	font-size: 1.05rem;
}

/* The festive call to action — magenta, used sparingly */
.button.festive,
button.festive {
	background: var(--magenta);
	color: #fff;
	box-shadow: var(--shadow-festive);
}

.button.danger,
button.danger {
	background: var(--danger);
	color: #fff;
}

.button.busy,
button.busy {
	opacity: 0.6;
	cursor: progress;
}

/* Link-styled button, used inside paragraphs */
button.link {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 0.5rem;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	cursor: pointer;
	font: inherit;
	font-family: var(--font-body);
}

button.link:hover {
	transform: none;
	box-shadow: none;
	color: var(--magenta);
}

/* Vipps brand button — only place we depart from the palette so the
   button reads as Vipps and meets their UX guidelines. */
.vipps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.7rem 1.4rem;
	background: var(--vipps);
	color: #fff;
	border-radius: var(--radius-full);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(255, 91, 36, 0.25);
	transition: transform var(--motion-fast), background var(--motion-fast);
}

.vipps-btn:hover {
	background: var(--vipps-hover);
	color: #fff;
	transform: translateY(-1px);
}

/* =============================================================
   Forms
   ============================================================= */

label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--fg-2);
}

input[type="text"],
input[type="email"],
textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--fg-1);
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 0.6rem 0.85rem;
	transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	outline: none;
	border-color: var(--magenta);
	box-shadow: 0 0 0 3px var(--magenta-soft);
}

input::placeholder {
	color: var(--fg-3);
}

/* =============================================================
   Landing (Index)
   ============================================================= */

.landing {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 2rem 4rem;
}

.landing-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 4rem;
	align-items: center;
	padding: 3rem 0 5rem;
	position: relative;
}

@media (max-width: 880px) {
	.landing-hero {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding: 2rem 0 3rem;
		text-align: center;
	}
	.landing-hero .landing-hero-ctas { justify-content: center; }
	.landing-hero .landing-hero-meta { justify-content: center; }
}

.landing-eyebrow {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-2);
	margin-bottom: 1rem;
}

.landing-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1.0;
	letter-spacing: -0.035em;
	margin: 0;
}

.landing-title em {
	font-style: normal;
	color: var(--magenta);
	position: relative;
	display: inline-block;
}

.landing-title em::after {
	content: '';
	position: absolute;
	left: -2px;
	right: -8px;
	bottom: 0.18em;
	height: 0.18em;
	background: var(--sunshine);
	z-index: -1;
	border-radius: 4px;
	transform: rotate(-1deg);
}

.landing-sub {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--fg-2);
	max-width: 28rem;
	margin: 1.5rem 0 0;
}

.landing-hero-ctas {
	display: flex;
	gap: 0.75rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.landing-hero-meta {
	display: flex;
	gap: 1.25rem;
	margin-top: 1.75rem;
	font-size: 0.85rem;
	color: var(--fg-3);
	flex-wrap: wrap;
}

.landing-hero-meta span::before {
	content: '✦ ';
	color: var(--magenta);
}

/* Mini wall preview */
.miniwall {
	background: var(--midnight);
	border-radius: var(--radius-xl);
	padding: 1.1rem;
	box-shadow: 0 24px 60px rgba(14, 11, 31, 0.18);
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.miniwall-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.miniwall-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--moonlight);
}

.miniwall-stats {
	display: flex;
	gap: 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--moonlight-2);
	align-items: center;
}

.miniwall-live {
	color: var(--magenta-glow);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
}

.miniwall-live::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var(--magenta-glow);
	box-shadow: 0 0 8px var(--magenta-glow);
}

.miniwall-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 0.5rem;
	height: calc(100% - 2.25rem);
}

.miniwall-tile {
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--midnight-elev-2);
	animation: miniwall-fade 600ms var(--ease-festive) both;
	position: relative;
}

.miniwall-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(at 30% 30%, rgba(255, 91, 160, 0.5), transparent 60%),
		radial-gradient(at 70% 80%, rgba(110, 123, 255, 0.4), transparent 60%);
	mix-blend-mode: screen;
	opacity: 0.7;
}

.miniwall-tile-0 { animation-delay: 0ms; }
.miniwall-tile-1 { animation-delay: 120ms; }
.miniwall-tile-2 { animation-delay: 240ms; background: linear-gradient(135deg, #6E7BFF, #1A1638); }
.miniwall-tile-3 { animation-delay: 360ms; background: linear-gradient(135deg, #FF7A59, #251E48); }
.miniwall-tile-4 { animation-delay: 480ms; background: linear-gradient(135deg, #FF3D8A, #1A1638); }
.miniwall-tile-5 { animation-delay: 600ms; background: linear-gradient(135deg, #5CE1B5, #251E48); }
.miniwall-tile-6 { animation-delay: 720ms; background: linear-gradient(135deg, #FFD23F, #1A1638); }
.miniwall-tile-7 { animation-delay: 840ms; background: linear-gradient(135deg, #FF5BA0, #251E48); }
.miniwall-tile-8 { animation-delay: 960ms; background: linear-gradient(135deg, #8B96FF, #1A1638); }

@keyframes miniwall-fade {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}

.landing-confetti {
	position: absolute;
	top: -2rem;
	right: -1.5rem;
	width: 14rem;
	pointer-events: none;
	opacity: 0.85;
}

/* Steps + pricing */
.landing-section {
	padding: 4rem 0;
}

.landing-section-head {
	text-align: center;
	margin-bottom: 3rem;
}

.landing-section-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.025em;
	margin: 0.5rem 0 0;
}

.landing-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 720px) {
	.landing-steps { grid-template-columns: 1fr; }
}

.landing-step {
	background: var(--paper);
	border-radius: var(--radius-xl);
	padding: 2rem;
	box-shadow: var(--shadow-1);
}

.landing-step-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 3rem;
	letter-spacing: -0.04em;
	line-height: 1;
}

.landing-step-num.c-magenta { color: var(--magenta); }
.landing-step-num.c-sunshine { color: var(--sunshine); }
.landing-step-num.c-mint { color: var(--mint); }

.landing-step-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
	margin: 0.75rem 0 0.4rem;
}

.landing-step-body {
	color: var(--fg-2);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

/* =============================================================
   Company / seller disclosure block (terms, landing footer)
   ============================================================= */

.company-info {
	margin: 3rem auto 1rem;
	max-width: 36rem;
	padding: 1.25rem 1.5rem;
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-align: left;
}

.company-info h3,
.company-info h4 {
	margin: 0 0 .6rem;
	font-family: var(--font-display);
}

.company-info h4 {
	margin-top: 1rem;
}

.company-info-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1rem;
	row-gap: .35rem;
	margin: 0 0 1rem;
}

.company-info-list dt {
	font-weight: 600;
	color: var(--fg-2);
}

.company-info-list dd {
	margin: 0;
	color: var(--fg-1);
}

/* =============================================================
   Existing host UI (event list, share, pictures, ...)
   ============================================================= */

.event-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	border-top: 1px solid var(--border);
}

.event-list li {
	border-bottom: 1px solid var(--border);
}

.event-list li a {
	display: block;
	padding: 0.9rem 0.25rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--fg-1);
	text-decoration: none;
	transition: color var(--motion-fast), padding var(--motion-fast);
}

.event-list li a:hover {
	color: var(--magenta);
	padding-left: 0.5rem;
}

.archived-events summary {
	cursor: pointer;
	color: var(--fg-2);
	margin: 1rem 0;
}

.archived-events summary:hover {
	color: var(--fg-1);
}

.event-create {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.event-create input[type=text] {
	flex: 1;
}

.event-rename {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.event-rename input[type=text] {
	flex: 1;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	background: transparent;
	border: 1px solid transparent;
	padding: 0.3rem 0.5rem;
}

.event-rename input[type=text]:focus {
	background: var(--paper);
	border-color: var(--border);
}

.event-share {
	display: flex;
	gap: 2rem;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
	padding: 1.5rem;
	background: var(--paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-1);
}

.event-share strong {
	font-family: var(--font-mono);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--magenta);
	letter-spacing: 0.04em;
}

.event-share img.qr {
	width: 12rem;
	height: 12rem;
	border-radius: var(--radius-md);
	background: #fff;
	padding: 0.75rem;
	box-shadow: var(--shadow-1);
}

.event-share p {
	margin: 0 0 0.4rem;
	color: var(--fg-2);
}

.event-share a:not(.button) {
	color: var(--fg-1);
	text-decoration: underline;
	text-decoration-color: var(--border);
	text-underline-offset: 3px;
}

.event-share a:not(.button):hover {
	text-decoration-color: var(--magenta);
	color: var(--magenta);
}

.event-moderation,
.event-archive {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--paper);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

.event-moderation p,
.event-archive p {
	margin: 0;
	color: var(--fg-2);
}

.event-archive {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.event-delete {
	margin-top: 3rem;
	text-align: center;
}

/* Upload */
.upload {
	margin: 1rem 0 2rem;
}

.upload .button {
	background: var(--ink);
}

/* In-flight upload progress: a row per file with a progress bar.
   Shared between the host's multi-select uploader and the guest single-shot
   uploader (which uses a bare <progress> inside the form instead of a list). */
.upload-bar,
.upload-progress progress {
	appearance: none;
	-webkit-appearance: none;
	height: 0.5rem;
	width: 100%;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--border);
	overflow: hidden;
}

.upload-bar::-webkit-progress-bar,
.upload-progress progress::-webkit-progress-bar {
	background: var(--border);
	border-radius: var(--radius-full);
}

.upload-bar::-webkit-progress-value,
.upload-progress progress::-webkit-progress-value {
	background: var(--magenta);
	border-radius: var(--radius-full);
	transition: width var(--motion-fast);
}

.upload-bar::-moz-progress-bar,
.upload-progress progress::-moz-progress-bar {
	background: var(--magenta);
	border-radius: var(--radius-full);
}

.upload-bar {
	margin-top: 0.75rem;
	max-width: 18rem;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.upload-progress {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.upload-progress-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	align-items: center;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--paper);
	font-size: 0.9rem;
}

.upload-progress-item .upload-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink);
}

.upload-progress-item .upload-status {
	font-variant-numeric: tabular-nums;
	color: var(--ink-2);
	min-width: 3.5rem;
	text-align: right;
}

.upload-progress-item progress {
	grid-column: 1 / -1;
}

.upload-progress-item.done .upload-status::before {
	content: "✓ ";
	color: var(--magenta);
}

.upload-progress-item.error {
	border-color: var(--danger);
	background: color-mix(in srgb, var(--danger) 8%, var(--paper));
}

.upload-progress-item.error .upload-status {
	color: var(--danger);
}

/* Picture grid */
.pictures {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
}

.pictures > .picture {
	position: relative;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 12rem;
	width: 12rem;
	background: var(--paper);
	box-shadow: var(--shadow-1);
	transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}

.pictures > .picture:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-2);
}

.pictures-reorder > .picture {
	cursor: grab;
}

.pictures-reorder > .picture.dragging {
	opacity: 0.4;
	cursor: grabbing;
}

.pictures > .picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pictures > .picture > .picture-number {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 0.4rem;
	border-radius: var(--radius-full);
	background: rgba(255, 254, 251, 0.92);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.6rem;
	text-align: center;
	z-index: 1;
	box-shadow: var(--shadow-1);
}

.pictures > .picture > .picture-delete {
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	margin: 0;
	z-index: 1;
}

.pictures > .picture > .picture-delete button {
	width: 1.85rem;
	height: 1.85rem;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(31, 26, 20, 0.7);
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.1rem;
	line-height: 1;
}

.pictures > .picture > .picture-delete button:hover {
	background: var(--danger);
}

.pictures > .picture > .picture-approve {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	margin: 0;
	z-index: 1;
}

.pictures > .picture > .picture-approve button {
	width: 1.85rem;
	height: 1.85rem;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--success);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	border: 0;
}

.pictures > .picture > .picture-approve button:hover {
	background: #155f2c;
}

.pictures > .picture > .picture-flag {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	z-index: 1;
	padding: 0.15rem 0.5rem;
	border-radius: var(--radius-full);
	background: var(--danger);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: help;
}

.pictures.pending {
	padding: 0.75rem;
	border-radius: var(--radius-lg);
	background: var(--magenta-soft);
	outline: none;
}

.pictures.pending > .picture {
	border-color: var(--magenta);
}

/* Inline messages */
.success {
	color: var(--success);
	font-weight: 500;
}

.error,
p.error {
	color: var(--danger);
	font-weight: 500;
}

.hint,
div.hint {
	color: var(--fg-2);
	font-size: 0.9rem;
}

div.hint {
	background: var(--sunshine-soft);
	padding: 0.85rem 1.1rem;
	border-radius: var(--radius-md);
	margin: 1rem 0;
	border-left: 3px solid var(--sunshine);
}

div.hint p { margin: 0 0 0.4rem; }
div.hint p:last-child { margin: 0; }

/* Centered narrow forms (login, signup, profile) */
.center {
	margin-left: auto;
	margin-right: auto;
}

.text-center { text-align: center; }

main.content.center,
main.content > .center {
	max-width: 32rem;
}

main.content.center {
	margin: 0 auto;
	padding-top: 3rem;
}

/* Login/signup/verify forms — soft card */
form.w18 {
	width: 100%;
	max-width: 22rem;
	margin: 1.5rem auto 0;
	padding: 2rem;
	background: var(--paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-1);
}

form.w18 input[type="text"],
form.w18 input[type="email"] {
	width: 100%;
	margin-top: 0.4rem;
}

form.w18 input[type="submit"] {
	width: 100%;
	margin-top: 0.5rem;
	background: var(--magenta);
	color: #fff;
	box-shadow: var(--shadow-festive);
}

form.w18 p {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--fg-2);
}

form.w18 a {
	color: var(--magenta);
	text-decoration: none;
	font-weight: 500;
}

form.w18 a:hover {
	text-decoration: underline;
}

/* Admin tables */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
	background: var(--paper);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-1);
}

table th {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-3);
	padding: 0.75rem 0.85rem;
	border-bottom: 1px solid var(--border);
}

table td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--border);
	font-size: 0.9rem;
}

table tr:last-child td {
	border-bottom: none;
}

/* Utility (kept for templ classes already in use) */
.w1 { width: 1rem; }
.w2 { width: 2rem; }
.w3 { width: 3rem; }
.w16 { width: 16rem; }
.w18 { width: 18rem; }
.w100 { width: 100%; }

.mla { margin-left: auto; }
.mra { margin-right: auto; }
.mr1 { margin-right: 1rem; }
.mr2 { margin-right: 2rem; }
.mr3 { margin-right: 3rem; }
.ml1 { margin-left: 1rem; }
.ml2 { margin-left: 2rem; }
.ml3 { margin-left: 3rem; }

.invisilink {
	color: inherit;
	text-decoration: none;
}

.invisilink:hover {
	color: var(--magenta);
}

/* =============================================================
   Guest upload page (cream, magenta upload button)
   ============================================================= */

main.content.guest {
	max-width: 28rem;
	text-align: center;
	padding-top: 4rem;
}

main.content.guest h2 {
	font-size: 2.2rem;
}

main.content.guest .upload .button.big {
	background: var(--magenta);
	color: #fff;
	box-shadow: var(--shadow-festive);
	font-size: 1.1rem;
	padding: 1.1rem 2rem;
}

/* =============================================================
   The wall — present page (midnight, single-photo carousel)
   ============================================================= */

body.present {
	background: var(--midnight);
	color: var(--moonlight);
	margin: 0;
	height: 100vh;
	overflow: hidden;
	display: block;
}

body.present * {
	color: inherit;
}

body.present .present-init {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.75rem;
	color: var(--moonlight-2);
	text-align: center;
	padding: 0 2rem;
	margin: 0;
}

/* The single photo. Existing img.present-img is preserved exactly so e2e
   tests that read its src attribute continue to work. */
.present-img {
	display: block;
	width: 100vw;
	height: 100vh;
	object-fit: contain;
	background: var(--midnight);
	transition: opacity 900ms var(--ease-festive);
}

.present-img:not([src]),
.present-img[src=""] {
	opacity: 0;
}

/* Corner chrome */
.present-corner {
	position: fixed;
	z-index: 2;
	pointer-events: none;
}

.present-corner.tl {
	top: 0;
	left: 0;
	padding: 1.6rem 2.2rem;
}

.present-corner.tr {
	top: 0;
	right: 0;
	padding: 1.6rem 2.2rem;
	text-align: right;
}

.present-corner.bl {
	bottom: 0;
	left: 0;
	padding: 1.6rem 2.2rem;
}

.present-corner.br {
	bottom: 1.5rem;
	right: 2rem;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	background: rgba(244, 240, 255, 0.06);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(244, 240, 255, 0.1);
	border-radius: var(--radius-lg);
	padding: 0.85rem 1.05rem;
}

.present-wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: -0.03em;
	color: var(--moonlight-2);
}

.present-wordmark::after {
	content: '.';
	color: var(--magenta-glow);
}

.present-event-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.85rem;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin-top: 0.4rem;
	color: #fff;
}

.present-join-text {
	text-align: right;
}

.present-join-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--moonlight-3);
}

.present-join-url {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -0.02em;
	color: #fff;
	margin-top: 0.15rem;
}

.present-join-code {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--moonlight-2);
	letter-spacing: 0.04em;
	margin-top: 0.15rem;
}

.present-qr-wrap {
	background: #fff;
	padding: 0.55rem;
	border-radius: var(--radius-md);
	display: flex;
}

.present-qr-wrap img {
	display: block;
	width: 6.5rem;
	height: 6.5rem;
}

/* Help/status overlays — kept for the existing script. */
.present-status {
	position: fixed;
	top: 1.2rem;
	right: 1.2rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--radius-full);
	background: rgba(244, 240, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(244, 240, 255, 0.1);
	color: var(--moonlight);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	z-index: 5;
}

.present-help {
	position: fixed;
	bottom: 1.2rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.45rem 1rem;
	border-radius: var(--radius-full);
	background: rgba(244, 240, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(244, 240, 255, 0.1);
	color: var(--moonlight-2);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	z-index: 4;
	transition: opacity 1s ease;
	pointer-events: none;
}

@media (max-width: 720px) {
	.present-corner.br {
		bottom: 1rem;
		right: 1rem;
		gap: 0.75rem;
		padding: 0.6rem 0.75rem;
	}
	.present-qr-wrap img { width: 4.5rem; height: 4.5rem; }
	.present-event-name { font-size: 1.25rem; }
	.present-corner.tl,
	.present-corner.tr,
	.present-corner.bl { padding: 1rem 1.2rem; }
}