/* =====================================================================
   READING LIST — "EDITORIAL PRINT" PREMIUM REDESIGN
   ---------------------------------------------------------------------
   Scoped entirely to #reading-list so the LISTENING grid (shared .rl-card)
   is untouched. Deliberately a DIFFERENT visual language from listening's
   gold-vault / cursor-tilt cards:
     · signature drifting-orb + manuscript-column background
     · animated hero: gradient title sheen, count-up stats, segmented filter
     · editorial cards: ghost index numeral, filling spine rail, bookmark
       ribbon, animated title underline, the 3 passage topics revealing on
       hover, violet→lime "embossed" premium (vs listening's gold)
   All classes prefixed .rx-  (Reading eXperience).
   ===================================================================== */

#reading-list{ position:relative; overflow:hidden; }
#reading-list .wrap{ position:relative; z-index:1; max-width:1240px; padding:46px 24px 110px; }

/* ---- signature animated background ------------------------------------ */
.rx-bg{ position:absolute; inset:-40px; z-index:0; overflow:hidden; pointer-events:none;
  transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.rx-bg-orb{
  position:absolute; border-radius:50%; filter:blur(70px);
  opacity:.5; mix-blend-mode:screen;
}
.rx-bg-orb.o1{ width:520px; height:520px; left:-120px; top:-140px;
  background:radial-gradient(circle, rgba(198,242,78,.55), transparent 68%);
  animation:rxDrift1 22s ease-in-out infinite; }
.rx-bg-orb.o2{ width:480px; height:480px; right:-130px; top:60px;
  background:radial-gradient(circle, rgba(139,109,255,.50), transparent 68%);
  animation:rxDrift2 26s ease-in-out infinite; }
.rx-bg-orb.o3{ width:420px; height:420px; left:42%; bottom:-180px;
  background:radial-gradient(circle, rgba(78,224,242,.34), transparent 68%);
  animation:rxDrift3 30s ease-in-out infinite; }
/* faint vertical "manuscript columns" + a baseline rule grid */
.rx-bg-cols{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,
     rgba(255,255,255,.035) 0 1px, transparent 1px 96px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 16%, #000 78%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 16%, #000 78%, transparent);
}
.rx-bg-glyph{
  position:absolute; font-family:'Bricolage Grotesque', Georgia, 'Native Emoji', serif; font-weight:800;
  line-height:.8; color:rgba(255,255,255,.025); user-select:none;
  font-size:min(34vw,440px);
}
.rx-bg-glyph.g1{ top:-6%; right:2%; }
.rx-bg-glyph.g2{ bottom:-14%; left:-2%; font-size:min(26vw,340px); }
@keyframes rxDrift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,30px) scale(1.08);} }
@keyframes rxDrift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-46px,24px) scale(1.06);} }
@keyframes rxDrift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(30px,-34px) scale(1.1);} }

/* ---- hero ------------------------------------------------------------- */
.rx-hero{ margin:0 0 30px; }
.rx-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:2.4px; font-size:11.5px; font-weight:800;
  color:var(--lime); margin:0 0 14px;
}
.rx-eyebrow::before{ content:''; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--lime),transparent); }
.rx-eyebrow .rx-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--violet);
  box-shadow:0 0 10px var(--violet); animation:rxPulse 2.4s ease-in-out infinite; }
@keyframes rxPulse{ 0%,100%{ opacity:.5; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.15);} }

.rx-title{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800;
  font-size:clamp(38px,5.6vw,68px); line-height:1.02; letter-spacing:-1.5px;
  margin:0 0 16px; max-width:18ch;
}
.rx-title .rx-ink{
  background:linear-gradient(100deg,var(--text) 0%,var(--text) 34%,var(--lime) 50%,var(--violet) 64%,var(--text) 80%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:rxSheen 7s ease-in-out infinite;
}
@keyframes rxSheen{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }
.rx-sub{ color:var(--muted); font-size:16px; line-height:1.6; max-width:60ch; margin:0 0 26px; }

/* count-up stat strip */
.rx-stats{ display:flex; flex-wrap:wrap; gap:30px; margin:0 0 30px; }
.rx-stat{ display:flex; flex-direction:column; gap:2px; }
.rx-stat b{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:30px; line-height:1;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.rx-stat.accent b{ color:var(--lime); }
.rx-stat span{ font-size:12px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; font-weight:600; }
.rx-stat + .rx-stat{ position:relative; }
.rx-stat + .rx-stat::before{ content:''; position:absolute; left:-15px; top:3px; bottom:3px; width:1px;
  background:linear-gradient(180deg,transparent,var(--glass-line),transparent); }

/* ---- mode toggle: Full Tests / Single Passages ----------------------- */
.rx-modes{
  display:inline-flex; gap:5px; margin:0 0 22px; padding:5px;
  border-radius:16px; background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.rx-mode{
  -webkit-appearance:none; appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-weight:700; font-size:14px;
  color:var(--muted); padding:9px 18px; border-radius:12px;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .25s ease, background .3s ease, box-shadow .3s ease, transform .15s ease;
}
.rx-mode .rx-mode-ic{ font-size:15px; }
.rx-mode:hover{ color:var(--text); }
.rx-mode:active{ transform:scale(.97); }
.rx-mode.is-active{
  color:var(--on-lime);
  background:linear-gradient(135deg, var(--lime), #9ade3c);
  box-shadow:0 6px 18px -6px var(--ring-lime), inset 0 0 0 1px rgba(255,255,255,.15);
}
.rx-mode.is-active .rx-mode-ic{ filter:none; }
.rx-modes[hidden]{ display:none; }

/* ---- practice mode: Mock Test vs Casual --------------------------------
   A two-tile segmented control that sets the WHOLE exam contract (timed +
   fullscreen + locked vs stopwatch + relaxed). Distinct accents so the
   "serious" Mock tile reads differently from the calm Casual one. */
.rx-practice{
  display:inline-flex; gap:6px; margin:0 0 14px; padding:6px;
  border-radius:20px; background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.rx-practice-btn{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:11px; text-align:left;
  padding:10px 18px 10px 14px; border-radius:15px; color:var(--muted);
  background:transparent; position:relative; overflow:hidden;
  transition:color .25s ease, background .3s ease, box-shadow .35s ease, transform .15s ease;
}
.rx-practice-btn:active{ transform:scale(.98); }
.rx-practice-ic{
  font-size:20px; line-height:1; filter:grayscale(.35) opacity(.8);
  transition:filter .3s ease, transform .3s ease;
}
.rx-practice-txt{ display:flex; flex-direction:column; gap:2px; }
.rx-practice-txt b{ font-size:14.5px; font-weight:800; letter-spacing:.1px; }
.rx-practice-txt em{ font-size:11px; font-style:normal; font-weight:600; opacity:.7; letter-spacing:.2px; }
.rx-practice-btn:hover{ color:var(--text); background:var(--glass-2, rgba(255,255,255,.04)); }
.rx-practice-btn:hover .rx-practice-ic{ filter:none; transform:translateY(-1px); }
/* Casual = calm lime (matches the library accent). */
.rx-practice-btn[data-practice="casual"].is-active{
  color:var(--on-lime);
  background:linear-gradient(135deg, var(--lime), #9ade3c);
  box-shadow:0 8px 22px -8px var(--ring-lime), inset 0 0 0 1px rgba(255,255,255,.18);
}
/* Mock = focused indigo→violet "exam" identity. */
.rx-practice-btn[data-practice="mock"].is-active{
  color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 8px 22px -8px rgba(124,92,246,.6), inset 0 0 0 1px rgba(255,255,255,.18);
}
.rx-practice-btn.is-active .rx-practice-ic{ filter:none; transform:none; }
.rx-practice-btn.is-active .rx-practice-txt em{ opacity:.9; }

/* Practice-mode pill polish: breathing room, subtle motion, a soft glow that
   pulses gently on the active tile to draw the eye. The wrapper gets its own
   breathing room below (32px) so the test cards don't butt right up against
   the pill — one of the "amazing UI" asks from 2026-07-09. */
.rx-practice, .ll-practice{
  margin:22px 0 32px;
  box-shadow:0 8px 24px -14px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.35);
  transition:box-shadow .3s ease;
}
.rx-practice:hover, .ll-practice:hover{
  box-shadow:0 14px 34px -18px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
/* Gentle pulse on the ACTIVE tile so the choice reads at a glance without
   being loud. Respects reduced-motion (see @media below). */
@keyframes rxPracticePulseCasual{
  0%,100%{ box-shadow:0 8px 22px -8px var(--ring-lime), inset 0 0 0 1px rgba(255,255,255,.18); }
  50%    { box-shadow:0 12px 28px -6px var(--ring-lime), inset 0 0 0 1px rgba(255,255,255,.28); }
}
@keyframes rxPracticePulseMock{
  0%,100%{ box-shadow:0 8px 22px -8px rgba(124,92,246,.6),  inset 0 0 0 1px rgba(255,255,255,.18); }
  50%    { box-shadow:0 14px 30px -6px rgba(124,92,246,.75), inset 0 0 0 1px rgba(255,255,255,.28); }
}
.rx-practice-btn[data-practice="casual"].is-active{
  animation:rxPracticePulseCasual 4.5s ease-in-out infinite;
}
.rx-practice-btn[data-practice="mock"].is-active{
  animation:rxPracticePulseMock 4.5s ease-in-out infinite;
}
/* Soft shine that sweeps across the active tile on hover. */
.rx-practice-btn.is-active::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform:translateX(-140%); transition:transform .8s ease;
  pointer-events:none;
}
.rx-practice-btn.is-active:hover::before{ transform:translateX(140%); }
/* Bigger icon lift on hover for un-active tiles → invites the click. */
.rx-practice-btn:not(.is-active):hover .rx-practice-ic{ transform:translateY(-2px) scale(1.08); }
/* Amazing UI ask: separate the mode pill from the card grid visually with a
   thin luminous divider that fades to nothing. Only on the listening pill so
   we don't disturb reading's dense two-mode row. */
.ll-practice{ position:relative; }
.ll-practice::after{
  content:""; position:absolute; left:50%; bottom:-18px; transform:translateX(-50%);
  width:min(60%, 420px); height:1px;
  background:linear-gradient(90deg, transparent, var(--glass-line, rgba(148,163,184,.35)), transparent);
  pointer-events:none;
}
@media (max-width:520px){
  .rx-practice{ width:100%; }
  .rx-practice-btn{ flex:1; justify-content:center; padding:9px 10px; }
  .rx-practice-txt em{ display:none; }
  .rx-practice, .ll-practice{ margin:18px 0 26px; }
}
@media (prefers-reduced-motion:reduce){
  .rx-practice-btn.is-active{ animation:none !important; }
  .rx-practice-btn.is-active::before{ display:none; }
}

/* segmented filter with a sliding pill */
.rx-filter{
  position:relative; display:inline-flex; align-items:center; gap:2px;
  padding:5px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.rx-seg{
  position:relative; z-index:1; appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-weight:700; font-size:13.5px; color:var(--muted);
  padding:8px 16px; border-radius:999px; display:inline-flex; align-items:center; gap:7px;
  transition:color .25s ease;
}
.rx-seg span{
  font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px;
  background:var(--chip-bg); color:var(--muted); transition:all .25s ease;
}
.rx-seg:hover{ color:var(--text); }
.rx-seg.is-active{ color:var(--on-lime); }
.rx-seg.is-active span{ background:rgba(10,11,16,.18); color:var(--on-lime); }
/* sub-label inside a pill, e.g. "20 min" on the Passage filters */
.rx-seg-sub{ font-style:normal; font-weight:700; font-size:10.5px; opacity:.62; margin-left:6px; }
.rx-seg.is-active .rx-seg-sub{ opacity:.82; }
.rx-seg-pill{
  position:absolute; z-index:0; top:5px; height:calc(100% - 10px); left:5px; width:0;
  border-radius:999px; background:linear-gradient(135deg,var(--lime),#9ade3c);
  box-shadow:0 6px 18px -6px var(--ring-lime);
  transition:transform .42s cubic-bezier(.2,.85,.25,1), width .42s cubic-bezier(.2,.85,.25,1);
}

/* ---- card grid -------------------------------------------------------- */
.rx-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
@media (max-width:980px){ .rx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .rx-grid{ grid-template-columns:1fr; } }

/* ---- the editorial card ---------------------------------------------- */
.rx-card{
  --acc:var(--lime); --acc2:#7fe06a; --glow:rgba(198,242,78,.22);
  position:relative; display:flex; flex-direction:column; min-height:230px;
  padding:20px 22px 18px; border-radius:20px; isolation:isolate;
  text-decoration:none; color:var(--text);
  background:linear-gradient(180deg,rgba(28,31,42,.78),rgba(16,18,26,.86));
  border:1px solid var(--glass-line);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -30px rgba(0,0,0,.9);
  overflow:hidden;
  animation:rxCardIn .6s cubic-bezier(.16,1,.3,1) backwards;
  /* CAPPED — see the matching note on #listening-list .rl-card. `--i` is the
     test number (12-reading-exam.js), so with 86 cards the last one waited
     85 * 42ms = 3.6s at opacity:0 before it appeared. */
  animation-delay:calc(min(var(--i,0), 16) * 42ms);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease;
  transform-origin:center bottom;
}
@keyframes rxCardIn{
  0%{ opacity:0; transform:translateY(26px) scale(.97); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.rx-card.is-hidden{ display:none; }

/* filling spine rail on the left edge */
.rx-card .rx-spine{
  position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:20px 0 0 20px;
  background:linear-gradient(180deg,var(--acc),var(--acc2));
  transform:scaleY(.18); transform-origin:top; opacity:.5;
  transition:transform .5s cubic-bezier(.2,.85,.25,1), opacity .35s ease;
}
/* big ghost index numeral */
.rx-card .rx-num{
  position:absolute; top:-18px; right:6px; z-index:0;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:120px; line-height:1;
  color:rgba(255,255,255,.045); letter-spacing:-4px; pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
/* bookmark ribbon (tier) top-right */
.rx-ribbon{
  position:absolute; top:0; right:18px; z-index:3;
  padding:7px 9px 9px; border-radius:0 0 6px 6px;
  font-size:10px; font-weight:900; letter-spacing:.8px; text-transform:uppercase;
  color:var(--on-lime); background:linear-gradient(180deg,var(--acc),var(--acc2));
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  transform:translateY(-3px); transition:transform .4s cubic-bezier(.2,.85,.25,1);
  box-shadow:0 8px 16px -8px var(--glow);
}
.rx-card:hover .rx-ribbon{ transform:translateY(0); }

.rx-card-body{ position:relative; z-index:2; display:flex; flex-direction:column; height:100%; }
.rx-card .rx-eyebrow{ color:var(--muted); margin:0 0 7px; letter-spacing:1.4px; font-size:10.5px; }
.rx-card .rx-eyebrow::before{ display:none; }
.rx-card-title{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:20px; line-height:1.2;
  color:var(--text); margin:0 0 4px; position:relative; display:inline; width:fit-content;
  background-image:linear-gradient(90deg,var(--acc),var(--acc2));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s cubic-bezier(.2,.85,.25,1);
  padding-bottom:3px;
}
.rx-card:hover .rx-card-title{ background-size:100% 2px; }

/* the three passage topics — muted by default, brighten + slide on hover */
.rx-topics{ display:flex; flex-direction:column; gap:5px; margin:10px 0 12px; }
.rx-topic{
  display:flex; align-items:flex-start; gap:9px; min-width:0;
  font-size:12.5px; color:var(--muted); opacity:.78;
  transform:translateX(-3px); transition:transform .4s ease, opacity .35s ease, color .35s ease;
  transition-delay:calc(var(--t,0) * 60ms);
}
.rx-topic i{
  flex-shrink:0; width:17px; height:17px; margin-top:1px; border-radius:5px; font-style:normal;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:var(--acc);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-line);
  transition:all .35s ease;
}
/* A one-line ellipsis silently ate most passage titles on phones and tablets
   ("Russia's boreal forests and wild grasses co…") with no hover to reveal the
   rest. Clamp to two lines instead: cards stay tidy, titles stay readable. */
.rx-topic b{
  font-weight:600; min-width:0; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; overflow-wrap:break-word;
}
.rx-card:hover .rx-topic{ opacity:1; transform:translateX(0); color:var(--text); }
.rx-card:hover .rx-topic i{ color:var(--on-lime); background:var(--acc); border-color:transparent; }

/* footer: meta chips + CTA */
.rx-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; }
.rx-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.rx-chip{
  font-size:11px; font-weight:600; color:var(--muted);
  padding:3px 9px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--hairline);
  white-space:nowrap;
}
.rx-cta{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:12.5px; font-weight:800; color:var(--acc);
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.85,.25,1);
}
.rx-cta em{ font-style:normal; transition:transform .35s cubic-bezier(.2,.85,.25,1); }
.rx-card:hover .rx-cta{ opacity:1; transform:translateX(0); }
.rx-card:hover .rx-cta em{ transform:translateX(3px); }

/* hover lift + accent glow + spine fill + numeral pop */
.rx-card:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--acc) 38%, transparent);
  box-shadow:0 30px 60px -30px var(--glow), 0 10px 24px -18px rgba(0,0,0,.7);
}
.rx-card:hover .rx-spine{ transform:scaleY(1); opacity:1; }
.rx-card:hover .rx-num{ color:color-mix(in srgb, var(--acc) 16%, transparent); transform:translateY(3px); }

/* ---- FREE vs PREMIUM identity ---------------------------------------- */
.rx-card.rx-free{ --acc:var(--lime); --acc2:#7fe06a; --glow:rgba(198,242,78,.24); }
.rx-card.rx-premium{ --acc:var(--violet); --acc2:#b79bff; --glow:rgba(139,109,255,.30); }

/* premium ribbon shimmer */
.rx-premium .rx-ribbon{ overflow:hidden; color:#fff; }
.rx-premium .rx-ribbon::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%);
  background-size:240% 100%; background-position:-150% 0;
}
.rx-premium:hover .rx-ribbon::after{ animation:rxShimmer 1.15s ease; }
@keyframes rxShimmer{ to{ background-position:240% 0; } }

/* premium-locked: tease the title+topics, frost the rest, lock bar at the base */
.rx-card.is-locked .rx-topics,
.rx-card.is-locked .rx-meta{ filter:blur(3.5px); opacity:.5; }
.rx-lock{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:13px; font-size:12.5px; font-weight:800; color:var(--acc);
  background:linear-gradient(180deg,transparent,rgba(12,10,20,.92) 40%);
}
.rx-lock .rx-lock-ic{ display:inline-flex; transition:transform .3s ease; }
.rx-card.is-locked:hover .rx-lock .rx-lock-ic{ animation:rxLockFloat 1.3s ease-in-out infinite; }
@keyframes rxLockFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }

/* ---- completed treatment ----------------------------------------------
   "Aurora achievement" identity — cyan→blue→indigo, deliberately NOT green
   (lime is the free accent, so the old emerald pill vanished into it). The
   card accent vars flow into the ribbon / spine / underline / topics, the
   spine renders pre-filled ("this book is finished"), and the ✓ Band pill
   drifts its gradient + pulses a glow so done tests read at a glance. */
.rx-card.rx-done{
  --acc:#38bdf8; --acc2:#818cf8; --glow:rgba(59,130,246,.30);
  border-color:rgba(56,189,248,.30);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -30px rgba(0,0,0,.9),
             0 0 26px -10px rgba(59,130,246,.35);
}
.rx-card.rx-done .rx-ribbon{ color:#fff; animation:rxDonePulse 2.8s ease-in-out infinite; }
.rx-card.rx-done .rx-spine{ transform:scaleY(1); opacity:.85; }
.rx-band{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:11px; font-weight:800; color:#fff;
  padding:3px 10px 3px 4px; border-radius:999px;
  background:linear-gradient(120deg,#22d3ee,#3b82f6 45%,#818cf8 75%,#22d3ee);
  background-size:220% 220%;
  box-shadow:0 5px 16px -5px rgba(59,130,246,.65), inset 0 0 0 1px rgba(255,255,255,.22);
  animation:rxDoneDrift 4s ease-in-out infinite, rxDoneGlow 2.6s ease-in-out infinite;
}
.rx-band i{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; background:rgba(255,255,255,.94); color:#2563eb;
  font-style:normal; font-size:9px; font-weight:900; }
.rx-redo{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--acc); }
.rx-redo em{ font-style:normal; display:inline-block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.rx-card.rx-done:hover .rx-redo em{ transform:rotate(360deg); }
@keyframes rxDoneDrift{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
@keyframes rxDoneGlow{
  0%,100%{ box-shadow:0 5px 16px -5px rgba(59,130,246,.55), inset 0 0 0 1px rgba(255,255,255,.22); }
  50%    { box-shadow:0 7px 22px -3px rgba(99,102,241,.85), inset 0 0 0 1px rgba(255,255,255,.32); }
}
@keyframes rxDonePulse{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.22); }
}

/* ---- single-passage practice card ------------------------------------ */
.rx-card--single{ min-height:186px; }
.rx-timecap{
  display:inline-flex; align-items:baseline; gap:7px; align-self:flex-start;
  margin:12px 0 2px; padding:7px 13px; border-radius:12px;
  background:color-mix(in srgb, var(--acc) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  color:var(--acc); font-size:12px; font-weight:600;
  transition:background .3s ease, border-color .3s ease;
}
.rx-card--single:hover .rx-timecap{ background:color-mix(in srgb, var(--acc) 20%, transparent); }
.rx-timecap-ic{ font-size:13px; transform:translateY(1px); }
.rx-timecap b{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:19px; font-weight:800; line-height:1; }
.rx-card--single.is-locked .rx-timecap,
.rx-card--single.is-locked .rx-meta{ filter:blur(3.5px); opacity:.5; }

/* QuizBank words mined badge */
.rx-qb{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  color:var(--cyan); padding:2px 8px; border-radius:999px;
  background:rgba(78,224,242,.10); border:1px solid rgba(78,224,242,.28); }

/* ---- light-mode parity ----------------------------------------------- */
[data-theme="light"] #reading-list .rx-card{
  background:linear-gradient(180deg,#ffffff,#f7f8fb);
  border-color:rgba(20,30,50,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 34px -26px rgba(30,40,80,.4);
}
[data-theme="light"] #reading-list .rx-card .rx-num{ color:rgba(20,30,60,.05); }
[data-theme="light"] #reading-list .rx-bg-cols{ background-image:repeating-linear-gradient(90deg,rgba(20,30,60,.04) 0 1px,transparent 1px 96px); }
[data-theme="light"] #reading-list .rx-bg-glyph{ color:rgba(20,30,60,.035); }
[data-theme="light"] #reading-list .rx-lock{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.95) 40%); }
[data-theme="light"] #reading-list .rx-chip{ background:rgba(20,30,60,.04); }

/* ---- empty / loading -------------------------------------------------- */
#reading-list .rl-loading,#reading-list .rl-empty{ grid-column:1/-1; color:var(--muted); padding:40px; text-align:center; }
#reading-list .rl-empty{ border:1px dashed var(--glass-line); border-radius:16px; }

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #reading-list .rx-card{ animation:none; }
  #reading-list .rx-bg-orb{ animation:none; }
  #reading-list .rx-title .rx-ink{ animation:none; }
  #reading-list .rx-card:hover{ transform:translateY(-4px); }
  #reading-list .rx-eyebrow .rx-eyebrow-dot{ animation:none; }
  .rx-band{ animation:none; }
  .rx-card.rx-done .rx-ribbon{ animation:none; }
}

/* =====================================================================
   HERO — PREMIUM MOTION + 3D PASS  (2026-07-09)
   Scoped to #reading-list .rx-hero so the card grid below and the whole
   listening page are untouched. Three moving parts:
     1. cursor-driven 3D parallax — JS (rxWireParallax) sets --px/--py on
        .rx-hero; each layer sits at its own translateZ depth + shifts by a
        depth-scaled amount, so the header reads with real depth.
     2. staggered entrance — opacity + the INDIVIDUAL `translate` property
        (kept separate from `transform` so parallax never fights the reveal).
     3. a "magic-ink" practice toggle + floating gradient stat cards.
   ===================================================================== */
#reading-list .rx-hero{ perspective:1200px; transform-style:preserve-3d; }

/* depth stage: every hero layer floats at --z and parallax-shifts by --shift */
#reading-list .rx-hero > *{
  transform:translateZ(var(--z,0px))
            translate3d(calc(var(--px,0) * var(--shift,0px)),
                        calc(var(--py,0) * var(--shift,0px) * .68), 0);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
#reading-list .rx-eyebrow { --z:24px;  --shift:-8px;  }
#reading-list .rx-title   { --z:62px;  --shift:-24px; }
#reading-list .rx-sub     { --z:28px;  --shift:-11px; }
#reading-list .rx-practice{ --z:48px;  --shift:-17px; }
#reading-list .rx-modes   { --z:40px;  --shift:-14px; }
#reading-list .rx-filter  { --z:36px;  --shift:-13px; }

/* staggered entrance (opacity + individual translate — replays every visit
   because #reading-list toggles display:none between routes) */
@keyframes rxHeroRise{ from{ opacity:0; translate:0 34px; } to{ opacity:1; translate:0 0; } }
#reading-list .rx-eyebrow,
#reading-list .rx-title,
#reading-list .rx-sub,
#reading-list .rx-practice,
#reading-list .rx-modes{ animation:rxHeroRise .72s cubic-bezier(.16,1,.3,1) both; }
#reading-list .rx-eyebrow { animation-delay:.04s; }
#reading-list .rx-title   { animation-delay:.12s; }
#reading-list .rx-sub     { animation-delay:.22s; }
#reading-list .rx-practice{ animation-delay:.30s; }
#reading-list .rx-modes   { animation-delay:.36s; }
/* the stat-filter row's chips stagger in individually (the container itself
   only carries the parallax depth, so there's no double-reveal) */
#reading-list .rx-fchip{ animation:rxHeroRise .6s cubic-bezier(.16,1,.3,1) both; }
#reading-list .rx-fchip:nth-child(1){ animation-delay:.42s; }
#reading-list .rx-fchip:nth-child(2){ animation-delay:.48s; }
#reading-list .rx-fchip:nth-child(3){ animation-delay:.54s; }
#reading-list .rx-fchip:nth-child(4){ animation-delay:.60s; }

/* eyebrow: draw the accent dash in on entrance */
#reading-list .rx-eyebrow::before{ width:0; animation:rxDashIn .7s .55s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rxDashIn{ to{ width:24px; } }

/* title: soft aurora glow behind the wordmark (sits at the back of the stack) */
#reading-list .rx-title{ position:relative; isolation:isolate; }
#reading-list .rx-title::before{
  content:''; position:absolute; z-index:-1; left:-4%; top:-24%; width:62%; height:150%;
  background:radial-gradient(58% 60% at 42% 50%, rgba(139,109,255,.30), transparent 70%);
  filter:blur(34px); pointer-events:none; animation:rxGlowBreathe 6.5s ease-in-out infinite;
}
@keyframes rxGlowBreathe{ 0%,100%{ opacity:.5; transform:scale(.95); } 50%{ opacity:1; transform:scale(1.05); } }

/* ---- practice toggle: magic-ink sliding pill -------------------------- */
#reading-list .rx-practice{
  position:relative; display:inline-grid; grid-template-columns:1fr 1fr;
  gap:0; padding:6px; overflow:hidden;
}
/* the ink pill — slides + morphs colour between the two tiles */
#reading-list .rx-practice::before{
  content:''; position:absolute; z-index:0; top:6px; bottom:6px; left:6px; right:calc(50% + 4px);
  border-radius:15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 46%),
    linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 12px 26px -8px rgba(124,92,246,.6), inset 0 0 0 1px rgba(255,255,255,.22);
  transition:left .5s cubic-bezier(.34,1.42,.5,1), right .5s cubic-bezier(.34,1.42,.5,1),
             background .45s ease, box-shadow .45s ease;
}
#reading-list .rx-practice[data-active="casual"]::before{
  left:calc(50% + 4px); right:6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 46%),
    linear-gradient(135deg,var(--lime),#9ade3c);
  box-shadow:0 12px 26px -8px var(--ring-lime), inset 0 0 0 1px rgba(255,255,255,.28);
}
/* tiles ride on top of the ink; no per-tile fill of their own now */
#reading-list .rx-practice-btn{
  position:relative; z-index:1; background:transparent; box-shadow:none;
  color:var(--muted); justify-content:flex-start; min-width:0;
  transition:color .3s ease, transform .15s ease;
}
#reading-list .rx-practice-btn:hover{ background:transparent; color:var(--text); }
#reading-list .rx-practice-btn:active{ scale:.975; }
#reading-list .rx-practice-btn[data-practice="mock"].is-active{ color:#fff; background:transparent; box-shadow:none; }
#reading-list .rx-practice-btn[data-practice="casual"].is-active{ color:var(--on-lime); background:transparent; box-shadow:none; }
#reading-list .rx-practice-btn.is-active .rx-practice-txt em{ opacity:.92; }
/* the active tile's icon gets a gentle life of its own */
#reading-list .rx-practice-btn[data-practice="mock"].is-active .rx-practice-ic{ animation:rxAim 2.8s ease-in-out infinite; }
#reading-list .rx-practice-btn[data-practice="casual"].is-active .rx-practice-ic{ animation:rxBreathe 3.4s ease-in-out infinite; }
@keyframes rxAim{ 0%,100%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(-9deg) scale(1.14); } }
@keyframes rxBreathe{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.07); } }

/* ---- stat-filter chips: the numbers ARE the filter (one row, no dupes) --
   Each chip is a big count-up stat you click to filter the grid. Replaces the
   old decorative stat strip + separate pill row. */
#reading-list .rx-filter{
  display:flex; flex-wrap:wrap; gap:12px; align-items:stretch;
  padding:0; background:none; border:none; border-radius:0; backdrop-filter:none;
}
#reading-list .rx-fchip{
  -webkit-appearance:none; appearance:none; cursor:pointer; font:inherit; text-align:left;
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:11px 20px 12px; border-radius:17px;
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease, box-shadow .35s ease;
}
#reading-list .rx-fchip .rx-fchip-n{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:27px; line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--text) 0%, color-mix(in srgb, var(--violet) 60%, var(--text)) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#reading-list .rx-fchip .rx-fchip-l{
  font-size:11px; letter-spacing:.6px; text-transform:uppercase; font-weight:700; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
#reading-list .rx-fchip .rx-fchip-sub{ font-style:normal; font-weight:700; opacity:.62; letter-spacing:.2px; }
#reading-list .rx-fchip:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--lime) 40%, var(--glass-line));
  box-shadow:0 14px 30px -18px var(--ring-lime);
}
#reading-list .rx-fchip:active{ transform:translateY(-1px) scale(.985); }
/* the active filter = a lime-embossed chip; its number goes solid lime */
#reading-list .rx-fchip.is-active{
  background:linear-gradient(135deg, color-mix(in srgb, var(--lime) 22%, var(--glass)), color-mix(in srgb, var(--lime) 8%, var(--glass)));
  border-color:color-mix(in srgb, var(--lime) 55%, transparent);
  box-shadow:0 12px 28px -14px var(--ring-lime), inset 0 0 0 1px rgba(255,255,255,.06);
}
#reading-list .rx-fchip.is-active .rx-fchip-n{
  background:linear-gradient(135deg, var(--lime), #74c327);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#reading-list .rx-fchip.is-active .rx-fchip-l{ color:var(--text); }
@media (max-width:520px){
  #reading-list .rx-filter{ gap:8px; }
  #reading-list .rx-fchip{ padding:9px 14px 10px; flex:1 1 40%; }
  #reading-list .rx-fchip .rx-fchip-n{ font-size:23px; }
}

/* respect reduced motion for the whole hero pass */
@media (prefers-reduced-motion: reduce){
  #reading-list .rx-hero > *{ transform:translateZ(var(--z,0px)); transition:none; animation:none; opacity:1; translate:none; }
  #reading-list .rx-fchip{ animation:none; opacity:1; translate:none; }
  #reading-list .rx-fchip:hover{ transform:none; }
  #reading-list .rx-eyebrow::before{ width:24px; animation:none; }
  #reading-list .rx-title::before{ animation:none; }
  #reading-list .rx-practice-btn .rx-practice-ic{ animation:none !important; }
  #reading-list .rx-practice::before{ transition:none; }
}

/* ----- Mode chips on completed reading cards ----- */
/* Small pill next to the ✓ Band chip on done cards, showing the mode(s) the
   student has finished this test in. Casual = calm teal, Mock = bolder amber
   (matches the strict IELTS lockdown vibe). Multiple chips stack side-by-side.
   Container .rx-band already flex-rows, so we just add the chips inline. */
#reading-list .rx-mode-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; margin-right:6px; border-radius:999px;
  font-size:.72em; font-weight:700; line-height:1.4;
  letter-spacing:.02em; text-transform:uppercase;
  background:rgba(255,255,255,.55); backdrop-filter:blur(2px);
  border:1px solid rgba(0,0,0,.06);
  color:var(--text2, #4a5568);
  vertical-align:middle;
}
#reading-list .rx-mode-chip--casual{
  background:linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color:#6ee7b7; color:#065f46;
}
#reading-list .rx-mode-chip--mock{
  background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color:#fbbf24; color:#78350f;
}
[data-theme="dark"] #reading-list .rx-mode-chip--casual{
  background:linear-gradient(135deg, rgba(6,95,70,.35) 0%, rgba(6,95,70,.55) 100%);
  border-color:rgba(110,231,183,.4); color:#a7f3d0;
}
[data-theme="dark"] #reading-list .rx-mode-chip--mock{
  background:linear-gradient(135deg, rgba(146,64,14,.35) 0%, rgba(146,64,14,.55) 100%);
  border-color:rgba(251,191,36,.5); color:#fde68a;
}

/* ==========================================================================
   RESPONSIVE — phone gaps left by the ≤980 / ≤600 grid collapse above.
   ========================================================================== */
/* The page gutter is pinned by an ID selector (`#reading-list .wrap`), which
   outranks the site-wide phone gutter in core/31-responsive-global.css. Every
   other page tightens to 16px on a phone; the reading library alone kept 24px,
   i.e. 48px of a 390px viewport, which is exactly the space the one-column
   cards need. Vertical rhythm is left untouched. */
@media (max-width:560px){
  #reading-list .wrap{ padding-left:16px; padding-right:16px; }
}
/* Card footer: `.rx-meta` (wrapping chips) beside a `flex-shrink:0` ✓ Band pill
   that can carry two mode chips inside it. That pill needs ~200px and the row
   never wrapped, so on a 360px Android the "Band 7.5" text was cut off by the
   card's `overflow:hidden`. Let the pill drop to its own line instead. */
@media (max-width:480px){
  .rx-foot{ flex-wrap:wrap; }
}