/**
 * M-Cube Quiz Wizard — front-end styles.
 *
 * Everything is scoped under .mcqw-app and prefixed mcqw- so it cannot
 * leak into the theme, and the theme is less likely to leak into it.
 * These screens no longer have wp-admin's buttons, tables or notices,
 * so all of that is defined here from scratch.
 */

/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Two groups, and the split matters.

   THEMEABLE tokens are overwritten at runtime by Mcqw_Theme, which prints
   a short block of custom properties inline. That is why the whole palette
   lives here as variables and nothing below hardcodes a brand colour: a
   palette swap must never require a second stylesheet, or the main file
   stops being cacheable.

   LOCKED tokens are never themed, because they carry meaning rather than
   decoration. Green means correct, red means wrong, amber means look at
   this. A palette that could repaint those would let a teacher pick
   "Forest" and make every answer look right. The four answer colours are
   locked for the same reason: a class learns "I pressed the red one", and
   four shades of one hue cannot be called across a room.
   ========================================================================== */

.mcqw-app {
	/* Themeable: brand ------------------------------------------------- */
	--mcqw-blue: #2563eb;
	--mcqw-blue-dark: #1d4ed8;
	--mcqw-blue-light: #60a5fa;
	--mcqw-accent: #38bdf8;
	--mcqw-deep: #14578F;

	/* Themeable: the gradient wash behind everything ------------------- */
	--mcqw-wash-1: rgba( 29, 78, 216, 0.44 );
	--mcqw-wash-2: rgba( 56, 189, 248, 0.40 );
	--mcqw-wash-3: rgba( 20, 87, 143, 0.42 );
	--mcqw-wash-4: rgba( 6, 182, 212, 0.32 );
	--mcqw-wash-5: rgba( 96, 165, 250, 0.26 );
	--mcqw-wash-base: #e6effb;

	/* Themeable: ink and lines ----------------------------------------- */
	--mcqw-ink: #0f172a;
	--mcqw-muted: #475569;
	--mcqw-line: #e2e8f0;
	--mcqw-bg: #f8fafc;

	/* Themeable: glass -------------------------------------------------
	   Surfaces are translucent white over the wash. The tint is a
	   variable so a dark palette can flip it without touching any of
	   the rules that use it. */
	--mcqw-glass: rgba( 255, 255, 255, 0.62 );
	--mcqw-glass-strong: rgba( 255, 255, 255, 0.78 );
	--mcqw-glass-soft: rgba( 255, 255, 255, 0.44 );
	--mcqw-glass-line: rgba( 255, 255, 255, 0.68 );
	--mcqw-glass-blur: 18px;

	/* What a surface becomes when glass is off: no backdrop-filter
	   support, high contrast, the noglass escape hatch, or printing.
	   A dark palette overrides this, otherwise every card in Midnight
	   would turn into a white slab with pale text on it. */
	--mcqw-solid: #ffffff;
	--mcqw-solid-90: rgba( 255, 255, 255, 0.95 );
	--mcqw-shadow: 0 8px 32px rgba( 15, 42, 82, 0.14 );
	--mcqw-shadow-sm: 0 2px 10px rgba( 15, 42, 82, 0.09 );
	--mcqw-shadow-lg: 0 14px 40px rgba( 15, 42, 82, 0.2 );

	/* LOCKED: meaning, never themed ------------------------------------ */
	--mcqw-right: #10b981;
	--mcqw-right-dark: #059669;
	--mcqw-right-soft: #d1fae5;
	--mcqw-wrong: #ef4444;
	--mcqw-red: #dc2626;
	--mcqw-warn: #f59e0b;
	--mcqw-warn-soft: #fffbeb;

	/* LOCKED: the four answer colours ---------------------------------- */
	--mcqw-opt-0: #dc2626;
	--mcqw-opt-1: #2563eb;
	--mcqw-opt-2: #f59e0b;
	--mcqw-opt-3: #16a34a;

	/* Kept so older rules and any custom CSS keep working. */
	--mcqw-orange: #f97316;
	--mcqw-lime: #84cc16;
	--mcqw-purple: #8b5cf6;

	--mcqw-radius: 14px;
	--mcqw-radius-sm: 10px;

	/* Form controls fill their panel. Everything lines up on the same
	   left and right edge, which is what makes a column of fields read
	   as one form rather than a pile of odd shapes. */
	--mcqw-field-max: 100%;

	max-width: 960px;
	margin: 0 auto;
	padding: 8px 0 48px;
	color: var(--mcqw-ink);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}

/* The frosted surface, defined once.
   Anything that wants to be glass says @extend-by-hand: it sets these four
   properties. Kept as a documented block rather than a utility class so
   the existing markup does not have to change. */
.mcqw-app .mcqw-card,
.mcqw-app .mcqw-gate-card,
.mcqw-app .mcqw-toolbar,
.mcqw-app .mcqw-panel,
.mcqw-app .mcqw-empty,
.mcqw-app .mcqw-stat {
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var( --mcqw-glass-line );
	box-shadow: var( --mcqw-shadow );
}

/* Browsers without backdrop-filter get an opaque surface instead of a
   washed-out translucent one. Without this the text sits on whatever the
   gradient happens to be doing underneath, which on the darker blooms is
   genuinely hard to read. */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {

	.mcqw-app .mcqw-card,
	.mcqw-app .mcqw-gate-card,
	.mcqw-app .mcqw-toolbar,
	.mcqw-app .mcqw-panel,
	.mcqw-app .mcqw-empty,
	.mcqw-app .mcqw-stat {
		background: var( --mcqw-solid-90 );
	}
}

/* A teacher who has asked for high contrast gets solid surfaces and firm
   borders. Frosted glass is the first thing to go: it is decoration, and
   it is exactly what makes text harder to read. */
@media ( prefers-contrast: more ) {

	.mcqw-app .mcqw-card,
	.mcqw-app .mcqw-gate-card,
	.mcqw-app .mcqw-toolbar,
	.mcqw-app .mcqw-panel,
	.mcqw-app .mcqw-empty,
	.mcqw-app .mcqw-stat {
		background: var( --mcqw-solid );
		border-color: var( --mcqw-ink );
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Glass can be switched off for a whole site: cheap laptops render a
   full-page backdrop-filter slowly, and a weak projector turns
   translucency into mud. Set by Mcqw_Theme on the body. */
body.mcqw-noglass .mcqw-app .mcqw-card,
body.mcqw-noglass .mcqw-app .mcqw-gate-card,
body.mcqw-noglass .mcqw-app .mcqw-toolbar,
body.mcqw-noglass .mcqw-app .mcqw-panel,
body.mcqw-noglass .mcqw-app .mcqw-empty,
body.mcqw-noglass .mcqw-app .mcqw-stat {
	background: var( --mcqw-solid );
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

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

/* Headings */

.mcqw-app .mcqw-h1 {
	margin: 0 0 4px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--mcqw-ink);
}

.mcqw-app h2 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}

.mcqw-head {
	margin-bottom: 20px;
}

.mcqw-muted {
	color: var(--mcqw-muted);
	margin: 0;
}

.mcqw-crumb {
	margin: 0 0 14px;
	font-size: 14px;
}

.mcqw-crumb a {
	color: var(--mcqw-muted);
	text-decoration: none;
}

.mcqw-crumb a:hover {
	color: var(--mcqw-blue);
}

/* Buttons */

.mcqw-app .mcqw-btn {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var( --mcqw-glass-line );
	border-radius: 999px;
	background: var( --mcqw-glass-strong );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	color: var(--mcqw-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var( --mcqw-shadow-sm );
	transition: transform 0.15s ease, box-shadow 0.15s ease,
		background 0.15s, border-color 0.15s, color 0.15s;
}

.mcqw-app .mcqw-btn:hover {
	background: #fff;
	border-color: var( --mcqw-blue-light );
	color: var(--mcqw-ink);
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 15, 42, 82, 0.18 );
}

.mcqw-app .mcqw-btn-primary {
	background: linear-gradient( 135deg, var( --mcqw-blue ), var( --mcqw-blue-dark ) );
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 16px rgba( 37, 99, 235, 0.42 );
}

.mcqw-app .mcqw-btn-primary:hover {
	background: linear-gradient( 135deg, var( --mcqw-blue-dark ), var( --mcqw-deep ) );
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 26px rgba( 37, 99, 235, 0.55 );
}

.mcqw-app .mcqw-btn-go {
	background: var(--mcqw-lime);
	border-color: var(--mcqw-lime);
	color: #1a2e05;
}

.mcqw-app .mcqw-btn-go:hover {
	background: #74b512;
	border-color: #74b512;
	color: #1a2e05;
}

.mcqw-app .mcqw-btn-danger {
	color: var(--mcqw-red);
	border-color: #fecaca;
}

.mcqw-app .mcqw-btn-danger:hover {
	background: var(--mcqw-red);
	border-color: var(--mcqw-red);
	color: #fff;
}

.mcqw-app .mcqw-btn-sm {
	padding: 6px 12px;
	font-size: 13px;
}

.mcqw-app .mcqw-btn-lg {
	padding: 13px 28px;
	font-size: 16px;
}

.mcqw-app .mcqw-btn-icon {
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1;
}

.mcqw-app .mcqw-btn-add {
	border-style: dashed;
	border-color: #cbd5e1;
}

/* Inputs */

/*
 * One width for every control in a form.
 *
 * Left to themselves these size by content: a select shrinks to its
 * longest option (101px for "English"), a text input falls back to the
 * browser default of about 220px, and a textarea stretches the full
 * panel. Eight different widths were on screen at once in Settings and
 * it read as broken rather than deliberate.
 *
 * So they all fill the column up to a comfortable reading measure.
 * Anything that genuinely wants to be small - a number box - opts out
 * below, rather than every other control opting in.
 */
.mcqw-app .mcqw-input,
.mcqw-app input[type="text"],
.mcqw-app input[type="email"],
.mcqw-app input[type="url"],
.mcqw-app input[type="number"],
.mcqw-app input[type="password"],
.mcqw-app input[type="search"],
.mcqw-app textarea,
.mcqw-app select {
	display: block;
	width: 100%;
	max-width: var( --mcqw-field-max, 100% );
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: var( --mcqw-glass-strong );
	color: var(--mcqw-ink);
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
}

/*
 * Controls that sit in a row with something else must not claim the whole
 * line, or they push their neighbour onto the next one.
 */
.mcqw-app .mcqw-inline-form .mcqw-input,
.mcqw-app .mcqw-inline-form input[type="text"],
.mcqw-app .mcqw-inline-form select,
.mcqw-app .mcqw-new-form .mcqw-input,
.mcqw-app .mcqw-new-form input[type="text"],
.mcqw-app .mcqw-toolbar .mcqw-input,
.mcqw-app .mcqw-toolbar input[type="text"],
.mcqw-app .mcqw-toolbar select {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

/* A checkbox or radio is not a field and must keep its own size. */
.mcqw-app input[type="checkbox"],
.mcqw-app input[type="radio"] {
	display: inline-block;
	width: auto;
	max-width: none;
}

.mcqw-app .mcqw-input:focus,
.mcqw-app input[type="text"]:focus,
.mcqw-app textarea:focus,
.mcqw-app select:focus {
	outline: 2px solid var(--mcqw-blue);
	outline-offset: 1px;
	border-color: var(--mcqw-blue);
}

/* Notices */

.mcqw-notice {
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 5px solid;
	margin-bottom: 18px;
	font-weight: 600;
}

.mcqw-notice-success {
	background: #ecfdf5;
	border-color: #10b981;
	color: #065f46;
}

.mcqw-notice-error {
	background: #fef2f2;
	border-color: var(--mcqw-red);
	color: #991b1b;
}

.mcqw-notice-info {
	background: #eff6ff;
	border-color: var(--mcqw-blue);
	color: #1e40af;
}

/* Something needs attention, but nothing is broken yet. */
.mcqw-notice-warning {
	background: #fffbeb;
	border-color: #e8a33d;
	color: #8a5a12;
}

/* Cards and gates */

.mcqw-card {
	border: 1px solid var(--mcqw-line);
	border-radius: var(--mcqw-radius);
	padding: 24px;
	/* Background/border/shadow come from the shared glass rule above. */
}

.mcqw-gate-card {
	max-width: 520px;
	margin: 40px auto;
	text-align: center;
}

/* Toolbar */

.mcqw-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding: 16px;
	margin-bottom: 22px;
	border: 1px solid var(--mcqw-line);
	border-radius: var(--mcqw-radius);
	/* Background/border/shadow come from the shared glass rule above. */
}

.mcqw-new-form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 1 1 320px;
	margin: 0;
}

.mcqw-new-form .mcqw-input {
	flex: 1 1 auto;
}

.mcqw-demo-form {
	margin: 0 0 0 auto;
}

.mcqw-inline-form {
	display: inline-block;
	margin: 0;
}

/* Table */

.mcqw-app .mcqw-table {
	width: 100%;
	border-collapse: collapse;
	background: var( --mcqw-glass-strong );
	border: 1px solid var(--mcqw-line);
	border-radius: var(--mcqw-radius);
	/* No overflow:hidden here. It kept the corners rounded but also
	   clipped the row action menu, cutting off Delete on the last
	   row. The outer cells round their own corners instead. */
}

.mcqw-app .mcqw-table th,
.mcqw-app .mcqw-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--mcqw-line);
	vertical-align: middle;
}

.mcqw-app .mcqw-table th {
	background: var(--mcqw-bg);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mcqw-muted);
}

.mcqw-app .mcqw-table tr:last-child td {
	border-bottom: none;
}

.mcqw-quiz-link {
	font-weight: 700;
	font-size: 16px;
	color: var(--mcqw-blue);
	text-decoration: none;
}

.mcqw-quiz-link:hover {
	text-decoration: underline;
}

.mcqw-col-num {
	width: 110px;
	text-align: center;
}

.mcqw-app .mcqw-table td.mcqw-col-num {
	text-align: center;
	font-weight: 700;
}

.mcqw-col-date {
	width: 130px;
	color: var(--mcqw-muted);
	font-size: 14px;
}

.mcqw-col-actions {
	width: 230px;
	white-space: nowrap;
}

/* Empty state */

.mcqw-empty {
	padding: 48px 24px;
	text-align: center;
	border: 2px dashed #cbd5e1;
	border-radius: var(--mcqw-radius);
	/* Background/border/shadow come from the shared glass rule above. */
}

.mcqw-empty-inline {
	padding: 36px;
	text-align: center;
	color: var(--mcqw-muted);
	background: var( --mcqw-glass-strong );
	border: 2px dashed #cbd5e1;
	border-radius: var(--mcqw-radius);
}

/* Editor header */

.mcqw-editor-head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 20px;
}

.mcqw-app .mcqw-title-input {
	flex: 1 1 auto;
	font-size: 20px;
	font-weight: 700;
	padding: 12px 14px;
}

/* Question cards */

.mcqw-question-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mcqw-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--mcqw-bg);
	border-bottom: 1px solid var(--mcqw-line);
	flex-wrap: wrap;
}

.mcqw-question-list .mcqw-card {
	padding: 0;
	overflow: hidden;
}

.mcqw-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mcqw-blue);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	flex: 0 0 auto;
}

.mcqw-type-tag {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
}

.mcqw-tag-quiz {
	background: #dbeafe;
	color: var(--mcqw-blue-dark);
}

.mcqw-tag-true_false {
	background: #ffedd5;
	color: #c2410c;
}

.mcqw-tag-type_answer {
	background: #ecfccb;
	color: #4d7c0f;
}

.mcqw-card-tools {
	margin-left: auto;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.mcqw-card-body {
	padding: 16px;
}

.mcqw-lbl {
	display: block;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--mcqw-muted);
	margin: 16px 0 6px;
}

.mcqw-card-body .mcqw-lbl:first-child {
	margin-top: 0;
}

.mcqw-app .mcqw-qtext {
	width: 100%;
	font-size: 16px;
	resize: vertical;
}

.mcqw-app .mcqw-typed {
	width: 100%;
	max-width: 440px;
}

/* Answer options */

.mcqw-opt-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	border-left: 6px solid #cbd5e1;
	background: var(--mcqw-bg);
}

.mcqw-opt-0 {
	border-left-color: var(--mcqw-blue);
}

.mcqw-opt-1 {
	border-left-color: var(--mcqw-orange);
}

.mcqw-opt-2 {
	border-left-color: var(--mcqw-lime);
}

.mcqw-opt-3 {
	border-left-color: var(--mcqw-purple);
}

.mcqw-app .mcqw-opt {
	flex: 1 1 auto;
}

.mcqw-app .mcqw-correct {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	cursor: pointer;
	accent-color: var(--mcqw-blue);
}

.mcqw-time-row {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--mcqw-line);
}

.mcqw-time-row .mcqw-lbl {
	margin-top: 0;
}

/* Add row */

.mcqw-add-row {
	margin-top: 18px;
	padding: 18px;
	background: var( --mcqw-glass-strong );
	border: 2px dashed #cbd5e1;
	border-radius: var(--mcqw-radius);
	text-align: center;
}

.mcqw-add-label {
	display: inline-block;
	margin-right: 6px;
	font-weight: 700;
	color: var(--mcqw-muted);
	font-size: 14px;
}

/* Small screens */

@media screen and (max-width: 782px) {

	.mcqw-toolbar,
	.mcqw-new-form {
		flex-direction: column;
		align-items: stretch;
	}

	.mcqw-demo-form {
		margin-left: 0;
	}

	.mcqw-demo-form .mcqw-btn,
	.mcqw-new-form .mcqw-btn {
		width: 100%;
	}

	.mcqw-editor-head {
		flex-direction: column;
		align-items: stretch;
	}

	.mcqw-app .mcqw-table,
	.mcqw-app .mcqw-table tbody,
	.mcqw-app .mcqw-table tr,
	.mcqw-app .mcqw-table td {
		display: block;
		width: 100%;
	}

	.mcqw-app .mcqw-table thead {
		display: none;
	}

	.mcqw-app .mcqw-table tr {
		border-bottom: 1px solid var(--mcqw-line);
		padding: 8px 0;
	}

	.mcqw-app .mcqw-table td {
		border: none;
		padding: 6px 16px;
	}

	.mcqw-app .mcqw-table td.mcqw-col-num,
	.mcqw-app .mcqw-table td.mcqw-col-date {
		text-align: left;
		width: auto;
	}

	.mcqw-app .mcqw-table td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: 700;
		color: var(--mcqw-muted);
		font-size: 12px;
		text-transform: uppercase;
	}

	.mcqw-col-actions {
		width: auto;
		white-space: normal;
	}
}

/* ==========================================================================
   Standalone page shell
   Used when the plugin replaces the theme's header and footer on its own
   six pages. The theme normally supplies a page background and sensible
   defaults for body text; with the theme gone, we supply them here.
   ========================================================================== */

body.mcqw-standalone {
	margin: 0;
	padding: 0;
	color: #0f172a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;

	/*
	 * Five soft colour blooms rather than one flat fill. This is what the
	 * frosted panels are frosting: glass over a plain white page just
	 * looks like a grey box, and the whole effect depends on there being
	 * something behind it worth blurring.
	 *
	 * Fixed attachment so the wash stays put while a long report scrolls.
	 * The colours are variables, so a palette change repaints the page
	 * without touching this rule.
	 */
	background-color: var( --mcqw-wash-base, #e6effb );
	background-image:
		radial-gradient( at 10% 14%, var( --mcqw-wash-1, rgba( 29, 78, 216, 0.44 ) ) 0px, transparent 52% ),
		radial-gradient( at 88% 10%, var( --mcqw-wash-2, rgba( 56, 189, 248, 0.40 ) ) 0px, transparent 50% ),
		radial-gradient( at 76% 82%, var( --mcqw-wash-3, rgba( 20, 87, 143, 0.42 ) ) 0px, transparent 52% ),
		radial-gradient( at 16% 88%, var( --mcqw-wash-4, rgba( 6, 182, 212, 0.32 ) ) 0px, transparent 50% ),
		radial-gradient( at 50% 50%, var( --mcqw-wash-5, rgba( 96, 165, 250, 0.26 ) ) 0px, transparent 60% );
	background-attachment: fixed;
	min-height: 100vh;
}

/*
 * The tokens live on .mcqw-app, but the wash is painted on <body>, which
 * sits outside it. Repeating the themeable ones here lets the gradient
 * read them. Only the wash tokens are duplicated; everything else stays
 * defined once.
 */
body.mcqw-standalone {
	--mcqw-wash-base: #e6effb;
	--mcqw-wash-1: rgba( 29, 78, 216, 0.44 );
	--mcqw-wash-2: rgba( 56, 189, 248, 0.40 );
	--mcqw-wash-3: rgba( 20, 87, 143, 0.42 );
	--mcqw-wash-4: rgba( 6, 182, 212, 0.32 );
	--mcqw-wash-5: rgba( 96, 165, 250, 0.26 );
}

/* A busy gradient behind small print is harder to read, so high contrast
   flattens it to a plain surface. */
@media ( prefers-contrast: more ) {

	body.mcqw-standalone {
		background-image: none;
		background-color: var( --mcqw-bg, #f8fafc );
	}
}

/* Printing a report should not spend the school's ink on a gradient. */
@media print {

	body.mcqw-standalone {
		background-image: none;
		background-color: #fff;
	}
}

body.mcqw-standalone * {
	box-sizing: border-box;
}

/* The admin bar is switched off on these screens, but a stubborn theme
   or plugin may still reserve room for it. */
body.mcqw-standalone {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.mcqw-standalone #wpadminbar {
	display: none !important;
}

/* Blue brand bar
   -------------------------------------------------------------------------- */

.mcqw-topbar {
	background: var( --mcqw-deep, #14578F );
	background: linear-gradient(
		120deg,
		var( --mcqw-deep, #14578F ) 0%,
		var( --mcqw-blue, #2563eb ) 55%,
		var( --mcqw-accent, #38bdf8 ) 100%
	);
	box-shadow: 0 4px 24px rgba( 15, 42, 82, 0.26 );
	position: relative;
	z-index: 10;
}

/* The bar carries the wash tokens too, so a palette repaints it. */
.mcqw-topbar {
	--mcqw-deep: #14578F;
	--mcqw-blue: #2563eb;
	--mcqw-accent: #38bdf8;
}

.mcqw-topbar-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 68px;
}

.mcqw-topbar-left {
	min-width: 0;
	display: flex;
	align-items: center;
}

.mcqw-topbar-title {
	color: #fff;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.mcqw-topbar-title:hover,
a.mcqw-topbar-title:focus {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.mcqw-topbar-title:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: 4px;
	text-decoration: none;
}

.mcqw-topbar-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* The logo is dark blue artwork on a transparent background, so it would
   disappear against the blue bar. A white plate keeps it legible and
   keeps the original brand colours intact. */
.mcqw-logo-plate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border-radius: 8px;
	padding: 7px 12px;
	box-shadow: 0 1px 4px rgba(15, 43, 71, 0.22);
}

.mcqw-logo {
	display: block;
	height: 30px;
	width: auto;
	max-width: 150px;
	/*
	 * The bundled logo is wide and short, but an uploaded one may be any
	 * shape at all. Without object-fit a tall or very wide logo is
	 * squashed to fit the box instead of being scaled down inside it.
	 */
	object-fit: contain;
	object-position: center;
}

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

.mcqw-main {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px 56px;
}

/* Inside the standalone shell the wrapper handles its own width, so it
   should not add a second set of margins. */
body.mcqw-standalone .mcqw-app {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Phones
   -------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {

	.mcqw-topbar-inner {
		padding: 10px 14px;
		min-height: 58px;
		gap: 10px;
	}

	.mcqw-topbar-title {
		font-size: 17px;
	}

	.mcqw-logo-plate {
		padding: 5px 9px;
	}

	.mcqw-logo {
		height: 24px;
		max-width: 116px;
	}

	.mcqw-main {
		padding: 16px 14px 40px;
	}
}

@media screen and (max-width: 380px) {

	.mcqw-topbar-title {
		font-size: 15px;
	}

	.mcqw-logo {
		height: 21px;
		max-width: 100px;
	}
}

/* Printing a report should not waste ink on the blue bar. */
@media print {

	.mcqw-topbar {
		background: none;
		box-shadow: none;
		border-bottom: 1px solid #ccc;
	}

	.mcqw-topbar-title {
		color: #000;
	}

	.mcqw-logo-plate {
		box-shadow: none;
		padding: 0;
	}
}

/* ==========================================================================
   Host screen
   The lobby is shown on a projector at the front of a room, so the PIN
   has to be readable from the back. Everything here is deliberately large.
   ========================================================================== */

.mcqw-eyebrow {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mcqw-muted);
}

.mcqw-host-startcard {
	text-align: center;
	max-width: 560px;
	margin: 24px auto;
}

.mcqw-host-blurb {
	margin: 16px auto 24px;
	max-width: 420px;
	color: var(--mcqw-muted);
}

.mcqw-host-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.mcqw-btn-big {
	font-size: 17px;
	padding: 13px 30px;
	font-weight: 700;
}

.mcqw-host-error {
	margin-top: 16px;
	padding: 10px 14px;
	border-radius: var(--mcqw-radius);
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 14px;
}

/* Lobby
   -------------------------------------------------------------------------- */

.mcqw-lobby-top {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: stretch;
	margin-bottom: 20px;
}

.mcqw-pinbox {
	flex: 1 1 340px;
	background: var( --mcqw-deep, #14578F );
	background: linear-gradient(
		150deg,
		var( --mcqw-blue-dark, #1d4ed8 ) 0%,
		var( --mcqw-deep, #14578F ) 60%,
		var( --mcqw-accent, #38bdf8 ) 160%
	);
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: var( --mcqw-radius, 16px );
	padding: 22px 28px;
	text-align: center;
	box-shadow: 0 10px 34px rgba( 15, 42, 82, 0.34 );
	/* The PIN stays solid white on this dark panel. Do not apply
	   gradient-clipped text here: it would sink into the background. */
}

.mcqw-pin-label {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}

.mcqw-pin {
	margin: 0;
	font-size: 68px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	/* Tabular figures stop the PIN jiggling as digits change. */
}

.mcqw-joinbox {
	flex: 1 1 260px;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var(--mcqw-line);
	border-radius: 16px;
	padding: 22px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.mcqw-join-label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mcqw-muted);
}

.mcqw-join-url {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--mcqw-ink);
	word-break: break-all;
}

.mcqw-joinbox .mcqw-btn {
	align-self: center;
}

.mcqw-lobby-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.mcqw-lobby-count {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
}

.mcqw-lobby-count [data-mcqw-count] {
	color: #14578F;
}

/* Player chips
   -------------------------------------------------------------------------- */

.mcqw-roster {
	min-height: 90px;
}

.mcqw-roster-empty {
	margin: 0;
	padding: 28px 16px;
	text-align: center;
	color: var(--mcqw-muted);
	background: var( --mcqw-glass-strong );
	border: 2px dashed var(--mcqw-line);
	border-radius: var(--mcqw-radius);
}

.mcqw-roster-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mcqw-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var( --mcqw-glass-strong );
	border: 1px solid var(--mcqw-line);
	border-radius: 999px;
	padding: 8px 16px 8px 10px;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(15, 43, 71, 0.06);
}

.mcqw-chip-avatar {
	font-size: 20px;
	line-height: 1;
}

.mcqw-chip-name {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* New arrivals pop in, so the teacher can see joining is working. */
.mcqw-chip-new {
	animation: mcqw-pop 260ms ease-out;
}

@keyframes mcqw-pop {
	from { transform: scale( 0.8 ); opacity: 0; }
	to   { transform: scale( 1 ); opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcqw-chip-new {
		animation: none;
	}
}

.mcqw-conn {
	margin: 18px 0 0;
	text-align: center;
	font-size: 14px;
	color: #92400e;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--mcqw-radius);
	padding: 8px 12px;
}

/* Bigger screens: make the PIN dominate. */
@media screen and ( min-width: 1000px ) {

	.mcqw-pin {
		font-size: 88px;
	}
}

/* Phones */
@media screen and ( max-width: 600px ) {

	.mcqw-pin {
		font-size: 52px;
	}

	.mcqw-pinbox,
	.mcqw-joinbox {
		padding: 18px 16px;
	}

	.mcqw-join-url {
		font-size: 17px;
	}

	.mcqw-lobby-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.mcqw-lobby-bar .mcqw-btn-big {
		width: 100%;
	}

	.mcqw-lobby-count {
		text-align: center;
	}
}

/* ==========================================================================
   Join screen
   Nearly always a phone held one-handed, so targets are large and the
   whole card sits within thumb reach.
   ========================================================================== */

.mcqw-joincard {
	max-width: 440px;
	margin: 12px auto;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var(--mcqw-line);
	border-radius: 18px;
	padding: 26px 22px;
	box-shadow: 0 4px 20px rgba(15, 43, 71, 0.08);
}

.mcqw-join-title {
	margin: 0 0 20px;
	font-size: 26px;
	font-weight: 800;
	text-align: center;
}

.mcqw-field {
	margin-bottom: 18px;
}

.mcqw-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mcqw-ink);
}

.mcqw-help {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--mcqw-muted);
}

.mcqw-input-pin {
	font-size: 30px;
	font-weight: 800;
	text-align: center;
	letter-spacing: 0.28em;
	padding: 12px;
	font-variant-numeric: tabular-nums;
}

.mcqw-input-pin::placeholder {
	letter-spacing: 0.28em;
	color: #cbd5e1;
}

/* Avatar picker */

.mcqw-avatars {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 10px;
}

.mcqw-avatar {
	font-size: 30px;
	line-height: 1;
	padding: 12px 0;
	background: var( --mcqw-glass-strong );
	border: 2px solid var(--mcqw-line);
	border-radius: 14px;
	cursor: pointer;
	transition: transform 120ms ease, border-color 120ms ease;
}

.mcqw-avatar:hover {
	border-color: #94a3b8;
}

.mcqw-avatar.is-picked {
	border-color: #14578F;
	background: #eff6ff;
	transform: scale( 1.06 );
}

.mcqw-avatar:focus-visible {
	outline: 3px solid #14578F;
	outline-offset: 2px;
}

.mcqw-join-error {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: var(--mcqw-radius);
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 14px;
	font-weight: 600;
}

.mcqw-btn-block {
	display: block;
	width: 100%;
	text-align: center;
}

/* ==========================================================================
   Play screen
   ========================================================================== */

.mcqw-playstage {
	max-width: 560px;
	margin: 0 auto;
}

.mcqw-you {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --mcqw-glass-strong );
	border: 1px solid var(--mcqw-line);
	border-radius: 999px;
	padding: 8px 16px 8px 10px;
	margin-bottom: 16px;
	font-weight: 700;
}

.mcqw-you-avatar {
	font-size: 22px;
	line-height: 1;
}

.mcqw-you-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcqw-you-points {
	flex: 0 0 auto;
	color: #14578F;
	font-variant-numeric: tabular-nums;
}

/* Waiting */

.mcqw-waitcard {
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var(--mcqw-line);
	border-radius: 18px;
	padding: 44px 24px;
	text-align: center;
}

.mcqw-wait-title {
	margin: 14px 0 4px;
	font-size: 22px;
	font-weight: 800;
}

.mcqw-spinner {
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 4px solid #e2e8f0;
	border-top-color: #14578F;
	border-radius: 50%;
	animation: mcqw-spin 800ms linear infinite;
}

@keyframes mcqw-spin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcqw-spinner { animation-duration: 2400ms; }
}

/* Question */

.mcqw-qhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.mcqw-qnum {
	font-size: 14px;
	font-weight: 700;
	color: var(--mcqw-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mcqw-qof {
	opacity: 0.7;
}

.mcqw-timer {
	min-width: 52px;
	text-align: center;
	font-size: 24px;
	font-weight: 800;
	color: #14578F;
	background: var( --mcqw-glass-strong );
	border: 2px solid var(--mcqw-line);
	border-radius: 999px;
	padding: 2px 12px;
	font-variant-numeric: tabular-nums;
}

.mcqw-timer.is-urgent {
	color: #b91c1c;
	border-color: #fecaca;
	background: #fef2f2;
	animation: mcqw-pulse 1s ease-in-out infinite;
}

@keyframes mcqw-pulse {
	50% { transform: scale( 1.08 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcqw-timer.is-urgent { animation: none; }
}

.mcqw-qtext {
	margin: 0 0 18px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
}

/* Answer buttons. Colour-coded so they can be called out by shape and
   colour, with the text still readable for anyone who cannot tell the
   colours apart. */

.mcqw-options {
	display: grid;
	gap: 12px;
}

.mcqw-option {
	display: flex;
	align-items: center;
	min-height: 68px;
	padding: 14px 18px;
	border: none;
	border-radius: 14px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 3px 0 rgba( 0, 0, 0, 0.16 );
	transition: transform 90ms ease, opacity 150ms ease;
}

.mcqw-option:active {
	transform: translateY( 2px );
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.16 );
}

.mcqw-option-0 { background: #dc2626; }
.mcqw-option-1 { background: #2563eb; }
.mcqw-option-2 { background: #f59e0b; }
.mcqw-option-3 { background: #16a34a; }

/*
 * A shuffled answer has no fixed position, so it gets no positional
 * colour: the four colours would mean a different answer on every phone
 * and would not match the interviewer's screen. One calm tile instead,
 * identified by its words.
 */
.mcqw-option-plain {
	background: var(--mcqw-deep);
}

.mcqw-option-plain:nth-child( even ) {
	background: var(--mcqw-blue-dark);
}

.mcqw-option:focus-visible {
	outline: 3px solid #0f172a;
	outline-offset: 3px;
}

.mcqw-option.is-dimmed {
	opacity: 0.35;
}

.mcqw-option.is-chosen {
	outline: 4px solid #0f172a;
	outline-offset: 2px;
}

.mcqw-option[disabled] {
	cursor: default;
}

.mcqw-typed {
	display: grid;
	gap: 12px;
}

.mcqw-input-answer {
	font-size: 20px;
	padding: 14px;
	text-align: center;
}

/* Result */

.mcqw-verdict {
	border-radius: 18px;
	padding: 30px 20px;
	text-align: center;
	color: #fff;
	margin-bottom: 16px;
}

.mcqw-verdict-right { background: #16a34a; }
.mcqw-verdict-wrong { background: #dc2626; }

/*
 * A scored answer is never simply right or wrong, so green and red would
 * both mislead. The ranked palette matches the bars on the host's reveal:
 * the best answer is strongest, a part-mark answer is lighter, and zero is
 * neutral grey rather than the red used for a wrong answer.
 */
.mcqw-verdict-top { background: var(--mcqw-blue); }
.mcqw-verdict-mid { background: var(--mcqw-blue-light); }

.mcqw-verdict-zero {
	background: #f1f5f9;
	color: var(--mcqw-ink);
	border: 1px solid var(--mcqw-line);
}

/* The mark is the headline on a scored verdict, so it leads. */
.mcqw-verdict-scored .mcqw-verdict-points {
	margin: 0;
	font-size: 52px;
	line-height: 1;
}

.mcqw-verdict-scored .mcqw-verdict-title {
	font-size: 18px;
	font-weight: 700;
	opacity: 0.9;
}

.mcqw-verdict-none {
	background: #f1f5f9;
	color: var(--mcqw-ink);
	border: 1px solid var(--mcqw-line);
}

.mcqw-verdict-icon {
	margin: 0;
	font-size: 46px;
	line-height: 1;
	font-weight: 800;
}

.mcqw-verdict-title {
	margin: 8px 0 0;
	font-size: 26px;
	font-weight: 800;
}

.mcqw-verdict-points {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 800;
}

.mcqw-answerwas {
	margin: 0 0 12px;
	text-align: center;
	font-size: 16px;
}

.mcqw-scoreline {
	margin: 0;
	text-align: center;
	font-size: 15px;
	color: var(--mcqw-muted);
}

.mcqw-scoreline-num {
	font-size: 26px;
	font-weight: 800;
	color: var(--mcqw-ink);
	font-variant-numeric: tabular-nums;
}

.mcqw-streak {
	margin: 6px 0 0;
	text-align: center;
	font-weight: 700;
	color: #ea580c;
}

.mcqw-nextnote {
	margin-top: 18px;
	text-align: center;
}

/* Final */

.mcqw-final {
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var(--mcqw-line);
	border-radius: 18px;
	padding: 28px 20px;
	text-align: center;
}

.mcqw-final-label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mcqw-muted);
}

.mcqw-final-rank {
	margin: 6px 0 0;
	font-size: 30px;
	font-weight: 800;
}

.mcqw-final-points {
	margin: 2px 0 18px;
	font-size: 17px;
	color: var(--mcqw-muted);
	font-weight: 600;
}

.mcqw-podium {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.mcqw-podium-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	font-weight: 600;
}

.mcqw-podium-row + .mcqw-podium-row {
	margin-top: 6px;
}

.mcqw-podium-row.is-me {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}

.mcqw-podium-rank {
	width: 26px;
	font-weight: 800;
	color: var(--mcqw-muted);
}

.mcqw-podium-avatar {
	font-size: 20px;
}

.mcqw-podium-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcqw-podium-points {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

@media screen and ( max-width: 600px ) {

	.mcqw-joincard {
		padding: 20px 16px;
	}

	.mcqw-qtext {
		font-size: 19px;
	}

	.mcqw-option {
		min-height: 62px;
		font-size: 17px;
	}
}

/* ==========================================================================
   Host game screens
   These go on a projector and are read from the back of a room, so type
   is large and contrast is high. Sizes scale with the viewport using
   clamp() so the same markup works on a laptop and a big screen.
   ========================================================================== */

.mcqw-stagehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.mcqw-stage-step {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mcqw-muted);
}

.mcqw-stage-timer {
	min-width: 92px;
	text-align: center;
	font-size: clamp( 30px, 5vw, 48px );
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	background: #14578F;
	border-radius: 999px;
	padding: 4px 22px;
	font-variant-numeric: tabular-nums;
}

.mcqw-stage-timer.is-urgent {
	background: #dc2626;
	animation: mcqw-pulse 1s ease-in-out infinite;
}

.mcqw-stage-answered {
	font-size: 17px;
	font-weight: 700;
	color: var(--mcqw-ink);
	font-variant-numeric: tabular-nums;
}

.mcqw-stage-answered-word {
	font-weight: 600;
	color: var(--mcqw-muted);
	text-transform: lowercase;
}

.mcqw-stage-question {
	margin: 0 0 22px;
	font-size: clamp( 24px, 3.6vw, 42px );
	line-height: 1.25;
	font-weight: 800;
	text-align: center;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var(--mcqw-line);
	border-radius: 16px;
	padding: clamp( 18px, 3vw, 34px );
}

.mcqw-stage-typednote {
	margin: 0 0 22px;
	text-align: center;
	font-size: 18px;
	color: var(--mcqw-muted);
}

/* The options as shown on the projector. Not buttons: the teacher does
   not answer, the room does. */

.mcqw-stage-options {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
	margin-bottom: 22px;
}

.mcqw-stage-option {
	display: flex;
	align-items: center;
	min-height: clamp( 64px, 9vw, 96px );
	padding: 14px 20px;
	border-radius: 14px;
	color: #fff;
	font-size: clamp( 17px, 2.2vw, 26px );
	font-weight: 700;
	box-shadow: 0 3px 0 rgba( 0, 0, 0, 0.16 );
}

@media screen and ( max-width: 620px ) {

	.mcqw-stage-options {
		grid-template-columns: 1fr;
	}
}

/* Answer spread
   -------------------------------------------------------------------------- */

.mcqw-tally {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 12px;
	align-items: end;
	margin-bottom: 22px;
	min-height: 220px;
}

.mcqw-tally-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
}

.mcqw-tally-barwrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 170px;
	gap: 4px;
}

.mcqw-tally-count {
	font-size: 20px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.mcqw-tally-bar {
	width: 100%;
	border-radius: 10px 10px 0 0;
	opacity: 0.35;
	transition: height 400ms ease;
}

/* The right answer stays vivid; the rest fade back. */
.mcqw-tally-bar.is-right {
	opacity: 1;
	box-shadow: 0 0 0 3px #16a34a inset;
}

.mcqw-tally-label {
	border-radius: 10px;
	padding: 10px 12px;
	color: #fff;
	font-weight: 700;
	font-size: clamp( 14px, 1.6vw, 18px );
	text-align: center;
	overflow-wrap: anywhere;
}

.mcqw-tally-label.is-faded {
	opacity: 0.45;
}

.mcqw-tick {
	font-weight: 800;
}

.mcqw-stage-answerwas {
	margin: 0 0 22px;
	text-align: center;
	font-size: clamp( 20px, 2.6vw, 30px );
}

/* Between-question leaderboard
   -------------------------------------------------------------------------- */

.mcqw-miniboard {
	list-style: none;
	margin: 0 auto 22px;
	padding: 0;
	max-width: 520px;
}

.mcqw-miniboard-row {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var(--mcqw-line);
	border-radius: 12px;
	padding: 10px 14px;
	font-weight: 700;
}

.mcqw-miniboard-row + .mcqw-miniboard-row {
	margin-top: 6px;
}

.mcqw-miniboard-rank {
	width: 26px;
	color: var(--mcqw-muted);
}

.mcqw-miniboard-avatar {
	font-size: 20px;
}

.mcqw-miniboard-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcqw-miniboard-points {
	font-variant-numeric: tabular-nums;
}

/* Final scoreboard
   -------------------------------------------------------------------------- */

.mcqw-podium-stage {
	text-align: center;
}

.mcqw-bigboard {
	list-style: none;
	margin: 12px auto 26px;
	padding: 0;
	max-width: 620px;
	text-align: left;
}

.mcqw-bigboard-row {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 1px solid var(--mcqw-line);
	border-radius: 14px;
	padding: 14px 18px;
	font-size: clamp( 16px, 2vw, 22px );
	font-weight: 700;
}

.mcqw-bigboard-row + .mcqw-bigboard-row {
	margin-top: 8px;
}

.mcqw-bigboard-rank {
	width: 34px;
	font-weight: 800;
	color: var(--mcqw-muted);
}

.mcqw-bigboard-avatar {
	font-size: 26px;
}

.mcqw-bigboard-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcqw-bigboard-points {
	font-variant-numeric: tabular-nums;
}

/* Top three get a nod. */
.mcqw-place-1 { background: #fffbeb; border-color: #fcd34d; }
.mcqw-place-2 { background: #f8fafc; border-color: #cbd5e1; }
.mcqw-place-3 { background: #fff7ed; border-color: #fdba74; }

/* Controls
   -------------------------------------------------------------------------- */

.mcqw-stage-controls {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 6px;
}

.mcqw-btn-quiet {
	background: transparent;
	color: var(--mcqw-muted);
	border: 1px solid var(--mcqw-line);
}

.mcqw-btn-quiet:hover {
	color: var(--mcqw-ink);
	border-color: #94a3b8;
}

@media screen and ( max-width: 600px ) {

	.mcqw-tally {
		min-height: 170px;
	}

	.mcqw-tally-barwrap {
		height: 120px;
	}

	.mcqw-stage-controls .mcqw-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Report screen
   ========================================================================== */

.mcqw-crumb {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--mcqw-muted);
}

.mcqw-crumb a {
	color: #14578F;
	text-decoration: none;
}

.mcqw-crumb a:hover {
	text-decoration: underline;
}

.mcqw-crumb-sep {
	opacity: 0.5;
	margin: 0 2px;
}

.mcqw-report-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.mcqw-report-head form {
	margin: 0;
}

.mcqw-section-title {
	margin: 28px 0 10px;
	font-size: 19px;
	font-weight: 800;
}

/* Headline figures */

.mcqw-stats {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 12px;
	margin-bottom: 20px;
}

.mcqw-stat {
	border: 1px solid var(--mcqw-line);
	border-radius: 14px;
	padding: 18px 16px;
	text-align: center;
	/* Background/border/shadow come from the shared glass rule above. */
}

.mcqw-stat-value {
	display: block;
	font-size: clamp( 26px, 3.4vw, 34px );
	font-weight: 800;
	line-height: 1.1;
	color: #14578F;
	font-variant-numeric: tabular-nums;
}

.mcqw-stat-label {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mcqw-muted);
}

/* The "what to reteach" callout */

.mcqw-callout {
	border-radius: 14px;
	padding: 18px 20px;
	margin-bottom: 22px;
	border: 1px solid;
}

.mcqw-callout-warn {
	background: #fffbeb;
	border-color: #fde68a;
}

.mcqw-callout-good {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.mcqw-callout-title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
}

.mcqw-callout-body {
	margin: 3px 0 0;
	font-size: 14px;
	color: var(--mcqw-muted);
}

.mcqw-weak-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.mcqw-weak-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 0;
	border-top: 1px solid rgba( 0, 0, 0, 0.06 );
	font-size: 15px;
}

.mcqw-weak-rate {
	flex: 0 0 auto;
	min-width: 44px;
	font-weight: 800;
	color: #b45309;
	font-variant-numeric: tabular-nums;
}

.mcqw-weak-num {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--mcqw-muted);
}

.mcqw-weak-text {
	flex: 1 1 auto;
}

/* Report tables */

.mcqw-table-report td,
.mcqw-table-report th {
	vertical-align: middle;
}

.mcqw-table-report tr.is-weak {
	background: #fffbeb;
}

.mcqw-qnumber {
	font-weight: 800;
	color: var(--mcqw-muted);
}

.mcqw-report-avatar {
	font-size: 18px;
}

/* Inline progress bars */

.mcqw-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 120px;
}

.mcqw-bar-track {
	flex: 1 1 auto;
	height: 8px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
}

.mcqw-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.mcqw-bar-high { background: #16a34a; }
.mcqw-bar-mid  { background: #f59e0b; }
.mcqw-bar-low  { background: #dc2626; }

.mcqw-bar-num {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 38px;
	text-align: right;
}

/* Status pills */

.mcqw-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	border: 1px solid var(--mcqw-line);
	font-size: 13px;
	font-weight: 700;
	color: var(--mcqw-muted);
}

.mcqw-pill-live {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #047857;
}

@media screen and ( max-width: 782px ) {

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

	.mcqw-report-head {
		flex-direction: column;
	}
}

/* Printing a report should give a clean handout. */
@media print {

	.mcqw-report-head form,
	.mcqw-crumb {
		display: none;
	}

	.mcqw-stat,
	.mcqw-callout,
	.mcqw-table-report {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Settings panel (AI setup on the dashboard)
   ========================================================================== */

.mcqw-panel {
	margin-top: 32px;
	border: 1px solid var(--mcqw-line);
	border-radius: 14px;
	overflow: hidden;
	/* Background/border/shadow come from the shared glass rule above. */
}

.mcqw-panel-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.mcqw-panel-summary::-webkit-details-marker {
	display: none;
}

/* A rotating chevron drawn in CSS, so nothing external needs to load. */
.mcqw-panel-summary::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mcqw-muted);
	border-bottom: 2px solid var(--mcqw-muted);
	transform: rotate( -45deg );
	transition: transform 0.15s ease;
	margin-right: 2px;
}

.mcqw-panel[open] > .mcqw-panel-summary::before {
	transform: rotate( 45deg );
}

.mcqw-panel-summary:hover {
	background: #f8fafc;
}

.mcqw-panel-title {
	font-size: 17px;
	font-weight: 800;
}

.mcqw-panel-body {
	padding: 4px 20px 22px;
	border-top: 1px solid var(--mcqw-line);
}

.mcqw-panel-intro {
	margin-top: 14px;
	max-width: 100%;
}

.mcqw-callout-slim {
	padding: 12px 16px;
	margin-bottom: 18px;
}

.mcqw-pill-warn {
	background: #fffbeb;
	border-color: #fde68a;
	color: #b45309;
}

.mcqw-ai-form {
	max-width: 100%;
}

.mcqw-key-current {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--mcqw-muted);
}

.mcqw-key-current code {
	background: #f1f5f9;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 13px;
	letter-spacing: 1px;
}

/* A count is two or three characters; a full-width box for it looks silly
   and invites someone to type an essay. Width as well as max-width, or the
   100% on the base rule wins. */
/* Full width like every other field. It held two or three characters and
   a short box looked tidier in isolation, but it broke the line the rest
   of the form sits on, which looked worse. */
.mcqw-app .mcqw-input-num.mcqw-input-num {
	width: 100%;
	max-width: 100%;
}

.mcqw-field-check {
	margin-top: 4px;
}

.mcqw-check {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-size: 15px;
}

.mcqw-check input {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: 0 0 auto;
}

.mcqw-help {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--mcqw-muted);
	max-width: 100%;
}

.mcqw-help a {
	color: #14578F;
}

.mcqw-form-actions {
	margin-top: 20px;
}

.mcqw-ai-tools {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--mcqw-line);
}

/* ==========================================================================
   Generate with AI panel
   ========================================================================== */

.mcqw-gen-panel {
	margin-top: 0;
	margin-bottom: 24px;
	border-color: #bfdbfe;
	background: #f8fbff;
}

.mcqw-gen-panel .mcqw-panel-summary:hover {
	background: #f0f7ff;
}

.mcqw-gen-panel.is-busy {
	opacity: 0.75;
	pointer-events: none;
}

.mcqw-gen-form {
	max-width: 100%;
}

.mcqw-textarea {
	min-height: 130px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}

.mcqw-file {
	display: block;
	width: 100%;
	max-width: 420px;
	font-size: 14px;
	padding: 9px;
	border: 1px dashed var(--mcqw-line);
	border-radius: 10px;
	background: var( --mcqw-glass-strong );
	cursor: pointer;
}

.mcqw-file-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	font-size: 14px;
}

.mcqw-file-list li {
	padding: 5px 0 5px 22px;
	position: relative;
	color: var(--mcqw-muted);
}

/* A tick drawn in CSS so no image needs to load. */
.mcqw-file-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 10px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #16a34a;
	border-bottom: 2px solid #16a34a;
	transform: rotate( 45deg );
}

.mcqw-file-list li.is-toobig {
	color: #b91c1c;
}

.mcqw-file-list li.is-toobig::before {
	border-color: #b91c1c;
}

.mcqw-gen-options {
	display: grid;
	grid-template-columns: 130px 220px 1fr;
	gap: 14px;
	align-items: start;
}

.mcqw-gen-options .mcqw-field {
	margin-bottom: 0;
}

.mcqw-gen-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.mcqw-gen-status {
	font-size: 14px;
	color: var(--mcqw-muted);
}

/* A quiet pulse while the AI is thinking, so it does not look frozen. */
.mcqw-gen-panel.is-busy .mcqw-gen-status {
	animation: mcqw-pulse 1.4s ease-in-out infinite;
}

@keyframes mcqw-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

.mcqw-gen-message {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.5;
}

.mcqw-gen-message:empty {
	display: none;
}

.mcqw-gen-message.is-error {
	padding: 12px 16px;
	border-radius: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.mcqw-gen-message.is-good {
	padding: 12px 16px;
	border-radius: 10px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}

@media screen and ( max-width: 782px ) {

	.mcqw-gen-options {
		grid-template-columns: 1fr 1fr;
	}

	.mcqw-field-wide {
		grid-column: 1 / -1;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.mcqw-gen-panel.is-busy .mcqw-gen-status {
		animation: none;
	}
}

/* ==========================================================================
   Create a quiz with AI (dashboard)
   ========================================================================== */

.mcqw-aiquiz-panel {
	margin-top: 0;
	margin-bottom: 26px;
	border-color: #bfdbfe;
	background: #f8fbff;
}

.mcqw-aiquiz-panel .mcqw-panel-summary:hover {
	background: #f0f7ff;
}

.mcqw-aiquiz-form {
	max-width: 100%;
}

/* While the AI is writing, dim the form and keep the wait visible. */
.mcqw-aiquiz-form.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.mcqw-aiquiz-form.is-busy .mcqw-gen-status::after {
	content: attr( data-wait );
}

.mcqw-aiquiz-panel .mcqw-form-actions {
	margin-top: 18px;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Visible to screen readers, invisible on screen. Same technique core uses. */
.mcqw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/*
 * A clear focus ring for keyboard users. :focus-visible means mouse users
 * do not get a ring on click, but tabbing always shows where you are.
 */
.mcqw-app :focus-visible,
.mcqw-topbar :focus-visible {
	outline: 3px solid #14578F;
	outline-offset: 2px;
	border-radius: 4px;
}

/* On the dark player and host screens a blue ring disappears. */
.mcqw-screen-play :focus-visible,
.mcqw-screen-host :focus-visible,
.mcqw-screen-join :focus-visible {
	outline-color: #fff;
}

/* Older browsers without :focus-visible still get a ring on focus. */
@supports not selector( :focus-visible ) {

	.mcqw-app :focus,
	.mcqw-topbar :focus {
		outline: 3px solid #14578F;
		outline-offset: 2px;
	}
}

/* Respect a reduced-motion preference throughout. */
@media ( prefers-reduced-motion: reduce ) {

	.mcqw-app *,
	.mcqw-app *::before,
	.mcqw-app *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Windows high contrast mode: keep borders that would otherwise vanish. */
@media ( forced-colors: active ) {

	.mcqw-btn,
	.mcqw-card,
	.mcqw-panel,
	.mcqw-stat {
		border: 1px solid;
	}

	.mcqw-bar-fill {
		forced-color-adjust: none;
	}
}

/* ---------------------------------------------------------------
   Generating from several files at once
   --------------------------------------------------------------- */

.mcqw-gen-progress {
	height: 6px;
	margin: 10px 0 4px;
	background: #e6ecf2;
	border-radius: 3px;
	overflow: hidden;
}

.mcqw-gen-progress-fill {
	height: 100%;
	width: 0;
	background: #14578F;
	border-radius: 3px;
	/* Matches the 250ms tick of the estimator, so the bar glides steadily
	   instead of easing in and out of every small step. */
	transition: width 250ms linear;
}

.mcqw-gen-log {
	margin-top: 10px;
	padding: 10px 12px;
	background: #f5f8fb;
	border: 1px solid #dde5ee;
	border-radius: 6px;
	font-size: 0.9em;
}

.mcqw-gen-log-head {
	margin: 0;
	font-weight: 600;
	color: #14578F;
}

.mcqw-gen-log-list {
	margin: 6px 0 0;
	padding-left: 18px;
}

.mcqw-gen-log-list li.is-skipped {
	color: #8a3d00;
	margin-bottom: 3px;
}

.mcqw-gen-message.is-warn {
	color: #8a3d00;
	background: #fff6e8;
	border-color: #f0d9b5;
}

.mcqw-btn-quiet {
	background: transparent;
	border: 1px solid #c3cede;
	color: #45566b;
}

.mcqw-btn-quiet:hover {
	background: #eef3f8;
}

.mcqw-gen-summary {
	margin: 6px 0 0;
	font-size: 0.9em;
	color: #45566b;
}

.mcqw-gen-summary.is-warn {
	color: #8a3d00;
}

.mcqw-gen-summary.is-bad {
	color: #a3231b;
	font-weight: 600;
}

/* The upload bar, shown while bytes are still leaving the machine. */
.mcqw-gen-upload {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 4px;
}

.mcqw-gen-upload-track {
	flex: 1 1 auto;
	height: 6px;
	background: #e6ecf2;
	border-radius: 3px;
	overflow: hidden;
}

.mcqw-gen-upload-fill {
	height: 100%;
	width: 0;
	background: #2f8f4e;
	border-radius: 3px;
	transition: width 150ms linear;
}

.mcqw-gen-upload-label {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: #45566b;
	font-variant-numeric: tabular-nums;
}

/* Difficulty bands in the AI panel. */
.mcqw-gen-band-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.mcqw-gen-band-count {
	width: 5em;
	flex: 0 0 auto;
}

.mcqw-gen-band-word {
	flex: 0 0 auto;
	font-size: 0.9em;
	color: #45566b;
}

.mcqw-gen-band-level {
	flex: 0 1 12em;
}

.mcqw-gen-band-remove {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 1px solid #c3cede;
	background: var( --mcqw-glass-strong );
	border-radius: 4px;
	color: #8a3d00;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.mcqw-gen-band-remove:disabled {
	opacity: 0.35;
	cursor: default;
}

.mcqw-gen-band-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.mcqw-gen-band-total {
	font-size: 0.9em;
	color: #45566b;
}

.mcqw-gen-band-total.is-bad {
	color: #a3231b;
	font-weight: 600;
}

.mcqw-btn-small {
	padding: 4px 10px;
	font-size: 0.9em;
}

.mcqw-field.is-off {
	opacity: 0.45;
}

.mcqw-difficulty {
	margin-left: 4px;
}

/* Poll questions in the report. */
.mcqw-poll-note {
	color: #45566b;
	font-style: italic;
}

.mcqw-poll-share {
	display: inline-block;
	margin-right: 4px;
	white-space: nowrap;
}

.mcqw-poll-share strong {
	color: #14578F;
}

/* Poll questions on screen. */
.mcqw-polltag {
	margin: 0 0 12px;
	padding: 6px 12px;
	background: #eef3f9;
	border-left: 3px solid #14578F;
	border-radius: 3px;
	font-size: 0.9em;
	color: #45566b;
}

.mcqw-stage-polltag {
	margin: 0 0 16px;
	font-size: 1.1em;
	color: #45566b;
	font-style: italic;
}

.mcqw-verdict-poll {
	background: #eef3f9;
	color: #14578F;
}

.mcqw-pollnote {
	margin-top: 8px;
	font-size: 0.9em;
}

.mcqw-opt-poll {
	padding-left: 2px;
}

.mcqw-opt-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #c3cede;
	flex: 0 0 auto;
	margin-right: 4px;
}

.mcqw-poll-hint {
	font-size: 0.85em;
	color: #6b7a8d;
	font-style: italic;
	margin-left: 8px;
}

/* Writing an answer: brainstorm questions. */
.mcqw-writing {
	margin-top: 12px;
}

.mcqw-textarea {
	width: 100%;
	min-height: 8em;
	resize: vertical;
	line-height: 1.5;
	font-family: inherit;
	font-size: 1em;
	padding: 10px 12px;
	box-sizing: border-box;
}

.mcqw-writing .mcqw-input-answer {
	width: 100%;
	box-sizing: border-box;
}

/* Silent until they are near the limit, then increasingly present. */
.mcqw-charcount {
	margin: 4px 0 8px;
	min-height: 1.2em;
	text-align: right;
	font-size: 0.85em;
	color: #6b7a8d;
	visibility: hidden;
}

.mcqw-charcount.is-shown {
	visibility: visible;
}

.mcqw-charcount.is-low {
	color: #a3231b;
	font-weight: 600;
}

.mcqw-myanswer {
	margin: 12px 0;
	padding: 10px 14px;
	background: #f6f8fb;
	border-left: 3px solid #14578F;
	border-radius: 3px;
	font-style: italic;
	color: #2d3c4f;
	white-space: pre-wrap;
	word-break: break-word;
}

/* The teacher's live wall of brainstorm answers. */
.mcqw-wallwrap {
	margin-top: 16px;
}

.mcqw-wallbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.mcqw-wall-empty {
	padding: 24px;
	text-align: center;
	color: #6b7a8d;
	font-style: italic;
	font-size: clamp(1rem, 2vw, 1.4rem);
}

.mcqw-wall {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-content: flex-start;
	max-height: 60vh;
	overflow-y: auto;
}

/* Short answers: compact chips, so many fit on a projector at once. */
.mcqw-wall.is-grouped .mcqw-wall-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 2px solid #14578F;
	border-radius: 999px;
	font-size: clamp(1rem, 2.2vw, 1.6rem);
	color: #14578F;
}

.mcqw-wall-count {
	display: inline-block;
	min-width: 1.8em;
	padding: 2px 6px;
	background: #14578F;
	color: #fff;
	border-radius: 999px;
	text-align: center;
	font-weight: 700;
	font-size: 0.85em;
}

/* Long answers: cards that can hold a paragraph. */
.mcqw-wall.is-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.mcqw-wall.is-cards .mcqw-wall-item {
	display: block;
	padding: 12px 16px;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border-left: 4px solid #14578F;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	font-size: clamp(0.9rem, 1.4vw, 1.1rem);
	line-height: 1.5;
	color: #2d3c4f;
	text-align: left;
	white-space: pre-wrap;
	word-break: break-word;
}

.mcqw-wall-who {
	display: block;
	margin-top: 6px;
	font-size: 0.8em;
	color: #6b7a8d;
	font-style: italic;
}

.mcqw-wall.is-grouped .mcqw-wall-who {
	display: inline;
	margin: 0 0 0 6px;
}

/* Editor note explaining a brainstorm needs nothing filled in. */
.mcqw-bs-note {
	margin: 8px 0;
	padding: 10px 14px;
	background: #f6f8fb;
	border-left: 3px solid #c3cede;
	border-radius: 3px;
	font-size: 0.9em;
	color: #45566b;
}

/* Brainstorm answers in the report. */
.mcqw-responses {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.mcqw-response {
	padding: 4px 0;
	border-bottom: 1px solid #eef1f5;
	line-height: 1.45;
	word-break: break-word;
}

.mcqw-response:last-child {
	border-bottom: 0;
}

.mcqw-response-count {
	display: inline-block;
	min-width: 1.6em;
	padding: 1px 5px;
	background: #14578F;
	color: #fff;
	border-radius: 999px;
	text-align: center;
	font-size: 0.8em;
	font-weight: 700;
}

.mcqw-response-who {
	color: #6b7a8d;
	font-size: 0.85em;
	font-style: italic;
}

/* The joining code on the host screen. */
.mcqw-qrbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/*
 * The code sits on white with a little padding of its own. A QR printed
 * straight onto a coloured panel loses the quiet zone scanners rely on.
 */
.mcqw-qr-tap {
	display: block;
	padding: 10px;
	background: var( --mcqw-glass-strong );
	border: 1px solid #dde5ec;
	border-radius: 12px;
	cursor: pointer;
	line-height: 0;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mcqw-qr-tap:hover,
.mcqw-qr-tap:focus-visible {
	transform: scale(1.03);
	box-shadow: 0 4px 16px rgba(20, 87, 143, 0.22);
}

.mcqw-qr-tap svg {
	display: block;
	width: 100%;
	height: auto;
}

.mcqw-qr-hint {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #7b8a99;
}

/* The small one that stays up during the game. */
.mcqw-qr-corner {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 40;
	text-align: center;
}

.mcqw-qr-corner .mcqw-qr-tap {
	padding: 6px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.mcqw-qr-corner-label {
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #5a6b7d;
}

/* Blown up for the back of the room. */
.mcqw-qr-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 30, 50, 0.92);
}

.mcqw-qr-overlay[hidden] {
	display: none;
}

.mcqw-qr-overlay-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.mcqw-qr-overlay-art {
	padding: 20px;
	background: #fff;
	border-radius: 16px;
	line-height: 0;
}

.mcqw-qr-overlay-art svg {
	display: block;
	width: min(70vh, 70vw);
	height: auto;
}

.mcqw-qr-overlay-pin {
	margin: 0;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 8px;
	color: #fff;
}

/* Nothing behind the overlay should scroll while it is up. */
body.mcqw-qr-open {
	overflow: hidden;
}

@media ( max-width: 640px ) {

	.mcqw-qr-corner {
		right: 10px;
		bottom: 10px;
	}

	.mcqw-qr-corner .mcqw-qr-tap svg {
		width: 72px;
	}
}

/* The school's list of Gemini keys. */
.mcqw-keylist {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mcqw-keyrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: #f7fafc;
	border: 1px solid #dde5ec;
	border-left: 4px solid #b8c6d3;
	border-radius: 8px;
}

.mcqw-keyrow.mcqw-key-ok {
	border-left-color: #2e9e5b;
}

.mcqw-keyrow.mcqw-key-resting {
	border-left-color: #e8a33d;
}

.mcqw-keyrow.mcqw-key-rejected {
	border-left-color: #c9403a;
}

.mcqw-keyrow-main {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}

.mcqw-keyrow-label {
	font-weight: 600;
	color: #123;
}

/*
 * Whose key this is. Deliberately a different shape from the health pill
 * on the right: that one changes by itself and is a status, this one is
 * a fact somebody typed. Making them look alike would suggest the owner
 * was something the plugin worked out.
 */
.mcqw-keyowner {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 6px;
	background: #14578F;
	color: #fff;
	white-space: nowrap;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

/* Nobody said whose it is. Quiet, but visibly a gap to fill. */
.mcqw-keyowner.is-unknown {
	background: #eef2f6;
	color: #8697a6;
	font-weight: 600;
	font-style: italic;
	border: 1px dashed #c3d2df;
}

.mcqw-keyrow-mask {
	font-size: 12px;
	color: #5a6b7d;
	background: var( --mcqw-glass-strong );
	border: 1px solid #e3eaf0;
	border-radius: 4px;
	padding: 1px 6px;
}

.mcqw-keyrow-side {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mcqw-keyrow-note {
	flex-basis: 100%;
	margin: 2px 0 0;
	font-size: 13px;
	color: #8a3a36;
}

.mcqw-keypill {
	font-size: 12px;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 999px;
	white-space: nowrap;
	background: #e8eef4;
	color: #5a6b7d;
}

.mcqw-keypill-ok {
	background: #e3f5ea;
	color: #1f7a45;
}

.mcqw-keypill-resting {
	background: #fdf2e0;
	color: #91631a;
}

.mcqw-keypill-rejected {
	background: #fbe9e8;
	color: #a3312c;
}

.mcqw-keyrow-remove {
	display: inline;
}

.mcqw-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	color: #5a6b7d;
	text-decoration: underline;
	cursor: pointer;
}

.mcqw-linkbtn-danger:hover,
.mcqw-linkbtn-danger:focus-visible {
	color: #c9403a;
}

.mcqw-keyadd {
	padding: 12px;
	background: #f2f6fa;
	border: 1px dashed #c3d2df;
	border-radius: 8px;
}

.mcqw-sublabel {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #5a6b7d;
	margin: 0 0 4px;
}

.mcqw-keyadd .mcqw-input + .mcqw-sublabel {
	margin-top: 10px;
}

.mcqw-keys-tip {
	font-style: italic;
}

/* The quiet record of what went wrong. */
.mcqw-keylog {
	margin-top: 14px;
	font-size: 13px;
}

.mcqw-keylog > summary {
	cursor: pointer;
	color: #5a6b7d;
}

.mcqw-keylog-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 10px 12px;
	background: #f7fafc;
	border-radius: 6px;
	max-height: 190px;
	overflow-y: auto;
}

.mcqw-keylog-list li {
	padding: 3px 0;
	border-bottom: 1px solid #edf2f6;
	color: #43535f;
}

.mcqw-keylog-list li:last-child {
	border-bottom: 0;
}

.mcqw-keylog-when {
	color: #8697a6;
}

/* Who can use the plugin. */
.mcqw-stafflist {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mcqw-staffrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 8px 12px;
	background: #f7fafc;
	border: 1px solid #dde5ec;
	border-left: 4px solid #b8c6d3;
	border-radius: 8px;
}

.mcqw-staffrow.is-admin {
	border-left-color: #14578F;
}

.mcqw-staffrow.is-super {
	border-left-color: #e8a33d;
}

.mcqw-staffrow.is-teacher {
	border-left-color: #2e9e5b;
}

.mcqw-staffrow-name {
	font-weight: 600;
	color: #123;
}

.mcqw-staffrow-role {
	font-size: 12px;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 999px;
	background: #e8eef4;
	color: #5a6b7d;
	white-space: nowrap;
}

.mcqw-staffrow.is-super .mcqw-staffrow-role {
	background: #fdf2e0;
	color: #91631a;
}

.mcqw-staffrow.is-teacher .mcqw-staffrow-role {
	background: #e3f5ea;
	color: #1f7a45;
}

.mcqw-staffrow-note {
	font-size: 13px;
	color: #5a6b7d;
}

/* Quizzes colleagues have shared. */
.mcqw-staffroom {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 2px solid #e3eaf0;
}

.mcqw-staffroom-title {
	margin: 0 0 4px;
	font-size: 18px;
	color: #14578F;
}

.mcqw-staffroom-intro {
	margin: 0 0 14px;
	font-size: 14px;
}

/* A quiz already in the staffroom reads as on, not as a button to press. */
.mcqw-btn-shared {
	background: #e3f5ea;
	border-color: #2e9e5b;
	color: #1f7a45;
}

/* Tabs, done with radio buttons so they need no JavaScript. */
.mcqw-tabs {
	margin-top: 14px;
}

.mcqw-tab-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mcqw-tab-label {
	display: inline-block;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #5a6b7d;
	cursor: pointer;
	border-bottom: 3px solid transparent;
}

.mcqw-tab-label:hover {
	color: #14578F;
}

/* The checked radio styles the label that follows it. */
.mcqw-tab-radio:checked + .mcqw-tab-label {
	color: #14578F;
	border-bottom-color: #14578F;
}

/* Keyboard users must be able to see where they are. */
.mcqw-tab-radio:focus-visible + .mcqw-tab-label {
	outline: 2px solid #14578F;
	outline-offset: 2px;
	border-radius: 4px;
}

.mcqw-tab-panel {
	display: none;
	padding-top: 18px;
	border-top: 1px solid #e3eaf0;
	margin-top: -3px;
}

/*
 * One rule per tab. A radio can only style siblings that come after it,
 * so every panel lives after every radio in the markup and each pairing
 * is named here.
 */
#mcqw-tab-people:checked ~ .mcqw-tab-people,
#mcqw-tab-add:checked ~ .mcqw-tab-add,
#mcqw-tab-quizzes:checked ~ .mcqw-tab-quizzes,
#mcqw-tab-settings:checked ~ .mcqw-tab-settings,
#mcqw-sub-ai-quiz:checked ~ .mcqw-sub-ai-quiz,
#mcqw-sub-ai:checked ~ .mcqw-sub-ai,
#mcqw-sub-users:checked ~ .mcqw-sub-users,
#mcqw-sub-lang:checked ~ .mcqw-sub-lang,
#mcqw-sub-colours:checked ~ .mcqw-sub-colours,
#mcqw-sub-brand:checked ~ .mcqw-sub-brand,
#mcqw-sub-music:checked ~ .mcqw-sub-music,
#mcqw-sub-guide:checked ~ .mcqw-sub-guide {
	display: block;
}

.mcqw-staffrow-actions {
	flex-basis: 100%;
	display: flex;
	gap: 14px;
	margin-top: 4px;
}

.mcqw-staffrow-you {
	font-size: 13px;
	color: #8697a6;
	font-style: italic;
}

.mcqw-staff-form .mcqw-field {
	max-width: 100%;
}

/* The fallback invitation link, for hosts that cannot send email. */
.mcqw-invite {
	display: block;
}

.mcqw-app .mcqw-invite-link.mcqw-invite-link {
	margin-top: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	background: var( --mcqw-glass-strong );

	/* Stays on the shared measure like every other field. A join URL is
	   long, but it is selected and copied rather than read, and letting
	   it run the full panel width was one of the things that made
	   Settings look ragged. */
	max-width: var( --mcqw-field-max, 100% );
}

/* A picture on a question, in the editor. */
.mcqw-imagerow {
	margin: 10px 0 4px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.mcqw-imagehint,
.mcqw-imagestatus {
	font-size: 13px;
	color: #5a6b7d;
}

.mcqw-imagestatus.is-bad {
	color: #c9403a;
	font-weight: 600;
}

.mcqw-imagepick {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
	padding: 10px;
	background: #f7fafc;
	border: 1px solid #dde5ec;
	border-radius: 8px;
}

/* Small on purpose. The editor is for checking the right picture is
   attached, not for admiring it. */
.mcqw-imagethumb {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 6px;
	background: var( --mcqw-glass-strong );
	border: 1px solid #e3eaf0;
}

.mcqw-imagemeta {
	flex: 1 1 220px;
	min-width: 0;
}

.mcqw-imagemeta .mcqw-lbl {
	margin-top: 0;
}

.mcqw-imagealt {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid #c3d2df;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

/* The question's picture, on the projector. */
.mcqw-stage-picture {
	display: flex;
	justify-content: center;
	margin: 0 0 18px;
	min-height: 0;
}

/*
 * Sized against the viewport height, not a fixed pixel count. A projector
 * is usually short and wide, and the thing that must never happen is the
 * picture pushing the answer options off the bottom of the screen where
 * the room cannot see them.
 */
.mcqw-stage-picture img {
	max-height: 38vh;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

/* With a picture up, the question text takes less room so both fit. */
.mcqw-stage-picture + .mcqw-stage-options {
	margin-top: 0;
}

/* On a phone the picture is never sent, but a narrow host window is
   still possible, so keep it sensible rather than enormous. */
@media ( max-width: 640px ) {

	.mcqw-stage-picture img {
		max-height: 30vh;
	}
}

/* A short screen is where this goes wrong first. */
@media ( max-height: 700px ) {

	.mcqw-stage-picture img {
		max-height: 30vh;
	}
}

/* A reminder of the picture, in the report. */
.mcqw-report-thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	vertical-align: middle;
	margin-left: 6px;
	border: 1px solid #e3eaf0;
}

/* Building a quiz from a spreadsheet. */
.mcqw-import-panel {
	margin-top: 22px;
}

.mcqw-import-step {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 0;
}

.mcqw-import-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #14578F;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	flex: none;
}

.mcqw-import-note {
	font-size: 13px;
	color: #5a6b7d;
}

.mcqw-import-file {
	font-size: 13px;
	max-width: 100%;
}

/* The preview, once a file has been read. */
.mcqw-import-preview {
	margin-top: 22px;
	padding: 20px;
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border: 2px solid #14578F;
	border-radius: 12px;
}

.mcqw-import-list {
	margin: 14px 0;
	padding-left: 22px;
	max-height: 320px;
	overflow-y: auto;
	font-size: 14px;
}

.mcqw-import-list li {
	padding: 4px 0;
	border-bottom: 1px solid #f0f4f8;
}

.mcqw-import-list li:last-child {
	border-bottom: 0;
}

.mcqw-import-answer {
	color: #1f7a45;
	font-size: 13px;
}

/* Rows that could not be used. Open by default: a problem folded away is
   a problem nobody reads. */
.mcqw-import-problems {
	margin: 12px 0;
	padding: 10px 12px;
	background: #fffbeb;
	border-left: 4px solid #e8a33d;
	border-radius: 6px;
	font-size: 14px;
}

.mcqw-import-problems > summary {
	cursor: pointer;
	font-weight: 600;
	color: #8a5a12;
}

.mcqw-import-problemlist {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.mcqw-import-problemlist li {
	padding: 4px 0;
	border-bottom: 1px solid #f5ead2;
}

.mcqw-import-problemlist li:last-child {
	border-bottom: 0;
}

.mcqw-import-rowno {
	display: inline-block;
	min-width: 62px;
	font-weight: 700;
	color: #8a5a12;
}

.mcqw-import-rowtext {
	color: #123;
}

.mcqw-import-why {
	color: #6b7885;
}

.mcqw-import-decide {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e3eaf0;
}

/* Choosing the language a game is played in. */
.mcqw-host-lang {
	margin: 18px 0;
	max-width: 320px;
}

.mcqw-host-lang .mcqw-help {
	margin-top: 6px;
}

.mcqw-lang-panel {
	margin-top: 18px;
}

/* The language field used to be pinned to 320px while every other field
   filled its panel, which was one of the reasons Settings looked ragged.
   It follows the shared width now. */
.mcqw-lang-panel .mcqw-field {
	max-width: 100%;
}

/* The two halves of the Quiz Wizard page. */
.mcqw-dash-tabs > .mcqw-tab-label {
	font-size: 15px;
	padding: 10px 18px;
}

/* Sub-tabs sit inside Settings, so they are quieter than the two above. */
.mcqw-subtabs {
	margin-top: 0;
}

.mcqw-subtabs > .mcqw-tab-label {
	font-size: 13px;
	padding: 6px 12px;
	border-bottom-width: 2px;
}

.mcqw-subtabs > .mcqw-tab-panel {
	border-top: 0;
	padding-top: 14px;
}

/*
 * A panel shown flat inside a tab. The tab has already decided what is
 * visible, so the heading is a heading rather than something to click.
 */
.mcqw-panel[data-mcqw-flat] {
	border: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	margin: 0;
}

.mcqw-panel-summary.is-flat {
	cursor: default;
	list-style: none;
	margin-bottom: 12px;
}

/*
 * The topic box on the AI quiz builder.
 *
 * Wider and taller than an ordinary field, because a useful prompt is
 * often two or three sentences: the year group, what has been covered
 * already, what to leave out. A single line hides all but the last few
 * words of that while it is being typed.
 */
.mcqw-app .mcqw-topic-box.mcqw-topic-box {
	width: 100%;
	max-width: var( --mcqw-field-max, 100% );
	min-height: 110px;
	padding: 12px;
	font-size: 15px;
	line-height: 1.5;
	font-family: inherit;

	/* Dragged taller if wanted, never wider: a box wider than its panel
	   would push the rest of the form sideways. */
	resize: vertical;
	box-sizing: border-box;
}

/* The field it sits in should use the full width of the panel. */
.mcqw-aiquiz-panel .mcqw-field:first-of-type {
	max-width: none;
}

/* The podium: the last thing the room sees. */
.mcqw-podium {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 14px;
	margin: 22px 0 26px;
	min-height: 34vh;
}

.mcqw-podium-step {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	flex: 0 1 190px;
	min-width: 0;
}

/* The winner in the middle and tallest, the way a real podium is. */
.mcqw-podium-1 {
	order: 2;
}

.mcqw-podium-2 {
	order: 1;
}

.mcqw-podium-3 {
	order: 3;
}

.mcqw-podium-block {
	width: 100%;
	border-radius: 12px 12px 0 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 10px;
	background: rgba(255, 255, 255, 0.18);
	transition: height 0.35s ease;
}

.mcqw-podium-1 .mcqw-podium-block {
	height: 15vh;
	background: rgba(255, 214, 92, 0.32);
}

.mcqw-podium-2 .mcqw-podium-block {
	height: 11vh;
	background: rgba(255, 255, 255, 0.24);
}

.mcqw-podium-3 .mcqw-podium-block {
	height: 8vh;
	background: rgba(255, 255, 255, 0.14);
}

.mcqw-podium-place {
	font-size: 30px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.75);
}

.mcqw-podium-people {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-bottom: 10px;
}

.mcqw-podium-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.2;
}

/*
 * Each place drops in as it is revealed. Short and once only: this plays
 * three times in a lesson, so anything longer becomes a wait.
 */
.mcqw-podium-step.is-shown .mcqw-podium-person {
	animation: mcqw-podium-drop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

@keyframes mcqw-podium-drop {

	from {
		opacity: 0;
		transform: translateY(-28px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* A room may include somebody who finds movement uncomfortable. */
@media ( prefers-reduced-motion: reduce ) {

	.mcqw-podium-step.is-shown .mcqw-podium-person {
		animation: none;
	}
}

.mcqw-podium-avatar {
	font-size: 44px;
}

.mcqw-podium-1 .mcqw-podium-avatar {
	font-size: 60px;
}

.mcqw-podium-name {
	font-size: 19px;
	font-weight: 700;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcqw-podium-1 .mcqw-podium-name {
	font-size: 24px;
}

.mcqw-podium-points {
	font-size: 15px;
	opacity: 0.85;
	font-variant-numeric: tabular-nums;
}

/* A place not yet revealed. */
.mcqw-podium-person.is-hidden .mcqw-podium-avatar {
	opacity: 0.3;
}

/* Everybody else, once the podium is done. */
.mcqw-bigboard-rest {
	max-width: 560px;
	margin: 0 auto 18px;
	font-size: 15px;
	opacity: 0.9;
}

/* A short screen is where a podium stops fitting first. */
@media ( max-height: 700px ) {

	.mcqw-podium {
		min-height: 26vh;
	}

	.mcqw-podium-1 .mcqw-podium-block {
		height: 11vh;
	}

	.mcqw-podium-2 .mcqw-podium-block {
		height: 8vh;
	}

	.mcqw-podium-3 .mcqw-podium-block {
		height: 6vh;
	}

	.mcqw-podium-avatar {
		font-size: 34px;
	}

	.mcqw-podium-1 .mcqw-podium-avatar {
		font-size: 44px;
	}
}

/* The class, filling up as answers arrive. */
.mcqw-faces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 14px auto 4px;
	max-width: 90%;
}

.mcqw-face {
	font-size: 26px;
	line-height: 1;
	padding: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);

	/*
	 * Waiting: dimmed and drained of colour, so the row reads as mostly
	 * empty at a glance and fills visibly. Never a name - a gap is
	 * information, a name beside "waiting" is a punishment.
	 */
	opacity: 0.28;
	filter: grayscale(1);
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.mcqw-face.is-in {
	opacity: 1;
	filter: none;
	background: rgba(255, 255, 255, 0.22);
	animation: mcqw-face-pop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.5) both;
}

@keyframes mcqw-face-pop {

	from {
		transform: scale(0.6);
	}

	60% {
		transform: scale(1.18);
	}

	to {
		transform: scale(1);
	}
}

/* Thirty faces on a short projector screen still have to fit. */
@media ( max-height: 700px ) {

	.mcqw-face {
		font-size: 20px;
		padding: 4px;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.mcqw-face.is-in {
		animation: none;
	}
}

/* The sound switch, in the lobby. */
.mcqw-soundbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin: 0 0 8px;
}

.mcqw-soundbtn {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: inherit;
}

/*
 * Clearly on rather than subtly on. A teacher glancing at this before a
 * lesson needs to know at once whether the room is about to make a noise.
 */
.mcqw-soundbtn.is-on {
	background: #2e9e5b;
	border-color: #2e9e5b;
	color: #fff;
}

/*
 * "Everyone has answered" — offered, not imposed.
 *
 * A strip below the question rather than a box over it. A panel appearing
 * in the middle of the screen while the teacher is reaching for a button
 * either gets dismissed by accident or swallows the click, and both are
 * worse than simply waiting for the clock.
 */
.mcqw-allin {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 14px auto 0;
	padding: 10px 18px;
	max-width: 100%;
	border-radius: 10px;
	background: rgba(46, 158, 91, 0.22);
	border: 1px solid rgba(46, 158, 91, 0.55);

	/* Slides in rather than appearing, so it is noticed without
	   snatching attention from the question. */
	animation: mcqw-allin-in 0.3s ease both;
}

.mcqw-allin[hidden] {
	display: none;
}

@keyframes mcqw-allin-in {

	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.mcqw-allin {
		animation: none;
	}
}

.mcqw-allin-text {
	font-size: 16px;
	font-weight: 600;
}

.mcqw-allin .mcqw-linkbtn {
	color: inherit;
	opacity: 0.75;
}
/* Who answered what
   --------------------------------------------------------------------------
   The panel under the reveal. Off until the teacher presses the button, so
   none of this is on screen during a normal game. */

.mcqw-whowrap {
	margin-top: 18px;
}

.mcqw-whobar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

.mcqw-whopanel[hidden] {
	display: none;
}

/* Columns that mirror the tally bars above, so the eye can join the two.
   They wrap rather than scroll: a projector has no horizontal scrollbar
   anybody can reach from the front of the room. */
.mcqw-who-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 12px;
}

.mcqw-who-group {
	padding: 12px;
	border: 1px solid var( --mcqw-line );
	border-radius: var( --mcqw-radius );
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	text-align: left;
}

/* The correct answer is outlined rather than filled. A green block behind
   thirty names makes the names harder to read, and the names are the
   reason the panel was opened. */
.mcqw-who-group.is-right {
	border-color: #16a34a;
	border-width: 2px;
	background: #f0fdf4;
}

.mcqw-who-group.is-missing {
	margin-top: 12px;
	border-style: dashed;
	background: var( --mcqw-bg );
}

.mcqw-who-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var( --mcqw-line );
}

.mcqw-who-swatch {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

/*
 * What an answer was worth, shown where the colour swatch normally sits.
 * A scored question has no positional colour to show, and the marks are
 * what the interviewer is reading the panel for.
 */
.mcqw-who-marks {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--mcqw-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	text-align: center;
}

.mcqw-who-marks.mcqw-tier-zero {
	background: var(--mcqw-line);
	color: var(--mcqw-muted);
}

.mcqw-who-label {
	flex: 1 1 auto;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.mcqw-who-count {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --mcqw-bg );
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.mcqw-who-group.is-right .mcqw-who-count {
	background: #dcfce7;
	color: #166534;
}

.mcqw-who-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mcqw-who-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var( --mcqw-bg );
	font-size: 14px;
	line-height: 1.3;
}

.mcqw-who-face {
	font-size: 15px;
}

.mcqw-who-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Quieter than the name. Useful when scanned deliberately, noise otherwise. */
.mcqw-who-time {
	color: var( --mcqw-muted );
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.mcqw-who-empty {
	margin: 0;
	color: var( --mcqw-muted );
	font-size: 14px;
	font-style: italic;
}

.mcqw-who-more {
	align-self: center;
	color: var( --mcqw-muted );
	font-size: 13px;
	font-weight: 600;
}

/* On a phone the grid becomes one column; a teacher checking the reveal on
   a handset should not get four unreadable slivers. */
@media ( max-width: 640px ) {

	.mcqw-who-grid {
		grid-template-columns: 1fr;
	}

	.mcqw-who-chip {
		font-size: 13px;
	}
}

@media ( prefers-contrast: more ) {

	.mcqw-who-group {
		border-width: 2px;
	}

	.mcqw-who-time {
		color: var( --mcqw-ink );
	}
}

/* Vibrant glass pass — surfaces that are not covered by the shared rule
   --------------------------------------------------------------------------
   These each had their own solid white background before. They are listed
   individually rather than folded into the shared selector because each
   needs a slightly different opacity: a row in a long table can afford to
   be lighter than a card that holds a form. */

.mcqw-app .mcqw-table {
	background: var( --mcqw-glass );
	-webkit-backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	backdrop-filter: blur( var( --mcqw-glass-blur ) ) saturate( 170% );
	border-radius: var( --mcqw-radius );
	box-shadow: var( --mcqw-shadow );
	/* No overflow:hidden here. It kept the corners rounded but also
	   clipped the row action menu, cutting off Delete on the last
	   row. The outer cells round their own corners instead. */
}

.mcqw-app .mcqw-chip,
.mcqw-app .mcqw-who-chip,
.mcqw-app .mcqw-miniboard-row {
	background: var( --mcqw-glass-strong );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	border-color: var( --mcqw-glass-line );
}

/* Headline figures on the report, same idea. */
.mcqw-app .mcqw-stat-value {
	background: linear-gradient( 135deg, var( --mcqw-blue-dark ), var( --mcqw-accent ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* A gradient behind text fails badly if the clip is unsupported: the text
   turns transparent and disappears. Only opt in where it works. */
@supports not ( ( -webkit-background-clip: text ) or ( background-clip: text ) ) {

	.mcqw-app .mcqw-stat-value {
		background: none;
		color: var( --mcqw-blue-dark );
	}
}

@media ( prefers-contrast: more ) {

	.mcqw-app .mcqw-stat-value {
		background: none;
		color: var( --mcqw-ink );
	}
}

/* Nothing above should move for anyone who has asked it not to. The
   colour and shadow changes stay, because those are how a hover reads as
   a hover; only the travel is dropped. */
@media ( prefers-reduced-motion: reduce ) {

	.mcqw-app .mcqw-btn,
	.mcqw-app .mcqw-btn:hover {
		transition: background 0.15s, border-color 0.15s, color 0.15s;
		transform: none;
	}
}

/* ==========================================================================
   Star-burst buttons — Start game, Host, Take a copy
   Adapted to blue from Uiverse.io by MuhammadHasann.

   READABILITY RULE: the label is solid white on a solid blue gradient BOTH
   at rest and on hover. The original effect fades the button to transparent
   with pale blue text on hover, which measured 1.22:1 against our light
   background — invisible. Hover here darkens the gradient instead, so
   contrast goes UP on hover (5.2:1 at rest, 6.7:1+ on hover), never down.

   STACKING RULE: .mcqw-starbtn must never gain overflow, transform, filter,
   backdrop-filter or opacity. Each makes it a stacking context, which traps
   the z-index:-5 stars in front of the background and shows them at rest.
   That is why this block explicitly undoes those from .mcqw-btn.
   ========================================================================== */

.mcqw-app .mcqw-starbtn {
	position: relative;
	display: inline-block;
	padding: 12px 32px;
	background: linear-gradient( 135deg, var( --mcqw-blue ), var( --mcqw-blue-dark ) );
	border: 3px solid var( --mcqw-blue-light );
	border-radius: var( --mcqw-radius );
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba( 37, 99, 235, 0.35 );
	transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out,
		box-shadow 0.3s ease-in-out;

	/* Undo the glass base. Both of these would reveal the stars. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transform: none;
}

.mcqw-app .mcqw-starbtn.mcqw-btn-sm {
	padding: 7px 20px;
	font-size: 14px;
	border-width: 2px;
	border-radius: var( --mcqw-radius-sm );
}

/* .mcqw-btn-go normally paints dark text on lime. On a star button the
   surface is blue, so the label has to stay white. */
.mcqw-app .mcqw-starbtn.mcqw-btn-go,
.mcqw-app .mcqw-starbtn.mcqw-btn-primary {
	color: #fff;
}

.mcqw-app .mcqw-starbtn:hover,
.mcqw-app .mcqw-starbtn:focus-visible {
	background: linear-gradient( 135deg, var( --mcqw-blue-dark ), var( --mcqw-deep ) );
	border-color: #fff;
	color: #fff;
	box-shadow: 0 0 26px rgba( 59, 130, 246, 0.75 );
	transform: none;
}

.mcqw-app .mcqw-starbtn:focus-visible {
	outline: 3px solid var( --mcqw-ink );
	outline-offset: 3px;
}

/* The label rides above BOTH the button background and the flying stars.
   The stars are lifted to z-index 2 on hover so they clear the button, so
   the label has to sit higher than that or a star crosses the words at the
   exact moment the teacher is reading them. Measured: at z-index 1 a star
   lands on top of "Start game" mid-flight. Keep this above the hover z. */
.mcqw-app .mcqw-starbtn-label {
	position: relative;
	z-index: 3;
}

.mcqw-app .mcqw-starbtn .mcqw-star {
	position: absolute;
	height: auto;
	z-index: -5;
	/*
	 * Gold rather than a pale yellow. The stars fly clear of the button
	 * and finish over the page wash, which is light, so a washed-out
	 * yellow disappears the moment it leaves the blue. Gold still reads
	 * as yellow on the button and keeps an edge against the background.
	 */
	fill: #ffd700;
	filter: drop-shadow( 0 0 0 #ffd700 );
}

.mcqw-app .mcqw-starbtn .mcqw-star-1 { top: 20%; left: 20%; width: 25px; transition: all 1s cubic-bezier( 0.05, 0.83, 0.43, 0.96 ); }
.mcqw-app .mcqw-starbtn .mcqw-star-2 { top: 45%; left: 45%; width: 15px; transition: all 1s cubic-bezier( 0, 0.4, 0, 1.01 ); }
.mcqw-app .mcqw-starbtn .mcqw-star-3 { top: 40%; left: 40%; width: 5px;  transition: all 1s cubic-bezier( 0, 0.4, 0, 1.01 ); }
.mcqw-app .mcqw-starbtn .mcqw-star-4 { top: 20%; left: 40%; width: 8px;  transition: all 0.8s cubic-bezier( 0, 0.4, 0, 1.01 ); }
.mcqw-app .mcqw-starbtn .mcqw-star-5 { top: 25%; left: 45%; width: 15px; transition: all 0.6s cubic-bezier( 0, 0.4, 0, 1.01 ); }
.mcqw-app .mcqw-starbtn .mcqw-star-6 { top: 5%;  left: 50%; width: 5px;  transition: all 0.8s ease; }

.mcqw-app .mcqw-starbtn:hover .mcqw-star-1,
.mcqw-app .mcqw-starbtn:focus-visible .mcqw-star-1 { top: -80%; left: -30%; filter: drop-shadow( 0 0 10px #ffc107 ); z-index: 2; }
.mcqw-app .mcqw-starbtn:hover .mcqw-star-2,
.mcqw-app .mcqw-starbtn:focus-visible .mcqw-star-2 { top: -25%; left: 10%;  filter: drop-shadow( 0 0 10px #ffc107 ); z-index: 2; }
.mcqw-app .mcqw-starbtn:hover .mcqw-star-3,
.mcqw-app .mcqw-starbtn:focus-visible .mcqw-star-3 { top: 55%;  left: 25%;  filter: drop-shadow( 0 0 10px #ffc107 ); z-index: 2; }
.mcqw-app .mcqw-starbtn:hover .mcqw-star-4,
.mcqw-app .mcqw-starbtn:focus-visible .mcqw-star-4 { top: 30%;  left: 80%;  filter: drop-shadow( 0 0 10px #ffc107 ); z-index: 2; }
.mcqw-app .mcqw-starbtn:hover .mcqw-star-5,
.mcqw-app .mcqw-starbtn:focus-visible .mcqw-star-5 { top: 25%;  left: 115%; filter: drop-shadow( 0 0 10px #ffc107 ); z-index: 2; }
.mcqw-app .mcqw-starbtn:hover .mcqw-star-6,
.mcqw-app .mcqw-starbtn:focus-visible .mcqw-star-6 { top: 5%;   left: 60%;  filter: drop-shadow( 0 0 10px #ffc107 ); z-index: 2; }

/* Less movement: keep the colour shift and the glow, drop the flight. */
@media ( prefers-reduced-motion: reduce ) {

	.mcqw-app .mcqw-starbtn,
	.mcqw-app .mcqw-starbtn .mcqw-star {
		transition: none;
	}

	.mcqw-app .mcqw-starbtn .mcqw-star {
		display: none;
	}
}

/* High contrast: flat navy, white label, hard border, no sparkle. */
@media ( prefers-contrast: more ) {

	.mcqw-app .mcqw-starbtn,
	.mcqw-app .mcqw-starbtn:hover,
	.mcqw-app .mcqw-starbtn:focus-visible {
		background: var( --mcqw-deep );
		border-color: var( --mcqw-ink );
		color: #fff;
		box-shadow: none;
	}

	.mcqw-app .mcqw-starbtn .mcqw-star {
		display: none;
	}
}

/* Same story for the no-glass escape hatch and for print. */
body.mcqw-noglass .mcqw-app .mcqw-starbtn .mcqw-star {
	display: none;
}

@media print {

	.mcqw-app .mcqw-starbtn .mcqw-star {
		display: none;
	}
}

/* ==========================================================================
   Colour picker
   ========================================================================== */

/*
 * A fieldset is not a plain block: browsers give it its own intrinsic
 * width rules, which left it sitting 1px wider than the divs above it and
 * knocked the column of fields out of line. min-inline-size pins it back.
 */
.mcqw-app .mcqw-theme-field {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
	min-inline-size: 0;
	inline-size: 100%;
	box-sizing: border-box;
}

.mcqw-app .mcqw-theme-field legend {
	padding: 0;
	margin-bottom: 8px;
}

.mcqw-app .mcqw-theme-option {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	margin-bottom: 6px;
	border: 1px solid var( --mcqw-glass-line );
	border-radius: var( --mcqw-radius-sm );
	background: var( --mcqw-glass-soft );
	cursor: pointer;
}

.mcqw-app .mcqw-theme-option:hover {
	background: var( --mcqw-glass-strong );
}

/* The checked state has to be visible without relying on the radio dot
   alone: on a row this wide the dot is easy to miss. */
.mcqw-app .mcqw-theme-option:has( input:checked ) {
	border-color: var( --mcqw-blue );
	box-shadow: 0 0 0 2px var( --mcqw-blue ) inset;
	background: var( --mcqw-glass-strong );
}

/* :has() is recent. Without it the radio dot still works, so this is a
   progressive nicety rather than something to fall back for. */
.mcqw-app .mcqw-theme-option input {
	flex: 0 0 auto;
	margin: 0;
}

.mcqw-app .mcqw-theme-option input:focus-visible {
	outline: 3px solid var( --mcqw-ink );
	outline-offset: 2px;
}

.mcqw-app .mcqw-theme-swatch {
	display: flex;
	flex: 0 0 auto;
	width: 72px;
	height: 26px;
	border-radius: 6px;
	overflow: hidden;
	/* Follows the palette rather than being a fixed dark hairline, so
	   the swatch still has an edge on a dark palette. */
	border: 1px solid var( --mcqw-glass-line );
}

.mcqw-app .mcqw-theme-swatch span {
	flex: 1 1 0;
}

.mcqw-app .mcqw-theme-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mcqw-app .mcqw-theme-name {
	font-weight: 700;
}

.mcqw-app .mcqw-theme-note {
	font-size: 13px;
	color: var( --mcqw-muted );
}

@media ( max-width: 480px ) {

	.mcqw-app .mcqw-theme-swatch {
		width: 48px;
	}
}

/* ==========================================================================
   Row "More" menu
   Keeps Edit / Host / Results on the row and folds the occasional actions
   - share, copy, copy to translate, delete - out of sight until asked for.
   ========================================================================== */

.mcqw-app .mcqw-more {
	position: relative;
	display: inline-block;
}

.mcqw-app .mcqw-more-toggle {
	list-style: none;
	user-select: none;
}

/* Safari still draws the default triangle without this. */
.mcqw-app .mcqw-more-toggle::-webkit-details-marker {
	display: none;
}

.mcqw-app .mcqw-more-toggle::after {
	content: " \25BE";
}

.mcqw-app .mcqw-more[open] .mcqw-more-toggle::after {
	content: " \25B4";
}

/*
 * The open menu floats over the rows beneath it, which means it sits on
 * top of the next row's buttons. Pointer events are therefore blocked on
 * the overlay area only while a menu is open, so a click aimed at the row
 * below cannot land on Delete by mistake - it closes the menu instead.
 * See .mcqw-more[open]::before below.
 */
.mcqw-app .mcqw-more-menu {
	position: absolute;
	right: 0;
	z-index: 30;
	min-width: 190px;
	margin-top: 6px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	background: var( --mcqw-solid );
	border: 1px solid var( --mcqw-glass-line );
	border-radius: var( --mcqw-radius-sm );
	box-shadow: var( --mcqw-shadow-lg );
}

/*
 * Inside the menu these stop being pills and become rows. Full width,
 * square, left aligned, no border - so it reads as a list of choices
 * rather than a heap of loose buttons.
 */
.mcqw-app .mcqw-more-menu .mcqw-btn {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 9px 12px;
	font-weight: 600;
}

.mcqw-app .mcqw-more-menu .mcqw-btn:hover {
	background: var( --mcqw-glass-soft );
	transform: none;
	box-shadow: none;
}

/* The inline forms each wrap one button; they must not add spacing. */
.mcqw-app .mcqw-more-menu .mcqw-inline-form {
	display: block;
	margin: 0;
}

/* Delete stays red, and sits apart so it is never the button you hit
   by accident on the way to Copy. */
.mcqw-app .mcqw-more-menu .mcqw-btn-danger {
	color: var( --mcqw-red );
	margin-top: 4px;
	border-top: 1px solid var( --mcqw-line );
	border-radius: 0 0 8px 8px;
}

.mcqw-app .mcqw-more-menu .mcqw-btn-danger:hover {
	background: rgba( 220, 38, 38, 0.1 );
	color: var( --mcqw-red );
}

/*
 * A full-page shield behind the open menu. Any click outside the menu
 * hits this instead of whatever is underneath, so the first click always
 * just closes the menu - it can never also press a button on another row.
 * The JS handler then removes the open attribute as normal.
 */
.mcqw-app .mcqw-more[open]::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 20;
	background: transparent;
}

/* On a narrow screen the table is already stacked, so a floating menu
   would hang off the edge. Let it sit in the flow instead. */
@media ( max-width: 640px ) {

	.mcqw-app .mcqw-more-menu {
		position: static;
		min-width: 0;
		box-shadow: none;
	}

	/* In the flow there is nothing to shield against. */
	.mcqw-app .mcqw-more[open]::before {
		display: none;
	}
}

/* Rounded table corners without clipping anything that overflows a row. */
.mcqw-app .mcqw-table tr:first-child th:first-child { border-top-left-radius: var( --mcqw-radius ); }
.mcqw-app .mcqw-table tr:first-child th:last-child { border-top-right-radius: var( --mcqw-radius ); }
.mcqw-app .mcqw-table tr:last-child td:first-child { border-bottom-left-radius: var( --mcqw-radius ); }
.mcqw-app .mcqw-table tr:last-child td:last-child { border-bottom-right-radius: var( --mcqw-radius ); }

/* ==========================================================================
   Settings panels — consistent spacing
   The panels come from five different classes, so their fields are lined
   up here rather than in each one.
   ========================================================================== */

.mcqw-app .mcqw-panel-body .mcqw-field {
	margin-bottom: 18px;
}

.mcqw-app .mcqw-panel-body .mcqw-field:last-of-type {
	margin-bottom: 14px;
}

/* Intro paragraphs sat tight against the field below them in some panels
   and loose in others, because each panel set its own margin. */
.mcqw-app .mcqw-panel-body .mcqw-panel-intro {
	margin: 0 0 16px;
	max-width: 100%;
}

/* The picker rows are the one place a "field" is a list rather than a
   single control, so they get the full width instead of the measure. */
.mcqw-app .mcqw-theme-field .mcqw-theme-option {
	max-width: 100%;
}

/*
 * The Branding tab.
 *
 * The logo preview has to cope with whatever someone uploads: a wide
 * banner, a small square, or something enormous. It is boxed at a fixed
 * height with object-fit so the panel cannot be stretched out of shape by
 * a large file, and the box is checkerboarded so a see-through logo is
 * actually visible rather than white-on-white.
 */
.mcqw-brand-preview {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.mcqw-brand-preview-img {
	display: block;
	width: auto;
	max-width: 260px;
	height: 64px;
	object-fit: contain;
	object-position: left center;
	padding: 8px 12px;
	border: 1px solid var( --mcqw-line );
	border-radius: var( --mcqw-radius-sm );
	background-color: var( --mcqw-solid );
	background-image:
		linear-gradient( 45deg, rgba( 15, 23, 42, 0.07 ) 25%, transparent 25% ),
		linear-gradient( -45deg, rgba( 15, 23, 42, 0.07 ) 25%, transparent 25% ),
		linear-gradient( 45deg, transparent 75%, rgba( 15, 23, 42, 0.07 ) 75% ),
		linear-gradient( -45deg, transparent 75%, rgba( 15, 23, 42, 0.07 ) 75% );
	background-size: 14px 14px;
	background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.mcqw-brand-preview-note {
	font-size: 13px;
}

/* The Setup guide tab. */
.mcqw-guide-list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.mcqw-guide-list li {
	padding: 9px 0;
	border-bottom: 1px solid var( --mcqw-line );
}

.mcqw-guide-list li:last-child {
	border-bottom: 0;
}

.mcqw-guide-part {
	font-weight: 600;
}

/*
 * The Music tab.
 *
 * Each row is name, player, remove. On a narrow screen the row wraps and
 * the player takes the full width, because a squeezed audio control is
 * unusable on a phone.
 */
.mcqw-note {
	margin: 0 0 16px;
	padding: 11px 14px;
	font-size: 14px;
	color: var( --mcqw-ink );
	background: var( --mcqw-glass-strong );
	border: 1px solid var( --mcqw-line );
	border-left: 3px solid var( --mcqw-accent );
	border-radius: 0 var( --mcqw-radius-sm ) var( --mcqw-radius-sm ) 0;
}

.mcqw-music-list {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.mcqw-music-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var( --mcqw-line );
}

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

.mcqw-app .mcqw-music-rename {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
	min-width: 0;
	margin: 0;
}

/*
 * The name box is the flexible part of the row. Without min-width:0 a
 * flex item refuses to shrink below its content and pushes the buttons
 * off the edge.
 */
.mcqw-app .mcqw-music-rename .mcqw-music-name.mcqw-music-name {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: none;
}

.mcqw-music-player {
	flex: 0 1 260px;
	min-width: 0;
	height: 36px;
}

.mcqw-app .mcqw-music-remove {
	flex: 0 0 auto;
	margin: 0;
}

.mcqw-music-empty {
	margin: 0 0 20px;
}

@media ( max-width: 640px ) {

	.mcqw-music-row {
		gap: 8px;
	}

	.mcqw-app .mcqw-music-rename {
		flex: 1 1 100%;
	}

	.mcqw-music-player {
		flex: 1 1 100%;
		width: 100%;
	}
}

/*
 * The music picker, next to the sound switch in the lobby.
 *
 * The soundbar is a right-aligned flex row, so the picker sits beside
 * the button and the pair keep to the same edge. On the projector this
 * is small print in the corner, which is right: it is set once, before
 * anyone is watching.
 */
.mcqw-musicbar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.mcqw-musiclabel {
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 0.85;
	white-space: nowrap;
}

/*
 * The lobby sits on the deep header colour, so the dropdown has to be
 * given the same treatment as the sound button rather than inheriting
 * the pale form styling, which would glare.
 */
.mcqw-app .mcqw-musicpick {
	width: auto;
	max-width: 190px;
	padding: 5px 10px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--mcqw-radius-sm);
	color: inherit;
	font-size: 0.9rem;
}

/*
 * The closed dropdown is on a dark background but the open list is
 * drawn by the operating system on a white one, so the options need an
 * ink colour of their own or they come out white on white.
 */
.mcqw-app .mcqw-musicpick option {
	color: var(--mcqw-ink);
	background: var(--mcqw-solid);
}

.mcqw-musicvol {
	display: flex;
	align-items: center;
}

.mcqw-musicvol[hidden] {
	display: none;
}

.mcqw-app .mcqw-musicrange {
	width: 90px;
	max-width: 90px;
	padding: 0;
	margin: 0;
	accent-color: var(--mcqw-accent);
	background: none;
	border: 0;
	cursor: pointer;
}

/*
 * Below this the lobby is a phone or a narrow projector window, and a
 * label, a dropdown and a slider will not sit on one line with the
 * sound button. The bar wraps instead of squeezing the dropdown to
 * nothing.
 */
@media ( max-width: 640px ) {

	.mcqw-soundbar {
		flex-wrap: wrap;
		gap: 8px;
	}

	.mcqw-app .mcqw-musicpick {
		max-width: 150px;
	}

	.mcqw-app .mcqw-musicrange {
		width: 70px;
	}
}

/*
 * Scored-choice answers in the editor.
 *
 * The marks are shown, not chosen: an answer is worth what its position
 * says it is worth, so there is no control here that could disagree
 * with the order the answers are in.
 */
.mcqw-tier {
	flex: 0 0 auto;
	min-width: 30px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--mcqw-blue);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/*
 * The worthless answer is deliberately grey rather than red. It is a
 * plausible answer that earns nothing, not a mistake, and colouring it
 * like an error would misrepresent what the teacher is setting up.
 */
.mcqw-opt-scored.mcqw-opt-3 .mcqw-tier {
	background: var(--mcqw-muted);
}

/*
 * The four rows inherit the option palette by default, which is meant
 * for unrelated choices. Here the answers are ranked, so they run from
 * the strong colour down to a muted one.
 */
.mcqw-opt-scored.mcqw-opt-0 {
	border-left-color: var(--mcqw-blue);
}

.mcqw-opt-scored.mcqw-opt-1 {
	border-left-color: var(--mcqw-blue-light);
}

.mcqw-opt-scored.mcqw-opt-2 {
	border-left-color: var(--mcqw-line);
}

.mcqw-opt-scored.mcqw-opt-3 {
	border-left-color: var(--mcqw-muted);
}

/*
 * Marks on the reveal chart.
 *
 * The badge reuses .mcqw-tier from the editor, so a mark looks the same
 * wherever it appears. Only the zero needs its own treatment here: on
 * the projector it sits under a bar that may still be the most popular
 * answer in the room, which is exactly the thing worth discussing.
 */
.mcqw-tally-label .mcqw-tier {
	display: inline-block;
	margin-right: 4px;
	vertical-align: middle;
}

.mcqw-tier-zero {
	background: var(--mcqw-muted);
}

/*
 * Ranked colours for a scored reveal.
 *
 * The ordinary tile palette (red, blue, amber, green) says "four
 * unrelated choices". Here the answers are ranked, and those colours
 * would actively mislead: the red tile might be the 7-mark answer and
 * the green one worth nothing. One colour at three strengths says
 * "better and worse" instead of "different".
 */
.mcqw-scored-top {
	background: var(--mcqw-blue);
	color: #fff;
}

.mcqw-scored-mid {
	background: var(--mcqw-blue-light);
	color: var(--mcqw-ink);
}

.mcqw-scored-zero {
	background: var(--mcqw-line);
	color: var(--mcqw-ink);
}