/**
 * CS Peer Review — front-end screens.
 *
 * Everything is scoped under .cspr. These screens render inside normal WordPress
 * pages that already carry the site's Elementor header/footer and a fairly loud
 * global stylesheet, so selectors stay namespaced and the few properties the
 * theme likes to override (colour on headings, link decoration) are set
 * explicitly rather than inherited.
 */

.cspr {
	--cspr-navy: #101e3c;
	--cspr-teal: #2fb0a0;
	--cspr-teal-dark: #268f82;
	--cspr-ink: #1b2a44;
	--cspr-muted: #6b7a90;
	--cspr-bg: #f4f6f9;
	--cspr-border: #e4e8ef;
	--cspr-amber: #f0a93b;
	--cspr-amber-bg: #fdf3e0;
	--cspr-amber-text: #8a6116;
	--cspr-teal-bg: #d9f0ea;
	--cspr-teal-text: #1d7a6b;
	--cspr-red: #e5484d;
	--cspr-red-bg: #fdecec;
	--cspr-red-text: #a3282c;
	--cspr-grey-bg: #eef1f6;
	--cspr-grey-text: #4a5a72;

	background: var(--cspr-bg);
	color: var(--cspr-ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.cspr *,
.cspr *::before,
.cspr *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ body */

.cspr-body {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px;
}

.cspr-body--narrow {
	max-width: 780px;
}

.cspr-lede {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	margin: 0 0 20px;
}

.cspr-muted {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
}

.cspr-footnote {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 13px;
	margin: 18px 0 0;
}

.cspr-card {
	background: #fff;
	border: 1px solid var(--cspr-border);
	border-radius: 10px;
}

.cspr-alert {
	background: var(--cspr-red-bg);
	border: 1px solid var(--cspr-red);
	border-radius: 8px;
	color: var(--cspr-red-text) !important;
	-webkit-text-fill-color: var(--cspr-red-text);
	font-size: 14px;
	margin: 0 0 20px;
	padding: 12px 16px;
}

/* --------------------------------------------------------------- heading */

.cspr-pagehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 22px;
}

.cspr-pagehead h1 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.4px;
	margin: 0;
}

.cspr-pagehead-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ----------------------------------------------------------------- stats */

.cspr-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 20px;
}

.cspr-stat {
	background: #fff;
	border: 1px solid var(--cspr-border);
	border-radius: 10px;
	padding: 20px;
}

.cspr-stat-num {
	display: block;
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.cspr-stat-num--teal {
	color: var(--cspr-teal-dark) !important;
	-webkit-text-fill-color: var(--cspr-teal-dark);
}

.cspr-stat-num--amber {
	color: var(--cspr-amber-text) !important;
	-webkit-text-fill-color: var(--cspr-amber-text);
}

.cspr-stat-label {
	display: block;
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 13px;
	margin-top: 4px;
}

/* ------------------------------------------------------------------ list */

.cspr-list {
	padding: 4px 0;
}

.cspr-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--cspr-border);
	flex-wrap: wrap;
}

.cspr-row:last-child {
	border-bottom: 0;
}

.cspr-row-main {
	flex: 1 1 340px;
	min-width: 0;
}

.cspr-row-title {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none !important;
}

a.cspr-row-title:hover {
	color: var(--cspr-teal-dark) !important;
	-webkit-text-fill-color: var(--cspr-teal-dark);
}

.cspr-row-meta {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 13px;
	margin: 4px 0 0;
}

.cspr-row-side {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cspr-row--done .cspr-row-title {
	font-weight: 500;
}

.cspr-badge-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.cspr-empty {
	padding: 40px 24px;
	text-align: center;
}

.cspr-empty p {
	margin: 0 0 6px;
}

/* ---------------------------------------------------------------- badges */

.cspr-badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 5px 11px;
	text-transform: uppercase;
	white-space: nowrap;
}

.cspr-badge--tight {
	font-size: 10.5px;
	padding: 4px 9px;
}

.cspr-badge--amber {
	background: var(--cspr-amber-bg);
	color: var(--cspr-amber-text) !important;
	-webkit-text-fill-color: var(--cspr-amber-text);
}

.cspr-badge--teal {
	background: var(--cspr-teal-bg);
	color: var(--cspr-teal-text) !important;
	-webkit-text-fill-color: var(--cspr-teal-text);
}

.cspr-badge--red {
	background: var(--cspr-red-bg);
	color: var(--cspr-red-text) !important;
	-webkit-text-fill-color: var(--cspr-red-text);
}

.cspr-badge--grey {
	background: var(--cspr-grey-bg);
	color: var(--cspr-grey-text) !important;
	-webkit-text-fill-color: var(--cspr-grey-text);
}

/* --------------------------------------------------------------- buttons */

/*
 * Buttons assert themselves.
 *
 * These screens render inside the site's normal content area, under a theme
 * that styles bare `button` and `input[type=submit]` globally and an Elementor
 * stylesheet that does the same again. The submit button on the review form was
 * being flattened to a couple of pixels of colour — a horizontal line where the
 * only control on the page should be — so a reviewer who had chosen a decision
 * had nothing to press.
 *
 * Hence !important on the box properties rather than the colours: it is the
 * padding, height and appearance that were being taken away. `appearance: none`
 * strips the UA and theme chrome; `min-height` means that even if every other
 * rule here lost, the control could not collapse to nothing.
 */
.cspr-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	min-height: 44px;
	padding: 12px 20px !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background 0.15s, border-color 0.15s;
	width: auto;
}

/* A <button> is not vertically centred by padding alone once min-height bites. */
button.cspr-btn {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.cspr-btn--teal {
	background: var(--cspr-teal) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

.cspr-btn--teal:hover {
	background: var(--cspr-teal-dark);
}

.cspr-btn--navy {
	background: var(--cspr-navy) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

.cspr-btn--navy:hover {
	background: #1b2f57;
}

.cspr-btn--ghost {
	background: #fff !important;
	border-color: var(--cspr-border);
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
}

.cspr-btn--ghost:hover {
	border-color: #c9d2e0;
}

/* Flex, not block, so it agrees with the button.cspr-btn centring rule above. */
.cspr-btn--block {
	display: flex;
	width: 100% !important;
}

/* ----------------------------------------------------------- review page */

.cspr-review-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 24px;
	align-items: start;
}

.cspr-player {
	background: var(--cspr-navy);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	aspect-ratio: 16 / 9;
}

.cspr-player-frame {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

.cspr-player-empty {
	align-items: center;
	color: #b9c4d6;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.cspr-play {
	background: var(--cspr-teal);
	border-radius: 50%;
	display: block;
	height: 56px;
	position: relative;
	width: 56px;
}

.cspr-play::after {
	border-left: 16px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	content: '';
	left: 51%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.cspr-title {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.3;
	margin: 20px 0 6px;
}

.cspr-meta {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 13.5px;
	margin: 0 0 18px;
}

.cspr-writeup {
	padding: 22px 24px;
}

.cspr-writeup h2 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 14px;
}

.cspr-writeup h3 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 14px;
	font-weight: 700;
	margin: 18px 0 6px;
}

.cspr-writeup h3:first-of-type {
	margin-top: 0;
}

.cspr-writeup-body {
	color: var(--cspr-grey-text) !important;
	-webkit-text-fill-color: var(--cspr-grey-text);
	font-size: 14px;
}

.cspr-writeup-body p {
	margin: 0 0 10px;
}

/* ------------------------------------------------------------- decision */

.cspr-decision {
	padding: 22px 24px;
	position: sticky;
	top: 90px;
}

.cspr-decision h2 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 14px;
}

.cspr-choice {
	border: 1.5px solid var(--cspr-border);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	margin: 0 0 10px;
	padding: 14px 16px;
	transition: border-color 0.15s, background 0.15s;
}

.cspr-choice input {
	margin: 3px 0 0;
	accent-color: var(--cspr-teal-dark);
}

.cspr-choice-label {
	align-items: center;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
}

.cspr-choice-icon {
	font-size: 14px;
	line-height: 1;
}

/*
 * Each decision carries its colour before it is chosen, not only after.
 *
 * The three options are not equivalent, and a reviewer scanning the panel
 * should be able to tell the consequential one from the routine one without
 * reading both hints. Only the label is tinted at rest; the filled background
 * stays reserved for the option actually selected.
 */
.cspr-choice--minor_edits .cspr-choice-label {
	color: var(--cspr-amber-text, #8a6116);
}

/*
 * --cspr-red-text, not --cspr-red: the border colour is only 3.7:1 on white,
 * which fails AA for 15px text. The darker variant carries the same meaning and
 * is legible to someone reading it at arm's length on a phone.
 */
.cspr-choice--reject .cspr-choice-label {
	color: var(--cspr-red-text);
}

/* Once chosen, Approve fills teal and its label has to read on that. */
.cspr-choice--approve:has(input:checked) .cspr-choice-label {
	color: #fff;
}

.cspr-choice-hint {
	color: var(--cspr-muted);
	display: block;
	font-size: 12.5px;
	margin-top: 2px;
}

.cspr-choice--approve:has(input:checked) {
	background: var(--cspr-teal);
	border-color: var(--cspr-teal);
	color: #fff;
}

.cspr-choice--approve:has(input:checked) .cspr-choice-hint {
	color: rgba(255, 255, 255, 0.85);
}

.cspr-choice--minor_edits {
	border-color: #f3dcb0;
}

.cspr-choice--minor_edits:has(input:checked) {
	background: var(--cspr-amber-bg);
	border-color: var(--cspr-amber);
}

.cspr-choice--reject {
	border-color: #f5cfd0;
}

.cspr-choice--reject:has(input:checked) {
	background: var(--cspr-red-bg);
	border-color: var(--cspr-red);
}

/* Fallback for browsers without :has() — keep the keyboard focus ring useful. */
.cspr-choice:focus-within {
	border-color: var(--cspr-teal);
}

.cspr-field-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin: 16px 0 6px;
}

.cspr-textarea {
	background: #fff;
	border: 1px solid var(--cspr-border);
	border-radius: 8px;
	color: var(--cspr-ink);
	font-family: inherit;
	font-size: 14px;
	padding: 12px 14px;
	resize: vertical;
	width: 100%;
}

.cspr-textarea:focus {
	border-color: var(--cspr-teal);
	outline: 2px solid rgba(47, 176, 160, 0.25);
	outline-offset: 1px;
}

.cspr-side-note {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 12.5px;
	margin: 14px 0 0;
}

/* ------------------------------------------------------------- received */

.cspr-received-head {
	padding: 20px 0 28px;
	text-align: center;
}

.cspr-tick {
	background: var(--cspr-teal);
	border-radius: 50%;
	color: #fff;
	-webkit-text-fill-color: #fff;
	display: inline-block;
	font-size: 32px;
	height: 68px;
	line-height: 68px;
	width: 68px;
}

.cspr-received-head h1 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin: 20px 0 8px;
}

.cspr-received-sub {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 14px;
	margin: 0;
}

.cspr-timeline {
	padding: 28px 32px 8px;
}

.cspr-step {
	display: flex;
	gap: 16px;
	padding-bottom: 24px;
	position: relative;
}

.cspr-step:not(:last-child)::before {
	background: var(--cspr-border);
	bottom: 6px;
	content: '';
	left: 13px;
	position: absolute;
	top: 30px;
	width: 2px;
}

.cspr-step-dot {
	align-items: center;
	background: var(--cspr-grey-bg);
	border-radius: 50%;
	color: var(--cspr-muted);
	display: flex;
	flex: 0 0 28px;
	font-size: 13px;
	font-weight: 700;
	height: 28px;
	justify-content: center;
	position: relative;
	width: 28px;
	z-index: 1;
}

.cspr-step--done .cspr-step-dot {
	background: var(--cspr-teal);
	color: #fff;
}

.cspr-step--current .cspr-step-dot {
	background: var(--cspr-navy);
	color: #fff;
}

.cspr-step-body h2 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 15.5px;
	font-weight: 700;
	margin: 2px 0 4px;
}

.cspr-step-body p {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 13.5px;
	margin: 0;
}

.cspr-received-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 28px 0 0;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------- notice */

.cspr-notice {
	padding: 32px;
	text-align: center;
}

.cspr-notice h1 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 23px;
	font-weight: 700;
	margin: 0 0 10px;
}

.cspr-notice p {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	margin: 0 0 18px;
}

.cspr-notice--teal {
	border-top: 4px solid var(--cspr-teal);
}

.cspr-notice--amber {
	border-top: 4px solid var(--cspr-amber);
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.cspr-review-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cspr-decision {
		position: static;
	}

	.cspr-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cspr-body {
		padding: 18px 16px;
	}

	.cspr-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.cspr-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.cspr-row-side {
		width: 100%;
	}

	.cspr-badge-stack {
		align-items: flex-start;
	}

	.cspr-btn {
		width: 100%;
	}

	.cspr-pagehead h1 {
		font-size: 24px;
	}
}

/* ------------------------------------------------------------- approval

   The authorship approval screen. Reached from an email by someone who may
   have no account and no prior contact with the site, so it borrows the
   review page's video framing and then asks its three questions plainly.
   ---------------------------------------------------------------------- */

.cspr-approval-video {
	padding: 20px 24px 22px;
}

.cspr-approval-video .cspr-player {
	margin-bottom: 18px;
}

.cspr-approval-video .cspr-title {
	margin-top: 0;
}

.cspr-approval {
	padding: 24px;
}

.cspr-approval h2 {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.2px;
	margin: 0 0 14px;
}

.cspr-approval-h2 {
	border-top: 1px solid var(--cspr-border);
	margin-top: 26px !important;
	padding-top: 24px;
}

.cspr-approval-sub {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 13.5px;
	margin: -8px 0 16px;
}

/* One confirmation. Mirrors .cspr-choice on the review page, but these are
   checkboxes: each is a separate statement, not one pick from three. */
.cspr-check {
	align-items: flex-start;
	border: 1px solid var(--cspr-border);
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
	padding: 14px 16px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cspr-check input {
	accent-color: var(--cspr-teal);
	flex: 0 0 auto;
	height: 18px;
	margin: 2px 0 0;
	width: 18px;
}

.cspr-check-body {
	display: block;
}

.cspr-check-label {
	color: var(--cspr-ink) !important;
	-webkit-text-fill-color: var(--cspr-ink);
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}

.cspr-check-hint {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	display: block;
	font-size: 13px;
	margin-top: 3px;
}

.cspr-check:has(input:checked) {
	background: var(--cspr-teal-bg);
	border-color: var(--cspr-teal);
}

/* Fallback for browsers without :has() — keep the keyboard focus ring useful. */
.cspr-check:focus-within {
	border-color: var(--cspr-teal);
}

.cspr-input {
	background: #fff;
	border: 1px solid var(--cspr-border);
	border-radius: 8px;
	color: var(--cspr-ink);
	font-family: inherit;
	font-size: 14px;
	padding: 11px 14px;
	width: 100%;
}

.cspr-input:focus {
	border-color: var(--cspr-teal);
	outline: 2px solid rgba(47, 176, 160, 0.25);
	outline-offset: 1px;
}

.cspr-field-note {
	color: var(--cspr-muted) !important;
	-webkit-text-fill-color: var(--cspr-muted);
	font-size: 12.5px;
	margin: 6px 0 0;
}

.cspr-approval .cspr-btn--block {
	margin-top: 24px;
}

@media (max-width: 640px) {
	.cspr-approval,
	.cspr-approval-video {
		padding: 18px 16px;
	}
}

/* The decline confirmation puts two buttons side by side; the ghost one is the
   way back, so it must not read as disabled next to the navy commit button. */
.cspr-notice form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* -------------------------------------------------------- account shell

   Two columns: the theme's account sidebar, then the screen itself. Rendered
   only for signed-in users, so a reviewer arriving on a tokenized link still
   gets the single-column page and no navigation they cannot use.
   ---------------------------------------------------------------------- */

.cspr-shell {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	align-items: stretch;
	background: #fff;
}

/*
 * min-width:0 lets the review page's wide two-column grid shrink inside this
 * column. Without it a grid child takes its content's min-content width, and
 * the video player plus write-up would push the sidebar off the screen.
 */
.cspr-shell-main {
	min-width: 0;
}

@media (max-width: 900px) {
	.cspr-shell {
		grid-template-columns: minmax(0, 1fr);
	}
}