/* ==========================================================================
   Scaife Guard Card Exam - module stylesheet
   Loads AFTER Bootstrap 3.4.1 (which may or may not be present). Everything
   here is scoped under .sca-exam so it cannot bleed into the DNN skin or
   other modules, and never fights Bootstrap classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand colour tokens
   Change --sca-green here (and the hand-picked shades below) to re-brand
   the whole module in a single, few-line change.
   -------------------------------------------------------------------------- */
.sca-exam {
  --sca-green: #3c7668;
  --sca-green-dark: #2a544a;
  --sca-green-light: #5c9788;
  --sca-green-bg: #eaf3f1;
  --sca-green-border: #bcd8d1;

  --sca-red: #b3261e;
  --sca-red-bg: #fbeceb;
  --sca-red-border: #e3a9a5;

  --sca-text: #24312e;
  --sca-text-muted: #647570;
  --sca-border: #d7dedb;

  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--sca-text);
}

/* Scoped box-sizing reset - never touches elements outside the module. */
.sca-exam * {
  box-sizing: border-box;
}

/* The [hidden] attribute must actually hide things.
   The browser default is [hidden] { display: none } from the UA stylesheet, which ANY
   author rule setting `display` outranks. Several classes below set display: block, so
   without this rule an element hidden in JS via el.hidden = true stays on screen - which
   showed up as "Choose an answer for this question" sitting under every answered
   question. Specificity here (0,1,1) beats the single-class rules that caused it. */
.sca-exam [hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Layout / screens
   -------------------------------------------------------------------------- */
.sca-exam__screen {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Wide screens: exam and result

   The exam and the result/payment screens run at about two thirds of the
   viewport. The intro, grading and receipt screens keep the narrower measure -
   they are short blocks of prose and a long line length reads worse.

   Written as two declarations on purpose. A browser without CSS max() ignores
   the second and keeps the first, so the floor is the width these screens had
   before; a browser with it takes the larger of the two. That means this can
   only ever make them wider, never narrower, whatever the viewport.

   The pane still governs: if DNN gives the module less room than this, the
   element simply fills the pane. max-width is a ceiling, not a demand.
   -------------------------------------------------------------------------- */
.sca-exam__screen[data-sca-screen="exam"] {
  max-width: 720px;
  max-width: max(66vw, 720px);
}


/* --------------------------------------------------------------------------
   The study screen is the widest thing here, and for a different reason.

   Every other screen is sized for READING PROSE, where a long line length reads
   worse and 720px is generous. This one displays a scanned A4 manual at whatever
   size the page can afford: two pages side by side at a third of the width are
   technically legible and practically useless, which is what the first version
   did inside the narrower measure.

   So the ceiling goes right up. Same two-declaration pattern as above - a browser
   without max() keeps the first line, so this can only ever widen, never narrow -
   and the pane still governs, because max-width is a ceiling and not a demand.
   -------------------------------------------------------------------------- */
.sca-exam__screen[data-sca-screen="manual"] {
  /* No ceiling at all: the manual takes whatever the pane gives it.
     Previously capped at 94vw, which was reduced once for tidiness and then
     asked for back - the client would rather the material were unmistakably
     legible than neatly proportioned. The pane still governs, so dropping this
     module into a narrow pane still produces a book that fits the pane. */
  max-width: none;
}

/* The heading and the instruction line are still prose, and still want a
   readable measure. Only the book takes the full width.

   CENTRED over that full width. The 720px cap is what makes the auto margins
   necessary: without them the block simply sits at the left edge of a stage that
   can now be two thousand pixels wide, which is what it was doing. */
.sca-exam__screen[data-sca-screen="manual"] .sca-exam__title,
.sca-exam__screen[data-sca-screen="manual"] .sca-exam__lead,
.sca-exam__screen[data-sca-screen="manual"] .sca-exam__formerror {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.sca-exam__screen[data-sca-screen="manual"] .sca-exam__title,
.sca-exam__screen[data-sca-screen="manual"] .sca-exam__lead {
  text-align: center;
}

.sca-exam__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--sca-text);
}

.sca-exam__lead {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 16px;
  color: var(--sca-text);
}

.sca-exam__note {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--sca-text-muted);
  background: var(--sca-green-bg);
  border: 1px solid var(--sca-green-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .sca-exam__screen {
    padding: 32px;
  }

  .sca-exam__title {
    font-size: 1.875rem;
  }
}

/* --------------------------------------------------------------------------
   Diagnostics readout (scaffold dl)
   -------------------------------------------------------------------------- */
.sca-exam__diag {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 4px 12px;
  margin: 0 0 16px;
  padding: 12px;
  background: #f7f8f8;
  border: 1px solid var(--sca-border);
  border-radius: 4px;
  font-size: 0.8125rem;
}

.sca-exam__diag dt {
  color: var(--sca-text-muted);
  font-weight: 600;
}

.sca-exam__diag dd {
  margin: 0;
  font-family: "Consolas", "Courier New", monospace;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.sca-exam__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sca-exam__btn--primary {
  background: var(--sca-green);
  border-color: var(--sca-green);
  color: #ffffff;
}

.sca-exam__btn--primary:hover {
  background: var(--sca-green-dark);
  border-color: var(--sca-green-dark);
}

.sca-exam__btn--secondary {
  background: #ffffff;
  border-color: var(--sca-border);
  color: var(--sca-text);
}

.sca-exam__btn--secondary:hover {
  background: var(--sca-green-bg);
  border-color: var(--sca-green-border);
}

/* --------------------------------------------------------------------------
   Progress bar / counter
   -------------------------------------------------------------------------- */
.sca-exam__progress {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  border-bottom: 1px solid var(--sca-border);
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sca-text-muted);
}

/*
   Hidden at the client's request, using the standard visually-hidden pattern
   rather than display:none. The element keeps its aria-live region, so the
   answered count is still announced to a screen reader; display:none would take
   it out of the accessibility tree and remove that with it.

   MUST stay after the base rule above. Both are single-class selectors, so the
   later one wins - placed before it, the base rule's padding survived and, with
   box-sizing:border-box, inflated the "1px" box back to 24x21 and left the bar
   visible. Measured, not assumed.
*/
.sca-exam__progress--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */
.sca-exam__question {
  border: 1px solid var(--sca-border);
  border-left: 4px solid var(--sca-green);
  border-radius: 4px;
  padding: 16px;
  margin: 0 0 16px;
}

.sca-exam__question--unanswered {
  border-left-color: var(--sca-red);
  background: var(--sca-red-bg);
}

.sca-exam__question-number {
  display: inline-block;
  font-weight: 700;
  color: var(--sca-green);
  margin-right: 6px;
}

.sca-exam__question-text {
  display: inline;
  font-size: 1rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Choices - two per row

   The exam screen is wide enough for two, and stacking four short options in a
   single column left most of the line empty. Odd counts fall out correctly on
   their own: three options give a, b then c on the next row; a true/false pair
   sits on one row.

   Gutters are padding on the list items with a negative margin on the list,
   rather than `gap`. Flexbox gap is well supported now, but a browser that
   lacks it drops the property silently and the choices would butt together on
   the one screen a candidate has paid to sit. Padding cannot fail that way.
   -------------------------------------------------------------------------- */
.sca-exam__choices {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 12px -4px 0;
  padding: 0;
}

.sca-exam__choices > li {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 4px;
  margin: 0 0 8px;
  /* Flex so the label stretches to the tallest choice in the row. Without it a
     two-line option leaves its neighbour a short box on the same row. */
  display: flex;
}

@media (max-width: 640px) {
  /* One per row on a phone. Half of a narrow screen is not enough for the
     longer options, several of which run to a full sentence. */
  .sca-exam__choices > li {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.sca-exam__choice {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  margin: 0;
  border: 1px solid var(--sca-border);
  border-radius: 4px;
  cursor: pointer;
}

.sca-exam__choice:hover {
  background: var(--sca-green-bg);
  border-color: var(--sca-green-border);
}

.sca-exam__choice input[type="radio"] {
  margin: 0 10px 0 0;
  flex-shrink: 0;
}

.sca-exam__choice-letter {
  font-weight: 700;
  color: var(--sca-green);
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Validation
   -------------------------------------------------------------------------- */
.sca-exam__error {
  display: block;
  font-size: 0.8125rem;
  color: var(--sca-red);
  margin-top: 4px;
}

/* Supporting text under a field, e.g. "your certificate will be emailed to this
   address". Muted so it reads as guidance rather than as an error. */
.sca-exam__hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--sca-text-muted);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Focus
   Answers are selected with radios inside labels, so keyboard users need a
   visible focus ring on the row, not just the (small) native radio.
   -------------------------------------------------------------------------- */
.sca-exam__btn:focus-visible,
.sca-exam__choice:focus-within {
  outline: 2px solid var(--sca-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sca-exam__btn {
    transition: none;
  }

  .sca-exam__input {
    transition: none;
  }

  .sca-exam__progress-fill {
    transition: none;
  }

  .sca-exam__spinner {
    animation: none;
    border-color: var(--sca-green);
    border-top-color: var(--sca-green);
  }
}

/* Choices deliberately stay in a single column at every width. Options run
   2 to 5 per question and vary in length; a two-column grid makes the a/b/c/d
   reading order ambiguous, which is not a thing to get wrong on an exam. */

/* --------------------------------------------------------------------------
   Intro copy (screen 1)
   Operator-authored HTML from the database, rendered as-is. Rules target
   descendants only so nothing here leaks onto elements outside .sca-exam__intro.
   -------------------------------------------------------------------------- */
.sca-exam__intro {
  max-width: 60ch;
  margin: 0 0 24px;
}

.sca-exam__intro p,
.sca-exam__intro ul,
.sca-exam__intro ol {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--sca-text);
}

.sca-exam__intro h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--sca-text);
}

.sca-exam__intro ul,
.sca-exam__intro ol {
  padding-left: 1.25em;
}

.sca-exam__intro li {
  margin: 0 0 6px;
}

.sca-exam__intro strong {
  font-weight: 700;
}

.sca-exam__intro em {
  font-style: italic;
}

.sca-exam__intro a {
  color: var(--sca-green);
}

.sca-exam__intro a:hover {
  color: var(--sca-green-dark);
}

/* --------------------------------------------------------------------------
   Identity form (screen 1)
   -------------------------------------------------------------------------- */
.sca-exam__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 16px;
}

.sca-exam__field {
  display: flex;
  flex-direction: column;
}

.sca-exam__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--sca-text);
}

.sca-exam__label--required::after {
  content: " *";
  color: var(--sca-red);
}

.sca-exam__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  /* 16px minimum keeps iOS Safari from auto-zooming the viewport on focus. */
  font-size: 16px;
  font-family: inherit;
  color: var(--sca-text);
  background: #ffffff;
  border: 1px solid var(--sca-border);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sca-exam__input:focus {
  outline: none;
  border-color: var(--sca-green);
  box-shadow: 0 0 0 3px var(--sca-green-bg);
}

.sca-exam__input--invalid {
  border-color: var(--sca-red);
  background: var(--sca-red-bg);
}

.sca-exam__actions {
  display: flex;
}

/* Centred against the screen, not against a column. On narrow viewports the
   rule below stretches the button to the full width anyway, which is centred by
   definition, so this only takes effect from 768px up. */
.sca-exam__actions--center {
  justify-content: center;
}

/* The primary call to action. Deliberately bigger than a default button: these
   are the two moments in the flow where somebody has to commit to something. */
.sca-exam__btn--large {
  min-height: 56px;
  padding: 14px 44px;
  font-size: 1.125rem;
  border-radius: 6px;
}

.sca-exam__actions .sca-exam__btn {
  width: 100%;
}

@media (min-width: 768px) {
  .sca-exam__actions .sca-exam__btn {
    width: auto;
  }
}

.sca-exam__formerror {
  color: var(--sca-red);
  background: var(--sca-red-bg);
  border: 1px solid var(--sca-red-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.sca-exam__busy {
  opacity: 0.65;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   Retry marking

   A question the last submission got wrong. Amber, not red: they have not made
   an error here and now, they are being told where to look. Red is reserved for
   validation - "you left this blank" - which is a different message.
   -------------------------------------------------------------------------- */
.sca-exam__question--wrong {
  border-left: 4px solid var(--sca-amber, #b8860b);
  background: var(--sca-amber-bg, #fdf6e3);
  padding-left: 12px;
}

.sca-exam__question-wrong {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--sca-amber-text, #8a6100);
}

/* A button that reads as a link. It has to be a <button> - everything here sits
   inside DNN's page-wide form, where an <a href="#"> would be fine but a button
   keeps the keyboard semantics right for something that changes screen. */
.sca-exam__linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--sca-link, #2a544a);
  text-decoration: underline;
  cursor: pointer;
}

.sca-exam__back-to-manual {
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Training manual (flip book)

   StPageFlip positions its own pages absolutely and sizes them from the options
   it was given, so there is very little to style here - mostly the stage it
   sits in and the controls beneath it. The canvas is sized in JavaScript at the
   device's pixel density; width:100% here only makes it scale down to its box.
   -------------------------------------------------------------------------- */
.sca-exam__manual {
  margin: 0 0 20px;
}

/*
   NOT display:flex, and that is load-bearing.
   
   StPageFlip sets min-width on the book element it is given: with usePortrait:true it
   sets ONE page width, not two. As a flex item the book then sized itself to exactly
   that minimum instead of filling the stage - so the library measured a block one page
   wide, concluded a spread would not fit, and built the manual in PORTRAIT. One page,
   every time, however wide the stage was made.

   That is why widening the container achieved nothing on its own. As a plain block the
   book fills the stage, the library measures the real width, and it lays out a spread.
   The book is still centred - by margin:0 auto below, and by the library's own offset
   within it.
*/
.sca-exam__manual-stage {
  position: relative;
  min-height: 240px;
}

/* Was centred by the stage's flex alignment, which has gone. */
.sca-exam__manual-loading {
  text-align: center;
}

.sca-exam__manual-loading {
  padding: 40px 0;
  color: var(--sca-muted, #647570);
}

/* The book sizes ITSELF now.

   It used to need width:100% because StPageFlip's size:'stretch' measures the
   parent. It is now sized 'fixed' - from a calculation that constrains height as
   well as width, so the whole spread fits on screen - and forcing a width here
   would fight that. The stage centres it. */

.sca-exam__manual-page {
  background: #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.sca-exam__manual-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.sca-exam__manual-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px 0 0;
  flex-wrap: wrap;
}

.sca-exam__manual-position {
  min-width: 9em;
  text-align: center;
  color: var(--sca-muted, #647570);
}

.sca-exam__manual-plain {
  text-align: center;
  margin: 12px 0 0;
  font-size: 0.95em;
}

/* Narrow screens get one page rather than a spread; StPageFlip switches itself
   via usePortrait, so this only needs to stop the stage squeezing it. */
@media (max-width: 819px) {
  .sca-exam__manual-stage {
    min-height: 320px;
  }

  .sca-exam__manual-controls {
    gap: 10px;
  }
}

/* --------------------------------------------------------------------------
   Applicant gate

   Informational, not an error. A candidate who is not an applicant has done
   nothing wrong, and dressing this in the red error styling would tell them
   they had. It reads as a notice with somewhere to go.
   -------------------------------------------------------------------------- */
.sca-exam__gate {
  background: var(--sca-amber-bg, #fdf6e3);
  border: 1px solid var(--sca-amber-border, #e6d9a8);
  border-left: 4px solid var(--sca-amber, #b8860b);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 16px;
}

.sca-exam__gate-message {
  margin: 0;
  line-height: 1.5;
}

.sca-exam__gate-actions {
  margin: 12px 0 0;
}

/* The skin styles bare a:link at (0,1,1), which beats a single class - so the
   colours are restated with !important, the same as every other link-styled
   control in this module. */
.sca-exam__gate-actions .sca-exam__btn,
.sca-exam__gate-actions .sca-exam__btn:link,
.sca-exam__gate-actions .sca-exam__btn:visited {
  display: inline-block;
  text-decoration: none !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Exam screen (screen 2)
   -------------------------------------------------------------------------- */
.sca-exam__questions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sca-exam__question-head {
  margin: 0 0 12px;
  line-height: 1.5;
}

.sca-exam__choice-text {
  flex: 1;
  line-height: 1.4;
}

.sca-exam__choice--selected {
  border-color: var(--sca-green);
  background: var(--sca-green-bg);
}

.sca-exam__progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--sca-border);
  overflow: hidden;
}

.sca-exam__progress-fill {
  height: 100%;
  width: 0;
  background: var(--sca-green);
  transition: width 0.2s ease;
}

.sca-exam__progress-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sca-text-muted);
}

.sca-exam__question-anchor {
  /* Was 80px, to clear the sticky progress bar. That bar is now hidden, so the
     same offset would leave a band of dead space above the question we jumped
     to. Restore 80px if .sca-exam__progress--hidden is ever removed. */
  scroll-margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Grading and result (screens 3 and 4)
   -------------------------------------------------------------------------- */
.sca-exam__grading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0;
  text-align: center;
}

.sca-exam__spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 4px solid var(--sca-border);
  border-top-color: var(--sca-green);
  border-radius: 50%;
  animation: sca-exam-spin 0.9s linear infinite;
}

@keyframes sca-exam-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.sca-exam__grading-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sca-text-muted);
}

.sca-exam__result-headline {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.sca-exam__result--passed .sca-exam__result-headline {
  color: var(--sca-green);
}

.sca-exam__result--failed .sca-exam__result-headline {
  color: var(--sca-text);
}

.sca-exam__result-body p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 12px;
}

.sca-exam__result-banner {
  padding: 12px 16px;
  border-radius: 4px;
  font-weight: 600;
}

.sca-exam__result-banner--passed {
  background: var(--sca-green-bg);
  border: 1px solid var(--sca-green-border);
  color: var(--sca-green-dark);
}

.sca-exam__result-banner--failed {
  background: var(--sca-red-bg);
  border: 1px solid var(--sca-red-border);
  color: var(--sca-red);
}

.sca-exam__price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sca-text);
  margin: 0 0 4px;
}

.sca-exam__price-caption {
  font-size: 0.8125rem;
  color: var(--sca-text-muted);
}

/* The purchase panel is now two boxes in two columns: the price and terms sit
   in the LEFT column under the result copy, and the right column holds only
   Stripe's form. Both keep the same card treatment so they read as one thing
   said in two places. */
.sca-exam__purchase {
  border: 1px solid var(--sca-border);
  border-radius: 4px;
  padding: 20px;
  background: #ffffff;
}

/* Separates the price card from the result copy it now sits beneath.
   No width cap: the column is half the screen and the screen itself is capped,
   so the column already provides the measure. Capping the card as well would
   make it narrower than the copy above it and the two would not line up. */
.sca-exam__purchase--copy {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Reading measure on the wide screens

   Making the container wide is not the same as making the TEXT wide. Body text
   set past about 100 characters a line is hard to track back from the end of
   one line to the start of the next.

   The two screens solve it differently, because their shapes differ:

     Result - the screen has an absolute ceiling and splits into two equal
              columns, so each column is about 815px at most. That IS the
              measure; nothing inside needs its own cap, and adding one would
              only stop the boxes lining up with each other.

     Exam   - one column, and no ceiling, so the question text is capped here.
              The choices below it are already in two columns and so are about
              half the screen each, which needs no further limit.

   Same treatment .sca-exam__intro has had all along.
   -------------------------------------------------------------------------- */
.sca-exam__question-head {
  max-width: 90ch;
}

.sca-exam__terms {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sca-text-muted);
  margin: 12px 0;
}

.sca-exam__terms a {
  color: var(--sca-green);
}

.sca-exam__checkout-slot {
  min-height: 250px;
  /* No top margin: Stripe's form is now the only thing in its box, so the box's
     own padding is the whole of the spacing above it. It used to follow the
     terms copy inside one panel and needed separating from it. */
  margin-top: 0;
}

@media (min-width: 768px) {
  .sca-exam__result-headline {
    font-size: 1.875rem;
  }
}

/* Two EQUAL columns, and only once there is room for both.

   The split used to start at 768px with the right-hand track fixed at 380px.
   Equal columns at that width would give each side about 350px - LESS than
   Stripe's form had before, which is the opposite of the point. So the split
   now waits until the screen can give both columns at least 380px:

       2 x 380 + 24 gap + 64 padding = 848px, rounded to a 900px breakpoint.

   Below that the two stack, and the payment form gets the full width - better
   than half of a narrow screen.

   The class itself only exists on a PASSED result. A failed attempt renders no
   second column at all (the purchase panel must not exist - see the template in
   the view), so there is never an empty track squeezing the copy.

   minmax(0, 1fr) rather than a bare 1fr: a 1fr track has an automatic minimum of
   min-content, so one long unbroken string - an email address, a Stripe id -
   would push its column past its share and break the even split. */
@media (min-width: 900px) {
  .sca-exam__result--passed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Receipt (screen 5)
   -------------------------------------------------------------------------- */
.sca-exam__receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sca-border);
}

.sca-exam__receipt-row:last-of-type {
  border-bottom: none;
}

.sca-exam__receipt-label {
  font-size: 0.8125rem;
  color: var(--sca-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.sca-exam__receipt-value {
  font-size: 0.9375rem;
  color: var(--sca-text);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.sca-exam__download {
  text-decoration: none;
  width: 100%;
  margin-top: 20px;
}

/* The download button is an <a> styled as a button, which means the DNN skin's link
   colours apply to it. Observed in testing: the skin's `a:link` rule (specificity 0,1,1)
   outranked a plain `.sca-exam__download` (0,1,0), so the label rendered green-on-green
   and only became readable on hover — where our two-class rule happened to win.

   Every link state is therefore listed explicitly and at high specificity. `!important`
   is the ONE exception to this file's no-!important rule: skins commonly style links
   through ID selectors (`#dnn_ContentPane a`), which beat any number of classes, and an
   unreadable button on the screen where somebody has just paid is not a thing to leave to
   a specificity race against a stylesheet we do not control. */
.sca-exam a.sca-exam__download,
.sca-exam a.sca-exam__download:link,
.sca-exam a.sca-exam__download:visited,
.sca-exam a.sca-exam__download:hover,
.sca-exam a.sca-exam__download:focus,
.sca-exam a.sca-exam__download:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Keep the green background through every state too, for the same reason. */
.sca-exam a.sca-exam__download,
.sca-exam a.sca-exam__download:link,
.sca-exam a.sca-exam__download:visited {
  background: var(--sca-green);
  border-color: var(--sca-green);
}

.sca-exam a.sca-exam__download:hover,
.sca-exam a.sca-exam__download:focus,
.sca-exam a.sca-exam__download:active {
  background: var(--sca-green-dark);
  border-color: var(--sca-green-dark);
}

/* --------------------------------------------------------------------------
   Result screen width

   The result screen is the one that has to hold two columns at once: the
   outcome copy on the left and the price, terms and payment form on the right.
   At the 720px used by the other screens the copy column ends up around 350px,
   which is too narrow to read comfortably and leaves Stripe's embedded checkout
   cramped.

   Three numbers, and each is doing a job:

     72vw    - the width itself. Wider than the exam screen because this one
               carries two columns side by side, and Stripe's form was cramped.
     1040px  - the floor, so the screen never ends up narrower than it was.
     1900px  - a CEILING, which the exam screen does not have. With the columns
               now equal, an unbounded width gives each of them half of an
               ultrawide monitor, and body text at that measure runs past 150
               characters a line.

   The ceiling is set so it does NOT bind on an ordinary large monitor - at
   2560px wide, 72vw is 1843 and the screen gets all of it - and only starts
   limiting things beyond that. It holds each column to about 940px at worst.

   The plain declaration first is what a browser without CSS min()/max() keeps.
   -------------------------------------------------------------------------- */
.sca-exam__screen[data-sca-screen="result"] {
  max-width: 936px;
  max-width: min(max(72vw, 1040px), 1900px);
}

/* ==========================================================================
   SCREEN 1 - the client's intro design.

   EVERY rule in this block is scoped to [data-sca-screen="intro"], and that is
   not decoration. The mockup restyles class names this module uses on other
   screens too - .sca-exam__title appears on the manual and exam screens,
   .sca-exam__btn and .sca-exam__btn--primary are built by result.js, and
   .sca-exam__actions is on three screens. Lifting the mockup's rules in
   unscoped would have quietly restyled all of them.

   The mockup's own page background (a gradient on <body>) is deliberately NOT
   reproduced: the module is a pane on somebody else's page and does not get to
   paint the page. The card carries its own shadow instead, which reads
   correctly on the light pane the skin provides.
   ========================================================================== */
.sca-exam__screen[data-sca-screen="intro"] {
  --sca-i-deep: #28594e;
  --sca-i-mid: #3c7668;
  --sca-i-sky: #dcebe7;
  --sca-i-ink: #172638;
  --sca-i-muted: #5d6b7b;

  /* The panels carry their own padding, so the screen itself has none. */
  padding: 0;
  max-width: 1180px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  border: 1px solid rgba(60, 118, 104, 0.12);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(40, 89, 78, 0.14);
}

/* -------------------------------------------------------- the dark overview */
.sca-exam__overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(42px, 5vw, 70px);
  color: #ffffff;
  background: linear-gradient(145deg, var(--sca-i-deep), var(--sca-i-mid) 64%, #4d887a);
}

/* The two faint rings in the corners. Behind the content via z-index, and
   pointer-events are irrelevant because they are pseudo-elements. */
.sca-exam__overview::before,
.sca-exam__overview::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sca-exam__overview::before { width: 480px; height: 480px; right: -270px; top: -210px; }
.sca-exam__overview::after  { width: 320px; height: 320px; left: -220px; bottom: -210px; }

.sca-exam__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 23px;
  color: #d4e7e1;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sca-exam__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a9d0c6;
  box-shadow: 0 0 0 5px rgba(169, 208, 198, 0.14);
}

/* Overrides the shared .sca-exam__title, which is 1.5rem and dark. */
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__title {
  max-width: 650px;
  margin: 0;
  color: #ffffff;
  font-size: 2.15rem;
  font-size: clamp(2.15rem, 4.3vw, 3.65rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__intro {
  max-width: 600px;
  margin: 27px 0 0;
  color: #e1eeea;
  font-size: 1.06rem;
}

/* Operator-authored IntroHtml lands in here, so the children are styled rather
   than assuming a single <p>. */
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__intro p,
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__intro ul,
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__intro ol {
  margin: 0 0 12px;
  color: inherit;
  font-size: inherit;
  line-height: 1.55;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__intro > :last-child {
  margin-bottom: 0;
}

.sca-exam__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 34px 0 0;
}

.sca-exam__fact {
  padding: 17px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.065);
}

.sca-exam__fact strong {
  display: block;
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 1.28rem;
  line-height: 1.2;
}

.sca-exam__fact span {
  color: #d2e5df;
  font-size: 0.81rem;
}

.sca-exam__process {
  margin-top: 37px;
  padding-top: 31px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sca-exam__process-title {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sca-exam__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sca-exam__step {
  position: relative;
  padding-top: 31px;
  color: #d2e5df;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* The number comes from the markup's data-step, so the list stays a real <ol>
   with real text and the counter cannot drift out of step with it. */
.sca-exam__step::before {
  content: attr(data-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 800;
}

.sca-exam__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 30px;
  right: 4px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* ----------------------------------------------------------- the form panel */
.sca-exam__form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 5vw, 66px);
  background: #ffffff;
}

.sca-exam__form-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 18px;
  color: var(--sca-i-mid);
  background: var(--sca-i-sky);
}

.sca-exam__form-heading {
  margin: 0;
  color: var(--sca-i-ink);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.sca-exam__form-copy {
  margin: 8px 0 28px;
  color: var(--sca-i-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__form {
  display: grid;
  gap: 19px;
  margin: 0;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__field {
  display: grid;
  gap: 7px;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__label {
  color: #29394a;
  font-size: 0.87rem;
  font-weight: 700;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #cad5df;
  border-radius: 10px;
  color: var(--sca-i-ink);
  background: #ffffff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__input:hover {
  border-color: #99adbe;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__input:focus {
  border-color: var(--sca-i-mid);
  box-shadow: 0 0 0 4px rgba(60, 118, 104, 0.14);
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__hint,
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__error {
  font-size: 0.79rem;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__actions {
  display: block;
  margin-top: 8px;
}

/* Full width inside the panel, which is the mockup's shape - not the centred
   pill used on the exam screen. */
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__actions .sca-exam__btn {
  width: 100%;
  min-height: 52px;
  padding: 13px 24px;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 9px 22px rgba(40, 89, 78, 0.22);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.sca-exam__screen[data-sca-screen="intro"] .sca-exam__actions .sca-exam__btn:hover {
  transform: translateY(-1px);
  background: var(--sca-i-deep);
  box-shadow: 0 12px 25px rgba(40, 89, 78, 0.28);
}

/* The arrow is scoped to this one button rather than to .sca-exam__btn--primary,
   which would also have put an arrow on the gate link beneath it, on "Begin
   Test" on the manual screen, and on the result screen's buttons. */
.sca-exam__screen[data-sca-screen="intro"] [data-sca-begin]::after {
  content: "\2192";
  /* margin, not leading spaces inside content(). The label sits on its own line
     in the view, so surrounding whitespace collapses and the mockup two spaces
     rendered as none - the arrow came out flush against the text. A margin
     cannot be collapsed away. */
  margin-left: 10px;
}

.sca-exam__privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 17px 0 0;
  color: #718090;
  font-size: 0.76rem;
  line-height: 1.45;
}

.sca-exam__privacy svg {
  flex: none;
  margin-top: 2px;
}

/* The gate keeps its amber notice styling from further down this file. The
   mockup styles it red, the same as the form error, but it is not an error -
   it is a notice with a primary button inside it, and a green button on a red
   panel reads as a warning the candidate has done something wrong. */
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__formerror,
.sca-exam__screen[data-sca-screen="intro"] .sca-exam__gate {
  margin-bottom: 18px;
}

/* ------------------------------------------------------------- narrow */
@media (max-width: 880px) {
  .sca-exam__screen[data-sca-screen="intro"] {
    grid-template-columns: 1fr;
  }

  .sca-exam__overview,
  .sca-exam__form-panel {
    padding: 40px;
  }

  .sca-exam__screen[data-sca-screen="intro"] .sca-exam__title {
    max-width: 720px;
    font-size: clamp(2rem, 8vw, 3.2rem);
  }
}

@media (max-width: 560px) {
  .sca-exam__screen[data-sca-screen="intro"] {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .sca-exam__overview,
  .sca-exam__form-panel {
    padding: 34px 24px;
  }

  /* Two up, with the last one spanning, rather than three columns of numbers
     too narrow to read. */
  .sca-exam__facts {
    grid-template-columns: 1fr 1fr;
  }

  .sca-exam__fact:last-child {
    grid-column: 1 / -1;
  }

  .sca-exam__steps {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }

  /* The connecting line only makes sense on a single row. */
  .sca-exam__step::after {
    display: none;
  }
}

/* ==========================================================================
   The manual reader: fullscreen and zoom.

   Every selector below is inside the module's own block scope, so nothing here
   can reach DNN content outside .sca-exam.
   ========================================================================== */

/*
   In the page the reader is just a container - it imposes no height, because the
   book is sized by width and is meant to be taller than the window. In fullscreen
   it becomes the whole viewport and takes over the sizing entirely.
*/
.sca-exam__manual-reader {
  position: relative;
}

/*
   Horizontal overflow scrolls INSIDE the stage.

   Zooming past the fitted size makes the book wider than the stage, and without
   this the page itself would gain a horizontal scrollbar - which is the DNN page
   scrolling sideways, not the reader. Vertical is left alone in page mode: the
   book is deliberately taller than the window and the page scroll is how you read
   it.
*/
.sca-exam__manual-stage {
  overflow-x: auto;
  overflow-y: hidden;
}

/*
   The book must be free to be wider than the stage when zoomed, so no max-width.
   Its width is set explicitly from script - see setBookWidth() - which is also
   what tells StPageFlip whether a spread fits.
*/
.sca-exam__manual-book {
  margin: 0 auto;
}

/* ------------------------------------------------------------- the toolbar */
.sca-exam__manual-controls {
  justify-content: space-between;
  gap: 10px 18px;
}

.sca-exam__manual-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Compact, so seven controls fit on one line on a laptop. */
.sca-exam__manual-ctl {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.9rem;
  border: 1px solid var(--sca-border, #d4ddda);
  background: #ffffff;
  color: var(--sca-text, #22302c);
  border-radius: 6px;
}

.sca-exam__manual-ctl:hover:not(:disabled) {
  border-color: var(--sca-green, #3c7668);
  color: var(--sca-green, #3c7668);
}

.sca-exam__manual-ctl:disabled {
  opacity: 0.45;
  cursor: default;
}

/* A visible focus ring on every control, including in fullscreen where there is
   no surrounding page to give context. */
.sca-exam__manual-ctl:focus-visible {
  outline: 2px solid var(--sca-green, #3c7668);
  outline-offset: 2px;
}

.sca-exam__manual-zoom {
  min-width: 4em;
  text-align: center;
  color: var(--sca-muted, #647570);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- fullscreen */

/*
   The reader becomes the viewport, and NOTHING inside it is allowed to push the
   document: it is a flex column of stage-then-toolbar, the stage takes the slack,
   and both axes scroll inside the stage rather than outside it.

   dvh, not vh: on a phone vh is the tallest the viewport ever gets, which leaves
   the toolbar underneath the browser chrome.
*/
.sca-exam__manual-reader:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 12px;
  background: var(--sca-green-bg, #eaf3f1);
  overflow: hidden;
}

.sca-exam__manual-reader:fullscreen .sca-exam__manual-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
}

.sca-exam__manual-reader:fullscreen .sca-exam__manual-controls {
  flex: none;
  margin: 10px 0 0;
}

/* -webkit-full-screen must be its own rule. A selector list containing a
   prefix a browser does not know is discarded whole, taking the standard
   :fullscreen rule with it. */
.sca-exam__manual-reader:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 12px;
  background: var(--sca-green-bg, #eaf3f1);
  overflow: hidden;
}

.sca-exam__manual-reader:-webkit-full-screen .sca-exam__manual-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

@media (max-width: 819px) {
  .sca-exam__manual-controls {
    justify-content: center;
  }

  /* The words go, the arrows stay - the buttons keep their aria-labels. */
  .sca-exam__manual-ctl-text {
    display: none;
  }
}

/* ------------------------------------------- the confirmation before the exam */

/*
   Centred as a block, but the text itself stays left-aligned: the sentence wraps
   to two lines on a narrow screen, and centred wrapped text under a checkbox
   reads as ragged rather than deliberate.
*/
.sca-exam__manual-confirm {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 620px;
  margin: 22px auto 16px;
  text-align: left;
}

.sca-exam__manual-confirm-input {
  flex: none;
  width: 18px;
  height: 18px;
  /* Nudged down so it sits on the first line of the label rather than above it. */
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: var(--sca-green, #3c7668);
}

.sca-exam__manual-confirm-input:focus-visible {
  outline: 2px solid var(--sca-green, #3c7668);
  outline-offset: 2px;
}

.sca-exam__manual-confirm-label {
  cursor: pointer;
  line-height: 1.5;
  color: var(--sca-text, #22302c);
}

/*
   The disabled state has to be unmistakable - this button is the one thing on the
   screen the candidate is trying to press, and "nothing happened" is a support
   call. Greyed, flattened, and the cursor says no.
*/
.sca-exam__btn--primary:disabled,
.sca-exam__btn--primary[disabled] {
  background: var(--sca-border, #d4ddda);
  border-color: var(--sca-border, #d4ddda);
  color: #7c8a86;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.sca-exam__btn--primary:disabled:hover,
.sca-exam__btn--primary[disabled]:hover {
  background: var(--sca-border, #d4ddda);
  transform: none;
  box-shadow: none;
}