/* quiz-style.css - shared Palette B quiz styling
 *
 * Used by every "tutor-driven quiz with embedded sandboxes" page under
 * /workbench/static/quiz-*.html. Pairs with quiz-engine.js. The 5-element
 * pattern (prompt / sandbox / answer-entry / reveal / progress) is documented
 * in quiz-pattern-README.md.
 *
 * License: (c) 2026 Virtus Cyber Academy; license TBD.
 */

:root {
  --bg:        #0a0a0a;
  --fg:        #d0d0d0;
  --green:     #4ade80;
  --gold:      #fbbf24;
  --red:       #ef4444;
  --blue:      #6b9fcf;
  --pane-bd:   #2a2a2a;
  --pane-bg:   #131313;
  --code-bg:   #1a1a1a;
  --muted:     #707070;
  --mono:      'Geist Mono', 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 1.2rem;
  min-height: 100vh;
  line-height: 1.55;
}

main { max-width: 980px; margin: 0 auto; }

header.quiz-header {
  border-bottom: 1px solid var(--pane-bd);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

header.quiz-header h1 {
  color: var(--gold);
  font-size: 1.4rem;
  margin: 0 0 0.2rem 0;
}

header.quiz-header .subtitle {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

header.quiz-header .subtitle a { color: var(--green); text-decoration: none; }
header.quiz-header .subtitle a:hover { text-decoration: underline; }

.pedagogy-note {
  background: var(--pane-bg);
  border-left: 3px solid var(--gold);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.2rem;
  font-size: 0.88rem;
  color: var(--fg);
}
.pedagogy-note code {
  color: var(--gold); font-family: var(--mono); font-size: 0.9em;
  background: var(--code-bg); padding: 0.05rem 0.3rem; border-radius: 2px;
}
.pedagogy-note a { color: var(--gold); text-decoration: none; }
.pedagogy-note a:hover { text-decoration: underline; }

/* === progress strip === */
.progress-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.95rem;
  background: var(--pane-bg);
  border: 1px solid var(--pane-bd);
  border-radius: 4px;
  margin-bottom: 1.4rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  position: sticky;
  top: 0.5rem;
  z-index: 5;
}
.progress-strip .label { color: var(--muted); margin-right: 0.4rem; }
.progress-strip .dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--pane-bd);
  border-radius: 50%;
  background: var(--code-bg);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.progress-strip .dot:hover { border-color: var(--gold); color: var(--gold); }
.progress-strip .dot.attempted { border-color: var(--blue); color: var(--blue); }
.progress-strip .dot.correct { border-color: var(--green); color: var(--green); }
.progress-strip .totals { margin-left: auto; color: var(--muted); }
.progress-strip .totals strong { color: var(--green); }
.progress-strip .reset-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--pane-bd);
  padding: 0.3rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 3px;
  margin-left: 0.5rem;
}
.progress-strip .reset-btn:hover { border-color: var(--red); color: var(--red); }

/* === per-question card === */
.question-card {
  background: var(--pane-bg);
  border: 1px solid var(--pane-bd);
  border-left: 3px solid var(--pane-bd);
  border-radius: 4px;
  padding: 1rem 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.question-card.attempted { border-left-color: var(--blue); }
.question-card.correct { border-left-color: var(--green); }

.question-card .q-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}
.question-card .q-num {
  font-family: var(--mono);
  color: var(--gold);
  font-size: 0.85rem;
  min-width: 2.6rem;
}
.question-card .q-prompt {
  flex: 1;
  font-size: 1rem;
  color: var(--fg);
}
.question-card .q-prompt code {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--code-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
}

.question-card .q-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.7rem;
  font-family: var(--mono);
}

/* === embedded sandbox iframe === */
.sandbox-frame {
  width: 100%;
  height: 600px;
  border: 1px solid var(--pane-bd);
  border-radius: 4px;
  margin: 0.7rem 0 1rem 0;
  background: var(--bg);
}
.sandbox-frame.collapsed { display: none; }

.sandbox-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
  font-size: 0.83rem;
}
.sandbox-controls .label { color: var(--muted); margin-right: 0.3rem; }
.sandbox-controls a, .sandbox-controls button {
  color: var(--green);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--pane-bd);
  padding: 0.3rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  border-radius: 3px;
  cursor: pointer;
}
.sandbox-controls a:hover, .sandbox-controls button:hover {
  border-color: var(--green);
  background: rgba(74,222,128,0.07);
}

@media (max-width: 800px) {
  .sandbox-frame { height: 520px; }
}

/* === answer-entry: text input === */
.answer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.5rem;
}
.answer-row label {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.85rem;
}
.answer-row input[type="text"] {
  flex: 1 1 18rem;
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--pane-bd);
  padding: 0.45rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  border-radius: 3px;
}
.answer-row input[type="text"]:focus {
  outline: none;
  border-color: var(--green);
  color: var(--green);
}
.answer-row textarea {
  width: 100%;
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--pane-bd);
  padding: 0.5rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  border-radius: 3px;
  min-height: 4.5rem;
  resize: vertical;
}
.answer-row textarea:focus { outline: none; border-color: var(--green); }

/* === answer-entry: multiple choice === */
.choices {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.choices button {
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--pane-bd);
  padding: 0.55rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.choices button:hover { border-color: var(--green); color: var(--green); }
.choices button.selected {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(107,159,207,0.08);
}
.choices button.right {
  border-color: var(--green);
  color: var(--green);
  background: rgba(74,222,128,0.10);
}
.choices button.wrong {
  border-color: var(--red);
  color: var(--red);
  background: rgba(239,68,68,0.10);
}
.choices button:disabled { cursor: default; opacity: 0.85; }

/* === check + reveal buttons === */
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.7rem;
}
.btn-check {
  background: var(--code-bg);
  color: var(--green);
  border: 1px solid var(--green);
  padding: 0.45rem 0.95rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 3px;
}
.btn-check:hover { background: rgba(74,222,128,0.10); }
.btn-reveal {
  background: var(--code-bg);
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.45rem 0.95rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 3px;
}
.btn-reveal:hover { background: rgba(251,191,36,0.10); }

.feedback {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-family: var(--mono);
  min-height: 1.2rem;
}
.feedback.right { color: var(--green); }
.feedback.wrong { color: var(--red); }

.explanation {
  margin-top: 0.85rem;
  padding: 0.75rem 0.95rem;
  background: var(--code-bg);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
  font-size: 0.88rem;
  color: var(--fg);
  display: none;
}
.explanation.shown { display: block; }
.explanation code {
  color: var(--gold); font-family: var(--mono); font-size: 0.92em;
  background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 2px;
}
.explanation a { color: var(--green); text-decoration: none; }
.explanation a:hover { text-decoration: underline; }
.explanation strong { color: var(--gold); }

/* === footer === */
footer.quiz-footer {
  border-top: 1px solid var(--pane-bd);
  padding-top: 0.7rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.82rem;
}
footer.quiz-footer a { color: var(--green); text-decoration: none; }
footer.quiz-footer a:hover { text-decoration: underline; }

/* nothing-leaves-your-device callout */
.privacy-note {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: italic;
}