/* PracticePilot — Student Exam Player.
   §exam-cockpit-rebuild (0.76.0): full visual rebuild to match the supplied
   premium reference — dark navy header, 5-card KPI strip, three-column
   cockpit with the question navigator ONLY in the left sidebar (the right
   column is exclusively Timer / Overall Progress / Subject-wise Progress /
   Test Overview — no second numbered grid), real Tools/Report popovers, and
   a blue→purple gradient primary-action system. Reuses ppilot-shared.css's
   --ppilot-* tokens plus a small set of exam-specific tokens for the
   review/marked/timer states the shared file doesn't define. Strongly
   scoped under .ppilot-exam-app — resets its own box model so host-theme
   CSS cannot leak in, and never touches anything outside this root. */

.ppilot-exam-app {
	--ppilot-exam-review: #e11d48;
	--ppilot-exam-review-bg: #ffe4e6;
	--ppilot-exam-marked-answered: #4f46e5;
	--ppilot-exam-marked-answered-bg: #eef2ff;
	--ppilot-exam-danger: #dc2626;
	--ppilot-exam-danger-bg: #fef2f2;
	--ppilot-exam-blue: #2563eb;
	--ppilot-exam-blue-bg: #eff6ff;
	--ppilot-exam-orange: #ea580c;
	--ppilot-exam-orange-bg: #fff7ed;
	--ppilot-exam-purple: #7c3aed;
	--ppilot-exam-purple-bg: #f5f3ff;
	--ppilot-exam-pink: #db2777;
	--ppilot-exam-pink-bg: #fdf2f8;
	--ppilot-exam-teal: #0d9488;
	--ppilot-exam-teal-bg: #f0fdfa;
	/* §exam-cockpit-rebuild (0.76.0): the reference's "blue → purple"
	   primary-action system — used for the active sidebar tab, the current
	   question-navigator cell, the primary Save & Next / Go / Submit
	   buttons, and the header's brand mark. */
	--ppilot-exam-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
	--ppilot-exam-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
	--ppilot-exam-font-scale: 1;

	/* §premium-cockpit-reskin (0.73.0): the player is a true full-width
	   layout — it fills the viewport (minus a comfortable gutter) up to a
	   generous ceiling that still keeps line lengths readable on
	   ultra-wide monitors. */
	width: 100%; max-width: 1920px; margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 56px);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ppilot-ink); line-height: 1.5;
	overflow-x: hidden;
}
.ppilot-exam-app, .ppilot-exam-app * { box-sizing: border-box; }
.ppilot-exam-app button { font-family: inherit; }
.ppilot-exam-app ul, .ppilot-exam-app ol { margin: 0; padding: 0; list-style: none; }
.ppilot-exam-app kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700;
	background: var(--ppilot-bg); border: 1px solid var(--ppilot-border); border-radius: 5px; padding: 2px 6px; color: var(--ppilot-ink);
}

.ppilot-exam-notice { max-width: 600px; margin: 40px auto; text-align: center; }

/* §public-browsing (0.76.6): the "please log in to start this test" card.
   Deliberately self-contained, hardcoded colors rather than var(--ppilot-
   exam-*) tokens — those are only defined under .ppilot-exam-app, and this
   card renders BEFORE that wrapper exists (the shortcode returns it in
   place of the whole player when the visitor isn't logged in yet), same
   reason .ppilot-btn/.ppilot-btn-primary (admin-only, scoped under
   .ppilot-app) can't be reused here either. */
.ppilot-login-required-card {
	max-width: 440px; margin: 60px auto; padding: 36px 28px; text-align: center; border-radius: 16px;
	background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ppilot-login-required-icon { font-size: 34px; margin-bottom: 10px; }
.ppilot-login-required-title { font-size: 20px; font-weight: 800; color: #111827; margin: 0 0 8px; }
.ppilot-login-required-subtitle { font-size: 14px; color: #6b7280; line-height: 1.5; margin: 0 0 22px; }
.ppilot-login-required-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ppilot-login-required-actions .ppilot-btn {
	display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 10px;
	font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; border: 1.5px solid #d0d5dd; color: #1f2937; background: #fff;
}
.ppilot-login-required-actions .ppilot-btn:hover { background: #f9fafb; }
.ppilot-login-required-actions .ppilot-btn-primary {
	background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); border-color: transparent; color: #fff;
}
.ppilot-login-required-actions .ppilot-btn-primary:hover { filter: brightness(1.06); }
@media (max-width: 480px) {
	.ppilot-login-required-card { margin: 32px 16px; padding: 28px 20px; }
}

.ppilot-exam-loading, .ppilot-exam-error-state, .ppilot-exam-submitted-state {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 320px; padding: 40px 20px; text-align: center; gap: 16px;
}
.ppilot-exam-skeleton {
	width: 100%; max-width: 480px; height: 120px; border-radius: 12px;
	background: linear-gradient( 90deg, var(--ppilot-bg) 25%, #eef0f3 37%, var(--ppilot-bg) 63% );
	background-size: 400% 100%; animation: ppilot-exam-shimmer 1.4s ease infinite;
}
.ppilot-exam-reduced-motion .ppilot-exam-skeleton { animation: none; }
@media (prefers-reduced-motion: reduce) { .ppilot-exam-skeleton { animation: none; } }
@keyframes ppilot-exam-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ppilot-exam-submitted-icon {
	width: 64px; height: 64px; border-radius: 50%; background: var(--ppilot-success-bg); color: var(--ppilot-success);
	display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.ppilot-exam-submitted-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.ppilot-exam-attempt-limit-note { font-size: 13px; text-align: center; margin-top: 4px; }

/* §exam-completion-experience: Test Summary screen (Milestone 3F) */
.ppilot-exam-summary-screen { max-width: 520px; margin: 0 auto; padding: 32px 20px; text-align: center; }
.ppilot-exam-summary-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.ppilot-exam-summary-subtitle { margin: 0 0 24px; font-size: 13.5px; }
.ppilot-exam-summary-grid { display: flex; flex-direction: column; gap: 1px; background: var(--ppilot-border); border: 1px solid var(--ppilot-border); border-radius: 10px; overflow: hidden; text-align: left; margin-bottom: 24px; }
.ppilot-exam-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: #fff; }
.ppilot-exam-summary-label { font-size: 13.5px; color: var(--ppilot-muted); }
.ppilot-exam-summary-value { font-size: 15px; font-weight: 700; color: var(--ppilot-ink); font-variant-numeric: tabular-nums; }
.ppilot-exam-summary-actions { display: flex; gap: 12px; justify-content: center; }
.ppilot-exam-summary-actions .ppilot-exam-nav-btn { flex: 1 1 0; }

@media (max-width: 480px) {
	.ppilot-exam-summary-screen { padding: 24px 16px; }
	.ppilot-exam-summary-actions { flex-direction: column-reverse; }
}
.ppilot-exam-inline-result { width: 100%; margin-top: 20px; }
.ppilot-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ===================== Header: white app bar + gradient hero banner =====================
   §premium-header-hero-reskin (0.82.3): the old single dark-navy
   .ppilot-exam-header (brand + title + tools + subjects, all stacked in
   one navy block) is split into two pieces to match the "premium/next
   level" reference the site owner supplied — a slim, neutral WHITE app
   bar (.ppilot-exam-topbar: brand mark + Tools/Report/Calculator/theme/
   fullscreen controls + student name + End Test — same controls, same
   handlers, just off a white background now) sitting above a colourful
   gradient HERO BANNER (.ppilot-exam-hero: real test title + Live pill +
   real subject chips + the same 5 real-data stat cards, now styled as
   translucent glass pills). Because this is built from the SAME real
   get_state()/subjectBlocks() data every other part of this player
   already uses, it renders identically on every mock test on the site
   automatically — there is nothing per-test to configure or hardcode.

   §exam-hero-banner-photo (0.82.4): the site owner supplied their own
   photo (snow-capped Himalayas + a Himachal-style wooden temple roof)
   and asked specifically for THAT image, in place of 0.82.3's CSS-only
   mountain-silhouette layers. The photo ships bundled with the plugin at
   assets/images/exam-banner.jpg (re-encoded to 1920px/JPEG-q78, ~260KB —
   it loads on every attempt start, so it is not shipped at the
   original ~2.9MB) and its URL reaches this static CSS file via a single
   wp_add_inline_style()-set custom property, --ppilot-exam-banner-url
   (set in includes/Core/Plugin.php right where ppilot-exam-player is
   enqueued — see that file for why: this CSS file itself cannot know its
   own plugin URL). The gradient from 0.82.3 is kept, now as a semi
   -transparent overlay layered OVER the photo (.ppilot-exam-hero::before)
   so the white title/pills/badges stay fully readable — never a raw
   photo with no overlay. Same banner, unchanged, on every test. */
.ppilot-exam-topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	background: #fff; color: var(--ppilot-ink); padding: 14px 24px; border-radius: 14px 14px 0 0;
	border: 1px solid var(--ppilot-border); border-bottom: none;
}
.ppilot-exam-brand { display: flex; align-items: center; gap: 10px; }
.ppilot-exam-brand-mark {
	width: 40px; height: 40px; border-radius: 11px; background: var(--ppilot-exam-gradient); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; flex: 0 0 auto;
	box-shadow: 0 2px 8px rgba(124,58,237,0.35);
}
.ppilot-exam-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ppilot-exam-brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.2; color: var(--ppilot-ink); }
.ppilot-exam-brand-tag { font-size: 11px; color: var(--ppilot-muted); font-weight: 500; }
.ppilot-exam-student-area { font-size: 13px; color: var(--ppilot-muted); }
.ppilot-exam-student-name { font-weight: 600; color: var(--ppilot-ink); }

.ppilot-exam-header-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppilot-exam-tool-pill {
	display: inline-flex; align-items: center; gap: 6px; background: var(--ppilot-bg); border: 1px solid var(--ppilot-border);
	color: var(--ppilot-ink); font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.ppilot-exam-tool-pill:hover { background: #eef0f3; }
.ppilot-exam-tool-pill:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 1px; }
.ppilot-exam-tool-pill.is-active { background: var(--ppilot-exam-gradient); border-color: transparent; color: #fff; }
.ppilot-exam-tool-icon-btn {
	width: 34px; height: 34px; border-radius: 50%; background: var(--ppilot-bg); border: 1px solid var(--ppilot-border);
	color: var(--ppilot-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
}
.ppilot-exam-tool-icon-btn:hover { background: #eef0f3; }
.ppilot-exam-tool-icon-btn:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 1px; }
.ppilot-exam-tool-icon-btn.is-active { background: var(--ppilot-gold); color: var(--ppilot-navy); border-color: var(--ppilot-gold); }

/* --- Gradient hero banner: real title + Live pill + real subjects + the
   stat pills, over a CSS-only mountain silhouette --- */
.ppilot-exam-hero {
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
	background: var(--ppilot-exam-banner-url, none) center / cover no-repeat, var(--ppilot-exam-gradient);
	color: #fff; padding: 26px 26px 22px; isolation: isolate;
}
/* §banner-black-shade-fix (0.82.5): the site owner explicitly asked for a
   BLACK shade on their own photo ("jo mene image di thi wo black shade use
   kro us par") — 0.82.3/0.82.4 kept the brand blue→purple gradient here as
   the scrim, which tinted the whole photo blue/purple and hid its real
   colours (the snow, the sky, the wooden temple roof) under a colour that
   was never part of the photo. Replaced with a true black, diagonal
   semi-transparent vignette instead: darker at the corners/edges (for
   title and stat-pill contrast) and lighter through the centre (so the
   photo itself stays visible), still keeping every white title/pill/badge
   on top fully readable. */
.ppilot-exam-hero::before {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(135deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.58) 100%);
}
.ppilot-exam-hero > * { position: relative; z-index: 1; }

.ppilot-exam-hero-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ppilot-exam-hero-title { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: #fff; overflow-wrap: anywhere; }
.ppilot-exam-live-pill {
	display: inline-flex; align-items: center; gap: 5px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 700;
	padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em;
}
.ppilot-exam-live-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; }

.ppilot-exam-header-subjects-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ppilot-exam-subject-chip {
	font-size: 11.5px; font-weight: 600; color: #f1f5f9; background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.ppilot-exam-subject-chip.is-more { color: #e2e8f0; background: transparent; border-style: dashed; }

/* --- Stat strip: five real-data cards. Used ONLY inside the hero now
   (is-hero), rendered as translucent "glass" pills on the gradient
   instead of solid white cards on their own strip. --- */
.ppilot-exam-stat-strip { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2px; }
.ppilot-exam-stat-strip.is-hero {
	background: transparent; border: none; padding: 0;
}
.ppilot-exam-stat-chip {
	flex: 1 1 0; min-width: 160px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ppilot-border);
	border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.ppilot-exam-stat-strip.is-hero .ppilot-exam-stat-chip {
	background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); box-shadow: none;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ppilot-exam-stat-chip-icon {
	width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto;
}
.ppilot-exam-stat-chip-icon.is-blue { background: var(--ppilot-exam-blue-bg); color: var(--ppilot-exam-blue); }
.ppilot-exam-stat-chip-icon.is-orange { background: var(--ppilot-exam-orange-bg); color: var(--ppilot-exam-orange); }
.ppilot-exam-stat-chip-icon.is-green { background: var(--ppilot-success-bg); color: var(--ppilot-success); }
.ppilot-exam-stat-chip-icon.is-red { background: var(--ppilot-exam-danger-bg); color: var(--ppilot-exam-danger); }
.ppilot-exam-stat-chip-icon.is-purple { background: var(--ppilot-exam-purple-bg); color: var(--ppilot-exam-purple); }
.ppilot-exam-stat-strip.is-hero .ppilot-exam-stat-chip-icon {
	background: rgba(255,255,255,0.22) !important; color: #fff !important;
}
.ppilot-exam-stat-chip-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ppilot-exam-stat-chip-value { font-size: 16px; font-weight: 800; color: var(--ppilot-ink); white-space: nowrap; }
.ppilot-exam-stat-chip-label { font-size: 11px; color: var(--ppilot-muted); white-space: nowrap; }
.ppilot-exam-stat-strip.is-hero .ppilot-exam-stat-chip-value,
.ppilot-exam-stat-strip.is-hero .ppilot-exam-stat-chip-label { color: #fff; }
.ppilot-exam-stat-strip.is-hero .ppilot-exam-stat-chip-label { opacity: 0.85; }
.ppilot-app .ppilot-exam-end-btn {
	background: transparent; border: 1.5px solid var(--ppilot-exam-danger); color: var(--ppilot-exam-danger);
	border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer;
}
.ppilot-app .ppilot-exam-end-btn:hover { background: var(--ppilot-exam-danger); color: #fff; }
.ppilot-app .ppilot-exam-end-btn:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 2px; background: var(--ppilot-exam-danger); color: #fff; }
.ppilot-app .ppilot-exam-end-btn:active { background: #b91c1c; color: #fff; }

.ppilot-exam-mobile-topbar, .ppilot-exam-mobile-status-row, .ppilot-exam-mobile-navtrig, .ppilot-exam-question-head-icons { display: none; }

.ppilot-exam-shell { border-radius: 14px; overflow: visible; box-shadow: 0 1px 3px rgba(16,24,40,0.06); }
/* §sidebar-width-fix (0.82.6): "left side baar me jo history geo economic
   etc ha eski widh increase kro" -- the Question Navigator column read as
   cramped at 290px once real subject names + range + count + progress bar
   all sit on one row. Widened to 340px (and the 1280px breakpoint's 250px
   up to 300px) and rebalanced every internal row metric below (icon size,
   gaps, padding, font sizes) to match the extra room proportionally,
   rather than just widening the empty container. */
.ppilot-exam-body {
	display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; gap: 18px; align-items: start;
	background: var(--ppilot-bg); border: 1px solid var(--ppilot-border); border-top: none; border-radius: 0 0 14px 14px; padding: 20px;
}
@media (max-width: 1280px) {
	.ppilot-exam-body { grid-template-columns: 300px minmax(0, 1fr) 290px; }
}

.ppilot-exam-sidebar, .ppilot-exam-side-card, .ppilot-exam-question-head,
.ppilot-exam-question-card, .ppilot-exam-stats-rail {
	box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
}
/* §sidebar-cards-fix (0.82.7): the reference shows each subject as its OWN
   floating white card (rounded corners + soft shadow) stacked on a pale
   grey panel background — that is what actually reads as "the sidebar" at
   a glance. Every earlier round (0.82.3-0.82.6) fixed real sub-bugs inside
   the rows (icon colors, progress-bar visibility, tab clipping, width) but
   never fixed THIS, because the sidebar panel itself and every row inside
   it were both set to the exact same flat white (#fff) with no shadow on
   the collapsed rows at all — so nothing ever visually separated one
   subject from the next; it always read as one plain list, never as
   "cards", which is almost certainly why it kept looking unchanged no
   matter how much the internal spacing/icons were tuned. Panel now uses
   the pale grey page tone instead of white, and §subject-row-card below
   gives every row (open or collapsed) its own white card + shadow. */
.ppilot-exam-sidebar { background: var(--ppilot-bg); border: 1px solid var(--ppilot-border); border-radius: 14px; padding: 20px; overflow-x: hidden; width: 100%; box-sizing: border-box; }
/* §sidebar-card-width-fix (0.82.8): .ppilot-exam-palette (the direct wrapper
   rendered by renderPalette() around the tabs/title/accordion) had NO CSS
   rule of its own at all before this version -- harmless on most themes
   since a bare block div defaults to 100% of its parent, but one more
   explicit width here costs nothing and removes it as a possible link in
   the same shrink-to-fit chain the accordion/section/row fix below targets. */
.ppilot-exam-palette { display: block; width: 100%; box-sizing: border-box; }

/* ===================== LEFT SIDEBAR — the ONLY question navigator ===================== */

.ppilot-exam-sidebar-tabs {
	display: flex; gap: 4px; margin-bottom: 14px; background: var(--ppilot-bg); border-radius: 10px; padding: 4px;
}
/* §sidebar-tab-fit-fix (0.82.5): at the real sidebar width, "All Questions"
   was clipping to "All Questi…" — 11.5px/600-weight + 7px/4px padding left
   too little room for the full label against the equal-width "Flagged (2)"
   tab next to it. Trimmed font-size/letter-spacing/padding just enough to
   let the whole word through un-clipped at normal sidebar widths. */
.ppilot-exam-sidebar-tab {
	flex: 1 1 0; min-width: 0; background: none; border: none; border-radius: 8px; padding: 8px 5px; font-size: 11.5px; font-weight: 600;
	letter-spacing: -0.01em; color: var(--ppilot-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* §sidebar-tab-fit-fix (0.82.5): the reference's active tab is a flat
   solid blue, not the blue→purple gradient used for the bigger primary
   actions elsewhere — sampled directly from the reference screenshot
   (~#1057ff/#1c5df6, the same cluster --ppilot-primary was already sampled
   from). Switched to match it exactly instead of the gradient. */
.ppilot-exam-sidebar-tab.is-active { background: var(--ppilot-exam-blue); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,0.3); }
.ppilot-exam-sidebar-tab:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 1px; }

/* Real per-subject list — icon, name, real range, real answered/total count. Always visible above the navigator grid. */
.ppilot-exam-subject-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ppilot-exam-subject-row {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border-radius: 12px;
	border: 1px solid transparent; background: none; cursor: pointer; text-align: left;
}
.ppilot-exam-subject-row:hover { background: var(--ppilot-bg); }
.ppilot-exam-subject-row.is-active { background: var(--ppilot-exam-blue-bg); border-color: var(--ppilot-exam-blue); }
.ppilot-exam-subject-row:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 1px; }
.ppilot-exam-subject-icon {
	width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 16px; flex: 0 0 auto;
}
.ppilot-exam-subject-icon.is-accent-blue { background: var(--ppilot-exam-blue-bg); color: var(--ppilot-exam-blue); }
.ppilot-exam-subject-icon.is-accent-purple { background: var(--ppilot-exam-purple-bg); color: var(--ppilot-exam-purple); }
.ppilot-exam-subject-icon.is-accent-pink { background: var(--ppilot-exam-pink-bg); color: var(--ppilot-exam-pink); }
.ppilot-exam-subject-icon.is-accent-green { background: var(--ppilot-success-bg); color: var(--ppilot-success); }
.ppilot-exam-subject-icon.is-accent-orange { background: var(--ppilot-exam-orange-bg); color: var(--ppilot-exam-orange); }
.ppilot-exam-subject-icon.is-accent-teal { background: var(--ppilot-exam-teal-bg); color: var(--ppilot-exam-teal); }
.ppilot-exam-subject-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ppilot-exam-subject-row-name { font-size: 14px; font-weight: 600; color: var(--ppilot-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppilot-exam-subject-row-range { font-size: 12px; color: var(--ppilot-muted); font-variant-numeric: tabular-nums; }
.ppilot-exam-subject-row-count {
	color: var(--ppilot-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; background: var(--ppilot-bg);
	border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700;
}
.ppilot-exam-subject-row-chevron { color: var(--ppilot-muted); flex: 0 0 auto; font-size: 16px; transition: transform 0.15s ease; }
.ppilot-exam-subject-row-chevron.is-open { transform: rotate(90deg); }

/* §premium-header-hero-reskin (0.82.3): a thin real-data progress bar
   under each sidebar subject row — this is what the reference screenshot
   shows here instead of the fraction text alone. Reuses the same
   .ppilot-exam-progress-track/-fill pair as the right column's Overall
   Progress bar, so it is the exact same gradient fill and dark-mode
   styling rather than a second, slightly-different bar.
   §sidebar-progress-visibility-fix (0.82.5): the base .ppilot-exam-
   progress-track's own background is var(--ppilot-bg) (#f9fafb) — IDENTICAL
   to .ppilot-exam-subject-section.is-open's background (also var(--ppilot-
   bg)), and near-identical to the white (#fff) sidebar card behind a
   collapsed row. The bar was always in the DOM and always rendering, it was
   just invisible against its own container, which is why it never read as
   "added" on screen. Giving the sidebar-nested track its own explicit,
   visibly-different background (var(--ppilot-border), #e5e7eb) — scoped to
   this nested selector only, so the right-column Overall Progress bar
   keeps its original look — fixes that without touching anything else. */
.ppilot-exam-subject-row-progress { padding: 0 12px 10px; }
.ppilot-exam-subject-row-progress .ppilot-exam-progress-track { height: 6px; background: var(--ppilot-border); }

/* §accordion-fix (0.76.1): one subject's grid open at a time — keeps a
   120+ question navigator from turning the whole sidebar into one giant
   scroll of numbers. Mirrors how the question bank itself is organised
   (topic-wise), not a flat 1-N wall. */
/* §sidebar-card-width-fix (0.82.8): the 0.82.7 card/shadow rework relied on
   flex "stretch" being the cross-axis default for .ppilot-exam-subject-
   section inside this column-flex accordion, with no WIDTH declared on the
   section itself. That is correct per spec, but the live site screenshot
   showed each COLLAPSED card shrink-wrapped to its own content (~150-190px,
   hugging the left edge) while the one OPEN card's number-grid rendered as
   a visually separate full-width box below/overlapping a narrow header --
   i.e. the header (a <button>) and the grid (a <div>) were sizing
   independently inside the same shrink-fit parent instead of both being
   pinned to one shared full-width card, which is exactly what a missing/
   overridden stretch looks like (most likely hpgovtjob.com's active theme
   carrying its own `button { width: auto }`-style reset that out-specifies
   our bare-class button rule — WordPress themes commonly do this — rather
   than anything about our own flex math being wrong). Rather than keep
   debugging which exact rule wins the cascade on the live theme, every
   level of this chain now gets an explicit, redundant `width: 100%` (plus
   `box-sizing: border-box`, belt-and-suspenders alongside the file's
   existing universal border-box rule) instead of relying on inherited flex
   stretch alone, and the two sub-100%-width pieces that broke on screen
   (.ppilot-exam-subject-row the header button, .ppilot-exam-palette-grid
   the number grid) get `!important` specifically on `width`/`box-sizing`
   so a same-or-lower-specificity theme rule can no longer win. */
.ppilot-exam-subject-accordion { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; min-width: 0; width: 100%; }
/* §subject-row-card (0.82.7): every subject — collapsed or open — is its
   own elevated white card now, not a flat row inside one shared box. */
.ppilot-exam-subject-section {
	display: block; width: 100% !important; box-sizing: border-box !important; align-self: stretch; flex: 0 0 auto;
	border-radius: 14px; min-width: 0; background: #fff;
	box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.08);
	border: 1px solid transparent; overflow: hidden;
}
.ppilot-exam-subject-section.is-open { padding-bottom: 12px; border-color: var(--ppilot-exam-blue); box-shadow: 0 2px 8px rgba(37,99,235,0.14), 0 0 0 1px var(--ppilot-exam-blue); }
.ppilot-exam-subject-section .ppilot-exam-subject-row {
	display: flex !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 12px; border-radius: 14px;
}
.ppilot-exam-subject-section.is-open .ppilot-exam-subject-row { background: var(--ppilot-exam-blue-bg); }
.ppilot-exam-subject-section .ppilot-exam-palette-grid {
	display: grid !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 12px 0; min-width: 0;
}

.ppilot-exam-navigator-title {
	display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em;
	color: var(--ppilot-muted); text-transform: uppercase; margin-bottom: 10px;
}
.ppilot-exam-navigator-title-range { font-weight: 600; text-transform: none; letter-spacing: normal; }

.ppilot-exam-jump-btn {
	width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px;
	padding: 11px; border-radius: 10px; font-weight: 600; font-size: 13px;
	background: var(--ppilot-bg); border: 1px solid var(--ppilot-border); color: var(--ppilot-ink); cursor: pointer;
}
.ppilot-exam-jump-btn:hover { background: #eef2f7; }
.ppilot-exam-jump-panel { display: flex; gap: 6px; margin-top: 8px; }
.ppilot-exam-jump-input { flex: 1 1 auto; min-width: 0; }
.ppilot-exam-jump-go { flex: 0 0 auto; padding: 8px 14px; }

/* minmax(0, 1fr), not bare 1fr — a bare fr track's minimum is "auto"
   (its content's own min width), which is how a number grid could force
   its column wider than the fixed-width sidebar and bleed past its edge.
   minmax(0, 1fr) lets the track actually shrink to the column width. */
/* §sidebar-cards-fix (0.82.7): reference's open subject grid is 6 numbers
   per row (not 5) — switched to match, dense variant kept proportionally
   the same so a large subject (20+ questions) still wraps cleanly. */
.ppilot-exam-palette-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.ppilot-exam-palette-grid.is-dense { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ppilot-exam-palette-empty { grid-column: 1 / -1; font-size: 12.5px; padding: 10px 2px; }

/* Solid, saturated fills + white text for every "has state" button (WCAG
   AA 4.5:1), a crisp neutral outline for plain not-answered, and the
   current question always wins visually via the gradient override below.
   §palette-btn-3digit-fix (0.82.9): a live screenshot with General
   Awareness (questions 86-120, so the grid has to show 101/103/108/113/
   116/119 etc) showed 3-digit numbers clipping -- "101" rendering as "10"
   with the "1" spilling past the box edge. Root cause: this rule had no
   centering of its own at all (relying on the plain <button> UA default,
   which is horizontal-only and not reliably vertical) and no
   width/overflow safety margin -- a 2-digit number at 13px/700-weight
   happened to fit the ~26-30px square by luck, a 3-digit one did not.
   Explicit flex centering (both axes, so vertical is no longer luck-of-
   the-UA-default either), zero padding so the full box is available to the
   text, a tighter font-size + slightly negative letter-spacing specifically
   for 3-digit numbers (the only case that was actually breaking; 2-digit
   numbers keep reading at their original comfortable size), and
   `overflow: hidden` as a hard safety net so even an edge case never
   visibly spills past the button's own rounded corners again. */
.ppilot-exam-palette-btn {
	aspect-ratio: 1; border-radius: 9px; border: 1.5px solid #cbd5e1; background: #fff; color: var(--ppilot-ink);
	font-weight: 700; font-size: 13px; cursor: pointer; transition: transform 0.1s ease;
	display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
	box-sizing: border-box; overflow: hidden; font-variant-numeric: tabular-nums;
}
/* Only the 3-digit case (100+) gets the smaller, tighter treatment — every
   other state rule above/below still applies on top of this (background,
   color, border), this only ever touches font sizing/spacing. */
.ppilot-exam-palette-btn.is-3digit { font-size: 10.5px; letter-spacing: -0.03em; }
.ppilot-exam-reduced-motion .ppilot-exam-palette-btn { transition: none; }
.ppilot-exam-palette-btn:hover { transform: scale(1.06); }
.ppilot-exam-reduced-motion .ppilot-exam-palette-btn:hover { transform: none; }
.ppilot-exam-palette-btn:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 2px; }
.ppilot-exam-q-unanswered { background: #fff; color: var(--ppilot-ink); border-color: #cbd5e1; }
.ppilot-exam-q-answered, .ppilot-exam-palette-btn.ppilot-exam-q-answered { background: var(--ppilot-success); color: #fff; border-color: var(--ppilot-success); }
.ppilot-exam-q-marked, .ppilot-exam-palette-btn.ppilot-exam-q-marked { background: var(--ppilot-exam-review); color: #fff; border-color: var(--ppilot-exam-review); }
.ppilot-exam-q-answered-marked, .ppilot-exam-palette-btn.ppilot-exam-q-answered-marked { background: var(--ppilot-exam-marked-answered); color: #fff; border-color: var(--ppilot-exam-marked-answered); }
/* The active/current question always reads as the strongest highlight,
   regardless of its answered/marked status — placed after the four status
   rules above (equal specificity) so it always wins the cascade. */
.ppilot-exam-palette-btn.is-current,
.ppilot-exam-q-unanswered.is-current,
.ppilot-exam-q-answered.is-current,
.ppilot-exam-q-marked.is-current,
.ppilot-exam-q-answered-marked.is-current {
	background: var(--ppilot-exam-gradient); color: #fff; border-color: transparent;
	box-shadow: 0 0 0 3px rgba(124,58,237,0.22), 0 2px 6px rgba(37,99,235,0.3);
}

.ppilot-exam-legend { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ppilot-border); font-size: 12px; color: var(--ppilot-muted); }
.ppilot-exam-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ppilot-exam-legend-left { display: flex; align-items: center; gap: 8px; }
.ppilot-exam-legend-count { font-weight: 700; color: var(--ppilot-ink); font-variant-numeric: tabular-nums; }
.ppilot-exam-legend-item i { width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--ppilot-border); display: inline-block; }
.ppilot-exam-legend-item i.ppilot-exam-q-answered { border: none; }
.ppilot-exam-legend-item i.ppilot-exam-q-marked { border: none; }
.ppilot-exam-legend-item i.ppilot-exam-q-answered-marked { border: none; }
.ppilot-exam-backdrop { display: none; }

/* ===================== CENTER — question pane ===================== */

.ppilot-exam-question-pane { min-width: 0; }
.ppilot-exam-question-head {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
	background: #fff; border: 1px solid var(--ppilot-border); border-radius: 14px; padding: 14px 18px;
}
.ppilot-exam-question-number { font-weight: 700; font-size: 15px; color: var(--ppilot-ink); display: flex; align-items: center; gap: 10px; }
.ppilot-exam-chevron-btn {
	width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ppilot-border); background: #fff; color: var(--ppilot-ink);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; flex: 0 0 auto;
}
.ppilot-exam-chevron-btn:hover { background: var(--ppilot-bg); }
.ppilot-exam-chevron-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.ppilot-exam-meta-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ppilot-exam-meta-pill { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.ppilot-exam-meta-pill.is-subject { background: var(--ppilot-exam-blue-bg); color: var(--ppilot-exam-blue); }
.ppilot-exam-meta-pill.is-difficulty-easy { background: var(--ppilot-success-bg); color: var(--ppilot-success); }
.ppilot-exam-meta-pill.is-difficulty-medium { background: var(--ppilot-exam-orange-bg); color: var(--ppilot-exam-orange); }
.ppilot-exam-meta-pill.is-difficulty-hard { background: var(--ppilot-exam-danger-bg); color: var(--ppilot-exam-danger); }
.ppilot-exam-meta-pill.is-type { background: var(--ppilot-exam-purple-bg); color: var(--ppilot-exam-purple); }
.ppilot-exam-meta-pill.is-marks { background: var(--ppilot-exam-orange-bg); color: var(--ppilot-exam-orange); }

.ppilot-exam-question-card { background: #fff; border: 1px solid var(--ppilot-border); border-radius: 14px; padding: 24px; }
.ppilot-exam-review-toggle {
	margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--ppilot-border);
	border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ppilot-ink); white-space: nowrap; cursor: pointer;
}
.ppilot-exam-review-toggle.is-marked { color: var(--ppilot-exam-review); border-color: var(--ppilot-exam-review); background: var(--ppilot-exam-review-bg); }
.ppilot-exam-review-toggle:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 2px; }

/* §exam-cockpit-rebuild (0.76.0) §11: Hindi rendered FIRST (bold/primary)
   when the question genuinely has bilingual content; English (or the only
   available language) is the secondary, lighter line underneath. Both
   respect the Tools-panel font-size preference. */
.ppilot-exam-question-text {
	font-size: calc(17px * var(--ppilot-exam-font-scale)); line-height: 1.65; color: var(--ppilot-ink); margin-bottom: 8px;
	white-space: pre-wrap; font-weight: 700;
}
.ppilot-exam-question-text-hi { font-family: inherit; }
.ppilot-exam-question-text-secondary { color: var(--ppilot-muted); font-size: calc(15px * var(--ppilot-exam-font-scale)); font-weight: 400; }

.ppilot-exam-options { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.ppilot-exam-option {
	display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1.5px solid var(--ppilot-border); border-radius: 12px;
	cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; position: relative;
}
.ppilot-exam-reduced-motion .ppilot-exam-option { transition: none; }
.ppilot-exam-option:hover { border-color: var(--ppilot-exam-blue); }
/* §G: selected state is intentionally NEUTRAL/PRIMARY (brand blue→purple
   family), never green — before grading, "selected" must never visually
   read as "correct". */
.ppilot-exam-option.is-selected { border-color: var(--ppilot-exam-blue); background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%); box-shadow: 0 0 0 1px var(--ppilot-exam-blue); }
.ppilot-exam-option-letter {
	width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ppilot-border); background: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--ppilot-muted); flex: 0 0 auto;
}
.ppilot-exam-option.is-selected .ppilot-exam-option-letter { border-color: transparent; background: var(--ppilot-exam-gradient); color: #fff; }
.ppilot-exam-option-text-wrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ppilot-exam-option-text { font-size: calc(15px * var(--ppilot-exam-font-scale)); color: var(--ppilot-ink); }
/* §premium-header-hero-reskin (0.82.3): opt.text_hi is real data the
   server already sends with every option (StudentSafeQuestionSerializer::
   safe_options()) — this was simply never rendered before. Shown only
   when an option genuinely has Hindi text, as a muted secondary line,
   mirroring the existing question-text-secondary treatment. */
.ppilot-exam-option-text-hi { font-size: calc(13px * var(--ppilot-exam-font-scale)); color: var(--ppilot-muted); }
.ppilot-exam-option-check {
	color: #fff; font-weight: 700; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
	background: var(--ppilot-exam-gradient); display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.ppilot-exam-option:focus-within { outline: 2px solid var(--ppilot-navy); outline-offset: 2px; }
.ppilot-exam-numerical-input { max-width: 220px; }

.ppilot-exam-save-status { font-size: 13px; min-height: 22px; display: flex; align-items: center; gap: 8px; color: var(--ppilot-muted); }
.ppilot-exam-save-saved { color: var(--ppilot-success); }
.ppilot-exam-save-error { color: var(--ppilot-exam-danger); }
.ppilot-exam-header .ppilot-exam-save-status { color: #cbd5e1; font-size: 11.5px; min-height: 0; }
.ppilot-exam-header .ppilot-exam-save-saved { color: #4ade80; }
.ppilot-exam-header .ppilot-exam-save-error { color: #fca5a5; }

.ppilot-exam-question-actions { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.ppilot-exam-bottom-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ppilot-border); }
.ppilot-exam-nav-btn { padding: 12px 24px; font-weight: 700; border-radius: 10px; }
.ppilot-exam-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* §exam-cockpit-rebuild (0.76.0): primary actions use the reference's
   blue→purple gradient system.

   §save-next-text-color-fix (0.82.6): this whole rule block was scoped
   under ".ppilot-app" (the ADMIN wrapper class used on wp-admin pages,
   per admin/ppilot-shared.css) instead of ".ppilot-exam-app" (the REAL
   root class this front-end page actually renders under — confirmed at
   the top of this file: "Strongly scoped under .ppilot-exam-app"). That
   ancestor never exists in the exam player's DOM, so this rule — the
   ONLY place `color: #fff` was ever declared for the primary nav/jump-go
   /report-submit buttons — silently never matched, on every version back
   to 0.76.0. The gradient *background* still showed (a different,
   correctly-scoped .ppilot-exam-bottom-nav rule supplies that for Save &
   Next specifically), but no rule was setting the TEXT colour at all, so
   it fell through to the host theme/browser's default button text colour
   — exactly the "faded"/non-white text the owner kept flagging, and
   exactly why repainting the background in 0.82.4/0.82.5 never fixed it.
   Corrected the ancestor to .ppilot-exam-app so this now actually applies
   (also fixes the same silent gap for the smaller jump-go and
   report-submit buttons, not just Save & Next). */
.ppilot-exam-app .ppilot-exam-nav-btn.ppilot-btn-primary,
.ppilot-exam-app .ppilot-exam-jump-go.ppilot-btn-primary,
.ppilot-exam-app .ppilot-exam-report-submit {
	background: var(--ppilot-exam-gradient); border-color: transparent; color: #fff;
}
.ppilot-exam-app .ppilot-exam-nav-btn.ppilot-btn-primary:hover,
.ppilot-exam-app .ppilot-exam-jump-go.ppilot-btn-primary:hover,
.ppilot-exam-app .ppilot-exam-report-submit:hover { background: var(--ppilot-exam-gradient-hover); border-color: transparent; color: #fff; }
.ppilot-exam-app .ppilot-exam-nav-btn.ppilot-btn-primary:focus-visible,
.ppilot-exam-app .ppilot-exam-report-submit:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 2px; }

/* §exam-hero-banner-photo (0.82.4): "Save & Next clear visible banao next
   level premium" -- the main bottom-nav Save & Next button (the one real
   forward-progress action on every question) gets extra weight beyond the
   shared gradient above: bigger padding, a soft brand-colour glow shadow,
   a subtle lift on hover, and a forward-chevron nudge — same gradient
   fill/handlers as every other primary button here, visual-only. Scoped
   to .ppilot-exam-bottom-nav specifically so the smaller jump-go/report
   -submit buttons elsewhere keep their original, more compact sizing.

   §save-next-vivid-fix (0.82.5): re-checked the cascade end-to-end — the
   .ppilot-app .ppilot-exam-nav-btn.ppilot-btn-primary rule above (3
   class-level selectors) legitimately outranks every other button rule in
   this plugin (ppilot-shared.css's own .ppilot-app .ppilot-btn-primary is
   only 2), and .ppilot-app IS present on the real root element alongside
   .ppilot-exam-app (see includes/Core/Plugin.php's exam-root markup) — so
   there was no mis-scoped selector and nothing silently overriding it.
   What WAS true: the button used --ppilot-exam-gradient (#2563eb→#7c3aed)
   as its RESTING state and only switched to the darker, more saturated
   --ppilot-exam-gradient-hover (#1d4ed8→#6d28d9) on hover — so next to the
   flat, fully-saturated solid colours used elsewhere in this card (the
   timer ring, the question-navigator's current-cell, the stat chips), the
   button's own resting gradient read as the softest/lightest element on
   the screen, which is what "faded" was describing. Fixed by making the
   darker, punchier gradient the DEFAULT fill (not just the hover state),
   adding a new, darker-still gradient for :hover/:active so there is still
   a clear pressed feeling, and tightening the glow shadow (less blur, more
   opacity) so the button reads as a crisp solid card instead of a soft
   halo. */
.ppilot-exam-bottom-nav .ppilot-exam-nav-btn.ppilot-btn-primary {
	background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%); color: #fff;
	padding: 14px 30px; font-size: 15px; font-weight: 800; letter-spacing: 0.01em;
	box-shadow: 0 4px 12px rgba(29,78,216,0.45), 0 1px 4px rgba(109,40,217,0.4);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ppilot-exam-bottom-nav .ppilot-exam-nav-btn.ppilot-btn-primary:hover {
	background: linear-gradient(135deg, #1740b0 0%, #5b21a6 100%); color: #fff;
	box-shadow: 0 6px 16px rgba(23,64,176,0.52), 0 2px 6px rgba(91,33,166,0.44); transform: translateY(-1px);
}
.ppilot-exam-bottom-nav .ppilot-exam-nav-btn.ppilot-btn-primary:active { transform: translateY(0); }
.ppilot-exam-bottom-nav .ppilot-exam-nav-btn.ppilot-btn-primary span[aria-hidden="true"] {
	display: inline-block; transition: transform 0.15s ease;
}
.ppilot-exam-bottom-nav .ppilot-exam-nav-btn.ppilot-btn-primary:hover span[aria-hidden="true"] { transform: translateX(3px); }

.ppilot-exam-submitting-overlay {
	position: fixed; inset: 0; background: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; z-index: 100;
}

/* ===================== RIGHT COLUMN — Timer / Progress / Subject-wise Progress / Test Overview (NO question grid) ===================== */

.ppilot-exam-stats-column { display: flex; flex-direction: column; gap: 14px; }
.ppilot-exam-stats-rail { background: #fff; border: 1px solid var(--ppilot-border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ppilot-exam-timer-head { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ppilot-exam-timer-title { align-self: flex-start; }

.ppilot-exam-side-card { background: #fff; border: 1px solid var(--ppilot-border); border-radius: 14px; padding: 18px; }
.ppilot-exam-side-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ppilot-exam-side-card-title { font-size: 14px; font-weight: 700; color: var(--ppilot-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ppilot-exam-side-card-head .ppilot-exam-side-card-title { margin-bottom: 0; }
.ppilot-exam-title-bar { width: 4px; height: 15px; border-radius: 3px; background: var(--ppilot-exam-gradient); display: inline-block; }
.ppilot-exam-side-card-link { font-size: 12px; font-weight: 700; color: var(--ppilot-exam-blue); background: none; border: none; cursor: pointer; white-space: nowrap; }

/* Subject-wise Progress — one row per real subject: icon, name + real
   answered/total fraction, mini percentage ring. */
.ppilot-exam-subject-progress-list { display: flex; flex-direction: column; gap: 4px; }
.ppilot-exam-subject-progress-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.ppilot-exam-subject-progress-row + .ppilot-exam-subject-progress-row { border-top: 1px solid var(--ppilot-border); }
.ppilot-exam-subject-progress-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ppilot-exam-subject-progress-name { font-size: 13px; font-weight: 600; color: var(--ppilot-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppilot-exam-subject-progress-frac { font-size: 11.5px; color: var(--ppilot-muted); font-variant-numeric: tabular-nums; }

.ppilot-exam-subject-ring { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.ppilot-exam-subject-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ppilot-exam-subject-ring-track { fill: none; stroke: var(--ppilot-border); stroke-width: 4; }
.ppilot-exam-subject-ring-arc { fill: none; stroke: var(--ppilot-exam-teal); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
.ppilot-exam-reduced-motion .ppilot-exam-subject-ring-arc { transition: none; }
.ppilot-exam-subject-ring-pct {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--ppilot-ink);
}

.ppilot-exam-timer-circle { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.ppilot-exam-timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ppilot-exam-timer-ring-track { fill: none; stroke: var(--ppilot-border); stroke-width: 9; }
.ppilot-exam-timer-ring-arc { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 0.9s linear; }
.ppilot-exam-reduced-motion .ppilot-exam-timer-ring-arc { transition: none; }
.ppilot-exam-timer-ring-normal { stroke: url(#ppilot-exam-timer-gradient); }
.ppilot-exam-timer-ring-warning { stroke: var(--ppilot-warning); }
.ppilot-exam-timer-ring-critical { stroke: var(--ppilot-exam-danger); }
.ppilot-exam-timer-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ppilot-exam-timer-caption { font-size: 11px; color: var(--ppilot-muted); }
.ppilot-exam-timer-value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ppilot-ink); }
.ppilot-exam-timer-critical .ppilot-exam-timer-value { color: var(--ppilot-exam-danger); animation: ppilot-exam-pulse 1s ease infinite; }
.ppilot-exam-reduced-motion .ppilot-exam-timer-critical .ppilot-exam-timer-value { animation: none; }
@media (prefers-reduced-motion: reduce) { .ppilot-exam-timer-critical .ppilot-exam-timer-value { animation: none; } }
@keyframes ppilot-exam-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.ppilot-exam-timer-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ppilot-muted); flex-wrap: wrap; justify-content: center; }
.ppilot-exam-timer-legend-item { display: flex; align-items: center; gap: 5px; }
.ppilot-exam-timer-legend-item i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ppilot-exam-timer-legend-normal i { background: var(--ppilot-exam-blue); }
.ppilot-exam-timer-legend-warning i { background: var(--ppilot-warning); }
.ppilot-exam-timer-legend-critical i { background: var(--ppilot-exam-danger); }

.ppilot-exam-progress-block { width: 100%; }
.ppilot-exam-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--ppilot-muted); margin-bottom: 6px; }
.ppilot-exam-progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--ppilot-bg); overflow: hidden; }
.ppilot-exam-progress-fill { height: 100%; background: var(--ppilot-exam-gradient); border-radius: 999px; transition: width 0.3s ease; }
.ppilot-exam-reduced-motion .ppilot-exam-progress-fill { transition: none; }

/* Test Overview — 4 live stat tiles */
.ppilot-exam-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ppilot-exam-overview-tile {
	display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 12px; background: var(--ppilot-bg);
	border: 1px solid var(--ppilot-border);
}
.ppilot-exam-overview-icon {
	width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.ppilot-exam-overview-tile.is-answered .ppilot-exam-overview-icon { background: var(--ppilot-success-bg); color: var(--ppilot-success); }
.ppilot-exam-overview-tile.is-unanswered .ppilot-exam-overview-icon { background: #fff; color: var(--ppilot-muted); border: 1px solid var(--ppilot-border); }
.ppilot-exam-overview-tile.is-marked .ppilot-exam-overview-icon { background: var(--ppilot-exam-review-bg); color: var(--ppilot-exam-review); }
.ppilot-exam-overview-tile.is-answered-marked .ppilot-exam-overview-icon { background: var(--ppilot-exam-marked-answered-bg); color: var(--ppilot-exam-marked-answered); }
.ppilot-exam-overview-value { font-size: 17px; font-weight: 800; color: var(--ppilot-ink); }
.ppilot-exam-overview-label { font-size: 10.5px; color: var(--ppilot-muted); text-align: center; }

.ppilot-exam-submit-btn { width: 100%; padding: 12px; font-weight: 700; border-radius: 10px; font-size: 15px; }

/* ===================== Tools / Report popovers ===================== */
.ppilot-exam-tools-panel, .ppilot-exam-report-panel {
	position: fixed; top: 76px; right: clamp(16px, 3vw, 56px); z-index: 500; width: 300px; max-width: calc(100vw - 32px);
	background: #fff; border: 1px solid var(--ppilot-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(16,24,40,0.22);
	padding: 4px 0 16px; max-height: calc(100vh - 100px); overflow-y: auto;
}
.ppilot-exam-tools-head {
	display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; font-size: 14px;
	border-bottom: 1px solid var(--ppilot-border); margin-bottom: 10px; color: var(--ppilot-ink);
}
.ppilot-exam-tools-head .ppilot-calc-close { background: var(--ppilot-bg); color: var(--ppilot-ink); }
.ppilot-exam-tools-head .ppilot-calc-close:hover { background: var(--ppilot-border); }
.ppilot-exam-tools-quick-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; border-bottom: 1px solid var(--ppilot-border); margin-bottom: 14px; }
.ppilot-exam-tools-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; margin-bottom: 14px; }
.ppilot-exam-tools-row-label { font-size: 13px; font-weight: 600; color: var(--ppilot-ink); }
.ppilot-exam-tools-fontsize { display: flex; align-items: center; gap: 8px; }
.ppilot-exam-tools-fontsize button {
	width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ppilot-border); background: var(--ppilot-bg); cursor: pointer; font-weight: 700; font-size: 13px;
}
.ppilot-exam-tools-fontsize button:hover { background: var(--ppilot-border); }
.ppilot-exam-tools-fontsize-value { font-size: 12px; color: var(--ppilot-muted); min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.ppilot-exam-tools-toggle-row { cursor: pointer; font-size: 13px; color: var(--ppilot-ink); }
.ppilot-exam-tools-shortcuts-title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ppilot-muted); padding: 0 16px; margin-bottom: 8px; }
.ppilot-exam-tools-shortcuts { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.ppilot-exam-tools-shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ppilot-ink); }

.ppilot-exam-report-panel { display: flex; flex-direction: column; gap: 10px; }
.ppilot-exam-report-cat, .ppilot-exam-report-textarea { margin: 0 16px; width: calc(100% - 32px); }
.ppilot-exam-report-textarea { resize: vertical; min-height: 60px; }
.ppilot-exam-report-panel .ppilot-notice { margin: 0 16px; }
.ppilot-exam-report-submit { margin: 4px 16px 0; }

@media (max-width: 900px) {
	.ppilot-exam-app { max-width: 100%; padding: 0; }
	.ppilot-exam-topbar, .ppilot-exam-hero { display: none; }

	/* §mobile-question-screen-hotfix (0.83.3): replaces the old gradient
	   bar + gear icon + "End Test" button (not in the approved preview's
	   screen-2 app bar at all — see renderMobileTopBar()) with a plain,
	   minimal strip matching mobile-preview.html's #s2 .appbar exactly:
	   a small brand mark, the real test title, and a LIVE pill. */
	.ppilot-exam-mobile-topbar {
		display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ppilot-ink);
		padding: 12px 16px; border-bottom: 1px solid var(--ppilot-border); border-radius: 0;
	}
	.ppilot-exam-mobile-topbar-mark {
		width: 28px; height: 28px; border-radius: 8px; background: var(--ppilot-exam-gradient); flex: 0 0 auto; position: relative;
	}
	.ppilot-exam-mobile-topbar-mark::before { content: '🏛'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
	.ppilot-exam-mobile-topbar-id { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
	.ppilot-exam-mobile-topbar-id b {
		font-size: 13px; font-weight: 800; color: var(--ppilot-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.ppilot-exam-mobile-topbar-id .ppilot-exam-live-pill { align-self: flex-start; }

	/* §mobile-preview-match (0.83.2): the approved preview's "qstat" row —
	   two bordered boxes (Time Remaining, Question X / Y) side by side,
	   replacing 0.83.0/0.83.1's progress-bar treatment to match exactly.
	   Save status (real, useful feedback — idle/saving/saved/error — the
	   static preview never needed to show) is kept as an optional third,
	   full-width row rather than silently dropped. */
	.ppilot-exam-mobile-status-row {
		display: flex; flex-wrap: wrap; gap: 8px; background: var(--ppilot-bg); border: 1px solid var(--ppilot-border); border-top: none;
		padding: 10px 14px; position: sticky; top: 49px; z-index: 24;
	}
	.ppilot-exam-mobile-qstat-box {
		flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--ppilot-border);
		border-radius: 10px; padding: 8px 10px; font-size: 14px;
	}
	.ppilot-exam-mobile-qstat-box .ppilot-exam-topbar-timer-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
	.ppilot-exam-mobile-qstat-box b, .ppilot-exam-mobile-qstat-box > div > b { display: block; font-size: 13px; font-weight: 800; color: var(--ppilot-ink); font-variant-numeric: tabular-nums; }
	.ppilot-exam-mobile-qstat-box span { display: block; font-size: 10.5px; color: var(--ppilot-muted); }
	.ppilot-exam-mobile-qstat-box .ppilot-exam-timer-warning .ppilot-exam-topbar-timer { color: var(--ppilot-warning); }
	.ppilot-exam-mobile-qstat-box .ppilot-exam-timer-critical .ppilot-exam-topbar-timer { color: var(--ppilot-exam-danger); animation: ppilot-exam-pulse 1s ease infinite; }
	.ppilot-exam-reduced-motion .ppilot-exam-mobile-qstat-box .ppilot-exam-timer-critical .ppilot-exam-topbar-timer { animation: none; }
	@media (prefers-reduced-motion: reduce) { .ppilot-exam-mobile-qstat-box .ppilot-exam-timer-critical .ppilot-exam-topbar-timer { animation: none; } }
	.ppilot-exam-mobile-qstat-save { flex: 1 1 100%; font-size: 12px; }
	.ppilot-exam-mobile-qstat-save .ppilot-exam-save-status { min-height: 0; }

	/* §mobile-empty-render-hotfix (0.83.1): on a narrow viewport the exam is
	   just one card embedded inline in an ordinary WordPress page — nothing
	   stops the PAGE itself from being scrolled past the exam's own content
	   into the theme's surrounding header/footer widgets, while
	   .ppilot-exam-bottom-nav (position: fixed, further down) stays glued
	   to the VIEWPORT bottom regardless of how far the page has scrolled —
	   exactly the "site footer visible, orphan Previous/Save & Next buttons
	   floating over it" symptom reported after testing this at 400px. A
	   genuinely EMPTY/crashed render is now caught and surfaced visibly by
	   the new render()/renderInProgress() try/catch fallbacks in
	   exam-player.js (see that file's 0.83.1 changelog) rather than ever
	   looking like this silently again — but independently of whether a
	   render ever actually fails, the underlying page-can-scroll-past-the-
	   exam-into-the-theme's-footer condition is real on any mobile-width
	   WordPress page and is worth closing on its own: giving the exam its
	   own full-viewport-height canvas (100dvh, with a 100vh fallback for
	   older mobile browsers that don't support dvh) plus a solid, opaque
	   background means the page can never scroll the exam's own footer or
	   nav controls out of view into the surrounding theme chrome while an
	   attempt is in progress. */
	.ppilot-exam-shell { border-radius: 0; min-height: 100vh; min-height: 100dvh; background: #fff; }
	/* §mobile-width-tighten (0.83.5): the post-submission Result view
	   (window.PPilotResultView, mounted inline into .ppilot-exam-inline
	   -result) sits inside .ppilot-exam-submitted-state, which carried its
	   own unreduced 20px side padding on top of result.css's own question
	   -card padding — the same stacked-padding pattern already fixed on
	   the live question screen in 0.83.4, just one container further out.
	   Tightened here so the Result view's own width fix (result.css) isn't
	   immediately undone by this wrapper. */
	.ppilot-exam-submitted-state { padding: 32px 8px; }
	/* §mobile-width-tighten (0.83.4): the question card and its 4 option
	   rows were sitting inside THREE separately-padded nested containers
	   (.ppilot-exam-body 12px + .ppilot-exam-question-pane 16px + the
	   shared .ppilot-exam-question-card's own 24px, desktop default,
	   never overridden for mobile) — 52px of stacked side padding on each
	   edge, ~104px of a ~360-400px phone's width spent on margin before
	   any real content. Tightened to a combined ~34px/side (still a
	   genuine gutter, matching the "16px-ish, not edge-to-edge" ask) by
	   trimming each layer's own horizontal padding rather than zeroing one
	   out entirely, so the card/options now use noticeably more of the
	   available width without the content ever touching the screen edge. */
	.ppilot-exam-body { grid-template-columns: 1fr; padding: 12px 8px; border-radius: 0; }
	.ppilot-exam-question-pane { border-radius: 12px; padding: 16px 10px; padding-bottom: 130px; }
	.ppilot-exam-question-card { padding: 16px; }
	.ppilot-exam-stats-column { display: none; }

	/* §mobile-premium-redesign (0.83.0): the owner's mobile reference shows
	   the Question Navigator as a BOTTOM sheet (slides up from the bottom
	   edge, full width, dimmed page behind it) — not the right-edge side
	   drawer this rule used to open. Repositioned: anchored to the bottom
	   instead of the right, full viewport width, a generous max-height so
	   it never covers the whole screen, and rounded top corners only (a
	   sheet, not a full-height panel). The open/close trigger, the
	   backdrop, and every click handler inside are unchanged — this is a
	   position/sizing change only. */
	.ppilot-exam-sidebar {
		display: none; position: fixed; inset: auto 0 0 0; width: 100%; max-height: 85vh; z-index: 60;
		border-radius: 20px 20px 0 0; overflow-y: auto; box-shadow: 0 -8px 28px rgba(0,0,0,0.22); -webkit-overflow-scrolling: touch;
	}
	.ppilot-exam-sidebar.is-open { display: block; animation: ppilot-exam-sheet-up 0.22s ease; }
	.ppilot-exam-reduced-motion .ppilot-exam-sidebar.is-open { animation: none; }
	@keyframes ppilot-exam-sheet-up { from { transform: translateY(16px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
	.ppilot-exam-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 55; }

	/* --- Drawer chrome: header (title + close) + Navigator/Stats/Legend
	   tabs wrapping the existing .ppilot-exam-palette / legend content. --- */
	.ppilot-exam-drawer { display: flex; flex-direction: column; }
	.ppilot-exam-drawer-head {
		display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px;
		position: sticky; top: 0; background: #fff; z-index: 2;
	}
	.ppilot-exam-drawer-head-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--ppilot-ink); }
	.ppilot-exam-drawer-close {
		width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ppilot-border); background: var(--ppilot-bg); color: var(--ppilot-ink);
		cursor: pointer; font-size: 13px; flex: 0 0 auto;
	}
	/* §mobile-exact-match-pass (0.83.1): sampled directly from the reference
	   screenshot's "Navigator / Stats / Legend" row — plain underline tabs
	   (muted grey text, active tab turns ink-black + a blue bottom rule),
	   not filled pills. The sidebar's OWN "All Questions / Flagged" tabs
	   one level down ARE genuinely filled pills in the reference and keep
	   that existing .ppilot-exam-sidebar-tab styling untouched — these are
	   two visually different tab systems in the same reference, not one
	   style applied twice. */
	.ppilot-exam-drawer-tabs { display: flex; gap: 18px; padding: 0 18px 12px; border-bottom: 1px solid var(--ppilot-border); }
	.ppilot-exam-drawer-tab {
		background: none; border: none; border-bottom: 2px solid transparent; padding: 0 0 10px; font-size: 13px; font-weight: 600;
		color: var(--ppilot-muted); cursor: pointer; white-space: nowrap; margin-bottom: -1px;
	}
	.ppilot-exam-drawer-tab.is-active { color: var(--ppilot-ink); font-weight: 800; border-bottom-color: var(--ppilot-exam-blue); }
	.ppilot-exam-drawer-body { padding: 0 18px 24px; }
	.ppilot-exam-drawer-body .ppilot-exam-palette { padding: 0; }
	/* The tab switcher already lives in the drawer header above — the
	   palette's own All Questions / Flagged tabs stay (they filter the
	   same grid differently, not a duplicate of the Navigator/Stats/Legend
	   tabs one level up), but its own big "QUESTION NAVIGATOR · 1–120"
	   title line would duplicate the drawer header's title, so it's hidden
	   only inside this mobile drawer context. */
	.ppilot-exam-drawer-body .ppilot-exam-navigator-title { display: none; }

	/* --- Stats tab: donut + live counts + the existing Subject-wise
	   Progress card, reused as-is. --- */
	.ppilot-exam-mobile-stats-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; padding: 8px 0 20px; }
	.ppilot-exam-mobile-donut { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
	.ppilot-exam-mobile-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
	.ppilot-exam-mobile-donut-arc { fill: none; stroke: var(--ppilot-exam-blue); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
	.ppilot-exam-reduced-motion .ppilot-exam-mobile-donut-arc { transition: none; }
	.ppilot-exam-mobile-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
	.ppilot-exam-mobile-donut-value { font-size: 16px; font-weight: 800; color: var(--ppilot-ink); font-variant-numeric: tabular-nums; }
	.ppilot-exam-mobile-donut-label { font-size: 11px; color: var(--ppilot-muted); }
	.ppilot-exam-mobile-stats-legend { display: flex; flex-direction: column; gap: 10px; flex: 1 1 160px; min-width: 150px; }
	.ppilot-exam-mobile-stats-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ppilot-ink); }
	.ppilot-exam-mobile-stats-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #cbd5e1; display: inline-block; flex: 0 0 auto; }
	/* §mobile-preview-match (0.83.2): class names renamed from the old
	   ppilot-exam-q-*/ppilot-exam-review names to is-answered/is-unvisited/
	   is-marked/is-flagged (the JS now emits these directly — see
	   renderMobileStatsTab() — so the stale selectors here were never
	   matching anything after that rename and the dots were silently
	   falling back to the default grey). */
	.ppilot-exam-mobile-stats-dot.is-answered { background: var(--ppilot-success); border-color: var(--ppilot-success); }
	.ppilot-exam-mobile-stats-dot.is-unvisited { background: #fff; border-color: #cbd5e1; }
	.ppilot-exam-mobile-stats-dot.is-marked { background: var(--ppilot-exam-orange); border-color: var(--ppilot-exam-orange); }
	.ppilot-exam-mobile-stats-dot.is-flagged { background: var(--ppilot-exam-marked-answered); border-color: var(--ppilot-exam-marked-answered); }

	/* --- Navigator tab: horizontal legend strip above the question grid --- */
	.ppilot-exam-mobile-nav-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 0 18px 14px; }
	.ppilot-exam-mobile-nav-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ppilot-muted); }
	.ppilot-exam-mobile-nav-legend-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #cbd5e1; display: inline-block; flex: 0 0 auto; }
	.ppilot-exam-mobile-nav-legend-dot.is-unvisited { background: #fff; border-color: #cbd5e1; }
	.ppilot-exam-mobile-nav-legend-dot.is-answered { background: var(--ppilot-success); border-color: var(--ppilot-success); }
	.ppilot-exam-mobile-nav-legend-dot.is-marked { background: var(--ppilot-exam-orange); border-color: var(--ppilot-exam-orange); }
	.ppilot-exam-mobile-nav-legend-dot.is-flagged { background: var(--ppilot-exam-marked-answered); border-color: var(--ppilot-exam-marked-answered); }

	/* --- Drawer-scoped overrides: the Navigator's inner "All Questions /
	   Flagged" tabs and number grid are visually DIFFERENT inside this
	   mobile drawer than on desktop (underline tabs instead of filled
	   pills, a border-only open card instead of a blue-tinted one, 5
	   columns instead of 6) — every selector below is scoped under
	   .ppilot-exam-drawer-body specifically so none of it leaks into the
	   desktop sidebar, which keeps its own already-approved look. */
	.ppilot-exam-drawer-body .ppilot-exam-sidebar-tabs { background: none; border: none; gap: 18px; padding: 0 0 12px; border-bottom: 1px solid var(--ppilot-border); }
	.ppilot-exam-drawer-body .ppilot-exam-sidebar-tab {
		background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; padding: 0 0 10px;
		color: var(--ppilot-muted); font-weight: 600; margin-bottom: -1px;
	}
	.ppilot-exam-drawer-body .ppilot-exam-sidebar-tab.is-active {
		background: none; box-shadow: none; color: var(--ppilot-ink); font-weight: 800; border-bottom-color: var(--ppilot-exam-blue);
	}
	.ppilot-exam-drawer-body .ppilot-exam-subject-section.is-open { background: none; border-color: var(--ppilot-exam-blue); box-shadow: 0 0 0 1px var(--ppilot-exam-blue); }
	.ppilot-exam-drawer-body .ppilot-exam-subject-section.is-open .ppilot-exam-subject-row { background: none; }
	.ppilot-exam-drawer-body .ppilot-exam-palette-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
	/* §mobile-navigator-premium (0.83.4): "premium banao" — rounder corners,
	   a soft resting shadow on every button (not just the colored states),
	   a richer two-tone gradient + colored glow on answered/marked/
	   answered-marked instead of a flat fill, a small white checkmark
	   badge on answered states (the number itself is NEVER replaced — it's
	   the thing a student actually navigates by, so a checkmark alone
	   would be a usability regression, not an improvement), and real
	   tactile press feedback (:active scale-down — :hover's scale-UP
	   barely matters on a touchscreen, but every tap on a real phone
	   benefits from visible press feedback). Scoped to .ppilot-exam-drawer
	   -body only — desktop's own already-approved flat palette look
	   (green/red/indigo, 6 columns) is completely untouched. */
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn {
		border-radius: 12px; position: relative; box-shadow: 0 1px 2px rgba(16,24,40,0.05);
		transition: transform 0.12s ease, box-shadow 0.12s ease;
	}
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn:active { transform: scale(0.92); }
	.ppilot-exam-reduced-motion .ppilot-exam-drawer-body .ppilot-exam-palette-btn:active { transform: none; }
	.ppilot-exam-drawer-body .ppilot-exam-q-answered,
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn.ppilot-exam-q-answered {
		background: linear-gradient(145deg, #3b82f6, var(--ppilot-exam-blue)); border-color: transparent;
		box-shadow: 0 3px 10px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
	}
	.ppilot-exam-drawer-body .ppilot-exam-q-marked,
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn.ppilot-exam-q-marked {
		background: linear-gradient(145deg, #fb923c, var(--ppilot-exam-orange)); border-color: transparent;
		box-shadow: 0 3px 10px rgba(234,88,12,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
	}
	.ppilot-exam-drawer-body .ppilot-exam-q-answered-marked,
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn.ppilot-exam-q-answered-marked {
		background: linear-gradient(145deg, #818cf8, var(--ppilot-exam-marked-answered)); border-color: transparent;
		box-shadow: 0 3px 10px rgba(79,70,229,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
	}
	.ppilot-exam-drawer-body .ppilot-exam-q-answered::after,
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn.ppilot-exam-q-answered::after,
	.ppilot-exam-drawer-body .ppilot-exam-q-answered-marked::after,
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn.ppilot-exam-q-answered-marked::after {
		content: '✓'; position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%;
		background: #fff; color: var(--ppilot-exam-blue); font-size: 8px; font-weight: 900; line-height: 1;
		display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(16,24,40,0.3);
	}
	.ppilot-exam-drawer-body .ppilot-exam-q-answered-marked::after,
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn.ppilot-exam-q-answered-marked::after { color: var(--ppilot-exam-marked-answered); }
	.ppilot-exam-drawer-body .ppilot-exam-palette-btn.is-current {
		box-shadow: 0 0 0 3px rgba(124,58,237,0.22), 0 4px 12px rgba(37,99,235,0.38), inset 0 1px 0 rgba(255,255,255,0.3);
	}

	/* --- Stats tab: Subject-wise Progress, flat bar-style list --- */
	.ppilot-exam-mobile-subject-progress { margin-top: 18px; }
	.ppilot-exam-mobile-subject-progress-title { font-size: 13px; font-weight: 800; color: var(--ppilot-ink); margin: 0 0 12px; }
	.ppilot-exam-mobile-subject-progress-list { display: flex; flex-direction: column; gap: 14px; }
	.ppilot-exam-mobile-subject-progress-row { display: flex; align-items: center; gap: 10px; }
	.ppilot-exam-mobile-subject-progress-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
	.ppilot-exam-mobile-subject-progress-meta b { font-size: 12.5px; font-weight: 700; color: var(--ppilot-ink); overflow-wrap: anywhere; }
	.ppilot-exam-mobile-subject-progress-bar { height: 6px; border-radius: 4px; background: var(--ppilot-border); overflow: hidden; }
	.ppilot-exam-mobile-subject-progress-bar i { display: block; height: 100%; background: var(--ppilot-exam-blue); border-radius: 4px; transition: width 0.3s ease; }
	.ppilot-exam-reduced-motion .ppilot-exam-mobile-subject-progress-bar i { transition: none; }
	.ppilot-exam-mobile-subject-progress-frac { font-size: 11.5px; font-weight: 700; color: var(--ppilot-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
	.ppilot-exam-mobile-stats-legend-count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
	.ppilot-exam-mobile-stats-actions { display: flex; gap: 10px; margin-top: 16px; }
	.ppilot-exam-mobile-stats-actions .ppilot-exam-nav-btn { flex: 1 1 0; min-height: 46px; }

	/* --- Mobile "Test Overview" pre-start screen (screen 1) --- */
	/* §mobile-preview-match (0.83.2): screen fully restructured to match the
	   approved preview — a minimal appbar, a real-photo banner strip (the
	   SAME banner image already used on desktop since 0.82.4, reused via
	   the shared --ppilot-exam-banner-url custom property, not a
	   placeholder graphic), and a card that overlaps the banner's bottom
	   edge rather than sitting flush below it. */
	.ppilot-exam-mobile-overview { display: flex; flex-direction: column; padding-bottom: 28px; }
	.ppilot-exam-ov-appbar {
		display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--ppilot-border);
	}
	.ppilot-exam-ov-appbar-mark {
		width: 30px; height: 30px; border-radius: 9px; background: var(--ppilot-exam-gradient); flex: 0 0 auto; position: relative;
	}
	.ppilot-exam-ov-appbar-mark::before { content: '🏛'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
	.ppilot-exam-ov-appbar-id { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; }
	.ppilot-exam-ov-appbar-id b { font-size: 13px; font-weight: 800; color: var(--ppilot-ink); }
	.ppilot-exam-ov-appbar-id span { font-size: 10.5px; color: var(--ppilot-muted); }
	.ppilot-exam-ov-appbar-dot {
		width: 28px; height: 28px; border-radius: 50%; background: var(--ppilot-exam-blue); color: #fff; flex: 0 0 auto;
		display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
	}
	.ppilot-exam-ov-banner {
		height: 118px; background-image: var(--ppilot-exam-banner-url); background-size: cover; background-position: center; position: relative;
	}
	.ppilot-exam-ov-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.15), rgba(15,23,42,0.55)); }
	.ppilot-exam-ov-body { padding: 0 16px; display: flex; flex-direction: column; gap: 14px; }
	.ppilot-exam-ov-card {
		background: #fff; border: 1px solid var(--ppilot-border); border-radius: 16px; padding: 18px; margin-top: -38px; position: relative; z-index: 1;
	}
	.ppilot-exam-ov-badge {
		width: 46px; height: 46px; border-radius: 14px; background: var(--ppilot-exam-gradient); color: #fff;
		display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 2px 8px rgba(124,58,237,0.3); margin-bottom: 10px;
	}
	.ppilot-exam-ov-title { font-size: 17px; font-weight: 800; color: var(--ppilot-ink); overflow-wrap: anywhere; margin: 0 0 6px; }
	.ppilot-exam-ov-card .ppilot-exam-live-pill { margin-bottom: 6px; }
	.ppilot-exam-ov-tagline { font-size: 12.5px; color: var(--ppilot-muted); margin: 0; }
	.ppilot-exam-ov-subjects { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; padding-bottom: 2px; }
	.ppilot-exam-subject-chip.is-light { color: var(--ppilot-ink); background: var(--ppilot-bg); border-color: var(--ppilot-border); }
	.ppilot-exam-subject-chip.is-light.is-more { color: var(--ppilot-muted); background: transparent; }
	.ppilot-exam-ov-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.ppilot-exam-ov-stat-tile {
		display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--ppilot-bg); border: 1px solid var(--ppilot-border);
	}
	.ppilot-exam-ov-stat-icon {
		width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; font-size: 15px; display: flex; align-items: center; justify-content: center;
	}
	.ppilot-exam-ov-stat-icon.is-blue { background: var(--ppilot-exam-blue-bg); }
	.ppilot-exam-ov-stat-icon.is-purple { background: #f1e9fe; }
	.ppilot-exam-ov-stat-icon.is-green { background: #dcfce7; }
	.ppilot-exam-ov-stat-icon.is-red { background: #fee2e2; }
	.ppilot-exam-ov-stat-tile > div { min-width: 0; display: flex; flex-direction: column; }
	.ppilot-exam-ov-stat-tile b { font-size: 15px; font-weight: 800; color: var(--ppilot-ink); overflow-wrap: anywhere; }
	.ppilot-exam-ov-stat-tile span { font-size: 11px; color: var(--ppilot-muted); }
	/* §mobile-exact-match-pass (0.83.1): the reference's "Start Test Now" /
	   "Save & Next" / "Resume Test" buttons are all the SAME flat, solid
	   blue (not the desktop's blue→purple gradient) — sampled directly from
	   the reference image, matches the same flat blue already used
	   elsewhere (the sidebar's active tab, §sidebar-tab-fit-fix 0.82.5).
	   Desktop's gradient primary buttons are untouched (the owner already
	   approved that look); this only overrides color on mobile widths. */
	.ppilot-exam-ov-start-btn {
		display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: none; border-radius: 14px;
		background: var(--ppilot-exam-blue); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
		box-shadow: 0 4px 14px rgba(37,99,235,0.35);
	}
	.ppilot-exam-bottom-nav .ppilot-exam-nav-btn.ppilot-btn-primary,
	.ppilot-exam-mobile-stats-actions .ppilot-btn-primary {
		background: var(--ppilot-exam-blue) !important; box-shadow: 0 4px 12px rgba(37,99,235,0.35) !important;
	}
	.ppilot-exam-bottom-nav .ppilot-exam-nav-btn.ppilot-btn-primary:hover { background: #1d4ed8 !important; }
	.ppilot-exam-ov-start-btn:active { transform: translateY(1px); }
	/* §mobile-preview-match (0.83.2): a disabled, honestly-labelled
	   quick-links row. These four destinations (Instructions / Syllabus /
	   Previous Tests / Report) do not exist anywhere in the plugin's real
	   data or routes yet — confirmed during the 0.83.0 audit — so rather
	   than fake a working link or silently drop a row the approved preview
	   explicitly shows, each item is rendered non-interactive
	   (aria-disabled, no click handler) with an honest "Coming soon"
	   sub-label instead of pretending it goes somewhere. */
	.ppilot-exam-ov-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.ppilot-exam-ov-quick-item {
		display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 4px; border-radius: 12px;
		background: #fff; border: 1px solid var(--ppilot-border); font-size: 11px; font-weight: 600; color: var(--ppilot-ink);
		cursor: not-allowed; opacity: 0.6;
	}
	.ppilot-exam-ov-quick-icon { font-size: 18px; }
	.ppilot-exam-ov-quick-soon { font-size: 9px; font-weight: 500; color: var(--ppilot-muted); }
	.ppilot-exam-ov-instructions { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 16px 18px; }
	.ppilot-exam-ov-instructions-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: #9a3412; margin-bottom: 8px; }
	.ppilot-exam-ov-instructions-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #9a3412; }

	/* §mobile-question-screen-hotfix (0.83.3): the owner flagged the
	   question screen as a real regression — the head row was still the
	   desktop's own bordered white card (background:#fff;border:1px solid
	   var(--ppilot-border);padding:14px 18px, from the shared rule above)
	   PLUS a "Question 1 of 120" block with its own pair of circular
	   chevron buttons (.ppilot-exam-question-number) that the approved
	   preview's #s2 .q-head never shows at all (verified against
	   mobile-preview.html directly — it has only the Mark for Review pill
	   and the fullscreen/overflow icon pair, nothing else; the question
	   count already lives in the qstat box above). Flattened the head row
	   to a plain flex strip (no card chrome) and hid the chevron/number
	   block entirely on mobile — its prev/next navigation is not lost, the
	   exact same goToPosition() calls remain fully reachable via the
	   Previous/Save & Next bar immediately below the question, which is
	   the preview's own primary navigation method anyway. */
	.ppilot-exam-question-head { margin-bottom: 12px; background: none; border: none; padding: 0; }
	.ppilot-exam-question-number { display: none; }
	/* On mobile the review toggle sits at the LEFT of the head row
	   (margin-left:0) and the fullscreen/overflow icon pair is pushed to
	   the far right — matching the preview's left/right split exactly.
	   Desktop keeps its own unrelated layout (review-toggle pushed right
	   via the base ppilot-exam-review-toggle rule, chevron block visible)
	   untouched; every rule in this block only ever applies inside this
	   <=900px media query. */
	.ppilot-exam-review-toggle {
		margin-left: 0; padding: 6px 10px; font-size: 11.5px; border-radius: 9px; gap: 5px;
	}
	/* §mobile-preview-match (0.83.2): the preview's mark-review pill is
	   shown in its RED "marked" styling by default in the mockup (it only
	   ever illustrated that one state) — kept the real, correct two-state
	   behaviour (neutral when not marked, red when marked) rather than
	   copying the mockup literally into "always red", since that would
	   misrepresent real review status to the student. */
	.ppilot-exam-question-head-icons { display: flex; gap: 6px; margin-left: auto; }
	.ppilot-exam-question-head-icons .ppilot-exam-tool-icon-btn {
		width: 30px; height: 30px; border-radius: 9px; font-size: 13px; background: var(--ppilot-bg); border: 1px solid var(--ppilot-border);
	}
	.ppilot-exam-option { padding: 15px 14px; min-height: 52px; }
	.ppilot-exam-option-letter { width: 28px; height: 28px; }
	/* §mobile-preview-match (0.83.2): question card + options reskinned to
	   the preview's exact tones — card on the page's light-grey surface
	   (not white), options white with a plain radio-style indicator
	   instead of the desktop's filled check-badge. */
	.ppilot-exam-question-card { background: var(--ppilot-bg); }
	.ppilot-exam-option.is-selected { background: var(--ppilot-exam-blue-bg); }
	/* §mobile-preview-match (0.83.2): the preview shows a plain radio-style
	   dot on EVERY option (filled only when selected), not the desktop's
	   filled check-badge that only exists in the DOM at all once an option
	   is actually selected. Rather than changing the shared option markup
	   (and risking the desktop look), this draws the radio purely in CSS on
	   a pseudo-element that is always present regardless of selection
	   state, and simply hides the real (conditionally-rendered) check badge
	   on mobile so the two indicators never show at once. */
	.ppilot-exam-option-check { display: none; }
	.ppilot-exam-option { position: relative; padding-right: 42px; }
	.ppilot-exam-option::after {
		content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px;
		border-radius: 50%; border: 2px solid var(--ppilot-border); background: #fff; box-sizing: border-box;
	}
	.ppilot-exam-option.is-selected::after {
		border-color: var(--ppilot-exam-blue); background: radial-gradient(var(--ppilot-exam-blue) 0 40%, transparent 42%);
	}

	.ppilot-exam-bottom-nav {
		position: fixed; left: 0; right: 0; bottom: 54px; background: #fff; border-top: 1px solid var(--ppilot-border);
		padding: 10px 12px; margin-top: 0; z-index: 30; gap: 8px;
	}
	.ppilot-exam-nav-btn { flex: 1 1 0; min-height: 46px; }

	/* §mobile-preview-match (0.83.2): replaces the old 4-icon dark tab bar
	   with the approved preview's single "Question Navigator" trigger row
	   (white background, text + chevron, matching the preview's .navtrig
	   exactly) — plus one small, real, non-preview addition: a compact
	   Submit icon button at the row's right edge (see renderMobileNavTrigger()
	   in exam-player.js for why Submit specifically couldn't just be
	   dropped to match the mockup's plain single row). */
	.ppilot-exam-mobile-navtrig {
		display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; height: 50px; background: #fff;
		border-top: 1px solid var(--ppilot-border); z-index: 30; gap: 8px; padding: 0 12px;
	}
	.ppilot-exam-mobile-navtrig-btn {
		flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: none;
		font-size: 13px; font-weight: 600; color: var(--ppilot-ink); cursor: pointer;
	}
	.ppilot-exam-mobile-navtrig-chevron { color: var(--ppilot-muted); transition: transform 0.15s ease; }
	.ppilot-exam-mobile-navtrig-chevron.is-open { transform: rotate(180deg); }
	.ppilot-exam-mobile-navtrig-submit {
		flex: 0 0 auto; width: 34px; align-self: center; height: 34px; border-radius: 50%; border: none;
		background: var(--ppilot-exam-blue); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer;
	}

	.ppilot-exam-tools-panel, .ppilot-exam-report-panel {
		left: 12px; right: 12px; top: auto; bottom: 66px; width: auto; max-width: none; max-height: 70vh;
	}
}

@media (max-width: 480px) {
	.ppilot-exam-palette-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
}

.ppilot-exam-distraction-free { padding-top: 8px; }

/* ===================== Dark mode ===================== */
.ppilot-exam-app[data-theme="dark"] { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-topbar,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-sidebar,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-question-head,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-question-card,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-side-card,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-stats-rail,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-panel,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-report-panel,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-status-row { background: #151a2e; border-color: #2a3150; color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-body { background: #0f1324; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-stat-chip,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-palette-btn:not(.ppilot-exam-q-answered):not(.ppilot-exam-q-marked):not(.ppilot-exam-q-answered-marked):not(.is-current),
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-option,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-sidebar-tabs,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-row-count,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-overview-tile,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-topbar .ppilot-exam-tool-pill,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-topbar .ppilot-exam-tool-icon-btn,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-jump-btn { background: #1c2340; border-color: #2a3150; color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-topbar .ppilot-exam-tool-pill:hover,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-topbar .ppilot-exam-tool-icon-btn:hover { background: #262e52; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-brand-name,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-student-name { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-brand-tag,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-student-area { color: #94a3b8; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-question-text,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-question-number,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-side-card-title,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-option-text,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-stat-chip-value,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-head,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-row-label,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-toggle-row,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-row-name { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-progress-track,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-q-unanswered { background: #1c2340; }
/* §sidebar-progress-visibility-fix (0.82.5): same collision as light mode
   (see the light-mode rule above) — dark sidebar card is #151a2e, dark
   open-section background is #1c2340, same as the track's own dark
   background above, so the sidebar-nested bar was equally invisible in
   dark mode. Distinct, lighter background fixes it here too. */
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-row-progress .ppilot-exam-progress-track { background: #2a3150; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-option.is-selected { background: #202752; border-color: #6d7bd6; box-shadow: 0 0 0 1px #6d7bd6; }

.ppilot-exam-app[data-theme="dark"] .ppilot-exam-bottom-nav,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-summary-row,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-chevron-btn,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-option-letter,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-fontsize button { background: #1c2340; border-color: #2a3150; color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-ring-name,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-ring-pct,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-timer-value,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-legend-count,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-summary-value,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-overview-value,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-progress-name { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-timer-caption,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-ring-frac,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-progress-frac,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-legend,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-overview-label,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-side-card-link,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-navigator-title,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-option-text-hi,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-row-range { color: #94a3b8; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-summary-label,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-review-toggle { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-chevron-btn:hover,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-jump-btn:hover,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-row:hover,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-fontsize button:hover { background: #262e52; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-row.is-active { background: #20294d; border-color: #6d7bd6; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-summary-grid,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-bottom-nav,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-row,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-tools-head,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-legend { border-color: #2a3150; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-submitting-overlay { background: rgba(15,19,36,0.82); }
/* Dark mode: same black vignette, just a touch denser so text contrast
   stays strong against the night-vision palette too — no blue/purple tint
   here either, per §banner-black-shade-fix (0.82.5) above. */
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-hero::before {
	background: linear-gradient(135deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.50) 45%, rgba(0,0,0,0.66) 100%);
}
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-timer-ring-track,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-ring-track { stroke: #2a3150; }
.ppilot-exam-app[data-theme="dark"] kbd { background: #1c2340; border-color: #2a3150; color: #e2e8f0; }
/* §accordion-fix (0.76.1) dark-mode gaps: both of these were added after
   the dark-mode block was written and used tokens that are NOT redefined
   for dark (--ppilot-bg is a fixed light grey everywhere, and the
   unanswered overview icon had a literal #fff) — so they stayed bright
   even with Night Vision on. */
/* §sidebar-cards-fix (0.82.7) dark-mode pairing: the light-mode card/panel
   split above needs the same treatment here — subject cards (#1c2340, a
   step lighter than the dark sidebar panel #151a2e) sit on the darker
   sidebar panel, open card gets the accent-blue ring like light mode. */
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-section { background: #1c2340; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-section.is-open { background: #1c2340; border-color: #6d7bd6; box-shadow: 0 2px 8px rgba(109,123,214,0.25), 0 0 0 1px #6d7bd6; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-overview-tile.is-unanswered .ppilot-exam-overview-icon { background: #1c2340; border-color: #2a3150; color: #94a3b8; }

/* §mobile-premium-redesign (0.83.0) dark-mode pairing: the mobile
   pre-start overview card, its stat tiles, and the Navigator/Stats/Legend
   drawer chrome all need the same light->dark swap every other card on
   this page already gets — otherwise Night Vision would correctly dim
   everything else on the page but leave these new mobile-only elements
   stuck bright-white, which is exactly the kind of gap called out in the
   build instructions to check for. */
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-card,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-drawer-head,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-sidebar { background: #151a2e; border-color: #2a3150; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-stat-tile,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-drawer-tab { background: #1c2340; border-color: #2a3150; color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-title,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-stat-tile b,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-drawer-head-title,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-donut-value,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-stats-legend-row { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-tagline,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-stat-tile span,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-donut-label { color: #94a3b8; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-subject-chip.is-light { background: #1c2340; border-color: #2a3150; color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-drawer-close { background: #1c2340; border-color: #2a3150; color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-instructions { background: #2a1d0f; border-color: #6b3d13; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-instructions-title,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-instructions-list { color: #fdba74; }
/* §mobile-preview-match (0.83.2) dark-mode pairing: the restructured
   overview screen's new appbar, banner vignette, stat-icon chips and
   quick-links row all need the same light->dark swap. The banner photo
   itself is untouched (it is a real photo either way, not a flat
   background color), but its top vignette is darkened further so the
   appbar immediately above it still reads as part of one dark surface. */
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-appbar { background: #151a2e; border-color: #2a3150; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-appbar-id b { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-appbar-id span { color: #94a3b8; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-banner::before { background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.7)); }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-stat-icon.is-blue { background: rgba(37,99,235,0.2); }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-stat-icon.is-purple { background: rgba(124,58,237,0.2); }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-stat-icon.is-green { background: rgba(22,163,74,0.2); }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-stat-icon.is-red { background: rgba(220,38,38,0.2); }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-quick-item { background: #1c2340; border-color: #2a3150; color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-ov-quick-soon { color: #94a3b8; }
/* §mobile-preview-match (0.83.2) dark-mode pairing: the Navigator legend
   strip, the drawer-scoped underline tabs/number-grid overrides, and the
   new flat-bar Subject-wise Progress list in the Stats tab. */
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-nav-legend-item { color: #94a3b8; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-nav-legend-dot.is-unvisited { background: #1c2340; border-color: #2a3150; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-stats-dot.is-unvisited { background: #1c2340; border-color: #2a3150; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-drawer-body .ppilot-exam-sidebar-tabs { border-bottom-color: #2a3150; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-drawer-body .ppilot-exam-sidebar-tab { color: #94a3b8; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-drawer-body .ppilot-exam-sidebar-tab.is-active { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-subject-progress-title,
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-subject-progress-meta b { color: #e2e8f0; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-subject-progress-frac { color: #94a3b8; }
.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-subject-progress-bar { background: #2a3150; }
/* §mobile-empty-render-hotfix (0.83.1): the new mobile full-viewport-height
   shell background (0.83.1, above) needs the same dark swap as every other
   surface on this page — otherwise Night Vision would leave a bright white
   canvas behind a dark-themed exam. */
@media (max-width: 900px) {
	.ppilot-exam-app[data-theme="dark"] .ppilot-exam-shell { background: #0f1324; }
}

/* === Calculator popup (0.75.0) ===
   §night-vision-and-calculator: a small, self-contained fixed popup — not
   nested under .ppilot-exam-app so it keeps working regardless of the
   dark/light toggle state, with its own always-dark-on-light-chrome look
   matching the existing navy brand. */
.ppilot-calc-panel {
	position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 240px;
	background: #fff; border: 1px solid #d0d5dd; border-radius: 14px; box-shadow: 0 12px 32px rgba(16,24,40,0.22);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow: hidden;
}
.ppilot-calc-head {
	display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
	background: #1e1b4b; color: #fff; font-weight: 700; font-size: 13px;
}
.ppilot-calc-title { display: flex; align-items: center; gap: 6px; }
.ppilot-calc-close {
	background: rgba(255,255,255,0.12); border: none; color: #fff; width: 22px; height: 22px; border-radius: 50%;
	cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.ppilot-calc-close:hover { background: rgba(255,255,255,0.22); }
.ppilot-calc-expression {
	padding: 8px 14px 0; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
	color: #94a3b8; background: #f8fafc; overflow-x: auto; white-space: nowrap; min-height: 16px;
}
.ppilot-calc-screen {
	padding: 4px 14px 14px; text-align: right; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
	color: #111827; background: #f8fafc; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid #e5e7eb;
}
.ppilot-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e5e7eb; padding: 1px; }
.ppilot-calc-btn {
	border: none; background: #fff; padding: 14px 0; font-size: 16px; font-weight: 600; color: #1f2937; cursor: pointer;
}
.ppilot-calc-btn:hover { background: #f1f5f9; }
.ppilot-calc-btn:active { background: #e2e8f0; }
.ppilot-calc-btn-op { background: #eef0fb; color: #312e81; }
.ppilot-calc-btn-op:hover { background: #dfe3f7; }
.ppilot-calc-btn-fn { color: #b91c1c; }
.ppilot-calc-btn-eq { background: #1e1b4b; color: #fff; grid-row: span 1; }
.ppilot-calc-btn-eq:hover { background: #312e81; }
.ppilot-calc-btn-wide { grid-column: span 2; }
.ppilot-calc-btn-spacer { background: #fff; cursor: default; visibility: hidden; }
@media (max-width: 480px) {
	.ppilot-calc-panel { right: 12px; bottom: 12px; left: 12px; width: auto; }
}

/* =====================================================================
   §mobile-fullscreen-takeover (0.83.3)
   -----------------------------------------------------------------
   ROOT-CAUSE: [practicepilot_mock_test] renders #ppilot-exam-root as one
   ordinary element inside the WordPress page's own content area, under
   that page's own title/header and above its own footer widgets — true
   on every version of this plugin, every breakpoint, always. On desktop
   this was never a problem because the cockpit's own content height
   plus its sidebar/stats columns roughly matches a typical viewport, so
   a student rarely had reason to scroll far enough to notice. On mobile,
   stacking everything into one narrow column made the page taller, and
   the Previous/Save & Next bar + Question Navigator trigger are both
   `position: fixed` (anchored to the VIEWPORT, not to the exam card) —
   so once the page was tall enough to scroll past the exam card, the
   fixed bars stayed glued to the screen bottom while the WordPress
   theme's own footer content (stats band, newsletter box) scrolled into
   view behind/around them. 0.83.1 patched this with a min-height floor
   on .ppilot-exam-shell, which only worked for screens short enough that
   the floor was taller than the content — a real question with long
   bilingual text pushed past that floor again, so the exact same bug
   class resurfaced on the question screen specifically, and the owner
   was right to call this out as a structural problem, not a one-off
   fluke to patch a second time.
   THE FIX: rather than guess at another height number, the exam now
   takes over the full viewport as a self-contained, fixed overlay for
   the entire lifetime of an active attempt — exactly how the owner's own
   approved preview behaves (a standalone phone-frame component, never a
   card embedded in a normal scrolling page). JS (syncMobileFullscreenState(),
   called on every render()) adds `ppilot-mobile-fullscreen` to <html>/
   <body> only when isMobileViewport() is true AND the phase is
   in_progress or presubmit_summary, and removes it the instant either
   condition stops holding — on submit, on a load/error state, or back on
   a desktop-width viewport. Every rule below is scoped under this class
   AND the same <=900px breakpoint every other mobile-only rule in this
   file already uses, so desktop/tablet are completely unaffected even if
   the class were ever left on by mistake. z-index:2000 is chosen to sit
   comfortably above ordinary theme chrome (headers/footers/sticky navs
   virtually never go that high) while staying BELOW the calculator
   popup's own z-index:9999 (.ppilot-calc-panel, appended directly to
   document.body, outside #ppilot-exam-root) — the calculator must still
   float above the now-fullscreen exam, not get buried under it.
   ===================================================================== */
@media (max-width: 900px) {
	html.ppilot-mobile-fullscreen,
	body.ppilot-mobile-fullscreen {
		overflow: hidden !important;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	body.ppilot-mobile-fullscreen #ppilot-exam-root.ppilot-exam-app {
		position: fixed;
		inset: 0;
		z-index: 2000;
		background: #fff;
		max-width: none;
	}
	/* The in-progress question screen's own shell: pin the (already sibling
	   -level) top chrome — mobile app bar + qstat row — as non-scrolling
	   flex items, and make ONLY the question content area scroll inside
	   its own contained region. The bottom Previous/Save&Next bar and the
	   Navigator trigger stay `position: fixed` exactly as before (DOM
	   nesting doesn't matter for a fixed element's own on-screen position)
	   — that is now completely safe, because body/html above can no
	   longer scroll AT ALL while this class is active, so there is
	   structurally nothing left for the page to scroll past underneath
	   them any more. */
	body.ppilot-mobile-fullscreen #ppilot-exam-root .ppilot-exam-shell {
		height: 100%;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	body.ppilot-mobile-fullscreen #ppilot-exam-root .ppilot-exam-shell > .ppilot-exam-mobile-topbar,
	body.ppilot-mobile-fullscreen #ppilot-exam-root .ppilot-exam-shell > .ppilot-exam-mobile-status-row {
		flex: none;
	}
	body.ppilot-mobile-fullscreen #ppilot-exam-root .ppilot-exam-shell > .ppilot-exam-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* The pre-start overview screen is a flatter tree (appbar/banner/body
	   are its only direct children, no separate chrome-vs-content split
	   like the in-progress screen has) — simplest correct fix is to let
	   the whole screen scroll as one region rather than inventing an
	   artificial split it was never built with. */
	body.ppilot-mobile-fullscreen #ppilot-exam-root .ppilot-exam-mobile-overview {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* The presubmit "Test Summary" review screen renders directly under
	   #ppilot-exam-root with no .ppilot-exam-shell wrapper at all — same
	   embedded-in-page risk otherwise, so it gets the same full-height,
	   self-scrolling treatment. */
	body.ppilot-mobile-fullscreen #ppilot-exam-root .ppilot-exam-summary-screen {
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 20px 16px;
		box-sizing: border-box;
	}
}
/* §mobile-question-screen-hotfix (0.83.3): the dark-mode .ppilot-exam-
   question-head rule (far above, `.ppilot-exam-app[data-theme="dark"]
   .ppilot-exam-question-head`) carries a higher selector specificity
   (an attribute selector + a class) than this file's own mobile-only
   `.ppilot-exam-question-head { background:none; border:none; padding:0;
   }` reset, so without this, Night Vision mode would have silently
   reintroduced the exact boxed/card look on the question head that this
   version otherwise removes — caught by checking cascade specificity,
   not by guessing. Placed at the very end of the file so normal CSS
   source-order rules keep it the LAST, and therefore winning, declaration
   for this exact selector+media combination. */
@media (max-width: 900px) {
	.ppilot-exam-app[data-theme="dark"] .ppilot-exam-question-head { background: none; border: none; padding: 0; }
	.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-topbar { background: #151a2e; border-bottom-color: #2a3150; }
	.ppilot-exam-app[data-theme="dark"] .ppilot-exam-mobile-topbar-id b { color: #e2e8f0; }
}