/* Layout shell for quiz + side panel */
.quiz-layout-shell {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
}

#quiz-layout-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
}

#end-screen {
	max-height: 100vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	align-items: flex-start;
	padding: 5vh 1rem;
    font-size: clamp(0.8rem, 1vh, 1.1rem);
}

#end-screen .modal {
	max-height: 90vh;
	overflow-y: auto;
	/*width: min(760px, 98%);*/
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

/* Compact look for short/simple results so screenshots feel centered and intentional. */
#end-screen .modal.compact-result-card {
	width: min(460px, 96%);
	margin: 0 auto;
	padding: 1rem 1rem 0.85rem;
	gap: 0.45rem;
}

#end-screen .modal.compact-result-card #end-screen-results-content {
	text-align: center;
}

#end-screen .modal.compact-result-card #end-screen-results-content h2 {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
}

#end-screen .modal.compact-result-card #end-screen-results-content p {
	margin: 0.08rem 0;
	font-size: 0.92rem;
	line-height: 1.25;
}

#end-screen .modal.compact-result-card .btn-group {
	margin-top: 0.55rem !important;
}

/* Step-by-step exam results card styling */
#end-screen .modal.step-results-card {
	width: min(720px, 96%);
	margin: 0 auto;
	padding: 1.2rem;
	gap: 0.6rem;
}

#end-screen .modal.step-results-card .print-certificate-header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: start;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 2px solid #e5e7eb;
}

#end-screen .modal.step-results-card .print-certificate-header .print-certificate-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
}

#end-screen .modal.step-results-card .print-mastery-box {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

#end-screen .modal.step-results-card .print-mastery-label {
	font-size: 0.75rem;
	color: #666;
	margin: 0;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
}

#end-screen .modal.step-results-card .print-mastery-score {
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}

#end-screen .modal.step-results-card .print-stamp {
	display: inline-block;
	padding: 4px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#end-screen .modal.step-results-card .print-stamp.passed {
	background-color: #d1fae5;
	color: #065f46;
}

#end-screen .modal.step-results-card .print-stamp.failed {
	background-color: #fee2e2;
	color: #7f1d1d;
}

#end-screen .modal.step-results-card #end-screen-results-content {
	margin: 12px 0;
	padding: 0;
}

#end-screen .modal.step-results-card .btn-group {
	margin-top: 12px;
}

/* Off-screen social media card stage for PNG capture. */
.result-capture-stage {
	position: fixed;
	left: -10000px;
	top: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.result-capture-card {
	width: 1600px;
	height: 900px;
	padding: 40px;
	box-sizing: border-box;
	background: radial-gradient(circle at 20% 10%, #1f2a44 0%, #0f172a 55%, #020617 100%);
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.result-capture-card.is-square {
	width: 1080px;
	height: 1080px;
	padding: 44px;
}

.result-capture-card .result-capture-modal {
	width: 100%;
	height: 100%;
	max-height: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 24px;
	border-radius: 16px;
	box-sizing: border-box;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.result-capture-card .result-capture-modal .btn-group {
	display: none !important;
}

.result-capture-card .result-capture-modal .print-only {
	display: block !important;
}

.result-capture-card .result-capture-modal .print-certificate-footer {
	margin-top: auto;
}

.print-only {
	display: none;
}

/* Show certificate for step-by-step exam results (on-screen, not just print) */
#end-screen .modal.step-results-card .print-certificate-header {
	display: grid !important;
}

#end-screen .modal.step-results-card .print-certificate-footer {
	display: none;
}

/* Lock background scroll while quiz overlays are active. */
body.modal-open {
	overflow: hidden;
}

.streak-celebration-overlay {
	align-items: center;
	justify-content: center;
	padding: 1rem;
	backdrop-filter: blur(5px);
	background:
		radial-gradient(circle at 10% 20%, rgba(251, 191, 36, 0.28), transparent 42%),
		radial-gradient(circle at 90% 15%, rgba(34, 197, 94, 0.22), transparent 44%),
		radial-gradient(circle at 45% 92%, rgba(56, 189, 248, 0.22), transparent 45%),
		rgba(15, 23, 42, 0.78);
	opacity: 0;
	transition: opacity 0.22s ease;
	z-index: 1200;
}

.streak-celebration-overlay.is-visible {
	opacity: 1;
}

.streak-celebration-card {
	position: relative;
	width: min(560px, 96vw);
	border-radius: 20px;
	padding: 1.3rem 1.2rem 1.15rem;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.38);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 252, 0.95));
	box-shadow:
		0 24px 55px rgba(15, 23, 42, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.2) inset;
	overflow: hidden;
	transform: translateY(14px) scale(0.98);
	animation: streak-celebration-pop 0.3s ease forwards;
}

.streak-celebration-flare {
	position: absolute;
	inset: -80px -50px auto auto;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(234, 179, 8, 0.4) 0%, transparent 70%);
	pointer-events: none;
	filter: blur(1px);
}

.streak-celebration-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.09);
	color: #0f172a;
	cursor: pointer;
	font-size: 1rem;
}

.streak-celebration-close:hover {
	background: rgba(15, 23, 42, 0.17);
}

.streak-celebration-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0.36rem 0.7rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	color: #78350f;
	background: linear-gradient(120deg, #fde68a, #fbbf24);
}

.streak-celebration-title {
	margin: 0.7rem 0 0.45rem;
	font-size: clamp(1.4rem, 4vw, 2.05rem);
	line-height: 1.1;
	color: #0f172a;
	text-wrap: balance;
}

.streak-celebration-message {
	margin: 0;
	font-size: clamp(0.98rem, 2.6vw, 1.12rem);
	line-height: 1.45;
	color: #1e293b;
}

.streak-celebration-note {
	margin: 0.62rem 0 0;
	font-size: 0.92rem;
	line-height: 1.35;
	color: #334155;
	opacity: 0.94;
}

.streak-celebration-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.streak-celebration-actions .btn {
	flex: 1 1 200px;
	justify-content: center;
}

@keyframes streak-celebration-pop {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 560px) {
	.streak-celebration-card {
		padding: 1.05rem 0.95rem 0.95rem;
		border-radius: 16px;
	}

	.streak-celebration-actions .btn {
		flex: 1 1 100%;
	}
}

/* Keep primary action reachable, even with long overlay content. */
#repetition-overlay .btn-group,
#end-screen .btn-group {
	position: sticky;
	bottom: 0;
	padding-top: 0.75rem;
	background: inherit;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	z-index: 1;
}

.quiz-main-pane {
	flex: 1 1 auto;
	min-width: 0;
}

.shared-context-box {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.377);
    padding-bottom: 0.8vw;
}

#question-text {
    font-weight: normal !important;
}

.step-label {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--primary-color, #000000);
    /* Bruker din primærfarge */
    margin-right: 0.35rem;
    /* Gir litt luft til selve teksten */
    display: inline-block;
}

/* Hvis du vil at den skal stå helt til venstre, 
   kan vi sørge for at teksten ikke "wrapper" under bokstaven */
.step-log-entry-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* Definer selve animasjonen */
@keyframes pulse-highlight {
    0% {
        transform: scale(1);
        background-color: transparent;
    }

    30% {
        transform: scale(1.02);
        /* Vokser ørlite */
        background-color: rgba(62, 184, 255, 0.1);
        /* Svak blåfarge (juster etter tema) */
    }

    100% {
        transform: scale(1);
        background-color: transparent;
    }
}

/* Klassen som trigger animasjonen */
.pulse-new-content {
    animation: pulse-highlight 0.6s ease-out;
}

#step-history-sidebar {
	display: none;
	flex-direction: column;
	width: min(34vw, 360px);
	max-height: calc(100vh - 10px);
	overflow-y: auto;
	padding: 1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	border-radius: 10px;
}

.quiz-layout-shell.step-sidebar-active #step-history-sidebar {
	display: flex;
    flex: 0 0 40%;
}

.quiz-layout-shell.step-sidebar-active .quiz-main-pane {
    flex: 0 0 60%;
}
.step-history-title {
	margin: 0 0 0.9rem;
	font-size: 1rem;
	letter-spacing: 0.01em;
}

.step-history-content {
	display: grid;
	gap: 0.75rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.step-log-entry-card {
	/*padding: 0.8rem;*/
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
	display: grid;
	gap: 0.42rem;
}

.step-log-label {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	opacity: 0.82;
}

.step-log-question,
.step-log-correct,
.step-log-explanation {
	margin: 0;
}

.step-log-explanation mjx-container{
    margin: 0;
    font-size: 1rem !important;
}
.step-log-correct strong {
	font-weight: 700;
}

.step-history-meta {
	margin: 0;
	font-size: 0.86rem;
	opacity: 0.8;
}

.step-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.step-history-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.55rem;
	align-items: start;
	padding: 0.45rem 0.35rem;
	border-radius: 8px;
}

.step-history-item.is-active {
	background: rgba(144, 238, 144, 0.12);
}

.step-history-item.is-complete {
	opacity: 0.72;
}

.step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.16);
}

.step-copy {
	margin: 0;
}

.exam-warning-overlay {
	backdrop-filter: blur(4px);
	background: rgba(15, 23, 42, 0.72);
}

.exam-warning-card {
	max-width: 620px;
	border: 1px solid rgba(245, 158, 11, 0.55);
	background: linear-gradient(145deg, rgba(39, 29, 8, 0.98), rgba(24, 19, 8, 0.97));
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(251, 191, 36, 0.14) inset;
	text-align: center;
}

.exam-warning-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1rem;
	background: rgba(245, 158, 11, 0.16);
	border: 1px solid rgba(251, 191, 36, 0.3);
	color: #fcd34d;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.exam-warning-card h2 {
	margin: 0;
	font-size: 1.2rem;
	color: #fef3c7;
}

.exam-warning-card p {
	margin: 0.75rem 0 0;
	font-size: 0.98rem;
	line-height: 1.55;
	color: #f8fafc;
}

.exam-warning-mobile-note {
	padding: 0.8rem 0.95rem;
	border-radius: 12px;
	background: rgba(251, 191, 36, 0.14);
	border: 1px solid rgba(251, 191, 36, 0.28);
	color: #fde68a;
	font-weight: 700;
}

#step-history-fab {
	position: fixed;
	right: 14px;
	bottom: 18px;
	z-index: 1150;
	border: 0;
	border-radius: 999px;
	padding: 0.72rem 1rem;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: #f8fafc;
	background: linear-gradient(135deg, #1d4ed8, #0f766e);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.34);
}

#step-history-fab.hidden {
	display: none !important;
}

.step-history-mobile-topbar {
	display: none;
}

#step-history-mobile-backdrop {
	display: none;
}

@media (max-width: 768px) {
	#step-history-sidebar {
		display: none !important;
	}

	#step-history-mobile-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1140;
		background: rgba(2, 6, 23, 0.62);
		backdrop-filter: blur(2px);
	}

	#step-history-mobile-backdrop.hidden {
		display: none;
	}

	body.mobile-step-history-open #step-history-sidebar {
		display: flex !important;
		position: fixed;
		inset: 0;
		z-index: 1150;
		width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		overflow: hidden;
		background: linear-gradient(180deg, rgba(5, 12, 24, 0.98), rgba(16, 27, 45, 0.97));
	}

	body.mobile-step-history-open #step-history-sidebar .step-history-mobile-topbar {
		display: flex;
		justify-content: flex-end;
		padding: 0.7rem 0.85rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		background: rgba(2, 6, 23, 0.52);
	}

	body.mobile-step-history-open #step-history-sidebar .step-history-title {
		padding: 0.65rem 0.85rem 0;
		margin: 0;
	}

	body.mobile-step-history-open #step-history-sidebar .step-history-content {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 0.8rem 0.85rem 1rem;
	}
}

@media (max-width: 980px) {
	.quiz-layout-shell.step-sidebar-active {
		flex-direction: column;
	}

	.quiz-layout-shell.step-sidebar-active #step-history-sidebar {
        flex: 0 0 40%;
		width: 100%;
		max-height: 100vhx;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 8px;
        background: rgb(0, 0, 0);
        color: white;
	}
    .quiz-layout-shell.step-sidebar-active .quiz-main-pane {
        flex: 0 0 60%;
	}
}

@media (max-width: 640px) {
	.quiz-layout-shell.step-sidebar-active #step-history-sidebar {
		display: none;
	}

    .quiz-layout-shell.step-sidebar-active .quiz-main-pane {
        flex: 0 0 60%;
	}
}

/* Global scoreboard summary card */
.global-summary-card {
	grid-column: 1 / -1;
	margin-bottom: 14px;
	background: linear-gradient(135deg, rgba(219, 234, 254, 0.95) 0%, rgba(224, 231, 255, 0.98) 48%, rgba(254, 240, 138, 0.88) 100%);
	border: 1px solid rgba(59, 130, 246, 0.25);
	gap: 0;
}

.global-summary-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.global-summary-intro {
	flex: 1 1 320px;
}

.global-summary-title {
	margin: 0;
	font-size: 1.18rem;
	color: #0f172a;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.global-summary-title-icon {
	color: #2563eb;
}

.global-summary-copy {
	margin: 8px 0 0;
	color: #1e293b;
	font-size: 0.96rem;
	line-height: 1.45;
}

.global-summary-level {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: #1d4ed8;
	font-size: 0.82rem;
	font-weight: 800;
	white-space: nowrap;
}

.global-summary-progress {
	margin-top: 14px;
}

.global-summary-progress-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 0.82rem;
	color: #334155;
	font-weight: 700;
}

.global-summary-progress-track {
	height: 12px;
	width: 100%;
	border-radius: 999px;
	background: rgba(148, 163, 184, 0.28);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.global-summary-progress-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb 0%, #06b6d4 42%, #f59e0b 100%);
	transition: width 260ms ease;
}

.global-summary-stats {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	text-align: center;
}

.global-summary-stat {
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(59, 130, 246, 0.18);
	border-radius: 12px;
	padding: 10px 6px;
}

.global-summary-stat-icon {
	display: inline-block;
	font-size: 1.3rem;
	margin-bottom: 4px;
}

.global-summary-stat-icon--points {
	color: #f59e0b;
}

.global-summary-stat-icon--days {
	color: #3b82f6;
}

.global-summary-stat-icon--best {
	color: #8b5cf6;
}

.global-summary-stat-value {
	font-size: 1.1rem;
	font-weight: 800;
	color: #0f172a;
}

.global-summary-stat-label {
	font-size: 0.72rem;
	color: #64748b;
	font-weight: 600;
	margin-top: 2px;
}

@keyframes stats-flame-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.35) rotate(5deg);
	}
}

.stats-flame-animated {
	animation: stats-flame-pulse 0.85s ease-in-out infinite;
	transform-origin: center;
}

@media (max-width: 760px) {
	.global-summary-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-height: 600px) {
    .shared-context-box {
        margin-bottom: clamp(2px, 1vh, 1.1rem);
    }
}



/* End-session table for step-by-step summaries */
#results-table {
	margin-top: 0.2rem;
}

/* Topic analysis section (below results table) */
.topic-analysis-section {
	margin-top: 1.2rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.topic-analysis-title {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	opacity: 0.9;
}

.topic-tag-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.topic-tag-item {
	display: grid;
	grid-template-columns: minmax(110px, 1.4fr) 1fr 42px;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 0.88rem;
}

.topic-tag-item.tag-mastery-high {
	background: rgba(34, 197, 94, 0.10);
	border: 1px solid rgba(34, 197, 94, 0.30);
}

.topic-tag-item.tag-mastery-mid {
	background: rgba(234, 179, 8, 0.10);
	border: 1px solid rgba(234, 179, 8, 0.30);
}

.topic-tag-item.tag-mastery-low {
	background: rgba(248, 113, 113, 0.10);
	border: 1px solid rgba(248, 113, 113, 0.30);
}

.topic-tag-label {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topic-tag-bar-wrapper {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.topic-tag-bar {
	height: 100%;
	border-radius: 999px;
	transition: width 300ms ease;
}

.tag-mastery-high .topic-tag-bar { background: #22c55e; }
.tag-mastery-mid  .topic-tag-bar { background: #eab308; }
.tag-mastery-low  .topic-tag-bar { background: #f87171; }

.topic-tag-percent {
	font-weight: 700;
	font-size: 0.85rem;
	text-align: right;
	white-space: nowrap;
}

.tag-mastery-high .topic-tag-percent { color: #22c55e; }
.tag-mastery-mid  .topic-tag-percent { color: #ca8a04; }
.tag-mastery-low  .topic-tag-percent { color: #f87171; }

/* Focused Mode: strength / weakness groups */
.topic-focused-group {
	margin-bottom: 0.85rem;
}

.topic-focused-group:last-child {
	margin-bottom: 0;
}

.topic-focused-group-title {
	font-size: 0.82rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	display: flex;
	align-items: center;
	gap: 6px;
}

.topic-focused-group-copy {
	margin: 0 0 0.6rem;
	font-size: 0.84rem;
	line-height: 1.4;
	color: rgba(66, 32, 6, 0.88);
}

.topic-focused-strengths-title  { color: #22c55e; }
.topic-focused-weaknesses-title { color: #f87171; }

.topic-focused-group-perfect {
	padding: 0.7rem;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(255, 248, 220, 0.98), rgba(255, 236, 179, 0.96));
	border: 1px solid rgba(217, 119, 6, 0.38);
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.28);
}

.topic-focused-perfect-title {
	color: #b45309;
	text-shadow: none;
}

.topic-tag-item-perfect {
	border: 1px solid rgba(217, 119, 6, 0.45) !important;
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
	background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.95)) !important;
}

.topic-tag-item-perfect .topic-tag-label,
.topic-tag-item-perfect .topic-tag-percent {
	color: #b45309;
}

.topic-tag-item-perfect .topic-tag-bar {
	background: #22c55e;
}

.results-table {
	display: grid;
	gap: 0.8rem;
	padding: 0.75rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.results-table-head,
.results-step-row {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 90px 86px;
	align-items: center;
	gap: 5px;
}

.results-table-head {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	opacity: 0.88;
	padding: 0 0.35rem 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.results-task-group {
	display: grid;
	gap: 0.35rem;
}

.results-task-header {
	margin-top: 0.35rem 0;
    margin-bottom: 0px;
	font-size: 0.93rem;
	font-weight: 700;
	color: #161616;
    text-align: left;
}

.results-step-row {
	padding: 0.42rem 0.35rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.results-step-row.is-correct {
	border-color: rgba(34, 197, 94, 0.45);
	background: rgba(34, 197, 94, 0.08);
}

.results-step-row.is-wrong {
	border-color: rgba(248, 113, 113, 0.45);
	background: rgba(248, 113, 113, 0.08);
}

.results-col-step,
.results-col-status,
.results-col-points {
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

.results-col-question {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: break-word;
	opacity: 0.95;
    text-align: left;
}

.results-col-status .fa-circle-check {
	color: #22c55e;
}

.results-col-status .fa-circle-xmark {
	color: #f87171;
}

@media (max-width: 600px) {
	.results-table {
		width: 100%;
		padding: 0.5rem;
		gap: 0.5rem;
	}

	.results-table-head,
	.results-step-row {
		grid-template-columns: minmax(86px, 1fr) minmax(72px, 1fr) minmax(72px, 1fr);
		gap: 6px;
	}

	.results-table-head .hide-on-mobile,
	.results-step-row .hide-on-mobile {
		display: none !important;
	}

	.results-table-head {
		padding: 0 0.25rem 0.35rem;
	}

	.results-step-row {
		padding: 0.28rem 0.25rem;
	}

	.results-col-step,
	.results-col-status,
	.results-col-points {
		white-space: nowrap;
	}

	.results-task-header {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Keep full question column visible in generated evidence card on mobile. */
	.result-capture-card .results-table-head,
	.result-capture-card .results-step-row {
		grid-template-columns: 62px minmax(0, 1fr) 90px 86px;
	}

	.result-capture-card .results-table-head .hide-on-mobile,
	.result-capture-card .results-step-row .hide-on-mobile {
		display: block !important;
	}
}

@media (max-width: 760px) {
	.results-table-head,
	.results-step-row {
		grid-template-columns: 48px minmax(0, 1fr) 66px 66px;
		gap: 8px;
	}

	.results-col-question {
		font-size: 0.88rem;
	}
}

@media (max-width: 520px) {
    .shared-context-box {
        font-size: clamp(0.8rem, 1vh, 1.1rem);
    }

    #question-text {
    font-size: clamp(0.8rem, 2.5vh, 1.1rem) !important;
    }

	.global-summary-card {
		padding: 16px;
	}

	.global-summary-level {
		width: 100%;
		justify-content: center;
	}

	.global-summary-progress {
        margin-top: 5px;
	}

    .global-summary-progress-head {
        font-size: 0.78rem;
    }

	.global-summary-stat {
        padding: 5px 3px;
	}

    .global-summary-stat-value {
        font-size: 0.78rem;
	}

    #global-summary-header{
        gap: 2px;
    }
    .global-summary-head{
        gap: 2px;
    }

    .scoreboard-header{
        padding: 5px 10px;
    }
}

@media print {
	@page {
		size: A4;
		margin: 10mm;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box !important;
	}

	html,
	body {
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		color: #000 !important;
		overflow: visible !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	#quiz-container,
	#step-history-sidebar,
	.quiz-layout-shell {
		display: none !important;
	}

	.main-container {
		overflow: visible !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	#end-screen {
		display: block !important;
		position: static !important;
		inset: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow: visible !important;
		margin: 0 auto !important;
		padding: 0 !important;
		background: #fff !important;
	}

	#end-screen .modal {
		display: block !important;
		position: static !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow: visible !important;
		margin: 0 auto !important;
		padding: 12px !important;
		background: #fff !important;
		color: #000 !important;
		border: 2px solid #0f172a !important;
		border-radius: 12px !important;
		box-shadow: none !important;
	}

	#end-screen-results-content {
		width: 100% !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	.print-only {
		display: block !important;
	}

	#end-screen .btn,
	#end-screen .btn-group {
		display: none !important;
	}

	.print-certificate-header {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 8px;
		align-items: start;
		padding-bottom: 8px;
		margin: 0 0 10px 0 !important;
		break-before: avoid;
		page-break-before: avoid;
		border-bottom: 2px solid #111;
	}

	.print-certificate-title {
		font-size: 1.2rem;
		font-weight: 800;
		letter-spacing: 0.02em;
		margin: 0;
		break-before: avoid;
		page-break-before: avoid;
	}

	.print-mastery-box {
		text-align: right;
	}

	.print-mastery-label {
		margin: 0;
		font-size: 0.85rem;
		font-weight: 700;
		text-transform: uppercase;
	}

	.print-mastery-score {
		margin: 2px 0;
		font-size: 1.05rem;
		font-weight: 900;
	}

	.print-stamp {
		display: inline-block;
		padding: 3px 10px;
		border: 2px solid #14532d;
		border-radius: 999px;
		font-size: 0.78rem;
		font-weight: 900;
		letter-spacing: 0.08em;
		color: #14532d;
	}

	.print-stamp.failed {
		border-color: #991b1b;
		color: #991b1b;
	}

	#end-screen-results-content,
	#results-table,
	#results-table *,
	.results-table,
	.results-task-group,
	.results-step-row,
	.results-table-head,
	.results-col-question,
	.results-col-step,
	.results-col-status,
	.results-col-points,
	.results-task-header,
	#end-screen-results-content p,
	#end-screen-results-content h2 {
		color: #000 !important;
		border-color: #000 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	.results-table,
	.results-table-head,
	.results-task-header,
	.results-step-row {
		background: #fff !important;
	}

	/* Always include Oppgavetekst in print/PDF output. */
	.hide-on-mobile {
		display: block !important;
	}

	table {
		page-break-inside: auto;
	}

	tr {
		page-break-inside: avoid;
		page-break-after: auto;
	}

	.results-task-group {
		break-inside: avoid;
		page-break-inside: avoid;
		break-after: auto;
		page-break-after: auto;
		margin: 0 0 10px 0 !important;
		padding: 6px !important;
	}

	.results-task-header {
		margin-bottom: 2px !important;
		padding: 2px 4px !important;
	}

	.results-table-head {
		margin-bottom: 2px !important;
		padding: 1px 2px !important;
	}

	.results-step-row {
		margin-bottom: 4px !important;
		padding: 4px 8px !important;
	}

	.results-col-question {
		font-size: 0.84rem !important;
		line-height: 1.25 !important;
	}

	.results-step-row:nth-child(even) {
		background: #f5f5f5 !important;
	}

	.results-table {
		border: 1px solid #111 !important;
        padding: 0.4rem;
        gap: 0.4rem;
	}

	.results-step-row {
		break-inside: avoid;
		page-break-inside: avoid;
		break-after: auto;
		page-break-after: auto;
	}

	/* Keep status icons colored in print (exclude from global black text override). */
	#results-table .results-col-status,
	#results-table .status-icon,
	#results-table .status-icon *,
	#results-table .success,
	#results-table .success *,
	#results-table .check-circle,
	#results-table .check-circle *,
	#results-table .fa-circle-check,
	#results-table .fa-check-circle,
	#results-table .fa-solid.fa-circle-check,
	#results-table .fa-regular.fa-circle-check,
	#results-table .error,
	#results-table .error *,
	#results-table .danger,
	#results-table .danger *,
	#results-table .fa-circle-xmark,
	#results-table .fa-times-circle,
	#results-table .fa-solid.fa-circle-xmark,
	#results-table .fa-regular.fa-circle-xmark {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		opacity: 1 !important;
	}

	#results-table .status-icon,
	#results-table .status-icon svg,
	#results-table .fa-circle-check,
	#results-table .fa-check-circle,
	#results-table .fa-solid.fa-circle-check,
	#results-table .fa-regular.fa-circle-check,
	#results-table .fa-circle-xmark,
	#results-table .fa-times-circle,
	#results-table .fa-solid.fa-circle-xmark,
	#results-table .fa-regular.fa-circle-xmark {
		display: inline-block !important;
		opacity: 1 !important;
	}

	#results-table .success,
	#results-table .success *,
	#results-table .status-icon.success,
	#results-table .status-icon.success *,
	#results-table .check-circle,
	#results-table .check-circle *,
	#results-table .fa-circle-check,
	#results-table .fa-check-circle,
	#results-table .fa-solid.fa-circle-check,
	#results-table .fa-regular.fa-circle-check {
		color: #28a745 !important;
		fill: #28a745 !important;
		stroke: #28a745 !important;
	}

	#results-table .error,
	#results-table .error *,
	#results-table .danger,
	#results-table .danger *,
	#results-table .status-icon.error,
	#results-table .status-icon.error *,
	#results-table .fa-circle-xmark,
	#results-table .fa-times-circle,
	#results-table .fa-solid.fa-circle-xmark,
	#results-table .fa-regular.fa-circle-xmark {
		color: #dc3545 !important;
		fill: #dc3545 !important;
		stroke: #dc3545 !important;
	}

	.print-certificate-footer {
		margin-top: 2%;
		padding-top: 2px;
		border-top: 1px solid #666;
		font-size: 0.8rem;
		text-align: right;
		color: #333 !important;
	}

	/* ---- Topic analysis – print layout ---- */
	.topic-analysis-section {
		margin-top: 12px;
		padding-top: 8px;
		border-top: 1px solid #888;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.topic-analysis-title {
		font-size: 0.88rem;
		font-weight: 700;
		margin: 0 0 8px;
		color: #000 !important;
	}

	.topic-tag-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 5px 18px;
	}

	.topic-tag-item {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 8px;
		padding: 3px 6px;
		border-radius: 4px;
		font-size: 0.82rem;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.topic-tag-item.tag-mastery-high {
		background: #dcfce7 !important;
		border: 1px solid #86efac !important;
	}

	.topic-tag-item.tag-mastery-mid {
		background: #fef9c3 !important;
		border: 1px solid #fde047 !important;
	}

	.topic-tag-item.tag-mastery-low {
		background: #fee2e2 !important;
		border: 1px solid #fca5a5 !important;
	}

	.topic-tag-label {
		color: #000 !important;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.topic-tag-bar-wrapper {
		display: none !important;
	}

	.topic-tag-percent {
		font-weight: 700;
		white-space: nowrap;
	}

	.tag-mastery-high .topic-tag-percent { color: #166534 !important; }
	.tag-mastery-mid  .topic-tag-percent { color: #854d0e !important; }
	.tag-mastery-low  .topic-tag-percent { color: #991b1b !important; }

	/* Focused Mode print styles */
	.topic-focused-group {
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 8px;
	}

	.topic-focused-group-title {
		font-size: 0.82rem;
		font-weight: 700;
		margin: 0 0 4px;
		display: flex;
		align-items: center;
		gap: 5px;
		color: #000 !important;
	}

	.topic-focused-strengths-title {
		color: #166534 !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.topic-focused-group-copy {
		margin: 0 0 5px;
		font-size: 0.78rem;
		color: #4a2d0a !important;
	}

	.topic-focused-group-perfect {
		background: #fff7cc !important;
		border: 1px solid #d97706 !important;
		box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.topic-focused-perfect-title {
		color: #92400e !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.topic-focused-weaknesses-title {
		color: #991b1b !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.topic-tag-item-perfect {
		background: #fff7cc !important;
		border: 1px solid #eab308 !important;
		box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.topic-tag-item-perfect .topic-tag-label,
	.topic-tag-item-perfect .topic-tag-percent {
		color: #7c2d12 !important;
	}
}