/* Extra screens for young learners and parents. Plain CSS so it does not depend on the Tailwind build. */
:root{--x-sun:#F5A623;--x-sav:#167A4D;--x-ink:#26201b;--x-cream:#FBF3E2}

/* ---- parent PIN pad ---- */
.clg{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(38,32,27,.7)}
.clg-box{width:min(21rem,100%);padding:22px 18px 16px;border-radius:32px;background:#fff;text-align:center;box-shadow:0 18px 0 rgba(0,0,0,.12)}
.clg-t{font:800 1.6rem/1.2 "Baloo 2",Nunito,sans-serif;margin:0}
.clg-s{margin:6px 0 12px;color:rgba(38,32,27,.7);font-weight:700}
.clg-dots{display:flex;justify-content:center;gap:12px;margin:6px 0}
.clg-dots i{width:20px;height:20px;border-radius:50%;border:3px solid var(--x-sav);display:block}
.clg-dots i.on{background:var(--x-sav)}
.clg-e{min-height:1.5em;margin:6px 0;color:#B3261E;font-weight:800}
.clg-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.clg-pad button{min-height:60px;border:0;border-radius:20px;background:var(--x-cream);font:800 1.7rem Nunito,sans-serif;color:var(--x-ink);cursor:pointer}
.clg-pad button:active{transform:scale(.95);background:#f2e3c0}
.clg-pad button:focus-visible,.clg-x:focus-visible{outline:4px solid var(--x-sun)}
.clg-x{margin-top:12px;min-height:44px;padding:0 20px;border:0;background:none;font-weight:800;color:rgba(38,32,27,.7);cursor:pointer}

/* ---- read-to-me buttons ---- */
.clsay{position:absolute;top:8px;right:8px;z-index:5;width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18);font-size:1.3rem;cursor:pointer;line-height:1}
.clsay:focus-visible,.clsay-page:focus-visible{outline:4px solid var(--x-sun)}
.clsay-page{position:fixed;right:12px;bottom:84px;z-index:45;display:flex;align-items:center;gap:6px;min-height:52px;padding:0 16px;border:0;border-radius:999px;background:var(--x-sun);color:var(--x-ink);font:800 1rem Nunito,sans-serif;box-shadow:0 6px 0 rgba(0,0,0,.2);cursor:pointer}
@media (min-width:640px){.clsay-page{bottom:20px}}
#cl-vh.on{background:var(--x-sun)}

/* ---- big Continue, stickers, goals ---- */
.x-continue{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:120px;padding:18px;border-radius:36px;background:linear-gradient(135deg,var(--x-sav),#2fa56b);color:#fff;font:800 2rem/1.1 "Baloo 2",Nunito,sans-serif;text-align:center;box-shadow:0 10px 0 rgba(0,0,0,.18);text-decoration:none}
.x-continue small{display:block;font:700 1rem Nunito,sans-serif;opacity:.9}
.x-continue .em{font-size:3.2rem}
.x-shelf{display:flex;flex-wrap:wrap;gap:10px}
.x-sticker{display:grid;place-items:center;width:84px;padding:10px 4px;border-radius:24px;background:#fff;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.08);font-weight:800;font-size:.78rem;line-height:1.15}
.x-sticker b{display:block;font-size:2.2rem;line-height:1.2}
.x-sticker.lock{opacity:.35;filter:grayscale(1)}
.x-goal{height:22px;border-radius:999px;background:var(--x-cream);overflow:hidden}
.x-goal>div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--x-sun),#f7c35f)}

/* ---- journey map ---- */
.clj{position:relative;margin:18px 0;padding:6px 0;list-style:none}
.clj li{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 22px;min-height:76px}
.clj li:nth-child(even){flex-direction:row-reverse;text-align:right}
.clj li:not(:last-child)::after{content:"";position:absolute;left:36px;top:76px;height:22px;border-left:6px dotted rgba(22,122,77,.35)}
.clj li:nth-child(even):not(:last-child)::after{left:auto;right:36px}
.clj-n{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#fff;font:800 1.9rem "Baloo 2",Nunito,sans-serif;box-shadow:0 6px 0 rgba(0,0,0,.14);color:var(--x-ink);text-decoration:none}
.clj-n.done{background:var(--x-sav);color:#fff}
.clj-n.now{background:var(--x-sun);animation:xpulse 1.6s ease-in-out infinite}
.clj-n.lock{background:#e9e4d6;color:rgba(38,32,27,.45);box-shadow:none}
.clj-t{font-weight:800;font-size:1.1rem}
@keyframes xpulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.clj-n.now{animation:none}}

/* ---- activities ---- */
.cla-card{margin-top:14px;padding:16px;border-radius:28px;background:#fff;color:var(--x-ink);box-shadow:0 5px 0 rgba(0,0,0,.1)}
.cla-card.ok{outline:4px solid var(--x-sav)}
.cla-h{font:800 1.4rem/1.2 "Baloo 2",Nunito,sans-serif;margin:0 0 10px}.cla-sub{font:700 1rem Nunito,sans-serif;opacity:.6}
.cla-big{font-size:2.4rem;color:var(--x-sav)}
.cla-bar{margin:6px 0 0;font:800 1.3rem Nunito,sans-serif;letter-spacing:.1em}
.cla-cv{display:grid;place-items:center}.cla-cv canvas{width:min(100%,360px);height:auto;aspect-ratio:1;border-radius:24px;background:#fff;border:4px solid var(--x-cream);touch-action:none;cursor:crosshair}
.cla-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.cla-msg{min-height:1.4em;margin:8px 0 0;text-align:center;font-weight:800;color:var(--x-sav)}
.cla-match{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cla-match>div{display:grid;gap:10px;align-content:start}
.cla-opt{min-height:64px;padding:8px;border:0;border-radius:20px;background:var(--x-cream);font:800 1.5rem Nunito,sans-serif;color:var(--x-ink);cursor:pointer;word-break:break-word}
.cla-opt.sel{outline:4px solid var(--x-sun);background:#fff3d6}.cla-opt.ok{background:var(--x-sav);color:#fff}.cla-opt.no{animation:xshake .4s}
.cla-count{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:2.4rem;padding:8px}
.cla-num{min-width:76px;min-height:76px;border:0;border-radius:24px;background:var(--x-cream);font:800 2rem "Baloo 2",Nunito,sans-serif;color:var(--x-ink);cursor:pointer}
.cla-num.ok{background:var(--x-sav);color:#fff}.cla-num.no{animation:xshake .4s}
@keyframes xshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---- voice practice ---- */
.clv{margin-top:16px;padding:16px;border-radius:28px;background:#fff;color:var(--x-ink)}
.clv-big{display:grid;place-items:center;width:104px;height:104px;margin:8px auto;border:0;border-radius:50%;background:var(--x-sun);font-size:3rem;box-shadow:0 8px 0 rgba(0,0,0,.18);cursor:pointer}
.clv-big.rec{background:#d9402f;color:#fff;animation:xpulse 1s infinite}
.clv-item{margin-top:10px;padding:10px;border-radius:18px;background:var(--x-cream)}

/* ---- parent page and report ---- */
.xp-card{margin-top:14px;padding:18px;border-radius:32px;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,.07)}
.xp-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lvl{display:inline-grid;place-items:center;min-width:44px;height:44px;border-radius:14px;font:800 1.1rem Nunito,sans-serif;color:#fff}
.lvl.EE{background:#167A4D}.lvl.ME{background:#2b8fc5}.lvl.AE{background:#d98a00}.lvl.BE{background:#b3261e}
.rpt table{width:100%;border-collapse:collapse}.rpt th,.rpt td{padding:8px;border-bottom:1px solid #e6dfcc;text-align:left;vertical-align:top}
@media print{header,nav[aria-label=Quick],.no-print,.clsay,.clsay-page,.flag-stripe{display:none!important}body{background:#fff!important}.rpt{box-shadow:none!important}}

/* ---- live class safety notes ---- */
.xl-note{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:800;font-size:.9rem}

/* ---- avatar teachers ---- */
.av{padding:14px;border-radius:32px;background:linear-gradient(180deg,#fff8e6,#fff);color:var(--x-ink);box-shadow:0 6px 0 rgba(0,0,0,.1)}
.av-stage{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:14px;align-items:center}
@media (max-width:420px){.av-stage{grid-template-columns:100px 1fr}}
.av-face{cursor:pointer;border-radius:50%;outline-offset:4px;transition:transform .2s}
.av-face:focus-visible{outline:4px solid var(--x-sun)}.av-face svg{display:block;width:100%;height:auto;overflow:visible}
.av-open{display:none;transform-origin:100px 146px}
.av.talking .av-smile{display:none}.av.talking .av-open{display:block;animation:avmouth .28s ease-in-out infinite alternate}
.av.talking .av-face{animation:avbob .5s ease-in-out infinite alternate}
.av.listening .av-face{animation:avtilt 1s ease-in-out infinite alternate}
.av-eyes{transform-origin:100px 95px;animation:avblink 4.5s infinite}
@keyframes avmouth{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes avbob{to{transform:translateY(-6px) rotate(-2deg)}}
@keyframes avtilt{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes avblink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.av-bubble{position:relative;margin:0;padding:12px 14px;border-radius:22px;background:#fff;border:3px solid var(--x-cream);font:800 1.25rem/1.3 Nunito,sans-serif;min-height:3.2em}
.av-big{min-height:1.2em;margin-top:6px;font:800 5.5rem/1.1 "Baloo 2",Nunito,sans-serif;color:var(--x-sav);text-align:center;word-break:break-word}
.av-big.pop,.av-count .pop{animation:avpop .35s ease-out}
@keyframes avpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.av-count{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;font-size:2.2rem;min-height:1px}
.av-bar{display:flex;gap:4px;margin:10px 0}.av-bar i{flex:1;height:8px;border-radius:4px;background:var(--x-cream)}.av-bar i.done{background:var(--x-sav)}.av-bar i.now{background:var(--x-sun)}
.av-ctl{display:flex;justify-content:center;gap:12px}
.av-b{min-width:64px;height:64px;border:0;border-radius:22px;background:var(--x-cream);font-size:1.7rem;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.av-play{min-width:92px;background:var(--x-sun)}
.av-b:focus-visible{outline:4px solid var(--x-sav)}.av-b:active{transform:translateY(2px);box-shadow:none}
.av-note{margin:8px 0 0;text-align:center;font-weight:700;color:rgba(38,32,27,.7);font-size:.9rem}.av-note:empty{display:none}
@media (prefers-reduced-motion:reduce){.av *{animation:none!important}.av.talking .av-open{display:block}}

/* ---- certificates ---- */
.cert{position:relative;margin:1rem auto;max-width:980px;background:#fffdf7;border:10px double #1b7a4a;border-radius:18px;padding:2.2rem 2rem;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.cert .cert-issuer{font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1b7a4a;font-size:.95rem}
.cert h1{font-family:'Baloo 2',cursive;font-size:clamp(1.9rem,5vw,3.2rem);line-height:1.1;margin:.4rem 0}
.cert .cert-name{font-family:'Baloo 2',cursive;font-size:clamp(2.2rem,7vw,4rem);font-weight:800;color:#c2410c;line-height:1.1;margin:.5rem 0;border-bottom:3px dotted #d6c9a8;display:inline-block;padding:0 1.5rem}
.cert .cert-course{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:800;margin:.5rem 0}
.cert .cert-meta{color:#555;font-size:1rem;margin:.2rem 0}
.cert .cert-foot{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end;margin-top:1.8rem;text-align:left}
.cert .cert-qr{width:112px;height:112px;background:#fff;padding:4px;border-radius:6px}
.cert .cert-small{font-size:.8rem;color:#666;max-width:34rem}
@media print{@page{size:A4 landscape;margin:8mm}footer,header,.no-print{display:none!important}.cert{box-shadow:none;margin:0;max-width:none;border-radius:0;page-break-inside:avoid}body{background:#fff!important}}

/* avatar: coloured letters, spoken-word highlight, spelling */
.av-l{display:inline-block;transition:transform .15s,background-color .15s;border-radius:12px;padding:0 .03em}
.av-l.on{transform:scale(1.35);background:#fff1b8;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.av-big.word-on{background:#fff1b8;border-radius:22px;animation:avpop .35s ease-out}
.av-w{border-radius:8px;padding:0 .12em;margin:0 -.12em;transition:background-color .1s}
.av-w.on{background:#ffd55e;box-shadow:0 2px 0 rgba(0,0,0,.12)}
@media (max-width:420px){.av-b{min-width:54px;height:58px}.av-play{min-width:80px}.av-ctl{gap:8px}}

/* ---- language switch ---- */
.cl-lang{display:inline-flex;overflow:hidden;border-radius:999px;background:rgba(38,32,27,.08);height:48px;align-items:center}
.cl-lang button{min-width:44px;height:48px;padding:0 10px;border:0;background:transparent;font:800 .9rem Nunito,system-ui,sans-serif;color:var(--x-ink);cursor:pointer}
.cl-lang button[aria-pressed="true"]{background:var(--x-sav);color:#fff}
.cl-lang button:focus-visible{outline:4px solid var(--x-sun);outline-offset:-4px}

/* ---- notifications, receipts list, receipt page ---- */
.cl-note{margin:10px 0 0;font-size:.92rem;font-weight:700;color:rgba(38,32,27,.7)}
.cl-list{margin:10px 0 0;padding:0;list-style:none}
.cl-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;border-bottom:2px solid var(--x-cream)}
.cl-list li:last-child{border-bottom:0}
.cl-list .grow{flex:1;min-width:10rem}
.cl-list .amt{font-weight:800;white-space:nowrap}
.cl-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--x-cream);font-size:.82rem;font-weight:800}
.cl-tag.bad{background:#fde4e1;color:#b3261e}
.rc-wrap{max-width:42rem;margin:0 auto;padding:16px 16px 40px}
.rc{position:relative;padding:26px 24px;border-radius:28px;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,.07);overflow:hidden}
.rc-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-bottom:3px solid var(--x-cream);padding-bottom:14px}
.rc-head h1{margin:0;font:800 2rem/1.1 "Baloo 2",Nunito,sans-serif;color:var(--x-sav)}
.rc-biz{font-size:.92rem;line-height:1.5}
.rc-meta{display:grid;gap:4px 18px;grid-template-columns:auto 1fr;margin:14px 0;font-size:.95rem}
.rc-meta dt{font-weight:700;color:rgba(38,32,27,.65)}.rc-meta dd{margin:0;font-weight:800;word-break:break-all}
.rc-tbl{width:100%;border-collapse:collapse;margin-top:6px}
.rc-tbl th{padding:8px 0;text-align:left;font-size:.85rem;color:rgba(38,32,27,.65);border-bottom:2px solid var(--x-cream)}
.rc-tbl td{padding:10px 0;border-bottom:2px solid var(--x-cream);vertical-align:top}
.rc-tbl .num{text-align:right;white-space:nowrap;font-weight:800}
.rc-tbl tfoot td{border-bottom:0;font:800 1.2rem "Baloo 2",Nunito,sans-serif}
.rc-stamp{position:absolute;top:34px;right:20px;transform:rotate(8deg);padding:2px 14px;border:4px solid var(--x-sav);border-radius:12px;font:800 1.4rem "Baloo 2",Nunito,sans-serif;color:var(--x-sav);opacity:.85}
.rc-stamp.ref{border-color:#b3261e;color:#b3261e}
.rc-foot{margin-top:16px;font-size:.82rem;color:rgba(38,32,27,.65)}
.rc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rc-box{margin-top:16px;padding:16px;border-radius:22px;background:var(--x-cream)}
@media print{
  body>header,body>nav,body>p,body>div:not(#main),#cl-install,.rc-actions,.rc-box,.clsay-page,.cl-lang{display:none!important}
  body{background:#fff!important}
  .rc{box-shadow:none;border:1px solid #ccc}
  .rc-wrap{padding:0}
}

/* ---- songs, singing videos and recorded whiteboards (2.7.0) ---- */
.av-media{margin-top:10px;padding:8px;border-radius:22px;background:#fff;border:3px solid var(--x-cream)}
.av-media[hidden]{display:none}
.av-media video{display:block;width:100%;max-height:60vh;max-height:60dvh;border-radius:16px;background:#000}
.av-media audio{display:block;width:100%}
.clm{margin-top:12px;padding:18px;border-radius:32px;background:linear-gradient(135deg,#2f9fc0,#1f7c99);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.clm-t{margin:0 0 4px;font:800 1.6rem/1.2 "Baloo 2",Nunito,sans-serif}
.clm-i{margin-top:12px;padding:12px;border-radius:24px;background:rgba(255,255,255,.16)}
.clm-n{margin:0 0 8px;font-weight:800;font-size:1.1rem}
.clm-i audio{display:block;width:100%}
.clm-i video{display:block;width:100%;max-height:60vh;border-radius:16px;background:#000}

/* ---- web video inside the teacher's card (2.7.2): any screen ---- */
.av-vid{position:relative;width:100%;max-width:56rem;height:0;padding-bottom:56.25%;margin:0 auto;border-radius:16px;overflow:hidden;background:#000}   /* 16:9 by padding: works on old phones too */
.av-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.av-vskip{display:block;margin:10px auto 2px;min-height:52px;padding:8px 24px;border:0;border-radius:999px;background:var(--x-sav);font:800 1.1rem Nunito,sans-serif;color:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.av-vskip:focus-visible{outline:4px solid var(--x-sun)}.av-vskip:active{transform:translateY(2px);box-shadow:none}
.av.vid .av-big,.av.vid .av-count{display:none}                      /* while the video plays the teacher shrinks so it gets the room */
@media (max-width:640px){.av.vid .av-stage{grid-template-columns:64px 1fr;gap:10px}.av.vid .av-bubble{min-height:0;padding:8px 10px;font-size:1rem}.av-media{padding:6px}}
@media (min-width:1024px){.av.vid .av-stage{grid-template-columns:96px 1fr}}
@media (max-height:520px) and (orientation:landscape){                /* phone held sideways: the video never grows taller than the screen */
  .av-vid{width:min(100%,calc((100vh - 8rem) * 1.7778));width:min(100%,calc((100dvh - 8rem) * 1.7778))}
  main .aspect-video{max-height:calc(100vh - 5rem);max-height:calc(100dvh - 5rem)}
}

/* ---- pictures and maths on the teacher's card (2.8.0): the teacher's own pictures, adding, taking away and groups ---- */
.av-o{position:relative;display:inline-block;line-height:1}
.av-ob{display:inline-block;line-height:1}
img.av-ob{width:1.25em;height:1.25em;object-fit:contain;vertical-align:middle;-webkit-user-drag:none;user-select:none}
.av-count.dense{font-size:1.7rem}.av-count.dense2{font-size:1.35rem}
.av-grp{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;padding:6px 10px;border-radius:20px;background:rgba(27,122,74,.1);border:3px dashed rgba(27,122,74,.38);max-width:100%}
.av-grp.g2{background:rgba(245,166,35,.18);border-color:rgba(200,130,10,.55)}
.av-op{align-self:center;font:800 2.2rem/1 "Baloo 2",Nunito,sans-serif;color:var(--x-sav);padding:0 4px}
.av-o.gone{opacity:.4;filter:grayscale(1);transform:scale(.82);transition:transform .25s,opacity .25s}
.av-o.gone::after{content:"";position:absolute;inset:8%;background:linear-gradient(45deg,transparent 45%,#b3261e 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#b3261e 45% 55%,transparent 55%);filter:drop-shadow(0 0 2px #fff)}
.av-pic{display:block;margin:0 auto;max-width:100%;max-height:10rem;object-fit:contain;border-radius:16px;animation:avpop .35s ease-out}
/* drawing pad (teacher form) */
.pad-wrap{margin-top:10px;padding:10px;border-radius:22px;background:#fff}
.pad{display:block;width:100%;max-width:360px;aspect-ratio:1/1;margin:0 auto;border-radius:16px;border:3px solid var(--x-cream);touch-action:none;cursor:crosshair;
  background-color:#fff;background-image:linear-gradient(45deg,#f1ece4 25%,transparent 25%,transparent 75%,#f1ece4 75%),linear-gradient(45deg,#f1ece4 25%,transparent 25%,transparent 75%,#f1ece4 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.pad-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:8px}
.pad-sw{width:40px;height:40px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px rgba(38,32,27,.25);cursor:pointer}
.pad-sw[aria-pressed=true]{box-shadow:0 0 0 4px var(--x-sav)}
.pic-thumb{width:56px;height:56px;object-fit:contain;border-radius:12px;background:#fff;border:2px solid var(--x-cream)}

/* Icons that replaced emoji */
.icon-fill{fill:currentColor}
.icon-star{color:var(--x-sun,#f2a900)}
.icon-star-off{color:rgba(38,32,27,.3)}
.icon-good{color:var(--x-sav,#167a4d)}
.icon-bad{color:#b3261e}
.icon-warn{color:#b26a00}

/* Speaking check: syllable chart and the "record for my teacher" fallback */
.av.chart .av-big{display:none}
.av-chart{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .7rem;padding:.2rem}
.av-cs{font:800 2.6rem/1.1 Fredoka,Nunito,sans-serif;padding:.1em .3em;border-radius:.5em;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.08);opacity:.55;transition:transform .15s,opacity .15s}
.av-cs.now{opacity:1;transform:scale(1.18);outline:3px solid var(--x-sun)}
.av-cs.ok{opacity:1;background:#dff3e6;outline:3px solid var(--x-sav)}
.av-cs.miss,.av-cs.done{opacity:.9}
.av-rec{margin:.6rem auto 0;display:flex;align-items:center;gap:.4rem}
@media (prefers-reduced-motion:reduce){.av-cs{transition:none}.av-cs.now{transform:none}}

/* Data-lite switch and the offline video progress bar */
[data-lite-btn][aria-pressed="true"]{background:var(--x-sav);color:#fff}
.cl-vbar{height:10px;border-radius:99px;background:rgba(38,32,27,.12);overflow:hidden}
.cl-vbar i{display:block;height:100%;background:var(--x-sav);transition:width .2s}

/* ---- Course page polish (v2.9.2) ---- */
.cl-art{display:grid;place-items:center;width:100%;color:#fff}
.cl-art span{font-size:4.5rem;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.cl-badge{position:absolute;left:1rem;top:1rem;border-radius:9999px;background:#f5a623;color:#26201b;padding:.25rem .8rem;font-size:.875rem;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.cl-lockb{position:absolute;right:1rem;top:1rem;display:grid;height:2.5rem;width:2.5rem;place-items:center;border-radius:9999px;background:#fff;font-size:1.25rem;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.cl-by{display:flex;align-items:center;gap:.5rem;margin:.15rem 0 .25rem;color:#26201b;font-weight:700;font-size:1rem}
.cl-filters{margin:.75rem 0 1rem;padding:.75rem 1rem;border-radius:1.5rem;background:#fff;box-shadow:0 6px 0 rgba(38,32,27,.07),0 10px 24px rgba(22,122,77,.1)}
.cl-frow{display:flex;align-items:flex-start;gap:.75rem;padding:.35rem 0}
.cl-frow+.cl-frow{border-top:1px dashed rgba(38,32,27,.15)}
.cl-flabel{flex:0 0 4rem;padding-top:.6rem;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgba(38,32,27,.6)}
.cl-fpills{display:flex;flex:1;flex-wrap:wrap;gap:.5rem;align-items:center}
.cl-filters .pill{min-height:2.5rem;padding:.25rem .9rem;box-shadow:none;border:2px solid rgba(38,32,27,.12)}
.cl-filters .pill[aria-pressed="true"]{border-color:transparent}
.cl-fsep{margin-left:.25rem;padding-left:.75rem;border-left:2px solid rgba(38,32,27,.15);font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgba(38,32,27,.6)}
.cl-fcount{margin-top:.25rem;padding-top:.5rem;border-top:1px dashed rgba(38,32,27,.15);font-size:.875rem;font-weight:700;color:rgba(38,32,27,.7)}
.cl-fclear{margin-left:.5rem;border:0;background:none;padding:.25rem .25rem;font-weight:800;color:#167a4d;text-decoration:underline;cursor:pointer}
@media (max-width:639px){.cl-frow{flex-direction:column;gap:.25rem}.cl-flabel{flex:none;padding-top:0}.cl-fpills{flex-wrap:nowrap;overflow-x:auto;margin:0 -.25rem;padding:.1rem .25rem .35rem}.cl-fsep{flex:none}.cl-filters .pill{flex:none}}

/* Header: room above the notch; on phones one tidy row, with the extras behind a "..." button */
.cl-hdr-in{padding-top:calc(.75rem + env(safe-area-inset-top));padding-bottom:.75rem;gap:.75rem}
.cl-hdr-act{gap:.75rem}
.cl-hdr-more{display:flex;align-items:center;gap:.75rem}
.cl-hdr-morebtn{display:none}
.cl-lbar{display:none}
@media (max-width:639px){
  .cl-hdr-in,.cl-hdr-act{gap:.5rem}
  .cl-hdr-in>a{min-width:0}
  .cl-hdr-in>a>span:last-child{max-width:6.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-hdr-morebtn{display:grid}
  .cl-hdr-more{display:none;position:absolute;right:.75rem;top:100%;margin-top:.25rem;padding:.75rem;border-radius:1.25rem;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.22);z-index:50}
  .cl-hdr-more.open{display:flex}
  /* Lesson page on a phone: the lesson gets the whole screen. No site header, no bottom tab bar, no floating "Read this page" button. */
  body.cl-lesson header.cl-hdr,body.cl-lesson nav[aria-label=Quick],body.cl-lesson .clsay-page,body.cl-lesson .cl-bc{display:none}
  body.cl-lesson .cl-lbar{display:flex;align-items:center;gap:.5rem;padding-top:env(safe-area-inset-top);margin-bottom:.5rem}
  .cl-lback{display:grid;place-items:center;flex:none;height:2.75rem;width:2.75rem;border-radius:9999px;background:rgba(255,255,255,.15);color:#fff;font-size:1.5rem;font-weight:800;text-decoration:none}
  .cl-lttl{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;color:#fff}
}

/* removal request form (2.9.4) */
.cl-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;place-items:center;padding:1rem;background:rgba(38,32,27,.6)}