@charset "UTF-8";
/* =====================================================================
   AI TRAINING BOOKING CALENDAR — "Midnight Pro"
   Mobile-first. Vanilla CSS only. Apple-style depth, rounded geometry,
   frosted glass, cyan/teal accent. Semantic colour coding:
   GREEN = go/available · YELLOW = alert/buffer · RED = error/booked.
   ===================================================================== */

/* ------------------------- Design tokens ------------------------- */
:root {
	/* Surfaces */
	--bg-0:        #070c16;
	--bg-1:        #0b1220;
	--surface:     rgba(20, 31, 51, 0.72);
	--surface-2:   rgba(28, 42, 68, 0.62);
	--surface-hi:  rgba(46, 66, 100, 0.55);
	--hairline:    rgba(148, 178, 220, 0.16);
	--hairline-hi: rgba(148, 200, 240, 0.34);

	/* Text */
	--ink:         #f2f7ff;
	--ink-soft:    #c3d3e8;
	--ink-mute:    #8ea3bf;

	/* Accent (cyan / teal) */
	--accent:      #22d3ee;
	--accent-2:    #2dd4bf;
	--accent-deep: #0e7490;
	--accent-glow: rgba(34, 211, 238, 0.34);

	/* Semantic */
	--go:          #34d399;
	--go-deep:     #065f46;
	--go-glow:     rgba(52, 211, 153, 0.30);
	--alert:       #fbbf24;
	--alert-deep:  #78350f;
	--alert-glow:  rgba(251, 191, 36, 0.26);
	--error:       #f87171;
	--error-deep:  #7f1d1d;
	--error-glow:  rgba(248, 113, 113, 0.26);

	/* Geometry */
	--r-sm: 0.65rem;
	--r-md: 1rem;
	--r-lg: 1.35rem;
	--r-xl: 1.9rem;
	--r-pill: 999px;

	/* Depth — deliberately dark, layered shadows */
	--sh-1: 0 1px 2px rgba(0, 0, 0, 0.55);
	--sh-2: 0 4px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
	--sh-3: 0 14px 38px rgba(0, 0, 0, 0.62), 0 3px 10px rgba(0, 0, 0, 0.5);
	--sh-4: 0 26px 70px rgba(0, 0, 0, 0.7), 0 6px 18px rgba(0, 0, 0, 0.55);
	--text-sh: 0 1px 2px rgba(0, 0, 0, 0.85);

	/* Motion */
	--ease: cubic-bezier(0.32, 0.72, 0, 1);
	--fast: 160ms;
	--med:  280ms;
	--slow: 520ms;

	/* Type */
	--font-title: "Gabriela", Georgia, "Times New Roman", serif;
	--font-body:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--pad: clamp(0.9rem, 4vw, 1.6rem);
	--maxw: 78rem;
}

/* ------------------------- Reset ------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0 0 6rem;
	min-height: 100vh;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(1rem, 0.96rem + 0.25vw, 1.09rem);
	line-height: 1.6;
	color: var(--ink);
	text-shadow: var(--text-sh);
	background-color: var(--bg-0);
	background-image:
		radial-gradient(115rem 60rem at 50% -22rem, rgba(34, 211, 238, 0.14), transparent 62%),
		radial-gradient(70rem 46rem at 108% 8%, rgba(45, 212, 191, 0.10), transparent 60%),
		radial-gradient(60rem 44rem at -12% 30%, rgba(59, 130, 246, 0.10), transparent 62%),
		linear-gradient(180deg, #0b1220 0%, #070c16 58%, #05080f 100%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-title);
	font-weight: 400;
	line-height: 1.18;
	margin: 0 0 0.6em;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 1px 1px rgba(0, 0, 0, 0.9);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent-2); }

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 0.6rem; top: -6rem; z-index: 200;
	background: var(--accent-deep); color: #fff;
	padding: 0.7rem 1.1rem; border-radius: var(--r-md);
	transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: 0.6rem; }

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* ------------------------- Splash ------------------------- */
.splash {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	padding: 1.2rem;
	background: radial-gradient(60rem 40rem at 50% 45%, #12203a, #05080f 78%);
	opacity: 1;
	transition: opacity var(--slow) var(--ease);
}
.splash img {
	width: min(92vw, 46rem);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-4), 0 0 0 1px var(--hairline-hi), 0 0 70px var(--accent-glow);
	animation: splashIn 720ms var(--ease) both;
}
.splash.is-gone { opacity: 0; pointer-events: none; }
.splash.is-removed { display: none; }

@keyframes splashIn {
	from { opacity: 0; transform: scale(0.94) translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------- Hero ------------------------- */
.hero {
	position: relative;
	padding: clamp(2.6rem, 11vw, 5.2rem) 0 clamp(1.8rem, 6vw, 3rem);
	text-align: center;
	overflow: hidden;
}
.hero::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	width: min(94%, 62rem); height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--hairline-hi), transparent);
}

.eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 0.9rem;
	font-weight: 700;
}

.hero h1 {
	font-size: clamp(2.1rem, 9.2vw, 4rem);
	margin-bottom: 0.5rem;
	background: linear-gradient(180deg, #ffffff 12%, #b9e8f5 96%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8));
	text-shadow: none;
}

.lede {
	max-width: 44rem;
	margin-inline: auto;
	color: var(--ink-soft);
	font-size: clamp(1.02rem, 0.96rem + 0.5vw, 1.22rem);
}
.lede strong { color: var(--ink); }

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: center;
	margin-top: 1.5rem;
}

/* ------------------------- Buttons ------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.95rem;
	padding: 0.72rem 1.35rem;
	border: 1px solid var(--hairline);
	border-radius: var(--r-pill);
	background: var(--surface-2);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: var(--text-sh);
	cursor: pointer;
	box-shadow: var(--sh-2);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
	            background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), filter var(--fast) var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--hairline-hi); transform: translateY(-1px); box-shadow: var(--sh-3); }
.btn:active { transform: translateY(1px) scale(0.985); box-shadow: var(--sh-1); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--sh-1); }

.btn-primary {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
	border-color: rgba(255, 255, 255, 0.28);
	color: #04222c;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
	box-shadow: var(--sh-3), 0 0 26px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-go {
	background: linear-gradient(180deg, var(--go) 0%, var(--go-deep) 100%);
	border-color: rgba(255, 255, 255, 0.28);
	color: #022c1d;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
	box-shadow: var(--sh-3), 0 0 26px var(--go-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-go:hover { filter: brightness(1.08); }

.btn-warn {
	background: linear-gradient(180deg, var(--alert) 0%, var(--alert-deep) 100%);
	border-color: rgba(255, 255, 255, 0.26);
	color: #2b1a00;
	text-shadow: none;
}

.btn-danger {
	background: linear-gradient(180deg, var(--error) 0%, var(--error-deep) 100%);
	border-color: rgba(255, 255, 255, 0.24);
	color: #2c0505;
	text-shadow: none;
}

.btn-ghost { background: var(--surface); color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-hi); }

.btn-page {
	min-width: 2.95rem;
	padding: 0.5rem 0.9rem;
	font-size: 1.5rem;
	line-height: 1;
	border-radius: var(--r-pill);
}

.btn-call {
	width: 100%;
	max-width: 26rem;
	padding: 1.05rem 1.5rem;
	font-size: 1.12rem;
	background: linear-gradient(180deg, var(--go) 0%, var(--go-deep) 100%);
	color: #022c1d;
	border-color: rgba(255, 255, 255, 0.3);
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.28);
	box-shadow: var(--sh-4), 0 0 34px var(--go-glow), inset 0 1px 0 rgba(255, 255, 255, 0.42);
	animation: callPulse 2.6s var(--ease) infinite;
}
.call-icon { font-size: 1.5rem; }
.call-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.22; }
.call-text strong { font-size: 1.32rem; letter-spacing: 0.02em; }
.call-wrap { display: flex; justify-content: center; }

@keyframes callPulse {
	0%, 100% { box-shadow: var(--sh-4), 0 0 26px var(--go-glow), inset 0 1px 0 rgba(255, 255, 255, 0.42); }
	50%      { box-shadow: var(--sh-4), 0 0 46px var(--go-glow), inset 0 1px 0 rgba(255, 255, 255, 0.42); }
}

/* ------------------------- Cards ------------------------- */
.card {
	position: relative;
	margin: 1.35rem 0;
	padding: clamp(1.15rem, 4.5vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
}
.card h2 { font-size: clamp(1.35rem, 5vw, 1.85rem); color: var(--ink); }

.steps { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--ink-soft); }
.steps li { margin-bottom: 0.5rem; }
.steps strong { color: var(--ink); }

.topics { margin: 0 0 1.1rem; padding-left: 1.15rem; color: var(--ink-soft); }
.topics li { margin-bottom: 0.5rem; }
.topics strong { color: var(--ink); }

/* ------------------------- Notes / messages ------------------------- */
.note {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin: 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--r-md);
	border: 1px solid var(--hairline);
	font-size: 0.98rem;
	color: var(--ink-soft);
	box-shadow: var(--sh-1);
}
.note-alert {
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.07));
	border-color: rgba(251, 191, 36, 0.42);
	color: #fde9b8;
}
.note-alert span[aria-hidden] { color: var(--alert); font-size: 1.25rem; line-height: 1.1; }
.note.big { font-size: 1.05rem; padding: 1.15rem 1.25rem; }
.note strong { color: #fff8e6; }
/* Every .note is icon + ONE text block. Keeping the message inside .note-body
   stops loose text runs from becoming extra flex items and columnising. */
.note-body { flex: 1; min-width: 0; }
.note-body strong { display: block; margin-bottom: 0.25rem; }

.msg {
	padding: 0.85rem 1.1rem;
	border-radius: var(--r-md);
	border: 1px solid var(--hairline);
	font-weight: 700;
	box-shadow: var(--sh-1);
}
.msg-error {
	background: linear-gradient(180deg, rgba(248, 113, 113, 0.18), rgba(248, 113, 113, 0.08));
	border-color: rgba(248, 113, 113, 0.5);
	color: #ffd9d9;
}
.msg-ok {
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.08));
	border-color: rgba(52, 211, 153, 0.5);
	color: #d6ffee;
}

.fine { font-size: 0.88rem; color: var(--ink-mute); }

/* ------------------------- Legend ------------------------- */
.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1.1rem;
	justify-content: center;
	margin: 1.4rem 0 0.9rem;
	font-size: 0.86rem;
	color: var(--ink-mute);
}
.key { display: inline-flex; align-items: center; gap: 0.45rem; }
.dot {
	width: 0.8rem; height: 0.8rem;
	border-radius: var(--r-pill);
	display: inline-block;
	box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.dot-free   { background: var(--go); }
.dot-sel    { background: var(--accent); }
.dot-buffer { background: var(--alert); }
.dot-booked { background: var(--error); }

/* ------------------------- Calendar head / pager ------------------------- */
.cal-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 1.6rem 0 0.9rem;
}
.cal-head h2 { margin: 0; font-size: clamp(1.3rem, 5vw, 1.8rem); }
.tz { font-family: var(--font-body); font-size: 0.8rem; color: var(--ink-mute); letter-spacing: 0.06em; }

.pager { display: inline-flex; align-items: center; gap: 0.55rem; }
.pager-label { min-width: 8.5rem; text-align: center; font-size: 0.88rem; color: var(--ink-mute); }

/* ------------------------- Day grid ------------------------- */
.day-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.day {
	padding: 1rem 0.95rem 1.1rem;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
	-webkit-backdrop-filter: blur(18px) saturate(155%);
	backdrop-filter: blur(18px) saturate(155%);
	transition: box-shadow var(--med) var(--ease), border-color var(--med) var(--ease), transform var(--med) var(--ease);
	animation: dayIn var(--med) var(--ease) both;
}
.day:hover { border-color: var(--hairline-hi); box-shadow: var(--sh-3); }
.day[hidden] { display: none; }
.day-full { opacity: 0.72; }
.day.has-selection { border-color: var(--accent); box-shadow: var(--sh-3), 0 0 30px var(--accent-glow); }

@keyframes dayIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.day-date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.55rem;
	margin: 0 0 0.35rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--hairline);
	font-size: 1.28rem;
}
.dow   { color: var(--accent); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; }
.dnum  { color: var(--ink); }
.dyear { color: var(--ink-mute); font-size: 0.85rem; font-family: var(--font-body); }

.day-note {
	margin: 0.55rem 0 0;
	font-size: 0.85rem;
	color: var(--alert);
	font-weight: 700;
}

/* ------------------------- Slots ------------------------- */
.slots {
	list-style: none;
	margin: 0.8rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
	gap: 0.5rem;
}

.slot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.6rem 0.72rem;
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--surface-2);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 700;
	text-align: left;
	text-shadow: var(--text-sh);
	cursor: pointer;
	box-shadow: var(--sh-1);
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
	            background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.slot-time  { font-size: 0.95rem; line-height: 1.15; }
.slot-state { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 900; opacity: 0.9; }

.slot-free {
	border-color: rgba(52, 211, 153, 0.42);
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.06));
	color: #e6fff5;
}
.slot-free .slot-state { color: var(--go); }
.slot-free:hover {
	transform: translateY(-2px);
	border-color: var(--go);
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.3), rgba(52, 211, 153, 0.12));
	box-shadow: var(--sh-2), 0 0 20px var(--go-glow);
}
.slot-free:active { transform: translateY(0) scale(0.98); }

.slot.is-selected {
	border-color: var(--accent);
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
	color: #04222c;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.32);
	box-shadow: var(--sh-3), 0 0 26px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transform: translateY(-1px);
	animation: slotPop var(--med) var(--ease);
}
.slot.is-selected .slot-state { color: #04343f; opacity: 1; }

@keyframes slotPop {
	0%   { transform: scale(0.95); }
	55%  { transform: scale(1.04) translateY(-2px); }
	100% { transform: translateY(-1px); }
}

.slot-booked {
	border-color: rgba(248, 113, 113, 0.4);
	background: linear-gradient(180deg, rgba(248, 113, 113, 0.16), rgba(248, 113, 113, 0.05));
	color: #ffd9d9;
	cursor: not-allowed;
	opacity: 0.82;
}
.slot-booked .slot-state { color: var(--error); }

.slot-buffer {
	border-color: rgba(251, 191, 36, 0.4);
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
	color: #ffeec2;
	cursor: not-allowed;
	opacity: 0.85;
}
.slot-buffer .slot-state { color: var(--alert); }

.slot-past, .slot-blocked {
	border-color: var(--hairline);
	background: rgba(255, 255, 255, 0.03);
	color: var(--ink-mute);
	cursor: not-allowed;
	opacity: 0.55;
}
.slot-past .slot-state, .slot-blocked .slot-state { color: var(--ink-mute); }

.slot.shake { animation: shake 320ms var(--ease); }
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

/* ------------------------- Selection bar ------------------------- */
.selbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
	background: rgba(9, 16, 29, 0.9);
	border-top: 1px solid var(--hairline-hi);
	box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	backdrop-filter: blur(22px) saturate(170%);
	animation: barUp var(--med) var(--ease) both;
}
.selbar[hidden] { display: none; }
@keyframes barUp {
	from { transform: translateY(110%); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.selbar-inner {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	align-items: stretch;
}
.selbar-text {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
	text-align: center;
}
.selbar-text .when { color: var(--accent); display: block; font-size: 0.86rem; font-weight: 400; }
.selbar-btns { display: flex; gap: 0.6rem; }
.selbar-btns .btn { flex: 1 1 auto; }
.selbar-btns .btn-primary { flex: 2 1 auto; }

/* ------------------------- Forms ------------------------- */
.form-card { scroll-margin-top: 1.5rem; }
.chosen {
	display: inline-block;
	padding: 0.55rem 1rem;
	margin-bottom: 1.1rem;
	border-radius: var(--r-pill);
	background: linear-gradient(180deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.08));
	border: 1px solid rgba(34, 211, 238, 0.45);
	color: #d9f7ff;
	font-weight: 700;
	box-shadow: var(--sh-1);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.95rem 1.1rem;
}
.field { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.03em; }
.req { color: var(--error); }
.opt { color: var(--ink-mute); font-weight: 400; }

input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.72rem 0.9rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: rgba(6, 12, 22, 0.66);
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
	appearance: none;
	-webkit-appearance: none;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
select {
	background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
	background-position: right 1.15rem center, right 0.75rem center;
	background-size: 0.42rem 0.42rem, 0.42rem 0.42rem;
	background-repeat: no-repeat;
	padding-right: 2.4rem;
}
input::placeholder, textarea::placeholder { color: rgba(142, 163, 191, 0.75); }
input:focus, select:focus, textarea:focus {
	border-color: var(--accent);
	background: rgba(6, 12, 22, 0.85);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--accent-glow);
	outline: none;
}
input.invalid, textarea.invalid {
	border-color: var(--error);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--error-glow);
}

/* Honeypot — off-screen, never announced, never tabbable. */
.hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.form-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.4rem; }
.form-actions .btn { flex: 1 1 12rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.inline-form select { flex: 1 1 14rem; width: auto; }

/* ------------------------- Confirmation ------------------------- */
.confirm-card {
	text-align: center;
	border-color: rgba(52, 211, 153, 0.45);
	box-shadow: var(--sh-4), 0 0 44px rgba(52, 211, 153, 0.14);
	animation: confirmIn var(--slow) var(--ease) both;
	scroll-margin-top: 1.5rem;
}
@keyframes confirmIn {
	from { opacity: 0; transform: translateY(18px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}
.confirm-mark {
	width: 3.6rem; height: 3.6rem;
	margin: 0 auto 0.9rem;
	display: grid; place-items: center;
	font-size: 2rem; font-weight: 900;
	color: #022c1d;
	border-radius: var(--r-pill);
	background: linear-gradient(180deg, var(--go), var(--go-deep));
	box-shadow: var(--sh-3), 0 0 30px var(--go-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	animation: markPop 620ms var(--ease) both;
}
@keyframes markPop {
	0%   { transform: scale(0.2); opacity: 0; }
	60%  { transform: scale(1.14); opacity: 1; }
	100% { transform: scale(1); }
}
.confirm-when {
	font-family: var(--font-title);
	font-size: clamp(1.1rem, 4.6vw, 1.5rem);
	color: var(--accent);
	margin-bottom: 1.1rem;
}
.confirm-card .note { text-align: left; margin-bottom: 1.2rem; }

/* ------------------------- Admin ------------------------- */
.admin { padding-top: 2rem; }
.admin-head { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; }
.admin-head h1 { margin: 0; font-size: clamp(1.7rem, 7vw, 2.6rem); }
.admin-link { text-align: center; margin-top: 2.5rem; }
.admin-link a { color: var(--ink-mute); font-size: 0.82rem; text-decoration: none; }
.admin-link a:hover { color: var(--accent); }

.booking-row {
	margin-bottom: 0.75rem;
	padding: 0.85rem 1rem;
	background: var(--surface-2);
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
}
.booking-row.is-past { opacity: 0.6; }
.booking-row > summary {
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.7rem;
	list-style: none;
	font-size: 0.95rem;
}
.booking-row > summary::-webkit-details-marker { display: none; }
.booking-row > summary::before {
	content: "▸";
	color: var(--accent);
	transition: transform var(--fast) var(--ease);
	display: inline-block;
}
.booking-row[open] > summary::before { transform: rotate(90deg); }
.booking-row .who { color: var(--ink-soft); }
.booking-row form { margin-top: 1rem; }

.tag {
	display: inline-block;
	padding: 0.16rem 0.62rem;
	border-radius: var(--r-pill);
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	background: var(--surface-hi);
	border: 1px solid var(--hairline);
	color: var(--ink-soft);
}
.tag-ok   { background: rgba(52, 211, 153, 0.2);  border-color: rgba(52, 211, 153, 0.5);  color: #d6ffee; }
.tag-warn { background: rgba(251, 191, 36, 0.18); border-color: rgba(251, 191, 36, 0.5); color: #ffeec2; }

.chip-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.4rem 0.35rem 0.85rem;
	border-radius: var(--r-pill);
	background: rgba(251, 191, 36, 0.16);
	border: 1px solid rgba(251, 191, 36, 0.45);
	color: #ffeec2;
	font-size: 0.86rem;
	font-weight: 700;
}
.chip form { margin: 0; }
.chip-x {
	width: 1.7rem; height: 1.7rem;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: #ffeec2;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--fast) var(--ease);
}
.chip-x:hover { background: var(--error); color: #fff; }
.row-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ------------------------- Breakpoints ------------------------- */
@media (min-width: 34rem) {
	.selbar-inner { flex-direction: row; align-items: center; justify-content: space-between; }
	.selbar-text { text-align: left; }
	.selbar-btns { flex: 0 0 auto; }
	.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.field-wide { grid-column: 1 / -1; }
	.form-actions .btn { flex: 0 1 14rem; }
}

@media (min-width: 48rem) {
	.day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.day { padding: 1.2rem 1.15rem 1.3rem; }
}

@media (min-width: 74rem) {
	.day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------- Preferences ------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@media (prefers-contrast: more) {
	:root {
		--hairline: rgba(190, 220, 255, 0.42);
		--hairline-hi: rgba(210, 235, 255, 0.7);
		--ink-soft: #e6eefb;
		--ink-mute: #b9cbe4;
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.card, .day, .btn, .selbar { background-color: #121e33; }
}

@media print {
	body { background: #fff; color: #000; text-shadow: none; }
	.splash, .selbar, .hero-actions, .admin-link, .pager { display: none !important; }
	.card, .day { box-shadow: none; border: 1px solid #999; background: #fff; color: #000; }
}