@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800;900&display=swap');

/* ============================================================
   dRUNk Club — app.css
   One stylesheet for every check-in / posting / admin page.
   Mobile-first (iPhone is ~99% of usage); scales up on desktop.
   Brand tokens inlined so this file is portable (drop at
   /static/app.css — no external design-system dependency).
   ============================================================ */

:root {
	/* Brand core */
	--pink: #ee3c6f;
	--pink-700: #c41e52;
	--teal: #12b29b;
	--teal-700: #0a7d6d;
	--ink: #0e0e10;
	--navy: #14233f;

	/* Neutrals */
	--white: #ffffff;
	--paper: #f8f7f3;
	--gray-100: #ededea;
	--gray-200: #d8d8d3;
	--gray-400: #8c8c86;
	--gray-500: #5f5f5a;

	/* Lines / radius / shadow */
	--line: 2px solid var(--ink);
	--radius-lg: 18px;
	--radius-md: 12px;
	--radius-pill: 999px;
	--shadow-sticker: 4px 4px 0 var(--ink);
	--shadow-sticker-pink: 4px 4px 0 var(--pink);
	--shadow-sticker-teal: 4px 4px 0 var(--teal);
	--shadow-soft: 0 4px 14px rgba(14, 14, 16, 0.12);

	/* Signature jersey stripe */
	--stripe: repeating-linear-gradient(-45deg, var(--pink) 0 10px, var(--teal) 10px 20px);

	--dur: 120ms;
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	/* iPhone safe-area padding for notch / home indicator */
	padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3 {
	font-family: 'Archivo Expanded', 'Archivo', sans-serif;
	color: var(--ink);
	line-height: 1.05;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-weight: 900;
	font-size: clamp(1.7rem, 7vw, 2.4rem);
	/* No uppercase: page titles carry the "dRUNk" wordmark, whose
	   lowercase d / k must be preserved. Caps would read "DRUNK". */
	letter-spacing: -0.015em;
}

/* Pink jersey underline on top-level page titles */
#content > h1 {
	display: inline-block;
	padding-bottom: 0.12em;
	border-bottom: 5px solid var(--pink);
}

h2 {
	font-weight: 800;
	font-size: clamp(1.2rem, 4.5vw, 1.5rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-top: 1.8rem;
}

h3 {
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--navy);
	margin-top: 1.4rem;
}

p { margin: 0.6rem 0; }

small { color: var(--gray-500); }

a {
	color: var(--teal-700);
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

strong { font-weight: 800; }

/* ============================================================
   Top navigation — sticky ink bar with jersey-stripe underline
   ============================================================ */

header {
	position: sticky;
	top: 0;
	z-index: 20;
}

#main-nav {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 0.9rem;
	padding-top: calc(0.6rem + env(safe-area-inset-top));
	background: var(--ink);
	border-bottom: 3px solid var(--pink);
	flex-wrap: wrap;
}

/* Brand wordmark injected as nav chrome (wordmark rule: dRUNk) */
#main-nav::before {
	content: "dRUNk Club";
	font-family: 'Archivo Expanded', sans-serif;
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--white);
	margin-right: 0.4rem;
	white-space: nowrap;
}

#main-nav a {
	color: var(--white);
	font-family: 'Archivo Expanded', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.5rem 0.7rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-pill);
	transition: background var(--dur), color var(--dur);
}
#main-nav a:hover {
	background: var(--pink);
	color: var(--white);
	text-decoration: none;
}
#main-nav a:active { background: var(--pink-700); }

#main-nav .logout { margin-left: auto; }

#main-nav .logout button {
	background: transparent;
	color: var(--white);
	border: 2px solid rgba(255, 255, 255, 0.45);
	box-shadow: none;
	font-size: 0.8rem;
	text-transform: none; /* preserves "dRUNk.Club" wordmark casing */
	padding: 0.45rem 0.8rem;
	min-height: 40px;
}
#main-nav .logout button:hover {
	background: var(--white);
	color: var(--ink);
	border-color: var(--white);
	transform: none;
}
#main-nav .logout button:active { transform: translate(0, 1px); }

/* ============================================================
   Layout
   ============================================================ */

#content, #login {
	padding: 1.1rem;
	max-width: 880px;
	margin: 0 auto;
}

/* Back-link breadcrumb (the "← All events" paragraph links) */
#content > p > a[href^="/events"],
#content > p > a[href^="/posts"] {
	color: var(--gray-500);
}

/* Check-in / success card — the high-traffic mobile entry screen */
#login {
	max-width: 440px;
	margin: 1.6rem auto;
	padding: 1.4rem 1.3rem 1.6rem;
	background: var(--white);
	border: 3px solid var(--ink);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sticker-pink);
}

#login h1 {
	font-size: clamp(1.8rem, 8.5vw, 2.5rem);
	line-height: 1.0;
	color: var(--ink);
	border: none;
}

#login p { font-size: 1.02rem; }

/* ============================================================
   Forms — major forms become white "sticker" cards.
   Inline forms (delete/retire/logout) stay bare.
   ============================================================ */

#content > form:not(.logout):not([style*="inline"]),
#login form {
	background: var(--white);
	border: var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sticker);
	padding: 1.1rem 1.1rem 1.2rem;
	margin: 1rem 0 1.6rem;
}
#login form {
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 1rem 0 0;
}

/* Single-button danger forms (Delete event) — keep tidy, no heavy card */
#content > form:not(.logout):not([style*="inline"]):has(> button:only-child) {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0 0 1.4rem;
}

form label {
	display: block;
	margin: 0.7rem 0;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	color: var(--navy);
}

/* Text-like fields fill the row, stacked under their label text */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
select,
textarea {
	display: block;
	width: 100%;
	margin-top: 0.3rem;
	font: inherit;
	font-weight: 500;
	color: var(--ink);
	background: var(--white);
	border: 2px solid var(--gray-400);
	border-radius: var(--radius-md);
	padding: 0.6rem 0.7rem;
	min-height: 46px;
	transition: border-color var(--dur), box-shadow var(--dur);
}

textarea { min-height: 80px; resize: vertical; line-height: 1.4; }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(18, 178, 155, 0.25);
}

input::placeholder, textarea::placeholder { color: var(--gray-400); font-weight: 500; }

select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}

input[type="file"] {
	font: inherit;
	width: 100%;
	margin-top: 0.3rem;
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
	font: inherit;
	font-weight: 700;
	background: var(--teal);
	color: var(--white);
	border: 2px solid var(--ink);
	border-radius: var(--radius-pill);
	padding: 0.55rem 0.9rem;
	margin-right: 0.7rem;
	cursor: pointer;
}

input[type="color"] {
	width: 52px;
	height: 40px;
	padding: 2px;
	border: 2px solid var(--ink);
	border-radius: var(--radius-md);
	background: var(--white);
	cursor: pointer;
	vertical-align: middle;
}

/* Checkbox rows — label flows inline with its box */
form label.checkbox,
form label:has(> input[type="checkbox"]),
form label:has(> input[type="radio"]) {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 600;
	color: var(--ink);
}
input[type="checkbox"], input[type="radio"] {
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin: 0;
	accent-color: var(--pink);
	flex-shrink: 0;
}

fieldset {
	border: 2px solid var(--ink) !important;
	border-radius: var(--radius-md);
	padding: 0.8rem !important;
	margin: 1rem 0 !important;
	background: var(--paper);
}
legend {
	font-family: 'Archivo Expanded', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	padding: 0 0.4rem;
	color: var(--pink-700);
}

/* ============================================================
   Buttons — the sticker press. Primary = pink, presses into shadow.
   ============================================================ */

button, .button, input[type="submit"] {
	font-family: 'Archivo Expanded', 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--white);
	background: var(--pink);
	border: 2px solid var(--ink);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sticker);
	padding: 0.7rem 1.3rem;
	min-height: 46px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-decoration: none;
	transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur), background var(--dur);
}
button:hover, .button:hover, input[type="submit"]:hover {
	background: var(--pink-700);
	text-decoration: none;
}
button:active, .button:active, input[type="submit"]:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 var(--ink);
}
button:disabled {
	background: var(--gray-400);
	box-shadow: 2px 2px 0 var(--gray-500);
	cursor: progress;
	transform: none;
}

/* Submit buttons sit full-width on mobile for fat-finger tapping */
#content > form button[type="submit"]:last-child,
#login form button[type="submit"] {
	width: 100%;
	margin-top: 0.4rem;
}

/* Venmo / success CTA on the check-in page */
#login .button {
	width: 100%;
	background: var(--teal);
	box-shadow: var(--shadow-sticker);
}
#login .button:hover { background: var(--teal-700); }

/* The marquee post button */
.post-btn {
	width: 100%;
	font-size: 1.15rem;
	padding: 0.85rem 1.3rem;
	min-height: 54px;
	box-shadow: var(--shadow-sticker-teal);
}

/* Secondary / destructive buttons inside tables + inline forms */
td button,
td .button,
form[style*="inline"] button {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.4rem 0.75rem;
	min-height: 36px;
	color: var(--ink);
	background: var(--white);
	box-shadow: 2px 2px 0 var(--ink);
	letter-spacing: 0.01em;
}
td button:hover,
form[style*="inline"] button:hover {
	background: var(--pink);
	color: var(--white);
}

/* ============================================================
   Tables — sticker card; scroll horizontally on phones.
   ============================================================ */

table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 1rem 0 1.5rem;
	background: var(--white);
	border: var(--line);
	border-radius: var(--radius-md);
	font-size: 0.92rem;
	/* Wide admin tables scroll sideways on a phone instead of
	   spilling their last column off-screen. */
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

thead th {
	background: var(--ink);
	color: var(--white);
	font-family: 'Archivo Expanded', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 0.6rem 0.7rem;
	white-space: nowrap;
}

td {
	padding: 0.6rem 0.7rem;
	border-top: 1px solid var(--gray-200);
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

tbody tr:nth-child(even) { background: var(--paper); }
tbody tr:hover { background: var(--teal-100, #dcf5f1); }

/* Action cells: keep edit / delete on one tidy line */
td:last-child { white-space: nowrap; }
td:last-child a { font-size: 0.82rem; margin-right: 0.45rem; vertical-align: middle; }
td form[style*="inline"] { display: inline-flex !important; margin: 0; vertical-align: middle; }

/* ============================================================
   Roster chips (tag people) — pill toggles, teal when checked
   ============================================================ */

#roster-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.5rem 0 0.9rem;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 2px solid var(--ink);
	border-radius: var(--radius-pill);
	padding: 0.45rem 0.85rem;
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
	background: var(--white);
	cursor: pointer;
	user-select: none;
	min-height: 42px;
	transition: background var(--dur), color var(--dur), transform var(--dur);
}
.chip:active { transform: scale(0.96); }
.chip input { margin: 0; }
.chip:has(input:checked) {
	background: var(--teal);
	color: var(--white);
	box-shadow: 2px 2px 0 var(--ink);
}
.chip:has(input:checked) input { accent-color: var(--white); }

/* ============================================================
   Color swatches (post text / tint pickers)
   ============================================================ */

.swatches {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0.35rem 0 0.6rem;
}
.swatch {
	border-radius: var(--radius-pill) !important;
	border: 2px solid var(--ink) !important;
	box-shadow: 1px 1px 0 var(--ink);
	cursor: pointer;
	padding: 0;
	min-height: 0;
	transition: transform var(--dur);
}
.swatch:hover { transform: scale(1.15); }
.swatch:active { transform: scale(0.92); }

/* ============================================================
   Story framing / live preview
   ============================================================ */

#crop-box, #framing { border: 2px solid var(--ink) !important; border-radius: var(--radius-md); }
#overlay-preview { border: 2px solid var(--ink) !important; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
#zoom { width: 100%; accent-color: var(--pink); }

/* ============================================================
   Notices & errors
   ============================================================ */

.notice {
	padding: 0.7rem 0.9rem !important;
	background: var(--teal-100, #dcf5f1) !important;
	border: 2px solid var(--teal) !important;
	border-radius: var(--radius-md);
	font-weight: 600;
	color: var(--teal-700);
}

.error {
	color: var(--pink-700);
	font-weight: 700;
}

/* ============================================================
   Desktop (rare) — a bit more air, hover affordances
   ============================================================ */

@media (min-width: 760px) {
	body { font-size: 17px; }

	#main-nav { padding-left: 1.4rem; padding-right: 1.4rem; gap: 0.5rem; }
	#main-nav::before { font-size: 1.2rem; margin-right: 0.9rem; }

	#content, #login { padding: 1.6rem 1.4rem 3rem; }

	/* Submit buttons no longer need to be full-bleed on a wide screen */
	#content > form button[type="submit"]:last-child { width: auto; min-width: 180px; }

	table { font-size: 0.95rem; display: table; white-space: normal; overflow: visible; }
	thead th, td { padding: 0.7rem 0.9rem; }
	td { white-space: normal; }
}