.jsq-card { max-width: 1140px; margin: 24px auto; background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.jsq-title { margin: 0 0 10px; font-size: 24px; }
.jsq-section-title { margin: 8px 0 16px; font-size: 20px; }
.jsq-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:14px; color:#555; }
.jsq-quizname { font-weight:600; }
.jsq-progress { opacity:.8; }

.jsq-form { display:block; }
.jsq-label { display:block; margin-bottom:12px; font-weight:600; }
.jsq-input { width:100%; padding:10px 12px; border:1px solid #d7d7d7; border-radius:10px; font-size:16px; }

.jsq-fieldset { border:0; margin:0 0 16px; padding:0; }
.jsq-question { font-weight:600; margin-bottom:8px; }
.jsq-choice { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #ececec; border-radius:10px; margin:6px 0; cursor:pointer; }
.jsq-choice input { transform: scale(1.15); }

.jsq-actions { display:flex; gap:12px; margin-top:14px; }
.jsq-btn { appearance:none; border:0; background:#111; color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; cursor:pointer; }
.jsq-btn:hover { opacity:.92; }
.jsq-btn-secondary { background:#f2f2f2; color:#111; }

.jsq-table { width:100%; border-collapse: collapse; margin-top: 10px; }
.jsq-table th, .jsq-table td { padding:10px; border-bottom:1px solid #eee; text-align:left; }
.jsq-table tfoot th { border-top:2px solid #ddd; }

.jsq-status { margin-top:10px; font-size:14px; color:#0a7a0a; }

/* Progress bars */
.jsq-progresswrap { margin: 8px 0 14px; }
.jsq-progresslabel { font-size: 12px; color: #666; margin-bottom: 6px; }
.jsq-progressbar {
  width: 100%;
  height: 10px;
  background: #f1f1f1;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}
.jsq-progressfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #641220, #641220);
  border-radius: 9999px;
  transition: width .25s ease;
}
.jsq-progressmeta { font-size: 12px; color: #555; margin-top: 6px; }

.jsq-interpret { margin-top: 18px; padding-top: 6px; border-top: 1px solid #eee; }
.jsq-interpret h3 { margin: 16px 0 8px; font-size: 18px; letter-spacing: .02em; }
.jsq-interpret h4 { margin: 12px 0 6px; font-size: 16px; }
.jsq-interpret ul { margin: 6px 0 10px 18px; }
.jsq-interpret li { margin: 6px 0; }



/* === Choice styling: hover + selected === */

/* Base choice styling */
.jsq-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin: 8px 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  background-color: #ffffff; /* default white */
  color: #111111;            /* default dark text */
}

/* Hide the default radio visually but keep it accessible */
.jsq-choice input[type="radio"] {
  margin: 0;
  width: 16px;
  height: 16px;
}

/* Hover state */
.jsq-choice:hover {
  background-color: #eeeeee; /* light grey hover */
}

/* Selected state: make the entire choice burgundy with white text */
.jsq-choice:has(input[type="radio"]:checked) {
  background-color: #641220; /* burgundy */
  color: #ffffff;
  border-color: #641220;
}

/* Ensure span text inherits white when selected */
.jsq-choice:has(input[type="radio"]:checked) span {
  color: #ffffff;
}

/* Accessibility: focus ring */
.jsq-choice input[type="radio"]:focus-visible + span,
.jsq-choice:has(input[type="radio"]:focus-visible) {
  outline: 2px solid #8a1c2b33;
  outline-offset: 2px;
}


/* === Submit / navigation buttons hover === */
.jsq-app button:hover,
.jsq-app input[type="submit"]:hover {
  background-color: #641220 !important; /* brand burgundy */
  color: #ffffff !important;            /* ensure text stays white */
}