/* Practice test pages (practice-tests/*.html): the question list is the test,
   with a sticky progress bar, Submit and a result card (js/practice-runner.js). */

/* ── LEVEL BADGE ── */
.intro-level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.badge-basic        { background: var(--teal-pale); color: var(--teal-ink); }
.badge-intermediate { background: var(--orange-pale); color: var(--orange-ink); }
.badge-advanced     { background: var(--navy-pale); color: var(--navy); }

/* ── INTRO, LEVELS ── */
.pt-intro {
  background: white; border-radius: var(--radius-lg);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  padding: 32px; margin-bottom: 20px;
}
@media (max-width: 600px) { .pt-intro { padding: 24px 20px; } }
.pt-desc { font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 20px; }
.pt-small-h {
  font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
.pt-covers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.pt-covers li {
  font-family: var(--font-head); font-size: 13px; font-weight: 500; color: var(--navy);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.pt-start-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pt-start-note { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.pt-start-note strong { color: var(--navy); }
.pt-last-score {
  margin-top: 14px; font-family: var(--font-head); font-size: 13px; font-weight: 600;
  color: var(--teal-ink); background: var(--teal-pale); border-radius: var(--radius);
  padding: 8px 14px; display: inline-block;
}
.pt-last-score[hidden] { display: none; }

.pt-levels { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.pt-level-link {
  flex: 1; min-width: 150px; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: white; border: 2px solid var(--border);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  transition: border-color var(--transition);
}
.pt-level-link:hover { border-color: var(--navy); }
.pt-level-link[aria-current="page"] { border-color: var(--navy); background: var(--bg); cursor: default; }
.pt-level-link small { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.pt-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pt-dot-basic { background: var(--teal); }
.pt-dot-intermediate { background: var(--orange); }
.pt-dot-advanced { background: var(--navy); }

/* ── QUESTIONS ── */
.pt-questions [hidden] { display: none !important; }
.pt-questions > h2 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.pt-q-help { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
.pt-qlist { list-style: none; margin: 0; padding: 0; }
.pt-q {
  background: white; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 24px; margin-bottom: 14px;
  scroll-margin-top: 84px; /* clear of the sticky progress bar */
  /* Browsers lay out and draw only the questions near the screen, not all 45
     on load (and again when each web font arrives). Off-screen questions keep
     a placeholder height: the most common unanswered question's content height
     (median of 1,125 questions on 25 pages, 2026-11-10), and "auto" makes the
     browser remember a question's real height once it has been drawn. The text
     stays in the page for Ctrl+F, screen readers and search engines. */
  content-visibility: auto;
  contain-intrinsic-size: auto 142px;
}
@media (max-width: 600px) { .pt-q { padding: 18px 16px; } }
@media (max-width: 560px) { .pt-q { contain-intrinsic-size: auto 307px; } }
/* An address that points at one question (…#q30): the browser's smooth jump
   there on load would measure the questions above at their placeholder height
   and stop short of or past it, so every question is drawn, as before the rule
   above. #q1 ("Start with question 1") is left out: nothing sits above it. */
.pt-qlist:has(.pt-q:target:not(#q1)) .pt-q { content-visibility: visible; }
.pt-q-text { font-size: 16px; line-height: 1.65; font-weight: 500; color: var(--text); margin-bottom: 12px; }
.pt-q-num {
  font-family: var(--font-head); font-size: 11px; font-weight: 700; color: white;
  background: var(--navy); border-radius: 999px; padding: 2px 9px; margin-right: 8px;
  vertical-align: 2px; white-space: nowrap;
}
.pt-q.is-correct { border-color: var(--teal); }
.pt-q.is-wrong   { border-color: var(--rose); }
.pt-q.is-skipped { border-color: var(--orange); }
.pt-qlist.only-mistakes .pt-q.is-correct { display: none; }

/* Options: buttons, locked once one is picked */
.pt-q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .pt-q-opts { grid-template-columns: 1fr; } }
.pt-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--text);
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}
.pt-opt:hover:not([aria-disabled="true"]) { border-color: var(--navy); background: white; }
.pt-opt[aria-disabled="true"] { cursor: default; }
.pt-opt-letter {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--navy);
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
}
.pt-opt.is-correct { border-color: var(--teal); background: var(--teal-pale); color: var(--teal-ink); }
.pt-opt.is-wrong   { border-color: var(--rose); background: var(--rose-pale); color: var(--rose-ink); }
.pt-opt.is-dimmed  { opacity: .45; }
.pt-opt.is-correct .pt-opt-letter { background: var(--teal); color: var(--navy-dark); }
.pt-opt.is-wrong .pt-opt-letter   { background: var(--rose); color: white; }

/* Answer + explanation: in the HTML for search engines, shown once an option is picked (or after Submit) */
.pt-reveal { display: none; margin-top: 14px; }
.pt-q.is-answered .pt-reveal { display: block; }
.pt-verdict { font-family: var(--font-head); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.pt-q.is-correct .pt-verdict { color: var(--teal-ink); }
.pt-q.is-wrong .pt-verdict   { color: var(--rose-ink); }
.pt-q.is-skipped .pt-verdict { color: var(--orange-ink); }
.pt-answer {
  font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--teal-ink);
  background: var(--teal-pale); padding: 8px 12px; border-radius: 8px 8px 0 0;
}
.pt-answer:last-child { border-radius: 8px; }
.pt-exp { font-size: 14px; line-height: 1.6; color: var(--text); background: var(--bg); padding: 10px 12px; border-radius: 0 0 8px 8px; }

/* ── STICKY PROGRESS BAR ── */
.pt-bar {
  position: sticky; top: calc(var(--sticky-nav-height, 0px) + 8px); z-index: 20;
  display: flex; align-items: center; gap: 12px;
  background: white; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 10px 12px 10px 18px; margin-bottom: 16px;
}
.pt-bar-progress { flex: 1; min-width: 0; }
.pt-bar-label {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.pt-bar-right { color: var(--teal-ink); }
.pt-bar-wrong { color: var(--rose-ink); margin-left: 6px; }
.pt-bar-track { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.pt-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--orange)); border-radius: 3px; transition: width .3s; }
.pt-bar-next {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--navy);
  transition: border-color var(--transition);
}
.pt-bar-next:hover { border-color: var(--navy); }
@media (max-width: 560px) {
  .pt-bar { gap: 8px; padding: 8px 8px 8px 12px; }
  .pt-bar-next { padding: 7px 10px; }
  .pt-bar .btn-sm { padding: 8px 14px; }
  .pt-wide { display: none; }
}
.pt-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.pt-submit.is-ready { animation: ptPulse 1.6s ease-in-out 3; }
@keyframes ptPulse { 50% { box-shadow: 0 0 0 7px rgba(245,132,31,.3); } }

/* ── SUBMIT BOX UNDER THE LIST ── */
.pt-cta-bottom {
  background: white; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 24px; margin-top: 24px; text-align: center;
}
.pt-cta-bottom > p:first-child { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.pt-bottom-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pt-bottom-hint { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ── RESULT CARD (above the list after Submit) ── */
.pt-result { margin-bottom: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pt-result:focus { outline: none; }
.pt-result:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.report-hero {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 36px 28px 28px;
  color: white; text-align: center; position: relative; overflow: hidden;
}
.report-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
/* Bright result cards take dark navy text, the navy one white (palette rules in css/styles.css) */
.rh-basic { background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--navy-dark); }
.rh-intermediate { background: linear-gradient(135deg, var(--orange), var(--orange-light)); color: var(--navy-dark); }
.rh-advanced { background: linear-gradient(135deg, var(--navy-dark), var(--navy-light)); }
.rh-emoji { font-size: 48px; margin-bottom: 8px; position: relative; animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes popIn { from{transform:scale(.3);opacity:0} to{transform:scale(1);opacity:1} }
.report-hero .rh-grade { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: inherit; position: relative; margin: 0 0 4px; }
.rh-sub { font-size: 14px; margin-bottom: 22px; position: relative; }
.rh-stats { display: flex; justify-content: center; gap: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); flex-wrap: wrap; position: relative; }
.rh-basic .rh-stats, .rh-intermediate .rh-stats { border-top-color: rgba(15,35,71,.18); }
@media (max-width: 560px) {
  .rh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .report-hero { padding: 28px 18px 22px; }
}
.rhs-val { font-family: var(--font-head); font-size: 26px; font-weight: 800; display: block; }
.rhs-lbl { display: block; font-size: 11px; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

.pt-save {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: white; border: 1px solid var(--border); border-top: none;
  padding: 14px 20px; font-family: var(--font-head); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text);
}
.pt-save:empty { display: none; }
.pt-save > span { flex: 1; min-width: 220px; }
.pt-save a:not(.btn) { color: inherit; text-decoration: underline; }
.pt-save.is-ok    { background: var(--teal-pale); color: var(--teal-ink); }
.pt-save.is-warn  { background: var(--orange-pale); color: var(--orange-ink); }
.pt-save.is-guest { background: var(--orange-pale); color: var(--navy); }
.pt-result-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: white; border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 16px 20px;
}

/* ── SIDEBAR: related tests ── */
.pt-test-link { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bg); text-decoration: none; color: var(--text); }
.pt-test-link .pt-dot { margin-top: 4px; }
.pt-test-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-test-link:last-child { border-bottom: none; }
.pt-test-link:hover .pt-test-title { color: var(--orange-ink); }
.pt-test-title { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.pt-test-sub { font-size: 12px; line-height: 1.3; color: var(--text-muted); }