@font-face{font-family:Tajawal;font-weight:400;src:url(fonts/Tajawal-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:Tajawal;font-weight:700;src:url(fonts/Tajawal-Bold.ttf) format('truetype');font-display:swap}
/* «خُطى» design tokens — mobile first (base = ~360px phones), enhanced at 640px and 960px. RTL is the native direction. */
:root{--g:#0b6e5a;--g1:#19b58b;--g2:#e6f4ef;--g3:#f3faf7;--amber:#f7b733;--ink:#14231e;--mut:#586a63;--line:#d9e5df;--bad:#b3261e;--bad2:#fdecea;--warn:#8a5a00;--warn2:#fff4d6;--ok:#146c2e;--ok2:#e3f6e8;--r:16px;--sh:0 1px 2px rgba(12,60,48,.06),0 6px 18px rgba(12,60,48,.07);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font-family:Tajawal,system-ui,sans-serif;color:var(--ink);background:radial-gradient(1200px 380px at 100% -80px,#d4efe5 0,transparent 70%),#f5faf8;line-height:1.75;font-size:17px;min-height:100vh}
#app{max-width:1060px;margin:0 auto;padding:0 14px 28px}
h1,h2,h3{line-height:1.35;margin:.2em 0 .5em}
h1{font-size:1.55rem}h2{font-size:1.2rem}h3{font-size:1.05rem}
a{color:var(--g)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:8px}
.page{animation:rise .45s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* legal bar (always visible; short text on phones) */
.legalbar{margin:0 -14px;background:#103c32;color:#e6f4ef;padding:7px 14px;font-size:.8rem;line-height:1.55;text-align:center}
.legalbar a{color:#ffd978;font-weight:700}
.legalbar .long{display:none}
/* header */
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.top .sp{flex:1}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo .mark{transition:transform .4s var(--ease)}.logo:hover .mark{transform:rotate(-8deg) scale(1.06)}
.brand{font-weight:700;font-size:1.55rem;color:var(--g);letter-spacing:.01em}
/* tabs: horizontally scrollable on phones */
nav.tabs{display:flex;gap:8px;margin:8px -14px 14px;padding:2px 14px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:0 0 auto}
nav.tabs a,.btn{font:inherit;cursor:pointer;border:1.5px solid var(--g);background:#fff;color:var(--g);border-radius:12px;padding:10px 18px;min-height:46px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s var(--ease),box-shadow .2s,background .2s,color .2s}
nav.tabs a:hover,.btn:hover:not(:disabled){box-shadow:0 4px 12px rgba(11,110,90,.18);transform:translateY(-1px)}
.btn:active:not(:disabled),nav.tabs a:active{transform:scale(.96)}
nav.tabs a.on,.btn.pri{background:linear-gradient(135deg,var(--g),#12906f);color:#fff;border-color:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.bad{border-color:var(--bad);color:var(--bad)}
.btn.sm{padding:4px 12px;min-height:36px;font-size:.92rem;border-radius:10px}
/* surfaces */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px;box-shadow:var(--sh);animation:rise .45s var(--ease) both}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
.mut{color:var(--mut)}.small{font-size:.88rem}
.badge{display:inline-block;border-radius:99px;padding:0 10px;font-size:.82rem;border:1px solid var(--line);background:#fff;white-space:nowrap}
.badge.ok{background:var(--ok2);color:var(--ok);border-color:#a8dbb5}
.badge.bad{background:var(--bad2);color:var(--bad);border-color:#f2b8b5}
.badge.warn{background:var(--warn2);color:var(--warn);border-color:#f0d58a}
.alert{border-radius:12px;padding:10px 14px;margin:10px 0;border:1px solid;animation:rise .35s var(--ease) both}
.alert.err{background:var(--bad2);border-color:#f2b8b5;color:var(--bad)}
.alert.warn{background:var(--warn2);border-color:#f0d58a;color:var(--warn)}
.alert.ok{background:var(--ok2);border-color:#a8dbb5;color:var(--ok)}
.alert.info{background:var(--g2);border-color:#b9d9c9}
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px solid var(--line);padding:8px;text-align:right;vertical-align:top}
th{background:var(--g2);font-weight:700}
.card>table,.tw{display:block;overflow-x:auto}
input,select,textarea{font:inherit;padding:10px 12px;border:1.5px solid #9fb4aa;border-radius:10px;background:#fff;max-width:100%;min-height:46px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(25,181,139,.18);outline:0}
input[type=checkbox]{min-height:0;width:1.3em;height:1.3em;accent-color:var(--g);vertical-align:middle}
textarea{width:100%;min-height:150px}
label{display:block;margin:8px 0 3px;font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
code,.code{font-family:ui-monospace,Menlo,monospace;direction:ltr;unicode-bidi:isolate;background:#eef3f0;border-radius:6px;padding:0 6px;letter-spacing:.08em}
.codein{font-size:1.7rem;text-align:center;letter-spacing:.3em;direction:ltr;width:min(11em,100%);text-transform:uppercase}
/* landing */
.hero{text-align:center;padding:26px 6px 10px}
.hero h1{font-size:2.5rem;color:var(--g);margin:.15em 0}
.hero .lead{font-size:1.15rem;max-width:30em;margin:.2em auto .6em}
.hero-mark{display:inline-block;animation:float 4.5s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(11,110,90,.25))}
.role{text-decoration:none;color:inherit;display:block;position:relative;transition:transform .25s var(--ease),box-shadow .25s}
.role:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(12,60,48,.14)}
.role .ico{font-size:2rem;display:block}
.role .btn{margin-top:6px}
/* empty state */
.empty{text-align:center;padding:24px 12px;background:linear-gradient(180deg,var(--g3),#fff);border:1.5px dashed #b9d9c9;border-radius:var(--r);margin:6px 0 14px}
.empty .ill{animation:float 5s ease-in-out infinite}
.empty h2{margin:.3em 0 .1em}
/* questions */
.q-stem{font-size:1.2rem;margin:8px 0 14px;white-space:pre-wrap}
.passage{background:#fbfbf4;border:1px solid #e5e2c8;border-radius:12px;padding:12px 16px;margin-bottom:12px;white-space:pre-wrap;max-height:300px;overflow:auto}
.choices{display:grid;gap:10px}
.choice{display:flex;gap:12px;align-items:center;text-align:right;font:inherit;border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;min-height:56px;cursor:pointer;width:100%;transition:transform .15s var(--ease),border-color .2s,background .2s,box-shadow .2s}
.choice:hover:not(:disabled){border-color:var(--g1);box-shadow:0 4px 14px rgba(25,181,139,.18);transform:translateY(-1px)}
.choice:active:not(:disabled){transform:scale(.98)}
.choice .k{flex:0 0 2.3em;height:2.3em;border-radius:50%;background:var(--g2);color:var(--g);display:grid;place-items:center;font-weight:700;transition:background .2s,color .2s}
.choice:hover:not(:disabled) .k{background:var(--g);color:#fff}
.choice.right{border-color:var(--ok);background:var(--ok2);animation:pop .4s var(--ease)}.choice.wrong{border-color:var(--bad);background:var(--bad2);animation:shake .35s}
.prog{height:10px;background:var(--line);border-radius:9px;overflow:hidden;margin:8px 0}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--g1));border-radius:9px;transition:width .5s var(--ease)}
.bar{display:flex;align-items:center;gap:8px;margin:4px 0}
.bar b{flex:0 0 2em}.bar .t{flex:1;height:22px;background:#eaf0ec;border-radius:7px;overflow:hidden}.bar .t i{display:block;height:100%;background:#7fcdb0;transition:width .6s var(--ease)}.bar .t i.c{background:var(--g)}
.sk{max-width:34em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.step{display:inline-flex;align-items:center;gap:6px}.step button{width:2.6em;height:2.6em;font-size:1.2rem}
.step output{min-width:2em;text-align:center;font-size:1.4rem;font-weight:700}
/* legal / consent */
.md h2,.md h3,.md h4{color:var(--g)}.md p,.md li{max-width:46em}.md blockquote{margin:10px 0;padding:8px 14px;border-inline-start:4px solid var(--g1);background:var(--g3);border-radius:8px}
.md hr{border:0;border-top:1px solid var(--line);margin:18px 0}.md .url{direction:ltr;unicode-bidi:isolate;display:inline-block}
.clauses{padding-inline-start:1.2em}.clauses li{margin:6px 0}
.tick{font-weight:400;display:flex;gap:8px;align-items:flex-start;background:var(--g3);border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer}
.warnline{color:var(--warn);margin:4px 0}
.foot{margin-top:28px;border-top:1px solid var(--line);padding-top:12px;color:var(--mut);font-size:.85rem}
.flinks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:6px}
/* >= 640px */
@media(min-width:640px){
 .legalbar .long{display:inline}.legalbar .short{display:none}
 .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
 .roles{grid-template-columns:1fr 1fr}
 h1{font-size:1.9rem}h2{font-size:1.35rem}
 .card{padding:20px}.q-stem{font-size:1.3rem}
 .choices{grid-template-columns:1fr 1fr}
 #app{padding:0 22px 40px}.legalbar{margin:0 -22px}nav.tabs{margin:8px 0 16px;padding:2px 0 6px;flex-wrap:wrap;overflow:visible}
}
@media(min-width:960px){.hero h1{font-size:3.1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* board (projector) mode */
.board{background:#fff;border-radius:16px;padding:24px}
.board .q-stem{font-size:2.1rem}.board .choice{font-size:1.7rem;cursor:default}.board .passage{font-size:1.4rem;max-height:none}
.board .bar{font-size:1.5rem}.board .bar .t{height:38px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cards .c{border:1px dashed #666;border-radius:8px;padding:10px;text-align:center}
.cards .c .code{font-size:1.3rem}
@media print{body{background:#fff}#app>*:not(.printable){display:none!important}.printable{display:block!important}.card{border:0}.noprint{display:none!important}}

/* question figures: inline SVG (never rasterized) so Arabic shaping + the self-hosted font are used */
.fig{margin:12px auto;padding:10px;background:#fff;border:1px solid var(--line,#e3e8ef);border-radius:12px;max-width:560px;text-align:center;direction:rtl}
.fig svg{display:block;width:100%;height:auto;max-height:340px;font-family:'Tajawal',system-ui,sans-serif}
.board .fig{max-width:760px}.board .fig svg{max-height:52vh}
.qsheet .pchoices{font-size:20px;line-height:2;direction:rtl}
@media print{.fig{border:0;break-inside:avoid}.fig svg{max-height:none}}
.fld{display:block;margin:10px 0}.fld>span{display:block;font-weight:600;margin-bottom:4px}.fld>input{width:100%;max-width:420px;box-sizing:border-box}
#teacher-join hr{border:0;border-top:1px solid #d5e2db;margin:18px 0}#teacher-join .tick{display:block;margin:12px 0}