:root{--view-h:100vh;--view-w:100vw;--view-top:0px;--view-left:0px;--read-bg:#f5f2eb;--read-ink:#233345;--read-accent:#17676d}
@supports(height:100dvh){:root{--view-h:100dvh}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{overscroll-behavior:none}
button,a,input{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #f2b862;outline-offset:3px}
input,textarea,select{font-size:16px!important;min-width:0;max-width:100%}
button{cursor:pointer}
.b{min-height:44px}
#modal,#start,#menu,#acad,#career{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-wrap:anywhere}
#modal{left:auto;right:calc(12px + env(safe-area-inset-right,0px));top:calc(var(--view-top) + 110px + env(safe-area-inset-top,0px));transform:none;width:min(420px,40vw);max-height:calc(var(--view-h) - 240px);padding:16px;box-shadow:0 12px 44px #0005;border-radius:20px;transition:none}
#modal.mini{display:none!important}
#modal>div:first-child:has(button[onclick="mini()"]) {position:sticky;top:-16px;background:inherit;z-index:2;border-bottom:1px solid #ccd6d7;margin-bottom:12px}
#modal button[onclick="mini()"]{width:44px!important;height:44px!important;color:inherit;background:transparent}
.tm pre{height:clamp(90px,22vh,240px);white-space:pre-wrap;overflow-wrap:anywhere}
.ln{flex-wrap:wrap}.ln input{width:100%;min-height:44px}
#hud{right:calc(12px + env(safe-area-inset-right,0px));max-height:24vh;overflow:auto;width:min(300px,30vw);padding-top:6px}
#hud .panel-min{float:left}
#bot{left:calc(12px + env(safe-area-inset-left,0px))!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;top:auto!important;width:min(300px,30vw)!important;max-height:28vh;overflow:auto;box-sizing:border-box}
.panel-min{border:1px solid #54717d;background:transparent;color:inherit;border-radius:12px;width:44px;height:44px;flex:none;font-size:22px}
.panel-collapsed{display:none!important}
#ui-dock{position:fixed;right:calc(8px + env(safe-area-inset-right,0px));top:calc(104px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:8px;z-index:7}
#ui-dock button,#bubble{width:48px;height:48px;border-radius:16px;border:1px solid #38676f;background:#102c39;color:#c9fbef;box-shadow:0 5px 20px #0003;font-size:21px}
#ui-dock button[hidden]{display:none}
#bubble{left:auto;right:calc(8px + env(safe-area-inset-right,0px));top:calc(216px + env(safe-area-inset-top,0px));z-index:7;cursor:pointer}
#tb{left:calc(10px + env(safe-area-inset-left,0px));flex-wrap:wrap;max-width:calc(100vw - 80px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
#tb .b{min-width:44px;min-height:44px;padding:6px 10px;font-size:13px;background:#122b3bea}
#xp{left:calc(10px + env(safe-area-inset-left,0px));max-width:65vw;font-size:13px}
#toast{pointer-events:none;max-width:80vw;text-align:center;z-index:12}
#tip{max-width:calc(100vw - 160px);text-align:center;pointer-events:none}
#menu,#start{max-height:calc(var(--view-h) - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));top:calc(var(--view-top) + var(--view-h)/2);border-color:#47716f;background:linear-gradient(145deg,#122d38,#0e1729);box-shadow:0 24px 90px #0007}
#menu h1{font-size:clamp(24px,4vw,36px);letter-spacing:-1px}
#menu .career-entry{border-color:#67d9c0;background:linear-gradient(110deg,#16483f,#163b54);text-align:right;padding:16px}
.career-entry small{display:block;opacity:.8;margin-top:5px;font-size:12px}
/* Reading surfaces have a paper palette; terminal content retains its own contrast. */
#acad,#career,#modal.reading{background:var(--read-bg)!important;color:var(--read-ink)!important;color-scheme:light;border-color:#c3d3d1;font-size:17px;line-height:1.85}
#acad h2,#acad h3,#career h1,#career h2,#career h3,#modal.reading h3{color:#155c64}
#acad .b,#career .b,#modal.reading .b{background:#fff;color:#244654;border-color:#b8ccce;line-height:1.5}
#acad .b:hover,#career .b:hover,#modal.reading .b:hover{background:#e2efed}
#acad [style*="background:#13203a"],#acad [style*="background:#05080f"]{background:#fff!important;border:1px solid #d7e1de;color:#233345!important;border-radius:16px!important}
#acad [style*="color:#3be3a4"],#acad [style*="color:#cfe"],#acad [style*="color:#6dffb0"]{color:#17676d!important}
#acad{padding:calc(18px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))!important}
#acad>div{max-width:760px!important}
#career{position:fixed;inset:0;z-index:10;overflow:auto;padding:calc(16px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
.career-shell{max-width:1080px;margin:auto}
.career-top{display:flex;justify-content:space-between;gap:12px;align-items:center;position:sticky;top:calc(-16px - env(safe-area-inset-top,0px));background:#f5f2ebf5;z-index:3;padding:8px 0;border-bottom:1px solid #d4dfdc;backdrop-filter:blur(14px)}
.career-hero{padding:32px 0 24px;max-width:750px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1px;color:#337a78}.career-hero h1{font-size:clamp(30px,5vw,48px);line-height:1.2;margin:12px 0}.career-hero p{color:#536679}
.career-progress{height:8px;background:#dbe6e0;border-radius:9px;overflow:hidden;margin:16px 0}.career-progress span{display:block;height:100%;background:linear-gradient(90deg,#226d77,#49ac87)}
.career-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.career-group{background:#fff;border:1px solid #d7e1dc;border-radius:20px;padding:20px}.career-group h2{margin:0;font-size:21px}.career-group>p{font-size:13px;margin:4px 0 18px;color:#607180}
#career .stage{display:flex;align-items:center;gap:12px;width:100%;text-align:right;padding:12px 8px;margin:0;border:0;border-top:1px solid #e7ece8;background:transparent;min-height:66px;border-radius:0;color:#243a48;font:inherit}.stage .num{width:32px;height:32px;flex:none;background:#e9f2ee;color:#17676d;display:grid;place-items:center;border-radius:10px;font-size:13px;font-weight:bold}.stage small{display:block;font-size:12px;color:#657583}.stage:disabled{opacity:.55;cursor:default}.stage strong{font-size:15px}.stage .status{margin-inline-start:auto;font-size:13px;white-space:nowrap}
.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}.learn-card{background:#fff;border:1px solid #d7e1dc;border-radius:18px;padding:22px;margin-bottom:16px}.learn-card h2{font-size:21px;margin-top:0}.learn-card p{margin:10px 0}.learn-card.callout{background:#e6f1ed;border-right:4px solid #398778}.learn-card .tag{display:inline-block;background:#e9f2ef;border-radius:8px;padding:2px 9px;font-size:12px;color:#22696b}.career-terminal{background:#10222f;color:#d5f8e4;border-radius:16px;padding:18px;min-width:0}.career-terminal pre{direction:ltr;text-align:left;font:13px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;min-height:130px;max-height:240px;overflow:auto;margin:14px 0}.career-terminal form{display:flex;gap:8px;direction:ltr}.career-terminal input{width:100%;background:#071720;color:#d5f8e4;border:1px solid #4d7b7d;border-radius:9px;padding:10px;font:16px ui-monospace,monospace}.career-terminal button{min-width:52px}.career-feedback{background:#e5f0eb;color:#1b5f4f;padding:12px;border-radius:12px;margin-top:12px}.career-feedback.error{background:#f9ece5;color:#8b4029}.quiz-options{display:grid;gap:8px}.quiz-options button{text-align:right;margin:0;white-space:normal}.lesson-step{font-size:13px;color:#5e747d}.lesson-result{background:#e1efe7;border:1px solid #a9cbb6;border-radius:18px;padding:24px;margin:20px 0}.lesson-result h2{margin:0}
@media(max-width:760px){.career-groups,.lesson-grid{grid-template-columns:1fr}.career-hero{padding-top:22px}.career-group{padding:16px}.learn-card{padding:18px}#career{padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px))}}
@media(pointer:coarse),(max-width:760px){
 #hud{width:min(300px,calc(100vw - 76px));max-height:24vh;top:calc(100px + env(safe-area-inset-top,0px));right:calc(66px + env(safe-area-inset-right,0px))}
 #bot{left:auto!important;right:calc(66px + env(safe-area-inset-right,0px));bottom:auto!important;top:calc(100px + env(safe-area-inset-top,0px))!important;width:min(320px,calc(100vw - 88px))!important;max-height:35vh}
 #modal{top:auto;bottom:calc(122px + env(safe-area-inset-bottom,0px));width:min(420px,calc(var(--view-w) - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:calc(var(--view-h)*.42);padding:12px;font-size:15px}
 #modal>div:first-child:has(button[onclick="mini()"]) {top:-12px}
 #joy{left:calc(16px + env(safe-area-inset-left,0px));width:96px;height:96px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3}#joy i{width:40px;height:40px}
 #eb{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:64px;height:64px;z-index:3}
 #tip{bottom:calc(22px + env(safe-area-inset-bottom,0px));font-size:12px;max-width:calc(100vw - 235px);padding:6px 10px}
 #toast{top:calc(100px + env(safe-area-inset-top,0px));font-size:13px}
 #tb{gap:4px}#tb .b{font-size:12px;padding:5px 8px}
 .tm pre{height:100px}
}
@media(pointer:coarse) and (orientation:landscape){#modal{width:min(380px,46vw);bottom:calc(122px + env(safe-area-inset-bottom,0px));max-height:calc(var(--view-h) - 147px - env(safe-area-inset-top,0px))}#ui-dock{top:calc(100px + env(safe-area-inset-top,0px))}#bot{max-height:calc(100vh - 215px)}}
.account-status{padding:12px;border-radius:12px;background:#e4efeb;border:1px solid #b4d1c7;color:#245b50;font-size:14px}
.b:disabled{opacity:.55;cursor:not-allowed}
.career-terminal form input{flex:1 1 0;width:auto;min-width:0;min-height:48px}
.career-terminal form button{flex:0 0 auto;min-width:72px;min-height:48px;padding:10px 16px;white-space:nowrap;overflow-wrap:normal;word-break:normal;line-height:1.3}
body:has(#career:not([hidden])) #toast,body:has(#acad[style*="display: block"]) #toast{display:none!important}
body.keyboard-open #modal{top:calc(var(--view-top) + 8px);bottom:auto;max-height:calc(var(--view-h) - 16px);width:min(420px,calc(var(--view-w) - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));right:calc(12px + env(safe-area-inset-right,0px))}
body.keyboard-open #career,body.keyboard-open #acad{inset:auto;top:var(--view-top);left:var(--view-left);width:var(--view-w);height:var(--view-h)}
body.keyboard-open #joy,body.keyboard-open #eb,body.keyboard-open #ui-dock,body.keyboard-open #tb,body.keyboard-open #bubble{visibility:hidden}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* A clear, equal choice of playable character at the beginning of the journey. */
.player-profile{max-width:460px;margin:auto}.profile-kicker{font-size:12px;font-weight:800;color:#17676d}.player-profile h3{font-size:26px!important;margin:8px 0}.player-profile p{font-size:14px;line-height:1.7}.profile-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.profile-option{display:flex;align-items:center;flex-direction:column;gap:5px;min-height:132px;padding:12px;border:2px solid #c5d5d2;border-radius:16px;background:#fff;color:#263f49;font:inherit}.profile-option>span{font-size:36px;line-height:1.3}.profile-option small{font-size:12px;color:#4b6972}.profile-option.selected{border-color:#167c74;background:#e4f3ec;box-shadow:0 0 0 2px #167c7420}.profile-option.selected strong:after{content:' ✓';color:#167c74}.profile-label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}#profile-name{width:100%;min-height:48px;background:#fff;color:#233345;border:1px solid #94b3b3;padding:10px 12px;border-radius:10px;font:inherit}.profile-note{color:#586d76;font-size:12px!important}.profile-confirm{width:100%;font-weight:700}.profile-entry{border-color:#5da79f!important}
@media(pointer:coarse),(max-width:760px){#modal:has(.player-profile){top:calc(var(--view-top) + 12px + env(safe-area-inset-top,0px));bottom:auto;max-height:calc(var(--view-h) - 24px - env(safe-area-inset-top,0px));width:min(440px,calc(var(--view-w) - 24px));z-index:15}.profile-options{margin:12px 0}.profile-option{min-height:112px}}
.workplace-picker h3{font-size:25px!important;margin:6px 0}.workplace-picker>p{font-size:14px}.workplace-options{display:grid;gap:8px;margin:16px 0}.workplace-option{display:flex;flex-direction:column;align-items:flex-start;text-align:right;gap:4px;width:100%;margin:0!important;padding:12px!important}.workplace-option strong{font-size:15px}.workplace-option small{font-size:12px;color:#587079;line-height:1.6}.workplace-option[aria-current]{border:2px solid #267d70!important;background:#e7f2ed!important}.workplace-option[aria-current] strong:after{content:' · כאן עכשיו';color:#267d70}
@media(pointer:coarse),(max-width:760px){#modal:has(.workplace-picker){top:calc(var(--view-top) + 12px + env(safe-area-inset-top,0px));bottom:auto;max-height:calc(var(--view-h) - 24px - env(safe-area-inset-top,0px));width:min(440px,calc(var(--view-w) - 24px));z-index:15}}
.profile-skins{display:flex;justify-content:center;gap:12px;border:1px solid #c5d5d2;border-radius:12px;padding:12px;margin:12px 0}.profile-skins legend{font-size:13px;padding:0 8px}.profile-skin{position:relative;width:42px;height:42px;min-width:42px;border-radius:50%;background:var(--skin-color);border:3px solid #fff;box-shadow:0 0 0 1px #8fa7aa}.profile-skin[aria-pressed="true"]{box-shadow:0 0 0 3px #17676d}.profile-skin[aria-pressed="true"]:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-shadow:0 1px 3px #000;font-size:20px;font-weight:800}

.profile-option .profile-avatar{display:block;width:100%;height:164px;object-fit:contain;border-radius:12px;background:#e7eeeb;margin-bottom:8px}

/* Integrated V2 preserves the established readable lesson palette and safe controls. */
#modal.reading p,#modal.reading li{color:var(--read-ink)!important}
#modal.reading [style*="background:#0b1526"]{background:#e4efeb!important;color:var(--read-ink)!important;border:1px solid #bdd0cb}
body.keyboard-open #modal{transform:none!important;animation:none}
@media(min-width:961px){#tl{max-width:calc(100vw - 340px);align-items:flex-start}#tl>#tb{max-width:100%;flex-wrap:wrap}#tl>#xp{flex-shrink:0}}

#modal{animation:none!important}


/* Switch wiring: automatic height, persistent status, safe RTL/LTR labels. */
#modal .cable-panel{line-height:1.65;max-width:720px;margin:auto}
#modal .cable-panel h4{margin:18px 0 8px;line-height:1.5}
#modal .cable-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:10px}
#modal .cable-grid .b{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;min-width:0;width:100%;height:auto!important;min-height:104px;margin:0;padding:12px;line-height:1.6!important;white-space:normal!important;word-break:normal;overflow-wrap:anywhere;text-align:center}
#modal .cable-grid .b strong,#modal .cable-grid .b span,#modal .cable-grid .b bdi{display:block;position:static;line-height:1.6;white-space:normal}
#modal .cable-grid .b span{font-size:13px}
#modal .cable-grid .b:disabled{opacity:1;background:#e4f4ea!important;color:#195b3a!important;border:2px solid #31845d;cursor:default}
#modal .cable-progress{background:#e4f4ea;color:#195b3a;padding:10px 14px;border-radius:10px;font-weight:700}
#modal .cable-feedback{min-height:2em;margin:14px 0;color:#195b3a;font-weight:700;line-height:1.7}
#modal .cable-feedback.is-error{color:#963b2a}

/* Compact wiring panel: all ports and progress fit without an inner scroll. */
#modal:has(.cable-panel){width:min(620px,calc(var(--view-w) - 24px));max-height:calc(var(--view-h) - 24px);top:calc(var(--view-top) + 12px);padding:12px}
#modal:has(.cable-panel)>div:first-child:has(button[onclick="mini()"]){margin-bottom:4px;padding:0;top:-12px}
#modal .cable-panel{font-size:13px;line-height:1.35}
#modal .cable-panel h3{font-size:21px!important;line-height:1.25;margin:6px 0}
#modal .cable-panel>p:not(.cable-progress):not(.cable-feedback){font-size:13px;line-height:1.4;margin:5px 0}
#modal .cable-panel h4{font-size:13px;margin:9px 0 4px;line-height:1.3}
#modal .cable-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#modal .cable-ports{grid-template-columns:repeat(4,minmax(0,1fr))}
#modal .cable-grid .b{min-height:64px;padding:6px 4px;gap:2px;font-size:13px;line-height:1.25!important;border-radius:10px}
#modal .cable-grid .b strong,#modal .cable-grid .b span,#modal .cable-grid .b bdi{line-height:1.3}
#modal .cable-grid .b bdi,#modal .cable-grid .b span{font-size:11px}
#modal .cable-progress{margin:6px 0;padding:6px 8px;font-size:13px}
#modal .cable-feedback{margin:5px 0;min-height:18px;font-size:12px;line-height:1.4}
#modal .cable-panel>button{margin:0;min-height:36px;padding:6px 16px}
@media(max-height:500px){#modal:has(.cable-panel){padding:8px;width:min(660px,calc(var(--view-w) - 16px));top:calc(var(--view-top) + 8px);max-height:calc(var(--view-h) - 16px)}#modal .cable-panel>p:not(.cable-progress):not(.cable-feedback){display:none}#modal .cable-grid .b{min-height:50px;padding:4px}#modal .cable-panel h4{margin-top:5px}#modal .cable-panel h3{margin:2px 0}#modal .cable-feedback{margin:2px 0}#modal:has(.cable-panel)>div:first-child:has(button[onclick="mini()"]){margin-bottom:0}}

.world-clock-panel label{display:block;margin:14px 0;line-height:1.6}.world-clock-panel input,.world-clock-panel select{display:block;width:100%;min-height:44px}#clock-readout{font:700 26px monospace;color:#17676d}#world-clock{font-variant-numeric:tabular-nums;white-space:nowrap}

@media(max-height:500px){#modal:has(.cable-panel) button[onclick="mini()"]{width:32px!important;height:32px!important;min-height:32px!important;padding:0!important}#modal:has(.cable-panel)>div:first-child:has(button[onclick="mini()"]){padding:0!important;margin:0!important}#modal .cable-grid .b{min-height:44px;gap:0;padding:3px 4px}#modal .cable-grid .b strong{font-size:12px;line-height:1.15}#modal .cable-grid .b span,#modal .cable-grid .b bdi{font-size:11px;line-height:1.15}#modal .cable-panel h3{font-size:19px!important;margin:0}#modal .cable-panel h4{margin:4px 0 3px}#modal .cable-progress{margin:4px 0;padding:4px 8px}#modal .cable-panel>button{min-height:32px;padding:4px 12px}}
/* Window actions remain reachable independently of content scrolling. */
#modal{z-index:20}
#menu .window-controls,#modal .window-controls{position:sticky;top:-16px;z-index:30;display:flex;justify-content:flex-end;gap:8px;background:inherit;padding:4px 0;border-bottom:1px solid #9bb8b955}
#menu .window-controls{top:-20px}
#menu .window-controls .b,#modal .window-controls .b{display:inline-flex;align-items:center;justify-content:center;width:44px!important;height:44px!important;min-height:44px;padding:0!important;margin:0;font-size:24px;flex-shrink:0}
/* Long interface labels wrap without shrinking action buttons. */
#menu .b,#modal .b,#acad .b,#career .b{height:auto;white-space:normal;overflow-wrap:anywhere;min-width:0;line-height:1.5}
#modal input,#modal select,#modal textarea{max-width:100%;box-sizing:border-box}
/* visual-qa r3: short landscape terminal — keep the helper bubble clear of the sticky header (close/minimise) */
@media(max-height:500px){#modal:has(.tm)>div:first-child:has(button[onclick="mini()"]){position:absolute;top:6px;left:8px;right:auto;border-bottom:0;background:none;margin:0}#modal:has(.tm) #tgw .tg{margin-left:104px;margin-top:0}#modal:has(.tm) .tm:has(#tgw:empty) pre{margin-top:52px}}
/* line-wrap / bidi pass: wrap only when it really doesn't fit */
bdi.nw{unicode-bidi:isolate;white-space:nowrap}
#menu .b,#modal .b,#acad .b,#career .b{overflow-wrap:break-word}
#menu p,#modal p,#acad p,#career p,#menu li,#modal li{text-wrap:pretty}
#menu h1,#menu h2,#menu h3,#modal h2,#modal h3,#career h2,#career h3{text-wrap:balance}
#menu .career-entry{text-wrap:balance}
#menu .cl-eng-entry{grid-column:1/-1}