/* ============================================================
   MOCK EXAM — STYLES
   Extends the Liberty London design system for timed mock exams
   ============================================================ */

/* ─── SETUP VIEW ──────────────────────────────────────────── */
.mock-setup-section {
  padding: 3rem var(--pad-x);
  background: var(--bg);
  min-height: 60vh;
}
.mock-setup-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.mock-setup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.mock-setup-desc {
  font-family: var(--fb);
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin-top: .5rem;
}

.mock-config-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 2rem 2.5rem;
  margin-bottom: 1.5rem;
}
.mock-config-label {
  font-family: var(--fn);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.mock-config-hint {
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .08em;
}

/* Preset buttons */
.mock-preset-btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.mock-preset-btn {
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 70px;
  padding: 14px 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--ink);
  cursor: pointer;
  transition: all .18s;
  text-align: center;
}
.mock-preset-btn:hover {
  border-color: var(--border-g);
  background: rgba(43,82,64,.04);
}
.mock-preset-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.mock-custom-count {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mock-custom-label {
  font-family: var(--fn);
  font-size: .58rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock-custom-input {
  font-family: var(--fb);
  font-size: .92rem;
  color: var(--ink);
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: #fff;
  width: 100px;
  outline: none;
  transition: border-color .18s;
}
.mock-custom-input:focus { border-color: var(--green); }

/* Time card */
.mock-time-card { background: var(--bg2); }
.mock-time-row {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.mock-time-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mock-time-icon {
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--green);
  width: 24px;
  text-align: center;
}
.mock-icon-clock {
  width: 20px;
  height: 20px;
  color: var(--green);
}
.mock-time-val {
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  line-height: 1;
  margin-bottom: .15rem;
}
.mock-time-label {
  font-family: var(--fn);
  font-size: .54rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

/* Topic selection */
.mock-topic-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
}
.mock-topic-check {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--bg2);
  cursor: pointer;
  transition: background .15s;
}
.mock-topic-check:hover { background: #fff; }
.mock-topic-check.checked { background: rgba(43,82,64,.06); }
.mock-topic-check input { display: none; }
.mock-topic-check-icon { font-size: 1rem; }
.mock-topic-check-name {
  font-family: var(--fb);
  font-size: .88rem;
  color: var(--ink);
  flex: 1;
}
.mock-topic-check-count {
  font-family: var(--fn);
  font-size: .54rem;
  letter-spacing: .10em;
  color: var(--muted);
}

/* Start button */
.mock-start-row {
  text-align: center;
  padding: 2rem 0;
}
.mock-start-btn {
  font-size: .7rem !important;
  padding: 16px 48px !important;
  letter-spacing: .16em !important;
}
.mock-start-note {
  font-family: var(--fb);
  font-size: .82rem;
  color: var(--muted);
  margin-top: 1rem;
}

/* ─── EXAM VIEW ───────────────────────────────────────────── */
.mock-exam-topbar {
  background: #0d1a14;
  padding: .75rem var(--pad-x);
  position: sticky;
  top: var(--nav-h);
  z-index: 120;
}
.mock-exam-topbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mock-exam-topbar-left { display: flex; align-items: center; gap: 1.5rem; }
.mock-exam-topbar-center { text-align: center; }
.mock-exam-topbar-right { text-align: right; }

.mock-exam-title {
  font-family: var(--fn);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,240,232,.55);
}
.mock-exam-progress-text {
  font-family: var(--fn);
  font-size: .58rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(245,240,232,.35);
}

.mock-timer {
  font-family: var(--fd);
  font-size: 1.5rem;
  font-weight: 600;
  color: #f5f0e8;
  letter-spacing: .02em;
}
.mock-timer-warning { color: var(--tan); }
.mock-timer-danger { color: #e74c3c; animation: mockTimerPulse 1s infinite; }
@keyframes mockTimerPulse {
  50% { opacity: .6; }
}

.mock-submit-top-btn {
  color: rgba(245,240,232,.7) !important;
  border-color: rgba(245,240,232,.15) !important;
  font-size: .54rem !important;
}
.mock-submit-top-btn:hover {
  color: #f5f0e8 !important;
  border-color: rgba(245,240,232,.4) !important;
}

.mock-exam-progress-bar {
  height: 3px;
  background: rgba(13,26,20,.3);
}
.mock-exam-progress-fill {
  height: 100%;
  background: var(--green);
  transition: width .3s ease;
}

.mock-exam-body {
  display: flex;
  gap: 0;
  min-height: calc(100vh - var(--nav-h) - 60px);
}
.mock-exam-main {
  flex: 1;
  padding: 2.5rem var(--pad-x);
  max-width: 800px;
  margin: 0 auto;
}

/* Question header */
.mock-exam-q-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.mock-exam-q-num {
  font-family: var(--fn);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}

.mock-flag-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--muted);
  transition: all .18s;
  display: flex;
  align-items: center;
}
.mock-flag-btn:hover { border-color: var(--tan); color: var(--tan); }
.mock-flag-btn.flagged { border-color: var(--tan); color: var(--tan); background: rgba(196,169,107,.08); }
.mock-icon-flag { width: 14px; height: 14px; }

.mock-exam-q-stem {
  font-family: var(--fb);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.mock-exam-options {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}

.mock-exam-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1rem;
}
.mock-exam-nav-center { text-align: center; }
.mock-flag-text-btn {
  font-size: .56rem !important;
  letter-spacing: .10em !important;
}

/* Sidebar navigator */
.mock-exam-sidebar {
  width: 220px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  padding: 1.5rem 1rem;
  position: sticky;
  top: calc(var(--nav-h) + 51px);
  height: fit-content;
  max-height: calc(100vh - var(--nav-h) - 60px);
  overflow-y: auto;
}
.mock-sidebar-title {
  font-family: var(--fn);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.mock-q-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 1rem;
}
.mock-q-nav-item {
  font-family: var(--fn);
  font-size: .6rem;
  font-weight: 400;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink2);
  cursor: pointer;
  transition: all .15s;
}
.mock-q-nav-item:hover { border-color: var(--green); }
.mock-q-nav-item.current { background: var(--green); color: #fff; border-color: var(--green); }
.mock-q-nav-item.answered { background: rgba(43,82,64,.1); border-color: var(--border-g); }
.mock-q-nav-item.flagged { border-color: var(--tan); box-shadow: inset 0 -2px 0 var(--tan); }
.mock-q-nav-item.answered.flagged { background: rgba(43,82,64,.1); border-color: var(--tan); }

.mock-sidebar-legend {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.25rem;
}
.mock-legend-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fn);
  font-size: .5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock-legend-dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--border);
}
.mock-legend-dot--current { background: var(--green); border-color: var(--green); }
.mock-legend-dot--answered { background: rgba(43,82,64,.1); border-color: var(--border-g); }
.mock-legend-dot--flagged { border-color: var(--tan); box-shadow: inset 0 -2px 0 var(--tan); }
.mock-legend-dot--unanswered { background: #fff; }

.mock-sidebar-submit {
  width: 100%;
  font-size: .56rem !important;
}

/* ─── LOADING ─────────────────────────────────────────────── */
.mock-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  text-align: center;
  min-height: 40vh;
}

/* ─── RESULTS VIEW ────────────────────────────────────────── */
.mock-results-section {
  padding: 3rem var(--pad-x);
  background: var(--bg);
  min-height: 60vh;
}
.mock-results-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.mock-results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.mock-result-score-card {
  padding: 2.5rem;
  background: #fff;
  border: 1px solid var(--border);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.mock-result-passed { border-color: var(--border-g); }
.mock-result-failed { border-color: rgba(169,68,66,.15); }

.mock-result-badge {
  font-family: var(--fn);
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 14px;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.mock-result-passed .mock-result-badge { background: rgba(43,82,64,.1); color: var(--green); }
.mock-result-failed .mock-result-badge { background: rgba(169,68,66,.08); color: #a94442; }

.mock-result-score-row {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.mock-result-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  flex: 1;
}
.mock-result-stat { display: flex; flex-direction: column; }
.mock-result-stat-val {
  font-family: var(--fd);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: .25rem;
}
.mock-result-stat-label {
  font-family: var(--fn);
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.score-ring--fail { stroke: #a94442 !important; }

/* Topic breakdown */
.mock-topic-breakdown {
  margin-bottom: 2rem;
}
.mock-breakdown-title {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.mock-breakdown-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}
.mock-breakdown-topic {
  font-family: var(--fb);
  font-size: .88rem;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.mock-breakdown-bar-wrap {
  width: 120px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.mock-breakdown-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}
.mock-breakdown-score {
  font-family: var(--fn);
  font-size: .58rem;
  letter-spacing: .08em;
  color: var(--ink2);
  min-width: 45px;
  text-align: right;
}
.mock-breakdown-pct {
  font-family: var(--fd);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 40px;
  text-align: right;
}

/* Weak topics */
.mock-weak-topics {
  background: #fff;
  border: 1px solid var(--border);
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
}
.mock-weak-title {
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.mock-weak-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
}
.mock-weak-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--bg2);
}
.mock-weak-icon { font-size: 1rem; }
.mock-weak-name {
  font-family: var(--fb);
  font-size: .88rem;
  color: var(--ink);
  flex: 1;
}
.mock-weak-link {
  font-family: var(--fn);
  font-size: .54rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--green);
  transition: opacity .18s;
}
.mock-weak-link:hover { opacity: .7; }
.mock-weak-freq {
  font-family: var(--fn);
  font-size: .54rem;
  letter-spacing: .08em;
  color: var(--muted);
}

/* Review actions */
.mock-review-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  padding: 2rem 0;
}

/* ─── REVIEW VIEW ─────────────────────────────────────────── */
.mock-review-section {
  padding: 3rem var(--pad-x);
  background: var(--bg);
  min-height: 60vh;
}
.mock-review-inner {
  max-width: 800px;
  margin: 0 auto;
}
.mock-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.mock-review-filters {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.mock-review-filter-btn {
  font-family: var(--fn);
  font-size: .56rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transition: all .18s;
}
.mock-review-filter-btn:hover { border-color: var(--border-g); color: var(--green); }
.mock-review-filter-btn.active { background: var(--green); color: #fff; border-color: var(--green); }

.mock-review-result-badge {
  font-family: var(--fn);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 16px;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.mock-review-result-badge--correct { background: rgba(43,82,64,.08); color: var(--green); }
.mock-review-result-badge--incorrect { background: rgba(169,68,66,.06); color: #a94442; }

.mock-review-q-meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.mock-review-q-stem {
  font-family: var(--fb);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.mock-review-options {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}

.mock-option-badge {
  font-family: var(--fn);
  font-size: .5rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-left: auto;
}
.mock-option-badge--correct { background: rgba(43,82,64,.1); color: var(--green); }
.mock-option-badge--yours { background: rgba(169,68,66,.08); color: #a94442; }

.mock-review-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 2rem;
}
.mock-review-nav-text {
  font-family: var(--fn);
  font-size: .58rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── HISTORY VIEW ────────────────────────────────────────── */
.mock-history-section {
  padding: 3rem var(--pad-x);
  background: var(--bg);
  min-height: 60vh;
}
.mock-history-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.mock-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.mock-history-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  margin-bottom: 2.5rem;
}

.mock-history-table { margin-top: 2rem; }
.mock-history-row {
  display: grid;
  grid-template-columns: 1fr 100px 80px 80px 80px 60px;
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.mock-history-row-head {
  font-family: var(--fn);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock-history-cell {
  font-family: var(--fb);
  font-size: .85rem;
  color: var(--ink2);
}
.mock-history-cell--score {
  font-family: var(--fd);
  font-weight: 600;
  color: var(--ink);
}

.mock-result-tag {
  font-family: var(--fn);
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 500;
}
.mock-result-tag--pass { background: rgba(43,82,64,.08); color: var(--green); }
.mock-result-tag--fail { background: rgba(169,68,66,.06); color: #a94442; }

.mock-history-link {
  font-family: var(--fn);
  font-size: .56rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--green);
  transition: opacity .18s;
}
.mock-history-link:hover { opacity: .7; }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mock-exam-sidebar { display: none; }
  .mock-exam-main { max-width: 100%; }
}

@media (max-width: 900px) {
  .mock-history-stats { grid-template-columns: repeat(2, 1fr); }
  .mock-result-score-row { flex-direction: column; gap: 1.5rem; text-align: center; }
  .mock-result-stats { justify-content: center; }
  .mock-history-row { grid-template-columns: 1fr 80px 60px 60px; }
  .mock-history-row > :nth-child(4),
  .mock-history-row > :nth-child(6) { display: none; }
  .mock-time-row { gap: 1.5rem; }
}

@media (max-width: 640px) {
  .mock-config-card { padding: 1.5rem; }
  .mock-preset-btn { min-width: 55px; padding: 10px 14px; font-size: .95rem; }
  .mock-time-row { flex-direction: column; gap: .75rem; }
  .mock-topic-select-grid { grid-template-columns: 1fr; }
  .mock-exam-topbar-inner { flex-wrap: wrap; justify-content: center; gap: .5rem; }
  .mock-result-score-card { padding: 1.5rem; }
  .mock-weak-topics { padding: 1.5rem; }
  .mock-weak-list { grid-template-columns: 1fr; }
  .mock-breakdown-bar-wrap { width: 60px; }
  .mock-review-actions { flex-direction: column; align-items: center; }
  .mock-history-row { grid-template-columns: 1fr 60px 60px; }
  .mock-history-row > :nth-child(2),
  .mock-history-row > :nth-child(4),
  .mock-history-row > :nth-child(6) { display: none; }
  .mock-history-stats { grid-template-columns: 1fr 1fr; }
}