/* Reading cards (Oct 29 2026) */
.rd-article.rc-on{display:block}
.rc{display:flex;flex-direction:column;gap:14px;margin:6px 0 16px}
.rc-top{display:flex;align-items:center;gap:14px}
.rc-count{font:700 12px/1 var(--font-digit,var(--font-ui,system-ui));letter-spacing:.08em;text-transform:uppercase;color:var(--mut,#93a7c8);white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-bar{flex:1;height:5px;border-radius:5px;background:rgba(120,160,230,.18);overflow:hidden}
.rc-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#2f7dff,#46c8ff);box-shadow:0 0 10px rgba(70,200,255,.7);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.rc-stage{position:relative;padding:0 0 14px}
.rc-stack{display:grid;position:relative}
.rc-stack::before,.rc-stack::after{content:"";position:absolute;left:14px;right:14px;bottom:-9px;height:100%;border-radius:18px;border:1px solid rgba(72,148,255,.22);background:linear-gradient(180deg,rgba(14,28,60,.8),rgba(8,15,33,.9));z-index:0}
.rc-stack::after{left:28px;right:28px;bottom:-18px;opacity:.7}
.rc-card{grid-area:1/1;position:relative;z-index:1;margin:0!important;padding:22px 26px!important;border-radius:18px;
  background:linear-gradient(180deg,rgba(18,36,76,.96),rgba(9,18,40,.98));border:1px solid rgba(72,148,255,.38);
  box-shadow:0 14px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;visibility:hidden;transform:translateX(34px) scale(.965);transition:opacity .32s ease,transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s;pointer-events:none}
.rc-card.rc-past{transform:translateX(-44px) scale(.95)}
.rc-card.rc-cur{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.rc-card.rc-cur.rc-pop{animation:rcPop .42s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rcPop{0%{transform:translateX(30px) scale(.97);opacity:.2}100%{transform:none;opacity:1}}
.rc-eyebrow{font:700 11.5px/1 var(--font-ui,system-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan,#46c8ff);margin:0 0 12px}
.rc-card>p,.rc-card>ul,.rc-card>.rd-callout{margin:0!important}
.rc-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rc-btn{min-height:46px;padding:0 22px;border-radius:14px;font:800 15px/1 var(--font-disp,var(--font-ui,system-ui));letter-spacing:.02em;cursor:pointer;transition:transform .15s,filter .2s,box-shadow .3s}
.rc-back{color:var(--mut,#93a7c8);background:rgba(20,34,68,.6);border:1px solid rgba(110,150,230,.28)}
.rc-next{flex:1;max-width:340px;color:#fff;background:linear-gradient(180deg,#2f7dff,#1455e8 60%,#0e3fb8);border:1px solid rgba(120,200,255,.7);box-shadow:0 0 20px rgba(60,150,255,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.rc-next:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.rc-next:active:not(:disabled){transform:scale(.98)}
.rc-next.rc-end,.rc-btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.rc-next.rc-end{background:rgba(42,209,126,.18);border-color:rgba(70,230,150,.5);color:#bff7d8}
.rc-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rc-persist{margin-top:10px}
.rc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rc-panel .su-m-end{display:none}
@media (max-width:560px){.rc-card{padding:18px 18px!important}.rc-btn{min-height:50px}.rc-next{max-width:none}}
@media (prefers-reduced-motion:reduce){.rc-card,.rc-bar i{transition:none}.rc-card.rc-cur.rc-pop{animation:none}}

/* Oct 30 2026: when the card has been read, its Next lights up and flashes blue the same way the card did ("this is where you go next").
   !important so the page-level guide rules can't quiet it while it is the student's next step. */
.rc .rc-next.rc-go{color:#fff;border-color:#8fe9ff;animation:rcCue 2.2s ease-in-out infinite!important}
@keyframes rcCue{0%,100%{filter:brightness(1);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),inset 0 1px 0 rgba(255,255,255,.3)}
  50%{filter:brightness(1.25);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),inset 0 1px 0 rgba(255,255,255,.4)}}
@media (prefers-reduced-motion:reduce){.rc .rc-next.rc-go{animation:none!important;box-shadow:0 0 0 2px rgba(143,233,255,.9),0 0 30px 6px rgba(70,220,255,.75)}}
/* Next tapped before the card is read: it shakes its head, like the lesson wheel's Next */
.rc .rc-next.rc-no{animation:rcNo .55s cubic-bezier(.36,.07,.19,.97) both!important;border-color:rgba(255,107,124,.9);box-shadow:0 0 0 1px rgba(255,107,124,.5),0 0 20px rgba(255,107,124,.55)}
@keyframes rcNo{0%,100%{transform:translateX(0)}12%{transform:translateX(-11px)}28%{transform:translateX(10px)}44%{transform:translateX(-8px)}60%{transform:translateX(6px)}76%{transform:translateX(-3px)}90%{transform:translateX(2px)}}
.rc-nav{position:relative}
.rc-nohint{position:absolute;right:4px;bottom:100%;margin-bottom:8px;white-space:nowrap;pointer-events:none;font:700 13px/1.3 var(--font-ui,system-ui);color:#ff8a9b;opacity:0;transition:opacity .25s}
.rc-nohint.on{opacity:1}
@media (prefers-reduced-motion:reduce){.rc .rc-next.rc-no{animation-duration:.01s!important}}
/* Icon lists (Oct 30 2026): one card holds the intro, a row per item with its icon, and the closing line */
.rd-ilist p{margin:0 0 .7em}
.rd-icons{list-style:none;margin:.2em 0 .8em;padding:0;display:grid;gap:.55em}
.rd-icons li{display:flex;align-items:flex-start;gap:.75em}
.rd-icons .ri-ic{flex:none;width:2.1em;height:2.1em;margin-top:-.15em;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#7dd8ff;background:rgba(47,125,255,.16);border:1px solid rgba(110,170,255,.45);transition:all .35s}
.rd-icons .ri-ic svg{width:1.25em;height:1.25em}
/* when the card comes up: each icon pops in, then its words, one row after another */
.rc-card.rc-cur .rd-icons li .ri-ic{animation:riPop .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i) * .32s + .25s)}
.rc-card.rc-cur .rd-icons li .ri-tx{animation:riIn .45s ease-out both;animation-delay:calc(var(--i) * .32s + .4s)}
@keyframes riPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes riIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
/* read aloud: the row being read lights its icon */
.rc.ra-on .rd-icons li:has(.rw-now) .ri-ic,.rc.ra-on .rd-icons li:has(.rw-read):not(:has(.rw:not(.rw-read))) .ri-ic{color:#fff;border-color:#8fe9ff;background:rgba(70,200,255,.3);box-shadow:0 0 16px rgba(70,220,255,.6)}
@media (prefers-reduced-motion:reduce){.rc-card.rc-cur .rd-icons li .ri-ic,.rc-card.rc-cur .rd-icons li .ri-tx{animation:none}}
/* last card: "Done reading" stays active until tapped (Oct 30) */
.rc-next.rc-last{background:linear-gradient(180deg,#2f7dff,#1455e8 60%,#0e3fb8)}
.qb.qb-read{margin-top:18px}
/* Reading enhancements (Oct 30 2026): handbook references and "on the test" lines */
.rd-hb{white-space:nowrap;color:#9fdcff;font-weight:600}
.rd-hbic{display:inline-flex;vertical-align:-2px;margin-right:4px;color:#46c8ff}
.rd-hbchip{float:right;display:flex;flex-direction:column;align-items:center;gap:5px;width:78px;margin:2px 0 8px 14px;padding:6px;border-radius:10px;text-decoration:none;background:rgba(14,28,60,.85);border:1px solid rgba(110,170,255,.45);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s}
.rd-hbchip img{width:64px;height:auto;border-radius:4px;display:block}
.rd-hbchip::after{content:attr(data-label);font:700 10.5px/1.25 var(--font-ui,system-ui);color:#cfe3ff;text-align:center}
.rd-hbchip:hover{transform:translateY(-2px);border-color:#8fe9ff}
.rc.ra-on .rd-hbchip:not(.pop){opacity:0;transform:scale(.4) rotate(-8deg)}
.rc.ra-on .rd-hbchip.pop{animation:hbPop .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes hbPop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}70%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
.rd-test{color:#ffd166;font-weight:600;border-radius:6px;transition:background .4s,box-shadow .4s}
.rd-test .rw-read,.rd-test .rw-now{color:#ffe08a!important;text-shadow:0 0 12px rgba(255,209,102,.55)!important}
.rd-testbadge{display:inline-flex;align-items:center;gap:5px;margin-right:6px;padding:2px 9px 2px 7px;border-radius:999px;vertical-align:2px;color:#1b1406;background:linear-gradient(180deg,#ffd166,#f5a524);box-shadow:0 0 14px rgba(255,191,64,.55)}
.rd-testbadge::after{content:"On the test";font:800 11px/1.4 var(--font-ui,system-ui);letter-spacing:.04em;text-transform:uppercase}
.rc.ra-on .rd-test:not(.pop) .rd-testbadge{opacity:.35;transform:scale(.85)}
.rc.ra-on .rd-test.pop{background:rgba(255,209,102,.1);box-shadow:0 0 0 4px rgba(255,209,102,.1)}
.rc.ra-on .rd-test.pop .rd-testbadge{animation:tbPop .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes tbPop{0%{transform:scale(.6) rotate(-10deg)}55%{transform:scale(1.25) rotate(6deg);box-shadow:0 0 26px rgba(255,191,64,.95)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.rc.ra-on .rd-hbchip.pop,.rc.ra-on .rd-test.pop .rd-testbadge{animation:none}.rc.ra-on .rd-hbchip:not(.pop){opacity:1;transform:none}}

/* Handbook panel (reading-enhance.js): opens beside the lesson and scoots it over; bottom sheet on narrow screens */
:root { --hbw: min(42vw, 560px); }
#dtxHb { position: fixed; top: 0; right: 0; bottom: 0; width: var(--hbw); z-index: 60; display: flex; flex-direction: column;
  background: #0b1630; border-left: 1px solid rgba(120,170,255,.28); box-shadow: -18px 0 40px rgba(0,0,0,.45);
  transform: translateX(105%); transition: transform .38s cubic-bezier(.2,.8,.2,1); }
body.hb-open #dtxHb { transform: none; }
body .topbar, body .shell, body #dtxFinish { transition: margin-right .38s cubic-bezier(.2,.8,.2,1); }
body.hb-open .topbar, body.hb-open .shell, body.hb-open #dtxFinish { margin-right: var(--hbw); }
body.hb-open #dtxRev, body.hb-open #suNotesTab { visibility: hidden; }
/* while the handbook is open, the lesson keeps the room: the right rail and the module list step aside */
@media (min-width: 900px) {
  body.hb-open .shell { grid-template-columns: 210px minmax(0, 1fr) !important; }
  body.hb-open .rightrail, body.hb-open .workspace > .modules-card { display: none !important; }
  body.hb-open .workspace { grid-template-columns: minmax(0, 1fr) !important; }
}
#dtxHb .hb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(120,170,255,.2); color: #e8f0ff; }
#dtxHb .hb-ic { color: #ffd166; display: flex; }
#dtxHb .hb-ic svg { width: 22px; height: 22px; }
#dtxHb .hb-t { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
#dtxHb .hb-t b { font-size: 14px; }
#dtxHb .hb-pg { font-size: 12.5px; color: #ffd166; font-weight: 600; }
#dtxHb .hb-full { font-size: 12px; color: #9cc2ff; text-decoration: none; border: 1px solid rgba(156,194,255,.4); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
#dtxHb .hb-x { background: rgba(255,255,255,.08); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
#dtxHb .hb-x:hover, #dtxHb .hb-full:hover { background: rgba(255,255,255,.16); }
#dtxHb .hb-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 24px; }
#dtxHb .hb-scroll img { display: block; width: 100%; height: auto; margin: 0 0 10px; border-radius: 6px; background: #fff; opacity: .55; transition: opacity .3s; }
#dtxHb .hb-scroll img.hb-on { opacity: 1; outline: 3px solid #ffd166; outline-offset: 2px; }
.rd-hb[data-pg] { cursor: pointer; }
@media (max-width: 899px) {
  #dtxHb { top: auto; left: 0; width: auto; height: 58vh; border-left: 0; border-top: 1px solid rgba(120,170,255,.3); border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 40px rgba(0,0,0,.5); transform: translateY(105%); }
  body.hb-open .topbar, body.hb-open .shell, body.hb-open #dtxFinish { margin-right: 0; }
  body.hb-open .shell { padding-bottom: 58vh; }
}
@media (prefers-reduced-motion: reduce) { #dtxHb, body .topbar, body .shell, body #dtxFinish { transition: none; } }

/* handbook quizzes: the button that opens the handbook beside the quiz */
.hb-quizbtn{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 14px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,209,102,.55);
  background:linear-gradient(120deg,rgba(255,209,102,.16),rgba(255,209,102,.06));color:#fff;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.hb-quizbtn svg{width:22px;height:22px;color:#ffd166;flex:none}
.hb-quizbtn small{margin-left:auto;font-weight:500;color:#cbd6ee;font-size:12px}
.hb-quizbtn:hover{background:linear-gradient(120deg,rgba(255,209,102,.26),rgba(255,209,102,.1))}
.hb-quizbtn.on{border-color:#ffd166;box-shadow:0 0 0 2px rgba(255,209,102,.35)}
.hb-quizbtn.on small::before{content:"Open · tap to close  "}
.hb-quizbtn.on small{font-size:0}.hb-quizbtn.on small::before{font-size:12px}
/* in an icon list the thumbnail sits as a slim row above the list instead of a float, so the rows keep their full width (lesson 4.5) */
.rd-ilist > .rd-hbchip{float:none;display:inline-flex;flex-direction:row;align-items:center;width:auto;gap:8px;margin:0 0 10px;padding:4px 12px 4px 4px}
.rd-ilist > .rd-hbchip img{width:26px}
.rd-ilist > .rd-hbchip::after{text-align:left;font-size:12px}
/* Oct 31 (Juan): the box fits the card being read. Only the current card takes up space; the others sit out of the flow (still there for
   the slide/fade), so a short card no longer inherits the tallest card's height and Next stays right under the text. */
.rc-card{align-self:start}
.rc-card:not(.rc-cur){position:absolute;top:0;left:0;right:0}
/* reading-only lessons sit inside .player-wrap, whose image rule (absolute, black, contain) pinned the handbook thumbnail over the
   card's top-left text (lesson 4.14); keep it in its chip */
.player-wrap .rd-hbchip img{position:static!important;inset:auto!important;width:64px!important;height:auto!important;background:none!important;object-fit:fill!important;display:block}
.player-wrap .rd-ilist > .rd-hbchip img{width:26px!important}

/* key phrases (reading-enhance.js KEY): bright cyan with a soft underline glow, distinct from the gold "on the test" lines */
.rd-key{color:#7fe8ff;font-weight:700;background:linear-gradient(0deg,rgba(127,232,255,.22),rgba(127,232,255,.22)) no-repeat 0 100%/100% 35%;border-radius:3px;padding:0 2px}
.rd-key .rw-read,.rd-key .rw-now{color:#b6f3ff!important;text-shadow:0 0 10px rgba(127,232,255,.6)!important}
/* Oct 31 (Juan, lesson 9.4): the player's ".player-wrap img" rule (absolute, full-frame) also caught reading charts, so the card collapsed and
   the chart covered "Done reading". Charts flow in the card like any content. */
.player-wrap .rd-chart img{position:static!important;inset:auto!important;width:100%!important;height:auto!important;object-fit:contain!important;background:none!important;display:block!important}