/* course layer: missions, teacher mode, focus view, compare slider, a11y, print. Loaded after style.css */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--am);color:#111;padding:8px 14px;border-radius:8px;font-weight:600}
.skip:focus{top:10px}
.warn{margin:0;padding:12px 20px;background:#3a1f1f;color:#ffb4b4;text-align:center;font-size:14px}
.warn[hidden]{display:none}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px;border-radius:4px}
.cv canvas:focus-visible{outline-offset:-3px}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--cy)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--cy)}
.tag{font-size:12px}
.mapbox small,.mapwide small{font-size:12.5px}

/* toast + header pills */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;background:var(--p2);border:1px solid var(--gr);color:var(--tx);padding:11px 20px;border-radius:99px;font-size:14px;box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 24px rgba(110,231,160,.25);transition:.35s;max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
body.teach #toast{bottom:84px}
.pill{background:var(--p2);color:var(--tx);border:1px solid var(--bd);border-radius:99px;padding:6px 12px;cursor:pointer;font:600 13px Cairo,Sora,sans-serif;white-space:nowrap}
.pill:hover{border-color:var(--am)}
.pill b{color:var(--am)}
.pill[aria-pressed=true]{background:var(--cy);color:#04141a;border-color:var(--cy)}
.pill.pop{animation:pop .8s}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(110,231,160,.35)}100%{transform:scale(1)}}
.links a.done::after{content:" \2713";color:var(--gr)}
.links a.on.done::after{color:#06502a}

/* missions */
.miss{background:var(--p1);border:1px solid var(--bd);border-radius:var(--r);padding:14px 18px;margin-bottom:16px}
.miss h4{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--am);margin-bottom:8px}
[dir=rtl] .miss h4{letter-spacing:0;font-size:14px}
.miss ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.miss li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tx2);padding:5px 6px;border-radius:8px;transition:color .3s}
.miss li i{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid #3a4258;display:grid;place-items:center;font-style:normal;font-size:11px;line-height:1;transition:.3s}
.miss li.done{color:var(--gr)}
.miss li.done i{background:var(--gr);border-color:var(--gr);color:#04140a}
.miss li.done i::after{content:"\2713"}
.miss li.done span{text-decoration:line-through;text-decoration-color:rgba(110,231,160,.5)}
.miss li.pop{animation:glow .9s}
@keyframes glow{0%{background:rgba(110,231,160,.35)}100%{background:transparent}}
.rem{margin:18px 0 0;display:flex;gap:10px;align-items:center;padding:12px 16px;border-inline-start:3px solid var(--am);background:linear-gradient(90deg,rgba(255,180,84,.1),transparent);border-radius:10px;font-weight:600;font-size:15px}
[dir=rtl] .rem{background:linear-gradient(270deg,rgba(255,180,84,.1),transparent)}
.rem i{font-style:normal}

/* why / compare */
.demo.solo{grid-template-columns:1fr}
.cmpv .gl{cursor:ew-resize}
input.cmp{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3;touch-action:pan-y}
.cmpl{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8);z-index:2;pointer-events:none}
.cmpl::after{content:"\21C6";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:19px;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.cmpv .tag{z-index:2;inset-inline-start:auto;inset-inline-end:auto;font-size:12.5px;padding:4px 11px}
.cmpv .tag.l{left:12px}
.cmpv .tag.r{right:12px}
.why4{margin-top:16px}

/* teacher cue + dock */
.cue{display:none;margin:0 0 16px;background:var(--ink2);border:1px dashed var(--cy);border-radius:var(--r);padding:14px 18px}
body.teach .cue{display:block}
.cue-h{display:flex;justify-content:space-between;align-items:center;color:var(--cy);font-size:13px;margin-bottom:10px}
.cue-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cue h5{margin:0 0 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu)}
[dir=rtl] .cue h5{letter-spacing:0;font-size:13px}
.cue p,.cue li{font-size:13.5px;color:var(--tx2);margin:0}
.cue ul{margin:0;padding-inline-start:16px}
.cue li{margin:3px 0}
.cue details{margin-top:12px;font-size:13.5px}
.cue summary{cursor:pointer;color:var(--am);font-weight:600}
.cue .ans{color:var(--gr);margin-top:6px}
#dock{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;padding:9px 16px;background:rgba(8,12,18,.95);backdrop-filter:blur(10px);border-top:1px solid var(--cy);font-size:13px}
#dock[hidden]{display:none}
#dock button{background:var(--p2);color:var(--tx);border:1px solid var(--bd);border-radius:99px;padding:6px 14px;cursor:pointer;font:600 13px Cairo,Sora,sans-serif}
#dock button:hover{border-color:var(--cy)}
#dName{min-width:160px;text-align:center}
.dt{color:var(--mu);font-family:ui-monospace,Consolas,monospace;direction:ltr}
.dt b{color:var(--gr)}
.dt b.over{color:var(--rd)}
body.teach footer{padding-bottom:110px}

/* focus (full-screen) view of one demo */
.fsb{position:absolute;top:10px;inset-inline-end:10px;z-index:5;width:34px;height:34px;border-radius:9px;border:1px solid var(--bd);background:rgba(10,12,17,.7);color:var(--tx);cursor:pointer;font-size:16px;opacity:.75}
.fsb:hover{opacity:1;border-color:var(--am)}
body.fs{overflow:hidden}
.demo.focus{position:fixed;inset:0;z-index:70;background:var(--bg);padding:14px;gap:14px;grid-template-columns:minmax(0,1fr) 360px;align-items:stretch;overflow:auto}
.demo.solo.focus{grid-template-columns:1fr}
.demo.focus .view{display:flex;flex-direction:column;min-height:0;height:100%}
.demo.focus .cv{flex:1;min-height:0;aspect-ratio:auto}
.demo.focus .under{flex:none}
.demo.focus .ctl{position:static;overflow:auto;max-height:100%;zoom:1.12}
.demo.focus .fsb{width:44px;height:44px;font-size:19px}
body.teach .demo.focus{padding-bottom:120px}

/* scroll reveal (only when JS is on) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}

@media(pointer:coarse){
  .seg button,.chips button,.tabs button,.qq button{padding-block:11px;min-height:44px}
  .pill,#lang{padding:10px 14px}
  input[type=range]{height:36px}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-11px}
  .ck{margin:12px 0}
  .fsb{width:44px;height:44px}
}
@media(max-width:980px){
  .cue-g{grid-template-columns:1fr 1fr}
  .demo.focus{display:block}
  .demo.focus .view{display:block;height:auto}
  .demo.focus .cv{height:60vh;flex:none}
  .demo.focus .ctl{zoom:1;margin-top:14px;max-height:none}
}
@media(max-width:560px){
  #nav{gap:8px;padding:8px 10px}
  #tbtn{font-size:0}
  #tbtn::before{content:"\1F469\200D\1F3EB";font-size:16px}
  .cue-g{grid-template-columns:1fr}
  #dName{min-width:0;flex:1 1 100%;order:-1}
}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* print = the worksheet only */
#sheet{display:none}
@media print{
  body>*:not(#sheet){display:none!important}
  html,body{background:#fff!important}
  #sheet{display:block;color:#000;font:14px/1.5 Cairo,Sora,Arial,sans-serif}
  #sheet h1{font-size:22px;margin-bottom:6px}
  #sheet h3{font-size:15px;margin:14px 0 4px;border-bottom:1px solid #999;break-after:avoid}
  #sheet ul{list-style:none;padding:0;margin:0 0 4px}
  #sheet li{margin:3px 0}
  #sheet .wr{color:#555;margin:6px 0 10px}
  #sheet .qs{font-weight:700;margin:10px 0 2px;break-after:avoid}
  #sheet .qo{margin-inline-start:18px}
}
.panel{min-width:0;overflow-x:auto}
@media(max-width:560px){
  .tbl td:first-child{white-space:normal}
  .tbl th,.tbl td{padding:8px 6px;font-size:13px}
}
@media(max-width:560px){
  #dock{padding:6px 8px;gap:6px 8px}
  #dock button{padding:5px 10px;font-size:12px}
  #dock>.dt:nth-of-type(2){display:none}
  body.teach footer{padding-bottom:90px}
}
.snaps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.snap{background:var(--p2);border:1px solid var(--bd);border-radius:8px;padding:4px;cursor:pointer;color:var(--mu);font:11px/1.3 ui-monospace,Consolas,monospace;text-align:start}
.snap img{width:100%;border-radius:5px;display:block}
.snap:hover{border-color:var(--am)}
.snap small{display:block;margin-top:3px;direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miss li{flex-wrap:wrap}
.hint-b{margin-inline-start:auto;background:none;border:0;cursor:pointer;opacity:.55;font-size:15px;line-height:1;padding:0 2px}
.hint-b:hover{opacity:1}
.hint-t{flex:0 0 100%;color:var(--cy);font-size:13px;padding-inline-start:28px}
.hint-t[hidden]{display:none}