/* ========================================================
   EST I Literacy Prep – Styles
   Aesthetic: clean official exam booklet · dark navy header
   Font: Georgia for passages, clean sans for UI
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --est-navy:       #1a2b4a;
  --est-navy2:      #243560;
  --est-accent:     #c8102e;   /* red accent — EST official red */
  --est-gold:       #b8860b;
  --est-blue-light: #e8edf6;
  --est-green:      #15803d;
  --est-green-bg:   #dcfce7;
  --est-red:        #b91c1c;
  --est-red-bg:     #fee2e2;
  --est-gray-50:    #f7f8fc;
  --est-gray-100:   #eef0f6;
  --est-gray-200:   #dde1ed;
  --est-gray-400:   #8a93b2;
  --est-gray-600:   #4e5a7a;
  --est-gray-800:   #1e2740;
  --est-white:      #ffffff;
  --est-font-body:  'DM Sans', system-ui, sans-serif;
  --est-font-serif: 'Libre Baskerville', Georgia, serif;
  --est-radius:     10px;
  --est-shadow:     0 2px 14px rgba(26,43,74,0.10);
  --est-shadow-lg:  0 8px 36px rgba(26,43,74,0.16);
}

.est-theme-dark {
  --est-gray-50:    #111827;
  --est-gray-100:   #1f2937;
  --est-gray-200:   #374151;
  --est-gray-400:   #6b7280;
  --est-gray-600:   #9ca3af;
  --est-gray-800:   #f3f4f6;
  --est-white:      #1f2937;
  --est-blue-light: #1e2a40;
  --est-shadow:     0 2px 14px rgba(0,0,0,0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.est-prep-wrap {
  font-family: var(--est-font-body);
  font-size: 15px;
  color: var(--est-gray-800);
  background: var(--est-gray-50);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--est-shadow-lg);
}

/* ── HEADER ── */
.est-header {
  background: var(--est-navy);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 4px solid var(--est-accent);
}
.est-header-brand { display: flex; align-items: center; gap: 16px; }

.est-logo-box {
  background: var(--est-white);
  border-radius: 8px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--est-font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--est-navy);
  letter-spacing: -1px;
  flex-shrink: 0;
}
.est-logo-tick {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.65rem;
  color: var(--est-accent);
}
.est-title {
  color: #fff;
  font-family: var(--est-font-body);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 2px;
}
.est-subtitle {
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.est-score-pill {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 8px 20px;
  text-align: center;
  min-width: 80px;
}
.est-score-val { display: block; color: #fff; font-size: 1.2rem; font-weight: 700; }
.est-score-lbl { display: block; color: rgba(255,255,255,0.6); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }

/* ── CONTROL PANEL ── */
.est-control-panel {
  background: var(--est-white);
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--est-gray-200);
}
.est-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--est-gray-400);
  margin-bottom: 10px;
}
.est-optional { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; }

/* Module tabs */
.est-module-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.est-module-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--est-gray-50);
  border: 2px solid var(--est-gray-200);
  border-radius: var(--est-radius);
  cursor: pointer;
  transition: all 0.16s;
  text-align: left;
  flex: 1;
  min-width: 160px;
}
.est-module-tab:hover { border-color: var(--est-navy2); background: var(--est-blue-light); }
.est-module-tab.active {
  border-color: var(--est-navy);
  background: var(--est-blue-light);
  box-shadow: 0 0 0 3px rgba(26,43,74,0.1);
}
.est-tab-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--est-gray-200);
  color: var(--est-gray-600);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.16s;
}
.est-module-tab.active .est-tab-num {
  background: var(--est-navy);
  color: #fff;
}
.est-tab-title { display: block; font-weight: 600; font-size: 0.9rem; color: var(--est-gray-800); }
.est-tab-desc  { display: block; font-size: 0.75rem; color: var(--est-gray-600); margin-top: 1px; }

/* Subtypes */
.est-subtype-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 36px;
}
.est-sub-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-family: var(--est-font-body);
  background: var(--est-gray-100);
  border: 1.5px solid var(--est-gray-200);
  border-radius: 20px;
  cursor: pointer;
  color: var(--est-gray-600);
  transition: all 0.14s;
  font-weight: 500;
}
.est-sub-btn:hover { border-color: var(--est-navy2); color: var(--est-navy); }
.est-sub-btn.active {
  background: var(--est-navy);
  color: #fff;
  border-color: var(--est-navy);
}

/* Bottom controls */
.est-bottom-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.est-count-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--est-gray-600);
}
.est-select {
  padding: 8px 12px;
  border: 1.5px solid var(--est-gray-200);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--est-white);
  color: var(--est-gray-800);
  font-family: var(--est-font-body);
}

.est-generate-btn {
  padding: 11px 24px;
  background: var(--est-accent);
  color: #fff;
  border: none;
  border-radius: var(--est-radius);
  font-family: var(--est-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.16s, transform 0.1s;
}
.est-generate-btn:hover  { background: #a50e26; }
.est-generate-btn:active { transform: scale(0.98); }
.est-generate-btn:disabled { opacity: 0.55; cursor: not-allowed; }

@keyframes est-spin { to { transform: rotate(360deg); } }
.est-spinner { width: 16px; height: 16px; animation: est-spin 0.75s linear infinite; }

/* ── ERROR ── */
.est-error-box {
  margin: 14px 28px 0;
  padding: 12px 16px;
  background: var(--est-red-bg);
  border: 1px solid var(--est-red);
  border-radius: 8px;
  color: var(--est-red);
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.est-error-box button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--est-red);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  flex-shrink: 0;
}

/* ── QUESTIONS AREA ── */
.est-questions-area {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── SINGLE QUESTION CARD ── */
.est-q-card {
  background: var(--est-white);
  border: 1.5px solid var(--est-gray-200);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--est-shadow);
  transition: box-shadow 0.2s;
}
.est-q-card:hover { box-shadow: var(--est-shadow-lg); }

/* Card header bar */
.est-q-bar {
  background: var(--est-navy);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.est-q-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--est-accent);
  padding: 3px 11px;
  border-radius: 20px;
}
.est-q-module {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.12);
  padding: 3px 10px;
  border-radius: 20px;
}
.est-q-skill {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}
.est-q-type-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.est-badge-editing  { background: #fef3c7; color: #92400e; }
.est-badge-reading  { background: #dbeafe; color: #1e40af; }

/* Card body */
.est-q-body { padding: 20px 22px; }

/* Passage */
.est-passage-wrap {
  background: var(--est-gray-50);
  border: 1px solid var(--est-gray-200);
  border-left: 4px solid var(--est-navy);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.est-passage-source {
  font-size: 0.75rem;
  color: var(--est-gray-400);
  font-style: italic;
  margin-bottom: 8px;
}
.est-passage-text {
  font-family: var(--est-font-serif);
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--est-gray-800);
}
/* Highlighted underlined portion (for editing questions) */
.est-passage-text .est-underlined {
  text-decoration: underline;
  text-decoration-color: var(--est-accent);
  text-decoration-thickness: 2px;
  font-weight: 600;
  color: var(--est-accent);
}

/* Question stem */
.est-question-stem {
  font-size: 1rem;
  font-weight: 600;
  color: var(--est-gray-800);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Choices */
.est-choices { display: flex; flex-direction: column; gap: 9px; }
.est-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  border: 2px solid var(--est-gray-200);
  border-radius: 8px;
  background: var(--est-white);
  cursor: pointer;
  transition: all 0.14s;
  text-align: left;
  width: 100%;
  font-family: var(--est-font-body);
  font-size: 0.93rem;
  color: var(--est-gray-800);
  line-height: 1.55;
}
.est-choice:hover:not(:disabled) {
  border-color: var(--est-navy2);
  background: var(--est-blue-light);
}
.est-choice-letter {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--est-gray-100);
  color: var(--est-gray-600);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.14s;
  margin-top: 1px;
}
.est-choice-text { flex: 1; font-family: var(--est-font-serif); font-size: 0.9rem; }

/* Choice states */
.est-choice.est-selected { border-color: var(--est-navy); background: var(--est-blue-light); }
.est-choice.est-selected .est-choice-letter { background: var(--est-navy); color: #fff; }
.est-choice.est-correct  { border-color: var(--est-green); background: var(--est-green-bg); }
.est-choice.est-correct .est-choice-letter { background: var(--est-green); color: #fff; }
.est-choice.est-wrong    { border-color: var(--est-red); background: var(--est-red-bg); }
.est-choice.est-wrong .est-choice-letter { background: var(--est-red); color: #fff; }
.est-choice:disabled { cursor: default; }

/* Submit row */
.est-submit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.est-submit-btn {
  padding: 9px 22px;
  background: var(--est-navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--est-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
}
.est-submit-btn:hover    { background: var(--est-navy2); }
.est-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.est-result-badge {
  font-size: 0.83rem;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 20px;
  display: none;
}
.est-result-badge.correct { background: var(--est-green-bg); color: var(--est-green); display: inline-block; }
.est-result-badge.wrong   { background: var(--est-red-bg); color: var(--est-red); display: inline-block; }

/* Explanation */
.est-explanation {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--est-gray-600);
}
.est-explanation.visible { display: block; }
.est-explanation-title {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--est-gold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.est-theme-dark .est-explanation { background: #1f1a06; border-color: #854d0e; }

/* ── SKELETON LOADER ── */
.est-skeleton-wrap { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
@keyframes est-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.est-skel {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--est-gray-200) 25%, var(--est-gray-100) 50%, var(--est-gray-200) 75%);
  background-size: 1200px 100%;
  animation: est-shimmer 1.4s infinite linear;
}
.est-skel-bar      { height: 42px; border-radius: 12px 12px 0 0; }
.est-skel-passage  { height: 90px; margin-top: 4px; }
.est-skel-stem     { height: 24px; width: 65%; }
.est-skel-choice   { height: 44px; }

/* ── RESULTS PANEL ── */
.est-results-panel {
  padding: 0 28px 28px;
}
.est-results-inner {
  background: var(--est-white);
  border: 2px solid var(--est-navy);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 24px;
}
.est-results-title {
  background: var(--est-navy);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.est-results-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 28px 16px;
}
.est-stat-block { flex: 1; }
.est-stat-val {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--est-navy);
  line-height: 1;
}
.est-stat-key {
  display: block;
  font-size: 0.75rem;
  color: var(--est-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
}
.est-stat-divider {
  width: 1px;
  height: 50px;
  background: var(--est-gray-200);
  flex-shrink: 0;
}
#est-reset-btn { margin: 0 auto; display: flex; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .est-header         { flex-direction: column; align-items: flex-start; }
  .est-module-tabs    { flex-direction: column; }
  .est-module-tab     { min-width: unset; width: 100%; }
  .est-questions-area { padding: 16px; }
  .est-control-panel  { padding: 16px; }
  .est-results-stats  { gap: 0; }
  .est-stat-val       { font-size: 1.8rem; }
  .est-q-body         { padding: 16px; }
}