/* smaash - house style v1.0.
   Tokens and rules come from docs/smaash-brandguide.html; docs/huisstijl.md is the
   working summary. Designed for 390px: one glance, one tap, done. */

/* The two brand faces are served from our own domain rather than Google Fonts:
   one less third party in the request path, no lookup on a network the players
   may not reach, and the files are exactly the ones the brand guide ships.
   Figtree is a variable font, so a single file covers 400 through 700. The two
   halves of each face are split by unicode-range: a Dutch name with an accent
   pulls in the small latin-ext file, everyone else never downloads it. */
@font-face {
	font-family: "Caprasimo";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/caprasimo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Caprasimo";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/caprasimo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Colour */
	--ink: #17253F;        /* text, headings, bars, primary button */
	--ink-700: #3C4A61;
	--ink-500: #7E90AB;
	--ink-300: #C9D2DF;
	--ink-100: #EDF0F5;

	--lime: #96D923;       /* accent, "Ja", active state - carries ink text only */
	--lime-300: #DCF2AE;
	--lime-700: #65990F;   /* lime as a text colour on sand or paper */
	--lime-100: #F2FBDE;

	--sand: #F5EAD8;       /* page ground of the whole app */
	--sand-300: #EBDDC5;
	--sand-500: #C0B6A5;
	--paper: #FFFDF9;      /* cards, inputs, sheets */
	--line: #DCD3C4;

	/* Status - never colour alone, always with a word */
	--nee: #B2622D;
	--mss: #E8A33D;
	--reserve: #7A8A5E;

	/* Shape: no sharp corners exist in smaash */
	--r-sm: 8px;
	--r-md: 16px;
	--r-lg: 28px;
	--r-pill: 999px;

	/* Rhythm */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-6: 24px;
	--s-8: 32px;

	--tap: 48px;           /* minimum touch target */

	--font-head: "Caprasimo", Georgia, serif;
	--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	color-scheme: light;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.55;
	background: var(--sand);
	color: var(--ink);
	-webkit-text-size-adjust: 100%;
}

.wrap {
	max-width: 30rem;
	margin: 0 auto;
	padding: var(--s-4) var(--s-4) var(--s-8);
}

/* Type scale. Caprasimo is for screen titles and big numbers only - never more
   than three words, never uppercase. */
h1 {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.1;
	margin: 0 0 var(--s-4);
}

h2 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: var(--s-8) 0 var(--s-3);
}

p { margin: 0 0 var(--s-3); max-width: 60ch; }

a { color: var(--lime-700); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Times, dates, codes and line-ups must not jitter as they change. Set on the
   class rather than on body: running text reads better with proportional
   figures, it is only the numbers you compare that need to line up. */
time, .num, .code, .code-box, .event-time, .lineup td { font-variant-numeric: tabular-nums; }

/* The mark. Only the full wordmark is ever used, never the ball on its own and
   never re-coloured. The smallest it is ever shown is 96px wide, and it keeps
   clear space equal to the height of the s on every side. In the file the s is
   110 of the 150 pixels of height, so at the 140x50 it is drawn here that comes
   to 36px - the 20px below plus the 16px the wrap already holds. */
.brand {
	display: inline-block;
	margin: 20px 0 36px;
	line-height: 0;
}

.brand img { display: block; width: 140px; height: auto; }

/* Navigation. Admin screens keep their heading at the top: that is desk work
   with more than three destinations. Player screens get the bar at the bottom,
   within reach of one thumb. */
.nav {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	font-weight: 600;
}

.tabbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 10;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--paper);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}

.tabbar a {
	min-height: var(--tap);
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 3px;
	padding: 10px 4px 12px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	color: var(--sand-500);
}

.tabbar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.tabbar a:focus-visible { outline: 2px solid var(--lime-700); outline-offset: -4px; }

/* Keep the last card clear of the bar */
.wrap-tab { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* Forms */
label {
	display: block;
	margin: var(--s-4) 0 var(--s-1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=date],
input[type=time],
input[type=number],
select,
textarea {
	width: 100%;
	min-height: var(--tap);
	padding: 0 var(--s-4);
	font-family: inherit;
	font-size: 17px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

/* The login code gets a box per digit: you can see at a glance how many are
   left, and a mistyped one is corrected without retyping the rest. The boxes
   all carry the same name, so the code reaches the server even when the script
   that moves the caret along never ran. At 390px this leaves 53px per box,
   comfortably over the 48px a thumb needs. */
.code-group {
	margin: var(--s-4) 0 0;
	padding: 0;
	border: 0;
}

.code-group legend {
	padding: 0;
	margin-bottom: var(--s-1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.code-boxes {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--s-2);
}

.code-boxes .code-box {
	width: 100%;
	min-height: 56px;
	padding: 0;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--lime-700);
	outline-offset: 2px;
}

/* Buttons. One lime button per screen: the thing you probably came to do. */
button,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--tap);
	margin-top: var(--s-4);
	padding: 0 var(--s-6);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--ink);          /* lime carries ink text, never white */
	background: var(--lime);
	border: 0;
	border-radius: var(--r-pill);
	cursor: pointer;
	text-decoration: none;
}

button:hover, .btn:hover { background: var(--lime-300); }

button.secondary,
.btn.secondary {
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
}

button.secondary:hover, .btn.secondary:hover { background: var(--sand-300); }

button[disabled] {
	background: var(--sand-300);
	color: var(--ink-500);
	cursor: not-allowed;
}

/* Two buttons side by side keep 8px of air between them. A plain link next to a
   button is shorter than it is, so the row centres rather than stretches. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.row > * { flex: 1 1 8rem; margin-top: var(--s-4); }

/* Cards: date on top, status on the right, team-mates below - always that order */
.card {
	padding: var(--s-4);
	margin-bottom: var(--s-3);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.card h2 { margin: 0 0 var(--s-1); font-size: 20px; }
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }

.meta { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-700); }

/* A card reads top to bottom: what it is, what its state is, then the detail.
   The status sits on the right of the first line and never wraps, so the eye
   finds it in the same place on every card. The brand guide names these after
   the event card; weeks and groups are laid out the same way, hence card-. */
.card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--s-2);
}

.card-head h2 { margin: 0; }
.card-status { white-space: nowrap; }

/* Team-mates below. The colour is fixed per person so the same face keeps the
   same circle on every screen; a profile photo replaces the initials. */
.avatars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.avatar {
	width: 34px;
	height: 34px;
	border-radius: var(--r-pill);
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--paper);
	background: var(--ink);
	overflow: hidden;
}

.avatar--2 { background: var(--reserve); }
.avatar--3 { background: var(--nee); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Status labels say what something is, not what you should do. The word carries
   the meaning; the colour only supports it. */
.badge {
	display: inline-block;
	padding: var(--s-1) var(--s-3);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	background: var(--sand-300);
	border-radius: var(--r-pill);
}

.badge-open,
.badge-published { background: var(--lime-100); }

.badge-draft { background: var(--sand-300); }

.badge-closed,
.badge-completed { background: var(--ink-100); color: var(--ink-700); }

.badge-cancelled { background: #F7E4D6; color: var(--nee); }

.badge-team { background: var(--lime); }
.badge-reserve { background: #E7EBDD; color: var(--reserve); }
.badge-nee { background: #F7E4D6; color: var(--nee); }
.badge-misschien { background: #FCEFD6; color: #8A5E12; }

/* Notices */
.notice {
	padding: var(--s-4);
	margin-bottom: var(--s-3);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.notice.error { background: #F9E9DF; border-color: #E4C4AC; }

/* Tables stay readable on a phone */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: var(--s-3) var(--s-2); text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 14px; font-weight: 600; color: var(--ink-700); }

ul { margin: 0 0 var(--s-3); padding-left: var(--s-6); }
li { margin-bottom: var(--s-1); }