/* SSP Exercise Handbook – deliberately plain so it inherits the theme's fonts and colours. */

.ssp-handbook,
.ssp-ex-form {
	--ssp-accent: #1e6fb8;
	--ssp-border: rgba(0, 0, 0, 0.15);
	--ssp-muted: rgba(0, 0, 0, 0.6);
	--ssp-chip: rgba(30, 111, 184, 0.1);
	--ssp-error: #b32d2e;
}

/* Handbook */
.ssp-handbook {
	display: grid;
	gap: 2rem;
}

@media (min-width: 900px) {
	.ssp-handbook {
		grid-template-columns: 17rem 1fr;
		align-items: start;
	}
}

.ssp-hb-filters label {
	display: block;
}

.ssp-hb-search input {
	width: 100%;
	box-sizing: border-box;
}

.ssp-hb-group {
	border-top: 1px solid var(--ssp-border);
	padding: 0.5rem 0;
}

.ssp-hb-group summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.25rem 0;
}

.ssp-hb-options {
	max-height: 16rem;
	overflow-y: auto;
	padding: 0.25rem 0;
}

.ssp-hb-options label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.2rem 0;
	font-weight: normal;
}

.ssp-hb-count {
	margin-left: auto;
	color: var(--ssp-muted);
	font-size: 0.85em;
}

.ssp-hb-actions {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.ssp-hb-total {
	color: var(--ssp-muted);
	margin-top: 0;
}

.ssp-hb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.ssp-hb-card {
	border: 1px solid var(--ssp-border);
	border-radius: 6px;
	padding: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.ssp-hb-card > a {
	text-decoration: none;
	box-shadow: none;
}

.ssp-hb-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.ssp-hb-title {
	font-weight: 700;
	font-size: 1.1em;
}

.ssp-hb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.ssp-hb-chips span {
	background: var(--ssp-chip);
	border-radius: 999px;
	padding: 0.05rem 0.6rem;
	font-size: 0.8em;
}

.ssp-hb-symptoms,
.ssp-hb-excerpt {
	font-size: 0.9em;
	color: var(--ssp-muted);
}

.ssp-hb-pages {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.ssp-hb-pages a,
.ssp-hb-pages span {
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--ssp-border);
	border-radius: 4px;
}

.ssp-hb-pages span {
	background: var(--ssp-chip);
}

.ssp-hb-cta {
	margin-top: 2rem;
	font-weight: 600;
}

/* Single exercise */
.ssp-ex-terms p {
	margin: 0 0 0.3rem;
}

.ssp-ex-terms {
	margin-bottom: 1.5rem;
}

.ssp-ex-details h3 {
	margin-bottom: 0.3rem;
}

.ssp-ex-video {
	margin: 1.5rem 0;
}

.ssp-ex-credit {
	margin-top: 2rem;
	font-style: italic;
	color: var(--ssp-muted);
}

/* Submission form */
.ssp-ex-form {
	max-width: 42rem;
}

.ssp-ex-form h3 {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ssp-border);
}

.ssp-ex-field label,
.ssp-ex-choices legend {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.ssp-ex-field input[type="text"],
.ssp-ex-field input[type="email"],
.ssp-ex-field input[type="url"],
.ssp-ex-field textarea {
	width: 100%;
	box-sizing: border-box;
}

.ssp-ex-choices {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.2rem 1rem;
}

.ssp-ex-choices legend,
.ssp-ex-choices .ssp-ex-hint,
.ssp-ex-choices .ssp-ex-error {
	grid-column: 1 / -1;
}

.ssp-ex-choices label {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	font-weight: normal;
}

.ssp-ex-consent label {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	font-weight: normal;
}

.ssp-ex-hint {
	display: block;
	color: var(--ssp-muted);
	font-size: 0.9em;
	margin: 0 0 0.3rem;
}

.ssp-ex-req {
	color: var(--ssp-error);
}

.ssp-ex-error {
	display: block;
	color: var(--ssp-error);
	font-size: 0.9em;
	margin-top: 0.25rem;
}

.ssp-ex-error-form {
	border-left: 4px solid var(--ssp-error);
	padding: 0.5rem 0.9rem;
	background: rgba(179, 45, 46, 0.07);
}

.ssp-ex-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ssp-ex-thanks {
	border-left: 4px solid var(--ssp-accent);
	padding: 0.5rem 1.25rem;
}