/* opnF Cert Drill — styled to the opnf.sh theme tokens, with fallbacks so it
 * still looks right if the theme's :root variables are ever missing. */

.odr {
	--odr-bg: var(--bg, #0a0a0a);
	--odr-card: var(--bg-card, #131313);
	--odr-card-hover: var(--bg-card-hover, #1a1a1a);
	--odr-border: var(--border, #222);
	--odr-border-hi: var(--border-hover, #333);
	--odr-text: var(--text, #d4d4d4);
	--odr-dim: var(--text-dim, #888);
	--odr-muted: var(--text-muted, #555);
	--odr-white: var(--white, #e8e8e8);
	--odr-accent: var(--accent, #ff6b1a);
	--odr-accent-hi: var(--accent-hover, #ff8a47);
	--odr-green: var(--green, #22c55e);
	--odr-red: var(--red, #ef4444);
	--odr-radius: 14px;
	--odr-mono: var(--font-mono, 'JetBrains Mono', Menlo, monospace);
	--odr-head: var(--font-heading, 'Space Grotesk', -apple-system, sans-serif);
	--odr-body: var(--font-body, 'DM Sans', -apple-system, sans-serif);
	--odr-cert: var(--odr-accent);

	color: var(--odr-text);
	font-family: var(--odr-body);
	-webkit-tap-highlight-color: transparent;
}
.odr *, .odr *::before, .odr *::after { box-sizing: border-box; }
.odr button { font: inherit; color: inherit; }
.odr p { max-width: none; }

/* ── Full-screen template ─────────────────────────────── */
/* Inside the app (domains, sections, study, rounds, results) the drill fills
 * the viewport and the site footer is hidden. drill.js sets odr-in-app; the
 * cert list leaves it off so the footer shows there. */
body.odr-fullscreen.odr-in-app .odr-main {
	min-height: calc(100vh - 72px);
	min-height: calc(100dvh - 72px);
	display: flex;
	flex-direction: column;
}
body.odr-fullscreen.odr-in-app .odr { flex: 1; display: flex; flex-direction: column; }
body.odr-fullscreen.odr-in-app .site-footer,
body.odr-fullscreen.odr-in-app footer.site-footer { display: none; }

/* ── Picker screens ───────────────────────────────────── */
.odr-pick {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 64px;
	animation: odr-fade .25s ease both;
}
.odr-label {
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--odr-muted);
	margin-bottom: 12px;
}
.odr-title {
	font-family: var(--odr-head);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--odr-white);
	line-height: 1.15;
	margin: 0 0 8px;
}
.odr-sub { color: var(--odr-dim); margin: 0 0 28px; font-size: 15px; }

.odr-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 6px 0;
	margin-bottom: 20px;
	font-family: var(--odr-mono) !important;
	font-size: 12px;
	color: var(--odr-dim) !important;
	cursor: pointer;
	transition: color .15s;
}
.odr-back:hover { color: var(--odr-accent) !important; }

.odr-certs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.odr-cert-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.odr-cert-badge {
	padding: 2px 8px;
	font-family: var(--odr-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--odr-accent);
	border: 1px solid color-mix(in srgb, var(--odr-accent) 50%, transparent);
	border-radius: 999px;
}
.odr.odr-is-loading { cursor: progress; }
.odr.odr-is-loading .odr-cats { opacity: .55; pointer-events: none; transition: opacity .15s; }
.odr-cert {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-align: left;
	padding: 22px 20px 20px;
	background: var(--odr-card);
	border: 2px solid var(--odr-border);
	border-top: 3px solid var(--odr-cert);
	border-bottom-width: 4px;
	border-radius: var(--odr-radius);
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .08s;
}
.odr-cert:hover:not(:disabled) { background: var(--odr-card-hover); border-color: var(--odr-border-hi); border-top-color: var(--odr-cert); }
.odr-cert:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.odr-cert:disabled { opacity: .45; cursor: default; }
.odr-cert-name {
	font-family: var(--odr-head);
	font-size: 24px;
	font-weight: 700;
	color: var(--odr-white);
}
.odr-cert-exam { font-family: var(--odr-mono); font-size: 12px; color: var(--odr-dim); }
.odr-cert-count {
	margin-top: 14px;
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--odr-cert);
}

.odr-cats { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.odr-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-align: left;
	padding: 16px 18px;
	background: var(--odr-card);
	border: 2px solid var(--odr-border);
	border-bottom-width: 4px;
	border-radius: var(--odr-radius);
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .08s;
}
.odr-cat:hover { background: var(--odr-card-hover); border-color: var(--odr-border-hi); }
.odr-cat:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.odr-cat.is-featured { border-color: color-mix(in srgb, var(--odr-cert) 45%, var(--odr-border)); }
.odr-cat.is-featured .odr-cat-name { color: var(--odr-white); }
.odr-cat-name { font-size: 16px; font-weight: 500; color: var(--odr-text); }
.odr-cat-count {
	flex-shrink: 0;
	min-width: 32px;
	padding: 3px 8px;
	text-align: center;
	font-family: var(--odr-mono);
	font-size: 12px;
	color: var(--odr-cert);
	background: color-mix(in srgb, var(--odr-cert) 12%, transparent);
	border-radius: 999px;
}

/* ── Question run ─────────────────────────────────────── */
.odr[data-mode="run"] { display: flex; flex-direction: column; }
.odr-run {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: calc(100vh - 72px);
	min-height: calc(100dvh - 72px);
	/* The slide-in of each question must never widen the page. clip, not
	   hidden: hidden would make this a scroll box and unstick the footer. */
	overflow: clip;
}

.odr-top {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 28px 24px 8px;
}
.odr-close {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--odr-muted) !important;
	cursor: pointer;
	transition: color .15s, background .15s;
}
.odr-close:hover { color: var(--odr-text) !important; background: var(--odr-card); }
.odr-progress {
	flex: 1;
	height: 16px;
	background: #1f1f1f;
	border-radius: 999px;
	overflow: hidden;
}
.odr-progress-fill {
	position: relative;
	height: 100%;
	width: 0;
	min-width: 16px;
	background: var(--odr-accent);
	border-radius: 999px;
	transition: width .45s cubic-bezier(.3,1.3,.5,1);
}

.odr-body {
	flex: 1;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 24px 32px;
}
.odr-body.odr-enter { animation: odr-in .3s ease both; }

.odr-meta {
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--odr-cert);
	margin-bottom: 10px;
}
.odr-prompt {
	font-family: var(--odr-head);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--odr-white);
	line-height: 1.15;
	margin: 0 0 28px;
}

.odr-speaker {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 36px;
}

.odr-bubble {
	position: relative;
	flex: 1;
	margin-top: 14px;
	padding: 16px 20px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--odr-white);
	background: var(--odr-bg);
	border: 2px solid var(--odr-border-hi);
	border-radius: 16px;
}
.odr-bubble::before,
.odr-bubble::after {
	content: '';
	position: absolute;
	top: 22px;
	width: 0; height: 0;
	border-style: solid;
}
.odr-bubble::before { left: -13px; border-width: 9px 13px 9px 0; border-color: transparent var(--odr-border-hi) transparent transparent; }
.odr-bubble::after  { left: -9px;  top: 24px; border-width: 7px 10px 7px 0; border-color: transparent var(--odr-bg) transparent transparent; }

.odr-choices { display: flex; flex-direction: column; gap: 12px; }
.odr-choice {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 64px;
	padding: 14px 52px;
	text-align: center;
	font-size: 18px;
	line-height: 1.35;
	color: var(--odr-white) !important;
	background: transparent;
	border: 2px solid var(--odr-border-hi);
	border-bottom-width: 4px;
	border-radius: var(--odr-radius);
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.odr-choice:hover:not(:disabled) { background: var(--odr-card); }
.odr-choice:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.odr-choice:focus-visible { outline: 2px solid var(--odr-accent); outline-offset: 3px; }
.odr-choice-key {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-family: var(--odr-mono);
	font-size: 12px;
	color: var(--odr-muted);
	border: 2px solid var(--odr-border-hi);
	border-radius: 7px;
}
@media (hover: none) { .odr-choice-key { display: none; } .odr-choice { padding-left: 20px; padding-right: 20px; } }

.odr-choice.is-selected {
	color: var(--odr-accent-hi) !important;
	background: color-mix(in srgb, var(--odr-accent) 10%, transparent);
	border-color: var(--odr-accent);
}
.odr-choice.is-selected .odr-choice-key { color: var(--odr-accent); border-color: var(--odr-accent); }
.odr-choice.is-correct {
	color: var(--odr-green) !important;
	background: color-mix(in srgb, var(--odr-green) 10%, transparent);
	border-color: var(--odr-green);
}
.odr-choice.is-correct .odr-choice-key { color: var(--odr-green); border-color: var(--odr-green); }
.odr-choice.is-wrong {
	color: var(--odr-red) !important;
	background: color-mix(in srgb, var(--odr-red) 10%, transparent);
	border-color: var(--odr-red);
	animation: odr-shake .35s ease;
}
.odr-choice.is-wrong .odr-choice-key { color: var(--odr-red); border-color: var(--odr-red); }
.odr-choice:disabled { cursor: default; }
.odr-choice:disabled:not(.is-correct):not(.is-wrong) { opacity: .45; }

/* ── Long / scenario layout ───────────────────────────── */
.odr-run.is-long .odr-body { max-width: 1080px; }
.odr-long-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.odr-mascot-mini { width: 58px; padding-top: 0; }
.odr-long-head .odr-meta { margin-bottom: 6px; }
.odr-long-head .odr-prompt { margin: 0; font-size: 26px; }

.odr-long { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 960px) {
	.odr-long { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px; }
	.odr-case { position: sticky; top: 96px; max-height: calc(100vh - 96px - 120px); overflow: auto; }
}

.odr-case {
	background: var(--odr-card);
	border: 2px solid var(--odr-border-hi);
	border-radius: var(--odr-radius);
	overflow: hidden;
}
.odr-case-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #1a1a1a;
	border-bottom: 1px solid var(--odr-border);
	position: sticky;
	top: 0;
}
.odr-dot { width: 10px; height: 10px; border-radius: 50%; background: #333; }
.odr-dot:first-child { background: var(--odr-accent); }
.odr-case-title {
	margin-left: 8px;
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--odr-dim);
}
.odr-case-body { padding: 18px 20px 20px; }
.odr-case-p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: var(--odr-text); }
.odr-case-p:last-child { margin-bottom: 0; }

.odr-exhibit { margin: 16px 0 0; }
.odr-exhibit-label {
	font-family: var(--odr-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odr-cert);
	margin-bottom: 6px;
}
.odr-exhibit-pre {
	margin: 0;
	padding: 12px 14px;
	font-family: var(--odr-mono);
	font-size: 12.5px;
	line-height: 1.65;
	color: #c9c9c9;
	background: var(--odr-bg);
	border: 1px solid var(--odr-border);
	border-left: 3px solid var(--odr-cert);
	border-radius: 8px;
	max-width: 100%;
	overflow-x: auto;
	white-space: pre;
}

.odr-ask {
	margin: 0 0 18px;
	font-family: var(--odr-head);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--odr-white);
}
.odr-answers-label {
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odr-muted);
	margin-bottom: 10px;
}

.odr-run.is-long .odr-choices { gap: 10px; }
.odr-run.is-long .odr-choice {
	justify-content: flex-start;
	align-items: flex-start;
	gap: 14px;
	min-height: 0;
	padding: 14px 16px;
	text-align: left;
	font-size: 15.5px;
	line-height: 1.5;
}
.odr-run.is-long .odr-choice-key {
	position: static;
	transform: none;
	flex-shrink: 0;
	margin-top: -1px;
	display: grid;
	font-weight: 600;
}
.odr-run.is-long .odr-choice-text { flex: 1; }

.odr-why {
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: var(--odr-radius);
	border: 2px solid var(--odr-border-hi);
	background: var(--odr-card);
	animation: odr-up .25s ease both;
}
.odr-why.is-correct { border-color: color-mix(in srgb, var(--odr-green) 45%, transparent); }
.odr-why.is-wrong   { border-color: color-mix(in srgb, var(--odr-red) 45%, transparent); }
.odr-why-label {
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--odr-green);
	margin-bottom: 6px;
}
.odr-why-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--odr-text); }
.odr-run.is-long .odr-body { padding-bottom: 40px; }

/* ── Footer (Check / Continue) ────────────────────────── */
.odr-foot {
	position: sticky;
	bottom: 0;
	z-index: 5;
	border-top: 2px solid var(--odr-border);
	background: var(--odr-bg);
	transition: background .2s, border-color .2s;
}
.odr-foot-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
}
.odr-foot.is-correct { background: #0d1a11; border-top-color: color-mix(in srgb, var(--odr-green) 40%, transparent); }
.odr-foot.is-wrong   { background: #1c0f0f; border-top-color: color-mix(in srgb, var(--odr-red) 40%, transparent); }
.odr-foot.is-correct { --odr-btn-state: var(--odr-green); }
.odr-foot.is-wrong   { --odr-btn-state: var(--odr-red); }

.odr-feedback { flex: 1; min-width: 0; animation: odr-up .25s ease both; }
.odr-feedback-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.odr-feedback-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--odr-btn-state);
	color: #0a0a0a;
	flex-shrink: 0;
}
.odr-feedback-title {
	font-family: var(--odr-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--odr-btn-state);
}
.odr-feedback-answer { font-size: 15px; color: var(--odr-red); font-weight: 600; margin: 2px 0 4px; }
/* Check is with the server: the button says "Checking…"; after 400 ms the bar dims a little. */
.odr-foot.is-pending .odr-btn { opacity: .75; }
/* The answer didn't reach the server (or it asked to slow down): the pick stays, Try again. */
.odr-foot-error .odr-feedback-title { color: #f87171; font-size: 15px; }
.odr-feedback-k { font-weight: 500; opacity: .85; }
.odr-feedback-why { font-size: 14px; line-height: 1.55; color: var(--odr-text); margin: 0; max-width: 620px; }

.odr-btn {
	--odr-btn: var(--odr-accent);
	flex-shrink: 0;
	min-width: 180px;
	padding: 15px 32px;
	font-family: var(--odr-mono) !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #0a0a0a !important;
	background: var(--odr-btn);
	border: 0;
	border-radius: var(--odr-radius);
	box-shadow: 0 4px 0 color-mix(in srgb, var(--odr-btn) 55%, #000);
	cursor: pointer;
	transition: filter .15s, transform .08s, box-shadow .08s;
}
.odr-foot.is-correct .odr-btn, .odr-foot.is-wrong .odr-btn { --odr-btn: var(--odr-btn-state); }
.odr-btn:hover:not(:disabled) { filter: brightness(1.08); }
.odr-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.odr-btn:focus-visible { outline: 2px solid var(--odr-white); outline-offset: 3px; }
.odr-btn:disabled {
	background: #262626;
	color: var(--odr-muted) !important;
	box-shadow: 0 4px 0 #1a1a1a;
	cursor: default;
}
.odr-btn-ghost {
	--odr-btn: transparent;
	color: var(--odr-text) !important;
	border: 2px solid var(--odr-border-hi);
	box-shadow: 0 4px 0 var(--odr-border-hi);
}
.odr-btn-ghost:hover { color: var(--odr-accent) !important; border-color: var(--odr-accent); }

/* ── Results ──────────────────────────────────────────── */
.odr-results { text-align: center; padding-top: 72px; }
/* The mascot above "Round complete" (celebrates a pass, crashes on a fail).
   Pulled up into the padding, leaving room for his jump and typed words. */
.odr-mascot.odr-mascot-result { width: 96px; padding-top: 0; margin: -24px auto 18px; }
.odr-score {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 28px 0 36px;
	padding: 28px 48px;
	border: 2px solid var(--odr-border);
	border-bottom-width: 4px;
	border-radius: 18px;
	background: var(--odr-card);
}
.odr-score-num { font-family: var(--odr-head); font-size: 56px; font-weight: 700; color: var(--odr-accent); line-height: 1; }
.odr-score-pct { font-family: var(--odr-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--odr-dim); }
.odr-result-btns { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.odr-result-btns .odr-btn { width: 100%; max-width: 340px; }
a.odr-btn { display: block; box-sizing: border-box; text-align: center; text-decoration: none !important; }

/* ── Locked cert ──────────────────────────────────────── */
.odr-locked { text-align: center; padding-top: 48px; }
.odr-locked .odr-back { display: flex; }
.odr-locked-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: 24px 0 20px;
	border: 2px solid var(--odr-border); border-radius: 50%;
	color: var(--odr-cert, var(--odr-accent));
}
.odr-locked-icon svg { width: 24px; height: 24px; }
.odr-locked .odr-sub { margin-bottom: 32px; }


/* ── Progress marks ───────────────────────────────────── */
.odr-sub-tight { margin: 4px 0 0; font-size: 14px; }
.odr-cat-mark {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px dashed var(--odr-border-hi);
	color: #0a0a0a;
}
.odr-cat.is-passed .odr-cat-mark { border: 0; background: var(--odr-green); }
.odr-cat.is-failed .odr-cat-mark { border: 0; background: color-mix(in srgb, var(--odr-red) 18%, transparent); color: var(--odr-red); }
.odr-cat.is-passed { border-color: color-mix(in srgb, var(--odr-green) 30%, var(--odr-border)); }
.odr-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.odr-cat-best {
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--odr-dim);
}
.odr-cat.is-passed .odr-cat-best { color: var(--odr-green); }
.odr-cat.is-failed .odr-cat-best { color: color-mix(in srgb, var(--odr-red) 80%, var(--odr-dim)); }

.odr-cert-progress { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; }
.odr-cert-track { display: block; height: 6px; border-radius: 999px; background: #232323; overflow: hidden; }
.odr-cert-track-fill { display: block; height: 100%; border-radius: 999px; background: var(--odr-green); }
.odr-cert-progress-text { font-family: var(--odr-mono); font-size: 11px; color: var(--odr-dim); }
.odr-cert-progress.is-done .odr-cert-progress-text { color: var(--odr-green); }

.odr-verdict {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 420px;
	margin: -12px auto 32px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	border: 2px solid var(--odr-border-hi);
	color: var(--odr-text);
}
.odr-verdict.is-pass { border-color: color-mix(in srgb, var(--odr-green) 45%, transparent); background: color-mix(in srgb, var(--odr-green) 8%, transparent); color: var(--odr-green); }
.odr-verdict.is-fail { border-color: color-mix(in srgb, var(--odr-red) 45%, transparent); background: color-mix(in srgb, var(--odr-red) 8%, transparent); color: #f87171; }
/* One-time note after the 1.0 update (an unfinished 0.11 exam couldn't be kept). */
.odr-notice {
	margin: 0 0 20px; padding: 12px 16px; border-radius: 10px;
	border: 1px solid var(--odr-border); background: var(--odr-card);
	color: var(--odr-dim); font-size: 14px; line-height: 1.5;
}
.odr-verdict-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: currentColor;
}
.odr-verdict-icon svg { color: #0a0a0a; }
.odr-results .odr-score { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
.odr-results .odr-verdict { display: flex; }


/* ── Domain & section menus ───────────────────────────── */
.odr-cat-mark-num {
	font-family: var(--odr-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--odr-dim);
}
.odr-cat.is-domain .odr-cat-mark {
	border: 0;
	background: color-mix(in srgb, var(--odr-cert) 16%, transparent);
}
.odr-cat.is-domain .odr-cat-mark-num { color: var(--odr-cert); font-size: 12px; }
.odr-cat.is-domain.is-passed .odr-cat-mark { background: var(--odr-green); }
.odr-cat-count.is-soon {
	background: transparent;
	color: var(--odr-muted);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.odr-cat:disabled { cursor: default; opacity: .5; }
.odr-cat:disabled:hover { background: var(--odr-card); border-color: var(--odr-border); }
.odr-cat:disabled:active { transform: none; border-bottom-width: 4px; margin-bottom: 0; }

/* ── Locked / up-next sections ────────────────────────── */
.odr-cat.is-locked .odr-cat-mark { border: 0; background: #1f1f1f; color: var(--odr-muted); }
.odr-cat.is-locked:disabled { opacity: .75; }
.odr-cat.is-locked .odr-cat-name { color: var(--odr-dim); }
.odr-cat.is-locked .odr-cat-best { color: var(--odr-dim); }
/* The "up next" row follows the cert's category colour, like the cards and domain list. */
.odr-cat.is-current { border-color: color-mix(in srgb, var(--odr-cert) 55%, var(--odr-border)); }
.odr-cat.is-current .odr-cat-mark { border: 2px solid var(--odr-cert); }
.odr-cat.is-current .odr-cat-mark-num { color: var(--odr-cert); }
.odr-cat.is-current .odr-cat-best { color: var(--odr-cert); }

/* ── Cert list header: the mascot beside the headline ── */
.odr-hello { display: flex; align-items: center; gap: 28px; }
.odr-hello-text { flex: 1; min-width: 0; }
.odr-hello .odr-sub { margin-bottom: 0; }
@media (max-width: 700px) {
	/* Label full width, then the mascot beside the headline, then the subtitle full width. */
	.odr-hello { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: center; }
	.odr-hello-text { display: contents; }
	.odr-hello .odr-label { grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; }
	.odr-hello .odr-mascot { grid-column: 1; grid-row: 2; }
	.odr-hello .odr-title { grid-column: 2; grid-row: 2; margin-bottom: 0; }
	.odr-hello .odr-sub { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
}

/* ── Motion ───────────────────────────────────────────── */
@keyframes odr-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes odr-in    { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes odr-up    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes odr-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
	.odr *, .odr *::before, .odr *::after { animation: none !important; transition: none !important; }
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 700px) {
	.odr-certs { grid-template-columns: 1fr; }
	.odr-pick { padding: 32px 16px 48px; }
	.odr-title { font-size: 26px; }
	.odr-top { padding: 18px 16px 4px; gap: 12px; }
	.odr-body { padding: 18px 16px 24px; }
	.odr-prompt { font-size: 24px; margin-bottom: 22px; }
	.odr-speaker { gap: 12px; margin-bottom: 28px; }
	.odr-bubble { font-size: 16px; padding: 13px 15px; margin-top: 8px; }
	.odr-choice { font-size: 16px; min-height: 58px; }
	.odr-foot-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
	.odr-btn { width: 100%; }
	.odr-feedback-title { font-size: 20px; }
	.odr-results { padding-top: 48px; }
	.odr-mascot.odr-mascot-result { width: 80px; margin: -12px auto 14px; }
	.odr-long-head .odr-prompt { font-size: 22px; }
	.odr-mascot-mini { width: 50px; }
	.odr-case-body { padding: 16px; }
	.odr-case-p { font-size: 15.5px; line-height: 1.65; }
	.odr-ask { font-size: 17px; }
	.odr-run.is-long .odr-choice { font-size: 15px; padding: 13px 14px; }
	.odr-run.is-long .odr-choice-key { display: grid; }
}

/* ── 0.7: cert cards ─────────────────────────────────────
 * Markup uses the theme's homepage classes (track-grid, track-card,
 * track-label, track-title, track-desc, track-meta, track-cta), so the
 * theme's style.css does the styling. This only adds what the theme's
 * per-course rules can't know: the category colour, badges and progress,
 * and a reset for the plugin's own button/heading rules. */
.odr-pick.odr-pick-wide { max-width: calc(var(--max-w, 1120px) + 48px); padding-top: 32px; padding-bottom: 72px; }
.odr .odr-tgrid.track-grid { margin-top: 32px; }
.odr .odr-tcard { cursor: default; border-top: 2px solid var(--odr-cert); text-align: left; }
.odr .odr-tcard:hover { border-top-color: var(--odr-cert); }
.odr .odr-tcard.is-soon { opacity: .5; cursor: default; }
.odr .odr-cert-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--odr-cert); }
.odr .odr-cert-badge { letter-spacing: .1em; }
.odr .odr-cert-badge.is-free { color: var(--odr-green); border-color: color-mix(in srgb, var(--odr-green) 50%, transparent); }
.odr .odr-cert-title { margin-bottom: 4px; }
.odr-cert-code { margin-bottom: 14px; font-family: var(--odr-mono); font-size: 12px; letter-spacing: .05em; color: var(--odr-dim); }
.odr .odr-tcard .odr-cert-progress { margin: -6px 0 18px; }
.odr .odr-cert-actions { display: flex; gap: 10px; width: 100%; margin-top: 16px; }
.odr .odr-cert-cta {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 10px 20px;
	background: transparent;
	border: 1px solid var(--odr-border);
	border-radius: var(--radius, 6px);
	font-family: var(--odr-mono) !important;
	font-size: 13px;
	font-weight: 600;
	color: var(--odr-text) !important;
	text-align: center;
	cursor: pointer;
	transition: all .15s;
}
.odr .odr-cert-cta:hover:not(:disabled) { border-color: var(--odr-cert); color: var(--odr-cert) !important; }
/* Launch is the filled primary button; Learn More stays the outline style. */
.odr .odr-cert-launch:not(:disabled) { background: var(--odr-cert); border-color: var(--odr-cert); color: #0a0a0a !important; }
.odr .odr-cert-launch:hover:not(:disabled) { background: color-mix(in srgb, var(--odr-cert) 85%, #fff); color: #0a0a0a !important; }
@media (max-width: 360px) { .odr .odr-cert-actions { flex-direction: column; } }
@media (max-width: 700px) { .odr-pick.odr-pick-wide { padding-top: 24px; padding-bottom: 48px; } }
.odr .odr-cert-cta:focus-visible { outline: 2px solid var(--odr-cert); outline-offset: 3px; }
.odr .odr-cert-cta:disabled { color: var(--odr-muted) !important; cursor: default; }
/* The theme hides track-meta on phones; CertPrep keeps the counts visible. */
@media (max-width: 768px) { .odr .odr-cert-meta { display: block; } }

/* Category filter: reuses the theme's pricing toggle (price-toggle-wrap / price-toggle-btn). */
.odr-filter { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.odr-filter-label { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--odr-muted); flex-shrink: 0; }
.odr .odr-filter-wrap { margin-bottom: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.odr .odr-filter-wrap::-webkit-scrollbar { display: none; }
.odr .odr-filter-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--odr-mono) !important;
	font-size: 12px;
	white-space: nowrap;
	border: 1px solid transparent;
}
.odr .odr-filter-btn:hover:not(.active) { color: var(--odr-text); }
.odr .odr-filter-btn:focus-visible { outline: 2px solid var(--odr-accent); outline-offset: 2px; }
.odr-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.odr .odr-tgrid.track-grid { margin-top: 24px; }
.odr .odr-tcard[hidden] { display: none; }
/* Phones: a full-width segmented control, 3 equal segments per row, centred. */
@media (max-width: 700px) {
	.odr-filter { flex-direction: column; align-items: stretch; gap: 10px; }
	.odr-filter-label { text-align: center; }
	.odr .odr-filter-wrap {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		width: 100%;
		overflow: visible;
	}
	.odr .odr-filter-btn { justify-content: center; padding: 10px 6px; }
}

/* ── 0.8: Study cards ────────────────────────────────────
 * The Study button sits beside each section row (a button can't hold
 * another button), and the study screen reuses the run layout: top bar,
 * body, sticky foot. Colours follow the cert's category (--odr-cert); the
 * exam tip is always the site's orange so it stands out the same way
 * everywhere. */
.odr-cat-wrap { position: relative; }
.odr .odr-cat.has-study { padding-right: 124px; }
.odr .odr-study-btn {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(calc(-50% - 1px));
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	font-family: var(--odr-mono) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--odr-cert) !important;
	background: var(--odr-card);
	border: 1.5px solid color-mix(in srgb, var(--odr-cert) 55%, transparent);
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.odr .odr-study-btn:hover { background: color-mix(in srgb, var(--odr-cert) 12%, var(--odr-card)); border-color: var(--odr-cert); }
.odr .odr-study-btn:focus-visible { outline: 2px solid var(--odr-cert); outline-offset: 2px; }

.odr[data-mode="study"] { display: flex; flex-direction: column; }
.odr-study-segs { flex: 1; display: flex; gap: 6px; }
.odr-study-seg { flex: 1; height: 12px; border-radius: 999px; background: #1f1f1f; transition: background .3s; }
.odr-study-seg.is-on { background: var(--odr-cert); }
.odr-study-count { flex-shrink: 0; font-family: var(--odr-mono); font-size: 12px; color: var(--odr-muted); min-width: 30px; text-align: right; }

.odr-study-body { max-width: 680px; }
.odr-study-body.odr-enter.from-left { animation-name: odr-study-left; }
@keyframes odr-study-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.odr-study-kicker {
	font-family: var(--odr-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odr-cert);
	margin-bottom: 14px;
}
.odr-study-card {
	background: var(--odr-card);
	border: 2px solid var(--odr-border);
	border-top: 3px solid var(--odr-cert);
	border-radius: var(--odr-radius);
	padding: 26px 26px 24px;
}
.odr-study-num { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--odr-muted); margin-bottom: 8px; }
.odr .odr-study-title { font-family: var(--odr-head); font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--odr-white); margin: 0 0 12px; }
.odr .odr-study-text { font-size: 16px; line-height: 1.65; color: var(--odr-text); margin: 0 0 18px; }
.odr .odr-study-list { list-style: none; margin: 0 0 18px; padding: 0; }
.odr .odr-study-list li { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--odr-border); font-size: 14.5px; line-height: 1.5; color: var(--odr-text); }
.odr .odr-study-list li::before { content: '\203A'; position: absolute; left: 3px; top: 8px; color: var(--odr-cert); font-weight: 700; }
.odr .odr-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.odr-study-card .odr-wide { margin: 0 0 18px; }
.odr .odr-study-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14.5px; }
.odr .odr-study-table th { font-family: var(--odr-mono); font-size: .724em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--odr-dim); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--odr-border-hi); }
.odr .odr-study-table td { padding: 9px 10px; border-bottom: 1px solid var(--odr-border); color: var(--odr-text); vertical-align: top; }
.odr .odr-study-table td:first-child { font-family: var(--odr-mono); font-size: .897em; color: var(--odr-cert); }
/* Exam tip: quiet on purpose, so the eye stays on the explanation. A slightly
 * lighter panel and a thin category-coloured edge mark it, with no orange. */
.odr-study-tip {
	padding: 12px 16px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--odr-text);
	background: rgba(255, 255, 255, .025);
	border: 1px solid var(--odr-border);
	border-left: 2px solid color-mix(in srgb, var(--odr-cert) 45%, var(--odr-border));
	border-radius: 8px;
}
.odr-study-tip-label { font-family: var(--odr-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--odr-muted); margin-bottom: 5px; }
.odr .odr-study-hint, .odr .odr-study-note { margin: 16px 0 0; font-size: 13px; color: var(--odr-muted); text-align: center; }
.odr .odr-study-note { color: var(--odr-dim); }

.odr-study-foot .odr-foot-inner { justify-content: space-between; max-width: 680px; }
.odr .odr-study-foot .odr-study-back { min-width: 0; padding: 15px 24px; }
.odr .odr-study-foot .odr-study-next { --odr-btn: var(--odr-cert); flex: 1; max-width: 320px; }

@media (max-width: 700px) {
	/* Keep Back and Next side by side on phones (the run footer stacks its button). */
	.odr .odr-study-foot .odr-foot-inner { flex-direction: row; align-items: center; gap: 12px; }
	.odr .odr-study-foot .odr-btn { width: auto; }
	.odr .odr-study-foot .odr-study-back { flex: 0 0 auto; padding: 15px 18px; }
	.odr .odr-study-foot .odr-study-next { flex: 1; max-width: none; min-width: 0; }
	.odr .odr-study-hint { display: none; }
}
@media (hover: hover) { .odr .odr-study-hint { display: block; } }
@media (max-width: 520px) {
	.odr .odr-cat.has-study { padding-right: 104px; }
	.odr .odr-study-btn { right: 12px; padding: 8px 10px; font-size: 11.5px; gap: 5px; }
	.odr-study-card { padding: 22px 18px 20px; }
	.odr .odr-study-title { font-size: 23px; }
	.odr .odr-study-text { font-size: 15.5px; }
	.odr-study-foot .odr-foot-inner { gap: 12px; }
	.odr .odr-study-foot .odr-study-next { max-width: none; min-width: 0; }
}

/* ── 0.11: practice exams ─────────────────────────────── */
.odr { --odr-flag: #f59e0b; }
.odr[data-mode="exam"] { display: flex; flex-direction: column; }
.odr-cat.is-exam .odr-cat-mark { color: var(--odr-cert); }

/* Resume bar: top of the cert screen while an attempt is in progress */
.odr .odr-exam-resume {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	margin: 0 0 20px;
	padding: 10px 16px;
	font-family: var(--odr-mono) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: left;
	color: var(--odr-cert) !important;
	background: color-mix(in srgb, var(--odr-cert) 10%, var(--odr-card));
	border: 1.5px solid color-mix(in srgb, var(--odr-cert) 55%, transparent);
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.odr .odr-exam-resume:hover { background: color-mix(in srgb, var(--odr-cert) 16%, var(--odr-card)); border-color: var(--odr-cert); }
.odr .odr-exam-resume:focus-visible { outline: 2px solid var(--odr-cert); outline-offset: 2px; }
.odr .odr-exam-resume svg { flex-shrink: 0; }
.odr-exam-resume-text { flex: 1; min-width: 0; }
.odr-exam-resume-go { flex-shrink: 0; font-size: 16px; }
@media (max-width: 700px) {
	/* Phones: "Resume exam · question N of M", so the bar stays one line at 360px. */
	.odr .odr-exam-resume { gap: 8px; padding: 10px 12px; font-size: 12px; letter-spacing: 0; }
	.odr-exam-resume-wide { display: none; }
}

/* Intro, resume, review */
.odr-exam-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.odr-exam-fact { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--odr-card); border: 1px solid var(--odr-border); border-radius: var(--odr-radius); }
.odr-exam-fact-num { font-family: var(--odr-head); font-size: 28px; font-weight: 700; color: var(--odr-white); line-height: 1; }
.odr-exam-fact-label { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--odr-dim); }
.odr-exam-rules { margin: 0 0 20px; padding: 0 0 0 20px; color: var(--odr-text); line-height: 1.8; }
.odr-exam-rules li::marker { color: var(--odr-cert); }
.odr-exam-note { margin: 0 0 16px; font-size: 14px; color: var(--odr-dim); }
.odr-exam-intro .odr-result-btns, .odr-exam-review .odr-result-btns { margin-top: 28px; }
.odr-exam-rlist { margin-top: 20px; padding: 16px; background: var(--odr-card); border: 1px solid var(--odr-border); border-radius: var(--odr-radius); }
.odr-exam-rlist-title { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--odr-dim); margin-bottom: 12px; }
.odr-exam-rlist.is-marked .odr-exam-rlist-title { color: var(--odr-flag); }
.odr-exam-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.odr-exam-chips .odr-exam-sq { width: 44px; height: 44px; }
.odr-exam-none { color: var(--odr-muted); font-size: 14px; }

/* Exam room */
.odr-exam-top { max-width: 1120px; gap: 14px; padding-top: 20px; }
.odr-exam-title { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.odr-exam-code { font-family: var(--odr-mono); font-size: 12px; color: var(--odr-cert); letter-spacing: .05em; }
.odr-exam-kind { font-size: 13px; color: var(--odr-dim); }
.odr-exam-progress { height: 10px; }
.odr-exam-progress .odr-progress-fill { background: var(--odr-cert); min-width: 10px; }
.odr-exam-count, .odr-exam-timer { font-family: var(--odr-mono); font-size: 14px; color: var(--odr-text); white-space: nowrap; flex-shrink: 0; }
.odr-exam-timer { min-width: 64px; text-align: right; color: var(--odr-white); font-weight: 700; }
.odr-exam-timer.is-low { color: var(--odr-red); }
.odr-exam-pause {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	flex-shrink: 0; min-height: 40px; padding: 0 14px;
	font-family: var(--odr-mono) !important; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--odr-text) !important; background: transparent; border: 1px solid var(--odr-border-hi); border-radius: 10px; cursor: pointer;
}
.odr-exam-pause:hover { border-color: var(--odr-cert); color: var(--odr-cert) !important; }
.odr-exam-strip { display: none; }
.odr-exam-main {
	flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start;
	width: 100%; max-width: 1120px; margin: 0 auto; padding: 20px 24px 40px;
}
.odr-exam-main[hidden] { display: none; }
.odr-exam-qnum { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--odr-dim); margin-bottom: 14px; }
.odr-exam-body .odr-case { margin-bottom: 18px; border-width: 1px; }
.odr-exam-q { margin: 0 0 18px; font-size: 18px; line-height: 1.55; color: var(--odr-white); }
.odr-exam-choices { display: flex; flex-direction: column; gap: 10px; }
.odr .odr-exam-choice { justify-content: flex-start; text-align: left; min-height: 56px; padding: 12px 16px 12px 54px; font-size: 16px; border-width: 1px; border-bottom-width: 3px; }
.odr .odr-exam-choice.is-selected { color: var(--odr-white) !important; border-color: var(--odr-cert); background: color-mix(in srgb, var(--odr-cert) 12%, transparent); }
.odr .odr-exam-choice.is-selected .odr-choice-key { color: var(--odr-cert); border-color: var(--odr-cert); }
@media (hover: none) { .odr .odr-exam-choice .odr-choice-key { display: grid; } .odr .odr-exam-choice { padding-left: 54px; } }
.odr-exam-conf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 22px; }
.odr-exam-conf-label { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--odr-dim); }
.odr-exam-conf-btns { display: flex; gap: 8px; }
.odr-exam-conf-btn {
	min-height: 44px; min-width: 80px; padding: 0 14px; font-size: 14px;
	color: var(--odr-text) !important; background: transparent; border: 1px solid var(--odr-border-hi); border-radius: 10px; cursor: pointer;
}
.odr-exam-conf-btn.is-on { color: var(--odr-white) !important; border-color: var(--odr-cert); background: color-mix(in srgb, var(--odr-cert) 14%, transparent); }

/* Question map */
.odr-exam-rail { position: sticky; top: 96px; padding: 16px; background: var(--odr-card); border: 1px solid var(--odr-border); border-radius: var(--odr-radius); }
.odr-exam-map-title { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--odr-dim); margin-bottom: 12px; }
.odr-exam-map { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.odr-exam-sq {
	display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0;
	font-family: var(--odr-mono) !important; font-size: 10px; color: var(--odr-dim) !important;
	background: transparent; border: 1px solid var(--odr-border-hi); border-radius: 4px; cursor: pointer;
}
.odr-exam-sq:hover { border-color: var(--odr-text); }
.odr-exam-sq.is-answered { background: #3a3a3a; border-color: #3a3a3a; color: var(--odr-white) !important; }
.odr-exam-sq.is-marked { border-color: var(--odr-flag); box-shadow: inset 0 0 0 1px var(--odr-flag); }
.odr-exam-sq.is-current { background: var(--odr-cert); border-color: var(--odr-cert); color: #0a0a0a !important; }
.odr-exam-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--odr-dim); }
.odr-exam-legend-item { display: flex; align-items: center; gap: 8px; }
.odr-exam-sq.is-key { width: 14px; height: 14px; aspect-ratio: auto; cursor: default; }

/* Paused */
.odr-exam-paused { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; }
.odr-exam-paused[hidden] { display: none; }

/* Footer */
.odr-exam-foot .odr-foot-inner { max-width: 1120px; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.odr-exam-foot .odr-btn { min-width: 140px; }
.odr-exam-next { margin-left: auto; }
.odr-exam-mark {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
	font-size: 14px; color: var(--odr-text) !important; background: transparent;
	border: 1px solid var(--odr-border-hi); border-radius: var(--odr-radius); cursor: pointer;
}
.odr-exam-mark.is-on { color: var(--odr-flag) !important; border-color: var(--odr-flag); background: color-mix(in srgb, var(--odr-flag) 10%, transparent); }
.odr-exam-mark.is-on svg { fill: var(--odr-flag); }
.odr-exam-gridbtn { display: none; }

/* Map sheet (phones) */
.odr-exam-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .6); }
.odr-exam-sheet[hidden] { display: none; }
.odr-exam-sheet-in { width: 100%; max-height: 80vh; overflow-y: auto; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--odr-card); border-top: 1px solid var(--odr-border-hi); border-radius: 18px 18px 0 0; }
.odr-exam-sheet .odr-exam-sq { font-size: 12px; }

/* Results */
.odr-exam-pick { max-width: 760px; }
.odr-exam-rhead { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.odr-exam-rhead .odr-title { margin: 0; font-size: 26px; }
.odr-exam-card { margin-top: 16px; padding: 20px; background: var(--odr-card); border: 1px solid var(--odr-border); border-radius: var(--odr-radius); }
.odr-exam-h { margin: 0 0 14px; font-family: var(--odr-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--odr-dim); }
.odr-exam-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--odr-muted); }
.odr-exam-score-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.odr-exam-score-big { display: flex; flex-direction: column; gap: 4px; }
.odr-exam-score-label { font-family: var(--odr-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--odr-dim); }
.odr-exam-score-num { font-family: var(--odr-head); font-size: 52px; font-weight: 700; line-height: 1; color: var(--odr-red); }
.odr-exam-score-num.is-pass { color: var(--odr-green); }
.odr-exam-score-facts { text-align: right; font-size: 14px; color: var(--odr-text); line-height: 1.6; }
.odr-exam-delta { color: var(--odr-dim); }
.odr-exam-delta.is-up { color: var(--odr-green); }
.odr-exam-delta.is-down { color: var(--odr-red); }
.odr-exam-scale { position: relative; height: 8px; margin: 34px 0 6px; background: #262626; border-radius: 999px; }
.odr-exam-scale-pass { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--odr-white); }
.odr-exam-scale-pass-label { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--odr-mono); font-size: 11px; color: var(--odr-dim); }
.odr-exam-scale-you { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--odr-cert); border: 3px solid var(--odr-bg); border-radius: 50%; }
.odr-exam-scale-ends { display: flex; justify-content: space-between; font-family: var(--odr-mono); font-size: 11px; color: var(--odr-muted); }
.odr-exam-dom { margin-bottom: 14px; }
.odr-exam-dom-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; }
.odr-exam-dom-name { color: var(--odr-text); }
.odr-exam-dom-pct { font-family: var(--odr-mono); font-size: 12.5px; color: var(--odr-dim); white-space: nowrap; }
.odr-exam-dom-track { height: 10px; background: #262626; border-radius: 999px; overflow: hidden; min-width: 40px; }
.odr-exam-dom-fill { height: 100%; background: var(--odr-green); border-radius: 999px; }
.odr-exam-dom.is-weak .odr-exam-dom-fill { background: var(--odr-red); }
.odr-exam-dom.is-weak .odr-exam-dom-pct { color: var(--odr-red); }
.odr-exam-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.odr-exam-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--odr-border-hi); border-radius: 12px; }
.odr-exam-tile-num { font-family: var(--odr-head); font-size: 28px; font-weight: 700; color: var(--odr-white); line-height: 1; }
.odr-exam-tile-name { font-weight: 600; color: var(--odr-white); font-size: 14px; }
.odr-exam-tile-note { font-size: 12.5px; color: var(--odr-dim); line-height: 1.4; }
.odr-exam-tile.is-solid .odr-exam-tile-num { color: var(--odr-green); }
.odr-exam-tile.is-blind { border-color: color-mix(in srgb, var(--odr-red) 60%, transparent); background: color-mix(in srgb, var(--odr-red) 8%, transparent); }
.odr-exam-tile.is-blind .odr-exam-tile-num, .odr-exam-tile.is-blind .odr-exam-tile-note { color: var(--odr-red); }
.odr-exam-pace { margin: 0; padding-left: 18px; line-height: 1.8; color: var(--odr-text); }
.odr-exam-step { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--odr-border); }
.odr-exam-step:first-of-type { border-top: 0; padding-top: 0; }
.odr-exam-step-num { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; font-family: var(--odr-mono); font-size: 13px; color: var(--odr-cert); border: 1px solid var(--odr-cert); border-radius: 50%; }
.odr-exam-step-text { flex: 1; min-width: 0; }
.odr-exam-step-name { color: var(--odr-white); font-weight: 600; }
.odr-exam-step-why { font-size: 13.5px; color: var(--odr-dim); }
.odr-exam-step-acts { display: flex; gap: 8px; flex-shrink: 0; }
.odr-exam-step-btn {
	min-height: 44px; padding: 0 14px; font-size: 13.5px; white-space: nowrap;
	color: var(--odr-text) !important; background: transparent; border: 1px solid var(--odr-border-hi); border-radius: 10px; cursor: pointer;
}
.odr-exam-step-btn.is-primary { color: #0a0a0a !important; background: var(--odr-cert); border-color: var(--odr-cert); font-weight: 600; }
.odr-exam-results .odr-result-btns { margin-top: 28px; }

/* Answer review */
.odr-exam-tabs { display: flex; margin: 8px 0 20px; }
.odr-exam-acard { margin-bottom: 14px; padding: 18px; background: var(--odr-card); border: 1px solid var(--odr-border); border-left: 3px solid var(--odr-green); border-radius: 12px; }
.odr-exam-acard.is-wrong { border-left-color: var(--odr-red); }
.odr-exam-acard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-family: var(--odr-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--odr-dim); }
.odr-exam-flag { color: var(--odr-flag); }
.odr-exam-acard-scn { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--odr-text); }
.odr-exam-acard .odr-wide { margin-bottom: 10px; }
.odr-exam-acard-q { margin: 0 0 12px; color: var(--odr-white); font-weight: 600; line-height: 1.5; }
.odr-exam-ans { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 10px 12px; border-radius: 8px; font-size: 14.5px; }
.odr-exam-ans.is-right { background: color-mix(in srgb, var(--odr-green) 10%, transparent); color: var(--odr-white); }
.odr-exam-ans.is-wrong { background: color-mix(in srgb, var(--odr-red) 10%, transparent); color: var(--odr-white); }
.odr-exam-ans-k { font-family: var(--odr-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--odr-dim); }
.odr-exam-acard-why { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--odr-dim); }

@media (max-width: 900px) {
	.odr-exam-main { grid-template-columns: minmax(0, 1fr); }
	.odr-exam-rail { display: none; }
	.odr-exam-gridbtn {
		display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; padding: 0;
		color: var(--odr-text) !important; background: transparent; border: 1px solid var(--odr-border-hi); border-radius: var(--odr-radius); cursor: pointer;
	}
	.odr-exam-strip { display: flex; gap: 1px; width: 100%; padding: 0 16px; max-width: 1120px; margin: 4px auto 0; }
	.odr-exam-tick { flex: 1 1 0; min-width: 0; height: 4px; background: #262626; border-radius: 2px; }
	.odr-exam-tick.is-answered { background: #5a5a5a; }
	.odr-exam-tick.is-marked { background: var(--odr-flag); }
	.odr-exam-tick.is-current { background: var(--odr-cert); }
	.odr-exam-progress { display: none; }
}
@media (max-width: 700px) {
	.odr-exam-top { gap: 10px; padding: 14px 12px 6px; }
	.odr-exam-kind { display: none; }
	.odr-exam-title { flex: 1; }
	.odr-exam-main { padding: 16px 16px 24px; }
	.odr-exam-q { font-size: 17px; }
	.odr-exam-foot .odr-foot-inner { flex-direction: row; align-items: stretch; gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
	.odr-exam-foot .odr-btn { flex: 1; width: auto; min-width: 0; padding: 14px 8px; }
	.odr-exam-next { margin-left: 0; }
	.odr-exam-mark { width: 48px; padding: 0; justify-content: center; flex-shrink: 0; }
	.odr-exam-mark-text { display: none; }
	.odr-exam-facts { gap: 8px; }
	.odr-exam-fact { padding: 12px; }
	.odr-exam-fact-num { font-size: 22px; }
	.odr-exam-tiles { grid-template-columns: 1fr 1fr; }
	.odr-exam-step { flex-wrap: wrap; }
	.odr-exam-step-acts { width: 100%; padding-left: 44px; }
	.odr-exam-step-btn { flex: 1; }
	.odr-exam-score-facts { text-align: left; }
	.odr-exam-score-num { font-size: 44px; }
	.odr-exam-rhead .odr-title { font-size: 22px; }
	.odr-exam-conf-btns { width: 100%; }
	.odr-exam-conf-btn { flex: 1; min-width: 0; }
}

/* ── Narrow screens: nothing may widen the column ───────
 * Flex and grid children default to min-width: auto, so one wide exhibit
 * line or unbroken token would stretch the whole column off-screen. Wide
 * content (exhibits, tables) scrolls inside its own box instead, and long
 * tokens in prose (URLs, paths, commands, hashes) break where they must. */
.odr-run, .odr-body, .odr-pick, .odr-long > *, .odr-answers, .odr-case, .odr-case-body,
.odr-exam-main > *, .odr-exam-body, .odr-exam-choices, .odr-exam-acard, .odr-exam-ans > *,
.odr-study-card, .odr-choice-text, .odr-bubble, .odr-feedback { min-width: 0; }
.odr-exhibit, .odr-exhibit-pre, .odr-table-scroll, .odr-wide { min-width: 0; max-width: 100%; }
.odr-exhibit-pre { -webkit-overflow-scrolling: touch; }
.odr-exhibit-pre, .odr-table-scroll { scrollbar-width: thin; scrollbar-color: var(--odr-border-hi) transparent; }
.odr-bubble, .odr-case-p, .odr-ask, .odr-choice-text, .odr-why-text, .odr-feedback,
.odr-exam-q, .odr-exam-acard-scn, .odr-exam-acard-q, .odr-exam-ans, .odr-exam-acard-why,
.odr .odr-study-title, .odr .odr-study-text, .odr .odr-study-list li, .odr-study-tip { overflow-wrap: anywhere; }
/* Table cells keep whole words (anywhere would let the table squeeze columns
 * mid-word); a table that still doesn't fit scrolls in .odr-table-scroll. */
.odr .odr-study-table td, .odr .odr-study-table th { overflow-wrap: break-word; }
@media (max-width: 480px) {
	.odr-exhibit-pre { padding: 10px 12px; font-size: 12px; }
	.odr-case-body { padding: 14px 14px 16px; }
	.odr .odr-study-table th, .odr .odr-study-table td { padding-left: 6px; padding-right: 6px; }
	.odr .odr-study-table th:first-child, .odr .odr-study-table td:first-child { padding-left: 0; }
}
@media (max-width: 390px) {
	.odr-exam-top { gap: 8px; }
	.odr-exam-pause { width: 40px; padding: 0; }
	.odr-exam-pause-text { display: none; }
	.odr-exam-timer { min-width: 0; }
}

/* Wide boxes (drill.js fitWide): content up to 20% too wide is scaled to
 * fit; wider content scrolls in its box with the native scrollbar hidden
 * and our own bar underneath (native mobile scrollbars can't be styled).
 * The bar is a 22px hit area with the 10px track drawn in its middle. */
.odr-wide.is-scroll > :first-child { scrollbar-width: none; }
.odr-wide.is-scroll > :first-child::-webkit-scrollbar { display: none; }
.odr-wide.is-scroll > :first-child:focus-visible { outline: 2px solid var(--odr-cert); outline-offset: 2px; }
.odr-wide-bar {
	display: none; position: relative; height: 22px; margin-top: 2px;
	touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.odr-wide.is-scroll .odr-wide-bar { display: block; }
.odr-wide-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 10px; border-radius: 5px; background: #1f1f1f; }
.odr-wide-thumb {
	position: absolute; left: 0; top: 6px; height: 10px; min-width: 28px;
	border-radius: 5px; background: var(--odr-cert); transition: background-color .2s;
}
.odr-wide.is-end .odr-wide-thumb { background: #3a3a3a; }

/* ── 1.1.0: guests ────────────────────────────────────── */
/* The opnf.sh Pro courses' guest notice (opnf-terminal 2.68.6, .opnf-t-guest-*),
   same look and copy, at the top of each screen inside a free cert. */
.odr .odr-guest-notice {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin: 0 0 20px; padding: 12px 16px;
	background: var(--bg-card, #131313); border: 1px solid var(--accent, #ff6b1a); border-radius: var(--radius, 6px);
	text-align: left;
}
.odr-run > .odr-guest-notice { width: calc(100% - 48px); max-width: 952px; margin: 20px auto 0; }
.odr .odr-guest-text { display: flex; align-items: center; gap: 10px; color: var(--text, #d4d4d4); font-size: 14px; line-height: 1.4; }
.odr .odr-guest-text svg { flex-shrink: 0; color: var(--accent, #ff6b1a); }
.odr .odr-guest-text strong { color: var(--white, #e8e8e8); }
.odr .odr-guest-actions { display: flex; align-items: center; gap: 10px; }
/* Enroll / Sign In: the theme header's buttons exactly. */
.odr .odr-guest-actions a {
	font-family: var(--font-heading, 'Space Grotesk', -apple-system, sans-serif); font-size: 14px; font-weight: 600;
	letter-spacing: .02em; text-transform: none; text-decoration: none;
	padding: 5px 15px; border-width: 1px; border-style: solid; border-radius: var(--radius, 6px); transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
}
.odr .odr-guest-enroll { background: var(--accent, #ff6b1a); color: var(--bg, #0a0a0a); border-color: var(--accent, #ff6b1a); }
.odr .odr-guest-enroll:hover { background: var(--accent-hover, #ff8a47); color: var(--bg, #0a0a0a); }
.odr .odr-guest-signin { background: transparent; color: var(--text, #d4d4d4); border-color: var(--border, #222); }
.odr .odr-guest-signin:hover { border-color: var(--accent, #ff6b1a); color: var(--accent, #ff6b1a); }
.odr .odr-guest-close { background: none; border: none; color: var(--text-dim, #888); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.odr .odr-guest-close:hover { color: var(--white, #e8e8e8); }
@media (max-width: 560px) {
	.odr .odr-guest-actions { width: 100%; }
	.odr .odr-guest-enroll, .odr .odr-guest-signin { flex: 1; text-align: center; }
}
@media (max-width: 700px) { .odr-run > .odr-guest-notice { width: calc(100% - 32px); margin-top: 16px; } }
/* Wider than a phone: one row. Icon and text take the room left, the text on two
   lines on purpose (the bold half on its own line); Enroll, Sign In and the X never wrap. */
@media (min-width: 640px) {
	.odr .odr-guest-notice { flex-wrap: nowrap; }
	.odr .odr-guest-text { flex: 1; min-width: 0; }
	.odr .odr-guest-text strong { display: block; }
	.odr .odr-guest-notice > .odr-guest-actions { flex: none; white-space: nowrap; }
}

/* Practice exam for a guest: a card with Sign up / Sign in (the guest notice's buttons) instead of a row */
.odr .odr-exam-guest { align-items: flex-start; cursor: default; }
.odr .odr-exam-guest:hover { background: var(--odr-card); border-color: color-mix(in srgb, var(--odr-cert) 45%, var(--odr-border)); }
.odr .odr-exam-guest:active { transform: none; border-bottom-width: 4px; margin-bottom: 0; }
.odr .odr-exam-guest-text { margin: 8px 0 0; color: var(--odr-text); font-size: 15px; line-height: 1.5; }
.odr .odr-exam-guest-btns { margin-top: 14px; }

/* 1.2.5: plain cert links in the HTML for search engines; the app replaces them on start. */
.odr-cert-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.5}
.odr-cert-links a{font-weight:600;color:inherit}
.odr-cert-links span{opacity:.7}