/* Hallmark · genre: atmospheric · macrostructure: Workbench · design-system: design.md · designed-as-app
 * Exam theme bridge — re-themes the obfuscated exam JS UI (th-* classes) onto
 * the Cyber Dark design system without touching the obfuscated js/exam.js.
 * Loaded AFTER themehackers.css so overrides win at equal specificity. */

:root {
  /* Bridge the legacy --th-* palette onto Hallmark tokens */
  --th-primary: var(--color-accent);
  --th-secondary: var(--color-surface);
  --th-accent: var(--color-cyan);
  --th-dark: var(--color-paper);
  --th-light: var(--color-text);
  --th-gradient: linear-gradient(135deg, var(--color-accent) 0%, #0d9e74 50%, var(--color-cyan) 100%);
  --th-glow: 0 0 20px rgba(16, 185, 129, 0.25);
  --th-danger: #ff4757;
  --th-warning: #ffc107;
  --th-info: var(--color-cyan);
}

/* Base surface */
body {
  background: var(--color-paper) !important;
  font-family: var(--font-sans) !important;
  color: var(--color-text) !important;
}

/* Strip the legacy matrix/radial background noise */
body::before { display: none !important; }
.matrix-bg { display: none !important; }

/* Exam card */
.th-container.th-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-cyber) !important;
  color: var(--color-text) !important;
  /* Long answer strings (paths, payloads, code) must wrap, never overflow */
  overflow-wrap: anywhere;
  overflow-x: clip;
}

/* Headings & text */
.th-card h2,
.th-section-title {
  color: var(--color-accent) !important;
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  letter-spacing: -0.02em;
}
.th-text-primary { color: var(--color-accent) !important; }

/* Progress bar */
.th-progress {
  background: var(--color-paper-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
}
.th-progress-bar {
  background: var(--th-gradient) !important;
  border-radius: var(--radius-pill) !important;
}

/* Choice options */
.th-choice-label {
  background: var(--color-paper-elevated) !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  /* multi-line answers: align radio to the first line, wrap long text */
  align-items: flex-start !important;
  overflow-wrap: anywhere !important;
  min-width: 0;
}
.th-choice-radio {
  flex: 0 0 auto !important;
  margin-top: 0.22em !important;
}
.th-choice-label:hover {
  border-color: var(--color-accent) !important;
  background: rgba(16, 185, 129, 0.07) !important;
}
.th-choice-label.selected {
  border-color: var(--color-accent) !important;
  background: rgba(16, 185, 129, 0.13) !important;
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 18px rgba(16, 185, 129, 0.15) !important;
}
.th-choice-radio { accent-color: var(--color-accent) !important; }

/* Buttons */
.th-btn-primary {
  background: var(--th-gradient) !important;
  color: #04150d !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  padding: 0.8rem 1.4rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.th-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -6px rgba(16, 185, 129, 0.45) !important;
}
.th-btn-outline-primary {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  padding: 0.8rem 1.4rem !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}
.th-btn-outline-primary:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

/* Alerts */
.th-alert {
  border-radius: var(--radius-md) !important;
  padding: 0.9rem 1.1rem !important;
  border: 1px solid var(--color-border) !important;
}
.th-alert-success {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: var(--color-border-accent) !important;
  color: var(--color-accent) !important;
}
.th-alert-danger {
  background: rgba(255, 71, 87, 0.1) !important;
  border-color: rgba(255, 71, 87, 0.35) !important;
  color: #ff6b7d !important;
}

/* Section performance summary */
.th-section-summary {
  background: var(--color-paper-elevated) !important;
  border: 1px solid var(--color-border-accent) !important;
  border-radius: var(--radius-md) !important;
}
.th-section-bar {
  background: var(--color-paper) !important;
  border-radius: var(--radius-pill) !important;
}
.th-section-bar-inner {
  background: var(--th-gradient) !important;
  border-radius: var(--radius-pill) !important;
}

/* Review list */
.th-review-q {
  background: var(--color-paper-elevated) !important;
  border-radius: var(--radius-md) !important;
  border-left: 5px solid var(--color-text-dim) !important;
  box-shadow: none !important;
  overflow-wrap: anywhere;
}
.th-review-q.correct { border-left-color: var(--color-accent) !important; }
.th-review-q.incorrect { border-left-color: var(--th-danger) !important; }
.th-review-choice { border-radius: var(--radius-sm) !important; }
/* The engine renders review rows as flex (icon span + text), which fragments
   long answers into stray pieces. Block flow lets icon + letter + text wrap
   together as one clean paragraph. */
.th-review-choice {
  display: block !important;
  overflow-wrap: anywhere;
}
.th-review-icon {
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: -0.05em;
}
.th-review-choice.correct {
  color: var(--color-accent) !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
.th-review-choice.incorrect {
  color: #ff6b7d !important;
  background: rgba(255, 71, 87, 0.08) !important;
}
.th-review-choice.user {
  border-color: var(--color-cyan) !important;
  background: rgba(6, 182, 212, 0.07) !important;
}

/* Fade-in stays subtle */
@keyframes thFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.th-fade-in { animation: thFadeIn 0.25s ease !important; }