/* Jig Quiz — Overlay Styles
   Designed to sit on top of JigSpace's 3D viewer
   Uses CSS custom properties for easy theming */

:root {
  --jq-brand: #2f4de4;
  --jq-brand-weak: #e0e5ff;
  --jq-primary: var(--jq-brand);          /* alias — legacy rules */
  --jq-primary-hover: #2740c9;
  --jq-success: #0ca977;
  --jq-success-bg: #e7f7f1;
  --jq-error: #ef4444;
  --jq-error-bg: rgba(239, 68, 68, 0.10);
  --jq-surface: #ffffff;
  --jq-surface-secondary: #fafafb;
  --jq-text: #101b31;
  --jq-text-subtle: #525c76;
  --jq-text-secondary: var(--jq-text-subtle);  /* alias — legacy rules */
  --jq-border: #e2e4e8;
  --jq-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.05), 0 5px 14px -4px rgba(0, 0, 0, 0.2);
  --jq-radius-lg: 16px;   /* card / bottom-sheet corners */
  --jq-radius: 8px;       /* options, boxes, buttons */
  --jq-radius-sm: 4px;    /* checkbox, chip */
  --jq-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --jq-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Backdrop ── */
.jq-overlay {
  position: fixed;
  inset: 0;
  z-index: 999990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 27, 49, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: var(--jq-font);
}

.jq-overlay.jq-visible {
  opacity: 1;
}

/* ── Card (desktop) / bottom sheet (mobile) ── */
.jq-card {
  background: var(--jq-surface);
  border-radius: var(--jq-radius-lg);
  box-shadow: var(--jq-shadow);
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.jq-overlay.jq-visible .jq-card {
  transform: translateY(0) scale(1);
}

.jq-card-inner {
  padding: 24px;
}

/* Mobile: dock the card to the bottom as a sheet with rounded top corners. */
@media (max-width: 599px) {
  .jq-overlay { align-items: flex-end; }
  .jq-card {
    width: 100%;
    max-width: none;
    border-radius: var(--jq-radius-lg) var(--jq-radius-lg) 0 0;
    transform: translateY(100%);
  }
  .jq-overlay.jq-visible .jq-card { transform: translateY(0); }
  .jq-card-inner { padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* ── Header: quiz chip (left) + question progress (right) ── */
.jq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.jq-jig-chip {
  display: inline-flex;
  align-items: center;
  max-width: 75%;
  background: var(--jq-brand-weak);
  color: var(--jq-brand);
  padding: 4px 10px;
  border-radius: var(--jq-radius-sm);
}

.jq-jig-chip-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jq-progress-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--jq-brand);
  flex-shrink: 0;
  margin-left: auto;
}

.jq-skip-x {
  background: none;
  border: none;
  color: var(--jq-text-subtle);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}

/* Hairline divider under the header */
.jq-divider {
  height: 1px;
  background: var(--jq-border);
  margin: 12px 0 16px;
}

/* ── Question ── */
.jq-question-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--jq-text);
  line-height: 1.4;
  margin-bottom: 16px;
}

/* ── Multi-select hint ── */
.jq-multi-hint {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 0 12px;
  background: var(--jq-brand-weak);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jq-brand);
}

/* ── Answer options ── */
.jq-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.jq-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--jq-border);
  border-radius: var(--jq-radius);
  cursor: pointer;
  transition: all var(--jq-transition);
  background: var(--jq-surface);
  user-select: none;
  -webkit-user-select: none;
}

.jq-option:hover,
.jq-option.jq-selected {
  border-color: var(--jq-brand);
  background: var(--jq-brand-weak);
}

.jq-option.jq-correct {
  border-color: var(--jq-success);
  background: var(--jq-success-bg);
}

.jq-option.jq-incorrect {
  border-color: var(--jq-error);
  background: var(--jq-error-bg);
}

.jq-option.jq-disabled {
  pointer-events: none;
}

/* Settled: fade the options that were neither the answer nor the pick */
.jq-option.jq-disabled:not(.jq-correct):not(.jq-incorrect) {
  opacity: 0.5;
}

/* Square checkbox marker (default + selected); becomes a status circle once settled */
.jq-option-marker {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: var(--jq-radius-sm);
  border: 2px solid var(--jq-border);
  background: var(--jq-surface);
  flex-shrink: 0;
  transition: all var(--jq-transition);
}

.jq-option.jq-selected .jq-option-marker,
.jq-option.jq-correct .jq-option-marker,
.jq-option.jq-incorrect .jq-option-marker {
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.jq-option.jq-selected .jq-option-marker { background: var(--jq-brand); }
.jq-option.jq-selected .jq-option-marker::after { content: '\2713'; } /* ✓ */

/* Settled: the marker becomes the Figma filled icon (painted into the div by
   quiz-overlay.js paintMarker) — no background, no ::after glyph. */
.jq-option.jq-correct .jq-option-marker,
.jq-option.jq-incorrect .jq-option-marker {
  background: transparent;
  border-radius: 50%;
}
.jq-option.jq-correct .jq-option-marker { color: var(--jq-success); }
.jq-option.jq-incorrect .jq-option-marker { color: var(--jq-error); }
.jq-option.jq-correct .jq-option-marker::after,
.jq-option.jq-incorrect .jq-option-marker::after { content: none; }
.jq-option-marker .jq-icon { width: 20px; height: 20px; display: block; vertical-align: 0; }

.jq-option-text {
  font-size: 14px;
  color: var(--jq-text);
  line-height: 1.4;
}

/* ── Fill-in input ── */
.jq-fill-in-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--jq-border);
  border-radius: var(--jq-radius-sm);
  font-size: 15px;
  font-family: var(--jq-font);
  color: var(--jq-text);
  outline: none;
  transition: border-color var(--jq-transition);
  margin-bottom: 24px;
  box-sizing: border-box;
}

.jq-fill-in-input:focus {
  border-color: var(--jq-primary);
}

.jq-fill-in-input.jq-correct {
  border-color: var(--jq-success);
  background: var(--jq-success-bg);
}

.jq-fill-in-input.jq-incorrect {
  border-color: var(--jq-error);
  background: var(--jq-error-bg);
}

/* ── Feedback ── */
.jq-feedback {
  display: none;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--jq-radius);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
}

.jq-feedback.jq-visible {
  display: flex;
}

.jq-feedback.jq-feedback-correct {
  background: var(--jq-success-bg);
  color: var(--jq-success);
  border-color: var(--jq-success);
}

.jq-feedback.jq-feedback-incorrect {
  background: var(--jq-error-bg);
  color: var(--jq-error);
  border-color: var(--jq-error);
}

/* Result line — icon + verdict — sits above the feedback block. Hidden until
   the question settles; `hidden` attr toggled by quiz-overlay.js. */
.jq-result {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.jq-result:not([hidden]) { display: flex; }
.jq-result-correct { color: var(--jq-success); }
.jq-result-incorrect { color: var(--jq-error); }
.jq-result-icon { display: inline-flex; line-height: 0; flex-shrink: 0; }
.jq-result-icon .jq-icon { width: 20px; height: 20px; vertical-align: 0; }

/* ── Buttons ── */
.jq-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.jq-btn {
  padding: 12px 28px;
  border: none;
  border-radius: var(--jq-radius);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--jq-font);
  cursor: pointer;
  transition: all var(--jq-transition);
  letter-spacing: 0.01em;
}

.jq-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.jq-btn-primary {
  background: var(--jq-primary);
  color: #fff;
}

.jq-btn-primary:hover:not(:disabled) {
  background: var(--jq-primary-hover);
  transform: translateY(-1px);
}

.jq-btn-secondary {
  background: var(--jq-surface-secondary);
  color: var(--jq-text-secondary);
  border: 1px solid var(--jq-border);
}

.jq-btn-secondary:hover:not(:disabled) {
  background: var(--jq-border);
}

/* ── Welcome screen ── */
.jq-welcome-card {
  padding-top: 24px;
  text-align: center;
}

.jq-welcome-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--jq-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.jq-welcome-subtitle {
  font-size: 14px;
  color: var(--jq-text-subtle);
  margin-bottom: 20px;
  line-height: 1.55;
}

/* Start button is centered on the welcome card (not right-aligned). */
.jq-welcome-card .jq-actions {
  justify-content: center;
}

/* Consent / T&C footer on the welcome card */
.jq-consent {
  margin: 18px -8px 0;
  padding-top: 14px;
  border-top: 1px solid var(--jq-border);
  font-size: 11px;
  line-height: 1.5;
  color: var(--jq-text-secondary);
  text-align: center;
}

/* md-lite wraps consent text in <p>/<ul>; keep the footer's tight rhythm. */
.jq-consent p { margin: 0 0 6px; }
.jq-consent p:last-child { margin-bottom: 0; }
.jq-consent ul { margin: 0 0 6px; padding-left: 18px; text-align: left; }

/* md-lite emits bare <a>; match the hand-built .jq-consent-link. */
.jq-consent a {
  color: var(--jq-primary);
  text-decoration: none;
  font-weight: 500;
}
.jq-consent a:hover { text-decoration: underline; }

/* Feedback links sit inside the coloured feedback panel — inherit its colour
   and stay underlined so they still read as links against it. */
.jq-feedback a,
.jq-action-feedback a { color: inherit; text-decoration: underline; }

.jq-consent-link {
  color: var(--jq-primary);
  text-decoration: none;
  font-weight: 500;
}

.jq-consent-link:hover {
  text-decoration: underline;
}

.jq-welcome-field {
  margin-bottom: 14px;
  text-align: left;
}

.jq-welcome-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--jq-text-subtle);
  margin-bottom: 6px;
}

.jq-welcome-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--jq-border);
  border-radius: var(--jq-radius);
  font-size: 14px;
  font-family: var(--jq-font);
  color: var(--jq-text);
  outline: none;
  transition: border-color var(--jq-transition);
  box-sizing: border-box;
}

.jq-welcome-field input:focus {
  border-color: var(--jq-brand);
}

.jq-welcome-field-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--jq-error);
  text-align: left;
}

.jq-welcome-optional {
  font-size: 12px;
  color: var(--jq-text-secondary);
  margin-bottom: 20px;
}

.jq-welcome-quiz-info {
  display: flex;
  gap: 8px;
  padding: 16px 12px;
  background: var(--jq-surface-secondary);
  border-radius: var(--jq-radius);
  margin-bottom: 24px;
}

.jq-welcome-quiz-info-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.jq-info-icon-wrap {
  display: inline-flex;
  color: var(--jq-success);
}

.jq-info-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.jq-welcome-quiz-info-item .jq-info-text {
  font-size: 14px;
  color: var(--jq-text-subtle);
  line-height: 1.3;
}

/* ── Results screen ── */
.jq-results-score {
  text-align: center;
  margin-bottom: 20px;
}

.jq-results-percentage {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}

.jq-results-percentage.jq-passed {
  color: var(--jq-success);
}

.jq-results-percentage.jq-failed {
  color: var(--jq-error);
}

.jq-results-status {
  font-size: 16px;
  font-weight: 700;
}

.jq-results-status.jq-passed {
  color: var(--jq-success);
}

.jq-results-status.jq-failed {
  color: var(--jq-error);
}

.jq-results-breakdown {
  background: var(--jq-surface-secondary);
  border-radius: var(--jq-radius);
  padding: 16px;
  margin-bottom: 24px;
}

.jq-results-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.jq-results-row-label {
  color: var(--jq-text-secondary);
}

.jq-results-row-value {
  font-weight: 600;
  color: var(--jq-text);
}

/* Author's conclusion message, above the score. Wave-2 markdown; plain text
   for now, so no descendant rules are needed yet. */
.jq-results-message {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jq-text);
  text-align: center;
}

/* Pass/fail with no numbers, for end_screen.hide_score. */
.jq-results-verdict {
  margin-bottom: 16px;
  text-align: center;
}

/* ── Quiz loaded badge ── */
.jq-loaded-badge {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 999980;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--jq-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--jq-success);
  border: 1px solid rgba(34, 197, 94, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.4s ease;
}

.jq-loaded-badge.jq-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .jq-card {
    width: 95%;
    max-width: none;
  }

  .jq-card-inner {
    padding: 20px 18px 22px;
  }

  .jq-question-text {
    font-size: 16px;
  }

  .jq-option {
    padding: 12px 14px;
  }

  .jq-results-percentage {
    font-size: 44px;
  }

  .jq-welcome-card {
    padding-top: 16px;
  }

  .jq-welcome-title {
    font-size: 22px;
  }

  .jq-welcome-subtitle {
    font-size: 13px;
    margin-bottom: 14px;
  }

  .jq-welcome-quiz-info {
    gap: 6px;
    padding: 10px 8px;
    margin-bottom: 16px;
  }

  .jq-welcome-quiz-info-item .jq-info-value {
    font-size: 15px;
  }

  .jq-welcome-quiz-info-item .jq-info-label {
    font-size: 10px;
    letter-spacing: 0.03em;
  }

  .jq-welcome-field {
    margin-bottom: 10px;
  }

  .jq-welcome-optional {
    margin-bottom: 14px;
  }

  .jq-consent {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 10px;
  }
}

/* ── Action questions — docked prompt (scene stays clickable) ── */
.jq-action-prompt {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 999991;
  width: min(520px, calc(100vw - 32px));
  background: var(--jq-surface);
  border: 1px solid var(--jq-border);
  border-radius: var(--jq-radius-lg);
  box-shadow: var(--jq-shadow);
  padding: 16px 20px;
  font-family: var(--jq-font);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.jq-action-prompt.jq-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.jq-action-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--jq-brand);
  margin-bottom: 6px;
}

/* Pointer cue in the top-left of the action prompt: signals "click in the
   scene" and reads as part of the prompt, not a bolt-on. A subtle, slow tap
   loop draws the eye without nagging. */
.jq-action-cursor {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  animation: jq-cursor-tap 2.6s ease-in-out infinite;
  transform-origin: 62% 38%;
  will-change: transform;
}
.jq-action-eyebrow-text { min-width: 0; }

@keyframes jq-cursor-tap {
  0%, 66%, 100% { transform: translate(0, 0) scale(1); }
  76%           { transform: translate(1px, 2px) scale(0.88); }
  86%           { transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .jq-action-cursor { animation: none; }
}

.jq-action-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--jq-text);
}

.jq-action-feedback {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--jq-radius);
  font-size: 14px;
  font-weight: 600;
}
.jq-action-feedback[hidden] { display: none; }
.jq-action-feedback .jq-result-icon .jq-icon { width: 18px; height: 18px; }

.jq-action-feedback.jq-feedback-correct {
  background: var(--jq-success-bg);
  color: var(--jq-success);
}

.jq-action-feedback.jq-feedback-incorrect {
  background: var(--jq-error-bg);
  color: var(--jq-error);
}

/* Continue row inside the docked action prompt. Reuses .jq-actions/.jq-btn;
   only spacing and a tighter hit area for the compact prompt are new. */
.jq-action-actions {
  margin-top: 12px;
}

.jq-action-actions .jq-btn {
  padding: 9px 22px;
  font-size: 14px;
}

/* ── Toast — quiet acknowledgement for deferred answers ── */
.jq-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 8px);
  z-index: 999992;
  background: var(--jq-text);
  color: #fff;
  font-family: var(--jq-font);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(16, 27, 49, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.jq-toast.jq-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Checkpoint summary (deferred-feedback group results) ── */
.jq-group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--jq-text);
  margin: 0 0 12px;
}

.jq-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.jq-group-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--jq-surface-secondary);
  border-radius: var(--jq-radius);
}

.jq-group-icon {
  display: inline-flex;
  line-height: 0;
  flex-shrink: 0;
}
.jq-group-icon .jq-icon { width: 18px; height: 18px; vertical-align: 0; }

.jq-group-icon.jq-passed { color: var(--jq-success); }
.jq-group-icon.jq-failed { color: var(--jq-error); }

.jq-group-q {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: var(--jq-text);
}

.jq-group-feedback {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--jq-text-secondary);
}

.jq-group-step {
  font-size: 12px;
  color: var(--jq-text-secondary);
  flex-shrink: 0;
}

.jq-group-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--jq-text-secondary);
  margin-bottom: 16px;
}

/* Skip-quiz × on question modals — shown only when the author enabled
   'Allow user to skip the quiz' (general_settings.allow_close). */
.jq-skip-x {
  margin-left: auto;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  line-height: 1;
  padding: 0 0 0 12px;
  cursor: pointer;
}
.jq-skip-x:hover { color: #374151; }

/* Skip × inside the action-prompt eyebrow (allow_close only) */
.jq-action-prompt .jq-action-skip {
  margin-left: auto;
  font-size: 16px;
  padding: 0 0 0 10px;
}

/* Terminated attempt (item 2.2). Deliberately austere: the author's message is
   the whole content, and nothing about the question appears here at any
   disclosure level. */
.jq-terminated-message {
  margin: 16px 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--jq-text);
}
.jq-terminated .jq-actions { justify-content: flex-end; }

/* Question timer (item 3.1). In the header, never over the question text. */
.jq-timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: var(--jq-radius-sm);
  background: var(--jq-surface-secondary);
  color: var(--jq-text-subtle);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.jq-timer-icon { display: inline-flex; line-height: 0; }
.jq-timer-icon .jq-icon { width: 14px; height: 14px; vertical-align: 0; }
.jq-timer-chip.jq-timer-urgent {
  background: var(--jq-error-bg);
  color: var(--jq-error);
  animation: jq-timer-pulse 1s ease-in-out infinite;
}
@keyframes jq-timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .jq-timer-chip.jq-timer-urgent { animation: none; }
}
.jq-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.jq-action-eyebrow .jq-timer-chip { margin-left: 0; }

/* ── Inline icons (jq-icons.js) — sized by font-size, coloured by `color` ── */
.jq-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}