/* Crew Finder – front-end styles. Inherits the theme's fonts and colours;
   override the custom properties below from the theme if needed. */

.crewf {
	--crewf-accent: #0b5394;
	--crewf-accent-text: #fff;
	--crewf-danger: #b3261e;
	--crewf-success-bg: #e7f4ea;
	--crewf-success-border: #2e7d32;
	--crewf-error-bg: #fdecea;
	--crewf-border: rgba(0, 0, 0, 0.18);
	--crewf-muted: rgba(0, 0, 0, 0.62);
	--crewf-surface: rgba(0, 0, 0, 0.03);
	max-width: 42rem;
	font-size: 1.05rem;
	line-height: 1.5;
}

.crewf * { box-sizing: border-box; }
.crewf select { max-width: 100%; text-overflow: ellipsis; }

.crewf-title { margin: 1.25em 0 0.5em; }
.crewf-intro { font-size: 1.1em; }
.crewf-muted { color: var(--crewf-muted); }
.crewf-small { font-size: 0.92em; margin-top: 1.5em; }
.crewf-help { display: block; font-size: 0.9em; color: var(--crewf-muted); margin-top: 0.25em; }

/* Notices */
.crewf-notice {
	padding: 0.9em 1.1em;
	border-left: 5px solid var(--crewf-success-border);
	background: var(--crewf-success-bg);
	margin: 1em 0;
	border-radius: 4px;
}
.crewf-notice--error { border-left-color: var(--crewf-danger); background: var(--crewf-error-bg); }

/* Forms */
.crewf-fieldset {
	border: 1px solid var(--crewf-border);
	border-radius: 8px;
	padding: 0.75em 1.1em 1em;
	margin: 1.25em 0;
}
.crewf-fieldset legend { font-weight: 700; padding: 0 0.4em; }
.crewf-field { margin: 0 0 1em; }
.crewf-field label, .crewf-label { display: block; font-weight: 600; margin-bottom: 0.3em; }
.crewf input[type="text"],
.crewf input[type="email"],
.crewf input[type="tel"],
.crewf input[type="date"],
.crewf select,
.crewf textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.55em 0.7em;
	font-size: 1.05rem;
	border: 1px solid var(--crewf-border);
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font-family: inherit;
}
.crewf .crewf-short { max-width: 12rem; }
.crewf [aria-invalid="true"] { border-color: var(--crewf-danger); outline: 1px solid var(--crewf-danger); }
.crewf-error { color: var(--crewf-danger); font-weight: 600; margin: 0.3em 0 0; }

.crewf-choice {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	padding: 0.45em 0;
	font-weight: normal;
	cursor: pointer;
}
.crewf-choice input { width: 1.3em; height: 1.3em; margin-top: 0.15em; flex: none; }
.crewf-choice--big { font-weight: 700; font-size: 1.05em; }
.crewf-sub { margin: 0 0 0.75em 1.9em; }
.crewf-sub label { font-weight: 600; }
.crewf-sub + .crewf-label { margin-top: 0.75em; }
.crewf-badge--ok { border-color: var(--crewf-success-border); background: var(--crewf-success-bg); }

.crewf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.crewf-button {
	display: inline-block;
	min-height: 48px;
	padding: 0.6em 1.3em;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	border: 2px solid var(--crewf-accent);
	border-radius: 6px;
	background: transparent;
	color: var(--crewf-accent);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
.crewf-button--primary { background: var(--crewf-accent); color: var(--crewf-accent-text); }
.crewf-button--danger { border-color: var(--crewf-danger); background: var(--crewf-danger); color: #fff; }
.crewf-button--big { font-size: 1.2rem; padding: 0.8em 2em; }
.crewf-button:hover, .crewf-button:focus { filter: brightness(1.1); }
.crewf-link-button { background: none; border: 0; padding: 0.4em; color: var(--crewf-accent); text-decoration: underline; cursor: pointer; font-size: 1em; }

.crewf-inline { display: inline-block; margin: 0.25em 0.4em 0.25em 0; }
.crewf-actions { margin-top: 0.5em; }

/* Boxes */
.crewf-box {
	border: 1px solid var(--crewf-border);
	border-radius: 8px;
	padding: 0.5em 1.1em 1em;
	margin: 1.5em 0;
	background: var(--crewf-surface);
}
.crewf-box--danger { border-color: var(--crewf-danger); background: transparent; }
.crewf-list { padding-left: 1.2em; }
.crewf-list li { margin-bottom: 0.6em; }
.crewf-contact { padding: 0.75em 0; border-bottom: 1px solid var(--crewf-border); }
.crewf-contact:last-child { border-bottom: 0; }

/* Board */
.crewf-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5em; font-size: 0.95em; }
.crewf-race-picker { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; margin: 1em 0; }
.crewf-race-picker label { font-weight: 700; }
.crewf-race-picker select { flex: 1 1 14rem; width: auto; min-width: 0; max-width: 100%; }

.crewf-cards { display: grid; gap: 1em; }
.crewf-card {
	border: 1px solid var(--crewf-border);
	border-radius: 8px;
	padding: 0.9em 1.1em;
}
#crewf-my-contacts { border: 2px solid var(--crewf-accent); }
.crewf-contact strong { font-size: 1.15em; }
.crewf-card--taken { opacity: 0.55; }
.crewf-card__name { margin: 0 0 0.2em; font-size: 1.2em; }
.crewf-card__meta { margin: 0 0 0.5em; font-weight: 600; }
.crewf-card__note { margin: 0 0 0.5em; }
.crewf-card__contact { font-size: 1.15em; font-weight: 600; }
.crewf-badge { display: inline-block; padding: 0.3em 0.7em; border-radius: 999px; background: var(--crewf-surface); border: 1px solid var(--crewf-border); font-size: 0.9em; }

/* Races table */
.crewf-races { width: 100%; border-collapse: collapse; margin: 1em 0; }
.crewf-races th, .crewf-races td { text-align: left; padding: 0.5em; border-bottom: 1px solid var(--crewf-border); vertical-align: top; }
.crewf-races td:first-child { white-space: nowrap; }

@media (max-width: 600px) {
	.crewf-button { width: 100%; }
	.crewf-inline, .crewf-inline .crewf-button { display: block; width: 100%; }
	.crewf-link-button { width: auto; }
}