/*
 * W3Colleges GATE quiz and test series.
 *
 * Loaded only on GATE screens (handle `w3colleges-gate`, dependency
 * `w3colleges-site`, wp_enqueue_scripts priority 64). Everything here is
 * scoped to .w3c-gate / .w3c-exam / .w3c-gq so it can never leak into the
 * article, practice or home layers.
 *
 * Written desktop-first, like the rest of the site: the base rules are the
 * wide layout and the narrow ones subtract inside max-width queries. There is
 * no dark mode anywhere on this site, so none is introduced here.
 *
 * Contents
 *   1  Tokens and module scope
 *   2  Primitives: focus, buttons, chips, tags, breadcrumbs, empty states
 *   3  Cards, stats, meters, tooltips, tables, pagination
 *   4  /quiz/ hub
 *   5  Exam, subject and year archives
 *   6  Paper page (practice mode)
 *   7  Question card (.w3c-gq) and its review state
 *   8  Single question page
 *   9  Test series: catalogue and landing
 *  10  Account panel ("My Tests")
 *  11  Exam mode: chrome suppression
 *  12  Exam environment shell
 *  13  Question palette, legend and rail
 *  14  Exam dialogs, calculator, shortcuts
 *  15  Result and analysis page
 *  16  Narrow layouts
 *  17  Reduced motion
 */

/* =========================================================================
 * 1. Tokens and module scope
 *
 * --w3c-* comes from w3colleges.css :root. The --lc-* practice palette is
 * declared on .w3c-ps, not globally, so the block below is a copy for this
 * module only (the .w3c-lc font override is deliberately NOT copied: the
 * GATE screens keep Source Sans 3 / Nunito).
 * ======================================================================= */
.w3c-gate,
.w3c-exam {
	/* Practice palette (copied from .w3c-ps, w3colleges.css). */
	--lc-ink: #262626;
	--lc-text: #3c3c43;
	--lc-muted: rgba(60, 60, 67, 0.6);
	--lc-line: rgba(0, 0, 0, 0.08);
	--lc-fill: #f2f3f4;
	--lc-fill-2: #e8e9eb;
	--lc-zebra: #f7f8fa;

	/* Exam status colours (spec §9). */
	--w3c-gate-answered: #15803d;
	--w3c-gate-not-answered: #b91c1c;
	--w3c-gate-marked: #6d28d9;
	--w3c-gate-not-visited: #cbd5e1;
	--w3c-gate-answered-soft: #e7f6ec;
	--w3c-gate-not-answered-soft: #fdeceb;
	--w3c-gate-marked-soft: #f1ebfd;
	--w3c-gate-warning: #b45309;

	/* Module geometry. */
	--w3c-gate-radius: 12px;
	--w3c-gate-radius-sm: 8px;
	--w3c-gate-gap: 18px;
	--w3c-gate-tile: 40px;
}

.w3c-gate {
	font-family: var(--w3c-font-ui);
	font-size: 16px;
	line-height: 1.6;
	color: var(--w3c-text);
}

/* The theme box-sizes the header and the home layer only; this module needs
 * the same footing or a full-width button inside a padded panel overflows. */
.w3c-gate,
.w3c-gate *,
.w3c-gate *::before,
.w3c-gate *::after {
	box-sizing: border-box;
}

main.w3c-gate {
	display: block;
	width: 100%;
	padding-bottom: 60px;
	background: var(--w3c-surface-soft);
}

/* The hub and the series catalogue reuse the home sections, which bring
 * their own padding; the record pages get their own rhythm. */
main.w3c-gate--test,
main.w3c-gate--question,
main.w3c-gate--archive,
main.w3c-gate--series-single,
main.w3c-gate--result {
	padding-top: 24px;
}

.w3c-gate h1,
.w3c-gate h2,
.w3c-gate h3,
.w3c-gate h4 {
	clear: none;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	letter-spacing: -0.01em;
}

.w3c-gate h1 {
	margin: 0 0 10px;
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 750;
	line-height: 1.22;
}

.w3c-gate h2 {
	margin: 0 0 12px;
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 700;
	line-height: 1.28;
}

.w3c-gate h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.32;
}

.w3c-gate p {
	margin: 0 0 12px;
}

.w3c-gate a {
	text-decoration: none;
}

/*
 * Content links only. Component anchors — buttons, chips, cards, tiles —
 * keep the colour their own rule sets, so a blanket link colour can never
 * win a specificity fight with them (that is how a primary button ends up
 * with teal text on a teal background).
 */
.w3c-gate__intro a,
.w3c-gate__archive-intro a,
.w3c-gate__source a,
.w3c-gate__row-meta a,
.w3c-gate__more a,
.w3c-gate__related-list a,
.w3c-gate__related-all,
.w3c-gate__account-more a,
.w3c-gate__card-link,
.w3c-gate__table a,
.w3c-gq__body a,
.w3c-gq__explanation a,
.w3c-gq__discuss,
.w3c-exam__question a {
	color: var(--w3c-brand);
}

.w3c-gate__intro a:hover,
.w3c-gate__archive-intro a:hover,
.w3c-gate__source a:hover,
.w3c-gate__row-meta a:hover,
.w3c-gate__more a:hover,
.w3c-gate__related-list a:hover,
.w3c-gate__related-all:hover,
.w3c-gate__account-more a:hover,
.w3c-gate__card-link:hover,
.w3c-gate__table a:hover,
.w3c-gq__body a:hover,
.w3c-gq__explanation a:hover,
.w3c-gq__discuss:hover,
.w3c-exam__question a:hover {
	color: var(--w3c-brand-dark);
	text-decoration: underline;
}

.w3c-gate ul,
.w3c-gate ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-gate img {
	max-width: 100%;
	height: auto;
}

/* Anchored sections must clear the sticky site header. */
.w3c-gate section[id],
.w3c-gate [id^="w3c-gate-"],
.w3c-gate [id^="w3c-series-"] {
	scroll-margin-top: calc(var(--w3c-header-height) + 20px);
}

/* =========================================================================
 * 2. Primitives
 *
 * The theme has no global :focus-visible rule, so this module declares its
 * own on every interactive element. An exam is keyboard-driven; the ring is
 * not optional.
 * ======================================================================= */
.w3c-gate a:focus-visible,
.w3c-gate button:focus-visible,
.w3c-gate input:focus-visible,
.w3c-gate select:focus-visible,
.w3c-gate textarea:focus-visible,
.w3c-gate summary:focus-visible,
.w3c-gate label:focus-visible,
.w3c-gate [tabindex]:focus-visible,
.w3c-exam a:focus-visible,
.w3c-exam button:focus-visible,
.w3c-exam input:focus-visible,
.w3c-exam select:focus-visible,
.w3c-exam textarea:focus-visible,
.w3c-exam summary:focus-visible,
.w3c-exam [tabindex]:focus-visible,
.w3c-gq a:focus-visible,
.w3c-gq button:focus-visible,
.w3c-gq input:focus-visible {
	outline: 3px solid var(--w3c-focus);
	outline-offset: 3px;
}

/* A radio or checkbox inside a styled option label is visually replaced, so
 * the ring has to travel to the label. */
.w3c-gq__option:focus-within,
.w3c-exam__option:focus-within {
	outline: 3px solid var(--w3c-focus);
	outline-offset: 3px;
}

/* Buttons ---------------------------------------------------------------
 * .w3c-btn / .w3c-btn--primary / .w3c-btn--block exist in w3colleges.css.
 * --ghost, --danger, --sm and the icon sizing do not. */
.w3c-gate .w3c-btn,
.w3c-exam .w3c-btn {
	cursor: pointer;
}

.w3c-btn--ghost {
	border-color: var(--w3c-border-strong);
	background: var(--w3c-surface);
	color: var(--w3c-ink);
}

.w3c-btn--ghost:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-btn--danger {
	border-color: var(--w3c-gate-not-answered);
	background: var(--w3c-gate-not-answered);
	color: #fff;
}

.w3c-btn--danger:hover {
	border-color: #991b1b;
	background: #991b1b;
	color: #fff;
}

.w3c-btn--sm {
	min-height: 36px;
	padding: 0 14px;
	font-size: 13.5px;
}

.w3c-gate .w3c-btn .w3c-icon,
.w3c-exam .w3c-btn .w3c-icon {
	width: 17px;
	height: 17px;
	stroke-width: 2;
}

.w3c-gate .w3c-btn[disabled],
.w3c-gate .w3c-btn.is-busy,
.w3c-exam .w3c-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Inline SVG safety: an icon without the shared class still has to be sized. */
.w3c-gate svg:not([class]),
.w3c-exam svg:not([class]) {
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* Chips and tags -------------------------------------------------------- */
.w3c-gate__tag,
.w3c-gate__chip,
.w3c-gq__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--w3c-border);
	border-radius: 999px;
	background: var(--w3c-fill);
	color: var(--w3c-muted);
	font-family: var(--w3c-font-ui);
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

a.w3c-gate__tag:hover,
a.w3c-gate__chip:hover,
a.w3c-gq__chip:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gate__chip--exam,
.w3c-gq__chip--type {
	border-color: var(--w3c-green-line);
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-gq__chip--marks {
	border-color: var(--w3c-border-strong);
	background: var(--w3c-surface);
	color: var(--w3c-text);
}

.w3c-gate__chip--subject,
.w3c-gq__chip--subject {
	border-color: var(--w3c-border-strong);
	background: var(--w3c-surface);
	color: var(--w3c-ink);
}

.w3c-gate__chip--access.is-free {
	border-color: #bfe3cd;
	background: var(--w3c-gate-answered-soft);
	color: var(--w3c-gate-answered);
}

.w3c-gate__chip--access.is-login {
	border-color: #ead9b4;
	background: #fdf6e7;
	color: var(--w3c-gate-warning);
}

.w3c-gate__chip--access.is-series {
	border-color: #ddd2f7;
	background: var(--w3c-gate-marked-soft);
	color: var(--w3c-gate-marked);
}

.w3c-gate__tag--owned {
	border-color: #bfe3cd;
	background: var(--w3c-gate-answered-soft);
	color: var(--w3c-gate-answered);
}

.w3c-gate__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

/* Breadcrumbs (the theme has none) -------------------------------------- */
.w3c-gate__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	color: var(--w3c-muted);
	font-size: 13px;
	font-weight: 600;
}

.w3c-gate__crumbs a {
	color: var(--w3c-muted);
}

.w3c-gate__crumbs a:hover {
	color: var(--w3c-brand-dark);
}

.w3c-gate__crumbs span {
	color: var(--w3c-border-strong);
}

/* Module navigation strip ----------------------------------------------- */
.w3c-gate__nav {
	margin: 0 0 22px;
	border-bottom: 1px solid var(--w3c-border);
}

.w3c-gate__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.w3c-gate__nav a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	border-bottom: 2px solid transparent;
	color: var(--w3c-text);
	font-size: 14px;
	font-weight: 650;
}

.w3c-gate__nav a:hover {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gate__nav .is-active a {
	border-bottom-color: var(--w3c-brand);
	color: var(--w3c-brand-dark);
}

.w3c-gate__nav .w3c-icon {
	width: 16px;
	height: 16px;
}

/* Empty states and notes ------------------------------------------------- */
.w3c-gate__empty {
	margin: 0;
	padding: 28px 20px;
	border: 1px dashed var(--w3c-border-strong);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-fill);
	color: var(--w3c-muted);
	text-align: center;
}

.w3c-gate__source {
	margin: 10px 0 0;
	color: var(--w3c-muted);
	font-size: 13.5px;
	word-break: break-word;
}

/* Locked notice (access control) ---------------------------------------- */
.w3c-gate__locked {
	margin: 0 0 24px;
	padding: 28px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-fill);
	text-align: center;
}

.w3c-gate__locked h2,
.w3c-gate__locked h3 {
	margin: 0 0 8px;
	font-size: 20px;
}

.w3c-gate__locked p {
	margin: 0 auto 14px;
	max-width: 56ch;
	color: var(--w3c-text);
}

.w3c-gate__locked-icon {
	margin: 0 0 10px;
	color: var(--w3c-gate-marked);
}

.w3c-gate__locked-icon .w3c-icon {
	width: 28px;
	height: 28px;
}

.w3c-gate__locked-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

.w3c-gate__locked-reason {
	margin: 14px 0 0;
	color: var(--w3c-muted);
	font-size: 13px;
}

/* Sign-in / call-to-action bands ---------------------------------------- */
.w3c-gate__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 28px 0 0;
	padding: 26px 28px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-gate__band h2 {
	margin: 0 0 6px;
	font-size: 22px;
}

.w3c-gate__band p {
	margin: 0;
	max-width: 62ch;
	color: var(--w3c-text);
}

.w3c-gate__band .w3c-btn {
	flex: 0 0 auto;
}

.w3c-gate__band--signin {
	border-color: var(--w3c-green-line);
	background: var(--w3c-brand-soft);
	box-shadow: none;
}

/* Footer-ish "more" navigation ------------------------------------------ */
.w3c-gate__more {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--w3c-border);
	font-size: 14px;
	font-weight: 650;
}

/* =========================================================================
 * 3. Cards, stats, meters, tooltips, tables
 * ======================================================================= */
.w3c-gate__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.w3c-gate__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
	transition: box-shadow 160ms ease, border-color 160ms ease;
}

.w3c-gate__card:hover {
	border-color: var(--w3c-border-strong);
	box-shadow: var(--w3c-card-shadow-hover);
}

.w3c-gate__card.is-owned,
.w3c-gate__card.is-enrolled {
	border-color: var(--w3c-green-line);
}

.w3c-gate__card.is-locked {
	background: var(--w3c-fill);
}

.w3c-gate__card-head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.w3c-gate__card-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.34;
}

.w3c-gate__card-title a {
	color: var(--w3c-ink);
}

.w3c-gate__card-title a:hover {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gate__card-lede {
	margin: 0;
	color: var(--w3c-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

.w3c-gate__card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	color: var(--w3c-muted);
	font-size: 13.5px;
}

.w3c-gate__card-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	color: var(--w3c-muted);
	font-size: 13.5px;
	font-weight: 600;
}

.w3c-gate__card-facts li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.w3c-gate__card-facts .w3c-icon {
	width: 16px;
	height: 16px;
	color: var(--w3c-brand);
}

.w3c-gate__card-state {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--w3c-muted);
}

.w3c-gate__card-state.is-completed {
	color: var(--w3c-gate-answered);
}

.w3c-gate__card-state.is-in_progress {
	color: var(--w3c-gate-warning);
}

.w3c-gate__card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
}

.w3c-gate__card-link {
	font-size: 13.5px;
	font-weight: 650;
}

/* Feature bullets -------------------------------------------------------- */
.w3c-gate__features {
	display: grid;
	gap: 8px;
	margin: 0;
	font-size: 14.5px;
}

.w3c-gate__features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	color: var(--w3c-text);
}

.w3c-gate__features .w3c-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	color: var(--w3c-brand);
}

/* Price ------------------------------------------------------------------ */
.w3c-gate__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-family: var(--w3c-font-display);
}

.w3c-gate__price b,
.w3c-gate__price strong {
	color: var(--w3c-ink);
	font-size: 26px;
	font-weight: 750;
	line-height: 1.1;
}

.w3c-gate__price del {
	color: var(--w3c-muted);
	font-size: 15px;
	font-weight: 600;
}

.w3c-gate__price--free {
	color: var(--w3c-gate-answered);
	font-size: 18px;
	font-weight: 750;
}

/* Stat strips ------------------------------------------------------------
 * Two shapes carry this class: the hub's <ul><li><b>+<span> and the
 * renderer's <dl> of .w3c-gate__stat blocks. Both are styled. */
.w3c-gate__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
}

ul.w3c-gate__stats > li,
.w3c-gate__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 132px;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

ul.w3c-gate__stats > li > b,
.w3c-gate__stat dd {
	margin: 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 24px;
	font-weight: 750;
	line-height: 1.15;
}

ul.w3c-gate__stats > li > span,
.w3c-gate__stat dt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--w3c-muted);
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.w3c-gate__stat dt .w3c-icon {
	width: 15px;
	height: 15px;
	color: var(--w3c-brand);
}

.w3c-gate__stat dd small {
	display: block;
	color: var(--w3c-muted);
	font-family: var(--w3c-font-ui);
	font-size: 12px;
	font-weight: 600;
}

/* Facts list (paper header, series header) ------------------------------- */
.w3c-gate__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 16px 0 0;
}

.w3c-gate__facts li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.w3c-gate__facts b {
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 22px;
	font-weight: 750;
	line-height: 1.15;
}

.w3c-gate__facts span {
	color: var(--w3c-muted);
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Progress meters (none exist in the theme) ------------------------------ */
.w3c-gate__meter {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: var(--lc-fill-2);
}

.w3c-gate__meter-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--w3c-brand);
	transition: width 320ms ease;
}

.w3c-gate__meter-fill.is-correct {
	background: var(--w3c-gate-answered);
}

.w3c-gate__meter-fill.is-incorrect {
	background: var(--w3c-gate-not-answered);
}

.w3c-gate progress {
	width: 100%;
	height: 10px;
	border: 0;
	border-radius: 999px;
	background: var(--lc-fill-2);
	-webkit-appearance: none;
	appearance: none;
}

.w3c-gate progress::-webkit-progress-bar {
	border-radius: 999px;
	background: var(--lc-fill-2);
}

.w3c-gate progress::-webkit-progress-value {
	border-radius: 999px;
	background: var(--w3c-brand);
}

.w3c-gate progress::-moz-progress-bar {
	border-radius: 999px;
	background: var(--w3c-brand);
}

/* Tooltips (none exist in the theme) ------------------------------------- */
.w3c-gate__tip,
.w3c-exam__tip {
	position: relative;
}

.w3c-gate__tip[data-tip]::after,
.w3c-exam__tip[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 30;
	max-width: 240px;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--w3c-ink);
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 4px);
	pointer-events: none;
	transition: opacity 140ms ease, transform 140ms ease;
}

.w3c-gate__tip[data-tip]:hover::after,
.w3c-gate__tip[data-tip]:focus-visible::after,
.w3c-exam__tip[data-tip]:hover::after,
.w3c-exam__tip[data-tip]:focus-visible::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Tables -----------------------------------------------------------------
 * .w3c-subs is the only styled table in the theme and it lives in the
 * workspace, so every table on a GATE screen — analysis grids, the account
 * panel, and the tables inside question statements — is styled here. */
.w3c-gate table,
.w3c-gate__table {
	width: 100%;
	margin: 0 0 16px;
	border-collapse: collapse;
	font-family: var(--w3c-font-ui);
	font-size: 14px;
}

.w3c-gate table th,
.w3c-gate table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--w3c-border);
	text-align: left;
	vertical-align: top;
}

.w3c-gate table thead th {
	border-bottom: 1px solid var(--w3c-border-strong);
	background: var(--w3c-fill);
	color: var(--w3c-muted);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.w3c-gate table tbody th {
	color: var(--w3c-ink);
	font-weight: 650;
}

.w3c-gate table tbody tr:hover {
	background: var(--lc-zebra);
}

.w3c-gate table caption {
	caption-side: top;
	margin-bottom: 8px;
	color: var(--w3c-muted);
	font-size: 13px;
	text-align: left;
}

.w3c-gate__table-actions {
	white-space: nowrap;
	font-weight: 650;
}

/* A wide table must scroll inside its own box, never the page. */
.w3c-gate__scroller {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

/* Pagination: the shared component with a little breathing room. */
.w3c-gate .w3c-pagination {
	margin-top: 26px;
}

/* =========================================================================
 * 4. /quiz/ hub
 *
 * The hub reuses .w3c-home-hero / .w3c-home-section / .w3c-section-heading
 * from the home layer; only the GATE-specific blocks are declared here.
 * ======================================================================= */
.w3c-gate__section {
	padding-top: 44px;
	padding-bottom: 44px;
}

.w3c-gate__section--alt {
	background: var(--w3c-fill);
}

.w3c-gate__intro {
	margin-top: 14px;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16.5px;
	line-height: 1.65;
}

.w3c-gate__intro p:last-child {
	margin-bottom: 0;
}

/* Exam cards ------------------------------------------------------------- */
.w3c-gate__exams {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.w3c-gate__exam {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-gate__exam h3 {
	margin: 0;
	font-size: 19px;
}

.w3c-gate__exam h3 a {
	color: var(--w3c-ink);
}

.w3c-gate__exam h3 a:hover {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gate__exam-note {
	margin: 0;
	color: var(--w3c-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

.w3c-gate__exam-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	color: var(--w3c-muted);
	font-size: 13.5px;
	font-weight: 650;
}

.w3c-gate__exam .w3c-btn {
	align-self: flex-start;
	margin-top: auto;
}

/* Year-wise grid ---------------------------------------------------------
 * <div class="w3c-gate__years"> wraps a title plus .w3c-gate__chips on the
 * hub; the renderer emits <ul class="w3c-gate__years"> of .w3c-gate__year
 * chips. Both shapes are handled. */
div.w3c-gate__years {
	margin-bottom: 26px;
}

div.w3c-gate__years:last-child {
	margin-bottom: 0;
}

.w3c-gate__years-title {
	margin: 0 0 12px;
	color: var(--w3c-muted);
	font-family: var(--w3c-font-ui);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.w3c-gate__chips,
ul.w3c-gate__years {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.w3c-gate__chips .w3c-gate__chip,
.w3c-gate__year {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 82px;
	padding: 10px 14px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.w3c-gate__chips .w3c-gate__chip:hover,
.w3c-gate__year:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand);
	color: #fff;
	text-decoration: none;
}

.w3c-gate__chips .w3c-gate__chip em,
.w3c-gate__year em {
	color: var(--w3c-muted);
	font-size: 11.5px;
	font-style: normal;
	font-weight: 650;
}

.w3c-gate__chips .w3c-gate__chip:hover em,
.w3c-gate__year:hover em {
	color: rgba(255, 255, 255, 0.85);
}

.w3c-gate__chips--topics .w3c-gate__chip,
.w3c-gate__chips--years .w3c-gate__chip {
	flex-direction: row;
	gap: 8px;
}

/* Subject-wise grid ------------------------------------------------------ */
.w3c-gate__subjects {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.w3c-gate__subject {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
	color: var(--w3c-ink);
	transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.w3c-gate__subject:hover {
	border-color: var(--w3c-brand);
	box-shadow: var(--w3c-card-shadow-hover);
	color: var(--w3c-ink);
	text-decoration: none;
	transform: translateY(-1px);
}

.w3c-gate__subject-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-gate__subject-icon .w3c-icon {
	width: 19px;
	height: 19px;
}

.w3c-gate__subject-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.w3c-gate__subject-body strong,
.w3c-gate__subject-name {
	color: var(--w3c-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.w3c-gate__subject-body small,
.w3c-gate__subject-count {
	color: var(--w3c-muted);
	font-size: 12.5px;
	font-weight: 600;
}

.w3c-gate__subject-name + .w3c-gate__subject-count {
	margin-top: 2px;
}

/* A subject tile without the icon element keeps a text-only column. */
.w3c-gate__subject:not(:has(.w3c-gate__subject-icon)) {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* =========================================================================
 * 5. Exam, subject and year archives
 * ======================================================================= */
.w3c-gate__archive-head {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--w3c-border);
}

.w3c-gate__archive-head .w3c-home-hero__eyebrow {
	margin: 0 0 6px;
	color: var(--w3c-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.w3c-gate__archive-count {
	margin: 6px 0 0;
	color: var(--w3c-muted);
	font-size: 14px;
	font-weight: 650;
}

.w3c-gate__archive-intro {
	margin-top: 12px;
	max-width: 70ch;
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.65;
}

.w3c-gate__chips--years,
.w3c-gate__chips--topics {
	margin-bottom: 24px;
}

/* Result rows ------------------------------------------------------------ */
.w3c-gate__rows {
	display: grid;
	gap: 12px;
}

.w3c-gate__row {
	padding: 16px 18px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.w3c-gate__row:hover {
	border-color: var(--w3c-border-strong);
	box-shadow: var(--w3c-card-shadow-hover);
}

.w3c-gate__row h2 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.w3c-gate__row h2 a {
	color: var(--w3c-ink);
}

.w3c-gate__row h2 a:hover {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gate__row-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	color: var(--w3c-muted);
	font-size: 13px;
	font-weight: 600;
}

.w3c-gate__row-excerpt {
	margin: 8px 0 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 15px;
	line-height: 1.6;
}

.w3c-gate__row--test {
	border-left: 3px solid var(--w3c-brand);
}

.w3c-gate__row--series {
	border-left: 3px solid var(--w3c-gate-marked);
}

/* Compact question list (server-paged) ----------------------------------- */
.w3c-gate__qlist {
	display: grid;
	gap: 10px;
	margin: 0 0 8px;
	padding: 0;
	list-style: decimal inside;
}

.w3c-gate__qrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	padding: 12px 16px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
}

.w3c-gate__qrow:hover {
	border-color: var(--w3c-border-strong);
}

.w3c-gate__qrow-title {
	flex: 1 1 260px;
	color: var(--w3c-ink);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.4;
}

.w3c-gate__qrow-title:hover {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gate__qrow-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* =========================================================================
 * 6. Paper page (practice mode)
 * ======================================================================= */
.w3c-gate__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 30px;
	align-items: start;
	margin-bottom: 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--w3c-border);
}

.w3c-gate__head-copy {
	min-width: 0;
}

.w3c-gate__head h1 {
	margin: 0;
}

/* The two ways into a paper, kept in view while the question list scrolls. */
.w3c-gate__cta {
	position: sticky;
	top: calc(var(--w3c-header-height) + 16px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-gate__cta-note {
	margin: 0;
	color: var(--w3c-muted);
	font-size: 13px;
	line-height: 1.5;
}

.w3c-gate__cta-status {
	margin: 0;
	min-height: 18px;
	color: var(--w3c-brand-dark);
	font-size: 13px;
	font-weight: 650;
}

.w3c-gate__cta-status.is-error,
.w3c-gate__cta-status.is-bad {
	color: var(--w3c-gate-not-answered);
}

.w3c-gate__cta-status.is-ok {
	color: var(--w3c-gate-answered);
}

.w3c-gate__questions {
	margin-top: 8px;
}

.w3c-gate__questions-title {
	margin: 0 0 16px;
	font-size: 20px;
}

/* Section heading inside a paper ("General Aptitude", "Technical"). */
.w3c-gate__group {
	margin: 28px 0 14px;
	padding: 8px 14px;
	border-left: 3px solid var(--w3c-brand);
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	font-weight: 750;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* =========================================================================
 * 7. Question card (.w3c-gq)
 *
 * Shared by the paper page, the single-question page and the result review
 * list. The answer key is only ever in the DOM in the review state.
 * ======================================================================= */
.w3c-gq {
	margin: 0 0 18px;
	padding: 22px 24px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
	scroll-margin-top: calc(var(--w3c-header-height) + 20px);
}

.w3c-gq__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--w3c-line);
}

.w3c-gq__num {
	margin: 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 16px;
	font-weight: 750;
	letter-spacing: 0;
}

.w3c-gq__num a {
	color: inherit;
}

.w3c-gq__num a:hover {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gq__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Statement -------------------------------------------------------------- */
.w3c-gq__body {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16.5px;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.w3c-gq__body > *:first-child {
	margin-top: 0;
}

.w3c-gq__body > *:last-child {
	margin-bottom: 0;
}

.w3c-gq__body p {
	margin: 0 0 12px;
}

.w3c-gq__body ul,
.w3c-gq__body ol {
	margin: 0 0 12px 22px;
	padding: 0;
}

.w3c-gq__body ul {
	list-style: disc;
}

.w3c-gq__body ol {
	list-style: decimal;
}

.w3c-gq__body li {
	margin: 0 0 6px;
}

.w3c-gq__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 12px 0;
}

/* A statement's code sample: the shared code card does the heavy lifting
 * when it is enqueued; this is the plain fallback. */
.w3c-gq__body pre {
	overflow-x: auto;
	max-width: 100%;
	margin: 0 0 14px;
	padding: 14px 16px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--lc-fill);
	font-family: var(--w3c-font-mono);
	font-size: 13.5px;
	line-height: 1.55;
	tab-size: 4;
}

.w3c-gq__body code,
.w3c-gq__body kbd {
	font-family: var(--w3c-font-mono);
	font-size: 0.92em;
}

.w3c-gq__body :not(pre) > code {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--lc-fill);
}

/* GATE statements are full of matrices and truth tables. */
.w3c-gq__body table {
	display: block;
	overflow-x: auto;
	width: auto;
	max-width: 100%;
	margin: 0 0 14px;
	border-collapse: collapse;
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	white-space: nowrap;
}

.w3c-gq__body th,
.w3c-gq__body td {
	padding: 7px 12px;
	border: 1px solid var(--w3c-border-strong);
	text-align: left;
}

.w3c-gq__body th {
	background: var(--w3c-fill);
	font-weight: 700;
}

/* QuickLaTeX images must not blow out the line. */
.w3c-gq__body .ql-center-displayed-equation,
.w3c-gq__body .ql-right-eqno {
	max-width: 100%;
	overflow-x: auto;
}

/* Options ----------------------------------------------------------------
 * Styled radios and checkboxes: the theme has none, so the native control
 * is restyled in place (appearance: none keeps it focusable and keeps the
 * accessibility tree intact). */
.w3c-gq__options {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
}

.w3c-gq__option {
	display: grid;
	grid-template-columns: 22px 26px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
}

.w3c-gq__option:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
}

.w3c-gq__option input[type="radio"],
.w3c-gq__option input[type="checkbox"] {
	display: grid;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	border: 2px solid var(--w3c-border-strong);
	background: var(--w3c-surface);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.w3c-gq__option input[type="radio"] {
	border-radius: 50%;
}

.w3c-gq__option input[type="checkbox"] {
	border-radius: 5px;
}

.w3c-gq__option input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--w3c-brand);
	transform: scale(0);
	transition: transform 120ms ease;
}

.w3c-gq__option input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 11px;
	background: var(--w3c-brand);
	clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 4%, 39% 70%);
	transform: scale(0);
	transition: transform 120ms ease;
}

.w3c-gq__option input:checked {
	border-color: var(--w3c-brand);
}

.w3c-gq__option input:checked::before {
	transform: scale(1);
}

.w3c-gq__option input:disabled {
	background: var(--lc-fill-2);
	cursor: default;
}

.w3c-gq__option-key {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--w3c-fill);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 13px;
	font-weight: 750;
}

.w3c-gq__option-text {
	min-width: 0;
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.w3c-gq__option-text p:last-child,
.w3c-gq__option-text pre:last-child {
	margin-bottom: 0;
}

.w3c-gq__option-text pre {
	overflow-x: auto;
	margin: 4px 0;
	padding: 10px 12px;
	border-radius: 6px;
	background: var(--lc-fill);
	font-family: var(--w3c-font-mono);
	font-size: 13px;
}

/* Option states: selected, keyed, and the review verdicts. */
.w3c-gq__option:has(input:checked),
.w3c-gq__option.is-picked {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
}

.w3c-gq__option:has(input:checked) .w3c-gq__option-key,
.w3c-gq__option.is-picked .w3c-gq__option-key {
	background: var(--w3c-brand);
	color: #fff;
}

.w3c-gq__option.is-answer {
	border-color: var(--w3c-gate-answered);
	background: var(--w3c-gate-answered-soft);
}

.w3c-gq__option.is-answer .w3c-gq__option-key {
	background: var(--w3c-gate-answered);
	color: #fff;
}

.w3c-gq__option.is-wrong {
	border-color: var(--w3c-gate-not-answered);
	background: var(--w3c-gate-not-answered-soft);
}

.w3c-gq__option.is-wrong .w3c-gq__option-key {
	background: var(--w3c-gate-not-answered);
	color: #fff;
}

/* NAT answer box --------------------------------------------------------- */
.w3c-gq__nat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.w3c-gq__nat label {
	color: var(--w3c-muted);
	font-size: 13.5px;
	font-weight: 700;
}

.w3c-gq__nat input {
	width: 190px;
	max-width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 15px;
}

.w3c-gq__nat input:focus {
	border-color: var(--w3c-brand);
	outline: none;
}

.w3c-gq__nat input[readonly] {
	background: var(--lc-fill);
	color: var(--w3c-text);
}

/* Actions and status ------------------------------------------------------ */
.w3c-gq__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 18px;
}

.w3c-gq__discuss {
	font-size: 13.5px;
	font-weight: 650;
}

.w3c-gq__status {
	flex: 1 1 100%;
	margin: 0;
	min-height: 20px;
	color: var(--w3c-muted);
	font-size: 13.5px;
	font-weight: 650;
}

.w3c-gq.is-correct .w3c-gq__status {
	color: var(--w3c-gate-answered);
}

.w3c-gq.is-incorrect .w3c-gq__status {
	color: var(--w3c-gate-not-answered);
}

/* Solution --------------------------------------------------------------- */
.w3c-gq__solution {
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px solid var(--w3c-green-line);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-brand-soft);
}

.w3c-gq__solution[hidden] {
	display: none;
}

.w3c-gq__key {
	margin: 0 0 10px;
	color: var(--w3c-brand-dark);
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 750;
}

.w3c-gq__key:empty {
	display: none;
}

.w3c-gq__explanation {
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16px;
	line-height: 1.68;
}

.w3c-gq__explanation > *:last-child {
	margin-bottom: 0;
}

.w3c-gq__explanation p {
	margin: 0 0 12px;
}

.w3c-gq__explanation pre {
	overflow-x: auto;
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 6px;
	background: var(--w3c-surface);
	font-family: var(--w3c-font-mono);
	font-size: 13.5px;
}

.w3c-gq__explanation table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	background: var(--w3c-surface);
}

/* Card states ------------------------------------------------------------ */
.w3c-gq.is-correct {
	border-color: var(--w3c-gate-answered);
}

.w3c-gq.is-incorrect {
	border-color: var(--w3c-gate-not-answered);
}

.w3c-gq.is-skipped {
	border-color: var(--w3c-border-strong);
}

.w3c-gq.is-locked .w3c-gq__actions {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 14px 16px;
	border: 1px dashed var(--w3c-green-line);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-brand-soft);
}

.w3c-gq.is-locked .w3c-gq__status {
	color: var(--w3c-brand-dark);
}

/* Review state (result page) --------------------------------------------- */
.w3c-gq__review {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-fill);
}

.w3c-gq__verdict {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	font-weight: 750;
}

.w3c-gq__verdict .w3c-icon {
	width: 18px;
	height: 18px;
}

.w3c-gq.is-correct .w3c-gq__verdict {
	color: var(--w3c-gate-answered);
}

.w3c-gq.is-incorrect .w3c-gq__verdict {
	color: var(--w3c-gate-not-answered);
}

.w3c-gq.is-skipped .w3c-gq__verdict {
	color: var(--w3c-muted);
}

.w3c-gq__review-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
}

.w3c-gq__review-grid > div {
	min-width: 0;
}

.w3c-gq__review-grid dt {
	margin: 0 0 2px;
	color: var(--w3c-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.w3c-gq__review-grid dd {
	margin: 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: break-word;
}

/* =========================================================================
 * 8. Single question page
 * ======================================================================= */
.w3c-gate__qhead {
	margin-bottom: 20px;
}

.w3c-gate__qhead h1 {
	margin-bottom: 12px;
	font-size: clamp(22px, 2.8vw, 28px);
}

.w3c-gate__qhead .w3c-gate__tags {
	margin-bottom: 0;
}

.w3c-gate__meta,
.w3c-gate__related {
	margin-top: 30px;
	padding: 20px 22px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
}

.w3c-gate__meta h2,
.w3c-gate__related h2 {
	margin: 0 0 12px;
	font-size: 17px;
}

.w3c-gate__related-list {
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
}

.w3c-gate__related-list li {
	margin: 0;
	padding-left: 16px;
	position: relative;
	font-size: 15px;
	line-height: 1.5;
}

.w3c-gate__related-list li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--w3c-brand);
}

.w3c-gate__related-all {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 700;
}

/* =========================================================================
 * 9. Test series: catalogue and landing
 * ======================================================================= */
.w3c-gate--series .w3c-gate__cards,
.w3c-gate__series-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.w3c-gate__series .w3c-gate__card-actions,
.w3c-gate__card .w3c-gate__card-actions {
	margin-top: auto;
}

/* Landing header: copy on the left, the enrol/buy panel on the right. */
.w3c-gate--series-single .w3c-gate__head {
	grid-template-columns: minmax(0, 1fr) 330px;
}

.w3c-gate--series-single .w3c-gate__features {
	margin-top: 16px;
}

.w3c-gate--series-single .w3c-gate__cta {
	gap: 12px;
	padding: 24px;
}

.w3c-gate--series-single .w3c-gate__price {
	margin-bottom: 4px;
}

/* The paper list inside a series ----------------------------------------- */
.w3c-gate__tests {
	margin-top: 8px;
}

.w3c-gate__testlist {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	counter-reset: w3c-gate-test;
}

.w3c-gate__test {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px 20px;
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-gate__test.is-done {
	border-left: 3px solid var(--w3c-gate-answered);
}

.w3c-gate__test.is-running {
	border-left: 3px solid var(--w3c-gate-warning);
}

.w3c-gate__test-main {
	min-width: 0;
}

.w3c-gate__test-main h3 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
}

.w3c-gate__test-main h3 a {
	color: var(--w3c-ink);
}

.w3c-gate__test-main h3 a:hover {
	color: var(--w3c-brand-dark);
	text-decoration: none;
}

.w3c-gate__test-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	color: var(--w3c-muted);
	font-size: 13px;
	font-weight: 600;
}

.w3c-gate__test-state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.w3c-gate__state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border: 1px solid var(--w3c-border);
	border-radius: 999px;
	background: var(--w3c-fill);
	color: var(--w3c-muted);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

.w3c-gate__state.is-done {
	border-color: #bfe3cd;
	background: var(--w3c-gate-answered-soft);
	color: var(--w3c-gate-answered);
}

.w3c-gate__state.is-running {
	border-color: #ead9b4;
	background: #fdf6e7;
	color: var(--w3c-gate-warning);
}

.w3c-gate__state.is-locked {
	border-color: var(--w3c-border-strong);
	background: var(--w3c-fill);
	color: var(--w3c-muted);
}

/* =========================================================================
 * 10. Account panel ("My Tests")
 *
 * Rendered inside the existing .w3c-account-card, so only the table and the
 * footer link need dressing.
 * ======================================================================= */
.w3c-gate__account {
	overflow-x: auto;
}

.w3c-gate__account .w3c-gate__table {
	min-width: 520px;
}

.w3c-gate__account-more {
	margin: 12px 0 0;
	font-size: 13.5px;
	font-weight: 650;
}

/* =========================================================================
 * 11. Exam mode: chrome suppression
 *
 * The theme has no chrome-less template: single-w3c_problem.php calls
 * get_header()/get_footer() and the workspace hides the chrome in CSS keyed
 * on a body class (w3colleges.css:12152-12178, :15592-15611). gate-exam.php
 * and gate-result.php do the same with body.w3c-exam-mode.
 * ======================================================================= */
body.w3c-exam-mode {
	background: var(--lc-fill);
}

body.w3c-exam-mode .w3c-site-header,
body.w3c-exam-mode .w3c-topic-bar,
body.w3c-exam-mode #colophon,
body.w3c-exam-mode #iop-footer {
	display: none;
}

body.w3c-exam-mode #page.site,
body.w3c-exam-mode #main.wrapper {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--lc-fill);
}

/*
 * The result view carries the same body class (the view predicate sets it
 * for both per-user views), but it is an ordinary reading page, not a
 * lockdown screen: when a result page is on screen the site chrome comes
 * back. Browsers without :has() fall back to the plain exam-mode behaviour.
 */
body.w3c-exam-mode:has(.w3c-gate--result) {
	background: var(--w3c-surface-soft);
}

body.w3c-exam-mode:has(.w3c-gate--result) .w3c-site-header,
body.w3c-exam-mode:has(.w3c-gate--result) #colophon,
body.w3c-exam-mode:has(.w3c-gate--result) #iop-footer {
	display: revert;
}

body.w3c-exam-mode:has(.w3c-gate--result) #page.site,
body.w3c-exam-mode:has(.w3c-gate--result) #main.wrapper {
	background: var(--w3c-surface-soft);
}

/* The admin bar is fixed over the top of the viewport: everything pinned to
 * the viewport starts below it. 46px is the admin bar's mobile height. */
.w3c-exam {
	--w3c-exam-top: 0px;
}

body.admin-bar .w3c-exam {
	--w3c-exam-top: 32px;
}

/* Desktop only: the workspace CSS learned the hard way that pinning the
 * shell to the viewport breaks scrolling on tablets and phones. */
@media (min-width: 1025px) {
	html:has(> body.w3c-exam-mode) {
		overflow: hidden;
	}

	html:has(> body.w3c-exam-mode .w3c-gate--result) {
		overflow: visible;
	}

	.w3c-exam {
		position: fixed;
		top: var(--w3c-exam-top);
		right: 0;
		bottom: 0;
		left: 0;
		height: auto;
		min-height: 0; /* the base rule's min-height: 100vh would push the shell one admin-bar height past the window */
	}
}

/* =========================================================================
 * 12. Exam environment shell
 *
 * A flat grid: the top bar spans both columns, the left column stacks the
 * section bar, the timer, the question and the action footer, and the rail
 * fills the right column. Every child is placed explicitly so a missing or
 * reordered element cannot shuffle the layout.
 * ======================================================================= */
.w3c-exam {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 306px;
	grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
	min-height: 100vh;
	background: var(--lc-fill);
	color: var(--lc-text);
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	line-height: 1.55;
}

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

.w3c-exam p {
	margin: 0 0 10px;
}

.w3c-exam__topbar {
	grid-area: 1 / 1 / 2 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	padding: 8px 18px;
	background: var(--w3c-ink);
	color: #fff;
}

.w3c-exam__topbar h1,
.w3c-exam__title {
	margin: 0;
	overflow: hidden;
	color: #fff;
	font-family: var(--w3c-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.w3c-exam__topbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.w3c-exam__topbar button,
.w3c-exam__topbar a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 13px;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.w3c-exam__topbar button:hover,
.w3c-exam__topbar a:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	text-decoration: none;
}

.w3c-exam__topbar button:focus-visible,
.w3c-exam__topbar a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Section bar ------------------------------------------------------------ */
.w3c-exam__sectionbar {
	grid-area: 2 / 1 / 3 / 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--lc-line);
	background: var(--w3c-surface);
}

.w3c-exam__sectionbar-scroll {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	min-width: 0;
	scrollbar-width: thin;
}

.w3c-exam__sectionbar button,
.w3c-exam__tab {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 6px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.w3c-exam__sectionbar button:hover,
.w3c-exam__tab:hover {
	border-color: var(--w3c-brand);
	color: var(--w3c-brand-dark);
}

.w3c-exam__tab[aria-selected="true"],
.w3c-exam__tab.is-active,
.w3c-exam__sectionbar button[aria-current="true"] {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand);
	color: #fff;
}

/* Timer bar -------------------------------------------------------------- */
.w3c-exam__timerbar {
	grid-area: 3 / 1 / 4 / 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--lc-line);
	background: var(--lc-fill);
	font-size: 13.5px;
	font-weight: 650;
}

.w3c-exam__timer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: 6px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.w3c-exam__timer .w3c-icon {
	width: 16px;
	height: 16px;
	color: var(--w3c-brand);
}

.w3c-exam__timer.is-warning {
	border-color: #ead9b4;
	background: #fdf6e7;
	color: var(--w3c-gate-warning);
}

.w3c-exam__timer.is-critical {
	border-color: var(--w3c-gate-not-answered);
	background: var(--w3c-gate-not-answered-soft);
	color: var(--w3c-gate-not-answered);
	animation: w3c-exam-pulse 1.4s ease-in-out infinite;
}

@keyframes w3c-exam-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}
}

/* Section tab strip ------------------------------------------------------ */
.w3c-exam__tabs {
	grid-area: 4 / 1 / 5 / 2;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 16px 0;
	background: var(--w3c-surface);
}

.w3c-exam__tabs .w3c-exam__tab {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Question info bar ------------------------------------------------------ */
.w3c-exam__infobar {
	grid-area: 5 / 1 / 6 / 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding: 10px 16px;
	border-top: 1px solid var(--lc-line);
	border-bottom: 1px solid var(--lc-line);
	background: var(--w3c-surface);
	color: var(--w3c-text);
	font-size: 13px;
	font-weight: 600;
}

.w3c-exam__infobar b,
.w3c-exam__infobar strong {
	color: var(--w3c-ink);
	font-weight: 750;
}

.w3c-exam__infobar .is-positive {
	color: var(--w3c-gate-answered);
}

.w3c-exam__infobar .is-negative {
	color: var(--w3c-gate-not-answered);
}

/* Question number + statement -------------------------------------------- */
.w3c-exam__qno {
	grid-area: 6 / 1 / 7 / 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px 0;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 16px;
	font-weight: 750;
}

.w3c-exam__question {
	grid-area: 7 / 1 / 8 / 2;
	overflow-y: auto;
	min-height: 0;
	padding: 14px 16px 24px;
	background: var(--w3c-surface);
	color: var(--w3c-text);
	font-family: var(--w3c-font-body);
	font-size: 16.5px;
	line-height: 1.7;
	overscroll-behavior: contain;
}

.w3c-exam__question img {
	max-width: 100%;
	height: auto;
}

.w3c-exam__question pre {
	overflow-x: auto;
	padding: 14px 16px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--lc-fill);
	font-family: var(--w3c-font-mono);
	font-size: 13.5px;
	line-height: 1.55;
}

.w3c-exam__question table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	white-space: nowrap;
}

.w3c-exam__question th,
.w3c-exam__question td {
	padding: 7px 12px;
	border: 1px solid var(--w3c-border-strong);
	text-align: left;
}

/* Exam options: the same control pattern as the practice card, tuned for
 * the denser exam column. */
/*
 * Time warnings, save failures and "time is up". Empty until something is
 * announced, and :empty keeps it out of the grid until then -- otherwise an
 * auto-placed empty row shifts the whole question column down the moment the
 * first warning fires.
 */
.w3c-exam__alert {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px solid var(--w3c-gate-not-answered);
	border-left-width: 4px;
	border-radius: 6px;
	background: #fdf2f2;
	color: #7f1d1d;
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	font-weight: 700;
}

.w3c-exam__alert:empty {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.w3c-exam__options {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.w3c-exam__option {
	display: grid;
	grid-template-columns: 22px 26px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	padding: 11px 14px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
	cursor: pointer;
}

.w3c-exam__option:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
}

.w3c-exam__option input[type="radio"],
.w3c-exam__option input[type="checkbox"] {
	display: grid;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	border: 2px solid var(--w3c-border-strong);
	background: var(--w3c-surface);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.w3c-exam__option input[type="radio"] {
	border-radius: 50%;
}

.w3c-exam__option input[type="checkbox"] {
	border-radius: 5px;
}

.w3c-exam__option input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--w3c-brand);
	transform: scale(0);
}

.w3c-exam__option input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 11px;
	background: var(--w3c-brand);
	clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 4%, 39% 70%);
	transform: scale(0);
}

.w3c-exam__option input:checked {
	border-color: var(--w3c-brand);
}

.w3c-exam__option input:checked::before {
	transform: scale(1);
}

.w3c-exam__option-key {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--w3c-fill);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 13px;
	font-weight: 750;
}

.w3c-exam__option:has(input:checked) {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
}

.w3c-exam__option:has(input:checked) .w3c-exam__option-key {
	background: var(--w3c-brand);
	color: #fff;
}

/* NAT entry and the on-screen keypad ------------------------------------- */
.w3c-exam__nat {
	display: grid;
	gap: 12px;
	max-width: 320px;
	margin-top: 18px;
}

.w3c-exam__nat input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 18px;
	text-align: right;
}

.w3c-exam__keypad {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.w3c-exam__keypad button {
	min-height: 44px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 17px;
	font-weight: 650;
	cursor: pointer;
}

.w3c-exam__keypad button:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
}

/* Action footer ---------------------------------------------------------- */
.w3c-exam__footer {
	grid-area: 8 / 1 / 9 / 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-top: 1px solid var(--lc-line);
	background: var(--w3c-surface);
}

.w3c-exam__footer button {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--w3c-border-strong);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.w3c-exam__footer button:hover {
	border-color: var(--w3c-brand);
	color: var(--w3c-brand-dark);
}

.w3c-exam__footer button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.w3c-exam__mark {
	border-color: #ddd2f7 !important;
	background: var(--w3c-gate-marked-soft) !important;
	color: var(--w3c-gate-marked) !important;
}

.w3c-exam__save,
.w3c-exam__next {
	margin-left: auto;
	border-color: var(--w3c-brand) !important;
	background: var(--w3c-brand) !important;
	color: #fff !important;
}

.w3c-exam__save:hover,
.w3c-exam__next:hover {
	border-color: var(--w3c-brand-dark) !important;
	background: var(--w3c-brand-dark) !important;
	color: #fff !important;
}

/* Save state / live region ------------------------------------------------ */
.w3c-exam__save-state,
.w3c-exam__status {
	color: var(--w3c-muted);
	font-size: 12.5px;
	font-weight: 650;
}

.w3c-exam__status.is-error {
	color: var(--w3c-gate-not-answered);
}

.w3c-exam__status.is-saved {
	color: var(--w3c-gate-answered);
}

/* A polite live region that must be announced but not seen. */
.w3c-exam__live {
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

/* =========================================================================
 * 13. Question palette, legend and rail
 *
 * The rail is the NTA candidate panel: who is signed in, the five state
 * counters, the palette, and Submit pinned to the bottom.
 * ======================================================================= */
.w3c-exam__rail {
	grid-area: 2 / 2 / -1 / 3;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-left: 1px solid var(--lc-line);
	background: var(--w3c-surface);
}

.w3c-exam__rail-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	border: 0;
	border-bottom: 1px solid var(--lc-line);
	background: var(--w3c-fill);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.w3c-exam__profile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--lc-line);
	background: var(--lc-fill);
}

.w3c-exam__profile img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.w3c-exam__profile strong {
	display: block;
	color: var(--w3c-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.w3c-exam__profile small {
	color: var(--w3c-muted);
	font-size: 12px;
	font-weight: 600;
}

/* Legend: five counters, each showing the palette shape it stands for. */
.w3c-exam__legend {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--lc-line);
	list-style: none;
}

.w3c-exam__legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--w3c-text);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.25;
}

.w3c-exam__legend li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.w3c-exam__legend b,
.w3c-exam__legend .w3c-exam__count {
	color: var(--w3c-ink);
	font-weight: 750;
}

/* Palette ---------------------------------------------------------------- */
.w3c-exam__palette {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
	padding: 14px 16px;
	overscroll-behavior: contain;
}

.w3c-exam__palette-title,
.w3c-exam__palette > h2,
.w3c-exam__palette > h3 {
	margin: 0 0 10px;
	color: var(--w3c-muted);
	font-family: var(--w3c-font-ui);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * The palette element carries role="group" itself -- the engine sets it on
 * .w3c-exam__palette rather than wrapping the tiles in an inner group -- so
 * the five-column grid has to match the element as well as any descendant.
 * With only the descendant selector the tiles fall back to block layout and
 * stack two-per-row down a 300px rail.
 */
.w3c-exam__palette-grid,
.w3c-exam__palette[role="group"],
.w3c-exam__palette [role="group"] {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	align-content: start;
}

/*
 * Tile shapes follow the NTA/GATE conventions. Shape carries the meaning as
 * well as colour, and the template's visually-hidden label states it in
 * words, so the palette does not rely on colour alone.
 */
.w3c-exam__tile {
	position: relative;
	display: grid;
	place-items: center;
	justify-self: center;
	/* Square whatever the column width: a circle in a stretched cell reads
	 * as an ellipse and the pentagons lose their silhouette. */
	width: min(100%, var(--w3c-gate-tile));
	min-width: 0;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	background: var(--w3c-gate-not-visited);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-ui);
	font-size: 13px;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

/*
 * The engine hides tiles outside the active section with the hidden
 * attribute. A class selector beats the browser's own [hidden] rule, so
 * .w3c-exam__tile's display would otherwise keep every section's tiles on
 * screen at once -- two questions both numbered 1, and a palette that
 * disagrees with the section tab above it.
 */
.w3c-exam__tile[hidden] {
	display: none;
}

.w3c-exam__tile:hover {
	transform: translateY(-1px);
}

/* Not visited: plain grey square. */
.w3c-exam__tile.is-not-visited {
	background: var(--w3c-gate-not-visited);
	color: #1f2937;
}

/* Not answered: red pentagon pointing down. */
.w3c-exam__tile.is-not-answered {
	padding-bottom: 8px;
	border-radius: 0;
	background: var(--w3c-gate-not-answered);
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

/* Answered: green pentagon pointing up. */
.w3c-exam__tile.is-answered {
	padding-top: 8px;
	border-radius: 0;
	background: var(--w3c-gate-answered);
	color: #fff;
	clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0 38%);
}

/* Marked for review: purple circle. */
.w3c-exam__tile.is-marked,
.w3c-exam__tile.is-answered-marked {
	border-radius: 50%;
	background: var(--w3c-gate-marked);
	color: #fff;
	clip-path: none;
}

/* Answered and marked: the same circle with a green tick dot, so the two
 * purple states are still distinguishable without colour vision. */
.w3c-exam__tile.is-answered-marked::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 15px;
	height: 15px;
	border: 2px solid var(--w3c-surface);
	border-radius: 50%;
	background: var(--w3c-gate-answered)
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
		center / 9px 9px no-repeat;
}

/* The question being answered right now. The number is underlined as well
 * as ringed, so "where am I" does not depend on colour. */
.w3c-exam__tile[aria-current="true"],
.w3c-exam__tile.is-current {
	box-shadow: 0 0 0 3px var(--w3c-brand-ring);
	outline: 2px solid var(--w3c-brand);
	outline-offset: 1px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.w3c-exam__tile:focus-visible {
	outline: 3px solid var(--w3c-focus);
	outline-offset: 3px;
}

/*
 * clip-path clips everything the element paints, including its outline and
 * box-shadow, so the two pentagon states would have no visible ring at all.
 * Four zero-blur drop-shadows draw one that follows the clipped shape.
 */
.w3c-exam__tile.is-not-answered[aria-current="true"],
.w3c-exam__tile.is-answered[aria-current="true"],
.w3c-exam__tile.is-not-answered.is-current,
.w3c-exam__tile.is-answered.is-current {
	box-shadow: none;
	outline: none;
	filter:
		drop-shadow(2px 0 0 var(--w3c-ink))
		drop-shadow(-2px 0 0 var(--w3c-ink))
		drop-shadow(0 2px 0 var(--w3c-ink))
		drop-shadow(0 -2px 0 var(--w3c-ink));
}

.w3c-exam__tile.is-not-answered:focus-visible,
.w3c-exam__tile.is-answered:focus-visible {
	outline: none;
	filter:
		drop-shadow(3px 0 0 var(--w3c-focus))
		drop-shadow(-3px 0 0 var(--w3c-focus))
		drop-shadow(0 3px 0 var(--w3c-focus))
		drop-shadow(0 -3px 0 var(--w3c-focus));
}

/* Legend tiles are miniatures of the palette shapes, never interactive.
 * NTA prints the counter inside the shape, so the number stays visible. */
.w3c-exam__legend .w3c-exam__tile,
.w3c-exam__legend .w3c-exam__shape {
	flex: 0 0 auto;
	width: 26px;
	min-width: 26px;
	height: 26px;
	font-size: 11px;
	cursor: default;
}

.w3c-exam__legend .w3c-exam__tile:hover {
	transform: none;
}

.w3c-exam__legend .w3c-exam__tile.is-answered-marked::after {
	right: -3px;
	bottom: -3px;
	width: 11px;
	height: 11px;
	background-size: 7px 7px;
}

/* Submit ----------------------------------------------------------------- */
.w3c-exam__submit {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 16px;
	border-top: 1px solid var(--lc-line);
	background: var(--lc-fill);
}

.w3c-exam__submit button,
button.w3c-exam__submit {
	flex: 1 1 auto;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid var(--w3c-brand);
	border-radius: var(--w3c-gate-radius-sm);
	background: var(--w3c-brand);
	color: #fff;
	font-family: var(--w3c-font-ui);
	font-size: 14px;
	font-weight: 750;
	line-height: 1;
	cursor: pointer;
}

.w3c-exam__submit button:hover,
button.w3c-exam__submit:hover {
	border-color: var(--w3c-brand-dark);
	background: var(--w3c-brand-dark);
}

/* =========================================================================
 * 14. Exam dialogs, calculator and shortcuts
 *
 * The only modal in the theme is the auth popup, which this module never
 * restyles; every exam dialog is dressed here. The generic `dialog` rules
 * catch the submit confirmation, the question paper, the instructions and
 * the shortcut popover whatever their class.
 * ======================================================================= */
.w3c-exam dialog,
dialog.w3c-exam__dialog,
body.w3c-exam-mode dialog:not(#w3c-login-modal) {
	width: min(560px, calc(100vw - 32px));
	max-width: min(560px, calc(100vw - 32px));
	max-height: min(80vh, 720px);
	overflow: auto;
	padding: 0;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	color: var(--w3c-text);
	font-family: var(--w3c-font-ui);
	font-size: 15px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.w3c-exam dialog::backdrop,
dialog.w3c-exam__dialog::backdrop,
body.w3c-exam-mode dialog:not(#w3c-login-modal)::backdrop {
	background: rgba(15, 23, 42, 0.5);
}

.w3c-exam__dialog-head,
.w3c-exam dialog > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lc-line);
}

.w3c-exam__dialog-head h2,
.w3c-exam dialog > header h2 {
	margin: 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 18px;
	font-weight: 750;
}

.w3c-exam__dialog-body,
.w3c-exam dialog > section,
.w3c-exam dialog > div {
	padding: 18px 20px;
}

.w3c-exam__dialog-actions,
.w3c-exam dialog > footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--lc-line);
	background: var(--lc-fill);
}

.w3c-exam__dialog-close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--w3c-border);
	border-radius: 8px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	cursor: pointer;
}

.w3c-exam__dialog-close:hover {
	border-color: var(--w3c-brand);
	color: var(--w3c-brand-dark);
}

/* The submit confirmation's section-wise summary. */
.w3c-exam dialog table,
.w3c-exam__summary {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.w3c-exam dialog th,
.w3c-exam dialog td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--lc-line);
	text-align: left;
}

.w3c-exam dialog thead th {
	color: var(--w3c-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.w3c-exam dialog td + td,
.w3c-exam dialog th + th {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Keyboard shortcuts list ------------------------------------------------ */
.w3c-exam__shortcuts {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w3c-exam__shortcuts li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	font-size: 14px;
}

.w3c-exam kbd,
.w3c-exam__shortcuts kbd {
	display: inline-block;
	min-width: 26px;
	padding: 3px 7px;
	border: 1px solid var(--w3c-border-strong);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: var(--lc-fill);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 12px;
	font-weight: 650;
	text-align: center;
}

/* Virtual scientific calculator ------------------------------------------
 * A floating, draggable panel: the class the script uses may be scoped to
 * the exam or stand alone, so both roots are styled. */
.w3c-exam__calc,
.w3c-calc {
	position: fixed;
	top: 90px;
	right: 24px;
	z-index: 100010;
	width: 304px;
	max-width: calc(100vw - 24px);
	border: 1px solid var(--w3c-border-strong);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
	font-family: var(--w3c-font-ui);
}

.w3c-exam__calc[hidden],
.w3c-calc[hidden] {
	display: none;
}

.w3c-exam__calc-head,
.w3c-calc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--lc-line);
	background: var(--w3c-ink);
	border-radius: var(--w3c-gate-radius) var(--w3c-gate-radius) 0 0;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: move;
	-webkit-user-select: none;
	user-select: none;
}

.w3c-exam__calc-head button,
.w3c-calc__head button {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.w3c-exam__calc-display,
.w3c-calc__display {
	padding: 12px;
	border-bottom: 1px solid var(--lc-line);
	background: var(--lc-fill);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 22px;
	font-weight: 650;
	text-align: right;
	word-break: break-all;
	overflow-wrap: anywhere;
	min-height: 52px;
}

.w3c-exam__calc-display small,
.w3c-calc__display small {
	display: block;
	color: var(--w3c-muted);
	font-size: 12px;
	font-weight: 600;
}

.w3c-exam__calc-keys,
.w3c-calc__keys {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	padding: 10px;
}

.w3c-exam__calc-keys button,
.w3c-calc__keys button,
.w3c-calc__key {
	min-height: 38px;
	padding: 0 4px;
	border: 1px solid var(--w3c-border);
	border-radius: 6px;
	background: var(--w3c-surface);
	color: var(--w3c-ink);
	font-family: var(--w3c-font-mono);
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
}

.w3c-exam__calc-keys button:hover,
.w3c-calc__keys button:hover,
.w3c-calc__key:hover {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand-soft);
	color: var(--w3c-brand-dark);
}

.w3c-calc__key--op,
.w3c-calc__key--fn {
	background: var(--lc-fill);
}

.w3c-calc__key--eq {
	border-color: var(--w3c-brand);
	background: var(--w3c-brand);
	color: #fff;
}

.w3c-calc__key--eq:hover {
	border-color: var(--w3c-brand-dark);
	background: var(--w3c-brand-dark);
	color: #fff;
}

.w3c-calc__key--clear {
	border-color: #f0c8c4;
	background: var(--w3c-gate-not-answered-soft);
	color: var(--w3c-gate-not-answered);
}

/* =========================================================================
 * 15. Result and analysis page
 * ======================================================================= */
.w3c-gate--result .w3c-container {
	padding-bottom: 20px;
}

.w3c-gate__result-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

/* Score card ------------------------------------------------------------- */
/*
 * Only the card itself is the two-column grid. .w3c-gate__score is the inner
 * number block (the figure plus "out of 100"), and giving it the card's
 * 220px + 1fr template pushed the "out of" line into a second column that
 * overflowed the 220px cell and printed on top of the statistics beside it.
 */
.w3c-gate__scorecard {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	margin-bottom: 26px;
	padding: 26px 28px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
	box-shadow: var(--w3c-card-shadow);
}

.w3c-gate__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 18px;
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-brand-soft);
	text-align: center;
}

.w3c-gate__score-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 18px;
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-brand-soft);
	text-align: center;
}

.w3c-gate__score-value {
	color: var(--w3c-brand-dark);
	font-family: var(--w3c-font-display);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.w3c-gate__score-max {
	color: var(--w3c-muted);
	font-size: 13.5px;
	font-weight: 700;
}

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

.w3c-gate__figure {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.w3c-gate__figure dt,
.w3c-gate__figure > span:first-child {
	color: var(--w3c-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.w3c-gate__figure dd,
.w3c-gate__figure > b {
	margin: 0;
	color: var(--w3c-ink);
	font-family: var(--w3c-font-display);
	font-size: 22px;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.w3c-gate__figure.is-correct dd,
.w3c-gate__figure.is-correct > b {
	color: var(--w3c-gate-answered);
}

.w3c-gate__figure.is-incorrect dd,
.w3c-gate__figure.is-incorrect > b {
	color: var(--w3c-gate-not-answered);
}

.w3c-gate__figure.is-skipped dd,
.w3c-gate__figure.is-skipped > b {
	color: var(--w3c-muted);
}

.w3c-gate__percentile {
	margin: 0;
	color: var(--w3c-muted);
	font-size: 13px;
}

/* Analysis blocks --------------------------------------------------------- */
.w3c-gate__analysis {
	margin-bottom: 26px;
	padding: 22px 24px;
	border: 1px solid var(--w3c-border);
	border-radius: var(--w3c-gate-radius);
	background: var(--w3c-surface);
}

.w3c-gate__analysis h2 {
	margin: 0 0 14px;
	font-size: 19px;
}

.w3c-gate__analysis table {
	margin-bottom: 0;
}

.w3c-gate__analysis td,
.w3c-gate__analysis th {
	font-variant-numeric: tabular-nums;
}

.w3c-gate__analysis td:not(:first-child),
.w3c-gate__analysis thead th:not(:first-child) {
	text-align: right;
}

/* Review list ------------------------------------------------------------- */
.w3c-gate__review-list {
	margin-top: 8px;
}

.w3c-gate__review-list h2 {
	margin-bottom: 16px;
}

/* Result actions ---------------------------------------------------------- */
.w3c-gate__actions,
.w3c-gate__result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0;
}

/* =========================================================================
 * 16. Narrow layouts
 *
 * Desktop is the base; each query below subtracts. Every grid template that
 * changes is restated in full so a wide template can never survive into a
 * narrow one.
 * ======================================================================= */
@media (max-width: 1200px) {
	.w3c-gate__subjects {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.w3c-gate__head,
	.w3c-gate--series-single .w3c-gate__head {
		grid-template-columns: minmax(0, 1fr) 290px;
	}
}

@media (max-width: 1024px) {
	/* Hub and catalogue grids. */
	.w3c-gate__cards,
	.w3c-gate--series .w3c-gate__cards,
	.w3c-gate__series-grid,
	.w3c-gate__exams {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	/* The paper and series headers stack; the CTA panel stops sticking. */
	.w3c-gate__head,
	.w3c-gate--series-single .w3c-gate__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-gate__cta {
		position: static;
		top: auto;
	}

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

	.w3c-gate__test-state {
		justify-content: flex-start;
	}

	.w3c-gq__option,
	.w3c-exam__option {
		grid-template-columns: 22px 26px minmax(0, 1fr);
	}

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

	.w3c-gate__score,
	.w3c-gate__scorecard {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-gate__score-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* --------------------------------------------------------------------
	 * Exam: one column, and the rail becomes a bottom sheet. The shell is
	 * never position: fixed here — that is what broke the workspace on
	 * tablets — so the page scrolls normally.
	 * ----------------------------------------------------------------- */
	.w3c-exam {
		display: block;
		min-height: auto;
		padding-bottom: 64px;
	}

	.w3c-exam__topbar {
		position: sticky;
		top: var(--w3c-exam-top);
		z-index: 30;
	}

	.w3c-exam__question {
		overflow: visible;
		min-height: 40vh;
	}

	.w3c-exam__footer {
		position: sticky;
		bottom: 56px;
		z-index: 25;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
	}

	.w3c-exam__rail {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		max-height: min(74vh, 560px);
		border-top: 1px solid var(--w3c-border-strong);
		border-left: 0;
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
		transform: translateY(calc(100% - 46px));
		transition: transform 220ms ease;
	}

	.w3c-exam__rail-toggle {
		display: flex;
		border-radius: 14px 14px 0 0;
	}

	/* Open on the script's class, on the toggle's own state, and on focus
	 * reaching the sheet — so the palette is reachable by keyboard even if
	 * the script never runs. */
	.w3c-exam__rail.is-open,
	.w3c-exam.is-rail-open .w3c-exam__rail,
	.w3c-exam__rail:focus-within,
	.w3c-exam:has(.w3c-exam__rail-toggle[aria-expanded="true"]) .w3c-exam__rail {
		transform: translateY(0);
	}

	.w3c-exam__palette {
		max-height: 46vh;
	}

	.w3c-exam__palette-grid,
	.w3c-exam__palette[role="group"],
	.w3c-exam__palette [role="group"] {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.w3c-exam__legend {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.w3c-exam__keypad {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.w3c-gate__band {
		flex-direction: column;
		align-items: flex-start;
	}

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

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

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

	.w3c-exam__palette-grid,
	.w3c-exam__palette[role="group"],
	.w3c-exam__palette [role="group"] {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}

/* The admin bar is 46px tall below 782px; anything pinned to the viewport
 * has to start under it or the exam UI is clipped for every signed-in
 * editor. */
@media (max-width: 782px) {
	body.admin-bar .w3c-exam {
		--w3c-exam-top: 46px;
	}
}

@media (max-width: 700px) {
	/* A data table cannot shrink past its content, so below this width the
	 * module's tables scroll inside their own box rather than pushing the
	 * page sideways. */
	.w3c-gate table,
	.w3c-gate__table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}

	.w3c-gate__cards,
	.w3c-gate--series .w3c-gate__cards,
	.w3c-gate__series-grid,
	.w3c-gate__exams {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.w3c-gate__head,
	.w3c-gate--series-single .w3c-gate__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

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

	.w3c-gq__option,
	.w3c-exam__option {
		grid-template-columns: 20px 24px minmax(0, 1fr);
		gap: 10px;
	}

	.w3c-gq__review-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.w3c-gate__score,
	.w3c-gate__scorecard {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}

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

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

	.w3c-exam__palette-grid,
	.w3c-exam__palette[role="group"],
	.w3c-exam__palette [role="group"] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.w3c-exam__keypad {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.w3c-calc__keys,
	.w3c-exam__calc-keys {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	main.w3c-gate--test,
	main.w3c-gate--question,
	main.w3c-gate--archive,
	main.w3c-gate--series-single,
	main.w3c-gate--result {
		padding-top: 16px;
	}

	.w3c-gate__section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.w3c-gq {
		padding: 18px 16px;
	}

	.w3c-gq__option,
	.w3c-exam__option {
		grid-template-columns: 20px 24px minmax(0, 1fr);
		padding: 11px 12px;
	}

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

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

	.w3c-gate__test {
		grid-template-columns: minmax(0, 1fr);
		padding: 14px 16px;
	}

	.w3c-gate__band {
		padding: 20px;
	}

	.w3c-gate__stats {
		gap: 10px;
	}

	ul.w3c-gate__stats > li,
	.w3c-gate__stat {
		flex: 1 1 132px;
		min-width: 0;
		padding: 12px 14px;
	}

	.w3c-exam__topbar {
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 12px;
	}

	.w3c-exam__sectionbar,
	.w3c-exam__timerbar,
	.w3c-exam__infobar,
	.w3c-exam__qno,
	.w3c-exam__question,
	.w3c-exam__footer {
		padding-right: 12px;
		padding-left: 12px;
	}

	.w3c-exam__footer button {
		flex: 1 1 calc(50% - 6px);
		padding: 0 10px;
	}

	.w3c-exam__save,
	.w3c-exam__next {
		margin-left: 0;
	}

	.w3c-exam__palette-grid,
	.w3c-exam__palette[role="group"],
	.w3c-exam__palette [role="group"] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 8px;
	}

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

	.w3c-exam__keypad {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.w3c-calc__keys,
	.w3c-exam__calc-keys {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* 320px: the floor. Nothing may overflow horizontally here. */
@media (max-width: 420px) {
	.w3c-gate__cards,
	.w3c-gate--series .w3c-gate__cards,
	.w3c-gate__series-grid,
	.w3c-gate__exams,
	.w3c-gate__subjects,
	.w3c-gate__head,
	.w3c-gate--series-single .w3c-gate__head,
	.w3c-gate__test,
	.w3c-gq__review-grid,
	.w3c-gate__score,
	.w3c-gate__scorecard {
		grid-template-columns: minmax(0, 1fr);
	}

	.w3c-gate__score-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.w3c-gq__option,
	.w3c-exam__option {
		grid-template-columns: 18px 22px minmax(0, 1fr);
		gap: 8px;
		padding: 10px;
	}

	.w3c-gq__option-key,
	.w3c-exam__option-key {
		width: 22px;
		height: 22px;
		font-size: 12px;
	}

	.w3c-gate__chips .w3c-gate__chip,
	.w3c-gate__year {
		min-width: 68px;
		padding: 8px 10px;
		font-size: 14px;
	}

	.w3c-gate__card,
	.w3c-gate__exam {
		padding: 18px 16px;
	}

	.w3c-gq {
		padding: 16px 12px;
	}

	.w3c-gq__body,
	.w3c-gq__option-text {
		font-size: 15.5px;
	}

	.w3c-exam {
		--w3c-gate-tile: 36px;
	}

	.w3c-exam__palette-grid,
	.w3c-exam__palette[role="group"],
	.w3c-exam__palette [role="group"] {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 8px;
	}

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

	.w3c-exam__keypad {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.w3c-calc__keys,
	.w3c-exam__calc-keys {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.w3c-exam__calc,
	.w3c-calc {
		right: 8px;
		left: 8px;
		width: auto;
		max-width: none;
	}

	.w3c-exam__footer button {
		flex: 1 1 100%;
	}
}

/* =========================================================================
 * 17. Reduced motion
 *
 * The site's only prefers-reduced-motion block covers the header, home page
 * and footer, so this module declares its own.
 * ======================================================================= */
@media (prefers-reduced-motion: reduce) {
	.w3c-gate *,
	.w3c-exam *,
	.w3c-gq *,
	.w3c-calc * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.w3c-gate__subject:hover,
	.w3c-exam__tile:hover {
		transform: none;
	}

	.w3c-exam__timer.is-critical {
		animation: none;
	}

	.w3c-exam__rail {
		transition: none;
	}
}