/* Practice & tests — styles specific to this section only.
 *
 * Everything else is already loaded on every /ielts page by study.css and
 * books.css: .bar, .card, .cards, .prow, .plist, .exercise, .ex-row,
 * .ex-stem, .ex-opt, .ex-check, .ex-answer, .ex-score, .audio-panel, .track,
 * .tlabel, .tscript, .reader, .rhead. Only what those don't already cover
 * lives here — no colour outside the existing --ok/--wrong/--trap/--example
 * contract.
 */

.px-note{color:var(--muted);font-size:14px}
.px-h2{font-size:13px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);
  margin:28px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.px-h2:first-child{margin-top:0;padding-top:0;border-top:0}

/* ── index: publisher → book → group ───────────────────────────────────── */
.px-pub{margin:0 0 30px}
.px-pub-title{font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--example);margin:0 0 12px}
.px-book{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px}
.px-book .t{font-weight:650;margin-bottom:3px}
.px-book .m{color:var(--muted);font-size:13px;margin-bottom:10px}
.px-group-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.px-kind{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;border-radius:5px;padding:2px 7px;flex-shrink:0}
.px-kind.unit{color:var(--example);background:var(--example-bg)}
.px-kind.test{color:var(--trap);background:var(--trap-bg)}
.px-gname{flex:1;min-width:120px}
.px-gcount{color:var(--muted);font-size:12.5px}
.px-best{color:var(--muted);font-size:12.5px;white-space:nowrap}
.px-best.have{color:var(--ok)}
.card.px-exam .m{display:flex;flex-wrap:wrap;gap:6px 10px}

/* ── index: progress strip → full tests by book → filtered book/section list ──
 * All of these are px- classes of their own: .card/.cards/.prow/.plist/.bar are
 * shared with the book pages and are not restyled here, only reused.
 *
 * .prow and .card both set a display, which beats the UA's [hidden] rule — so
 * the filter, which works by toggling `hidden`, needs this one blanket line to
 * bite. Scoped to #pxIndex so no other page changes.
 */
#pxIndex [hidden]{display:none !important}

.px-prog{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:18px 0 6px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.px-stat b{display:block;font-size:21px;line-height:1.2;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}
.px-stat span{display:block;color:var(--muted);font-size:12.5px}
.px-stat .px-of{display:inline;font-size:15px;color:var(--muted);font-weight:600}
.px-stat-last{min-width:0;flex:1 1 220px}
.px-stat-last span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-prog-link{margin-left:auto;color:var(--example);text-decoration:none;font-size:13.5px;white-space:nowrap}
.px-prog-link:hover{text-decoration:underline}
.px-prog-empty{display:block;border-left:3px solid var(--example);background:var(--example-bg);
  border-radius:0 11px 11px 0}
.px-prog-empty b{color:var(--example);font-size:13px;letter-spacing:.4px}
.px-prog-empty span{font-size:14.5px}
.px-prog-off{padding:10px 16px}

/* full tests, one block per book */
.px-testbook{margin:0 0 6px}
.px-tb-head{font-size:15px;margin:22px 0 0;font-weight:650}
.px-tb-head .px-tb-meta{color:var(--muted);font-size:12.5px;font-weight:400;margin-left:8px}
.px-testbook .cards{margin:11px 0 0}
.card.px-exam .px-best{display:block;margin-top:10px}
.px-chip{font-size:12px;border-radius:5px;padding:2px 7px;background:#1d1d47;color:var(--muted)}
.px-chip-skill{color:var(--example);background:var(--example-bg)}
.px-chip-short{color:var(--trap);background:var(--trap-bg)}
.px-chip-audio{color:var(--ok);background:var(--ok-bg)}
.px-chip-noaudio{color:var(--trap);background:var(--trap-bg)}

/* skill filter + search */
.px-filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 10px}
.px-skills{display:flex;flex-wrap:wrap;gap:5px}
.px-chipbtn{background:#1d1d47;color:var(--muted);border:1px solid var(--line);border-radius:8px;
  padding:7px 12px;font:inherit;font-size:13px;cursor:pointer}
.px-chipbtn:hover{color:var(--text);border-color:var(--muted)}
.px-chipbtn.on{color:var(--example);background:var(--example-bg);border-color:var(--example)}
.px-search{flex:1;min-width:190px;background:#0f0f2c;color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:9px 13px;font:inherit;font-size:14px}
.px-search:focus{outline:none;border-color:var(--example)}
.px-filter-note{margin:0 0 14px}

/* one collapsed row per book, its sections underneath */
.px-bookblock{margin-bottom:6px}
.px-brow{align-items:center;cursor:pointer;user-select:none}
.px-brow:hover{border-color:var(--example)}
.px-caret{color:var(--muted);width:12px;flex-shrink:0}
.px-bname{flex:1;min-width:120px;font-weight:650}
.px-bpub{color:var(--muted);font-weight:400;font-size:12.5px;margin-left:9px}
.px-bcount{white-space:nowrap}
.px-sections{margin:5px 0 0 0;padding-left:18px}

/* ── runner ─────────────────────────────────────────────────────────────── */
.px-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 12px}
.px-timer.low{color:var(--wrong);border-color:var(--wrong)}
.px-item-meta{color:var(--muted);font-size:12.5px;margin:-4px 0 10px}
.ex-opt.picked{border-color:var(--example);background:var(--example-bg)}

/* ── runner: the paper's recordings, one panel above question 1 ───────────────
 * A Listening paper is one press of play, so exam mode hoists every track out of
 * the exercise blocks into a single .audio-panel at the top (.px-audio) and
 * collapses it into a slim fixed bar (.px-abar) under the site header once you
 * have scrolled past it. Exercise mode is untouched — its .audio-panel still sits
 * inside .exercise. Colours stay on the existing --example/--muted contract.
 */
.px-audio{margin:0 0 24px}
.px-audio .px-ahint{color:var(--muted);font-size:12.5px;margin:-4px 0 12px}
.px-audio .px-ascope{color:var(--text);font-weight:650}
.px-audio .tlabel{min-width:0;flex:1 1 100%}
.px-audio-none .px-note{margin:0}

.px-abar{position:fixed;top:0;left:0;right:0;z-index:19;
  background:#151535f2;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.px-abar[hidden]{display:none}
.px-abar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:7px 22px}
.px-abar button{background:var(--example-bg);color:var(--example);border:1px solid var(--example);
  border-radius:8px;font:inherit;cursor:pointer;flex-shrink:0}
.px-abar button:hover{filter:brightness(1.25)}
.px-abar-play{width:38px;height:32px;font-size:13px;line-height:1}
.px-abar-top{height:32px;padding:0 10px;font-size:13px}
.px-abar-track{flex:1;min-width:0;font-size:13.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-abar-time{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;flex-shrink:0}

.px-submitbar{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;
  background:#151535ee;backdrop-filter:blur(8px);border-top:1px solid var(--line);
  padding:14px 4px;margin-top:24px}
.px-submitbar #pxSubmitBtn{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);
  border-radius:9px;padding:12px 22px;font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.px-submitbar #pxSubmitBtn:hover{filter:brightness(1.15)}
.px-savenote{color:var(--muted);font-size:13px}
.px-savenote.warn{color:var(--trap)}

.px-result{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin:22px 0}
.px-result .score{font-size:26px;font-weight:700}
.px-result .row{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:8px}

/* ── history ────────────────────────────────────────────────────────────── */
.px-hist-group{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:14px}
.px-hist-group h3{margin:0 0 3px;font-size:15px}
.px-hist-group .m{color:var(--muted);font-size:12.5px;margin-bottom:10px}
.px-attempt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 0;border-top:1px solid #21214d}
.px-attempt-row:first-of-type{border-top:none}
.px-attempt-row a{color:var(--text);text-decoration:none;font-weight:650}
.px-attempt-row a:hover{color:var(--example)}
.px-a-score{min-width:56px}
.px-a-date{color:var(--muted);font-size:12.5px}
.px-a-delta{font-size:12.5px;color:var(--muted)}
.px-a-delta.up{color:var(--ok)}
.px-a-delta.down{color:var(--wrong)}
.px-a-del{margin-left:auto;color:var(--muted);background:transparent;border:1px solid var(--line);
  border-radius:6px;padding:5px 9px;font-size:12px;cursor:pointer}
.px-a-del:hover{color:var(--wrong);border-color:var(--wrong)}

/* ── review ─────────────────────────────────────────────────────────────── */
.px-review-row{border-top:1px solid #21214d;padding:12px 0;font-size:14.5px}
.px-review-row:first-of-type{border-top:none}
.px-review-row.right{color:var(--ok)}
.px-review-row.wrong{color:var(--wrong)}
.px-mark{font-weight:700;margin-right:8px}
.px-review-row .px-given{color:var(--muted);font-size:13.5px}
.px-review-row .px-correct{color:var(--ok);font-size:13.5px}
.px-review-row.wrong .px-given{color:var(--text)}

/* ── mobile — follow the site's own breakpoints (760px, 380px) ────────────── */
@media (max-width: 760px) {
  .px-abar-in{padding:6px 14px;gap:8px}
  .px-abar-track{font-size:12.5px}
  .px-group-row{gap:6px}
  .px-best{width:100%}
  .px-submitbar{padding:12px 8px;flex-wrap:wrap}
  .px-submitbar #pxSubmitBtn{width:100%}
  .px-attempt-row{gap:8px}
  .px-a-del{margin-left:0;padding:9px 12px}
  .px-result .score{font-size:23px}
}
/* 400px and below: the bar keeps play, the track name and the clock — the "back to
   the player" button is the one thing that can go, since the panel is one scroll up. */
@media (max-width: 420px) {
  .px-abar-in{padding:6px 11px;gap:7px}
  .px-abar-top{display:none}
  .px-abar-play{width:34px;height:30px}
  .px-abar-time{font-size:12px}
}
@media (max-width: 380px) {
  .px-book{padding:13px 14px}
  .px-hist-group{padding:13px 14px}
  .px-result{padding:16px}
}

.px-attempt-row.unfinished .px-a-score{color:var(--muted);font-style:italic}

/* ── index on a phone — same two breakpoints the rest of the site uses ───── */
@media (max-width: 760px) {
  .px-prog{gap:10px 20px;padding:12px 14px}
  .px-stat b{font-size:19px}
  .px-stat-last{flex:1 1 100%}
  .px-prog-link{margin-left:0}
  .px-filters{gap:8px}
  .px-search{min-width:0;flex:1 1 100%;padding:11px 13px}
  .px-chipbtn{padding:9px 12px}          /* ≥44px touch target with the line-height */
  .px-brow{flex-wrap:wrap}
  .px-bcount{width:100%}
  .px-sections{padding-left:9px}
  .px-tb-head{margin-top:18px}
}
@media (max-width: 380px) {
  .px-prog{padding:11px 12px}
  .px-testbook .cards{gap:9px}
  .px-bpub{margin-left:0;display:block}
  .px-chip{font-size:11.5px}
}