/* =============================================================================
   Cikamo Exams — Fullscreen take screen
   Loaded ONLY by exams-taking-fullscreen.tpl. Everything is scoped under
   .exams-fullscreen-body (no :root redeclaration).

   Colour policy
   - Surfaces, text, borders, brand  -> site theme variables (day/night safe)
   - Status colours (green/blue/amber/red) -> fixed on purpose, so the screen
     is not one single brand colour. Night-mode gets lighter text variants.
   ============================================================================= */


/* ---------- 1. Isolation (anti-cheat: keep site widgets hidden) ---------- */
.exams-fullscreen-body .chat-sidebar,
.exams-fullscreen-body .toast-container,
.exams-fullscreen-body .onesignal-bell-launcher-button {
  display: none !important;
}


/* ---------- 2. Scoped tokens ---------- */
.exams-fullscreen-body {
  /* from the site theme */
  --ex-bg: var(--body-bg);
  --ex-surface: var(--header-background);
  --ex-surface-2: color-mix(in srgb, var(--body-color) 5%, var(--header-background));
  --ex-text: var(--body-color);
  --ex-muted: color-mix(in srgb, var(--body-color) 62%, var(--header-background));
  --ex-border: var(--border-divider-2);
  --ex-border-soft: var(--border-divider);
  --ex-brand: var(--main-btn);
  --ex-brand-text: var(--main-color);
  --ex-brand-link: var(--main-link);
  --ex-headline: var(--font-family-headline, var(--body-font-family));

  /* status colours: solid fills */
  --ex-green: #16a34a;
  --ex-blue: #2563eb;
  --ex-amber: #f59e0b;
  --ex-red: #dc2626;

  /* status colours: readable as text on the surface */
  --ex-green-text: #15803d;
  --ex-blue-text: #1d4ed8;
  --ex-amber-text: #b45309;
  --ex-red-text: #b91c1c;

  --ex-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ex-sidebar-w: 340px;

  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--ex-bg);
  color: var(--ex-text);
  font-family: var(--body-font-family);
}

.exams-fullscreen-body.night-mode {
  --ex-green-text: #4ade80;
  --ex-blue-text: #93c5fd;
  --ex-amber-text: #fbbf24;
  --ex-red-text: #f87171;
}

.exams-fullscreen-body *,
.exams-fullscreen-body *::before,
.exams-fullscreen-body *::after {
  box-sizing: border-box;
}

/* the site resets outlines globally, so give keyboard users a visible focus */
.exams-fullscreen-body :focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 45%, transparent);
}


/* ---------- 3. Shell ---------- */
.exams-fullscreen-body .exams-fullscreen-wrapper {
  height: 100%;
}

.exams-fullscreen-body #exams-taking-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* CSS-only switch for the mobile navigator sheet */
.exams-fullscreen-body .exams-nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.exams-fullscreen-body .exams-layout {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.exams-fullscreen-body .exams-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.exams-fullscreen-body #exams-taking-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

.exams-fullscreen-body .exams-questions-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 24px;
  background: var(--ex-surface-2);
}

.exams-fullscreen-body #exams-questions-container {
  max-width: 880px;
  margin: 0 auto;
}

/* light, cosmetic copy-deterrent in lockdown (typing in inputs still works) */
.exams-fullscreen-body #exams-taking-root[data-lockdown="1"] .exams-question-panel {
  -webkit-user-select: none;
  user-select: none;
}
.exams-fullscreen-body #exams-taking-root[data-lockdown="1"] .exams-question-panel textarea,
.exams-fullscreen-body #exams-taking-root[data-lockdown="1"] .exams-question-panel input[type="text"] {
  -webkit-user-select: text;
  user-select: text;
}


/* ---------- 4. Top bar (mobile: two rows) ---------- */
.exams-fullscreen-body .exams-taking-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "nav  timer cancel"
    "meta meta  status";
  align-items: center;
  gap: 8px 10px;
  flex: 0 0 auto;
  padding: 10px 14px;
  background: var(--ex-surface);
  border-bottom: 1px solid var(--ex-border);
}

/* cancel (X) */
.exams-fullscreen-body .exams-cancel-btn {
  grid-area: cancel;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ex-border);
  background: var(--ex-surface);
  color: var(--ex-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.exams-fullscreen-body .exams-cancel-btn:hover {
  background: color-mix(in srgb, var(--ex-red) 12%, transparent);
  border-color: var(--ex-red);
  color: var(--ex-red-text);
}

/* badges */
.exams-fullscreen-body .exams-taking-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.exams-fullscreen-body .exams-attempt-badge,
.exams-fullscreen-body .exams-lockdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.exams-fullscreen-body .exams-attempt-badge {
  background: color-mix(in srgb, var(--ex-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--ex-blue) 30%, transparent);
  color: var(--ex-blue-text);
}
.exams-fullscreen-body .exams-lockdown-badge {
  background: color-mix(in srgb, var(--ex-amber) 16%, transparent);
  border-color: color-mix(in srgb, var(--ex-amber) 40%, transparent);
  color: var(--ex-amber-text);
}

/* timer */
.exams-fullscreen-body .exams-taking-timer {
  grid-area: timer;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ex-red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ex-red) 28%, transparent);
  color: var(--ex-red-text);
  font-weight: 600;
}
.exams-fullscreen-body .exams-timer-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.exams-fullscreen-body .exams-timer-label {
  display: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}
.exams-fullscreen-body #exams-time-remaining-text {
  font-family: var(--ex-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}

/* autosave (the little dot is drawn in CSS so JS text changes can't remove it) */
.exams-fullscreen-body .exams-autosave-status {
  grid-area: status;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  font-size: 12px;
  color: var(--ex-muted);
}
.exams-fullscreen-body .exams-autosave-status:not(:empty)::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.exams-fullscreen-body .exams-autosave-status.saving { color: var(--ex-amber-text); }
.exams-fullscreen-body .exams-autosave-status.saving::before { animation: exams-pulse 1.2s ease-in-out infinite; }
.exams-fullscreen-body .exams-autosave-status.saved { color: var(--ex-green-text); }
.exams-fullscreen-body .exams-autosave-status.error { color: var(--ex-red-text); }

@keyframes exams-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* "Questions" button that opens the sheet on mobile */
.exams-fullscreen-body .exams-nav-toggle-btn {
  grid-area: nav;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ex-border);
  background: var(--ex-surface-2);
  color: var(--ex-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.exams-fullscreen-body .exams-nav-toggle-input:checked ~ .exams-taking-topbar .exams-nav-toggle-btn {
  border-color: var(--ex-blue);
  color: var(--ex-blue-text);
}


/* ---------- 5. Question panel ---------- */
/* The panel is only a wrapper now: the question card and the answer area
   are two separate blocks inside it. */
.exams-fullscreen-body .exams-question-panel {
  margin-bottom: 24px;
}

/* Question card = header + text, joined, with a brand-colour bar on the left */
.exams-fullscreen-body .exams-question-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px 0;
  background: var(--ex-surface);
  border: 1px solid var(--ex-border);
  border-left: 5px solid var(--ex-brand);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.exams-fullscreen-body .exams-question-number {
  font-family: var(--ex-headline);
  font-size: 17px;
  font-weight: 700;
  color: var(--ex-brand-link);
}
.exams-fullscreen-body .exams-question-marks {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ex-blue) 12%, transparent);
  color: var(--ex-blue-text);
  font-size: 12px;
  font-weight: 600;
}

/* flag for review */
.exams-fullscreen-body .exams-flag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ex-border);
  background: var(--ex-surface);
  color: var(--ex-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.exams-fullscreen-body .exams-flag-btn:hover {
  border-color: var(--ex-red);
  color: var(--ex-red-text);
}
.exams-fullscreen-body .exams-flag-btn.active {
  background: color-mix(in srgb, var(--ex-red) 12%, transparent);
  border-color: var(--ex-red);
  color: var(--ex-red-text);
}

.exams-fullscreen-body .exams-question-text {
  margin: 0;
  padding: 8px 16px 18px;
  background: var(--ex-surface);
  border: 1px solid var(--ex-border);
  border-left: 5px solid var(--ex-brand);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  font-family: var(--ex-headline);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}
.exams-fullscreen-body .exams-question-text > :first-child { margin-top: 0; }
.exams-fullscreen-body .exams-question-text > :last-child { margin-bottom: 0; }

/* Answer area: its own block, a clear step below the question card */
.exams-fullscreen-body .exams-options,
.exams-fullscreen-body .exams-text-input,
.exams-fullscreen-body .exams-essay-input {
  margin-top: 24px;
}

/* optional question image: sits right under the question card */
.exams-fullscreen-body .exams-question-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 16px;
  border: 1px solid var(--ex-border);
  border-radius: 12px;
}

/* lockdown note under the essay box */
.exams-fullscreen-body .exams-lockdown-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ex-amber-text);
}
.exams-fullscreen-body .exams-question-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* options */
.exams-fullscreen-body .exams-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: exams-opt;
}
.exams-fullscreen-body .exams-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--ex-surface);
  border: 1.5px solid var(--ex-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.exams-fullscreen-body .exams-option:hover {
  border-color: color-mix(in srgb, var(--ex-blue) 55%, var(--ex-border));
  background: var(--ex-surface-2);
}

/* A / B / C / D badge.
   If your JS already prints its own option letters, delete this ::before rule. */
.exams-fullscreen-body .exams-option::before {
  counter-increment: exams-opt;
  content: counter(exams-opt, upper-alpha);
  order: -1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ex-surface-2);
  border: 1px solid var(--ex-border);
  color: var(--ex-muted);
  font-size: 14px;
  font-weight: 700;
}
.exams-fullscreen-body .exams-option input[type="radio"],
.exams-fullscreen-body .exams-option input[type="checkbox"] {
  order: 2;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 0 0 auto;
  accent-color: var(--ex-blue);
}

/* selected option */
.exams-fullscreen-body .exams-option.selected,
.exams-fullscreen-body .exams-option.checked {
  border-color: var(--ex-blue);
  background: color-mix(in srgb, var(--ex-blue) 9%, var(--ex-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 18%, transparent);
}
.exams-fullscreen-body .exams-option:has(input:checked) {
  border-color: var(--ex-blue);
  background: color-mix(in srgb, var(--ex-blue) 9%, var(--ex-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 18%, transparent);
}
.exams-fullscreen-body .exams-option.selected::before,
.exams-fullscreen-body .exams-option.checked::before {
  background: var(--ex-blue);
  border-color: var(--ex-blue);
  color: #fff;
}
.exams-fullscreen-body .exams-option:has(input:checked)::before {
  background: var(--ex-blue);
  border-color: var(--ex-blue);
  color: #fff;
}

/* typed answers */
.exams-fullscreen-body .exams-text-input,
.exams-fullscreen-body .exams-essay-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--ex-surface);
  border: 1.5px solid var(--ex-border);
  border-radius: 12px;
  color: var(--ex-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}
.exams-fullscreen-body .exams-essay-input {
  min-height: 180px;
  resize: vertical;
}
.exams-fullscreen-body .exams-text-input:focus,
.exams-fullscreen-body .exams-essay-input:focus {
  border-color: var(--ex-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 22%, transparent);
}

.exams-fullscreen-body .exams-loading-placeholder {
  padding: 48px 16px;
  text-align: center;
  color: var(--ex-muted);
}


/* ---------- 6. Footer dock (Previous / Next) ---------- */
.exams-fullscreen-body .exams-taking-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ex-surface);
  border-top: 1px solid var(--ex-border);
}
.exams-fullscreen-body #exams-next-btn {
  flex: 1 1 auto;
}

/* shared buttons */
.exams-fullscreen-body .exams-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, filter .15s, transform .1s;
}
.exams-fullscreen-body .exams-btn:active:not(:disabled) { transform: scale(.98); }
.exams-fullscreen-body .exams-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Previous: neutral */
.exams-fullscreen-body .exams-btn-secondary {
  background: var(--ex-surface);
  border-color: var(--ex-border);
  color: var(--ex-text);
}
.exams-fullscreen-body .exams-btn-secondary:hover:not(:disabled) { background: var(--ex-surface-2); }

/* Next: the site brand colour */
.exams-fullscreen-body .exams-btn-primary {
  background: var(--ex-brand);
  color: var(--ex-brand-text);
}
.exams-fullscreen-body .exams-btn-primary:hover:not(:disabled) { filter: brightness(.92); }

/* Submit: blue */
.exams-fullscreen-body .exams-btn-submit {
  width: 100%;
  padding: 13px 16px;
  background: var(--ex-blue);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ex-blue) 35%, transparent);
}
.exams-fullscreen-body .exams-btn-submit:hover:not(:disabled) { filter: brightness(.92); }


/* ---------- 7. Navigator (mobile = bottom sheet) ---------- */
.exams-fullscreen-body .exams-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(0 0 0 / .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.exams-fullscreen-body .exams-nav-toggle-input:checked ~ .exams-layout .exams-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.exams-fullscreen-body .exams-sidebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  max-height: 82dvh;
  background: var(--ex-surface);
  border: 1px solid var(--ex-border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgb(0 0 0 / .25);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}
.exams-fullscreen-body .exams-nav-toggle-input:checked ~ .exams-layout .exams-sidebar {
  transform: none;
  visibility: visible;
  transition: transform .28s ease;
}
.exams-fullscreen-body .exams-sidebar::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--ex-border);
}

.exams-fullscreen-body .exams-sidebar-head {
  flex: 0 0 auto;
  padding: 8px 20px 14px;
  border-bottom: 1px solid var(--ex-border-soft);
}
.exams-fullscreen-body .exams-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.exams-fullscreen-body .exams-sidebar-title h3 {
  margin: 0;
  font-family: var(--ex-headline);
  font-size: 18px;
  font-weight: 700;
  color: var(--ex-text);
}
.exams-fullscreen-body .exams-sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--ex-muted);
  cursor: pointer;
}
.exams-fullscreen-body .exams-sidebar-close:hover { background: var(--ex-surface-2); }

/* legend */
.exams-fullscreen-body .exams-navigator-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ex-muted);
}
.exams-fullscreen-body .exams-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.exams-fullscreen-body .legend-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.exams-fullscreen-body .legend-swatch { background: transparent; }
.exams-fullscreen-body .legend-swatch.answered { border: 2px solid var(--ex-green); }
.exams-fullscreen-body .legend-swatch.unanswered { border: 1.5px solid var(--ex-border); }
.exams-fullscreen-body .legend-swatch.current { border: 2px solid var(--ex-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ex-blue) 25%, transparent); }
.exams-fullscreen-body .legend-swatch.flagged { border: 2px solid var(--ex-red); }

/* question grid */
.exams-fullscreen-body .exams-sidebar-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}
.exams-fullscreen-body .exams-navigator {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0;
}
.exams-fullscreen-body .exams-nav-item {
  position: relative;
  width: 100%;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  border: 1.5px solid var(--ex-border);
  background: transparent;
  color: var(--ex-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.exams-fullscreen-body .exams-nav-item:hover { border-color: var(--ex-blue); }

/* states are toggled by exams_scripts.tpl — order matters (later wins) */
/* border-only states, no fills */
.exams-fullscreen-body .exams-nav-item.unanswered {
  background: transparent;
  border-color: var(--ex-border);
  color: var(--ex-muted);
}
.exams-fullscreen-body .exams-nav-item.answered {
  border-width: 2px;
  border-color: var(--ex-green);
  color: var(--ex-green-text);
}
.exams-fullscreen-body .exams-nav-item.flagged {
  border-width: 2px;
  border-color: var(--ex-red);
}
.exams-fullscreen-body .exams-nav-item.current {
  border-width: 2px;
  border-color: var(--ex-blue);
  color: var(--ex-blue-text);
  font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 25%, transparent);
}
.exams-fullscreen-body .exams-nav-item.loading {
  opacity: .5;
  pointer-events: none;
}

/* sidebar footer: warning + submit */
.exams-fullscreen-body .exams-sidebar-foot {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--ex-surface-2);
  border-top: 1px solid var(--ex-border-soft);
}
.exams-fullscreen-body .exams-lockdown-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ex-red) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ex-red) 25%, transparent);
  color: var(--ex-red-text);
  font-size: 12px;
  line-height: 1.4;
}
.exams-fullscreen-body .exams-lockdown-warning i { margin-top: 2px; }
.exams-fullscreen-body .exams-lockdown-warning p { margin: 0; }


/* ---------- 8. Desktop (>= 900px): sidebar docked on the right ---------- */
@media (min-width: 900px) {
  .exams-fullscreen-body .exams-taking-topbar {
    display: flex;
    gap: 14px;
    height: 64px;
    padding: 0 24px;
  }
  .exams-fullscreen-body .exams-taking-timer { margin: 0 auto; }
  .exams-fullscreen-body .exams-timer-label { display: block; }
  .exams-fullscreen-body #exams-time-remaining-text { font-size: 18px; }
  .exams-fullscreen-body .exams-nav-toggle-btn { display: none; }

  .exams-fullscreen-body .exams-questions-scroll { padding: 32px 40px; }
  .exams-fullscreen-body .exams-question-header { padding: 20px 28px 0; }
  .exams-fullscreen-body .exams-question-text { padding: 10px 28px 26px; font-size: 22px; }
  .exams-fullscreen-body .exams-options,
  .exams-fullscreen-body .exams-text-input,
  .exams-fullscreen-body .exams-essay-input { margin-top: 28px; }
  .exams-fullscreen-body .exams-option { padding: 15px 18px; }

  .exams-fullscreen-body .exams-taking-footer {
    justify-content: space-between;
    padding: 14px 40px;
  }
  .exams-fullscreen-body #exams-next-btn { flex: 0 0 auto; padding-left: 26px; padding-right: 26px; }

  .exams-fullscreen-body .exams-nav-backdrop,
  .exams-fullscreen-body .exams-sidebar-close,
  .exams-fullscreen-body .exams-sidebar::before { display: none; }

  .exams-fullscreen-body .exams-sidebar {
    position: static;
    flex: 0 0 var(--ex-sidebar-w);
    width: var(--ex-sidebar-w);
    max-height: none;
    border: 0;
    border-left: 1px solid var(--ex-border);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .exams-fullscreen-body .exams-sidebar-head { padding-top: 20px; }
}


/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .exams-fullscreen-body *,
  .exams-fullscreen-body *::before,
  .exams-fullscreen-body *::after {
    animation: none !important;
    transition: none !important;
  }
}