/* Read aloud (Oct 29 2026) */
.ra-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-4px 0 4px}
.ra-bar.ra-gone{display:none}
.ra-btn{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px 0 14px;border-radius:999px;cursor:pointer;
  font:700 13.5px/1 var(--font-ui,system-ui);color:#d8ecff;background:linear-gradient(180deg,rgba(24,46,96,.9),rgba(10,20,46,.95));border:1px solid rgba(110,170,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 16px rgba(47,125,255,.25);transition:all .3s}
.ra-btn:hover:not(:disabled){border-color:#7dd8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 22px rgba(70,200,255,.5)}
.ra-btn:disabled{opacity:.5;cursor:default}
.ra-btn.ra-live{color:#fff;border-color:rgba(255,120,140,.8);background:linear-gradient(180deg,rgba(90,22,40,.9),rgba(40,10,22,.95));box-shadow:0 0 22px rgba(255,90,120,.45)}
.ra-meter{display:inline-flex;align-items:center;gap:2px;height:20px}
.ra-meter i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;opacity:.9;transform:scaleY(.3);transition:transform .08s}
.ra-btn.ra-live .ra-meter i{background:#ff7a90}
.ra-chip{font:600 12.5px/1.3 var(--font-ui,system-ui);color:var(--mut,#93a7c8)}
.rc.ra-on .rc-card .rw{transition:color .25s,text-shadow .25s,opacity .25s;opacity:.5}
.rc.ra-on .rc-card .rw-read{opacity:1;color:#8fe9ff;text-shadow:0 0 12px rgba(70,220,255,.65)}
.rc.ra-on .rc-card .rw-now{opacity:1;color:#fff;border-radius:4px;background:rgba(70,200,255,.22);box-shadow:0 0 0 3px rgba(70,200,255,.22)}
.rc.ra-on .rc-nav{opacity:.65}
.rc.ra-on.ra-done .rc-nav{opacity:1}
.rc.ra-finished .rc-card.rc-cur .rw{opacity:1;color:#aef5c9;text-shadow:none}
.ra-modal{position:fixed;inset:0;z-index:600;background:rgba(2,6,14,.74);display:flex;align-items:center;justify-content:center;padding:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ra-box{width:min(520px,100%);padding:26px 26px 22px;border-radius:20px;background:linear-gradient(180deg,rgba(18,36,76,.98),rgba(8,16,36,.99));border:1px solid rgba(110,170,255,.5);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(47,125,255,.25);color:var(--text,#eaf3ff)}
.ra-ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#7dd8ff;background:rgba(47,125,255,.2);border:1px solid rgba(110,170,255,.45);margin-bottom:12px}
.ra-box h3{font:800 20px/1.25 var(--font-disp,var(--font-ui,system-ui));margin:0 0 10px}
.ra-box p{margin:0 0 10px;font-size:14.5px;line-height:1.55}
.ra-box p.ra-fine{font-size:12.5px;color:var(--mut,#93a7c8)}
.ra-act{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.ra-act button{min-height:44px;padding:0 20px;border-radius:12px;font:800 14px/1 var(--font-disp,var(--font-ui,system-ui));cursor:pointer}
.ra-no{color:var(--mut,#93a7c8);background:rgba(20,34,68,.6);border:1px solid rgba(110,150,230,.3)}
.ra-yes{color:#fff;background:linear-gradient(180deg,#2f7dff,#1455e8 60%,#0e3fb8);border:1px solid rgba(120,200,255,.7);box-shadow:0 0 18px rgba(60,150,255,.5)}
@media (prefers-reduced-motion:reduce){.rc.ra-on .rc-card .rw,.ra-meter i{transition:none}}

.ra-off{margin-left:6px;color:var(--cyan,#46c8ff);text-decoration:underline;cursor:pointer}
.ra-btn.ra-offstate{opacity:.85}

/* listening: the card being read lights up brightly all the way round so the eye goes straight to it */
.rc.ra-on .rc-card.rc-cur{border-color:#8fe9ff;animation:raGlow 2.2s ease-in-out infinite;
  box-shadow:0 0 0 2px rgba(143,233,255,.95),0 0 26px 6px rgba(70,220,255,.75),0 0 70px 18px rgba(47,125,255,.45),0 14px 34px rgba(0,0,0,.42),inset 0 0 22px rgba(70,200,255,.18)}
@keyframes raGlow{0%,100%{box-shadow:0 0 0 2px rgba(143,233,255,.9),0 0 22px 4px rgba(70,220,255,.65),0 0 56px 12px rgba(47,125,255,.35),0 14px 34px rgba(0,0,0,.42),inset 0 0 18px rgba(70,200,255,.14)}
  50%{box-shadow:0 0 0 3px #c9f6ff,0 0 38px 10px rgba(90,235,255,.95),0 0 96px 26px rgba(47,125,255,.6),0 14px 34px rgba(0,0,0,.42),inset 0 0 28px rgba(70,200,255,.26)}}
.rc.ra-on.ra-finished .rc-card.rc-cur{animation:none;border-color:rgba(120,255,185,.9);box-shadow:0 0 0 2px rgba(120,255,185,.8),0 0 26px 6px rgba(70,255,160,.5),0 14px 34px rgba(0,0,0,.42)}
/* Oct 30 2026: the card flashes only until the student starts reading it; then it holds a steady glow and the cue moves to Next when done */
.rc.ra-on .rc-card.rc-cur{transition:box-shadow .9s ease,border-color .9s ease}
.rc.ra-on.ra-reading .rc-card.rc-cur,.rc.ra-on.ra-done .rc-card.rc-cur{animation:none;border-color:rgba(143,233,255,.7);
  box-shadow:0 0 0 1px rgba(143,233,255,.55),0 0 16px 2px rgba(70,200,255,.28),0 14px 34px rgba(0,0,0,.42)}
@media (prefers-reduced-motion:reduce){.rc.ra-on .rc-card.rc-cur{animation:none}}