/* IE242 · German Jordanian University — SCORM learning engine styles
   Layout: one centred reading column (max 820px), black brand bar on top, fixed action bar at the bottom.
   Brand: GJU black #000, red #CE1126, gold #FFCC00, white. Semantic green/maroon only for right/wrong. */
:root{
  /* brand */
  --black:#000000; --red:#CE1126; --red-dark:#A50E1F; --red-soft:#FCEBED;
  --gold:#FFCC00; --gold-deep:#6B5000; --gold-soft:#FFF5CC; --gold-line:#E9C42E;
  /* neutrals (very slight red bias) */
  --ink:#141414; --ink2:#55524F; --line:#E2DFDD; --bg:#F4F3F3; --card:#FFFFFF; --tint:#F7F6F5; --tint2:#EEECEA;
  /* semantic */
  --ok:#137333; --ok-soft:#E6F4EA; --bad:#8E1B1B; --bad-soft:#FBEAEA;
  /* legacy aliases used by older inline styles */
  --primary:var(--black); --primary-soft:var(--gold-soft); --accent:var(--red); --accent-soft:var(--red-soft); --warn-soft:var(--gold-soft);
  /* type */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 5px var(--black)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
a{color:var(--red-dark)}
b,strong{font-weight:700}

/* ---------- brand bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--black);color:#fff;padding:.55rem max(16px,env(safe-area-inset-left,0px)) .55rem max(16px,env(safe-area-inset-right,0px))}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:linear-gradient(90deg,var(--red) 0 50%,var(--gold) 50% 100%)}
.topbar .row{display:flex;align-items:center;gap:.45rem;max-width:820px;margin:0 auto;flex-wrap:wrap}
.topbar .title{font-weight:700;font-size:.9rem;flex:1 1 10rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.topbar .title .uni{color:var(--gold);font-weight:800;letter-spacing:.06em;margin-right:.35rem}
.stat{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.12);border-radius:999px;padding:.12rem .6rem;font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat.pts{color:var(--gold);font-weight:700}
.topbar .wordsbtn{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;padding:.12rem .65rem;font-size:.82rem;font-weight:600;cursor:pointer;min-height:30px}
.topbar .wordsbtn:hover{border-color:var(--gold);color:var(--gold)}
.progress{max-width:820px;margin:.45rem auto 0;height:8px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .4s}
.progress-label{max-width:820px;margin:.25rem auto 0;font-size:.74rem;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}

/* ---------- page ---------- */
main{max-width:820px;margin:0 auto;padding:1.4rem max(16px,env(safe-area-inset-right,0px)) 7rem max(16px,env(safe-area-inset-left,0px))}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem 1.15rem;margin-bottom:1rem;border:1px solid var(--line)}
@media(min-width:700px){.card{padding:1.8rem 2rem}main{padding-top:2rem}}
h1:focus{outline:none;box-shadow:none}
h1{font-size:1.6rem;line-height:1.22;font-weight:800;letter-spacing:-.015em;margin:.25rem 0 .8rem;text-wrap:balance}
h2{font-size:1.2rem;line-height:1.3;font-weight:800;letter-spacing:-.01em;margin:1.2rem 0 .5rem;text-wrap:balance}
h3{font-size:1.04rem;font-weight:700;margin:.9rem 0 .4rem}
p{margin:.55rem 0}
ul,ol{padding-left:1.3rem;margin:.5rem 0}
li{margin:.25rem 0}
.lead{font-size:1.1rem;line-height:1.55}
.muted{color:var(--ink2)}
.small{font-size:.88rem}

/* chips: who works on this screen */
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.35rem}
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:.18rem .65rem;background:var(--tint2);color:var(--ink);border:1.5px solid transparent}
.chip.solo{background:#fff;border-color:var(--ink)}
.chip.pairs{background:var(--gold-soft);color:var(--gold-deep);border-color:var(--gold-line)}
.chip.group{background:var(--red-soft);color:var(--red-dark);border-color:#F2B8BF}
.chip.class{background:var(--black);color:var(--gold)}
.chip.time{background:var(--tint2);color:var(--ink2);text-transform:none;letter-spacing:0;font-weight:600}

/* boxes */
.box{border-radius:12px;padding:.85rem 1rem;margin:.85rem 0;border:1px solid var(--line);background:var(--tint)}
.box.case{background:var(--gold-soft);border-color:var(--gold-line)}
.box.case > b:first-child{color:var(--ink)}
.box.tip{background:var(--tint);border-color:var(--line)}
.box.warn{background:var(--red-soft);border-color:#F2B8BF}
.box.key{background:var(--tint)}
.grid2,.grid3{display:grid;gap:.8rem}
.grid2>*,.grid3>*{min-width:0;margin:0}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}}

/* tables */
.tbl-wrap{overflow-x:auto;margin:.7rem 0;border:1px solid var(--line);border-radius:10px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
th,td{padding:.5rem .65rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--black);color:#fff;font-weight:700}
tbody th{background:var(--tint);font-weight:700}
tr:last-child td,tr:last-child th{border-bottom:none}
figure{margin:.9rem 0}
figure svg,figure img{max-width:100%;height:auto;display:block;margin:0 auto}
figcaption{font-size:.84rem;color:var(--ink2);text-align:center;margin-top:.35rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;padding:.55rem 1.15rem;border-radius:12px;border:2px solid transparent;background:var(--red);color:#fff;font-weight:700;cursor:pointer;text-align:center;line-height:1.25;touch-action:manipulation}
.btn:hover{background:var(--red-dark)}
.btn:disabled{background:#D8D5D3;color:#6B6865;cursor:not-allowed}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.secondary:hover{border-color:var(--red);color:var(--red-dark)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.ghost:disabled,.btn.secondary:disabled{background:#fff;color:#A9A5A1;border-color:var(--line)}
.btn.accent{background:var(--black);color:var(--gold)}
.btn.accent:hover{background:#222}
.btn.small{min-height:44px;padding:.35rem .85rem;font-size:.9rem}
.helpers{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.helpers .btn{flex:1 1 210px}

/* ---------- bottom action bar ---------- */
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.98);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.05);padding:.6rem max(16px,env(safe-area-inset-right,0px)) calc(.55rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.navbar .row{max-width:820px;margin:0 auto;display:flex;gap:.6rem;align-items:center}
.navbar .btn{flex:1}
.navbar .btn.back{flex:0 0 auto;min-width:88px}
.navhint{font-size:.8rem;color:var(--ink2);text-align:center;max-width:820px;margin:.3rem auto 0;min-height:1em}
.navhint:empty{display:none}

/* ---------- answer options ---------- */
.opts{display:grid;gap:.55rem;margin:.8rem 0}
.opt{display:flex;gap:.75rem;align-items:flex-start;text-align:left;width:100%;min-height:52px;padding:.75rem .9rem;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;font-weight:500;line-height:1.45;touch-action:manipulation}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt .key{flex:0 0 1.75rem;height:1.75rem;border-radius:50%;background:var(--tint2);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.opt.sel{border-color:var(--ink);background:var(--gold-soft)}
.opt.sel .key{background:var(--black);color:var(--gold)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .key{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .key{background:var(--bad);color:#fff}
.opt:disabled{cursor:default;color:var(--ink)}
.opt:disabled:not(.right):not(.wrong):not(.sel){opacity:.6}
.qprompt{font-size:1.08rem;font-weight:700;margin:.45rem 0;line-height:1.45}
.qmeta{font-size:.75rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.feedback{border-radius:12px;padding:.85rem 1rem;margin:.85rem 0;border:1px solid;border-left-width:6px}
.feedback.ok{background:var(--ok-soft);border-color:var(--ok)}
.feedback.bad{background:var(--bad-soft);border-color:var(--bad)}
.feedback.hint{background:var(--gold-soft);border-color:var(--gold-line)}
.feedback.info{background:var(--tint);border-color:var(--ink)}
.feedback strong:first-child{display:block;margin-bottom:.25rem;font-size:1.02rem}
.feedback.ok strong:first-child{color:var(--ok)}
.feedback.bad strong:first-child{color:var(--bad)}
.feedback .why{font-weight:700;color:var(--ink2);text-transform:uppercase;font-size:.72rem;letter-spacing:.07em;display:block;margin-top:.35rem}
.feedback .btn{margin-top:.5rem}
.numrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.7rem 0}
input[type=text],input[type=number],textarea,select{border:2px solid var(--line);border-radius:10px;padding:.55rem .7rem;background:#fff;min-height:48px;max-width:100%;font-size:1rem}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--gold)}
input:disabled{background:var(--tint);color:var(--ink)}
textarea{width:100%;min-height:120px;resize:vertical;line-height:1.5}
label.block{display:block;font-weight:700;margin:.85rem 0 .35rem}

/* confidence scale */
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin:.8rem 0}
.scale button{min-height:72px;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;font-weight:800;font-size:1.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.3rem .15rem;touch-action:manipulation}
.scale button small{font-size:.7rem;font-weight:600;color:var(--ink2);line-height:1.15;margin-top:.2rem;text-align:center}
.scale button:hover{border-color:var(--ink)}
.scale button[aria-pressed=true]{border-color:var(--ink);background:var(--gold)}
.scale button[aria-pressed=true] small{color:var(--ink)}

/* checklists */
.checklist{display:grid;gap:.5rem;margin:.8rem 0}
.check{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem .85rem;border:2px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;line-height:1.45}
.check input{width:1.45rem;height:1.45rem;margin-top:.05rem;flex:0 0 auto;accent-color:var(--ok)}
.check.on{border-color:var(--ok);background:var(--ok-soft)}

/* sorting */
.sortitem{border:2px solid var(--line);border-radius:12px;padding:.7rem .85rem;margin:.55rem 0;background:#fff}
.sortitem .name{font-weight:700}
.bins{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.bins button{min-height:44px;padding:.3rem .85rem;border-radius:999px;border:2px solid var(--line);background:#fff;cursor:pointer;font-size:.9rem;font-weight:700;touch-action:manipulation}
.bins button:hover:not(:disabled){border-color:var(--ink)}
.bins button.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.bins button.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.bins button:disabled{cursor:default}
.sortitem.done{border-color:var(--ok)}
.sortitem .why{font-size:.9rem;margin-top:.4rem}

/* path cards */
.pathcards{display:grid;gap:.8rem;margin:1rem 0}
@media(min-width:600px){.pathcards{grid-template-columns:1fr 1fr}}
.pathcard{border:2px solid var(--line);border-radius:14px;padding:1rem 1.1rem;background:#fff;cursor:pointer;text-align:left;min-height:120px;line-height:1.45}
.pathcard:hover{border-color:var(--ink)}
.pathcard[aria-pressed=true]{border-color:var(--ink);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--ink)}
.pathcard .big{font-size:1.8rem}
.pathcard strong{display:block;font-size:1.08rem;margin:.25rem 0}

/* animation player ("Watch it") */
.anim{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.anim .stage{padding:.4rem;min-height:200px;display:flex;align-items:center;justify-content:center;background:var(--tint)}
.anim .stage svg{max-width:100%;height:auto}
.anim .cap{padding:.8rem 1rem;background:#fff;border-top:1px solid var(--line);min-height:4.5rem;line-height:1.55}
.anim .ctrl{display:flex;gap:.4rem;align-items:center;padding:.5rem .7rem;background:var(--tint2);flex-wrap:wrap}
.anim .dots{display:flex;gap:.35rem;margin-left:auto}
.anim .dots span{width:10px;height:10px;border-radius:50%;background:#C9C5C2}
.anim .dots span.on{background:var(--red)}
.fadein{animation:fadein .45s ease}
@keyframes fadein{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fadein{animation:none}.progress>span{transition:none}*{scroll-behavior:auto!important}}

/* badges, toast, summary */
.badges{display:flex;flex-wrap:wrap;gap:.55rem;margin:.6rem 0}
.badge{display:flex;align-items:center;gap:.5rem;border:2px solid var(--gold-line);background:var(--gold-soft);border-radius:999px;padding:.3rem .85rem .3rem .35rem;font-weight:700;font-size:.9rem}
.badge .medal{width:2rem;height:2rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--gold);box-shadow:inset 0 0 0 2px var(--black);font-size:1.05rem}
.badge.locked{background:#fff;border-color:var(--line);border-style:dashed;color:var(--ink2)}
.badge.locked .medal{background:var(--tint2);box-shadow:none;filter:grayscale(1);opacity:.6}
.toast{position:fixed;right:max(.6rem,env(safe-area-inset-right,0px));top:calc(6.6rem + env(safe-area-inset-top,0px));z-index:40;background:var(--black);color:#fff;padding:.5rem .8rem;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.25);max-width:min(320px,80vw);font-weight:600;font-size:.86rem;pointer-events:none;border-left:4px solid var(--gold)}
.statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:.9rem 0}
@media(min-width:640px){.statgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.statbox{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:.75rem .5rem;text-align:center}
.statbox b{display:block;font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums}
.statbox span{font-size:.8rem;color:var(--ink2)}
.statbox.hero{background:var(--black);color:#fff;border-color:var(--black)}
.statbox.hero b{color:var(--gold)}
.statbox.hero span{color:rgba(255,255,255,.8)}
.meter{height:12px;background:var(--tint2);border-radius:999px;overflow:hidden}
.meter>span{display:block;height:100%;background:var(--black)}

/* simulations */
.sim{border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;background:var(--tint);margin:.9rem 0}
.sim input[type=range]{width:100%;accent-color:var(--red);min-height:40px;cursor:pointer}
.sim figure svg{max-width:560px}
.simout{font-weight:700}
.timer{font-variant-numeric:tabular-nums;font-size:2.2rem;font-weight:800;text-align:center;letter-spacing:.02em}
.matrix input{width:3.4rem;text-align:center;min-height:44px;padding:.2rem}
.bar{height:22px;border-radius:6px;background:var(--black);min-width:2px}
.rank-row{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 3rem;gap:.5rem;align-items:center;margin:.4rem 0;font-variant-numeric:tabular-nums}
.kbd{font-family:var(--mono);background:var(--tint2);border-radius:6px;padding:.05rem .35rem;white-space:nowrap}

/* comparison: table on wide screens, one card per material on phones */
.only-narrow{display:none}
@media(max-width:599px){.only-wide{display:none}.only-narrow{display:block}}
dl.kv{display:grid;grid-template-columns:minmax(7rem,42%) minmax(0,1fr);gap:.25rem .7rem;margin:.45rem 0 0;font-size:.92rem}
dl.kv dt{color:var(--ink2)}
dl.kv dd{margin:0;font-weight:600}

/* key words: tap a word to see what it means */
.term{border-bottom:2px dotted var(--red);cursor:help;font-weight:inherit;border-radius:2px}
.term:hover{background:var(--red-soft)}
.wordsheet{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:4px solid var(--gold);box-shadow:0 -10px 30px rgba(0,0,0,.18);padding:1rem max(16px,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));max-height:70vh;overflow-y:auto}
.wordsheet .inner{max-width:820px;margin:0 auto}
.wordsheet .head{display:flex;align-items:center;gap:.6rem;justify-content:space-between}
.wordsheet h2{margin:0;font-size:1.15rem}
.wordsheet dl{margin:.5rem 0 0}
.wordsheet dt{font-weight:800;margin-top:.7rem}
.wordsheet dd{margin:.15rem 0 0;color:var(--ink)}
.wordsheet .one{font-size:1.02rem;margin:.4rem 0 0}

/* short screens (phones held sideways): keep more room for content */
@media(max-height:520px){
  .topbar{padding-top:.3rem;padding-bottom:.35rem}
  .progress{margin-top:.3rem}
  .progress-label{display:none}
  .navbar{padding-top:.4rem;padding-bottom:calc(.4rem + env(safe-area-inset-bottom,0px))}
  .navbar .btn{min-height:42px}
  .navhint{display:none}
  main{padding-bottom:5rem}
  .toast{top:calc(4.2rem + env(safe-area-inset-top,0px))}
}
/* very small phones */
@media(max-width:360px){
  html{font-size:16px}
  .navbar .btn.back{min-width:76px;padding-left:.7rem;padding-right:.7rem}
  .stat{padding:.1rem .45rem}
  .scale button small{font-size:.64rem}
}
.kbd.url{white-space:normal;overflow-wrap:anywhere}
table.fit{min-width:0}

/* lecture clips */
.lecture{display:grid;gap:.9rem;margin:.9rem 0}
.vclip{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.vhead{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center;padding:.65rem .9rem;background:var(--black);color:#fff}
.vbadge{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
.vtitle{font-weight:700;flex:1 1 12rem;min-width:0}
.vdur{font-size:.84rem;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.vdone{color:#7EE2A0;font-weight:700}
.vlisten{padding:.6rem .9rem .2rem;background:var(--gold-soft);border-bottom:1px solid var(--gold-line);font-size:.94rem}
.vlisten ul{margin:.25rem 0 .4rem}
.vclip video{display:block;width:100%;height:auto;background:#000;aspect-ratio:1432/1024;max-height:70vh}
.vrow{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;padding:.5rem .9rem}
.vrow select{min-height:40px;padding:.2rem .4rem}

/* Materials Project cards */
.mpgrid{display:grid;gap:.7rem;margin:.8rem 0}
@media(min-width:640px){.mpgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.mpgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mpcard{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;min-width:0}
.mpcard header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;padding:.55rem .8rem;background:var(--tint2);border-bottom:2px solid var(--black)}
.mpid{font-family:var(--mono);font-size:.78rem;background:var(--black);color:var(--gold);border-radius:6px;padding:.05rem .4rem}
.mpf{font-size:1.25rem;font-weight:800}
.mpn{color:var(--ink2);font-size:.9rem}
.mpcard dl.kv{padding:0 .8rem .6rem}
.mpcard p{padding:0 .8rem;margin:.2rem 0 .7rem}