@charset "utf-8";
/* ==========================================================================
   VCEdump - reading room, Web TestEngine demo, mock exam, print document

   Loaded after vcedump.css on the four focus-layout question pages. Only
   bindings live here: the page shells the shared components do not cover,
   and the state classes the page scripts toggle. Every value is a --vd-*
   token declared in the vcedump.css §1 block - no raw hex, no off-ladder
   type size or radius.

   §A  Focus shell (brand bar, progress strip)
   §B  Reading room (free sample and purchased PDF)
   §C  Question card (shared by the reader and the print document)
   §D  Engine stage (TestEngine demo and mock exam)
   §E  Visual questions (hotspot and drag and drop)
   §F  Question map rail
   §G  Empty and locked states
   §H  Print
   §I  Responsive
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   §A FOCUS SHELL
   The slim brand bar stands in for the site header and also carries the
   exam context and the current mode.
   ───────────────────────────────────────────────────────────────────────── */
/* the bar carries more than the site header does, so it grows instead of clipping */
.vd-demo-bar { height: auto; min-height: var(--vd-header-h); padding-block: var(--vd-space-2); }
.vd-demo-bar .vd-header__inner { flex-wrap: wrap; gap: var(--vd-space-3) var(--vd-space-4); }
.vd-demo-bar__context { display: flex; align-items: baseline; gap: var(--vd-space-3); min-width: 0; }
.vd-demo-bar__context .vd-code { color: var(--vd-green-200); }
.vd-demo-bar__context strong { font-size: var(--vd-body-size); font-weight: 400; color: var(--vd-n-0); }
.vd-demo-bar__mode { font-size: var(--vd-body-sm-size); line-height: var(--vd-body-sm-line); color: var(--vd-green-200); white-space: nowrap; }

/* the timer sits on the brand bar, so it keeps the on-brand well */
.vd-engine-timer { display: inline-flex; align-items: baseline; gap: var(--vd-space-2); color: var(--vd-n-0); }
.vd-engine-timer b { font-family: var(--vd-font-ui); font-size: var(--vd-body-sm-size); font-weight: 400; color: var(--vd-green-200); }
.vd-engine-timer.is-low { background: var(--vd-error); color: var(--vd-n-0); }
.vd-engine-timer.is-low b { color: var(--vd-n-0); }

/* the progress strip spans the viewport under the bar */
.vd-demo-progress { padding-block: var(--vd-space-4); background: var(--vd-surface-card); border-bottom: var(--vd-border-hairline) solid var(--vd-border-divider); }

/* line icons ride inside the reader and engine controls */
.vd-btn > svg, .vd-mark-control > svg {
  flex: none;
  width: var(--vd-icon-md);
  height: var(--vd-icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the print links are anchors, so the disabled state has to stop the click */
.vd-btn[aria-disabled="true"] { pointer-events: none; }

/* ─────────────────────────────────────────────────────────────────────────
   §B READING ROOM
   ───────────────────────────────────────────────────────────────────────── */
.vd-pdf-paper { min-width: 0; }
.vd-pdf-list { display: flex; flex-direction: column; }
.vd-pdf-preview-print-frame {
  width: 100%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}
.vd-pdf-preview-print-frame > thead,
.vd-pdf-preview-print-frame > tfoot { display: none; }
.vd-pdf-preview-print-frame > tbody > tr > td { padding: 0; border: 0; vertical-align: top; }

/* the print notice is written with textContent, so it stays a single node
   and takes the alert surfaces directly instead of the alert component */
.vd-pdf-print-notice {
  padding: var(--vd-space-3) var(--vd-space-4);
  border: var(--vd-border-hairline) solid var(--vd-warning-border);
  border-left: var(--vd-alert-rail) solid var(--vd-warning);
  border-radius: var(--vd-radius-md);
  background: var(--vd-warning-bg);
  color: var(--vd-warning-ink);
  font-size: var(--vd-body-sm-size);
  line-height: var(--vd-body-sm-line);
}
.vd-pdf-print-notice[data-kind="error"] {
  border-color: var(--vd-error-border);
  border-left-color: var(--vd-error);
  background: var(--vd-error-bg);
  color: var(--vd-error-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   §C QUESTION CARD
   The reader and the print document render the same partial, so the card
   keeps its own class names; the shared print stylesheet targets them too.
   ───────────────────────────────────────────────────────────────────────── */
.vd-pdf-question { padding-block: var(--vd-space-8); border-bottom: var(--vd-border-hairline) solid var(--vd-border-divider-faint); }
.vd-pdf-question:first-child { padding-top: 0; }
.vd-pdf-question:last-child { border-bottom: 0; }

/* The purchased reader is a long document, so each question needs a clear
   screen-only boundary. Printing keeps the compact document rules below. */
@media screen {
  .vd-pdf-paper .vd-pdf-list { gap: var(--vd-space-6); }
  .vd-pdf-paper .vd-pdf-question {
    padding: var(--vd-space-6);
    border: var(--vd-border-hairline) solid var(--vd-border-divider);
    border-left: var(--vd-rail-accent) solid var(--vd-green-500);
    border-radius: var(--vd-radius-lg);
    background: var(--vd-surface-card);
    box-shadow: var(--vd-shadow-sm);
  }
  .vd-pdf-paper .vd-pdf-question:first-child { padding-top: var(--vd-space-6); }
  .vd-pdf-paper .vd-pdf-question:last-child { border-bottom: var(--vd-border-hairline) solid var(--vd-border-divider); }
  .vd-pdf-paper .vd-pdf-question > header {
    padding-bottom: var(--vd-space-3);
    border-bottom: var(--vd-border-hairline) solid var(--vd-border-divider-faint);
  }
}

.vd-pdf-options { list-style: none; }
.vd-pdf-options li > .vd-richtext { flex: 1; min-width: 0; }

/* answers open as a disclosure: the summary is the control, the body is
   the answer block */
.vd-pdf-answer { display: flex; flex-direction: column; gap: var(--vd-space-3); }
.vd-pdf-answer > summary { align-self: flex-start; list-style: none; }
.vd-pdf-answer > summary::-webkit-details-marker { display: none; }
/* the caret is drawn rather than set as a glyph */
.vd-pdf-answer > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: var(--vd-space-1);
  border-right: var(--vd-border-strong) solid currentColor;
  border-bottom: var(--vd-border-strong) solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--vd-dur-fast) var(--vd-ease-standard);
}
.vd-pdf-answer[open] > summary::before { transform: rotate(45deg); }
.vd-pdf-answer__open { display: none; }
.vd-pdf-answer[open] .vd-pdf-answer__closed { display: none; }
.vd-pdf-answer[open] .vd-pdf-answer__open { display: inline; }

/* the correct option is only marked once the answer is showing */
.vd-pdf-question:has(.vd-pdf-answer[open]) .vd-pdf-options li.is-correct-answer {
  border: var(--vd-border-strong) solid var(--vd-success);
  border-left-width: var(--vd-alert-rail);
  background: var(--vd-success-bg);
}
.vd-pdf-question:has(.vd-pdf-answer[open]) .vd-pdf-options li.is-correct-answer .vd-option-row__letter { color: var(--vd-success); }
.vd-pdf-question:has(.vd-pdf-answer[open]) .vd-pdf-options li.is-correct-answer::after {
  content: "Correct";
  align-self: center;
  margin-left: auto;
  padding: var(--vd-space-1) var(--vd-space-2);
  border: var(--vd-border-hairline) solid var(--vd-success-border);
  border-radius: var(--vd-radius-xs);
  background: var(--vd-surface-card);
  color: var(--vd-success);
  font-size: var(--vd-caption-size);
  line-height: var(--vd-caption-line);
  font-weight: 500;
  white-space: nowrap;
}

/* stored question bodies are authored HTML, so the block rhythm is set here */
.vd-richtext > :first-child { margin-top: 0; }
.vd-richtext > :last-child { margin-bottom: 0; }
.vd-richtext p, .vd-richtext ul, .vd-richtext ol, .vd-richtext pre, .vd-richtext table { margin-block: var(--vd-space-3); }
.vd-richtext ul, .vd-richtext ol { padding-left: var(--vd-space-6); }
.vd-richtext img { max-width: 100%; height: auto; }
.vd-richtext strong, .vd-richtext b { color: var(--vd-text-heading); font-weight: 700; }
.vd-richtext pre { overflow-x: auto; font-family: var(--vd-font-mono); font-size: var(--vd-code-sm-size); line-height: var(--vd-code-sm-line); }

.vd-demo-figure {
  padding: var(--vd-space-3);
  border: var(--vd-border-hairline) solid var(--vd-border-divider);
  border-radius: var(--vd-radius-md);
  background: var(--vd-surface-card);
}
.vd-demo-figure img { width: auto; max-height: 700px; margin-inline: auto; object-fit: contain; }

/* ─────────────────────────────────────────────────────────────────────────
   §D ENGINE STAGE
   ───────────────────────────────────────────────────────────────────────── */
.vd-engine-stage { min-width: 0; overflow: hidden; }
.vd-engine-stage__head { padding: var(--vd-space-5) var(--vd-space-6); border-bottom: var(--vd-border-hairline) solid var(--vd-border-divider-faint); }
.vd-engine-question { padding: var(--vd-space-6); }
.vd-engine-navigation { padding: var(--vd-space-5) var(--vd-space-6); border-top: var(--vd-border-hairline) solid var(--vd-border-divider-faint); background: var(--vd-surface-sunken); }

.vd-engine-hint { padding-left: var(--vd-space-4); border-left: var(--vd-rail-accent) solid var(--vd-border-divider); }

/* a fieldset cannot be a flex container in every engine, so the option
   list stays a grid and the legend keeps its own spacing */
.vd-engine-options { display: grid; gap: var(--vd-space-2); margin: 0; padding: 0; border: 0; }
.vd-engine-options legend { margin-bottom: var(--vd-space-3); padding: 0; }
.vd-engine-options .vd-answer-option { align-items: center; }
.vd-engine-options .vd-answer-option > .vd-richtext { flex: 1; min-width: 0; }
.vd-engine-options input { flex: none; width: var(--vd-icon-md); height: var(--vd-icon-md); accent-color: var(--vd-green-600); }
.vd-engine-options .vd-answer-option:has(input:checked) { background: var(--vd-surface-selected); border: var(--vd-border-accent) solid var(--vd-green-600); }
.vd-engine-options .vd-answer-option.is-correct { background: var(--vd-success-bg); border: var(--vd-border-strong) solid var(--vd-success); border-left-width: var(--vd-alert-rail); }
.vd-engine-options .vd-answer-option.is-wrong { background: var(--vd-error-bg); border: var(--vd-border-strong) solid var(--vd-error); border-left-width: var(--vd-alert-rail); }
.vd-engine-option__mark { margin-left: auto; font-size: var(--vd-body-sm-size); font-weight: 500; color: var(--vd-text-muted); white-space: nowrap; }
.vd-engine-options .vd-answer-option.is-correct .vd-engine-option__mark { color: var(--vd-success); }
.vd-engine-options .vd-answer-option.is-wrong .vd-engine-option__mark { color: var(--vd-error); }

.vd-engine-response textarea { min-height: 140px; }

.vd-engine-note { padding: var(--vd-space-4); border: var(--vd-border-hairline) solid var(--vd-border-divider); border-left: var(--vd-alert-rail) solid var(--vd-n-300); border-radius: var(--vd-radius-md); background: var(--vd-surface-sunken); }

/* answer review reuses the answer-block surface with a live result badge */
.vd-engine-solution {
  padding: var(--vd-space-4) var(--vd-space-5);
  border: var(--vd-border-strong) solid var(--vd-success);
  border-left-width: var(--vd-alert-rail);
  border-radius: var(--vd-radius-md);
  background: var(--vd-success-bg);
}
.vd-engine-solution__answer:empty, .vd-engine-solution__explanation:empty { display: none; }
/* the script clears className on the badge, so the hook carries the style */
[data-vd-result-badge] {
  display: inline-flex;
  align-items: center;
  height: var(--vd-control-sm);
  padding-inline: var(--vd-space-3);
  border: var(--vd-border-hairline) solid var(--vd-border-divider);
  border-radius: var(--vd-radius-pill);
  background: var(--vd-surface-card);
  font-size: var(--vd-body-sm-size);
  font-weight: 500;
  color: var(--vd-text-secondary);
  white-space: nowrap;
}
[data-vd-result-badge]:empty { display: none; }
[data-vd-result-badge].is-correct { border-color: var(--vd-success-border); color: var(--vd-success); }
[data-vd-result-badge].is-wrong { border-color: var(--vd-error-border); color: var(--vd-error); }

.vd-engine-history-notice {
  padding: var(--vd-space-3) var(--vd-space-4);
  border: var(--vd-border-hairline) solid var(--vd-success-border);
  border-left: var(--vd-alert-rail) solid var(--vd-success);
  border-radius: var(--vd-radius-md);
  background: var(--vd-success-bg);
  color: var(--vd-success-ink);
  font-size: var(--vd-body-sm-size);
  line-height: var(--vd-body-sm-line);
}
.vd-engine-history-notice.is-error {
  border-color: var(--vd-error-border);
  border-left-color: var(--vd-error);
  background: var(--vd-error-bg);
  color: var(--vd-error-ink);
}
.vd-engine-history-notice a { color: inherit; font-weight: 500; text-decoration: underline; }

/* the mock exam confirmation */
.vd-exam-dialog {
  width: min(100% - var(--vd-space-8), var(--vd-auth-card-w));
  padding: var(--vd-space-6);
  border: var(--vd-border-hairline) solid var(--vd-border-divider);
  border-radius: var(--vd-radius-lg);
  background: var(--vd-surface-card);
  color: var(--vd-text-body);
  box-shadow: var(--vd-shadow-xl);
}
.vd-exam-dialog::backdrop { background: var(--vd-scrim); }
.vd-exam-dialog h2 { font-size: var(--vd-h3-size); line-height: var(--vd-h3-line); font-weight: 500; color: var(--vd-text-heading); }
.vd-exam-dialog p { margin-block: var(--vd-space-3) var(--vd-space-5); color: var(--vd-text-secondary); }
.vd-exam-dialog > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--vd-space-3); }

/* ─────────────────────────────────────────────────────────────────────────
   §E VISUAL QUESTIONS
   Hotspot regions and drag targets are placed by percentage from the
   stored canvas geometry, so their position stays inline in the markup.
   ───────────────────────────────────────────────────────────────────────── */
.vd-engine-visual {
  position: relative;
  width: fit-content;
  max-width: 100%;
  border: var(--vd-border-hairline) solid var(--vd-border-divider);
  border-radius: var(--vd-radius-md);
  background: var(--vd-surface-card);
  overflow: hidden;
}
.vd-engine-visual > img { display: block; width: auto; max-width: 100%; height: auto; }

.vd-engine-region, .vd-engine-drop-target {
  position: absolute;
  min-width: var(--vd-icon-lg);
  min-height: var(--vd-icon-lg);
  padding: 0;
  border: var(--vd-border-accent) solid var(--vd-green-600);
  border-radius: var(--vd-radius-xs);
  background: color-mix(in srgb, var(--vd-green-500) 16%, transparent);
  cursor: pointer;
}
.vd-engine-region:hover, .vd-engine-region.is-selected { background: color-mix(in srgb, var(--vd-green-500) 34%, transparent); }
.vd-engine-region.is-correct, .vd-engine-drop-target.is-correct { border-color: var(--vd-success); background: color-mix(in srgb, var(--vd-success-bg) 88%, transparent); }
.vd-engine-region.is-wrong, .vd-engine-drop-target.is-wrong { border-color: var(--vd-error); background: color-mix(in srgb, var(--vd-error-bg) 90%, transparent); }

.vd-engine-drop-target {
  display: grid;
  place-items: center;
  padding: var(--vd-space-05);
  border-style: dashed;
  background: color-mix(in srgb, var(--vd-n-0) 72%, transparent);
}
.vd-engine-drop-target.is-over, .vd-engine-drop-target.is-filled { border-style: solid; border-color: var(--vd-green-600); }
.vd-engine-drop-target [data-vd-target-preview], .vd-engine-drop-target [data-target-preview] { position: absolute; inset: var(--vd-space-05); background-repeat: no-repeat; }
.vd-engine-drop-target b {
  position: relative;
  z-index: 1;
  padding: var(--vd-space-05) var(--vd-space-1);
  border-radius: var(--vd-radius-xs);
  background: color-mix(in srgb, var(--vd-n-900) 86%, transparent);
  color: var(--vd-n-0);
  font-size: var(--vd-caption-size);
  font-weight: 500;
}

.vd-engine-source-list { display: flex; flex-wrap: wrap; gap: var(--vd-space-2); }
.vd-engine-source-list button {
  display: inline-grid;
  min-width: 118px;
  min-height: 72px;
  grid-template-rows: 42px auto;
  gap: var(--vd-space-1);
  padding: var(--vd-space-2);
  border: var(--vd-border-hairline) solid var(--vd-border-field);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface-card);
  color: var(--vd-text-body);
  font-family: inherit;
  font-size: var(--vd-body-sm-size);
  cursor: grab;
}
.vd-engine-source-list button:hover { border-color: var(--vd-border-field-hover); }
.vd-engine-source-list button [data-vd-source-preview], .vd-engine-source-list button [data-source-preview] { background-repeat: no-repeat; }
.vd-engine-source-list button b { font-weight: 500; }
.vd-engine-source-list button.is-selected { border: var(--vd-border-accent) solid var(--vd-green-600); background: var(--vd-surface-selected); }
.vd-engine-source-list button.is-used { opacity: 0.55; }

/* ─────────────────────────────────────────────────────────────────────────
   §F QUESTION MAP RAIL
   ───────────────────────────────────────────────────────────────────────── */
.vd-question-map__grid { max-height: 244px; overflow-y: auto; }
.vd-qmap__cell { text-decoration: none; }
.vd-qmap__cell:hover { border-color: var(--vd-border-field-hover); text-decoration: none; }
.vd-qmap__cell.is-current { box-shadow: 0 0 0 2px var(--vd-green-500); color: var(--vd-text-heading); }
.vd-qmap__cell.is-correct { background: var(--vd-success-bg); border-color: var(--vd-success); color: var(--vd-success); }
.vd-qmap__cell.is-incorrect { background: var(--vd-error-bg); border-color: var(--vd-error); color: var(--vd-error); }
.vd-qmap__cell.is-flagged { border: var(--vd-border-strong) dashed var(--vd-warning); }

/* the flagged and to-review lists are rebuilt by script, which replaces the
   class on each item, so the chip look hangs off the list instead */
.vd-question-map__chips { display: flex; flex-wrap: wrap; gap: var(--vd-space-1); }
.vd-question-map__chips a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vd-qmap-cell);
  height: var(--vd-qmap-cell);
  border: var(--vd-border-hairline) solid var(--vd-border-divider);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface-card);
  color: var(--vd-text-body);
  font-family: var(--vd-font-mono);
  font-size: var(--vd-caption-size);
  font-weight: 500;
  text-decoration: none;
}
.vd-question-map__chips a:hover { border-color: var(--vd-border-field-hover); text-decoration: none; }
.vd-question-map__chips a.is-flagged { background: var(--vd-warning-bg); border: var(--vd-border-strong) dashed var(--vd-warning); color: var(--vd-warning); }
.vd-question-map__chips a.is-incorrect { background: var(--vd-error-bg); border-color: var(--vd-error); color: var(--vd-error); }

/* ─────────────────────────────────────────────────────────────────────────
   §G EMPTY AND LOCKED STATES
   ───────────────────────────────────────────────────────────────────────── */
.vd-demo-empty, .vd-engine-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vd-space-3);
  max-width: var(--vd-reading-max);
  margin-inline: auto;
  text-align: center;
}
.vd-engine-locked { padding: var(--vd-space-16) var(--vd-space-6); }

/* ─────────────────────────────────────────────────────────────────────────
   §H PRINT
   The reader prints itself; the print document owns its own page rules.
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  .vd-demo-bar,
  .vd-demo-progress,
  .vd-pdf-index,
  .vd-pdf-paper__head,
  .vd-pdf-preview-end,
  .vd-pagination { display: none !important; }

  .vd-section { padding-block: 0 !important; }
  .vd-container { max-width: none !important; padding-inline: 0 !important; }
  .vd-split--reading, .vd-split--player { display: block !important; }

  .vd-pdf-question { padding-block: var(--vd-space-6); }
  .vd-pdf-answer { display: flex !important; }
  .vd-pdf-answer > summary { display: none !important; }

  body.vd-print-questions-only .vd-pdf-answer { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   §I RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .vd-question-map__grid { max-height: none; }
}

@media (max-width: 767px) {
  .vd-engine-stage__head, .vd-engine-navigation { padding: var(--vd-space-4) var(--vd-space-5); }
  .vd-engine-question { padding: var(--vd-space-5); }
  .vd-engine-navigation { flex-direction: column; align-items: stretch; }
  .vd-engine-navigation > * { width: 100%; }
  .vd-engine-source-list button { min-width: 96px; }
  .vd-pdf-question { padding-block: var(--vd-space-6); }
  .vd-pdf-question:has(.vd-pdf-answer[open]) .vd-pdf-options li.is-correct-answer::after { content: "OK"; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-demo *, .vd-demo *::before, .vd-demo *::after,
  .vd-exam-run *, .vd-exam-run *::before, .vd-exam-run *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}