/* ==========================================================================
   NS Quiz — front-end styles.
   Key colors and radii are CSS variables: to match the site theme, change
   the values in the :root block below (or override them from the theme's
   stylesheet with higher specificity).
   ========================================================================== */
:root {
	--nsq-primary: #0d6efd;
	--nsq-primary-dark: #0b5ed7;
	--nsq-success: #1b9e5a;
	--nsq-success-bg: #e9f8ef;
	--nsq-danger: #d64545;
	--nsq-danger-bg: #fdecec;
	--nsq-bg: #ffffff;
	--nsq-bg-soft: #f5f7fa;
	--nsq-border: #e2e6ea;
	--nsq-text: #1f2530;
	--nsq-text-muted: #6b7280;
	--nsq-number: #e0323c;
	--nsq-radius: 10px;
	--nsq-font: inherit;
}

/* Don't rely on the theme's box-sizing: otherwise padding + width:100%
   on nested blocks overflows the viewport on phones. */
.ns-quiz,
.ns-quiz *,
.ns-quiz *::before,
.ns-quiz *::after {
	box-sizing: border-box;
}

.ns-quiz {
	font-family: var(--nsq-font);
	max-width: 100%;
	overflow-wrap: break-word;
	color: var(--nsq-text);
	background: var(--nsq-bg);
	/* border: 1px solid var(--nsq-border); */
	border-radius: var(--nsq-radius);
	padding: 5px;
	max-width: 100%;
	margin: 24px 0;
	/* box-shadow: 0 1px 3px rgba(16, 24, 40, .06); */
}

.ns-quiz-header { margin-bottom: 4px; }
.ns-quiz-title { margin: 0 0 8px; font-size: 1.4em; }
.ns-quiz-description { color: var(--nsq-text-muted); margin-bottom: 12px; }
.ns-quiz-description p, .ns-question-text p, .ns-option-content p,
.ns-matching-left-text p, .ns-matching-chip p { margin: 0 0 .5em; }
.ns-quiz-description img, .ns-question-text img, .ns-option-content img,
.ns-matching-left-text img, .ns-matching-chip img { max-width: 100%; height: auto; }

.ns-quiz-meta { font-size: .9em; color: var(--nsq-text-muted); margin-bottom: 18px; }

.ns-mode-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.ns-mode-hint { font-size: .85em; color: var(--nsq-text-muted); margin-top: 10px; }

.ns-start-btn, .ns-quiz-submit-btn, .ns-next-btn, .ns-prev-btn, .ns-show-explanation-btn {
	background: var(--nsq-primary);
	color: #fff;
	border: none;
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.ns-start-btn:hover, .ns-quiz-submit-btn:hover, .ns-next-btn:hover, .ns-show-explanation-btn:hover {
	background: var(--nsq-primary-dark);
}
.ns-prev-btn {
	background: var(--nsq-bg-soft);
	color: var(--nsq-text);
}
.ns-prev-btn:hover { background: var(--nsq-border); }
.ns-prev-btn:disabled, .ns-next-btn:disabled, .ns-quiz-submit-btn:disabled {
	opacity: .5;
	cursor: default;
}

.ns-quiz-timer-bar {
	background: var(--nsq-bg-soft);
	border-radius: 8px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 2;
	flex: 1;
	min-width: 0;
}
.ns-quiz-timer-fill { height: 6px; background: var(--nsq-primary); border-radius: 4px; flex: 1; transition: width 1s linear, background .3s ease; }
.ns-quiz-timer-label { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ns-quiz-timer-bar.ns-timer-warning .ns-quiz-timer-fill { background: var(--nsq-danger); }

.ns-practice-top-row {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 4px 0;
	background: var(--nsq-bg);
	z-index: 2;
}
.ns-practice-top-row .ns-practice-finish-btn {
	flex: 0 0 auto;
	margin-left: auto;
}

.ns-practice-controls { margin-bottom: 14px; }
.ns-practice-paginator {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.ns-practice-paginator .ns-practice-page-btn {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	border: 1px solid var(--nsq-border) !important;
	border-radius: 6px !important;
	background: var(--nsq-bg) !important;
	color: var(--nsq-text) !important;
	font-size: .8em !important;
	font-weight: 600 !important;
	font-family: var(--nsq-font) !important;
	cursor: pointer;
}
.ns-practice-paginator .ns-practice-page-btn:hover { background: var(--nsq-bg-soft) !important; }
.ns-practice-paginator .ns-practice-page-btn.ns-page-answered {
	background: var(--nsq-success) !important;
	border-color: var(--nsq-success) !important;
	color: #fff !important;
}
.ns-practice-paginator .ns-practice-page-btn.ns-page-current {
	background: var(--nsq-primary) !important;
	border-color: var(--nsq-primary) !important;
	color: #fff !important;
	box-shadow: 0 0 0 2px var(--nsq-bg), 0 0 0 4px var(--nsq-primary) !important;
}
.ns-practice-paginator .ns-practice-page-btn.ns-page-current.ns-page-answered {
	background: var(--nsq-primary) !important;
	border-color: var(--nsq-primary) !important;
}
.ns-practice-progress {
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--nsq-text-muted);
	margin: 0 0 14px;
}
.ns-practice-footer {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-top: 18px;
}
.ns-practice-footer .ns-show-explanation-btn {
	background: var(--nsq-bg-soft);
	color: var(--nsq-text);
	border: 1px solid var(--nsq-border);
}
.ns-practice-footer .ns-show-explanation-btn:hover { background: var(--nsq-border); }
.ns-practice-finish-btn {
	background: transparent;
	color: var(--nsq-text-muted);
	border: 1px solid var(--nsq-border);
	border-radius: 6px;
	padding: 8px 14px;
	font-size: .9em;
	font-weight: 600;
	font-family: var(--nsq-font);
	cursor: pointer;
	white-space: nowrap;
}
.ns-practice-finish-btn:hover { background: var(--nsq-bg-soft); color: var(--nsq-text); }

.ns-question { padding: 20px 0; }
.ns-question.ns-hidden { display: none; }
.ns-question-number {
	font-size: .95em;
	font-weight: 700;
	color: var(--nsq-number) !important;
	margin: 0 0 6px;
}
.ns-question-text { font-size: 1.08em; font-weight: 600; margin: 0 0 14px; }

.ns-options { display: flex; flex-direction: column; gap: 8px; }
.ns-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--nsq-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.ns-option:hover { border-color: var(--nsq-primary); background: var(--nsq-bg-soft); }
.ns-option input { accent-color: var(--nsq-primary); margin-top: 5px; }
.ns-option-letter { font-weight: 700; margin-top: 0px; flex: 0 0 auto; }
.ns-option-content { flex: 1; }

.ns-option.ns-option-correct { border-color: var(--nsq-success); background: var(--nsq-success-bg); }
.ns-option.ns-option-incorrect { border-color: var(--nsq-danger); background: var(--nsq-danger-bg); }

/* Matching / drag & drop */
.ns-matching { display: flex; gap: 24px; flex-wrap: wrap; }
.ns-matching-left { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.ns-matching-target { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ns-matching-left-text { flex: 0 0 150px; font-weight: 500; }
.ns-drop-zone {
	flex: 1 1 160px;
	min-height: 42px;
	border: 2px dashed var(--nsq-border);
	border-radius: 8px;
	display: flex;
	align-items: center;
	padding: 6px 10px;
	transition: border-color .15s ease, background .15s ease;
}
.ns-drop-zone.ns-drop-over { border-color: var(--nsq-primary); background: var(--nsq-bg-soft); }
.ns-drop-placeholder { color: var(--nsq-text-muted); font-size: .85em; }
.ns-matching-target.ns-pair-correct .ns-drop-zone { border-color: var(--nsq-success); background: var(--nsq-success-bg); border-style: solid; }
.ns-matching-target.ns-pair-incorrect .ns-drop-zone { border-color: var(--nsq-danger); background: var(--nsq-danger-bg); border-style: solid; }

.ns-matching-bank { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; align-self: flex-start; background: var(--nsq-bg-soft); border-radius: 8px; padding: 12px; }
.ns-matching-bank-title { margin: 0 0 4px; font-size: .8em; text-transform: uppercase; color: var(--nsq-text-muted); letter-spacing: .04em; }
.ns-matching-chip {
	background: var(--nsq-bg);
	border: 1px solid var(--nsq-border);
	border-radius: 8px;
	padding: 8px 12px;
	cursor: grab;
	user-select: none;
	transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}
.ns-matching-chip:hover { border-color: var(--nsq-primary); }
.ns-matching-bank.ns-drop-over {
	outline: 2px dashed var(--nsq-primary);
	outline-offset: 3px;
}
.ns-matching-chip.ns-chip-selected { border-color: var(--nsq-primary); box-shadow: 0 0 0 2px rgba(13, 110, 253, .25); }

/* While an option is selected, show where it can be dropped. */
.ns-matching.ns-has-selection .ns-drop-zone {
	border-color: var(--nsq-primary);
	background: var(--nsq-bg-soft);
	cursor: pointer;
}
.ns-matching.ns-has-selection .ns-drop-placeholder { color: var(--nsq-primary); }
.ns-matching-chip.ns-chip-placed { opacity: .35; cursor: default; pointer-events: none; }
.ns-drop-zone .ns-matching-chip { cursor: grab; width: 100%; }
.ns-drop-zone .ns-matching-chip.ns-chip-placed { opacity: 1; pointer-events: auto; }

/* Grouping: options bank on the left, categories on the right with one
   drop slot per correct option in that category. */
.ns-grouping {
	display: flex;
	gap: 20px;
}
.ns-grouping-bank {
	flex: 1 1 45%;
	background: var(--nsq-bg-soft);
	border: 1px solid var(--nsq-border);
	border-radius: 8px;
	padding: 12px;
}
.ns-grouping-bank-title {
	margin: 0 0 8px;
	font-size: .8em;
	text-transform: uppercase;
	color: var(--nsq-text-muted);
	letter-spacing: .04em;
}
.ns-bank-note {
	text-transform: none;
	letter-spacing: 0;
	font-style: italic;
	margin-left: 6px;
}
.ns-grouping-bank-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 48px;
	border-radius: 6px;
	transition: background .15s ease;
}
.ns-grouping-bank-items.ns-drop-over {
	background: rgba(13, 110, 253, .08);
	outline: 2px dashed var(--nsq-primary);
	outline-offset: 3px;
}
.ns-grouping-chip {
	background: var(--nsq-bg);
	border: 1px solid var(--nsq-border);
	border-radius: 6px;
	padding: 10px 12px;
	text-align: center;
	font-weight: 500;
	cursor: grab;
	user-select: none;
	transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}
.ns-grouping-chip:hover { border-color: var(--nsq-primary); }
.ns-grouping-chip.ns-chip-selected {
	border-color: var(--nsq-primary);
	box-shadow: 0 0 0 2px rgba(13, 110, 253, .25);
}
.ns-grouping-chip.ns-chip-correct { border-color: var(--nsq-success); background: var(--nsq-success-bg); }
.ns-grouping-chip.ns-chip-wrong { border-color: var(--nsq-danger); background: var(--nsq-danger-bg); }
.ns-chip-correction {
	display: block;
	margin-top: 2px;
	font-size: .85em;
	font-weight: 600;
	color: var(--nsq-danger);
}

.ns-grouping-buckets {
	flex: 1 1 45%;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ns-grouping-bucket {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ns-grouping-bucket .ns-bucket-label {
	margin: 0;
	padding: 10px 12px;
	font-weight: 600;
	text-align: center;
	border-radius: 6px;
	background: var(--nsq-bg-soft);
	border: 1px solid var(--nsq-border);
}
/* Drop slot: one per correct option of the category. */
.ns-bucket-slot {
	min-height: 44px;
	border: 2px dashed var(--nsq-border);
	border-radius: 6px;
	display: flex;
	align-items: stretch;
	transition: border-color .15s ease, background .15s ease;
}
.ns-bucket-slot > .ns-grouping-chip {
	flex: 1;
	margin: -1px;
}
.ns-bucket-slot.ns-drop-over {
	border-color: var(--nsq-primary);
	background: var(--nsq-bg-soft);
}
.ns-grouping.ns-has-selection .ns-bucket-slot:empty {
	border-color: var(--nsq-primary);
	background: var(--nsq-bg-soft);
	cursor: pointer;
}

/* Learning mode: an explanation button under each question */
.ns-learning-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.ns-learning-explain-btn {
	background: var(--nsq-bg-soft);
	color: var(--nsq-text);
	border: 1px solid var(--nsq-border);
	padding: 10px 18px;
	border-radius: 8px;
	font-size: .95em;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.ns-learning-explain-btn:hover:not(:disabled) {
	background: var(--nsq-border);
}
.ns-learning-explain-btn:disabled {
	opacity: .5;
	cursor: default;
}
.ns-learning-lock-hint {
	font-size: .85em;
	color: var(--nsq-text-muted);
}

/* Two-column layout for configuration options inside a question.
   Add class="ns-cols-2" to a wrapper element in the question HTML; on
   narrow screens the columns stack automatically. */
.ns-quiz .ns-cols-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 24px;
	align-items: stretch; /* cells in a row share one height */
	margin: 12px 0;
}
.ns-quiz .ns-cols-2 > * {
	min-width: 0;
	margin-top: 0;
	display: flex;
	flex-direction: column;
}
/* The terminal block fills its cell, so a 3-line and a 4-line option
   side by side render at the same height. */
.ns-quiz .ns-cols-2 pre.cli { margin: 0 0 4px; flex: 1 1 auto; }
.ns-quiz .ns-cols-2 h4,
.ns-quiz .ns-cols-2 .ns-col-title {
	margin: 0 0 6px;
	font-size: .95em;
	font-weight: 600;
	color: var(--nsq-text-muted);
}

/* Explanation */
.ns-explanation-panel {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--nsq-bg-soft);
	border-left: 3px solid var(--nsq-primary);
}
.ns-explanation-heading { font-weight: 600; margin: 0 0 6px; }
.ns-explanation-text { color: var(--nsq-text); font-size: .95em; }

.ns-verdict-correct { color: var(--nsq-success); font-weight: 600; font-size: .8em; }
.ns-verdict-incorrect { color: var(--nsq-danger); font-weight: 600; font-size: .8em; }

/* Final score (exam mode) */
.ns-result-score { text-align: center; padding: 6px 0 24px; }
.ns-result-score .ns-score-number { font-size: 2.6em; font-weight: 700; color: var(--nsq-primary); display: block; }
.ns-result-breakdown { font-size: .95em; margin: 2px 0 8px; }
.ns-breakdown-correct { color: var(--nsq-success); font-weight: 600; }
.ns-breakdown-incorrect { color: var(--nsq-danger); font-weight: 600; }
.ns-breakdown-unanswered { color: var(--nsq-text-muted); font-weight: 600; }
.ns-breakdown-sep { color: var(--nsq-text-muted); }
.ns-result-note { text-align: center; padding: 0 0 24px; margin: -18px 0 0; color: var(--nsq-text-muted); }

/* [ns_quiz_my_results] — the visitor's own attempt history */
.ns-my-results-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--nsq-font);
	color: var(--nsq-text);
}
.ns-my-results-table th,
.ns-my-results-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--nsq-border);
}
.ns-my-results-table th { color: var(--nsq-text-muted); font-weight: 600; }
.ns-my-results-guest,
.ns-my-results-empty,
.ns-my-results-more { color: var(--nsq-text-muted); }
.ns-my-results-more { font-size: 13px; margin: 8px 0 0; }

@media (max-width: 600px) {
	.ns-my-results-table thead { display: none; }
	.ns-my-results-table, .ns-my-results-table tbody, .ns-my-results-table tr, .ns-my-results-table td {
		display: block;
		width: 100%;
	}
	.ns-my-results-table tr { border-bottom: 1px solid var(--nsq-border); padding: 8px 0; }
	.ns-my-results-table td { border: none; padding: 3px 0; }
	.ns-my-results-table td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--nsq-text-muted);
	}
}

/* Wide content inside a question (tables, CLI output in <pre>) must not
   stretch the page sideways — it scrolls on its own. */
.ns-question-text pre,
.ns-option-content pre,
.ns-explanation-text pre,
.ns-question-text table,
.ns-explanation-text table {
	max-width: 100%;
	overflow-x: auto;
	display: block;
}

/* Hint for touch screens: dragging doesn't work there, so the flow is
   "tap the option, then tap the field". */
.ns-matching-hint {
	font-size: .85em;
	color: var(--nsq-text-muted);
	margin: 0 0 10px;
}

@media (max-width: 782px) {
	.ns-quiz {
		/* padding: 16px; */
		margin: 16px 0;
		border-radius: 8px;
	}
	.ns-quiz-title { font-size: 1.2em; }

	/* Comfortable tap targets on touch screens. */
	.ns-start-btn,
	.ns-quiz-submit-btn,
	.ns-next-btn,
	.ns-prev-btn,
	.ns-show-explanation-btn {
		min-height: 48px;
		padding: 12px 18px;
	}
	.ns-option {
		padding: 14px;
		min-height: 48px;
	}
	.ns-matching-chip {
		padding: 12px;
		min-height: 48px;
		display: flex;
		align-items: center;
	}
	.ns-drop-zone { min-height: 52px; }

	/* Mode buttons: full width, stacked. */
	.ns-mode-buttons { flex-direction: column; }
	.ns-mode-buttons .ns-start-btn { width: 100%; }

	/* Exam: full-width submit button. */
	.ns-quiz-submit-btn { width: 100%; }

	.ns-learning-explain-btn { min-height: 48px; width: 100%; }
	.ns-learning-footer { flex-direction: column; align-items: stretch; }

	/* Practice: explanation on its own row, navigation below it. */
	.ns-practice-footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.ns-practice-footer .ns-show-explanation-btn {
		grid-column: 1 / -1;
		order: -1;
	}

	/* Finish now sits with the timer, so it needs to stay usable at the
	   comfortable tap-target size on a phone too. */
	.ns-practice-finish-btn { min-height: 44px; padding: 8px 12px; }
	.ns-practice-top-row { flex-wrap: wrap; }

	/* Two columns don't fit on a phone: categories on top and the options
	   bank pinned to the bottom, so picking an option doesn't require
	   scrolling it out of sight. */
	.ns-grouping { flex-direction: column; gap: 12px; }
	.ns-grouping-buckets { order: 1; }
	.ns-grouping-bank {
		order: 2;
		position: sticky;
		bottom: 0;
		z-index: 3;
		max-height: 38vh;
		overflow-y: auto;
		box-shadow: 0 -4px 12px rgba(16, 24, 40, .1);
	}
	.ns-grouping-chip { min-height: 44px; display: flex; align-items: center; justify-content: center; }
	.ns-bucket-slot { min-height: 48px; }
	/* Once every option is placed, the panel is no longer needed. */
	.ns-grouping-bank.ns-bank-empty { position: static; box-shadow: none; }

	/* Matching: pin its options bank to the bottom as well. */
	.ns-matching-bank {
		position: sticky;
		bottom: 0;
		z-index: 3;
		max-height: 38vh;
		overflow-y: auto;
		border: 1px solid var(--nsq-border);
		box-shadow: 0 -4px 12px rgba(16, 24, 40, .1);
	}
	.ns-matching-bank.ns-bank-empty { position: static; box-shadow: none; }

	/* Configuration options stack on narrow screens. */
	.ns-quiz .ns-cols-2 { grid-template-columns: 1fr; gap: 4px; }

	/* Matching: single column, the answer field under its prompt. */
	.ns-matching { flex-direction: column; gap: 16px; }
	.ns-matching-target {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--nsq-border);
	}
	.ns-matching-left-text { flex: none; }
	.ns-drop-zone { flex: none; width: 100%; }
	.ns-matching-bank { width: 100%; box-sizing: border-box; }
}

@media (max-width: 400px) {
	/* .ns-quiz { padding: 12px; } */
	.ns-result-score .ns-score-number { font-size: 2.1em; }
}