/* ============================================================
   Journeyman Wireman — Duo theme (system-wide)
   Loaded AFTER each page's inline <style>; cascade wins via
   load order + specificity. Re-themes the dark UI to a
   light, gamified Duolingo aesthetic across all simulator
   pages without changing any HTML class names or JS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&display=swap');

:root {
  /* Light Duo palette — flips dark tokens to light equivalents */
  --bg: #ffffff !important;
  --bg-soft: #fff8e7 !important;
  --surface: #ffffff !important;
  --surface-2: #f7f7f7 !important;
  --border: #e5e5e5 !important;
  --border-strong: #d0d0d0 !important;
  --ink: #3c3c3c !important;
  --ink-muted: #6a6a6a !important;
  /* Brand orange retained for continuity, but green is primary action */
  --accent: #3a8601 !important;
  --accent-2: #2e6a01 !important;
  --orange: #ff9600;
  --orange-dark: #e08400;
  --yellow: #ffc800;
  --yellow-dark: #d9a900;
  --blue: #147eb1;
  --blue-dark: #0e5d83;
  --good: #3a8601 !important;
  --good-dark: #2e6a01;
  --bad: #ff4b4b !important;
  --warn: #ff9600 !important;
  --green: #3a8601;
  --green-dark: #2e6a01;
  --green-bg: #d7ffb8;
}

/* ---------- Type ---------- */
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
}
h1, h2, h3, h4 { font-weight: 900 !important; letter-spacing: -0.01em !important; color: var(--ink) !important; }
h1 .accent { color: var(--green) !important; }

/* ---------- Brand mark (added by HTML) ---------- */
.brand-mark {
  width: 40px; height: 40px;
  background: var(--yellow); border-radius: 50%;
  border-bottom: 4px solid var(--yellow-dark);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-row {
  display: flex; align-items: center; gap: 10px;
}

/* ---------- Cards ---------- */
.card, .question, .filters, .qrow, .review-q, .breakdown details, .score-cell, .qbody {
  border-width: 2px !important;
  border-radius: 14px !important;
  background: #fff !important;
}
.card { padding: 22px !important; }
.card h2 { font-size: 18px !important; font-weight: 900 !important; margin-bottom: 8px !important; }
.card p { color: var(--ink-muted) !important; font-weight: 600 !important; }

/* ---------- Mode buttons (lesson tile feel) ---------- */
.mode-btn {
  background: #fff !important; color: var(--ink) !important;
  border: 2px solid var(--border) !important;
  border-bottom-width: 4px !important;
  border-radius: 16px !important;
  padding: 18px 16px !important;
  font-weight: 700 !important;
  transition: filter .12s, transform .06s, border-color .12s, border-bottom-width .06s !important;
}
.mode-btn:hover { border-color: var(--green) !important; transform: translateY(-2px) !important; }
.mode-btn:active { border-bottom-width: 2px !important; transform: translateY(2px) !important; }
.mode-btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; }
.mode-btn .name { font-weight: 900 !important; font-size: 16px !important; color: var(--ink) !important; }
.mode-btn .meta { color: var(--ink-muted) !important; font-weight: 600 !important; font-size: 13px !important; }
.pb { color: var(--green) !important; font-weight: 800 !important; }
.lock-note { color: var(--orange) !important; font-weight: 800 !important; }

/* ---------- Primary / Secondary buttons (Duo press) ---------- */
button.primary, .btn, .upgrade-banner a.btn {
  background: var(--green) !important; color: #fff !important;
  border: none !important; border-bottom: 4px solid var(--green-dark) !important;
  border-radius: 14px !important;
  font-weight: 900 !important; font-size: 15px !important;
  text-transform: uppercase !important; letter-spacing: 0.04em !important;
  padding: 12px 20px !important;
  transition: filter .12s, transform .06s, border-bottom-width .06s !important;
  cursor: pointer !important;
}
button.primary:hover, .btn:hover, .upgrade-banner a.btn:hover { filter: brightness(1.05) !important; }
button.primary:active, .btn:active, .upgrade-banner a.btn:active {
  border-bottom-width: 0 !important; transform: translateY(4px) !important;
}
button.secondary {
  background: #fff !important; color: var(--blue) !important;
  border: 2px solid var(--blue) !important; border-bottom-width: 3px !important;
  border-radius: 12px !important; font-weight: 800 !important;
  padding: 10px 18px !important;
  transition: filter .12s, transform .06s, border-bottom-width .06s !important;
}
button.secondary:hover { filter: brightness(1.05) !important; }
button.secondary:active { border-bottom-width: 0 !important; transform: translateY(3px) !important; }

/* ---------- Inputs ---------- */
.field input, .field select, .signup input[type="email"] {
  background: #fff !important; color: var(--ink) !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  font-weight: 600 !important; font-size: 15px !important;
  padding: 11px 14px !important;
}
.field input:focus, .field select:focus, .signup input[type="email"]:focus {
  outline: none !important; border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(28,176,246,0.15) !important;
}
.field label { font-weight: 800 !important; color: var(--ink-muted) !important; }

/* ---------- Drill bar (timer + progress) ---------- */
.drill-bar {
  background: #fff !important; border: 2px solid var(--border) !important;
  border-radius: 14px !important; padding: 14px 18px !important;
}
.drill-bar .timer { font-weight: 900 !important; font-size: 20px !important; color: var(--ink) !important; }
.drill-bar .timer.low { color: var(--orange) !important; }
.drill-bar .timer.crit { color: var(--bad) !important; }
.drill-bar .progress { color: var(--ink-muted) !important; font-weight: 700 !important; }

/* ---------- Multiple choice ---------- */
.mc-option {
  background: #fff !important; color: var(--ink) !important;
  border: 2px solid var(--border) !important;
  border-bottom-width: 4px !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-weight: 600 !important; font-size: 15px !important;
  transition: filter .1s, border-color .1s !important;
}
.mc-option:hover { border-color: var(--blue) !important; }
.mc-option.selected {
  border-color: var(--blue) !important;
  background: rgba(28,176,246,0.10) !important;
  color: var(--blue-dark) !important;
}
.mc-option .letter {
  width: 30px !important; height: 30px !important; border-radius: 8px !important;
  background: #f0f0f0 !important; color: var(--ink) !important;
  font-weight: 900 !important;
}
.mc-option.selected .letter { background: var(--blue) !important; color: #fff !important; }
.mc-stem, .qstem { font-weight: 600 !important; color: var(--ink) !important; }

/* ---------- Score grid (results) ---------- */
.score-cell {
  background: #fff !important; border: 2px solid var(--border) !important;
  border-radius: 16px !important; padding: 18px 14px !important;
}
.score-cell .label { font-weight: 800 !important; color: var(--ink-muted) !important; }
.score-cell .value {
  font-weight: 900 !important; font-size: 28px !important; color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}

/* ---------- Pills / badges ---------- */
.pill, .access-badge, .new-badge {
  font-weight: 800 !important; border-radius: 999px !important;
  border: 2px solid currentColor !important;
}
.pill.nec, .pill.easy { color: #1f6b00 !important; background: rgba(88,204,2,0.12) !important; }
.pill.calc { color: var(--orange-dark) !important; background: rgba(255,150,0,0.12) !important; }
.pill.medium { color: var(--orange-dark) !important; background: rgba(255,200,0,0.15) !important; }
.pill.hard { color: var(--bad) !important; background: rgba(255,75,75,0.12) !important; }
.access-badge.paid { background: var(--green) !important; color: #fff !important; border-color: var(--green-dark) !important; }
.access-badge.preview { background: #f0f0f0 !important; color: var(--ink-muted) !important; border-color: var(--border) !important; }
.new-badge { background: var(--yellow) !important; color: var(--ink) !important; border-color: var(--yellow-dark) !important; }

/* ---------- Review (post-exam) ---------- */
.review-q { background: #fff !important; border: 2px solid var(--border) !important; }
.review-q.ok-q { border-left-width: 5px !important; border-left-color: var(--green) !important; }
.review-q.bad-q { border-left-width: 5px !important; border-left-color: var(--bad) !important; }
.review-q.skipped-q { border-left-width: 5px !important; border-left-color: var(--ink-muted) !important; }
.review-q summary .status.ok { color: var(--green) !important; font-weight: 900 !important; }
.review-q summary .status.bad { color: var(--bad) !important; font-weight: 900 !important; }
.review-q .opt { background: #fafafa !important; border: 2px solid var(--border) !important; }
.review-q .opt.chosen-correct { border-color: var(--green) !important; background: rgba(88,204,2,0.10) !important; }
.review-q .opt.chosen-wrong { border-color: var(--bad) !important; background: rgba(255,75,75,0.10) !important; }
.review-q .opt.correct-not-chosen { border-color: var(--green) !important; background: rgba(88,204,2,0.06) !important; }
.review-q .ws { background: var(--bg-soft) !important; color: var(--ink) !important; font-weight: 600 !important; }

/* ---------- Question browser rows ---------- */
.qrow { background: #fff !important; border: 2px solid var(--border) !important; }
.qrow:hover { border-color: var(--green) !important; }
.qopt { background: #fafafa !important; border: 2px solid var(--border) !important; font-weight: 600 !important; }
.qopt.correct { border-color: var(--green) !important; background: rgba(88,204,2,0.10) !important; }
.ws { background: var(--bg-soft) !important; color: var(--ink) !important; font-weight: 600 !important; }

/* ---------- Upgrade / signup banner — flip from dark gradient to cream/yellow ---------- */
.upgrade-banner, .signup {
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%) !important;
  border: 3px solid var(--green) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 0 var(--green-dark) !important;
  padding: 22px !important;
}
.upgrade-banner h3, .signup h3 {
  color: var(--ink) !important; font-size: 18px !important; font-weight: 900 !important;
}
.upgrade-banner p, .signup p { color: var(--ink-muted) !important; font-weight: 600 !important; }
.signup .thanks {
  background: var(--green-bg) !important; color: #1f6b00 !important;
  border: 2px solid var(--green) !important; border-radius: 12px !important;
  padding: 12px 14px !important; font-weight: 800 !important; text-align: center !important;
}
.signup .thanks::before { content: '🎉 '; }

/* ---------- Footer ---------- */
footer {
  color: var(--ink-muted) !important; font-weight: 600 !important;
}
footer a { color: var(--blue) !important; font-weight: 800 !important; }

/* ---------- Misc ---------- */
.tagline { color: var(--ink-muted) !important; font-weight: 700 !important; }
.feedback.ok { color: var(--green) !important; font-weight: 800 !important; }
.feedback.bad { color: var(--bad) !important; font-weight: 800 !important; }
.qhint { color: var(--ink-muted) !important; font-weight: 600 !important; }

.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#fff;color:#1a1a1a;padding:10px 16px;border:2px solid #147eb1;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}