/* Home progress card: percentages by topic, no overlapping floating chips. */
.meter-card.available-exams-card {
  padding: 29px 31px 27px;
}
.available-exams-kicker {
  display: block;
  color: #b9c6c1;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
}
.meter-card .available-exams-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 17px;
}
.meter-card .available-exams-heading strong {
  display: inline;
  margin: 0;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
}
.available-exams-heading span {
  color: #d9e0dd;
  font-size: 14px;
  font-weight: 600;
}
.available-exams-list {
  display: grid;
  gap: 7px;
  border-top: 1px solid #ffffff1f;
  border-bottom: 1px solid #ffffff1f;
  padding: 12px 0;
}
.available-exams-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}
.available-exams-row > span {
  font-weight: 700;
}
.available-exams-row > b {
  color: #ffb09e;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  direction: ltr;
}
.available-exams-note {
  display: block;
  color: #b9c6c1;
  font-size: 11px;
  margin-top: 12px;
}

/* These replace the old hovering "instant feedback / mark for review" badges.
   They live below the progress card and never cover its content. */
.hero-status-indicators {
  position: absolute;
  z-index: 4;
  right: 45px;
  top: 390px;
  width: min(390px, 80%);
  display: flex;
  justify-content: center;
  gap: 9px;
  direction: rtl;
}
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.93);
  box-shadow: 0 8px 24px #12241f1f;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hero-status svg { flex: 0 0 auto; }
.hero-status b {
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
}
.readiness-status svg { color: var(--green); }
.excellence-status svg { color: var(--rust); }

.loading-screen > p {
  text-align: center;
  font-weight: 600;
}

@media (max-width: 680px) {
  .meter-card.available-exams-card {
    padding: 24px 25px 22px;
  }
  .meter-card .available-exams-heading strong {
    font-size: 42px;
  }
  .available-exams-row {
    font-size: 12px;
  }
  .hero-status-indicators {
    top: 330px;
    right: 9%;
    width: 82%;
    gap: 6px;
  }
  .hero-status {
    padding: 8px 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {

}

/* No status badges floating near or over the progress card. */
.hero-status-indicators,.hero-status{display:none!important;}
/* Two self-contained modes for each available topic exam. */
.exam-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;}
.exam-mode-buttons .card-button{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;min-width:0;padding:13px 8px;font-weight:750;}
.exam-mode-buttons .exam-entry{background:#17392f;color:#fff;border-color:#17392f;}
.exam-mode-buttons .practice-entry{background:#f8f4eb;color:#1d3830;border:1px solid #dfd7c9;}
.exam-mode-buttons button:hover{filter:brightness(.96);}
/* RTL pre-start panel, visually different for the two modes. */
.mode-intro-shell{direction:rtl;text-align:right;min-height:100vh;background:var(--paper);padding:0 max(22px,calc((100vw - 1160px)/2));}
.mode-topbar{margin-bottom:28px;}
.mode-intro-card{max-width:740px;margin:24px auto 80px;padding:clamp(25px,5vw,52px);background:#fffefa;border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 70px #1a312417;direction:rtl;text-align:right;}
.mode-intro-card h1{font-family:'Frank Ruhl Libre',serif;font-size:clamp(34px,5vw,54px);margin:12px 0 4px;color:var(--ink);}
.mode-intro-card h2{font-size:clamp(20px,3vw,27px);margin:18px 0 12px;color:var(--ink);}
.mode-intro-card p{line-height:1.85;text-align:right;font-size:16px;color:#43534e;}
.mode-intro-card .intro-subtitle{color:#7d827b;margin-top:0;}
.intro-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:17px;font-size:38px;font-weight:800;margin-top:22px;}
.intro-exam{background:#fce7d9;color:#b84b32;}
.intro-practice{background:#dff3ec;color:#19654c;}
.intro-facts{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.intro-facts span{display:inline-flex;align-items:center;gap:8px;background:#f5f2e9;padding:10px 14px;border-radius:12px;font-weight:650;color:#24483d;}
.mode-intro-card .intro-resume{padding:15px;border-radius:12px;background:#f9ecdd;color:#754831;}
.intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:23px;}
.intro-actions button{font-family:inherit;cursor:pointer;}
.quiz-mode-label{font-weight:750;color:#3e7564;}
.exam-timer,.practice-mode-note{margin:16px auto 6px;display:flex;gap:10px;align-items:center;justify-content:center;direction:rtl;text-align:center;color:#214c40;font-weight:700;}
.exam-timer{max-width:300px;border:1px solid #d6bfa8;background:#fff2e7;border-radius:14px;padding:10px 16px;}
.exam-timer strong{font-variant-numeric:tabular-nums;font-size:22px;color:#973c29;}
.timer-urgent{background:#fee2de;border-color:#ba382d;}
.practice-mode-note{font-size:13px;}
@media(max-width:500px){.exam-mode-buttons{gap:7px}.mode-intro-shell{padding:0 16px}.intro-actions button{width:100%}}

/* V6: reserve real document space for the complete progress card, including its shadow.
   It must not overflow a fixed-height hero and cover .stats-strip on phones. */
.hero .hero-visual {
  position: relative;
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: 510px;
  margin: 0 auto;
  padding: 22px 22px 32px;
  display: grid;
  align-items: center;
  isolation: isolate;
  box-sizing: border-box;
}
.hero .meter-card.available-exams-card {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  transform: none;
  box-sizing: border-box;
  box-shadow: 12px 14px 0 var(--paper-deep), var(--shadow);
}
.hero .available-exams-heading { flex-wrap: wrap; }
.hero .available-exams-note { line-height: 1.65; }
.exam-card .status-pill.new { display: none; }
@media (max-width: 680px) {
  .hero { gap: 22px; padding-bottom: 26px; }
  .hero .hero-visual { padding: 14px 10px 26px 14px; }
  .hero .meter-card.available-exams-card { padding: 24px; border-radius: 22px 7px; }
  .hero .available-exams-heading { gap: 8px; }
}