/* Cyber Essentials Readiness Assessment -- in-page expanding panel (IT
   Essentials page). Ported from the standalone mockup at
   "C:\VSCODELAP\CEQuiz - 8 Questions (Rapid)"; every class is prefixed
   ce-quiz- so nothing here can collide with the generic GenerateBlocks
   class names (.card, .section, .option, .btn...) already in heavy use
   site-wide. Colours are pulled from brand.css's own tokens (--purple,
   --secondary, --yellow, --text-black) rather than the mockup's local
   :root redeclaration of the same hex values, so this actually inherits
   the site's IT Essentials colourway instead of just happening to match
   it right now.

   Originally a fixed-position slide-out drawer with a backdrop; changed
   to expand in normal document flow directly under the trigger button
   instead, pushing the rest of the page down -- same 0fr/1fr CSS Grid
   technique already used for the accordion elsewhere on this page
   (.gb-accordion-content), so no JS height measurement is needed and it
   can never show the "bounce" a fixed max-height would. */

/* ---------- trigger button ---------- */
/* Same reasoning as #cyber-essentials-heading below: the site header is
   fixed/60px, so scrollIntoView({block:'start'}) alone (used by the
   Free-Cyber-Essentials-Report deep link in ce-quiz.js) would land this
   button half-hidden underneath it. */
.ce-quiz-trigger {
  scroll-margin-top: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;   /* every button on the site is 44px (Simon, 2026-09-23) */
  box-sizing: border-box;
  font-weight: bold;
  font-family: inherit;
  font-size: .95rem;
  cursor: pointer;
  padding: 0 20px;
  margin-top: 4px;
  margin-left: 10px;
  margin-bottom: 15px;
  border-radius: 999px;
  border: 2px solid var(--purple);
  background: var(--purple);
  color: #fff;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* theme.css's blanket `button:hover { background-color: #404040;
   border-color: #404040; }` sets border-color too, not just
   background -- restating background/color/box-shadow here without
   also restating border-color left the ring a dark near-black grey
   instead of purple (this is what made the hover look "broken" next
   to the site's other purple buttons, which use box-shadow rings, not
   a real border, so they never had a border-color to leak through). */
.ce-quiz-trigger:hover {
  background: #fff;
  color: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple);
}
/* theme.css also has a blanket `button:active, button:focus {
   background: #404040; border-color: #404040; }` that a plain click
   leaves applied indefinitely, since a clicked button stays :focus
   until something else takes focus -- :hover alone doesn't reach that
   because clicking triggers :focus, not :focus-visible, in most
   browsers. Explicitly put it back to the purple resting state.

   :not(:hover) matters here: this button is also a toggle (clicking it
   again closes the panel), and a plain click leaves it focused
   afterwards. Without :not(:hover), this rule and :hover above tie on
   specificity and this one -- being later in the file -- always won,
   so once the button had been clicked once, hovering it again did
   nothing until something else stole focus (clicking elsewhere). That
   was the actual "doesn't return to hover" bug: not a colour leak, but
   this rule permanently overriding real mouse hover. Restricting it to
   the focused-but-not-hovered case fixes the leak it was written for
   while leaving genuine hover free to always win. */
.ce-quiz-trigger:focus:not(:hover),
.ce-quiz-trigger:active:not(:hover) {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  box-shadow: none;
}

/* The Cyber Essentials Certification Support section itself
   (gb-container-b72a280d, unique to this page) is a dark 800px-min-height
   band with `display:flex; align-items:center` -- built to vertically
   centre a short block of text against a background image. While the
   quiz panel is collapsed, actual content is far shorter than 800px, so
   flex centring pushes the heading ~288px down from the band's top edge.
   The moment the panel's real height exceeds 800px, that gap collapses
   to zero and the heading visibly jumps back up to the band's top edge
   -- an actual change in the heading's position in the document, not a
   scroll artefact.

   Fix: turn off the centring (align-items:flex-start) but replace it
   with the exact same 288px offset as a fixed margin on the flex item
   instead. That reproduces the original centred-at-800px resting
   position pixel-for-pixel, but as a constant that doesn't get
   recalculated against the container's current content height -- so
   the heading lands in the same place either way, and every bit of the
   panel's growth happens below it instead of the whole section
   shifting. 288px measured directly from the live page before this
   fix: with align-items:center still in effect, the flex item this
   margin now targets sat 288px below gb-container-b72a280d's own top
   edge, at that time driven purely by (800px - 224px content) / 2. */
.gb-container-b72a280d { align-items: flex-start !important; }
.gb-container-b72a280d > .gb-inside-container { margin-top: 288px !important; }

/* Closing the quiz jumps to #cyber-essentials-heading (see ce-quiz.js).
   Without this, the native anchor jump aligns the heading's own top
   edge to the very top of the viewport, which is exactly where the
   site's 60px fixed header sits -- hiding the heading underneath it. */
#cyber-essentials-heading { scroll-margin-top: 80px; }

/* ---------- expanding panel shell ---------- */
.ce-quiz-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1.4s cubic-bezier(.22, 1, .36, 1);
  overflow-anchor: none;
}
.ce-quiz-panel.ce-quiz-open { grid-template-rows: 1fr; }
.ce-quiz-panel-inner { overflow: hidden; min-height: 0; }

/* Compound .ce-quiz-btn.ce-quiz-close selectors so this reliably beats
   the plain .ce-quiz-btn / .ce-quiz-btn:hover rules further down this
   file on specificity, regardless of source order. */
.ce-quiz-btn.ce-quiz-close {
  display: block;
  width: max-content;
  margin: 24px 0 0 auto;
  padding: 0 24px;
  border: 2px solid var(--ce-accent);
  background: var(--ce-accent);
  color: #fff;
  box-shadow: none;
}
.ce-quiz-btn.ce-quiz-close:hover,
.ce-quiz-btn.ce-quiz-close:focus-visible {
  background: #fff;
  color: var(--ce-accent);
  transform: none;
  box-shadow: 0 0 0 1px var(--ce-accent);
}

/* ---------- ported quiz content (namespaced under .ce-quiz) ---------- */
/* Variables live on the panel (the true top-level ancestor) so they're
   defined once and inherit into both .ce-quiz elements below (the card
   wrapper and, nested inside it, the <form>) without redeclaring them
   twice or applying the card's own padding/background twice over. */
.ce-quiz-panel {
  --ce-navy: var(--secondary, #004269);
  --ce-purple: var(--purple, #D5ACF8);
  --ce-purple-light: var(--purple-light, #F6EFFC);
  --ce-yellow: var(--yellow, #FFCE00);
  --ce-text: var(--text-black, #363636);
  --ce-muted: #6b6b74;
  --ce-accent: var(--ce-purple);
  --ce-accent-2: var(--ce-navy);
  /* --ce-purple (#D5ACF8) is the site's IT Essentials brand swatch, but
     it's a pale fill colour -- built for a solid button background with
     white text on top, not for standing alone as text on white, where
     it reads as washed-out rather than "purple". vivid-purple is a
     darker, more saturated shade already defined site-wide for exactly
     this (WordPress's own preset palette); using it for heading/accent
     text is what actually reads as purple branding at text size. */
  --ce-accent-text: var(--wp--preset--color--vivid-purple, #9b51e0);
  --ce-option-bg: rgba(213, 172, 248, .12);
  --ce-border: rgba(0, 66, 105, .14);
  --ce-rag-green: #1f9d6c;
  --ce-rag-green-2: #167a54;
  --ce-rag-amber: #e2a400;
  --ce-rag-amber-2: #b98400;
  --ce-rag-red: #d6455a;
  --ce-rag-red-2: #b6323c;
}
.ce-quiz-panel * { box-sizing: border-box; }
.ce-quiz-panel-inner { padding-top: 4px; }

/* The card is the one visible surface -- background, border, shadow and
   a top accent bar echoing the mockup's own .card/.card-top, so the
   panel still reads as a distinct "tool" embedded in the page even
   though it's no longer a floating drawer. */
.ce-quiz-card {
  clear: both;
  position: relative;
  max-width: 820px;
  margin: 18px 0 10px;
  padding: 28px 32px 40px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdfe);
  border: 1px solid var(--ce-border);
  box-shadow: 0 12px 34px rgba(0, 66, 105, .14);
  color: var(--ce-text);
  font-family: proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The surrounding page content on this section is centre-aligned, which
     would otherwise inherit into every heading/paragraph/option in here --
     the mockup this was ported from was always left-aligned. */
  text-align: left;
}
/* Solid, not the navy->purple gradient this started as -- matches the
   IT Essentials entry in the Services mega-menu, which is a flat
   #D5ACF8 (--purple) with no navy in it at all. */
.ce-quiz-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: var(--ce-purple);
}
/* theme.css has `@media (min-width: 1025px) { h1, h2 { font-size: 40px
   !important; line-height: 50px !important; } }` -- a sitewide rule for
   real page headings that also matches this bare h2, used here as a
   component-internal label rather than a page heading. !important
   beats specificity regardless of how targeted a selector is, so
   despite this rule being far more specific than theme.css's bare
   `h1`/`h2`, the site's real heading size was winning outright and
   this was rendering at 40px/50px -- comically large next to the rest
   of the card, and the actual "heading is too large" bug.

   The label ("1. Firewalls") now leads straight into its question on
   one line ("1. Firewalls - Is your business network protected by a
   firewall?"), so h2 is set inline rather than block, matching the
   question's own size/weight instead of the old small-caps divider
   style, with the " - " supplied as generated content so it's never
   part of either element's actual text (JS reads .ce-quiz-q-title's
   textContent for the results report and h2's for the section name --
   see ce-quiz.js -- so keeping the separator out of both means neither
   needs to strip it back out). h3 is inline for the same reason: two
   adjacent inline elements in the same block flow read as one line,
   where two adjacent block elements would each start their own. The
   whole line is --ce-accent-text (the vivid, text-safe purple used for
   headings elsewhere in this component) end to end, on both elements,
   for "the entire line" rather than just the label half. */
.ce-quiz-section { margin-top: 28px; }
.ce-quiz-q-line { margin: 0 0 10px; }
.ce-quiz-section h2 {
  display: inline;
  font-weight: 600;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--ce-accent-text);
}
.ce-quiz-section h2::after { content: " - "; color: var(--ce-accent-text); }

.ce-quiz-question { margin: 20px 0; padding-top: 4px; }
.ce-quiz-q-title { display: inline; font-size: 15px; margin: 0; color: var(--ce-accent-text); font-weight: 600; }
.ce-quiz-options { display: flex; flex-direction: column; gap: 12px; }
.ce-quiz-option {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 8px;
  border: 1px solid var(--ce-border); background: var(--ce-option-bg); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.ce-quiz-option:hover { border-color: rgba(213, 172, 248, .4); background: rgba(213, 172, 248, .06); transform: translateY(-1px); }
.ce-quiz-option:active { transform: translateY(0); }

.ce-quiz-option input {
  appearance: none; width: 19px; height: 19px; border-radius: 50%;
  border: 2px solid rgba(0, 66, 105, .3); background: transparent; flex: none; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  margin: 0;
}
.ce-quiz-option:hover input { border-color: rgba(213, 172, 248, .6); }
.ce-quiz-option input:focus-visible { outline: 3px solid rgba(213, 172, 248, .22); outline-offset: 2px; border-color: var(--ce-accent); }
.ce-quiz-option input:checked {
  border-color: var(--ce-accent);
  background: radial-gradient(circle, var(--ce-accent) 0 44%, transparent 46%);
  box-shadow: 0 0 0 4px rgba(213, 172, 248, .16);
}
.ce-quiz-option.selected {
  border-color: rgba(213, 172, 248, .45);
  background: linear-gradient(180deg, rgba(213, 172, 248, .08), rgba(213, 172, 248, .02));
  box-shadow: 0 0 0 3px rgba(213, 172, 248, .12), 0 4px 16px rgba(213, 172, 248, .1);
}
/* Unselected answer text stays neutral -- same call the rest of the
   site already makes for body copy on themed pages (paragraphs stay
   --text-black regardless of page accent; only headings/labels/active
   states carry the accent colour). It was navy before, an off-brand
   colour bleeding in from the original mockup rather than a
   deliberate neutral, which is what made it read as wrong. Selecting
   an option is what earns the purple -- a deliberate accent pop on the
   one option you've actively chosen, not a wash of purple across every
   answer on the page. */
.ce-quiz-option-content { color: var(--ce-text); font-size: 14px; transition: color .18s ease; }
.ce-quiz-option.selected .ce-quiz-option-content { color: var(--ce-accent-text); }

@keyframes ce-quiz-pulse {
  0% { box-shadow: 0 0 0 0 rgba(213, 172, 248, .45), 0 4px 16px rgba(213, 172, 248, .1); }
  60% { box-shadow: 0 0 0 9px rgba(213, 172, 248, 0), 0 4px 16px rgba(213, 172, 248, .1); }
  100% { box-shadow: 0 0 0 3px rgba(213, 172, 248, .12), 0 4px 16px rgba(213, 172, 248, .1); }
}
.ce-quiz-option.pulse { animation: ce-quiz-pulse .5s ease-out; }

.ce-quiz-form-actions { margin-top: 18px; text-align: center; }

/* Hover/active used to fill navy (--ce-accent-2 / --ce-navy) -- a
   one-off look unlike every other purple button on the site, which
   fills white with a purple ring on hover instead (see .ce-quiz-trigger
   and the site-wide Blue>White pattern in style.css). Matched to that:
   same white fill, purple text/border/ring. border is reserved
   transparent at rest (box-sizing:border-box is already set on every
   .ce-quiz-panel descendant, so this can't nudge the button's size the
   way an unreserved border would). */
.ce-quiz-btn {
  appearance: none; cursor: pointer;
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  /* 44px like every button on the site (Simon, 2026-09-23); the 2px border
     leaves 40px inside, and line-height 40px centres the label in it */
  color: #fff; height: 44px; padding: 0 30px; line-height: 40px; border-radius: 999px;
  border: 2px solid transparent;
  background: var(--ce-accent);
  box-shadow: 0 4px 18px rgba(213, 172, 248, .45);
  transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ce-quiz-btn:hover,
.ce-quiz-btn:active {
  transform: translateY(-2px);
  background: #fff;
  color: var(--ce-accent);
  border-color: var(--ce-accent);
  box-shadow: 0 0 0 1px var(--ce-accent);
}
.ce-quiz-btn:active { transform: translateY(0); }
.ce-quiz-btn:focus-visible { outline: 3px solid rgba(213, 172, 248, .5); outline-offset: 3px; }
/* Same theme.css blanket `button:active, button:focus { background:
   #404040; border-color: #404040; }` leak as .ce-quiz-trigger above: a
   plain click leaves this focused (not hovered) indefinitely, at which
   point that sitewide rule outranks the bare .ce-quiz-btn selector on
   specificity and the button is stuck dark grey instead of its resting
   purple. :not(:hover) so real hover -- higher specificity than this on
   its own -- still always wins. */
.ce-quiz-btn:focus:not(:hover) {
  transform: none;
  background: var(--ce-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(213, 172, 248, .45);
}

.ce-quiz-result { margin-top: 20px; }

.ce-quiz-email-report { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ce-border); text-align: center; }
.ce-quiz-email-report-lead { margin: 0 0 12px; color: var(--ce-muted); font-size: 14px; }
/* The report form is a .wp-contact-form (2026-09-24: Formspark, the site's
   shared submit handler and the Turnstile check), so its fields take the
   contact form's styling from style.css -- same boxes, borders, radius,
   spacing and 480px width. These put back what the light quiz panel needs:
   left-aligned dark labels in place of the contact card's white ones, a
   taller box for the report itself, the quiz's own filled purple pill for
   the button (the contact form's white-on-colour pill would vanish here),
   and error text that can be read on the panel. */
.ce-quiz-email-report-form { margin: 0 auto; }
.ce-quiz-panel .ce-quiz-email-report-wrap { color: var(--ce-text); }
.ce-quiz-panel .ce-quiz-email-report-form { text-align: left; }
.ce-quiz-panel .ce-quiz-email-report-form label { color: var(--ce-text); }
.ce-quiz-panel .ce-quiz-email-report-form textarea { min-height: 160px; color: var(--ce-muted); }
.ce-quiz-panel .ce-quiz-email-report-form button[type="submit"] { background: var(--ce-accent); color: #fff; box-shadow: 0 4px 18px rgba(213, 172, 248, .45); }
.ce-quiz-panel .ce-quiz-email-report-form button[type="submit"]:is(:hover, :focus, :active) { background: #fff; color: var(--ce-accent); box-shadow: inset 0 0 0 2px var(--ce-accent), 0 0 0 1px var(--ce-accent); transform: none; }
.ce-quiz-panel .ce-quiz-email-report .form-error { color: var(--ce-rag-red, #c0392b); }
/* the "Form Submitted" note that replaces the sent form takes the same
   centring the form had (Simon, 2026-09-24: "this isn't centered") */
.ce-quiz-panel .ce-quiz-email-report .form-sent { margin: 0 auto; }
.ce-quiz-email-report-form .ce-quiz-btn-secondary { align-self: center; }
.ce-quiz-btn-secondary {
  background: transparent; color: var(--ce-accent-text); box-shadow: none; border: 1.5px solid rgba(0, 66, 105, .4);
}
.ce-quiz-btn-secondary:hover { box-shadow: 0 4px 16px rgba(0, 66, 105, .12); background: rgba(0, 66, 105, .05); }
.ce-quiz-btn-secondary:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
/* Same theme.css `button:active, button:focus { background: #404040 }`
   leak as .ce-quiz-btn above -- this button is transparent at rest, so
   left unclaimed the leak fills it solid dark grey once clicked. */
.ce-quiz-btn-secondary:focus:not(:hover) { background: transparent; border-color: rgba(0, 66, 105, .4); color: var(--ce-accent-text); }

/* RAG report */
.ce-quiz-report {
  text-align: left; padding: 26px 28px; border-radius: 12px; border: 1px solid var(--ce-border);
  background: linear-gradient(180deg, #ffffff, #fbfdfe);
  box-shadow: 0 10px 34px rgba(0, 66, 105, .14);
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .4s ease, transform .4s ease;
}
.ce-quiz-report.show { opacity: 1; transform: translateY(0) scale(1); }

.ce-quiz-report-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ce-quiz-report-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font-weight: 700; font-size: 12px; letter-spacing: .8px; text-transform: uppercase;
}
.ce-quiz-report-badge::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.ce-quiz-report--green .ce-quiz-report-badge { background: linear-gradient(90deg, var(--ce-rag-green), var(--ce-rag-green-2)); color: #fff; }
.ce-quiz-report--amber .ce-quiz-report-badge { background: linear-gradient(90deg, var(--ce-rag-amber), var(--ce-rag-amber-2)); color: #2e1c02; }
.ce-quiz-report--red .ce-quiz-report-badge { background: linear-gradient(90deg, var(--ce-rag-red), var(--ce-rag-red-2)); color: #fff; }
.ce-quiz-report--green { box-shadow: 0 10px 34px rgba(31, 157, 108, .16); }
.ce-quiz-report--amber { box-shadow: 0 10px 34px rgba(226, 164, 0, .16); }
.ce-quiz-report--red { box-shadow: 0 10px 34px rgba(214, 69, 90, .16); }

.ce-quiz-report-score { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.ce-quiz-report-score-num { font-size: 38px; line-height: 1; }
.ce-quiz-report--green .ce-quiz-report-score-num { color: var(--ce-rag-green); }
.ce-quiz-report--amber .ce-quiz-report-score-num { color: var(--ce-rag-amber); }
.ce-quiz-report--red .ce-quiz-report-score-num { color: var(--ce-rag-red); }
.ce-quiz-report-score-total { color: var(--ce-muted); font-size: 15px; font-weight: 600; }

.ce-quiz-report-message { margin: 16px 0 0; color: var(--ce-text); line-height: 1.6; max-width: 620px; font-size: 14.5px; }

.ce-quiz-report-sections { margin-top: 24px; display: flex; flex-direction: column; gap: 13px; }
.ce-quiz-report-section-block { display: flex; flex-direction: column; }
/* Fixed 90px for the last column (not auto): each row is its own grid,
   sized independently -- a row with a perfect score has no toggle button
   to place there, so an auto track has nothing to size itself against
   and collapses to 0, leaving the bar's 1fr claiming that extra space
   and rendering visibly longer than every other row's bar. Reserving the
   width up front regardless of whether that row happens to have a
   toggle keeps every row's 1fr computed against the same remainder, so
   every bar comes out the same length -- matching the shorter,
   toggle-reserved rows, not stretching to the gap-free ones. 90px fits
   the widest label ("SHOW ME", measured ~80px) with a little to spare. */
.ce-quiz-report-section-row { display: grid; grid-template-columns: 170px 1fr 52px 90px; align-items: center; gap: 14px; font-size: 13px; }
.ce-quiz-report-section-name { color: var(--ce-text); }
.ce-quiz-report-bar { height: 8px; border-radius: 999px; background: var(--ce-purple-light); overflow: hidden; }
.ce-quiz-report-bar-fill { height: 100%; width: 0%; border-radius: 999px; transition: width .9s cubic-bezier(.22, 1, .36, 1); background: linear-gradient(90deg, var(--ce-rag-green), var(--ce-rag-green-2)); }
.ce-quiz-report-section-row.amber .ce-quiz-report-bar-fill { background: linear-gradient(90deg, var(--ce-rag-amber), var(--ce-rag-amber-2)); }
.ce-quiz-report-section-row.red .ce-quiz-report-bar-fill { background: linear-gradient(90deg, var(--ce-rag-red), var(--ce-rag-red-2)); }
.ce-quiz-report-section-score { color: var(--ce-muted); text-align: right; }

.ce-quiz-report-gap-toggle {
  justify-self: end; background: var(--ce-accent); border: 1px solid var(--ce-accent); color: #fff;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.ce-quiz-report-gap-toggle:hover { background: #fff; border-color: var(--ce-accent); color: var(--ce-accent-text); }
.ce-quiz-report-gap-toggle:focus-visible { outline: 3px solid rgba(213, 172, 248, .25); outline-offset: 2px; }
/* Same theme.css `button:active, button:focus { background: #404040 }`
   leak as .ce-quiz-btn above -- collapsing this back to aria-expanded
   false still leaves it :focus (a plain click doesn't trigger
   :focus-visible), and the single-class selector above can't outrank
   that blanket rule's specificity on its own. */
.ce-quiz-report-gap-toggle:focus:not(:hover) { background: var(--ce-accent); border-color: var(--ce-accent); color: #fff; }
/* Deliberately no separate [aria-expanded="true"] colour: the label
   text ("Show me" / "Hide") already carries that state. Giving expanded
   its own permanent white fill meant clicking the button then clicking
   away -- a genuine blur, not just losing :hover -- left it stuck white
   with nothing above to put it back, since :focus:not(:hover) only
   holds while still focused. Resting colour now follows hover alone,
   the same as every other button here, expanded or not. */

.ce-quiz-report-section-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ce-quiz-report-section-detail.expanded { grid-template-rows: 1fr; }
.ce-quiz-report-section-detail-inner { overflow: hidden; }

.ce-quiz-report-gap-list { list-style: none; margin: 12px 0 2px; padding: 12px 0 0; border-top: 1px dashed rgba(0, 66, 105, .18); display: flex; flex-direction: column; gap: 8px; }
.ce-quiz-report-gap { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ce-quiz-report-gap-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ce-quiz-report-gap-q { color: var(--ce-text); }
.ce-quiz-report-gap-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.ce-quiz-report-gap.gap-yes .ce-quiz-report-gap-tag { background: rgba(31, 157, 108, .14); color: var(--ce-rag-green); }
.ce-quiz-report-gap.gap-no .ce-quiz-report-gap-tag,
.ce-quiz-report-gap.gap-notsure .ce-quiz-report-gap-tag { background: rgba(214, 69, 90, .14); color: var(--ce-rag-red); }
.ce-quiz-report-gap.gap-maybe .ce-quiz-report-gap-tag { background: rgba(226, 164, 0, .16); color: var(--ce-rag-amber); }
.ce-quiz-report-gap.gap-unanswered .ce-quiz-report-gap-tag { background: rgba(0, 66, 105, .08); color: var(--ce-muted); }

.ce-quiz-report-gap-rec {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ce-muted);
  padding: 8px 10px; border-radius: 6px; background: rgba(213, 172, 248, .06); border-left: 2px solid var(--ce-accent);
}
.ce-quiz-report-incomplete { margin-top: 18px; font-size: 13px; color: var(--ce-rag-amber); font-weight: 600; }

/* Firework celebration for a perfect score */
.ce-quiz-firework-overlay { position: fixed; inset: 0; z-index: 10000; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.ce-quiz-firework-overlay.active { opacity: 1; pointer-events: auto; cursor: pointer; }
.ce-quiz-firework-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ce-quiz-firework-banner {
  position: absolute; top: 45%; left: 50%; max-width: 90vw;
  transform: translate(-50%, -50%) scale(.85);
  font-size: clamp(20px, 4vw, 36px); font-weight: 700; letter-spacing: .2px; text-align: center; color: #fff;
  text-shadow: 0 0 18px rgba(213, 172, 248, .85), 0 0 40px rgba(0, 66, 105, .6), 0 4px 24px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.ce-quiz-firework-overlay.active .ce-quiz-firework-banner { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 767px) {
  .ce-quiz-card { padding: 20px 18px 30px; }
  .ce-quiz-report { padding: 20px; }
  .ce-quiz-report-section-row { grid-template-columns: 1fr; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 66, 105, .1); }
  .ce-quiz-report-section-score { text-align: left; }
  .ce-quiz-report-gap-toggle { justify-self: start; margin-top: 2px; }
  .ce-quiz-report-gap-top { flex-direction: column; gap: 4px; }
  .ce-quiz-trigger { margin-left: 0; }
}