/* Sailboat Racing Vote — Frontend Styles */

.srv-container {
	max-width: 600px;
	margin: 0 auto;
	font-family: inherit;
}

/* Card wrapper */
.srv-card {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 2rem;
	background: #fff;
}

/* Headings */
.srv-heading {
	font-size: 1.5rem;
	margin: 0 0 .75rem;
}

/* Event header */
.srv-event-header {
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #eee;
}

.srv-event-header__date {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #0073aa;
	margin-bottom: .25rem;
}

.srv-event-header__title {
	font-size: 1.5rem;
	margin: 0 0 .35rem;
}

.srv-event-header__desc {
	color: #555;
	margin: 0;
}

/* Alerts */
.srv-alert {
	padding: .85rem 1rem;
	border-radius: 5px;
	margin-bottom: 1.25rem;
	font-size: .95rem;
}
.srv-alert--error   { background: #f8d7da; color: #721c24; border: 1px solid #f1aeb5; }
.srv-alert--success { background: #d4edda; color: #155724; border: 1px solid #badbcc; }

/* Forms */
.srv-form { margin-top: .5rem; }

.srv-field {
	margin-bottom: 1.5rem;
}

.srv-field label {
	display: block;
	font-weight: 700;
	margin-bottom: .4rem;
}

.srv-required { color: #c00; }

.srv-field input[type="text"] {
	width: 100%;
	padding: .65rem .9rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
	transition: border-color .12s, box-shadow .12s;
}

.srv-field input[type="text"]:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 3px rgba(0,115,170,.18);
}

.srv-field-hint {
	font-size: .83rem;
	color: #666;
	margin: .35rem 0 0;
}

/* Vote options fieldset */
.srv-vote-fieldset {
	border: none;
	padding: 0;
	margin: 0 0 1.75rem;
}

.srv-vote-fieldset legend {
	font-weight: 700;
	margin-bottom: .85rem;
	padding: 0;
	font-size: 1rem;
}

.srv-option {
	display: flex;
	align-items: center;
	gap: .75rem;
	cursor: pointer;
	padding: .75rem 1rem;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: .6rem;
	transition: border-color .12s, background .12s;
	user-select: none;
}

.srv-option input[type="radio"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: #0073aa;
	cursor: pointer;
}

.srv-option__label {
	font-size: 1rem;
	font-weight: 600;
}

/* Hover states */
.srv-option--racing:hover       { border-color: #28a745; background: #f0faf2; }
.srv-option--safety_boat:hover    { border-color: #17a2b8; background: #f0f9fb; }
.srv-option--race_committee:hover { border-color: #6f42c1; background: #f5f0fc; }
.srv-option--maybe:hover          { border-color: #ffc107; background: #fffdf0; }
.srv-option--no:hover           { border-color: #dc3545; background: #fdf5f5; }

/* Selected states — use :has() for modern browsers */
.srv-option--racing:has(input:checked)      { border-color: #28a745; background: #d4edda; }
.srv-option--safety_boat:has(input:checked)    { border-color: #17a2b8; background: #d1ecf1; }
.srv-option--race_committee:has(input:checked) { border-color: #6f42c1; background: #e2d9f3; }
.srv-option--maybe:has(input:checked)          { border-color: #ffc107; background: #fff3cd; }
.srv-option--no:has(input:checked)          { border-color: #dc3545; background: #f8d7da; }

/* Current results bars */
.srv-current-results {
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #eee;
}

.srv-results-heading {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .85rem;
	color: #333;
}

.srv-results-bars {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.srv-results-bar-row {
	display: flex;
	align-items: center;
	gap: .65rem;
}

.srv-results-bar-label {
	font-size: .88rem;
	font-weight: 600;
	width: 130px;
	flex-shrink: 0;
	color: #444;
}

.srv-results-bar-track {
	flex: 1;
	height: 18px;
	background: #f0f0f0;
	border-radius: 9px;
	overflow: hidden;
}

.srv-results-bar-fill {
	height: 100%;
	border-radius: 9px;
	transition: width .4s ease;
	min-width: 0;
}

.srv-results-bar-fill--racing      { background: #28a745; }
.srv-results-bar-fill--safety_boat    { background: #17a2b8; }
.srv-results-bar-fill--race_committee { background: #6f42c1; }
.srv-results-bar-fill--maybe          { background: #ffc107; }
.srv-results-bar-fill--no          { background: #dc3545; }

.srv-results-bar-count {
	font-size: .88rem;
	font-weight: 700;
	width: 24px;
	text-align: right;
	flex-shrink: 0;
	color: #444;
}

.srv-results-names {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: .3rem 0 .6rem 0;
	padding-left: 2px;
}

.srv-results-name {
	font-size: .8rem;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 12px;
}

.srv-results-name--racing         { background: #d4edda; color: #155724; }
.srv-results-name--safety_boat    { background: #d1ecf1; color: #0c5460; }
.srv-results-name--race_committee { background: #e2d9f3; color: #4a235a; }
.srv-results-name--maybe          { background: #fff3cd; color: #856404; }
.srv-results-name--no             { background: #f8d7da; color: #721c24; }

.srv-results-total {
	font-size: .82rem;
	color: #888;
	margin: .75rem 0 0;
}

.srv-results-empty {
	font-size: .9rem;
	color: #888;
	font-style: italic;
	margin-bottom: 1.5rem;
}

/* Buttons */
.srv-btn {
	display: inline-block;
	padding: .6rem 1.4rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid transparent;
	text-decoration: none;
	transition: background .12s, color .12s, border-color .12s;
}

.srv-btn--primary {
	background: #0073aa;
	color: #fff;
	border-color: #0073aa;
}
.srv-btn--primary:hover  { background: #005f8e; border-color: #005f8e; color: #fff; }

.srv-btn--secondary {
	background: transparent;
	color: #0073aa;
	border-color: #0073aa;
}
.srv-btn--secondary:hover { background: #0073aa; color: #fff; }

.srv-btn--large { padding: .85rem 2rem; font-size: 1.05rem; }

/* Change code link */
.srv-change-code {
	margin-top: 1.25rem;
	font-size: .88rem;
	color: #666;
}

/* Confirmation screen */
.srv-confirmation {
	text-align: center;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #eee;
}

.srv-confirmation__icon {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: .5rem;
}

.srv-confirmation__summary {
	margin: 1rem 0 1.75rem;
}

.srv-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .65rem 0;
	border-bottom: 1px solid #f0f0f0;
	gap: 1rem;
}

.srv-summary-row__label {
	font-weight: 700;
	color: #555;
	flex-shrink: 0;
}

/* Badges */
.srv-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: .85rem;
	font-weight: 700;
}

.srv-badge--vote-racing      { background: #d4edda; color: #155724; }
.srv-badge--vote-safety_boat    { background: #d1ecf1; color: #0c5460; }
.srv-badge--vote-race_committee { background: #e2d9f3; color: #4a235a; }
.srv-badge--vote-maybe          { background: #fff3cd; color: #856404; }
.srv-badge--vote-no          { background: #f8d7da; color: #721c24; }

.srv-notice { color: #666; font-style: italic; }

@media (max-width: 520px) {
	.srv-card { padding: 1.25rem; }
	.srv-btn--large { width: 100%; text-align: center; }
}