/*
 * One stylesheet, no framework.
 *
 * The page is filled in by a club owner on whatever phone or laptop is to hand, often standing next
 * to the recorder. So: large touch targets, one column on anything narrow, labels above fields
 * rather than beside them, and the explanation of a field directly under it instead of in a manual.
 */

:root {
	--green: #1a7a44;
	--green-dark: #146036;
	--ink: #10281c;
	--sub: #63786d;
	--line: #dde6e1;
	--bad: #b32020;
	--warn: #a2551a;
	--surface: #fff;
	--page: #f4f7f5;
	--radius: 12px;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--page);
}

.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

/* --- header ---------------------------------------------------------------------------- */

.top {
	background: linear-gradient(160deg, #1a7a44, #0f5230);
	color: #fff;
	padding: 2.5rem 0 2.75rem;
	margin-bottom: -1.5rem;
}

.top .brand {
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .85;
	font-weight: 700;
}

.top h1 { font-size: 1.65rem; margin: .35rem 0 .5rem; line-height: 1.25; }
.top .lead { margin: 0; opacity: .92; max-width: 34rem; }

main.wrap { padding-bottom: 4rem; }

/* --- cards ----------------------------------------------------------------------------- */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.35rem 1.4rem;
	margin: 1.25rem 0;
	box-shadow: 0 1px 2px rgba(16, 40, 28, .04);
}

.card > h2 {
	font-size: 1.05rem;
	margin: 0 0 .25rem;
	display: flex;
	align-items: center;
	gap: .6rem;
}

/* The step number does a lot of work: it turns a long form into four short ones. */
.step {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


.section-hint { margin-top: 0; margin-bottom: 1rem; }

/* --- fields ---------------------------------------------------------------------------- */

.field { margin: 0 0 1.1rem; }
.field:last-child { margin-bottom: 0; }

.field > label {
	display: block;
	font-weight: 600;
	font-size: .92rem;
	margin-bottom: .35rem;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field input[type="date"],
.field select {
	width: 100%;
	/* 16px keeps iOS Safari from zooming the page when the field is focused. */
	font-size: 16px;
	font-family: inherit;
	padding: .7rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: 9px;
	background: #fff;
	color: var(--ink);
	min-height: 2.9rem;
}

.field input:focus, .field select:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(26, 122, 68, .15);
}

.field input::placeholder { color: #a9b8b0; }

.hint { color: var(--sub); font-size: .85rem; line-height: 1.5; margin: .35rem 0 0; }
.hint-warn { color: var(--warn); }

.row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* A row whose fields carry no hint under them, so the inputs can be aligned along their bottom edge.
   Without this the two boxes sit at different heights the moment one label wraps and the other does
   not — which is exactly what an "optional" badge on only one of them causes. */
/* Both labels are now one plain line of the same height, so the inputs line up on their own and the
   row needs no special alignment at all. `align-items: end` was compensating for a height difference
   that should not have existed. */
.row-tight > .field > label { display: block; }

/* A qualifier that lives inside the label without changing its height — no border, no padding, so the
   line box stays exactly as tall as the label next to it. */
.lab-note {
	font-weight: 400;
	font-size: .8rem;
	color: var(--sub);
	margin-left: .3rem;
}
.row > .field { flex: 1 1 12rem; }
.row > .field.narrow { flex: 0 0 8rem; }
.field.narrow { max-width: 14rem; }

/* --- the recorder mode choice ----------------------------------------------------------- */

.choice { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

.pick {
	flex: 1 1 14rem;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: .8rem .9rem;
	cursor: pointer;
	background: #fff;
	display: block;
}

.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-title { display: block; font-weight: 600; font-size: .95rem; }
.pick-sub { display: block; color: var(--sub); font-size: .82rem; }
.pick.is-on { border-color: var(--green); background: #f2f9f5; }
.pick:focus-within { box-shadow: 0 0 0 3px rgba(26, 122, 68, .15); }

/* Only one of the two is ever relevant, and the other is absent rather than merely disabled. */
form[data-mode="direct"] .only-discovery,
form[data-mode="discovery"] .only-direct { display: none; }

/* --- cameras ---------------------------------------------------------------------------- */

.cams { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }

.cam {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .8rem .8rem .3rem;
	background: #fbfdfc;
}

.cam-fields { display: flex; gap: .75rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.cam-fields > .field { margin-bottom: .5rem; }
.cam-fields > .field.tiny { flex: 0 0 5.5rem; }
.cam-fields > .field.grow { flex: 1 1 11rem; min-width: 0; }

.cam-remove {
	flex: none;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--sub);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.cam-remove:hover { color: var(--bad); border-color: var(--bad); }

/* --- buttons ---------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	font: inherit;
	font-weight: 600;
	padding: .7rem 1.15rem;
	min-height: 2.9rem;
	border-radius: 10px;
	border: 1.5px solid var(--line);
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
}

.btn:hover { border-color: var(--green); color: var(--green); }

.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.btn-ghost { border-style: dashed; color: var(--green); border-color: var(--green); }
.btn-ghost:hover { background: #f2f9f5; }

.btn-big { font-size: 1.05rem; padding: .95rem 1.8rem; width: 100%; }

.submit { margin: 1.5rem 0 0; text-align: center; }
.submit .hint { margin-top: .6rem; }

.turnstile { margin: 1.25rem 0 0; display: flex; justify-content: center; }

/* --- notes ------------------------------------------------------------------------------ */

.note {
	border-radius: 10px;
	padding: .95rem 1.1rem;
	margin: 1.25rem 0;
	border-left: 4px solid var(--green);
	background: #eef7f1;
}

.note p { margin: .3rem 0 0; }
.note-bad { border-left-color: var(--bad); background: #fdf1f1; }
.note-keep { border-left-color: var(--warn); background: #fff7ee; margin-bottom: 0; }

/* --- result ------------------------------------------------------------------------------ */

.result { border-color: var(--green); border-width: 2px; }
.result > h2 { color: var(--green); }

.result-grid { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; margin-top: .9rem; }

.qr {
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .5rem;
	line-height: 0;
}

.qr svg { width: 190px; height: 190px; display: block; }

.result-side { flex: 1 1 15rem; min-width: 0; }
.result-side .big { font-size: 1.2rem; font-weight: 700; margin: 0 0 .6rem; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; margin: 0 0 1rem; font-size: .9rem; }
.facts dt { color: var(--sub); }
.facts dd { margin: 0; font-weight: 600; }

.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.actions .inline { display: inline; margin: 0; }

.contact { text-align: center; color: var(--sub); font-size: .88rem; }

code { background: #eef2f0; padding: .1em .4em; border-radius: 5px; font-size: .9em; word-break: break-all; }

/* The honeypot: out of view rather than display:none, because the more careful form fillers skip
   fields that are explicitly hidden — and a trap everyone avoids catches nobody. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- narrow screens ---------------------------------------------------------------------- */

@media (max-width: 34rem) {
	.top { padding: 1.75rem 0 2.25rem; }
	.top h1 { font-size: 1.35rem; }
	.card { padding: 1.1rem 1rem; border-radius: 10px; }
	.cam { flex-wrap: nowrap; }
	.cam-fields > .field.tiny { flex: 0 0 4.5rem; }
	.qr svg { width: 160px; height: 160px; }
	.wrap { padding: 0 .9rem; }
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e6f1ea;
		--sub: #9db1a7;
		--line: #2f4239;
		--surface: #16211c;
		--page: #0e1613;
	}

	body { background: var(--page); }
	.field input, .field select, .pick, .cam-remove, .btn { background: #101a16; color: var(--ink); }
	.cam { background: #131e19; }
	.qr { background: #fff; }
	.pick.is-on { background: #17281f; }
	.note { background: #14241b; }
	.note-bad { background: #241515; }
	.note-keep { background: #241d14; }
	code { background: #1b2a23; }
}

/* --- language switcher -------------------------------------------------------------------- */

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .35rem;
}

.langs { display: flex; gap: .25rem; flex: none; }

.lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	/* 44px is the touch target Apple and Google both settle on, and this control sits in the corner
	   where a thumb is least accurate. */
	min-height: 2.1rem;
	padding: 0 .55rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	text-decoration: none;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .05em;
}

.lang:hover { background: rgba(255, 255, 255, .14); }
.lang.is-on { background: #fff; color: var(--green-dark); border-color: #fff; cursor: default; }
.lang:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- advanced fold ------------------------------------------------------------------------ */

.adv-toggle {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	flex-wrap: wrap;
	font-size: .88rem;
	color: var(--sub);
	cursor: pointer;
	margin-bottom: .8rem;
	user-select: none;
}

.adv-title { font-weight: 600; color: var(--ink); }
.adv-note { font-size: .82rem; }

/* Offscreen rather than display:none, so it still takes keyboard focus and still toggles on space. */
.adv-check {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.adv-box {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	border: 1.5px solid var(--line);
	border-radius: 5px;
	background: #fff;
	position: relative;
	top: .15rem;
}

#show-adv:checked ~ .adv-toggle .adv-box {
	background: var(--green);
	border-color: var(--green);
}

#show-adv:checked ~ .adv-toggle .adv-box::after {
	content: "";
	position: absolute;
	left: .3rem;
	top: .1rem;
	width: .28rem;
	height: .55rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

#show-adv:focus-visible ~ .adv-toggle .adv-box {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* Hidden by a sibling rule, not by script: the fold has to survive JavaScript being off, which is
   the same promise the rest of this form makes. */
#show-adv:not(:checked) ~ .cams .cam-adv { display: none; }

/* --- camera numbering --------------------------------------------------------------------- */

.cam-no {
	flex: none;
	width: 1.55rem;
	height: 1.55rem;
	margin-top: 1.45rem;
	border-radius: 50%;
	background: var(--line);
	color: var(--sub);
	font-size: .78rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

/* Counted in CSS so removing a row renumbers the rest without any script running. */
.cams { counter-reset: cam; }
.cam { counter-increment: cam; }
.cam-no::before { content: counter(cam); }

/* --- the field the error is about ---------------------------------------------------------- */

.field.is-bad > input,
.field.is-bad > select,
.cams.is-bad {
	border-color: var(--bad);
	box-shadow: 0 0 0 3px rgba(179, 32, 32, .13);
}

.cams.is-bad { border-radius: 10px; }

@media (prefers-color-scheme: dark) {
	.adv-toggle span:first-of-type { color: var(--ink); }
	.cam-no { background: #223029; }
}