/*
 * GrammarSprint Quiz — styles.
 * Light, paper-like, with a deep green accent and a highlighter yellow for gaps.
 * Typography is inherited from the theme. Change the colours in the variables below.
 */

.gsq {
	--gsq-ink: #1d2a24;
	--gsq-muted: #5d6b64;
	--gsq-line: #e2dfd4;
	--gsq-line-strong: #cfcbbd;
	--gsq-paper: #ffffff;
	--gsq-tint: #f7f5ef;
	--gsq-green: #1f7a4d;
	--gsq-green-dark: #155c39;
	--gsq-green-soft: #e7f3ec;
	--gsq-red: #b5432f;
	--gsq-red-soft: #fbece8;
	--gsq-mark: #ffe58a;
	--gsq-radius: 8px;

	color: var(--gsq-ink);
	margin: 2rem 0;
	font-variant-numeric: tabular-nums;
}

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

.gsq button {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* ---------- Header ---------- */

.gsq-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--gsq-ink);
}

.gsq-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	font-size: 0.9rem;
	color: var(--gsq-muted);
}

.gsq-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--gsq-ink);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
}

.gsq-best {
	color: var(--gsq-green);
	font-weight: 600;
}

.gsq-mode {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--gsq-line-strong);
	border-radius: 999px;
	background: var(--gsq-tint);
}

.gsq-mode-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--gsq-muted);
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	cursor: pointer;
	line-height: 1.4;
}

.gsq-mode-btn[aria-pressed="true"] {
	background: var(--gsq-paper);
	color: var(--gsq-ink);
	font-weight: 600;
	box-shadow: 0 0 0 1px var(--gsq-line-strong);
}

/* ---------- Questions ---------- */

.gsq-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gsq-q {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: 0 10px;
	padding: 20px 0;
	border-bottom: 1px solid var(--gsq-line);
	margin: 0;
	scroll-margin-top: 90px;
}

.gsq-num {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--gsq-muted);
	padding-top: 2px;
	text-align: right;
}

.gsq-q--right .gsq-num { color: var(--gsq-green); }
.gsq-q--wrong .gsq-num { color: var(--gsq-red); }
.gsq-q--missed .gsq-num { color: #9a6b00; }
.gsq-q--missed .gsq-text { background: linear-gradient(transparent 60%, var(--gsq-mark) 60%); }

.gsq-body { min-width: 0; }

.gsq-text {
	margin: 0 0 12px;
	font-size: 1.04em;
	line-height: 1.7;
}

/* The gap in a sentence: a highlighter stroke, filled with the answer once revealed. */
.gsq-blank {
	display: inline-block;
	min-width: 5.5em;
	padding: 0 4px;
	border-bottom: 2px solid var(--gsq-ink);
	line-height: 1.3;
	text-align: center;
}

.gsq-blank.is-filled {
	min-width: 0;
	border-bottom-color: var(--gsq-green);
	color: var(--gsq-green-dark);
	font-weight: 600;
	background: var(--gsq-green-soft);
}

.gsq-input {
	display: inline-block;
	width: 11em;
	max-width: 100%;
	margin: 0 2px;
	padding: 2px 6px;
	border: 0;
	border-bottom: 2px solid var(--gsq-ink);
	border-radius: 0;
	background: var(--gsq-tint);
	color: var(--gsq-ink);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	vertical-align: baseline;
	box-shadow: none;
}

.gsq-input:focus {
	outline: none;
	background: #fff6cf;
	border-bottom-color: var(--gsq-green);
}

.gsq-input.is-correct { background: var(--gsq-green-soft); border-bottom-color: var(--gsq-green); color: var(--gsq-green-dark); }
.gsq-input.is-wrong { background: var(--gsq-red-soft); border-bottom-color: var(--gsq-red); color: var(--gsq-red); text-decoration: line-through; }
.gsq-input.is-empty { animation: gsq-nudge 0.35s; }

@keyframes gsq-nudge {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* Options */
.gsq-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gsq-opt {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 16px 8px 8px;
	border: 1px solid var(--gsq-line-strong);
	border-radius: var(--gsq-radius);
	background: var(--gsq-paper);
	color: var(--gsq-ink);
	text-align: left;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.12s, background-color 0.12s;
}

.gsq-opt:hover:not(:disabled) {
	border-color: var(--gsq-green);
	background: var(--gsq-tint);
}

.gsq-opt:focus-visible,
.gsq-mode-btn:focus-visible,
.gsq-btn:focus-visible,
.gsq-check:focus-visible,
.gsq-finish:focus-visible,
.gsq-link:focus-visible {
	outline: 2px solid var(--gsq-green);
	outline-offset: 2px;
}

.gsq-key {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 5px;
	background: var(--gsq-tint);
	border: 1px solid var(--gsq-line);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gsq-muted);
}

.gsq-opt.is-selected {
	border-color: var(--gsq-ink);
	box-shadow: inset 0 0 0 1px var(--gsq-ink);
}

.gsq-opt.is-selected .gsq-key {
	background: var(--gsq-ink);
	border-color: var(--gsq-ink);
	color: #fff;
}

.gsq-opt:disabled { cursor: default; }

.gsq-opt.is-correct {
	border-color: var(--gsq-green);
	background: var(--gsq-green-soft);
	color: var(--gsq-green-dark);
	font-weight: 600;
}

.gsq-opt.is-correct .gsq-key {
	background: var(--gsq-green);
	border-color: var(--gsq-green);
	color: #fff;
}

.gsq-opt.is-wrong {
	border-color: var(--gsq-red);
	background: var(--gsq-red-soft);
	color: var(--gsq-red);
}

.gsq-opt.is-wrong .gsq-opt-text { text-decoration: line-through; }

.gsq-opt.is-wrong .gsq-key {
	background: var(--gsq-red);
	border-color: var(--gsq-red);
	color: #fff;
}

.gsq-opt.is-dim { opacity: 0.5; }

.gsq-check {
	appearance: none;
	padding: 7px 16px;
	border: 1px solid var(--gsq-ink);
	border-radius: var(--gsq-radius);
	background: var(--gsq-paper);
	color: var(--gsq-ink);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.gsq-check:hover:not(:disabled) { background: var(--gsq-ink); color: #fff; }
.gsq-check:disabled { display: none; }
.gsq--exam .gsq-check { display: none; }

/* Feedback */
.gsq-fb {
	margin-top: 12px;
	padding: 10px 14px;
	border-left: 3px solid var(--gsq-line-strong);
	background: var(--gsq-tint);
	font-size: 0.95rem;
	line-height: 1.55;
}

.gsq-q--right .gsq-fb { border-left-color: var(--gsq-green); }
.gsq-q--wrong .gsq-fb { border-left-color: var(--gsq-red); }

.gsq-fb p { margin: 0; }
.gsq-fb p + p { margin-top: 4px; }
.gsq-fb-head { font-weight: 600; }
.gsq-fb-head.is-right { color: var(--gsq-green-dark); }
.gsq-fb-head.is-wrong { color: var(--gsq-red); }
.gsq-fb-explain { color: var(--gsq-muted); }

/* ---------- Sticky progress bar ---------- */

.gsq-bar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin: 0 -8px;
	padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
	background: var(--gsq-bar-bg, #fff);
	border-top: 1px solid var(--gsq-line-strong);
	box-shadow: 0 -6px 12px -10px rgba(29, 42, 36, 0.25);
}

.gsq-bar-inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gsq-status {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.gsq-progress {
	height: 6px;
	border-radius: 3px;
	background: var(--gsq-line);
	overflow: hidden;
}

.gsq-progress-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--gsq-green);
	transition: width 0.25s ease;
}

.gsq-count {
	font-size: 0.88rem;
	color: var(--gsq-muted);
	white-space: nowrap;
}

.gsq-finish {
	appearance: none;
	padding: 9px 18px;
	border: 0;
	border-radius: var(--gsq-radius);
	background: var(--gsq-green);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	white-space: nowrap;
}

.gsq-finish:hover { background: var(--gsq-green-dark); }

.gsq-nav {
	appearance: none;
	padding: 9px 16px;
	border: 1px solid var(--gsq-ink);
	border-radius: var(--gsq-radius);
	background: var(--gsq-paper);
	color: var(--gsq-ink);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	white-space: nowrap;
}

.gsq-next { background: var(--gsq-ink); color: #fff; }
.gsq-next:hover { background: #000; }
.gsq-prev:hover { background: var(--gsq-tint); }
.gsq-nav[hidden], .gsq-finish[hidden] { display: none; }
.gsq-short { display: none; }
.gsq-nav:focus-visible { outline: 2px solid var(--gsq-green); outline-offset: 2px; }

/* Pages: questions outside the current page are hidden (they stay in the HTML). */
.gsq-q--off { display: none; }
.gsq--done .gsq-list,
.gsq--done .gsq-bar { display: none; }
.gsq--done.gsq--show-all .gsq-list { display: block; }
.gsq--show-all .gsq-q--off { display: grid; }

/* "You skipped N questions" */
.gsq-notice {
	margin-bottom: 10px;
	padding: 12px 14px;
	border: 1px solid #e6c65c;
	border-radius: var(--gsq-radius);
	background: #fff8dc;
	font-size: 0.95rem;
}

.gsq-notice p { margin: 0 0 10px; }

.gsq-notice-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Set / level tabs */
.gsq-sets { margin: 2rem 0; }
.gsq-sets .gsq { margin-top: 0; }

.gsq-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 18px;
	overflow-x: auto;
	scrollbar-width: none;
}

.gsq-tab {
	appearance: none;
	flex: none;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	padding: 9px 16px;
	border: 1px solid var(--gsq-line-strong, #cfcbbd);
	border-radius: 8px;
	background: #fff;
	color: #1d2a24;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.25;
	cursor: pointer;
}

.gsq-tab-level { font-size: 0.75rem; font-weight: 500; color: #5d6b64; }
.gsq-tab:hover { border-color: #1f7a4d; }
.gsq-tab[aria-selected="true"] { background: #1d2a24; border-color: #1d2a24; color: #fff; }
.gsq-tab[aria-selected="true"] .gsq-tab-level { color: #cfd8d3; }
.gsq-tab:focus-visible { outline: 2px solid #1f7a4d; outline-offset: 2px; }

/* ---------- Results ---------- */

.gsq-results {
	margin-top: 28px;
	padding: 26px;
	border: 1px solid var(--gsq-line-strong);
	border-top: 4px solid var(--gsq-green);
	border-radius: var(--gsq-radius);
	background: var(--gsq-paper);
	scroll-margin-top: 80px;
}

.gsq-results:focus { outline: none; }

.gsq-res-top {
	display: flex;
	align-items: center;
	gap: 22px;
}

.gsq-score {
	flex: none;
	line-height: 1;
	white-space: nowrap;
}

.gsq-score-n {
	font-size: 3.4rem;
	font-weight: 800;
	color: var(--gsq-green);
	letter-spacing: -0.02em;
}

.gsq-score-of {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--gsq-muted);
	margin-left: 2px;
}

.gsq-verdict h3 {
	margin: 0 0 4px;
	font-size: 1.35rem;
	line-height: 1.25;
}

.gsq-verdict p {
	margin: 0;
	color: var(--gsq-muted);
}

.gsq-res-sec {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--gsq-line);
}

.gsq-res-sec h4 {
	margin: 0 0 12px;
	font-size: 1.05rem;
}

.gsq-sub {
	margin: -6px 0 12px;
	font-size: 0.9rem;
	color: var(--gsq-muted);
}

/* Topic breakdown */
.gsq-topics {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gsq-topics li {
	display: grid;
	grid-template-columns: minmax(0, 13em) 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	margin: 0;
	font-size: 0.95rem;
}

.gsq-topic-bar {
	height: 8px;
	border-radius: 4px;
	background: var(--gsq-line);
	overflow: hidden;
}

.gsq-topic-bar span {
	display: block;
	height: 100%;
	background: var(--gsq-green);
}

.gsq-topics .is-mid .gsq-topic-bar span { background: #c99a1c; }
.gsq-topics .is-weak .gsq-topic-bar span { background: var(--gsq-red); }

.gsq-topic-n {
	color: var(--gsq-muted);
	font-weight: 600;
}

.gsq-topic-link,
.gsq-topic-link:visited {
	color: var(--gsq-green);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}

.gsq-hint {
	margin: 12px 0 0;
	padding: 8px 12px;
	background: #fff8dc;
	border-radius: 6px;
	font-size: 0.95rem;
}

/* AI prompt */
.gsq-prompt-text {
	margin: 0 0 12px;
	padding: 14px 16px;
	max-height: 240px;
	overflow: auto;
	border: 1px dashed var(--gsq-line-strong);
	border-radius: var(--gsq-radius);
	background: var(--gsq-tint);
	color: var(--gsq-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Buttons */
.gsq-btn,
a.gsq-btn,
a.gsq-btn:visited {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid var(--gsq-ink);
	border-radius: var(--gsq-radius);
	background: var(--gsq-paper);
	color: var(--gsq-ink);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.gsq-btn:hover { background: var(--gsq-tint); }
.gsq-btn:disabled { opacity: 0.6; cursor: progress; }

.gsq-btn--solid,
a.gsq-btn--solid,
a.gsq-btn--solid:visited {
	background: var(--gsq-green);
	border-color: var(--gsq-green);
	color: #fff;
}

.gsq-btn--solid:hover,
a.gsq-btn--solid:hover {
	background: var(--gsq-green-dark);
	border-color: var(--gsq-green-dark);
	color: #fff;
}

/* Tutor block */
.gsq-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-left: -26px;
	margin-right: -26px;
	padding: 22px 26px;
	background: var(--gsq-green-soft);
	border-top: 0;
}

.gsq-cta h4 { margin-bottom: 4px; }
.gsq-cta p { margin: 0; color: var(--gsq-muted); font-size: 0.95rem; }

/* Certificate + retry */
.gsq-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.gsq-cert-box label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.95rem;
}

.gsq-cert-box label span { color: var(--gsq-muted); font-weight: 400; }

.gsq-cert-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gsq-name {
	min-height: 42px;
	padding: 8px 12px;
	width: 15em;
	max-width: 100%;
	border: 1px solid var(--gsq-line-strong);
	border-radius: var(--gsq-radius);
	background: var(--gsq-paper);
	font: inherit;
	color: var(--gsq-ink);
}

.gsq-name:focus { outline: 2px solid var(--gsq-green); outline-offset: 1px; }

.gsq-cert-box .gsq-sub { margin: 8px 0 0; }

/* Mistakes review */
.gsq-review summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05rem;
}

.gsq-review ol {
	margin: 14px 0 0;
	padding-left: 1.6em;
}

.gsq-review li {
	margin: 0 0 14px;
	padding-left: 4px;
}

.gsq-review p { margin: 0 0 3px; line-height: 1.5; }
.gsq-review-q { font-weight: 600; }
.gsq-was { color: var(--gsq-red); text-decoration: line-through; }
.gsq-is { color: var(--gsq-green-dark); font-weight: 600; }
.gsq-review-ex { color: var(--gsq-muted); font-size: 0.92rem; }

/* Footer */
.gsq-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: var(--gsq-radius);
	background: var(--gsq-tint);
	font-size: 0.9rem;
	color: var(--gsq-muted);
}

.gsq-foot p { margin: 0; }
.gsq-foot b { color: var(--gsq-ink); }

.gsq-again {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.gsq-link {
	appearance: none;
	border: 0;
	padding: 0;
	background: none;
	color: var(--gsq-green);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.gsq-link:hover { color: var(--gsq-green-dark); }
.gsq-link:disabled { opacity: 0.6; cursor: progress; }

.gsq-noscript { color: var(--gsq-red); }

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	.gsq-q { grid-template-columns: 1.6rem 1fr; gap: 0 8px; }
	.gsq-text { font-size: 1em; }
	.gsq-opts { flex-direction: column; }
	.gsq-opt { width: 100%; }
	.gsq-bar-inner { gap: 8px; }
	.gsq-count { font-size: 0.78rem; }
	.gsq-finish, .gsq-nav { padding: 10px 14px; font-size: 0.9rem; }
	.gsq-nav-text { display: none; }
	.gsq-long { display: none; }
	.gsq-short { display: inline; }
	.gsq-results { padding: 20px 16px; }
	.gsq-cta { flex-direction: column; align-items: stretch; margin-left: -16px; margin-right: -16px; padding: 20px 16px; }
	.gsq-res-top { gap: 16px; }
	.gsq-score-n { font-size: 2.7rem; }
	.gsq-topics li { grid-template-columns: 1fr auto; gap: 4px 10px; }
	.gsq-topic-bar { grid-column: 1 / -1; grid-row: 2; }
	.gsq-topic-link { grid-column: 1 / -1; }
	.gsq-actions { flex-direction: column; align-items: stretch; }
	.gsq-cert-row { flex-direction: column; }
	.gsq-name { width: 100%; }
	.gsq-again { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.gsq * { transition: none !important; animation: none !important; }
}

@media print {
	.gsq-bar, .gsq-mode, .gsq-foot, .gsq-actions, .gsq-cta { display: none !important; }
}