/* Styles for the "learn" pages: hub, starting point, classroom, roster, Reading Buddy, Math Lab. */
.le-h { margin: calc(18px * var(--k)) 0 10px; }
.le-tabs { margin-bottom: 14px; }
.le-keep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.le-keep .e { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: var(--c, var(--blue)); flex: none; }
.le-keep .main { flex: 1; min-width: 160px; }
.le-classcard { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); }
.le-classcard .who { width: 110px; flex: none; } .le-classcard .who svg { width: 100%; height: auto; }
.le-skillgroup { margin-bottom: 12px; } .le-skillgroup h3 { color: var(--text); margin-bottom: 6px; }
.le-skill { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.le-calm { background: color-mix(in srgb, var(--gold) 14%, var(--panel)); border: 2px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 16px; padding: 10px 14px; }
.le-rec, .le-recgroup { margin-bottom: 14px; } .le-recgroup h3 { color: var(--text); }
.le-backbtn { margin-bottom: 10px; }
.le-input { max-width: 420px; }
.cl-stage { position: relative; } .cl-stage svg { display: block; width: 100%; height: auto; }
.cl-figs { position: absolute; inset: 0; pointer-events: none; } .cl-fig { position: absolute; } .cl-fig.seated { clip-path: inset(-60% -60% 0 -60%); } .cl-fig .avatar3d { width: 100%; }
.cl-board { position: absolute; left: 30.4%; top: 7.7%; width: 57.2%; height: 34.7%; display: grid; place-items: center; text-align: center; color: #f4fff8; padding: 1.5%; overflow: hidden; pointer-events: none; }
.cl-board .big { font-weight: 800; font-size: clamp(18px, calc(4.6 * var(--vw)), 54px); line-height: 1.15; } .cl-board.long .big { font-size: clamp(13px, calc(2.6 * var(--vw)), 30px); } .cl-board.xlong .big { font-size: clamp(11px, calc(1.8 * var(--vw)), 20px); font-weight: 600; }
.cl-board .small { font-size: clamp(10px, calc(1.4 * var(--vw)), 16px); opacity: .85; }
.cl-seat.me rect:first-of-type { filter: drop-shadow(0 0 6px rgba(255,203,61,.8)); }
.cl-react rect { fill: #fff; } .cl-react text { fill: #14204a; font-weight: 700; font-size: 15px; }
.cl-tutors { margin-bottom: 10px; }
.cl-say { display: flex; gap: 12px; align-items: flex-end; margin: 12px 0; flex-wrap: wrap; } .cl-say .who { width: 84px; flex: none; } .cl-say .who svg { width: 100%; height: auto; } .cl-say .kbubble { flex: 1; min-width: 200px; max-width: none; }
.cl-note { margin: 6px 0 10px; } .cl-actions { margin-bottom: 12px; } .cl-panel:empty { display: none; }
.cl-askform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cl-askform input { flex: 1; min-width: 180px; max-width: none; }
.ro-seats { display: flex; flex-wrap: wrap; gap: 10px; }
.ro-seat { width: 108px; text-align: center; background: var(--panel2); border: 2px solid var(--line); border-radius: 16px; padding: 8px 4px; }
.ro-seat .pic { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: var(--panel3); } .ro-seat .pic svg { width: 100%; height: 100%; }
.ro-seat .tag { display: block; font-size: 13px; margin: 4px 0; } .ro-seat .btns { display: flex; justify-content: center; gap: 3px; } .ro-seat .ktool { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
.ro-pick { border: 2px solid var(--line); background: var(--panel2); border-radius: 16px; padding: 8px 4px; color: var(--text); cursor: pointer; text-align: center; }
.ro-pick svg { width: 64px; height: 64px; display: block; margin: 0 auto; border-radius: 50%; background: var(--panel3); } .ro-pick b { display: block; font-size: 13px; } .ro-pick small { color: var(--muted); font-size: 11px; }
.ro-pick[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, var(--panel)); }
/* Reading Buddy */
.rd-story { font-size: calc(20px * var(--k)); line-height: 1.9; } .rd-story p { margin: 0 0 .9em; }
body[data-band="teen"] .rd-story, body[data-band="senior"] .rd-story, body[data-band="tween"] .rd-story { font-size: calc(17px * var(--k)); line-height: 1.75; }
.rd-w { cursor: pointer; border-radius: 6px; padding: 0 1px; } .rd-w:hover { background: color-mix(in srgb, var(--blue) 30%, transparent); } .rd-w.on { background: var(--gold); color: var(--gold-ink, #2a1a00); } .rd-w.gl { border-bottom: 2px dotted var(--blue2); }
.rd-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.rd-tile { width: calc(56px * var(--k)); height: calc(60px * var(--k)); border-radius: 14px; border: 3px solid var(--line2); background: var(--panel2); color: var(--text); font-size: calc(26px * var(--k)); font-weight: 800; cursor: pointer; }
.rd-tile:disabled { opacity: .3; } .rd-slots { display: flex; gap: 8px; justify-content: center; min-height: 70px; flex-wrap: wrap; }
.rd-slot { width: calc(56px * var(--k)); height: calc(60px * var(--k)); border-radius: 14px; border: 3px dashed var(--line2); display: grid; place-items: center; font-size: calc(26px * var(--k)); font-weight: 800; }
.rd-slot.full { border-style: solid; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, var(--panel)); }
/* Math Lab tools */
.ma-tool svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.ma-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; max-width: 560px; margin: 0 auto; }
.ma-grid button, .ma-grid span { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-weight: 700; font-size: clamp(9px, calc(2 * var(--vw)), 15px); display: grid; place-items: center; padding: 0; }
.ma-grid span { background: var(--panel3); } .ma-grid button.on { background: var(--gold); color: var(--gold-ink, #2a1a00); border-color: var(--gold); } .ma-grid button.hit { background: #1fb863; color: #fff; }
.ma-frame { display: grid; grid-template-columns: repeat(5, calc(52px * var(--k))); gap: 6px; justify-content: center; }
.ma-frame button { height: calc(52px * var(--k)); border-radius: 12px; border: 3px solid var(--line2); background: var(--panel2); font-size: calc(26px * var(--k)); cursor: pointer; padding: 0; }
.ma-frac { display: flex; height: 44px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line2); margin: 6px 0; } .ma-frac i { flex: 1; border-right: 2px solid var(--bg2); background: var(--panel3); } .ma-frac i.on { background: var(--c, var(--blue)); } .ma-frac i:last-child { border-right: 0; }
.ma-big { font-size: calc(30px * var(--k)); font-weight: 800; text-align: center; margin: 10px 0; }
.ma-blocks { display: flex; gap: 14px; justify-content: center; align-items: flex-end; flex-wrap: wrap; min-height: 120px; }
.ma-blocks .col { display: flex; flex-wrap: wrap; gap: 3px; max-width: 170px; justify-content: center; align-items: flex-end; }
.ma-blocks .h { width: 54px; height: 54px; background: #2f8fff; border: 2px solid #9fd0ff; border-radius: 4px; } .ma-blocks .t { width: 10px; height: 54px; background: #1fb863; border: 1px solid #a5f0c7; border-radius: 3px; } .ma-blocks .o { width: 10px; height: 10px; background: #ffcb3d; border: 1px solid #fff0b0; border-radius: 2px; }
@media (max-width: 699px) { .le-classcard .who { width: 72px; } .ro-seat { width: 96px; } }