/* PracticePilot — Premium Student Command Center (Phase 19).
   Namespaced under #ppilot-command-center-root / .ppilot-cc-* throughout —
   no bare element selectors, so this never leaks into or is affected by
   theme/Elementor/Tutor LMS styles elsewhere on the site (§25 of the spec:
   only this dashboard's own markup changes).
   Reuses the SAME --ppilot-* design tokens admin/ppilot-shared.css already
   defines on .ppilot-app (navy/gold/ink/muted/border/bg/success/warning/
   danger) — no new, unrelated color system introduced. */

/* §premium-student-dashboard-visual-correction (Phase 24.1): collapses the
   theme's OWN generic page-title markup (the "giant PracticePilot Student
   Dashboard H1" the product owner flagged — not anything this plugin
   prints) on this one page only, via the `ppilot-dashboard-page` body
   class Plugin::maybe_add_dashboard_body_class() adds. Scoped to the
   handful of selectors real WordPress themes/block themes/common page
   builders use for the automatic page title, never a bare `h1`, so it
   cannot hide a heading that is part of the page's own real content. */
body.ppilot-dashboard-page .entry-header,
body.ppilot-dashboard-page .entry-title,
body.ppilot-dashboard-page h1.entry-title,
body.ppilot-dashboard-page .page-title,
body.ppilot-dashboard-page .wp-block-post-title,
body.ppilot-dashboard-page .elementor-widget-theme-page-title {
	display: none !important;
}

#ppilot-command-center-root {
	/* v0.49.1 "final premium visual implementation" — the shared
	   admin/ppilot-shared.css token --ppilot-navy (#1e1b4b, Tailwind's
	   indigo-950) reads as a muddy dark PURPLE, not the deep navy/royal-
	   blue the approved reference mockup uses — every .ppilot-cc-* rule
	   below already reads color via var(--ppilot-navy, ...), so
	   overriding the custom property here (scoped to THIS component's
	   own root only) retints the whole command center to a true navy
	   without touching admin/ppilot-shared.css's global token, which
	   ~20 unreviewed wp-admin screens still depend on — smallest
	   possible presentation-only fix, no shared file touched. */
	--ppilot-navy: #0b1f45;
	--ppilot-navy-light: #1d3f7a;
	--cc-radius: 16px;
	margin: 0 0 28px 0;
	/* §premium-student-dashboard-redesign (Phase 24), §18 of the spec:
	   desktop max-width target ~1280-1400px, centered — uses the full
	   available width up to that cap rather than a narrow column with
	   empty space on the right, and never overflows horizontally on a
	   wide viewport. */
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

#ppilot-command-center-root * {
	box-sizing: border-box;
}

.ppilot-cc-loading {
	padding: 40px 20px;
	text-align: center;
	color: var(--ppilot-muted, #6b7280);
	font-size: 15px;
}

/* ---------------- JOURNEY BANNER (Phase 21) ----------------
   Text-labeled (never color-only) state + reason strip, directly under
   the Hero. Same radius/spacing tokens as every other card; border-left
   accent is decorative only, the state name is always spelled out. */
.ppilot-cc-journey-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	background: var(--ppilot-bg, #f8fafc);
	border: 1px solid var(--ppilot-border, #e2e8f0);
	border-left: 4px solid var(--ppilot-gold, #d4a017);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
}

.ppilot-cc-journey-label {
	font-weight: 700;
	color: var(--ppilot-navy, #1e1b4b);
	white-space: nowrap;
}

.ppilot-cc-journey-reason {
	color: var(--ppilot-muted, #6b7280);
}

/* ---------------- HERO ----------------
   §premium-student-dashboard-visual-correction (Phase 24.1), problems #1/
   #2/#7: height tightened to the spec's ~220-260px desktop target (down
   from Phase 24's 300-380px, which the product owner reviewed as an
   "oversized empty hero" on the live site) and ~180-220px on mobile (see
   the 480px breakpoint below). The overlay gradient opacity is raised
   (0.92/0.86 -> 0.95/0.90) and a text-shadow is added so hero text stays
   legible at AA-grade contrast against ANY configured photo, not just a
   dark one — not only "looks fine" but holds up against a bright
   worst-case image. --cc-hero-img-desktop/--cc-hero-img-mobile are set
   inline by command-center.js ONLY when an admin-configured image
   resolved (never required) — this gradient is both the permanent dark
   overlay and the complete, professional-looking fallback on its own when
   neither custom property is set. Hero content is now a LEFT (identity/
   status) / RIGHT (compact exam-selector, no-exam state only) flex split
   per §2/§3 of the spec, rather than a single centered column. */
.ppilot-cc-hero {
	/* Phase 25 fix: the overlay gradient's own rightmost stop is only
	   rgba(30,27,75,0.38) — intentionally light so a configured photo
	   stays visible there (Phase 24.2, Issue 3). With NO image
	   configured that same translucent stop used to let whatever
	   background-color the surrounding theme/page applied underneath
	   this div show through (the hero has no stacking context of its
	   own without a solid base layer), washing out the right side of
	   the hero and reducing the greeting's effective contrast on sites
	   with a light theme background. This solid, fully opaque base
	   color (the SAME --ppilot-navy token every other dark surface in
	   this file already uses) sits BEHIND the gradient+image layers via
	   `background-color`, which CSS always paints before
	   `background-image` — so a configured image and its gradient
	   overlay render completely unchanged, and the fallback (no image)
	   case now always has a guaranteed-opaque dark base under the
	   gradient, independent of any theme/page background color. This
	   is the gap the task brief flagged: prior overlay fixes (24.1/24.2)
	   only ever touched the gradient drawn OVER an image; this is the
	   first fix for the plain-gradient-only (no image) case specifically. */
	background-color: var(--ppilot-navy, #1e1b4b);
	--cc-hero-img-desktop: none;
	/* --cc-hero-img-mobile is intentionally left WITHOUT a default here:
	   when JS sets a dedicated mobile image this wins at <=480px (below);
	   when it does NOT, var(--cc-hero-img-mobile, var(--cc-hero-img-desktop))
	   needs the property to be genuinely unset (not defaulted to `none`)
	   for its fallback argument to actually apply (§5 of the spec: Mobile
	   Dashboard Hero -> Desktop Dashboard Hero -> Default). */
	/* §premium-student-dashboard-visual-polish (Phase 24.2), Issue 3:
	   previously a near-opaque 0.90-0.95 flat tint, which effectively hid
	   a configured hero image behind solid navy instead of showing it
	   "with a professional dark gradient overlay" (the overlay had become
	   the image). This is a LEFT -> RIGHT gradient — darkest over the text
	   column on the left (where the greeting/CTA need maximum contrast),
	   fading to a lighter, still-tinted wash on the right (where the
	   admin-configured image's visual subject is recommended to sit, per
	   the Images screen's own tip above). The image itself stays visibly
	   present throughout; text legibility comes from this overlay PLUS
	   text-shadow on the content below, never from reducing text opacity. */
	/* v0.49.2 hotfix (live-screenshot feedback): the configured hero
	   photo was reported as "too dark/dim" overall. The gradient is a
	   LEFT -> RIGHT tint, darkest over the text column on the left
	   (where the greeting/sub/CTA need maximum contrast) and lightest
	   over the right (where the configured image's visual subject sits,
	   per the Images screen's own tip). To brighten the photo without
	   touching text legibility, only the MID/RIGHT stops are eased
	   (0.62->0.48, 0.38->0.22 — a ~20-40% relative reduction where the
	   photo is actually visible); the left (0%) stop, which sits directly
	   under the heading/sub text, is only nudged (0.88->0.82) so the
	   text-contrast zone stays effectively as dark as before. Re-verified
	   (see Phase 24.2/24.1 contrast notes above, still true here): with a
	   worst-case bright photo, alpha-compositing rgba(7,15,34,0.82) over
	   it still yields an effective luminance dark enough for white
	   large-bold heading text to clear AA (>=3:1 large-text) comfortably,
	   same as before this change — text legibility still comes from this
	   overlay PLUS text-shadow, never from reducing text opacity. */
	/* v0.49.3 (superseding the v0.49.2 0.82/0.48/0.22 stops above): the
	   new permanent hostile-theme browser fixture computes WCAG contrast
	   for EVERY hero text element against the lightest plausible photo
	   pixel composited under this overlay at that text's own x-position.
	   The v0.49.2 mid stop (0.48 at 55%) let near-white photo regions
	   drop white 12-14px text under 4.5:1 wherever the text column
	   reaches past ~40% of the hero (768-1024px widths, ready state).
	   The text zone (0-72%) now stays >=0.6; the right quarter — where the
	   photo's subject and the solid exam card sit — still fades to 0.28,
	   so the photo remains clearly visible there. */
	background-image: linear-gradient(90deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.72) 45%, rgba(11, 31, 69, 0.6) 72%, rgba(11, 31, 69, 0.28) 100%), var(--cc-hero-img-desktop);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	border-radius: var(--cc-radius);
	padding: 22px 24px;
	margin-bottom: 0;
	/* v0.49.1: raised from the Phase 24.1 220-260px budget to 250-300px —
	   the hero now always carries the eyebrow label + 4-item feature row
	   (see .ppilot-cc-hero-eyebrow/-features above), and the previous
	   budget left too little vertical slack for the floating readiness
	   summary's -32px overlap below to NOT clip that new real content
	   (confirmed via a real Playwright desktop screenshot, not assumed).
	   Still a compact banner, not a return to Phase 24's 300-380px. */
	min-height: 250px;
	max-height: 300px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ppilot-cc-hero-main {
	flex: 1 1 260px;
	min-width: 0;
}

.ppilot-cc-hero-greeting {
	/* §premium-student-dashboard-visual-refinement (Phase 24.2), item #1:
	   responsive sizing via clamp() rather than one fixed desktop size —
	   scales smoothly between the 480px mobile override below (19px) and
	   a slightly larger desktop ceiling, strong weight, white/near-white
	   color (inherited from .ppilot-cc-hero's `color: #fff`), kept legible
	   against any configured image purely via the dark gradient overlay
	   on the hero background (never a flat opacity reduction on this
	   content layer, which stays at its native 100% opacity). */
	font-size: clamp(19px, 2.6vw, 24px);
	line-height: 1.3;
	margin: 0 0 4px 0;
	font-weight: 700;
	color: #fff;
	opacity: 1;
	overflow-wrap: anywhere;
	word-break: break-word;
	/* Phase 24.2, Issue 4: a lighter overlay (Issue 3) means text leans
	   harder on this shadow for contrast against a bright image, so this
	   is now a two-layer shadow (tight + soft) rather than a single pass —
	   still never achieved via reducing text opacity, which stays 1. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ppilot-cc-hero-sub {
	font-size: 14px;
	margin: 0 0 12px 0;
	color: rgba(255, 255, 255, 0.92);
	opacity: 1;
	overflow-wrap: anywhere;
	word-break: break-word;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ppilot-cc-hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* v0.49.1 "final premium visual implementation" — small eyebrow label
   above the greeting, gold underline accent, per the approved reference
   mockup. Purely decorative static copy (no student data), kept compact
   so the hero stays within the Phase 24.1 220-260px height budget. */
.ppilot-cc-hero-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 8px 0;
	padding-bottom: 6px;
	position: relative;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ppilot-cc-hero-eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 2px;
	background: var(--ppilot-gold, #d97706);
}

/* The student's own display name within the greeting, in the gold accent
   color per the reference — reuses the SAME value already printed in
   the plain greeting text, just wrapped for color; no new/different
   data. */
.ppilot-cc-hero-name {
	/* v0.49.3: amber-400 instead of #d97706 — the darker gold measured
	   only ~2:1 against the overlay composited over a bright photo. */
	color: #fbbf24;
}

/* v0.49.2 hotfix (live-screenshot feedback, hpgovtjob.com): the
   "Good Morning,"/"Good Afternoon,"/"Good Evening," prefix (and the
   trailing wave emoji) previously had NO class of its own and relied on
   inheriting .ppilot-cc-hero-greeting's `color: #fff` from the parent
   <h1>. Root cause: an inherited color is the weakest thing in the CSS
   cascade — it loses to ANY rule that explicitly matches the element
   (e.g. a host theme's generic `span`/`p` text-color rule), regardless
   of that rule's specificity, because inherited-vs-explicit is resolved
   before specificity is ever compared. That is exactly what produced the
   faded/translucent-looking "Good Morning," next to the clearly-legible
   gold name — .ppilot-cc-hero-name was never affected because it already
   sets its OWN explicit `color`. Pinning the same strong white/near-
   white treatment explicitly on the prefix (same text-shadow as the rest
   of the hero heading, same `!important` guard already established for
   the Phase 24.2 CTA-hover fade fix against this identical bug shape)
   closes the gap without changing the name's gold color or introducing
   any new color. */
.ppilot-cc-hero-greeting-prefix {
	color: #fff !important;
	opacity: 1 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Four short static feature indicators (Plan/Track/Practice/Achieve) —
   generic marketing copy, not student data, matching the reference's
   hero feature row. Wraps on narrow widths rather than ever overflowing. */
.ppilot-cc-hero-features {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 10px;
}

.ppilot-cc-hero-feature {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ppilot-cc-hero-feature-icon {
	font-size: 15px;
	line-height: 1;
}

.ppilot-cc-hero-feature-label {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ppilot-cc-hero-feature-sub {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.2;
}

/* ---------------- HERO: COMPACT EXAM SELECTOR (no-exam state) ----------------
   §premium-student-dashboard-visual-correction (Phase 24.1), problems #3:
   the ONLY exam-selection surface rendered when no exam is chosen yet —
   integrated directly into the hero's right side, replacing the former
   duplicate pairing of a "Choose Your Exam" journey-banner strip ABOVE a
   second, full-width "Choose Your Exam" card BELOW the hero. */
/* v0.49.3 (live-screenshot report: "Choose Your Exam" card nearly
   invisible). ROOT CAUSE, two compounding faults:
   (1) the card surface was rgba(255,255,255,0.10) — effectively glass, so
       the hero photo (incl. the student's head) showed straight through
       behind the text;
   (2) .ppilot-cc-hero-select-label set NO color of its own (it only
       inherited #fff from .ppilot-cc-hero) and .ppilot-cc-hero-select-sub's
       color was a single-class rule — the host theme's generic
       `span`/`.entry-content p` colour rules (explicit beats inherited;
       0,1,1 beats 0,1,0) repainted both to translucent dark slate.
   Fix: a solid, near-opaque deep-navy surface (>=0.86 alpha even where
   backdrop-filter is supported, 0.9 where it is not) so no photo detail
   can sit behind the text, plus explicit ID-scoped colours in the
   theme-isolation layer at the end of this file. */
.ppilot-cc-hero-select {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	background: rgba(8, 20, 46, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	padding: 18px 20px;
	width: 280px;
	max-width: 100%;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.ppilot-cc-hero-select {
		background: rgba(8, 20, 46, 0.86);
		-webkit-backdrop-filter: blur(12px) saturate(140%);
		backdrop-filter: blur(12px) saturate(140%);
	}
}

.ppilot-cc-hero-select-label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.ppilot-cc-hero-select-sub {
	font-size: 13px;
	line-height: 1.45;
	color: #cbd5e1;
	margin: 0;
}

.ppilot-cc-chip {
	/* v0.49.3: was a LIGHTENING rgba(255,255,255,0.12) wash, which pulled
	   the white chip text under 4.5:1 over a bright photo on mobile; a
	   darkening navy wash keeps the same pill look at >=4.5:1. */
	background: rgba(2, 6, 23, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 6px 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	white-space: nowrap;
}

.ppilot-cc-chip-label {
	/* v0.49.3: was `opacity: 0.75` — never fade text via opacity. */
	color: rgba(255, 255, 255, 0.88);
}

.ppilot-cc-chip-value {
	font-weight: 700;
}

/* ---------------- FLOATING READINESS SUMMARY (§7 of the Phase 24 spec) ----------------
   Visually overlaps the hero's bottom edge via a negative top margin,
   exactly like the reference mockup's floating stats card — a white card
   on top of the dark hero, never color-only (every tile has a text
   label). Collapses to a horizontally scrollable strip on narrow screens
   (§19: "horizontal/scrollable quick stats if appropriate") rather than
   wrapping into a tall stack that would blow out the compact mobile hero. */
.ppilot-cc-readiness-float {
	background: #fff;
	border-radius: var(--cc-radius);
	box-shadow: 0 10px 30px rgba(11, 31, 69, 0.14);
	/* v0.49.1: reduced the overlap pull from -32px to -20px (paired with
	   the hero height increase above) so this card overlaps only the
	   hero's own bottom empty margin, never the feature row text now
	   printed near the hero's bottom edge. */
	margin: -20px 16px 20px 16px;
	padding: 14px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 8px;
	position: relative;
	z-index: 1;
}

.ppilot-cc-float-tile {
	text-align: center;
	padding: 6px 4px;
}

.ppilot-cc-float-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--ppilot-navy, #1e1b4b);
	line-height: 1.2;
}

.ppilot-cc-float-label {
	font-size: 11px;
	color: var(--ppilot-muted, #6b7280);
	margin-top: 2px;
}

/* ---------------- GRID ----------------
   §premium-student-dashboard-visual-correction (Phase 24.1): fixed at a
   clean 2-column grid at every width (never Phase 24's 3-column switch at
   1024px, which broke the spec's own explicit Row 1-4 PAIRING — "Mission |
   Continue", "Mocks | Weak Areas", "Roadmap | Mistakes", "Performance |
   Achievements" only reads as paired rows when each row is exactly 2
   cards wide). Gap widens slightly on larger screens for breathing room
   instead of adding a third column. */
.ppilot-cc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.ppilot-cc-card-hero {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	.ppilot-cc-grid {
		gap: 20px;
	}
}

/* ---------------- CARD ----------------
   §premium-student-dashboard-visual-correction (Phase 24.1): a subtle
   shadow replaces the previously flat, border-only card so the grid reads
   as a premium SaaS surface rather than "plugin boxes on a WordPress
   page" (problem #9); border is kept, but lighter, as a hairline only. */
.ppilot-cc-card {
	background: #fff;
	border: 1px solid var(--ppilot-border, #e5e7eb);
	border-radius: var(--cc-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* ---------------- NO-EXAM UNLOCKS PREVIEW (Phase 25) ----------------
   Honest, static description of what personalizes after exam selection
   — rendered below the hero in the no-exam state so the page never
   jumps straight from the hero into the theme's own footer/stats
   templates. Deliberately plain (no CTA of its own, no student data) so
   it reads as informational, not as a second exam-selection surface. */
/* v0.49.1: two-column desktop layout — the "Unlocked After You Choose an
   Exam" card (wider) next to a separate "Take the first step" card
   (narrower), matching the approved reference mockup. Collapses to a
   single stacked column well before mobile width. */
.ppilot-cc-noexam-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.ppilot-cc-unlocks-sub {
	font-size: 13px;
	color: var(--ppilot-muted, #6b7280);
	margin: -2px 0 4px 0;
	line-height: 1.5;
}

/* 2-column x 3-row tile grid replacing the former plain bullet list —
   each tile is an icon + bold title + short description, copied verbatim
   from the same static section-name copy the old list already used (no
   new feature claims). */
.ppilot-cc-unlocks-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.ppilot-cc-unlocks-tile {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--ppilot-bg, #f9fafb);
	border: 1px solid var(--ppilot-border, #e5e7eb);
	border-radius: 10px;
	padding: 12px;
}

.ppilot-cc-unlocks-tile-icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ppilot-gold-light, #fef3e2);
	font-size: 16px;
	line-height: 1;
}

.ppilot-cc-unlocks-tile-title {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ppilot-ink, #1f2430);
	line-height: 1.3;
}

.ppilot-cc-unlocks-tile-desc {
	font-size: 12px;
	color: var(--ppilot-muted, #6b7280);
	margin-top: 2px;
	line-height: 1.4;
}

/* "Take the first step" — a distinct light navy/royal-blue tinted card
   (never the violet/purple the color-system target explicitly flags)
   with its own Browse Tests CTA, reusing the same NAV.testsUrl every
   other Browse Tests button on this page already uses — not a second,
   different destination. */
.ppilot-cc-first-step-card {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	border: 1px solid #bfdbfe;
}

.ppilot-cc-first-step-card .ppilot-cc-empty {
	/* v0.49.3: was ink at `opacity: 0.85` — explicit solid slate instead. */
	color: #1e293b;
	opacity: 1;
}

@media (max-width: 900px) {
	.ppilot-cc-noexam-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.ppilot-cc-unlocks-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------- NEXT BEST ACTION (dominant card) ----------------
   §premium-student-dashboard-visual-correction (Phase 24.1), problem #8:
   restores ONE visually dominant "Your Next Best Action" card immediately
   below the hero/readiness strip — content is read verbatim from the
   EXISTING PersonalizationService::resolve_next_best_action() payload
   (data.next_best_action), never new recommendation logic. Visually
   distinct from the plain white cards below it via an indigo-tinted
   gradient panel, a left accent bar and a larger title, so it reads as
   the dashboard's single primary call-to-action rather than one tile
   among equals. */
.ppilot-cc-nba-card {
	/* v0.49.1: was a violet/indigo-tinted panel (#f5f4ff/#ede9fe/#ddd6fe)
	   — the same "muddy purple" the color-system target flags; swapped
	   for a light navy/royal-blue tint so it reads as this dashboard's
	   navy accent, not an unrelated purple. */
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	border: 1px solid #bfdbfe;
	border-left: 5px solid var(--ppilot-navy, #0b1f45);
}

.ppilot-cc-nba-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ppilot-navy-light, #312e6b);
}

.ppilot-cc-nba-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--ppilot-navy, #1e1b4b);
	line-height: 1.3;
}

.ppilot-cc-nba-reason {
	font-size: 14px;
	color: var(--ppilot-muted, #6b7280);
	line-height: 1.5;
}

.ppilot-cc-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ppilot-ink, #1f2430);
}

.ppilot-cc-card-icon {
	font-size: 18px;
	line-height: 1;
}

.ppilot-cc-empty {
	color: var(--ppilot-muted, #6b7280);
	font-size: 14px;
	line-height: 1.5;
	padding: 4px 0;
}

.ppilot-cc-muted {
	color: var(--ppilot-muted, #6b7280);
	font-size: 13px;
}

/* ---------------- BUTTONS / CTAs ---------------- */
.ppilot-cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	min-height: 40px;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ppilot-cc-btn:focus-visible {
	opacity: 1 !important;
	filter: none !important;
	outline: 3px solid var(--ppilot-gold, #d97706);
	outline-offset: 2px;
}

/* §premium-student-dashboard-visual-refinement (Phase 24.2), problem #2
   ("Browse Tests" hover bug) — ROOT CAUSE (v0.48.2): this file (and
   admin/ppilot-shared.css, whose tokens it reuses) never declared ANY
   :hover/:active rule for .ppilot-cc-btn*, unlike the admin .ppilot-btn*
   buttons, which got an explicit hover/active/focus state pass back in
   the 0.16.1 "button-state-hotfix" (see ppilot-shared.css's own comment
   on that fix). With no PracticePilot rule pinning `opacity`/`filter`/
   `background`/`color` on hover, ANY outside rule that happens to match
   a plain `<a>` — a host theme's own generic `a:hover` (very commonly an
   opacity fade, e.g. `a:hover{opacity:.7}`) or a browser/theme default —
   was free to win the cascade uncontested, which is what produced the
   "faded/dim/unreadable on hover" symptom.
   v0.48.2 added plain `.ppilot-cc-btn*:hover`/`:active` rules for this,
   which beats a bare `a:hover{opacity:.7}` (2 classes > 1 type selector)
   but can still LOSE to a theme rule that itself carries two classes
   plus the `a` element, e.g. `.entry-content a:hover{opacity:.7}` or
   `.site-content a:hover{...}` — both are (0,2,0) vs (0,2,1), and CSS
   specificity ties on the class count then falls through to compare
   type-selector count, where the theme rule's extra `a` wins. Phase
   24.2 closes that gap by re-declaring every hover/active/focus-visible
   state ALSO scoped under the Command Center's own root ID,
   `#ppilot-command-center-root` (id beats any number of classes, so
   this wins the cascade against virtually any class-based host-theme
   rule) in addition to the unscoped rules above/below (kept for
   readability and as a safety net).
   Phase 25 audit finding: ID-scope specificity alone is NOT sufficient
   against a theme rule that itself carries `!important` on a bare
   `a:hover{opacity:...}` (specificity comparisons never apply once
   either side uses `!important` — the last `!important` declaration in
   source order simply wins, and a theme's own stylesheet loads after
   this one). That is a real, observed failure mode (verified in the
   Phase 25 browser harness's theme-CSS-conflict test), so `opacity: 1`
   and `filter: none` specifically — and ONLY those two declarations, on
   ONLY the hover/active/focus-visible states below — now also carry
   `!important`. This is the narrowest possible, truly-unavoidable use:
   it does not touch color/background/shadow/transform (a site can still
   restyle those), it only guarantees the one invariant the task
   explicitly calls out ("Browse Tests must never fade on hover") holds
   even against a worst-case `!important`-wielding theme rule. Every
   variant explicitly pins `opacity: 1; filter: none;` plus its own
   background/color/box-shadow/transform on hover, active, AND
   focus-visible. Elevation
   (shadow + a 1px lift), not fading, signals "more interactive."
   Disabled is the only state allowed to look muted (handled separately
   below, and it is rendered as a non-interactive <span>, never an <a>,
   so it never receives a hover/focus event at all). */
.ppilot-cc-btn:hover,
#ppilot-command-center-root .ppilot-cc-btn:hover {
	opacity: 1 !important;
	filter: none !important;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(16, 24, 40, 0.16);
}

.ppilot-cc-btn:active,
#ppilot-command-center-root .ppilot-cc-btn:active {
	opacity: 1 !important;
	filter: none !important;
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.ppilot-cc-btn-primary:hover,
#ppilot-command-center-root .ppilot-cc-btn-primary:hover {
	opacity: 1 !important;
	filter: none !important;
	color: #fff;
	background: linear-gradient(135deg, var(--ppilot-navy-light, #312e6b) 0%, var(--ppilot-navy, #1e1b4b) 100%);
}

.ppilot-cc-btn-primary:active,
#ppilot-command-center-root .ppilot-cc-btn-primary:active {
	opacity: 1 !important;
	filter: none !important;
	color: #fff;
	background: var(--ppilot-navy, #1e1b4b);
}

.ppilot-cc-btn-primary:focus-visible,
#ppilot-command-center-root .ppilot-cc-btn-primary:focus-visible {
	opacity: 1 !important;
	filter: none !important;
	color: #fff;
	background: var(--ppilot-navy, #1e1b4b);
	outline: 3px solid var(--ppilot-gold, #d97706);
	outline-offset: 2px;
}

.ppilot-cc-btn-accent:hover,
#ppilot-command-center-root .ppilot-cc-btn-accent:hover {
	opacity: 1 !important;
	filter: none !important;
	color: #fff;
	background: #92400e;
}

.ppilot-cc-btn-accent:active,
#ppilot-command-center-root .ppilot-cc-btn-accent:active {
	opacity: 1 !important;
	filter: none !important;
	color: #fff;
	background: #78350f;
}

.ppilot-cc-btn-accent:focus-visible,
#ppilot-command-center-root .ppilot-cc-btn-accent:focus-visible {
	opacity: 1 !important;
	filter: none !important;
	color: #fff;
	background: #92400e;
	outline: 3px solid var(--ppilot-navy, #1e1b4b);
	outline-offset: 2px;
}

.ppilot-cc-btn-secondary:hover,
#ppilot-command-center-root .ppilot-cc-btn-secondary:hover {
	opacity: 1 !important;
	filter: none !important;
	color: var(--ppilot-navy, #1e1b4b);
	background: var(--ppilot-bg, #f9fafb);
	border-color: var(--ppilot-navy, #1e1b4b);
}

.ppilot-cc-btn-secondary:active,
#ppilot-command-center-root .ppilot-cc-btn-secondary:active {
	opacity: 1 !important;
	filter: none !important;
	color: var(--ppilot-navy, #1e1b4b);
	background: #eef0ff;
}

.ppilot-cc-btn-secondary:focus-visible,
#ppilot-command-center-root .ppilot-cc-btn-secondary:focus-visible {
	opacity: 1 !important;
	filter: none !important;
	color: var(--ppilot-navy, #1e1b4b);
	background: #fff;
	border-color: var(--ppilot-navy, #1e1b4b);
	outline: 3px solid var(--ppilot-gold, #d97706);
	outline-offset: 2px;
}

.ppilot-cc-btn-link:hover,
#ppilot-command-center-root .ppilot-cc-btn-link:hover {
	opacity: 1 !important;
	filter: none !important;
	color: var(--ppilot-navy, #1e1b4b);
	text-decoration: underline;
	transform: none;
	box-shadow: none;
}

.ppilot-cc-btn-link:active,
#ppilot-command-center-root .ppilot-cc-btn-link:active {
	opacity: 1 !important;
	filter: none !important;
	color: var(--ppilot-navy, #1e1b4b);
}

.ppilot-cc-btn-link:focus-visible,
#ppilot-command-center-root .ppilot-cc-btn-link:focus-visible {
	opacity: 1 !important;
	filter: none !important;
	color: var(--ppilot-navy, #1e1b4b);
	text-decoration: underline;
	outline: 3px solid var(--ppilot-gold, #d97706);
	outline-offset: 2px;
}

/* Disabled is the only state allowed to look muted (§10 of the spec) —
   rendered as a plain, non-interactive <span> (see command-center.js's
   ctaButton()), so :hover/:active never fire on it; this rule exists only
   so nothing above can accidentally brighten it if markup ever changes. */
.ppilot-cc-btn-disabled,
.ppilot-cc-btn-disabled:hover,
.ppilot-cc-btn-disabled:active {
	opacity: 0.6;
	background: var(--ppilot-bg, #f9fafb);
	color: var(--ppilot-muted, #6b7280);
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* §premium-student-dashboard-visual-correction (Phase 24.1), problem #9
   ("do not overuse orange"): the primary CTA now uses the navy/indigo
   surface color on every ordinary card (Mission, no-exam hero selector,
   etc). Gold/orange is reserved as a single controlled accent — only the
   dominant Next Best Action card's own CTA below still uses it, so the
   one color pulling the eye hardest on the page also points at the one
   action the dashboard most wants a student to take. */
/* v0.49.1 audit finding: the hover/active/focus-visible states above were
   already re-declared scoped under #ppilot-command-center-root (ID beats
   any class-based theme rule), but the ORDINARY/default state below was
   not. A host theme or page-builder rule as generic as one class plus a
   bare anchor selector (specificity 0,1,1) out-specifies a plain single-
   class button rule (specificity 0,1,0) and can repaint the CTA text an
   unreadable or off-brand color even before any interaction happens.
   Re-declaring every variant's base background/color ALSO under the ID-
   scoped selector closes that gap the same way the interactive states
   already are. No !important is needed for this particular gap; ID
   specificity alone is enough outside the hover states' own !important-
   vs-!important edge case. */
.ppilot-cc-btn-primary,
#ppilot-command-center-root .ppilot-cc-btn-primary {
	background: linear-gradient(135deg, var(--ppilot-navy, #0b1f45) 0%, var(--ppilot-navy-light, #1d3f7a) 100%);
	color: #fff;
}

.ppilot-cc-btn-accent,
#ppilot-command-center-root .ppilot-cc-btn-accent {
	/* v0.49.3: was var(--ppilot-gold) #d97706 — white 14px text on it is
	   only 3.19:1 (fails AA). Amber-700 keeps the same accent hue at 5.02:1. */
	background: #b45309;
	color: #fff;
}

.ppilot-cc-btn-secondary,
#ppilot-command-center-root .ppilot-cc-btn-secondary {
	background: #fff;
	color: var(--ppilot-navy, #0b1f45);
	border: 1.5px solid var(--ppilot-navy, #0b1f45);
}

.ppilot-cc-btn-link,
#ppilot-command-center-root .ppilot-cc-btn-link {
	background: transparent;
	color: var(--ppilot-navy, #0b1f45);
	padding: 6px 0;
	text-decoration: underline;
}

.ppilot-cc-btn-disabled {
	background: var(--ppilot-bg, #f9fafb);
	color: var(--ppilot-muted, #6b7280);
	cursor: default;
}

/* ---------------- NEXT BEST ACTION ---------------- */
.ppilot-cc-next-action-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ppilot-navy, #1e1b4b);
}

.ppilot-cc-next-action-reason {
	font-size: 14px;
	color: var(--ppilot-muted, #6b7280);
	line-height: 1.5;
}

/* ---------------- MISSION ---------------- */
.ppilot-cc-mission-count {
	font-size: 13px;
	color: var(--ppilot-muted, #6b7280);
}

/* ---------------- PROGRESS BAR ---------------- */
.ppilot-cc-progress {
	background: var(--ppilot-bg, #f9fafb);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	width: 100%;
}

.ppilot-cc-progress-fill {
	background: linear-gradient(90deg, var(--ppilot-gold, #d97706), var(--ppilot-navy, #1e1b4b));
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* ---------------- READINESS ---------------- */
.ppilot-cc-readiness-score {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ppilot-cc-readiness-score-num {
	font-size: 28px;
	font-weight: 800;
	color: var(--ppilot-navy, #1e1b4b);
}

.ppilot-cc-readiness-status {
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 10px;
	background: var(--ppilot-bg, #f9fafb);
	color: var(--ppilot-muted, #6b7280);
}

.ppilot-cc-status-strong { background: var(--ppilot-success-bg, #f0fdf4); color: var(--ppilot-success, #15803d); }
.ppilot-cc-status-developing { background: var(--ppilot-warning-bg, #fffbeb); color: var(--ppilot-warning, #b45309); }
.ppilot-cc-status-building { background: var(--ppilot-danger-bg, #fef2f2); color: var(--ppilot-danger, #b91c1c); }
.ppilot-cc-status-not_started { background: var(--ppilot-bg, #f9fafb); color: var(--ppilot-muted, #6b7280); }

.ppilot-cc-readiness-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ppilot-cc-readiness-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	border-top: 1px solid var(--ppilot-border, #e5e7eb);
	padding-top: 6px;
}

.ppilot-cc-readiness-row-label { color: var(--ppilot-muted, #6b7280); }
.ppilot-cc-readiness-row-value { font-weight: 600; color: var(--ppilot-ink, #1f2430); }

/* ---------------- CONTINUE ---------------- */
.ppilot-cc-continue-title { font-weight: 700; font-size: 15px; }
.ppilot-cc-continue-sub { font-size: 13px; color: var(--ppilot-muted, #6b7280); }

/* ---------------- GAPS ---------------- */
.ppilot-cc-gap-list { display: flex; flex-direction: column; gap: 8px; }
.ppilot-cc-gap-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; gap: 10px; }
.ppilot-cc-gap-metric { font-weight: 700; color: var(--ppilot-navy, #1e1b4b); }

/* ---------------- MISTAKE BOOK ---------------- */
.ppilot-cc-mistake-row { font-size: 14px; font-weight: 600; }

/* ---------------- MOCK CENTER ---------------- */
.ppilot-cc-mock-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ppilot-cc-mock-chip {
	background: var(--ppilot-bg, #f9fafb);
	border: 1px solid var(--ppilot-border, #e5e7eb);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 13px;
	text-decoration: none;
	color: var(--ppilot-navy, #1e1b4b);
	font-weight: 600;
}
.ppilot-cc-mock-chip-disabled { color: var(--ppilot-muted, #6b7280); cursor: default; }

/* ---------------- ROADMAP ---------------- */
.ppilot-cc-roadmap-overall { font-size: 13px; color: var(--ppilot-muted, #6b7280); }
.ppilot-cc-roadmap-list { display: flex; flex-direction: column; gap: 10px; }
.ppilot-cc-roadmap-row-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; gap: 8px; }
.ppilot-cc-roadmap-pct { font-size: 12px; color: var(--ppilot-muted, #6b7280); margin-top: 2px; }
.ppilot-cc-roadmap-priority {
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 1px 8px;
}
.ppilot-cc-priority-high { background: var(--ppilot-danger-bg, #fef2f2); color: var(--ppilot-danger, #b91c1c); }
.ppilot-cc-priority-medium { background: var(--ppilot-warning-bg, #fffbeb); color: var(--ppilot-warning, #b45309); }
.ppilot-cc-priority-low { background: var(--ppilot-success-bg, #f0fdf4); color: var(--ppilot-success, #15803d); }

/* ---------------- PERFORMANCE ---------------- */
.ppilot-cc-perf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 10px;
}

.ppilot-cc-statbox {
	text-align: center;
	background: var(--ppilot-bg, #f9fafb);
	border-radius: 10px;
	padding: 10px 6px;
}

.ppilot-cc-statbox-value { font-size: 18px; font-weight: 800; color: var(--ppilot-navy, #1e1b4b); }
.ppilot-cc-statbox-label { font-size: 11px; color: var(--ppilot-muted, #6b7280); margin-top: 2px; }

/* ---------------- GAMIFICATION ---------------- */
.ppilot-cc-xp { font-size: 15px; font-weight: 700; color: var(--ppilot-navy, #1e1b4b); }
.ppilot-cc-streak { font-size: 14px; }
.ppilot-cc-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ppilot-cc-badge {
	background: var(--ppilot-gold-light, #fef3e2);
	/* v0.49.3: was var(--ppilot-gold) #d97706 on #fef3e2 = 2.9:1. */
	color: #92400e;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
}

/* ---------------- MOBILE (320px baseline, explicitly required) ---------------- */
@media (max-width: 480px) {
	.ppilot-cc-hero {
		padding: 18px 16px;
		border-radius: 12px;
		/* §premium-student-dashboard-visual-correction (Phase 24.1),
		   problem #1: ~180-220px on mobile (down from Phase 24's
		   260-340px) — "substantially smaller on mobile" per the spec,
		   not merely the desktop hero stacked and scaled down. Swaps to
		   the dedicated mobile hero image (if configured) rather than
		   stretching/cropping the desktop one. */
		min-height: 180px;
		max-height: 220px;
		flex-direction: column;
		/* §overflow-fix (Phase 24.1): the base rule's `flex-wrap: wrap`
		   is harmless in the desktop ROW direction (an overflowing pair
		   just drops to a second line, taller — never wider), but in
		   this COLUMN direction it is a genuine horizontal-overflow bug:
		   when stacked content exceeds max-height, a wrapped COLUMN flex
		   container opens a SECOND column further along the (horizontal)
		   cross axis instead of simply growing taller, pushing content
		   off-screen (confirmed via a real Playwright measurement, not
		   assumed). `nowrap` here restores plain vertical stacking. */
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: center;
		/* Phase 24.2, Issue 3/8: mobile stacks content in a COLUMN (text on
		   top), so the overlay here is TOP -> BOTTOM instead of the
		   desktop's left-right, for the same "readable text, visible
		   image" balance rather than a flat near-opaque tint. */
		/* v0.49.2 hotfix: same "brighten the photo, keep the text zone
		   dark" easing as the desktop gradient above — only the mid/
		   bottom stops are lightened (0.60->0.46, 0.42->0.24); the top
		   (0%) stop, directly behind the greeting/sub text on mobile's
		   stacked layout, is only nudged (0.88->0.82). */
		/* v0.49.3: on mobile the text column covers the hero's FULL
		   height (eyebrow -> greeting -> sub -> feature row at the very
		   bottom in the ready state), so the v0.49.2 0.24 bottom stop
		   put the feature labels on a near-white photo at <4.5:1 (proved
		   by the hostile-theme contrast harness). Bottom stop is now 0.6. */
		background-image: linear-gradient(180deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.7) 50%, rgba(11, 31, 69, 0.6) 100%), var(--cc-hero-img-mobile, var(--cc-hero-img-desktop));
	}
	/* v0.49.1 fix: .ppilot-cc-hero-main's desktop rule is `flex: 1 1
	   260px` — flex-basis is resolved along the flex container's MAIN
	   axis, which is horizontal (width) in the desktop row layout but
	   becomes VERTICAL (height) once `.ppilot-cc-hero` switches to
	   `flex-direction: column` here. Left un-overridden, that 260px
	   basis was silently forcing hero-main to ~260px tall on mobile —
	   far more than its actual (shorter) content — which, combined with
	   `justify-content: center`, opened a large dead gap between the
	   feature row and the exam-selector card below it (confirmed via a
	   real Playwright mobile screenshot). `auto` restores a height
	   driven by actual content, matching every other mobile-stacked
	   layout on this page. */
	.ppilot-cc-hero-main {
		flex-basis: auto;
	}
	/* The no-exam compact selector adds real content below the greeting,
	   so its genuine stacked height legitimately exceeds the ordinary
	   ~180-220px target on a narrow screen — allowed to grow rather than
	   clipping or re-triggering the overflow above; every OTHER state
	   (the vast majority of page loads) keeps the tight max-height. */
	.ppilot-cc-hero:has(.ppilot-cc-hero-select) {
		max-height: none;
	}
	/* v0.49.1: the hero now always includes the eyebrow label + 4-item
	   feature row (desktop fits this within the existing 220-260px
	   budget; on a narrow mobile column that same content legitimately
	   needs more vertical room) — same "allowed to grow, never clips"
	   treatment already given to the no-exam selector above. */
	.ppilot-cc-hero {
		max-height: none;
	}
	.ppilot-cc-hero-select {
		max-width: 100%;
		width: 100%;
		padding: 14px 16px;
	}
	.ppilot-cc-hero-greeting {
		font-size: 19px;
	}
	.ppilot-cc-hero-sub {
		font-size: 13px;
		margin-bottom: 8px;
	}
	.ppilot-cc-hero-eyebrow {
		font-size: 10px;
		margin-bottom: 6px;
	}
	.ppilot-cc-hero-features {
		gap: 10px 16px;
		margin-top: 8px;
	}
	.ppilot-cc-hero-feature-sub {
		display: none;
	}
	.ppilot-cc-readiness-float {
		/* §19 of the spec: "horizontal/scrollable quick stats if
		   appropriate" — a single scrollable row instead of wrapping
		   into a tall stack on a 320-375px viewport. */
		grid-auto-flow: column;
		grid-template-columns: unset;
		grid-auto-columns: minmax(84px, 1fr);
		overflow-x: auto;
		/* v0.49.1: reduced to match the desktop -20px fix above — the
		   mobile hero now also always grows to fit the eyebrow/feature
		   row (it is `max-height: none` in this same breakpoint), so a
		   deeper pull risks clipping that real content the same way the
		   desktop overlap did. */
		margin: -16px 12px 16px 12px;
		-webkit-overflow-scrolling: touch;
	}
	.ppilot-cc-grid {
		grid-template-columns: 1fr;
	}
	.ppilot-cc-card {
		padding: 16px;
	}
	.ppilot-cc-btn {
		width: 100%;
	}
	.ppilot-cc-readiness-score-num {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppilot-cc-progress-fill {
		transition: none;
	}
	.ppilot-cc-btn {
		transition: none;
	}
	.ppilot-cc-btn:hover,
	.ppilot-cc-btn:active {
		transform: none;
	}
}

/* =====================================================================
   v0.49.3 — THEME-ISOLATION LAYER (keep this LAST in the file)
   ---------------------------------------------------------------------
   Why this exists: for four releases (v0.48.2 -> v0.49.2) theme bleed was
   fixed one element at a time (CTA hover opacity, CTA base colour, the
   "Good Morning," prefix colour) and each time the NEXT element broke.
   The shared root cause: any PracticePilot text that only INHERITS its
   colour/font from a parent loses to ANY explicit host-theme rule that
   matches the element itself (the live hpgovtjob.com theme recolours
   h1-h6/p/span/li/strong, underlines + recolours + fades `a`, styles
   `button`), regardless of specificity — and a single-class
   PracticePilot rule (0,1,0) also loses to the `.entry-content p` /
   `.entry-content a` (0,1,1) rules WordPress themes ship.

   The layer works in two tiers, both scoped to this component's own root
   ID (nothing outside #ppilot-command-center-root is touched):
     Tier 1 (1,0,1): an element baseline — every text-bearing element
       inside the root inherits colour/font/line-height from PracticePilot
       (never from the theme), headings/paragraphs lose theme margins/
       sizes. Beats every class-based theme rule.
     Tier 2 (1,1,0+): every PracticePilot text class re-declares its OWN
       explicit colour (and any margin/size/line-height Tier 1 resets),
       so it wins over Tier 1 and over the theme.
   `!important` is used ONLY for opacity/filter on link interaction
   states, where the hostile-theme fixture proves a theme
   `.entry-content a:hover{opacity:.7!important}` would otherwise win
   (same justified pattern as Phase 25 / v0.49.0 / v0.49.2).
   Verified by /home/claude/phase28_browser_test (hostile-theme.css).
   ===================================================================== */
#ppilot-command-center-root {
	--ppilot-muted: #475569;
	--ppilot-ink: #1f2430;
	color: var(--ppilot-ink, #1f2430);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	letter-spacing: normal;
	opacity: 1;
	filter: none;
}

/* ---- Tier 1: element baseline (specificity 1,0,1) ---- */
#ppilot-command-center-root :is(h1, h2, h3, h4, h5, h6, p, span, li, strong, b, em, small, label, div, ul, ol) {
	color: inherit;
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	opacity: 1;
}

#ppilot-command-center-root :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
}

#ppilot-command-center-root a,
#ppilot-command-center-root a:visited {
	text-decoration: none;
	border-bottom-style: none;
	font-family: inherit;
	opacity: 1;
	filter: none;
}

#ppilot-command-center-root a:hover,
#ppilot-command-center-root a:focus,
#ppilot-command-center-root a:focus-visible,
#ppilot-command-center-root a:active {
	opacity: 1 !important;
	filter: none !important;
}

/* ---- Tier 2a: hero (dark surface -> white / near-white) ---- */
#ppilot-command-center-root .ppilot-cc-hero { color: #fff; }
#ppilot-command-center-root .ppilot-cc-hero-greeting {
	color: #fff;
	font-size: clamp(19px, 2.6vw, 26px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 6px 0;
}
#ppilot-command-center-root .ppilot-cc-hero-greeting-prefix { color: #fff; }
#ppilot-command-center-root .ppilot-cc-hero-name { color: #fbbf24; }
#ppilot-command-center-root .ppilot-cc-hero-sub {
	color: rgba(255, 255, 255, 0.94);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 12px 0;
}
#ppilot-command-center-root .ppilot-cc-hero-eyebrow {
	color: rgba(255, 255, 255, 0.92);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
#ppilot-command-center-root .ppilot-cc-hero-feature-icon { color: #fff; line-height: 1; }
#ppilot-command-center-root .ppilot-cc-hero-feature-label { color: #fff; line-height: 1.25; }
#ppilot-command-center-root .ppilot-cc-hero-feature-sub { color: rgba(255, 255, 255, 0.9); line-height: 1.25; }
#ppilot-command-center-root .ppilot-cc-chip { color: #fff; }
#ppilot-command-center-root .ppilot-cc-chip-label { color: rgba(255, 255, 255, 0.88); }
#ppilot-command-center-root .ppilot-cc-chip-value { color: #fff; }

/* Hero exam card ("Choose Your Exam"): solid deep-navy surface (see the
   .ppilot-cc-hero-select rule above), explicit white heading, light
   subtitle, solid royal-blue CTA that never underlines or fades. */
#ppilot-command-center-root .ppilot-cc-hero-select-label {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-shadow: none;
}
#ppilot-command-center-root .ppilot-cc-hero-select-sub {
	color: #cbd5e1;
	font-size: 13px;
	line-height: 1.45;
	margin: 0 0 4px 0;
}
#ppilot-command-center-root .ppilot-cc-hero-select .ppilot-cc-btn-primary,
#ppilot-command-center-root .ppilot-cc-hero-select .ppilot-cc-btn-primary:visited {
	background: #2563eb;
	color: #fff;
	border: 0;
	width: 100%;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
#ppilot-command-center-root .ppilot-cc-hero-select .ppilot-cc-btn-primary:hover,
#ppilot-command-center-root .ppilot-cc-hero-select .ppilot-cc-btn-primary:focus-visible {
	background: #1d4ed8;
	color: #fff;
}
#ppilot-command-center-root .ppilot-cc-hero-select .ppilot-cc-btn-primary:focus-visible {
	outline: 3px solid #93c5fd;
	outline-offset: 2px;
}
#ppilot-command-center-root .ppilot-cc-hero-select .ppilot-cc-btn-primary:active {
	background: #1e40af;
	color: #fff;
}

/* ---- Tier 2b: white / light card surfaces (navy / slate text) ---- */
#ppilot-command-center-root .ppilot-cc-loading { color: var(--ppilot-muted); font-size: 15px; }
#ppilot-command-center-root .ppilot-cc-card { color: var(--ppilot-ink, #1f2430); }
#ppilot-command-center-root .ppilot-cc-card-title { color: var(--ppilot-ink, #1f2430); font-size: 15px; font-weight: 700; line-height: 1.35; }
#ppilot-command-center-root .ppilot-cc-card-icon { color: var(--ppilot-ink, #1f2430); font-size: 18px; line-height: 1; }
#ppilot-command-center-root .ppilot-cc-empty { color: var(--ppilot-muted); font-size: 14px; line-height: 1.55; }
#ppilot-command-center-root .ppilot-cc-muted { color: var(--ppilot-muted); font-size: 13px; }
#ppilot-command-center-root .ppilot-cc-journey-label { color: var(--ppilot-navy, #0b1f45); }
#ppilot-command-center-root .ppilot-cc-journey-reason { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-float-value { color: var(--ppilot-navy, #0b1f45); line-height: 1.2; }
#ppilot-command-center-root .ppilot-cc-float-label { color: var(--ppilot-muted); font-size: 11.5px; line-height: 1.3; }
#ppilot-command-center-root .ppilot-cc-unlocks-sub { color: var(--ppilot-muted); font-size: 13px; line-height: 1.5; margin: -2px 0 4px 0; }
#ppilot-command-center-root .ppilot-cc-unlocks-tile-icon { color: var(--ppilot-ink, #1f2430); line-height: 1; }
#ppilot-command-center-root .ppilot-cc-unlocks-tile-title { color: var(--ppilot-ink, #1f2430); line-height: 1.3; }
#ppilot-command-center-root .ppilot-cc-unlocks-tile-desc { color: var(--ppilot-muted); font-size: 12.5px; line-height: 1.4; }
#ppilot-command-center-root .ppilot-cc-nba-eyebrow { color: var(--ppilot-navy-light, #1d3f7a); letter-spacing: 0.04em; }
#ppilot-command-center-root .ppilot-cc-nba-title { color: var(--ppilot-navy, #0b1f45); line-height: 1.3; }
#ppilot-command-center-root .ppilot-cc-nba-reason { color: #334155; line-height: 1.5; }
#ppilot-command-center-root .ppilot-cc-next-action-title { color: var(--ppilot-navy, #0b1f45); }
#ppilot-command-center-root .ppilot-cc-next-action-reason { color: var(--ppilot-muted); line-height: 1.5; }
#ppilot-command-center-root .ppilot-cc-mission-count { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-readiness-score-num { color: var(--ppilot-navy, #0b1f45); }
#ppilot-command-center-root .ppilot-cc-readiness-status { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-status-strong { color: var(--ppilot-success, #15803d); }
#ppilot-command-center-root .ppilot-cc-status-developing { color: var(--ppilot-warning, #b45309); }
#ppilot-command-center-root .ppilot-cc-status-building { color: var(--ppilot-danger, #b91c1c); }
#ppilot-command-center-root .ppilot-cc-status-not_started { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-readiness-row-label { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-readiness-row-value { color: var(--ppilot-ink, #1f2430); }
#ppilot-command-center-root .ppilot-cc-continue-sub { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-gap-metric { color: var(--ppilot-navy, #0b1f45); }
#ppilot-command-center-root .ppilot-cc-roadmap-overall,
#ppilot-command-center-root .ppilot-cc-roadmap-pct { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-roadmap-priority { color: var(--ppilot-ink, #1f2430); }
#ppilot-command-center-root .ppilot-cc-continue-title,
#ppilot-command-center-root .ppilot-cc-mistake-row,
#ppilot-command-center-root .ppilot-cc-streak { color: var(--ppilot-ink, #1f2430); }
#ppilot-command-center-root .ppilot-cc-mistake-row.ppilot-cc-muted { color: var(--ppilot-muted); }
#ppilot-command-center-root .ppilot-cc-priority-high { color: var(--ppilot-danger, #b91c1c); }
#ppilot-command-center-root .ppilot-cc-priority-medium { color: var(--ppilot-warning, #b45309); }
#ppilot-command-center-root .ppilot-cc-priority-low { color: var(--ppilot-success, #15803d); }
#ppilot-command-center-root .ppilot-cc-statbox-value { color: var(--ppilot-navy, #0b1f45); }
#ppilot-command-center-root .ppilot-cc-statbox-label { color: var(--ppilot-muted); font-size: 11.5px; }
#ppilot-command-center-root .ppilot-cc-xp { color: var(--ppilot-navy, #0b1f45); }
#ppilot-command-center-root .ppilot-cc-badge { color: #92400e; }
/* Disabled CTA (a non-interactive <span>): still visibly muted via its
   slate text + flat grey surface, but no longer additionally faded to 0.6
   opacity — faded text was the exact defect class this release removes,
   and the Tier-1 baseline above already pins opacity 1 on every span. */
#ppilot-command-center-root .ppilot-cc-btn-disabled { color: var(--ppilot-muted); background: var(--ppilot-bg, #f9fafb); opacity: 1; }
#ppilot-command-center-root .ppilot-cc-btn { text-decoration: none; font-family: inherit; line-height: 1.25; }
#ppilot-command-center-root .ppilot-cc-btn-link { text-decoration: underline; }
#ppilot-command-center-root .ppilot-cc-mock-chip,
#ppilot-command-center-root .ppilot-cc-mock-chip:visited {
	color: var(--ppilot-navy, #0b1f45);
	text-decoration: none;
	border: 1px solid var(--ppilot-border, #e5e7eb);
}
#ppilot-command-center-root .ppilot-cc-mock-chip:hover {
	border-color: var(--ppilot-navy, #0b1f45);
	color: var(--ppilot-navy, #0b1f45);
}
#ppilot-command-center-root .ppilot-cc-mock-chip:focus-visible {
	outline: 3px solid var(--ppilot-gold, #d97706);
	outline-offset: 2px;
}
#ppilot-command-center-root .ppilot-cc-mock-chip-disabled { color: var(--ppilot-muted); }

/* "Take the first step": v0.49.3 — the card is stretched to the height of
   the taller "Unlocked" card beside it (align-items: stretch, kept so the
   row's edges line up), which left its three items stacked at the top
   and the bottom half empty. Its content is now vertically centred as one
   group with slightly larger type, so the panel reads as an intentional
   call-out rather than a half-empty box. No content added. */
#ppilot-command-center-root .ppilot-cc-first-step-card {
	justify-content: center;
	gap: 14px;
	padding: 24px;
}
#ppilot-command-center-root .ppilot-cc-first-step-card .ppilot-cc-card-title {
	font-size: 17px;
	color: var(--ppilot-navy, #0b1f45);
}
#ppilot-command-center-root .ppilot-cc-first-step-card .ppilot-cc-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
#ppilot-command-center-root .ppilot-cc-first-step-card .ppilot-cc-empty {
	color: #1e293b;
	font-size: 15px;
	line-height: 1.6;
	padding: 0;
}
#ppilot-command-center-root .ppilot-cc-first-step-card .ppilot-cc-btn {
	align-self: stretch;
	min-height: 44px;
}

/* Unlocked card tiles: v0.49.3 — icon badge vertically centred against
   its two-line text (was top-aligned, which read as misaligned on tiles
   whose description wraps), and a hover-free solid tile. */
#ppilot-command-center-root .ppilot-cc-unlocks-tile { align-items: center; }

/* Overall-review spacing fixes (v0.49.3): in v0.49.2 the no-exam card
   row sat flush against the hero's bottom edge and the Next Best Action
   card sat flush against the first grid row (0px gaps, while every other
   vertical gap on the page is 20px). */
#ppilot-command-center-root .ppilot-cc-noexam-row { margin-top: 20px; }
#ppilot-command-center-root .ppilot-cc-nba-card { margin-bottom: 20px; }
/* The NBA CTA stretched into a 1300px-wide orange bar on desktop; it now
   sizes to its label like a primary action (full width stays on mobile). */
#ppilot-command-center-root .ppilot-cc-nba-card .ppilot-cc-btn {
	align-self: flex-start;
	min-width: 220px;
	padding-left: 24px;
	padding-right: 24px;
}
/* Progress-bar track was #f9fafb on a white card (~1.04:1, invisible);
   a visible slate-200 track shows how much is left. */
#ppilot-command-center-root .ppilot-cc-progress { background: #e2e8f0; }

@media (max-width: 480px) {
	#ppilot-command-center-root .ppilot-cc-nba-card { margin-bottom: 16px; }
	#ppilot-command-center-root .ppilot-cc-noexam-row { margin-top: 16px; }
	#ppilot-command-center-root .ppilot-cc-nba-card .ppilot-cc-btn { align-self: stretch; min-width: 0; }
	/* The floating readiness card pulls up 16px over the hero; give the
	   hero's bottom edge matching room so it never sits on the feature row. */
	#ppilot-command-center-root .ppilot-cc-hero { padding-bottom: 30px; }
	#ppilot-command-center-root .ppilot-cc-hero-greeting { font-size: 20px; }
	#ppilot-command-center-root .ppilot-cc-hero-sub { font-size: 13px; margin-bottom: 8px; }
	#ppilot-command-center-root .ppilot-cc-hero-eyebrow { font-size: 10px; }
	#ppilot-command-center-root .ppilot-cc-first-step-card { padding: 18px 16px; }
}