@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--ink:#183b32;--muted:#728079;--green:#205f4a;--dark:#133f32;--bg:#f5f6f2;--cream:#fcfcf9;--line:#dfe6de;--gold:#ad925c;--blue:#eaf2f6;--blue-ink:#244353;--radius:16px;--shadow:0 4px 20px #16362b06}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Arabic',Tahoma,'Segoe UI',sans-serif;font-size:15px;line-height:1.7}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.5;font-weight:600}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;border-radius:9px;padding:10px 16px;font-weight:500;transition:background .16s,color .16s;line-height:1.5;min-height:42px}button:hover:not(:disabled){filter:brightness(.97)}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--green)}.primary,.link-button{background:var(--green);color:white}.outline{border:1px solid #cbd9d0;background:transparent;color:var(--ink)}.quiet{color:var(--muted);background:transparent}.text-button{color:var(--green);background:transparent;padding:8px 0}.link-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:11px 16px;min-height:42px;text-decoration:none;line-height:1.5}.secondary-link{background:#eef2eb;color:var(--ink)}.light-button{background:#f6f7ef;color:var(--dark)}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}button .icon,a .icon{vertical-align:middle}.icon{width:20px;height:20px;flex-shrink:0;display:inline-block}.hidden,[hidden]{display:none!important}.brand{font:800 35px/1 'Inter','Segoe UI',sans-serif;letter-spacing:-2px;text-decoration:none;color:var(--dark);direction:ltr;unicode-bidi:isolate;display:inline-block}.brand span{color:#89a28a}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}.muted,.minor{color:var(--muted)}.small,.minor{font-size:12px}.chip{display:inline-flex;align-items:center;padding:4px 11px;border-radius:20px;background:#e6eee6;font-size:11px;color:var(--green)}.chip.light{background:#f0f3ee;color:var(--muted)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b39869;outline-offset:3px}.app-shell{padding:0 28px;max-width:1800px;margin:auto}.site-head{display:flex;align-items:center;height:65px;border-bottom:1px solid var(--line);gap:20px;direction:ltr}.site-head .head-meta{margin-right:auto;display:flex;gap:12px;align-items:center}.head-tag{font:10px 'Inter',sans-serif;letter-spacing:2px;color:var(--muted)}.head-caption{display:none}.head-exit{font-size:12px;direction:rtl}.session{padding-top:14px}.session-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.session-top h1{font-size:17px;margin:0}.session-top .eyebrow{font-size:9px;margin:0}.session-top p{display:none}.session-pills{display:flex;gap:8px;align-items:center}.teacher-tools{display:flex;align-items:center;gap:10px;position:absolute;left:28px;top:76px;z-index:1}.teacher-tools>div{display:none}.teacher-tools #copyCode,.teacher-tools #copyLink{display:none}.teacher-tools button{font-size:12px;min-height:34px;padding:6px 12px}.teacher-compact .session-pills{margin-left:145px}.teacher-compact #xpLabel,.teacher-compact #statusChip{display:none}.teacher-compact #connection{background:none;padding:0;font-size:11px}.preview-note{padding:9px 14px;border:1px solid #cfddd2;border-radius:10px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px}.preview-note button{min-height:34px;padding:6px 12px;font-size:12px}.stage-area{min-width:0}.lesson-meta{display:flex;align-items:center;gap:18px;font-size:11px;color:var(--muted);padding:0 2px 7px}.lesson-meta #stepNumber{margin-right:auto;font-family:Inter,sans-serif}.lesson-progress{height:3px;background:#e0e7de;margin-bottom:14px;border-radius:8px;overflow:hidden}.lesson-progress>div{height:100%;background:#689882;transition:width .2s}.lesson-body{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.teacher-compact .lesson-body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.board{background:var(--blue);color:var(--blue-ink);border:1px solid #d9e5eb;border-radius:var(--radius);padding:28px 32px;min-width:0;overflow-y:auto;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#c3d3dd transparent}.board-eyebrow{font-family:Inter,'IBM Plex Sans Arabic',sans-serif;letter-spacing:1.5px;font-size:9px;color:#7993a1;margin-bottom:18px}.board h2{font-size:24px;line-height:1.5;margin:0 0 10px}.board-prompt{font-size:16px;color:#55717f;line-height:1.9;margin:0 0 20px}.reveal-item{padding:18px 0;border-top:1px solid #cddde6;animation:gentle-in .18s ease-out}.reveal-count{font-size:10px;display:block;margin-bottom:8px;color:#77909a}.reveal-item strong{font-size:17px;font-weight:500;display:block;margin-bottom:14px}.reveal-item p{font-size:24px;line-height:1.9;color:#1c4156;font-weight:500;white-space:pre-line;unicode-bidi:plaintext;margin:0}.await-reveal{color:#8197a2;font-size:13px;margin-top:30px}.teacher-script-panel{min-width:0;min-height:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;display:flex;flex-direction:column;overflow:hidden}.script-kicker{font-size:10px;color:var(--muted);margin-bottom:6px}.teacher-script-panel h3{font-size:14px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);font-weight:500}.teacher-script-text{font-size:18px;line-height:1.95;white-space:pre-wrap;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#d6e0d7 transparent;padding-left:10px}.teacher-script-text p{margin:0 0 12px}.teacher-answer-list{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;max-height:36%;overflow:auto;flex-shrink:0;font-size:12px}.answer-head{font-weight:600;margin-bottom:8px}.answer-row{display:grid;grid-template-columns:1fr auto;gap:4px;padding:7px 0;border-bottom:1px solid #f0f3ee}.answer-row small{grid-column:1/-1;color:var(--muted);unicode-bidi:plaintext}.teacher-bottom{padding:12px 0}.simple-controls{display:flex;align-items:center;gap:18px;min-height:56px}.controls{display:flex;gap:10px;align-items:center;order:-1}.main-next{min-width:160px}.back-one{font-size:13px}.control-title{font-size:11px;color:var(--muted);flex:1}.control-title small{display:block;font-size:11px;max-width:300px}.answer-stats{font-size:11px;color:var(--green)}.secondary-actions button{font-size:11px;min-height:30px;padding:4px 8px}.secondary-actions{margin-right:auto}.teacher-mobile-tabs{display:none}.demo-note{display:none}.status-box,.done-box{margin:30px auto;padding:40px;max-width:660px;text-align:center;border:1px solid var(--line);border-radius:16px;background:white}.done-mark{display:inline-block;background:#e6f0e5;border-radius:50%;padding:8px 20px;margin-bottom:18px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#173c30;color:white;border-radius:10px;padding:12px 20px;z-index:100;max-width:90vw;font-size:13px}
/* One viewport for teaching: the board stays still while its panels scroll. */
@media(min-width:901px){.teacher-compact #liveBox{height:calc(100dvh - 160px);display:flex;flex-direction:column;min-height:400px}.teacher-compact .lesson-body{flex:1;min-height:0}.teacher-compact .board{height:100%;min-height:0}.teacher-compact .teacher-bottom{flex-shrink:0}.teacher-compact .lesson-meta,.teacher-compact .lesson-progress{flex-shrink:0}.session:not(.teacher-compact) .board{height:calc(100dvh - 245px);min-height:400px;max-width:1100px;width:100%;margin:auto}.session:not(.teacher-compact) #liveBox{max-width:1100px;margin:auto}}
.challenge-options{display:grid;grid-template-columns:1fr;gap:8px;margin:15px 0}.challenge-options .option{width:100%;text-align:start;display:flex;align-items:center;gap:10px;position:relative;background:#f8fbfd;border:1px solid #cbdde6;border-radius:10px;padding:12px 14px;color:#244455;font-size:15px;min-height:52px;opacity:1;font-weight:400;line-height:1.6}.option i{font-style:normal;font-size:11px;width:25px;height:25px;display:grid;place-items:center;border:1px solid #d8e3e8;border-radius:7px;flex-shrink:0}.choice-text{flex:1;unicode-bidi:plaintext}.option-state{font-size:10px;white-space:nowrap;flex-shrink:0}.challenge-options .option.selected{border-color:#557d99;background:#dfeef7}.challenge-options .option.correct{background:#e2f1e6;border-color:#81ad91;color:#23533b}.challenge-options .option.incorrect{background:#f9e9e7;border-color:#ce9d94;color:#814e46}.challenge-options .option.dimmed{background:#edf3f6;border-color:#dce5ea;color:#778e9a}.personal-feedback{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;border-radius:10px;margin-top:13px;background:#e3eee4;color:#2e5840;font-size:13px;animation:gentle-in .22s ease-out}.personal-feedback small{font-size:11px}.personal-try{background:#f4eee0;color:#7b663e}.feedback-symbol{display:none}.inline-wrong-reason,.inline-correct-reason{font-size:13px;padding:10px 0 0;line-height:1.85}.inline-wrong-reason strong{color:#86564e}.inline-correct-reason strong{color:#315d49}.inline-wrong-reason p,.inline-correct-reason p{margin:3px 0 7px;color:#57707c}.answer-wait{font-size:12px;color:#6d8693;margin-top:12px}.feedback-box{border:1px solid #c9dce6;border-radius:10px;padding:12px;font-size:13px}.reward-sparkles{display:inline-flex;gap:6px;margin-inline-start:auto;color:#8fa46d}.reward-sparkles b{animation:spark .5s ease-out both}.reward-sparkles b:nth-child(2){animation-delay:.08s}.reward-sparkles b:nth-child(3){animation-delay:.16s}@keyframes spark{from{opacity:0;transform:scale(.5) translateY(6px)}to{opacity:1;transform:none}}@keyframes gentle-in{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:1100px) and (min-width:901px){.app-shell{padding:0 20px}.teacher-tools{left:20px}.board{padding:22px}.board h2{font-size:22px}.teacher-script-panel{padding:20px}.teacher-script-text{font-size:17px}.control-title{display:none}}
@media(max-width:900px){.app-shell{padding:0 16px}.site-head{height:58px}.site-head .brand{font-size:30px}.head-tag{font-size:9px}.session{padding-top:12px}.session-top{align-items:start;flex-wrap:wrap}.session-top h1{font-size:16px}.session-pills{gap:6px}.teacher-tools{position:static;justify-content:space-between;margin-bottom:10px}.teacher-tools>div{display:flex;gap:8px;align-items:center;font-size:11px}.teacher-tools small{color:var(--muted)}.teacher-tools strong{font-weight:400}.teacher-compact .session-pills{margin:0}.teacher-compact .session-top{margin:0 0 10px}.teacher-compact .session-top .eyebrow{display:none}.teacher-compact .lesson-body{grid-template-columns:1fr}.teacher-mobile-tabs:not(.hidden){display:flex;gap:6px;margin-bottom:10px}.teacher-mobile-tabs button{font-size:12px;min-height:34px;padding:7px 20px}.teacher-mobile-tabs button[aria-pressed=true]{background:var(--dark);color:white;border-color:var(--dark)}.teacher-compact .board,.teacher-compact .teacher-script-panel{height:calc(100dvh - 340px);min-height:300px}.teacher-compact.mobile-board .teacher-script-panel{display:none}.teacher-compact.mobile-script .board{display:none}.teacher-compact .teacher-bottom{position:sticky;bottom:0;background:var(--bg);z-index:4;border-top:1px solid var(--line);margin-top:12px}.board{padding:22px;height:580px}.board h2{font-size:21px}.board-prompt{font-size:15px}.reveal-item p{font-size:23px}.teacher-script-text{font-size:17px}.control-title,.answer-stats{display:none}.simple-controls{gap:8px;flex-wrap:wrap;min-height:44px}.controls{flex:1}.main-next{min-width:130px;flex:1}.secondary-actions{margin:0}.secondary-actions button{font-size:10px;padding:4px}.preview-note{font-size:11px}.session-top .eyebrow{letter-spacing:.5px}.challenge-options .option{font-size:14px;gap:8px;padding:10px}.option-state{font-size:9px}.personal-feedback{font-size:12px}.inline-wrong-reason,.inline-correct-reason{font-size:12px}}
@media(max-width:400px){.app-shell{padding:0 10px}.session-pills{flex-wrap:wrap}.board{padding:18px}.option-state{max-width:50px;white-space:normal}.head-meta{display:none!important}.main-next{min-width:100px}.teacher-compact .board,.teacher-compact .teacher-script-panel{min-height:280px}.secondary-actions{width:100%;text-align:left}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Arabic–Italian punctuation: keep the Latin ? with its Italian phrase. */
.board-prompt,.reveal-item,.challenge-box,.teacher-script-text,.teacher-answer-list,.inline-wrong-reason,.inline-correct-reason{direction:rtl}
.board bdi[dir="ltr"],.teacher-script-text bdi[dir="ltr"],.teacher-answer-list bdi[dir="ltr"],.challenge-box bdi[dir="ltr"]{direction:ltr;unicode-bidi:isolate;display:inline}

/* A whole Italian question/answer line should read left-to-right, even in an Arabic board. */
.board-prompt,.reveal-item p,.choice-text,.inline-wrong-reason p,.inline-correct-reason p,.feedback-box p{unicode-bidi:plaintext}


/* v25 — iPhone Safari/Chrome: prevent auto-zoom when focusing small form fields.
   Text-entry controls must render at 16px or larger on narrow screens.
   Keep native zoom accessible; do not add maximum-scale or user-scalable=no.
   Exclude non-text controls so checkboxes, radios and sliders retain their sizing. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* v25 mobile-first student classroom: use the phone viewport for learning,
   not a fixed-height inner-scrolling board. Scope to student/preview only;
   teacher controls and desktop layouts retain their existing behavior. */
@media (max-width: 900px) {
  .session:not(.teacher-compact) { padding-top: 9px; }
  .session:not(.teacher-compact) .session-top { gap: 8px; margin-bottom: 9px; }
  .session:not(.teacher-compact) .session-top h1 {
    font-size: clamp(17px, 4.5vw, 22px);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .session:not(.teacher-compact) .session-pills { flex-wrap: wrap; gap: 6px; }
  .session:not(.teacher-compact) .lesson-meta { gap: 9px; flex-wrap: wrap; padding-bottom: 6px; }
  .session:not(.teacher-compact) .lesson-progress { margin-bottom: 10px; }
  .session:not(.teacher-compact) .board {
    height: auto;
    min-height: min(43svh, 440px);
    max-height: none;
    overflow-y: visible;
    padding: 24px 22px;
  }
  .session:not(.teacher-compact) .board-eyebrow { margin-bottom: 10px; }
  .session:not(.teacher-compact) .board h2 { font-size: clamp(21px, 5.2vw, 27px); line-height: 1.55; }
  .session:not(.teacher-compact) .board-prompt { font-size: 16px; margin-bottom: 14px; }
  .session:not(.teacher-compact) .reveal-item { padding: 14px 0; }
  .session:not(.teacher-compact) .reveal-item strong { margin-bottom: 7px; }
  .session:not(.teacher-compact) .reveal-item p { font-size: clamp(21px, 5.3vw, 27px); line-height: 1.75; }
  .session:not(.teacher-compact) .await-reveal { margin-top: 18px; }
  .session:not(.teacher-compact) .challenge-options { gap: 10px; }
  .session:not(.teacher-compact) .challenge-options .option {
    min-height: 54px;
    padding: 13px 14px;
    font-size: 16px;
    line-height: 1.6;
  }
}
@media (max-width: 600px) {
  .session:not(.teacher-compact) .board {
    min-height: min(39svh, 350px);
    padding: 20px 17px;
  }
  .session:not(.teacher-compact) .board-eyebrow { display: none; }
  .session:not(.teacher-compact) .lesson-meta #stepMinutes { display: none; }
  .session:not(.teacher-compact) .session-pills .chip { font-size: 10px; }
  .session:not(.teacher-compact) .session-pills #onlineLabel { display: none; }
  .session:not(.teacher-compact) .challenge-options .option { min-height: 56px; }
}