/* Pages around the journey component: landing, join, lobby, question card, teacher console. */
:root{--sky:#0eb1de;--ink:#173f4d;--cream:#fffaf0;--line:#d8e7ea;--muted:#5f7f86;--good:#1d8270;--bad:#c4473a;--font:"Baloo Bhaijaan 2",system-ui,"SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#eef6f8;color:var(--ink);font-family:var(--font);line-height:1.6}
main{max-width:1280px;margin:0 auto;padding:18px}body.play main{max-width:1100px}
h1{font-size:24px;margin:.2em 0 .4em}h2{font-size:18px;margin:.2em 0 .6em}.eyebrow{font-size:12px;color:var(--sky);font-weight:700}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:16px;box-shadow:0 10px 30px #1f3e4c12}
.join{max-width:640px;margin:24px auto}.join label{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-weight:600}
input,select,textarea{font:inherit;color:inherit;border:1px solid #c6dade;border-radius:10px;padding:10px 12px;background:#fff;min-height:44px;min-width:0}
textarea{resize:vertical}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #075d8a;outline-offset:2px}
button,.button{font:inherit;font-weight:700;border:0;border-radius:12px;padding:11px 18px;min-height:44px;background:var(--sky);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:disabled{opacity:.5;cursor:default}.ghost{background:#eaf5f8;color:var(--ink)}.danger{background:var(--bad)}.small{padding:6px 12px;min-height:36px;font-size:13px}
.file{cursor:pointer;display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;border-radius:12px;padding:10px 16px;min-height:44px;font-weight:700;font-size:14px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.error{color:var(--bad);margin:4px 0}.error:empty{display:none}.hint{font-size:13px;color:var(--muted);margin:6px 0}.loading{text-align:center;padding:40px;color:var(--muted)}
fieldset{border:0;padding:0;margin:14px 0}legend{font-weight:700;margin-bottom:8px}
.avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.avatar-pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid transparent;border-radius:14px;background:#f1f8fb;padding:6px 2px;cursor:pointer;margin:0!important;font-weight:600}
.avatar-pick input{position:absolute;opacity:0;inset:0;cursor:pointer}.avatar-pick:has(input:checked){border-color:var(--sky);background:#e0f6fc}.avatar-pick:has(input:focus-visible){outline:3px solid #075d8a}
.avatar-face{display:inline-block;width:46px;height:56px;overflow:hidden;flex-shrink:0}.avatar-pick .avatar-face{width:64px;height:84px}.avatar-face svg{width:100%;height:auto}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.team-pick{position:relative;display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;border:2px solid #e3eef0;border-radius:14px;padding:10px;margin:0!important;cursor:pointer}
.team-pick input{position:absolute;opacity:0;inset:0}.team-pick:has(input:checked){border-color:var(--team,var(--sky));background:#f4fbfd}.team-pick.full{opacity:.45;cursor:not-allowed}.team-pick small{margin-inline-start:auto;color:var(--muted);font-weight:500}
.team-chip{width:22px;height:22px;border-radius:50%;background:var(--team);box-shadow:inset 0 0 0 3px #ffffff88}.team-name{color:var(--team)}
.rider-row{display:grid;grid-template-columns:1fr 130px;gap:8px;margin-bottom:8px}
.lobby{text-align:center}.crew-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.crew-list li{display:flex;align-items:center;gap:6px;background:#f1f8fb;border-radius:999px;padding:4px 12px 4px 6px}
.game{position:relative}.paused-veil{position:fixed;inset:0;display:grid;place-items:center;background:#17394ccc;color:#fff;font-size:28px;z-index:50}.net{position:fixed;bottom:12px;left:12px;background:#fff3cd;padding:8px 14px;border-radius:10px;z-index:60}
/* Question card inside the renderer's question slot */
.vj-question .blank{display:inline-block;min-width:4em;border-bottom:3px solid var(--sky);margin:0 .2em;color:#0a6f82}
.vj-question .q-image{display:block;margin:0 auto 10px;padding:0;background:none;max-width:min(320px,70%);border-radius:12px;overflow:hidden;cursor:zoom-in}
.vj-question .q-image img{display:block;width:100%;max-height:22vh;object-fit:contain}.vj-question .q-image.zoom{max-width:100%;cursor:zoom-out}.vj-question .q-image.zoom img{max-height:60vh}
.q-timer{height:7px;background:#e6f1f3;border-radius:9px;overflow:hidden;margin:4px 0}.q-timer i{display:block;height:100%;width:0;background:var(--sky);transition:width .2s linear}
.q-timer[data-mode=read] i{background:#f2b544}.q-timer[data-mode=late] i{background:var(--bad)}.q-count{font-size:13px;color:var(--muted);margin:0 0 6px;min-height:1.2em}
.vj-answers .picked{outline:3px solid var(--sky);outline-offset:-3px}.vj-answers .vj-correct{border-color:#199763!important;background:#daf4e6!important}.vj-answers .vj-wrong{border-color:#d48e44!important;background:#fff0d5!important}
.submit-multi{margin-top:10px}.video-box{position:relative;aspect-ratio:16/9;max-height:34vh;margin:0 auto 8px;background:#000;border-radius:14px;overflow:hidden}
.video-box iframe,.video-box video{position:absolute;inset:0;width:100%;height:100%;border:0}.video-shield{position:absolute;inset:0}
.video-play{position:absolute;inset:auto 50% 50% auto;translate:50% 50%;font-size:18px;padding:14px 22px;z-index:2}.vj-feedback .video-play{position:static;translate:none}
.vj-summary-players li{border-inline-start:6px solid var(--team,#cfe3e6)}.vj-summary-players li i{font-style:normal;font-weight:800;color:var(--muted)}
/* Teacher console */
.editor .grid2{display:grid;grid-template-columns:2fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.editor label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600}.choices{display:flex;gap:8px;flex-wrap:wrap}
.choice{flex-direction:row!important;align-items:center;gap:8px!important;border:2px solid #e3eef0;border-radius:12px;padding:10px 14px;cursor:pointer}.choice:has(input:checked){border-color:var(--sky);background:#f0fafd}
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}.team-row{display:grid;grid-template-columns:48px 1fr;gap:6px}.team-row input[type=color]{padding:2px;height:44px}
.station{border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0;background:#fbfdfd}.station>header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.station small{color:var(--muted)}
.badge{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sky);color:#fff;font-weight:800}
.video-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:10px}.question{border-top:1px dashed #d4e4e6;padding-top:10px;margin-top:10px}
.options{display:grid;gap:6px;margin-top:6px}.option{flex-direction:row!important;align-items:center;gap:8px!important}.option input[type=radio],.option input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:#199763}.option input:last-child{flex:1}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}.thumb{height:48px;border-radius:8px}
.sticky-actions{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;justify-content:space-between;background:#ffffffee;padding:12px 16px;border-radius:16px;box-shadow:0 -6px 20px #1f3e4c14;z-index:5}
.list{width:100%;border-collapse:collapse}.list td,.list th{padding:8px;border-bottom:1px solid #e6eff0;text-align:right}
.dash-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.code{font-size:40px;letter-spacing:.12em;display:block}.join-link{display:flex;flex-direction:column;gap:4px;font-size:13px}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-inline-start:auto}.status{font-weight:800;padding:6px 12px;border-radius:999px;background:#eaf5f8}.s-running{background:#daf4e6}.s-paused{background:#fff3cd}.s-finished{background:#ece7f8}
.dash-grid{display:grid;grid-template-columns:3fr 2fr;gap:16px}.projector{position:relative;height:440px;border-radius:14px;overflow:hidden}.projector .vj-map-distance{display:none}
.ranking{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px}.ranking li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;border-inline-start:6px solid var(--team,#cfe3e6);background:#f7fbfc;border-radius:10px;padding:8px}
.ranking i{font-style:normal;font-weight:800;font-size:18px;text-align:center}.ranking small{display:block;color:var(--muted);font-size:12px}.ranking strong{font-size:18px}
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}.crew{border:1px solid var(--line);border-top:6px solid var(--team,var(--sky));border-radius:14px;padding:10px}
.crew header{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.crew small{color:var(--muted)}.crew ul{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}.crew li{display:flex;align-items:center;gap:6px;font-size:13px}.crew li.off{opacity:.45}
.crew .avatar-face{width:26px;height:32px}.x{margin-inline-start:auto;background:none;color:var(--bad);min-height:28px;padding:0 8px}
@media(max-width:820px){.dash-grid,.editor .grid2,.grid3,.grid4{grid-template-columns:1fr}.avatar-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.avatar-pick .avatar-face{width:48px;height:62px}.code{font-size:30px}.projector{height:360px}}
.music-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0}
.music-slot{display:flex;flex-direction:column;gap:6px;background:#f3f9fb;border-radius:14px;padding:10px}.music-slot audio{width:100%}.music-slot small{color:var(--muted)}
.small{font-size:13px}
/* Question bank */
.bank-tools{margin:8px 0}.bank-tools .button{text-decoration:none}
.bank-scope{max-width:420px;margin:10px 0}
.bank-filters{margin-bottom:10px}
.bank-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.bank-list>li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;background:#f8fbfc;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.bank-list>li.empty{display:block;text-align:center;color:var(--muted)}
.bank-q{display:flex;flex-direction:column;gap:4px;min-width:0}.bank-q small{color:var(--muted)}
.bank-opts{display:flex;flex-wrap:wrap;gap:6px}.bank-opts i{font-style:normal;background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 10px;font-size:13px}
.bank-opts i.right{border-color:#58cc02;background:#e9fbd9;font-weight:700}
.tag{background:#fff3c4;border-radius:999px;padding:0 8px;color:#6a5200;font-weight:700}
.bank-modal{position:fixed;inset:0;z-index:70;background:#173f4d88;display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto}
.bank-sheet{background:#fff;border-radius:20px;padding:18px;width:min(760px,100%);box-shadow:0 20px 60px #0004;display:flex;flex-direction:column;gap:10px}
.bank-sheet h2{margin:0}.bank-sheet textarea{width:100%;font:inherit}
.bank-list.pick{max-height:52vh;overflow:auto}.pick-row{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0}.pick-row input{width:22px;height:22px;flex-shrink:0;margin-top:3px}
.pick-row span{display:flex;flex-direction:column;gap:2px}.pick-row small{color:var(--muted)}
.bank-errors{margin:6px 0 0;padding-inline-start:20px;color:var(--bad);font-weight:600}
@media (max-width:620px){.bank-list>li{grid-template-columns:1fr}}
.bank-sheet label:not(.choice):not(.pick-row){display:flex;flex-direction:column;gap:4px;font-weight:600}.bank-sheet .choice{display:inline-flex;gap:6px;align-items:center}
/* Rounds */
.rounds-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:#f3f9fb;border-radius:14px;padding:10px;margin:10px 0}
.rounds-bar label{display:flex;flex-direction:column;gap:4px;font-weight:600}.rounds-bar .hint{flex-basis:100%;margin:0}
.round-tabs{display:flex;gap:6px;flex-wrap:wrap}.round-tabs button{background:#fff;color:var(--ink);border:2px solid var(--line)}.round-tabs button[aria-selected=true]{background:var(--sky);color:#fff;border-color:var(--sky)}
.round-chip{background:#fff3c4;color:#6a5200;border-radius:999px;padding:2px 10px;font-weight:700}
/* Free route picker */
.rp{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:14px;align-items:start}
.rp-map{position:relative;background:#bfe6ef;border-radius:16px;overflow:hidden}.rp-map svg{display:block;width:100%;height:auto;max-height:70vh}
.rp-regions path{fill:#f2e9cf;stroke:#fff;stroke-width:calc(2px * var(--k,1))}
.rp-line path{fill:none;stroke:#0a8db3;stroke-width:calc(4px * var(--k,1));stroke-dasharray:calc(10px * var(--k,1)) calc(6px * var(--k,1));stroke-linejoin:round}
.rp-city{cursor:pointer}.rp-city circle{fill:#3b5c64;stroke:#fff;stroke-width:calc(1.5px * var(--k,1));r:calc(5px * var(--k,1))}
.rp-city text{font-size:calc(13px * var(--k,1));font-weight:700;fill:#173f4d;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:calc(3px * var(--k,1));opacity:0;pointer-events:none}
.rp-city:hover text,.rp-city:focus text,.rp-city.on text{opacity:1}.rp-city:hover circle,.rp-city:focus circle{fill:#0eb1de}
.rp-city.on circle{fill:#58cc02}.rp-city:focus{outline:none}
.rp-num{pointer-events:none}.rp-num circle{fill:#f0a12b;stroke:#fff;stroke-width:calc(2px * var(--k,1));r:calc(10px * var(--k,1))}.rp-num text{font-size:calc(12px * var(--k,1));font-weight:900;fill:#fff;text-anchor:middle}
.rp-zoom{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px}.rp-zoom button{min-height:36px;width:36px;padding:0;background:#fff;color:var(--ink);box-shadow:0 2px 0 #0002}
.rp-side{display:flex;flex-direction:column;gap:8px}.rp-search{width:100%}
.rp-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.rp-list li{display:grid;grid-template-columns:28px 1fr auto auto auto auto;align-items:center;gap:6px;background:#f3f9fb;border-radius:12px;padding:6px 8px}
.rp-list li.empty{display:block;color:var(--muted)}.rp-list b{background:#f0a12b;color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center}
.rp-list .km{color:var(--muted);font-weight:700;white-space:nowrap}.rp-list button{min-height:30px;padding:2px 8px;background:#fff;color:var(--ink);font-size:13px}
.rp-total{font-weight:800;margin:0}
@media (max-width:760px){.rp{grid-template-columns:1fr}}
.info-row{background:#fff8e1;border-radius:12px;padding:8px 10px;margin:6px 0;display:flex;flex-direction:column;gap:6px}
.info-list{margin:0;padding-inline-start:20px;display:grid;gap:4px}.info-list li span{margin-inline-end:6px}
/* Map gallery: one card per country pack, chosen like a character. */
.map-gallery{border:0;padding:0;margin:0 0 12px}.map-gallery legend{font-weight:700;margin-bottom:6px}
.map-cards{display:flex;gap:10px;flex-wrap:wrap}
.map-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:132px;padding:10px;border:2px solid #d7dde4;border-radius:16px;background:#f3fafc;color:inherit;cursor:pointer;font:inherit}
.map-card svg{width:92px;height:92px}.map-card path{fill:#e9dcb8;stroke:#8a7a52;stroke-width:.6;stroke-linejoin:round}
.map-card small{color:#5d6b78;font-size:.78rem}
.map-card[aria-checked="true"]{border-color:#1a9fb0;background:#e1f6f8;box-shadow:0 0 0 3px rgba(26,159,176,.18)}.map-card[aria-checked="true"] path{fill:#2fbfcf;stroke:#137a87}
.map-card:focus-visible{outline:3px solid #1a9fb0;outline-offset:2px}
@media (max-width:520px){.map-card{width:calc(50% - 5px)}}
/* Library */
.lib-filters{margin:8px 0}.lib-unit{border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin:8px 0;background:#fbfdfe}
.lib-unit summary{cursor:pointer;display:flex;flex-direction:column;gap:2px}.lib-unit summary small{color:var(--muted)}
.lib-unit .tag{background:#e1f6f8;color:#137a87;border-radius:8px;padding:0 6px;font-weight:700}
.lib-lessons{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}.lib-lessons .empty{color:var(--muted)}
.lib-lesson{width:100%;text-align:start;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;color:inherit;cursor:pointer}
.lib-lesson:hover{border-color:var(--sky)}.lib-lesson small{color:var(--muted)}
.lib-new{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px;display:grid;gap:6px}.lib-new input,.lib-new select{font:inherit;min-width:0}
.quick-box{border-top:1px dashed var(--line);margin-top:12px;padding-top:10px;text-align:right}.quick-box h3{margin:0 0 4px}
.quick-rows{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px;max-height:40vh;overflow:auto}
.quick-rows li{display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr) auto auto;gap:6px;align-items:center}
.quick-rows input{min-width:0;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:10px;padding:6px}
@media (max-width:560px){.quick-rows li{grid-template-columns:1fr auto auto}.quick-rows input{grid-column:1/-1}}
.info-src{display:block;font-size:12px;color:var(--muted);margin-top:2px}.info-src a{color:#0a6f82}
.info-list li{display:flex;align-items:flex-start;gap:4px}.info-list li span{flex:1}
.info-default{margin:0;font-size:14px;color:#5d5434}.info-default small{color:var(--muted)}
.src-kind{font-style:normal;font-size:11px;padding:0 8px;border-radius:99px;margin-inline-start:6px;background:#eef3f4;color:#5f7f86}
.src-kind.ok{background:#e2f5e6;color:#1d6b32}.src-kind.info{background:#e3f1fb;color:#185fa5}
.region-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:4px 0 8px}
.region-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:8px 12px;min-height:0;text-align:start}
.region-card b{font-size:14px;line-height:1.4}.region-card small{font-size:12px;color:var(--muted);font-weight:400}
.region-card.on{border-color:var(--sky);background:#e0f6fc}.region-card:hover{border-color:#9fd3e0}
.region-fit{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ride-time{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}.ride-time select{width:auto;min-width:220px}
/* Pauses of one bus: the «توقف» button, the paused card, notes. */
.pause-btn{position:fixed;left:12px;bottom:max(70px,env(safe-area-inset-bottom));z-index:40;min-height:38px;padding:6px 14px;border-radius:99px;background:#173f4dd9;color:#fff;font-size:14px;box-shadow:0 6px 16px #07364a44}
.pause-btn:disabled{opacity:.85;background:#f0a12b}
.crew-pause{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:#17394ccc;padding:16px}
.crew-pause>div{background:#fff;color:var(--ink);border-radius:22px;padding:22px;max-width:380px;text-align:center;display:flex;flex-direction:column;gap:10px}
.crew-pause b{font-size:22px}.crew-pause p{margin:0;color:var(--muted)}
.pause-note{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:45;background:#fff;color:var(--ink);border:2px solid #39b54a;border-radius:14px;padding:8px 16px;font-weight:700;box-shadow:0 8px 20px #07364a33;max-width:92vw;text-align:center}
/* Route picker: area (Morocco / region / province) and kind of stops (cities / provinces / communes). */
.rp-scope{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:4px 0 10px}.rp-scope label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
.rp-scope select{min-width:170px}
.rp-regions path{fill:#f2e9cf;stroke:#fff;stroke-width:calc(1.5px * var(--k,1))}
.rp-city.small circle{r:calc(3.5px * var(--k,1));fill:#6f8a91}
.rp-city.small text,svg.dense .rp-city text{opacity:0}
.rp-city.small:hover text,.rp-city.small:focus text,.rp-city.small.on text,svg.dense .rp-city:hover text,svg.dense .rp-city.on text{opacity:1}

/* Question generator (#generate) */
.gen h2{margin:18px 0 8px;font-size:1.05rem}
.gen-drop{border:2px dashed var(--line,#d9d2c3);border-radius:14px;padding:22px 14px;text-align:center;cursor:pointer;display:grid;gap:4px;margin:10px 0}
.gen-drop:hover,.gen-drop.over{border-color:#0eb1de;background:#0eb1de10}
.gen-drop small{opacity:.75}
.gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 14px;margin:8px 0}
.gen-grid label{display:grid;gap:4px;font-weight:600;font-size:.92rem}
.gen-grid .wide{grid-column:1/-1}
.gen-types{border:1px solid var(--line,#e2ddd2);border-radius:12px;padding:8px 12px;margin:10px 0;display:flex;flex-wrap:wrap;gap:8px}
.gen-types legend{font-weight:700;padding:0 6px}
.gen-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#0eb1de14;font-weight:600;cursor:pointer}
.gen-list{display:grid;gap:12px;padding:0;list-style:none;counter-reset:q}
.gen-q{border:1px solid var(--line,#e2ddd2);border-radius:14px;padding:10px 12px;display:grid;gap:8px}
.gen-q.off{opacity:.45}
.gen-q textarea,.gen-q input[data-o],.gen-explain{width:100%}
.gen-opts{display:grid;gap:6px;margin:0;padding-inline-start:4px;list-style:none}
.gen-opts li{display:flex;align-items:center;gap:8px}
.gen-opts input[data-o]{flex:1}
.gen-dest{gap:10px;margin:6px 0}
/* contest editor (agent) */
.qhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}.qhead>b{font-size:15px}
.qsrc{background:#eef7ee;color:#2a6b45;border-radius:999px;padding:2px 10px;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.qmove{display:flex;flex-wrap:wrap;gap:6px;margin-inline-start:auto}.qmove .small{min-height:40px;min-width:40px;padding:6px 10px}
.question:focus{outline:3px solid #7cc4e0;outline-offset:4px;border-radius:8px}
.qmove-msg{margin:6px 0;padding:8px 12px;border-radius:12px;background:#eaf7f0;color:#1d5c3a;font-size:14px}.qmove-msg.warn{background:#fff4e0;color:#7a4b00}
.qorder>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}.qorder>summary::-webkit-details-marker{display:none}
.qorder>summary::before{content:'▾';font-size:18px;color:var(--muted)}.qorder:not([open])>summary::before{content:'◂'}.qorder>summary h2{margin:0}
.qorder-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}
.qorder-list li,.qspare li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#f6fafb;min-width:0}
.qorder-list li.st-first{margin-top:8px;border-top:2px solid #d4e4e6}
.qo-where{white-space:nowrap;font-weight:700;font-size:13px;color:var(--ink)}
.qo-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.qo-text i{color:var(--muted)}
.qo-btns{display:flex;gap:4px;flex:none}.qo-btns .small,.qspare li .small{min-height:40px;min-width:40px;padding:4px 8px}
.qspare{border:1px dashed #e5b867;border-radius:14px;padding:10px;margin-top:10px;background:#fffaf0}.qspare ol{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}
@media (max-width:560px){.qorder-list li{flex-wrap:wrap}.qo-text{flex-basis:100%;order:3;white-space:normal}.qo-btns{margin-inline-start:auto}.qmove{margin-inline-start:0;width:100%}.qmove .small{flex:1 1 auto}}

/* school staff (agent) */
.staff-table{width:100%;border-collapse:separate;border-spacing:0 6px;margin-top:8px}
.staff-table th{font-size:13px;color:var(--muted);text-align:start;padding:2px 10px;font-weight:800}
.staff-table td{background:#f8fbfc;padding:10px;vertical-align:middle;overflow-wrap:anywhere}
.staff-table td:first-child{border-radius:0 14px 14px 0}.staff-table td:last-child{border-radius:14px 0 0 14px}
.staff-table td small{display:block;color:#6a8b92;font-weight:700;font-size:12px}
.staff-table tr.bad td{background:#fff1ef}
.staff-table .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.st-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.st-pill{display:inline-block;border-radius:999px;padding:2px 10px;font-weight:800;font-size:13px;white-space:nowrap;background:#eef3f4;color:#557177}
.st-pill.good{background:#e3f6e8;color:var(--good)}.st-pill.wait{background:#fff6dc;color:#8a6100}.st-pill.bad{background:#fde7e4;color:var(--bad)}
.st-err{display:block;color:var(--bad);font-weight:800;font-size:13px}.st-warn{display:block;color:#b25e00!important}
.st-more{position:relative}.st-more summary{list-style:none;cursor:pointer}.st-more summary::-webkit-details-marker{display:none}
.st-more>div{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:5;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:6px;box-shadow:0 8px 20px #1f3e4c22;min-width:150px}
.st-paste{width:100%;box-sizing:border-box;font:inherit;font-weight:600;border:3px solid #dbe8ec;border-radius:12px;padding:10px;margin:8px 0;min-height:120px}
@media (max-width:640px){
 .staff-table,.staff-table tbody,.staff-table tr,.staff-table td{display:block;width:auto}
 .staff-table thead{display:none}
 .staff-table tr{background:#f8fbfc;border-radius:14px;padding:6px 4px;margin-bottom:8px}
 .staff-table tr.bad{background:#fff1ef}
 .staff-table td,.staff-table td:first-child,.staff-table td:last-child{background:none;border-radius:0;padding:4px 10px}
 .staff-table td[data-label]:not(:first-child)::before{content:attr(data-label)' : ';color:var(--muted);font-weight:700;font-size:12px}
 .st-acts{justify-content:flex-start}
 .st-more>div{inset-inline-end:auto;inset-inline-start:0}
}
.staff-table td span[dir=ltr]{white-space:nowrap}
/* library (agent) */
.lib-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lib-empty{text-align:center;color:var(--muted);background:#f8fbfc;border:1px dashed var(--line);border-radius:14px;padding:18px;margin:10px 0}
.lib-units{display:grid;gap:8px;margin:8px 0}.lib-unit{border:1px solid var(--line);border-radius:14px;background:#fbfdfe;margin:0;padding:0;overflow:hidden}
.lib-head{display:flex;align-items:center;gap:8px;padding-inline-start:10px}.lib-head>.lib-check{flex-shrink:0}
.lib-check{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--sky);cursor:pointer}.lib-check:disabled{cursor:default;opacity:.4}
.lib-toggle{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:start;background:none;color:inherit;border-radius:12px;padding:10px 12px 10px 8px;font-weight:400}
.lib-toggle:hover{background:#eef8fb}.lib-toggle>span:last-child{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}.lib-toggle small{color:var(--muted);font-size:13px}
.lib-chev{font-size:12px;color:var(--sky);transition:transform .15s;flex-shrink:0}.lib-toggle[aria-expanded=true] .lib-chev{transform:rotate(-90deg)}
.lib-unit>.lib-body{padding:0 10px 10px;border-top:1px solid var(--line)}.lib-unit>.lib-body .lib-lessons{margin:8px 0}
.lib-lesson{display:block;padding:0;cursor:auto;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.lib-lesson .lib-toggle b{font-size:15px}
.lib-lesson-body{padding:4px 12px 12px;border-top:1px dashed var(--line)}.lib-lesson-body h4{margin:10px 0 6px;font-size:15px}
.lib-videos{list-style:none;padding:0;margin:0;display:grid;gap:6px}.lib-videos>li{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;background:#f8fbfc;border-radius:10px;padding:6px 10px;min-width:0}
.lib-videos>li>div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}.lib-videos small{color:var(--muted)}
.lib-qs{list-style:none;padding:0;margin:0;display:grid;gap:8px}.lib-qs>li.empty{color:var(--muted);text-align:center;padding:8px}
.lib-q{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;background:#f8fbfc;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.lib-q.editing{display:block;background:#fff;border-color:var(--sky)}
.lib-q-pick{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:0;cursor:pointer;margin:0}.lib-q-pick .lib-check{margin-top:4px;flex-shrink:0}
.lib-q-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}.lib-q-prompt{margin:0;font-weight:700}.lib-num{color:var(--muted)}
.lib-opts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}.lib-opts li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 10px;font-size:13px}
.lib-opts li.right{border-color:#58cc02;background:#e9fbd9;font-weight:700}
.lib-meta{color:var(--muted)}.lib-meta .tag,.lib-unit .tag{background:#e1f6f8;color:#137a87;border-radius:8px;padding:0 6px;font-weight:700}
.lib-q-tools{display:flex;gap:4px;flex-wrap:wrap}.lib-q-tools button{padding:4px 10px}
.lib-qform{display:grid;gap:8px;background:#fff;border:2px solid var(--sky);border-radius:14px;padding:12px;margin:8px 0}.lib-q.editing .lib-qform{border:0;padding:0;margin:0}
.lib-qform label{display:flex;flex-direction:column;gap:4px;font-weight:600}.lib-qform label small{font-weight:400;color:var(--muted)}.lib-qform textarea{width:100%}
.lib-opts-edit{display:grid;gap:6px;margin:0}.lib-opts-edit legend{font-size:14px}
.lib-opt{display:flex;gap:8px;align-items:center}.lib-opt input[name=ok]{width:22px;height:22px;min-height:0;flex-shrink:0;accent-color:#2e9d5b}.lib-opt input[name=opt]{flex:1}
.lib-lesson-tools,.lib-unit-tools{margin-top:8px}.lib-all{display:flex;align-items:center;gap:10px;font-weight:700;background:#eef8fb;border-radius:12px;padding:8px 12px;margin:6px 0;cursor:pointer}
.lib-all.off{opacity:.5;cursor:default}
.lib-bar{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;background:#ffffffee;border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:0 -6px 20px #1f3e4c1f}
.lib-bar #lp-count{font-weight:700}.lib-per{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;font-weight:600}.lib-per select{min-height:38px;padding:4px 8px}
@media (max-width:620px){.lib-bar{padding:8px 10px}.lib-bar button{flex-basis:100%}.lib-q-tools{width:100%;justify-content:flex-end}.lib-videos>li{flex-wrap:wrap}.lib-head{padding-inline-start:6px}}
.lib-more{margin:6px 0}.lib-more>summary{cursor:pointer;font-weight:700;color:#137a87;width:max-content;padding:4px 0}
.bank-sheet label.lib-q-pick:not(.choice):not(.pick-row),.bank-sheet label.lib-all:not(.choice):not(.pick-row){flex-direction:row;gap:10px;font-weight:400}.bank-sheet label.lib-all:not(.choice):not(.pick-row){font-weight:700}

/* parents (agent) — family follow-up: parent.html, the child's «عائلتي» tab, goal cards (family.js) */
.roles .role[data-role=parent]{grid-column:1/-1}
.family .panel{margin-bottom:14px}
.fam-kids{display:grid;gap:10px}
.fam-kid{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:#f3f9fb;border-radius:18px;padding:12px;box-shadow:0 4px 0 #dfeef2;min-width:0}
.fam-kid>div{min-width:0;display:flex;flex-direction:column;gap:2px}.fam-kid small{color:#5f7f86;font-weight:700}
.fam-kid-stats{font-weight:700;font-size:14px}.fam-kid-goals{font-size:13px;font-weight:800;color:#0a6f8f}.fam-go{font-size:28px;color:#8fb0b8;font-weight:800}
.fam-flag{align-self:flex-start;background:#fff1c9;color:#7a5200;border-radius:99px;padding:2px 10px;font-size:13px;font-weight:800}
.fam-steps{margin:0 0 12px;padding-inline-start:22px;color:#3b5c64;font-weight:600}.fam-steps li{margin:4px 0}
.fam-reqs{margin-top:10px}
.fam-ranks{background:#f3f9fb;border-radius:14px;padding:10px 12px;font-weight:700;margin:0 0 6px}
.fam-goals{display:grid;gap:12px;margin:8px 0 12px}
.fam-goal{border:3px solid #e2edf0;border-radius:18px;padding:12px 14px;background:#fff;min-width:0;overflow-wrap:anywhere}
.fam-goal header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.fam-goal header b{font-size:17px}
.fam-state{flex-shrink:0;border-radius:99px;padding:2px 10px;font-size:13px;font-weight:800;background:#e1f6f8;color:#0a6f8f}
.fam-goal.won{border-color:#f2b544;background:#fffaf0}.fam-goal.won .fam-state{background:#f2b544;color:#3d2a00}
.fam-goal.done{border-color:#bfe5cf}.fam-goal.done .fam-state{background:#daf4e6;color:#1d6b45}
.fam-goal.late{opacity:.75}.fam-goal.late .fam-state{background:#f1e4e2;color:#8a3a30}
.fam-reward{margin:6px 0 2px;font-weight:800;font-size:16px}.fam-reward small{font-weight:700;color:#5f7f86}
.fam-rule{margin:0 0 8px;color:#3b5c64;font-weight:600;font-size:14px}.fam-rule small{color:#6a8b92}
.fam-line{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:14px;margin-top:6px}
.fam-bar{display:block;height:12px;background:#e6f1f3;border-radius:99px;overflow:hidden;margin-top:3px}
.fam-bar i{display:block;height:100%;width:0;background:var(--sky);border-radius:99px;transition:width .4s}.fam-bar.ok i{background:#2e9d5b}
.fam-subjects{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:4px}
.fam-hint{margin:8px 0 0;font-size:13px;font-weight:700;color:#5f7f86}
.fam-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fam-form{border:3px dashed #cfe3e8;border-radius:18px;padding:12px;margin:8px 0 14px;display:grid;gap:12px}.fam-form h3{margin:0}
.fam-subj{padding:2px}
.field .fam-subj input{width:18px;height:18px;min-height:0;padding:0;margin:0;border:0;box-shadow:none;flex-shrink:0}.fam-subj .chip-check{font-size:15px}
.fam-pts{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.fam-pts b{font-size:18px}.fam-pts small{color:#6a8b92;font-weight:700}
.fam-unlink{margin-top:18px;color:#5f7f86}.fam-unlink summary{cursor:pointer;font-weight:700}
.fam-code{margin-top:12px;background:#f3f9fb;border-radius:18px;padding:12px;text-align:center}
.fam-big{display:block;font-size:clamp(30px,10vw,44px);letter-spacing:.14em;font-weight:900;color:var(--ink);margin:4px 0}
@media (max-width:520px){.fam-kid{grid-template-columns:auto 1fr}.fam-go{display:none}.fam-goal header{flex-direction:column}}

/* generator (agent) */
.gen-note{border-inline-start:4px solid #0eb1de;background:#0eb1de0d;border-radius:10px;padding:10px 12px;margin:10px 0;display:grid;gap:4px}
.gen-note small{opacity:.8;line-height:1.6}
.gen-tabs{display:flex;gap:6px;margin:10px 0 0;flex-wrap:wrap}
.gen-tab{background:transparent;color:inherit;border:1px solid var(--line,#d9d2c3);border-radius:999px;padding:6px 14px;font-weight:600}
.gen-tab[aria-selected=true]{background:#0eb1de;border-color:#0eb1de;color:#fff}
.gen-paste{display:grid;gap:6px;font-weight:600;margin:10px 0}
.gen-paste textarea{width:100%;min-height:150px}
.gen-docinfo{display:grid;gap:4px;margin:8px 0}.gen-docinfo p{margin:0}
.gen-warn{background:#f5a6231a;border-radius:8px;padding:6px 10px}
.gen-page{font-weight:600;font-size:.88rem;opacity:.8}
.gen-quote{margin:0;font-size:.85rem;opacity:.75;border-inline-start:3px solid var(--line,#d9d2c3);padding-inline-start:8px}
.gen-dest{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:8px 0}
.gen-opt{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line,#d9d2c3);border-radius:12px;padding:10px;cursor:pointer}
.gen-opt span{display:grid;gap:2px}.gen-opt small{opacity:.75;font-size:.82rem}
.gen-opt.on{border-color:#0eb1de;background:#0eb1de12}
.gen-opt:has(input:disabled){opacity:.5;cursor:not-allowed}
.gen-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;font-weight:400}
.gen-primary{font-size:1.05rem;padding:10px 22px}
/* staff access codes shown once */
.code-card .code-msg{font-size:.85rem;line-height:1.6;background:#0eb1de0d;border-radius:10px;padding:8px 10px;margin:6px 0}
.code-card .acts{display:flex;flex-wrap:wrap;gap:6px}
.code-card .code-done{color:#1f9d63;font-weight:700}
.code-card .code-done[hidden]{display:none}

/* school: activate a parent account */
.parent-form{max-width:520px;margin:16px auto;display:grid;gap:12px}
.parent-form label:not(.chip-check){display:grid;gap:4px;font-weight:600}
.parent-form input:not([type=radio]){width:100%}
.parent-form .row{display:flex;gap:10px}
.parent-form .actions{display:flex;flex-wrap:wrap;gap:10px}
.cred-bar .pf-note{display:block;color:var(--muted,#5b6b73)}