/* تمارين سند — عرض الفصل (نموذج تجريبي)
   لوحة الألوان المعتمدة من مقدمة كتاب الطالب (sanad-agent › worksheets_intro_css / worksheets_intro_py) */

@font-face{font-family:"Readex Pro";font-weight:400;font-display:swap;src:url(fonts/readex-pro-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-weight:500;font-display:swap;src:url(fonts/readex-pro-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-weight:700;font-display:swap;src:url(fonts/readex-pro-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-weight:400;font-display:swap;src:url(fonts/readex-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-weight:500;font-display:swap;src:url(fonts/readex-pro-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-weight:700;font-display:swap;src:url(fonts/readex-pro-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo Bhaijaan 2";font-weight:700;font-display:swap;src:url(fonts/baloo-bhaijaan-2-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Baloo Bhaijaan 2";font-weight:700;font-display:swap;src:url(fonts/baloo-bhaijaan-2-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* approved palette */
  --ink:#1F2A33; --body:#4A5560; --muted:#7A858F; --line:#DCE1E6; --paper:#F2F4F6; --white:#fff;
  --green:#1E7F4F; --green-tint:#F4F9F6; --green-line:#CFE5D8;
  --gold:#D49A35; --gold-dark:#B5761F; --gold-tint:#FBEFD8; --gold-line:#F0D9A8;
  --red:#D14343; --red-tint:#FDF1F0;
  /* subject colour (set per screen) */
  --c:#1E7F4F; --c-rgb:30,127,79; --c-tint:#E9F2ED; --c-line:#C0DBCE; --c-soft:#78B295; /* recomputed per subject in app.js: no color-mix() on old browsers */
  --bg:#F7F8FA;
  --r:1.4rem; --r-sm:.9rem;
  --shadow:0 .25rem 1rem rgba(31,42,51,.08), 0 .05rem .2rem rgba(31,42,51,.06);
  --shadow-lg:0 1rem 2.5rem rgba(31,42,51,.14);
  --font:"Readex Pro","Segoe UI",Tahoma,sans-serif; --display:"Baloo Bhaijaan 2","Readex Pro",sans-serif;
  --top:4.2rem; --bottom:4.6rem;
}
/* scale the whole UI with the screen: ~15px at 1280×720, ~22px at 1920×1080, 13px floor for small laptops */
html{font-size:clamp(13px, .7vw + .8vh, 24px);-webkit-text-size-adjust:100%}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);direction:rtl;overflow:hidden;line-height:1.35;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
[hidden]{display:none!important}
bdi{unicode-bidi:isolate}

/* the eight-colour strip of the student book, at the very top of every screen */
.strip{position:fixed;top:0;right:0;left:0;height:.45rem;display:flex;z-index:50;pointer-events:none}
.strip i{flex:1}

#app{height:100%;display:flex;flex-direction:column;padding-top:.45rem}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}

/* ---------- shared top bar ---------- */
.topbar{height:var(--top);display:flex;align-items:center;gap:1rem;padding:0 1.4rem;background:var(--white);border-bottom:1px solid var(--line);flex:none}
.topbar .crumbs{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:1rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumbs b{color:var(--ink);font-weight:500}
.topbar .crumbs .sep{opacity:.5}
.topbar .grow{flex:1;min-width:0}
.iconbtn{width:2.8rem;height:2.8rem;border-radius:.9rem;display:inline-flex;align-items:center;justify-content:center;color:var(--body);border:1px solid var(--line);background:var(--white);transition:.15s}
.iconbtn:hover{background:var(--paper);color:var(--ink)}
.iconbtn svg{width:1.4rem;height:1.4rem}
.iconbtn.on{background:var(--c);border-color:var(--c);color:#fff}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-size:1.35rem;color:var(--ink)}
.brand .mark{width:2.3rem;height:2.3rem;border-radius:.7rem;background:var(--green);display:grid;place-items:center;transform:rotate(-6deg);color:#fff;font-size:1.3rem}

/* tilted icon square — the student-book motif */
.ticon{width:2.6rem;height:2.6rem;border-radius:.8rem;background:var(--c);display:grid;place-items:center;transform:rotate(-6deg);color:#fff;flex:none}
.ticon svg{width:1.5rem;height:1.5rem}
.ticon.lg{width:4.2rem;height:4.2rem;border-radius:1.2rem}
.ticon.lg svg{width:2.4rem;height:2.4rem}

/* ---------- menus (grades / subjects / lessons) ---------- */
.menu{flex:1;min-height:0;overflow:auto;padding:2rem 3rem 3rem}
.menu h1{font-family:var(--display);font-size:2.4rem;line-height:1.1;margin-bottom:.3rem}
.menu h1 small{display:block;font-family:var(--font);font-weight:400;font-size:1.05rem;color:var(--muted);margin-top:.4rem}
.cards{display:grid;gap:1.4rem;margin-top:1.8rem}
.cards.grades{grid-template-columns:repeat(3,minmax(0,1fr));max-width:64rem}
.cards.subjects{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;text-align:right;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s, border-color .15s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-.2rem);box-shadow:var(--shadow-lg);border-color:var(--c-line)}
.card::before{content:"";position:absolute;top:0;right:0;left:0;height:.35rem;background:var(--c)}
.card .num{font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--c)}
.card h2{font-size:1.45rem;font-weight:700;line-height:1.25}
.card .sub{color:var(--muted);font-size:.95rem}
.card.grade{min-height:12rem;justify-content:flex-end}
.card.subject{min-height:10rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:2rem;background:var(--paper);color:var(--body);font-size:.85rem;font-weight:500;white-space:nowrap}
.chip.c{background:var(--c-tint);color:var(--c)}
.chip.ok{background:var(--green-tint);color:var(--green);border:1px solid var(--green-line)}
.chip.soon{background:var(--gold-tint);color:var(--gold-dark);border:1px solid var(--gold-line)}

.lessons{display:flex;flex-direction:column;gap:.8rem;margin-top:1.4rem;max-width:70rem}
.lrow{display:flex;align-items:center;gap:1.1rem;background:var(--white);border:1px solid var(--line);border-right:.45rem solid var(--c);border-radius:1rem;padding:.95rem 1.2rem;text-align:right;box-shadow:var(--shadow);transition:.15s}
.lrow:hover{transform:translateX(-.25rem);box-shadow:var(--shadow-lg)}
.lrow .ln{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.15rem;flex:none}
.lrow .lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.lrow .lt b{font-size:1.25rem;font-weight:700;line-height:1.25}
.lrow .lt small{color:var(--muted);font-size:.9rem}
.lrow .meta{display:flex;gap:.5rem;align-items:center}
.lrow.soon{opacity:.72}
.lrow.soon:hover{opacity:1}
.empty{margin-top:2rem;color:var(--muted);font-size:1.1rem}

/* ---------- player ---------- */
.player{display:grid;grid-template-rows:var(--top) 1fr var(--bottom);grid-template-columns:minmax(0,1fr);height:100%} /* one column, never wider than the screen: a long lesson title once pushed the player out on the left */
body.clean .player{grid-template-rows:minmax(0,1fr)} /* the bars leave the grid, so the exercise is its only row */
body.clean .player .topbar,body.clean .player .bottombar{display:none}
.levelswitch{display:inline-flex;background:var(--paper);border-radius:1rem;padding:.25rem;gap:.25rem}
.levelswitch button{display:flex;align-items:center;gap:.5rem;padding:.45rem .95rem;border-radius:.8rem;color:var(--body);font-weight:500;font-size:1rem;transition:.15s}
.dots{display:inline-flex;gap:.18rem}
.dots i{width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid currentColor;display:block}
.dots i.f{background:currentColor}
.levelswitch button:hover{background:#fff}
.levelswitch button.on{background:var(--c);color:#fff;box-shadow:0 .15rem .5rem rgba(var(--c-rgb),.4)}
.levelswitch button b{font-weight:700}
.levelswitch button span.name{opacity:.85;font-size:.9rem}
@media (max-width:900px){.levelswitch button span.name{display:none}}
/* a phone (the 980 px layout shrunk to its screen): the level by its number and dots, as on a narrow screen, so the
   way back to the lessons keeps its place in the top bar */
.phone .levelswitch button span.name{display:none}
.goalchip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:2rem;background:var(--c-tint);color:var(--c);font-weight:700;font-size:.95rem;border:1px solid var(--c-line)}

.stage{min-height:0;display:flex;flex-direction:column;padding:1rem 2rem .6rem;gap:.8rem;position:relative}
.instruction{display:flex;align-items:center;gap:1rem;background:var(--white);border:1px solid var(--line);border-right:.5rem solid var(--c);border-radius:1.1rem;padding:.8rem 1.2rem;box-shadow:var(--shadow);flex:none}
.instruction .text{flex:1;font-size:1.9rem;font-weight:700;line-height:1.35;min-width:0}
.instruction .text.long{font-size:1.5rem}
.instruction .ttl{max-width:17rem}
.instruction .ttl small{line-height:1.45}
.instruction .ttl{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;flex:none}
.instruction .ttl small{color:var(--muted);font-size:.9rem;font-weight:500}

.activity{flex:1;min-height:0;display:flex;flex-direction:column;gap:.8rem;position:relative}
.activity .row{display:flex;gap:1rem;flex:1;min-height:0}
.activity .col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:.8rem}
.hero{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:.8rem;box-shadow:var(--shadow);position:relative}
.hero > .pic{position:absolute;top:.8rem;right:.8rem;bottom:.8rem;left:.8rem;display:flex;align-items:center;justify-content:center}
.hero img{max-height:100%;max-width:100%;object-fit:contain}
.hero .emoji{font-size:min(14rem, 28vh);line-height:1}
.hero .caption{position:absolute;bottom:.7rem;right:.9rem;font-weight:700;color:var(--body);background:rgba(255,255,255,.85);padding:.2rem .7rem;border-radius:.6rem;font-size:1.1rem}

/* option tiles: a tile does not clip, so its badge stands out of the corner whole (owner, 31 Oct); the picture clips itself */
.tiles{display:grid;gap:1rem;flex:1;min-height:0;align-content:stretch}
.tile{position:relative;background:var(--white);border:2px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:.9rem;box-shadow:var(--shadow);transition:transform .15s, border-color .15s, box-shadow .15s;min-height:0;overflow:visible;text-align:center}
.tile:hover{transform:translateY(-.15rem);border-color:var(--c-line)}
.tile .pic{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}
.tile .pic img{max-height:100%;max-width:100%;object-fit:contain}
.tile .pic:empty{display:none} /* a card with a word and no picture: the word takes the card's middle (owner decision 57) */
.tile .pic .emoji{font-size:min(7rem, 16vh);line-height:1}
.tile .label{font-size:1.45rem;font-weight:700;line-height:1.2;color:var(--ink)}
.tile .label.en{font-family:var(--font);direction:ltr}
.tile .label.big{font-size:2.6rem}
.tile .idx{position:absolute;top:.6rem;right:.6rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--paper);color:var(--body);display:grid;place-items:center;font-weight:700;font-size:.95rem}
.tile.sel{border-color:var(--c);box-shadow:0 0 0 .25rem var(--c-tint), var(--shadow-lg)}
.tile.ok{border-color:var(--green);background:var(--green-tint);animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.tile.bad{border-color:var(--red);background:var(--red-tint);animation:shake .45s}
.tile.dim{opacity:.35;filter:saturate(.3)}
.tile .badge{position:absolute;top:-.6rem;left:-.6rem;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.3rem;font-weight:700;box-shadow:var(--shadow);transform:scale(0);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.tile.ok .badge{background:var(--green);transform:scale(1)}
.tile.bad .badge{background:var(--red);transform:scale(1);font-size:0}
.tile.bad .badge::after{content:"✗";font-size:1.3rem;line-height:1} /* a wrong tap says ✗, never a red ✓ */
.tile.reveal{border-color:var(--gold);box-shadow:0 0 0 .3rem var(--gold-tint)}
.tile.reveal .badge{background:var(--gold);transform:scale(1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-.5rem)}40%{transform:translateX(.5rem)}60%{transform:translateX(-.35rem)}80%{transform:translateX(.35rem)}}

/* statements (true/false) */
.statements{display:flex;flex-direction:column;gap:.8rem;flex:1;min-height:0;justify-content:center}
.stmt{display:flex;align-items:center;gap:1rem;background:var(--white);border:2px solid var(--line);border-radius:1.1rem;padding:.7rem 1.1rem;box-shadow:var(--shadow)}
.stmt .pic{width:5.5rem;height:5.5rem;display:grid;place-items:center;flex:none}
.stmt .pic img{max-width:100%;max-height:100%;object-fit:contain}
.stmt .pic .emoji{font-size:3.6rem;line-height:1}
.stmt .txt{flex:1;font-size:1.55rem;font-weight:700;line-height:1.3}
.stmt .tf{display:flex;gap:.6rem}
.tfbtn{width:4.2rem;height:4.2rem;border-radius:1rem;border:2px solid var(--line);display:grid;place-items:center;font-size:2rem;font-weight:700;color:var(--body);background:var(--paper);transition:.15s}
.tfbtn svg{width:2.2rem;height:2.2rem}
.tfbtn.yes:hover{border-color:var(--green);color:var(--green)}
.tfbtn.no:hover{border-color:var(--red);color:var(--red)}
.tfbtn.ok{background:var(--green);border-color:var(--green);color:#fff;animation:pop .45s}
.tfbtn.bad{background:var(--red);border-color:var(--red);color:#fff;animation:shake .45s}
.tfbtn.reveal{border-color:var(--gold);background:var(--gold-tint);color:var(--gold-dark)}
.stmt.done{border-color:var(--green-line);background:var(--green-tint)}

/* matching */
.match{display:grid;grid-template-columns:1fr 1fr;gap:4rem;flex:1;min-height:0;position:relative;padding:0 .5rem}
.match .side{display:flex;flex-direction:column;gap:.8rem;min-height:0;justify-content:space-around}
.match .tile{flex:1;flex-direction:row;gap:.8rem;justify-content:flex-start;padding:.6rem .9rem;min-height:0}
.match .tile .pic{flex:0 0 auto;width:30%;height:100%}
.match .tile .pic .emoji{font-size:min(4.5rem, 11vh)}
.match .tile .label{font-size:1.35rem;flex:1;text-align:right}
.match .side.left .tile{flex-direction:row-reverse}
.match .side.left .tile .label{text-align:left}
.match .tile .pic:empty+.label{text-align:center} /* a card with a word and no picture: the word in its middle (owner decision 57) */
.match .tile .label.big{font-size:2.4rem}
.match .tile.piconly .pic{width:100%} /* a picture and no word: the card's width, as printed (the print engine's .cn-pc) */
.match .side.lone{justify-content:flex-start} /* one card against several: at the top, one row high (engines.js) */
.match .tile .port{position:absolute;top:50%;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--white);border:3px solid var(--c);transform:translateY(-50%);transition:.2s}
.match .side.right .tile .port{left:-.75rem}
.match .side.left .tile .port{right:-.75rem}
.match .tile.ok .port{background:var(--green);border-color:var(--green)}
.match svg.wires{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.match svg.wires line{stroke-width:.4rem;stroke-linecap:round}
.match svg.wires line.ok{stroke:var(--green)}
.match svg.wires line.bad{stroke:var(--red);stroke-dasharray:.6rem .5rem;animation:fadeout .8s forwards}
.match svg.wires line.tmp{stroke:var(--c);opacity:.6;stroke-dasharray:.6rem .5rem}
@keyframes fadeout{to{opacity:0}}

/* sorting into groups & sequence */
.sortwrap{display:flex;flex-direction:column;gap:.9rem;flex:1;min-height:0}
.bins{display:grid;gap:1rem;flex:1.25;min-height:0}
.bin{background:var(--white);border:2px dashed var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:0;overflow:hidden;transition:.15s}
.bin.over{border-color:var(--c);background:var(--c-tint)}
.bin .bh{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.6rem .9rem;font-size:1.35rem;font-weight:700;background:var(--c-tint);color:var(--c);border-bottom:1px solid var(--c-line)}
.bin .bh img{height:2.4rem;width:2.4rem;object-fit:contain}
.bin .bh .emoji{font-size:1.9rem;line-height:1}
.bin .items{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.6rem;padding:.7rem}
.pool{flex:1;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:.8rem;padding:.8rem;background:var(--paper);border-radius:var(--r);border:1px solid var(--line)}
.dcard{width:8.5rem;height:8.5rem;background:var(--white);border:2px solid var(--line);border-radius:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.5rem;box-shadow:var(--shadow);cursor:grab;touch-action:none;position:relative;transition:transform .15s, border-color .15s;user-select:none}
.dcard .pic{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.dcard .pic img{max-height:100%;max-width:100%;object-fit:contain;pointer-events:none}
.dcard .pic .emoji{font-size:3.6rem;line-height:1}
.dcard .label{font-size:1rem;font-weight:700;line-height:1.1;text-align:center}
.dcard .pic:empty{display:none} /* a card with a word and no picture: the word in its middle, as the tiles (owner decision 57) */
.dcard .pic:empty+.label{font-size:1.45rem}
.dcard .pic:empty+.label.mid{font-size:1.15rem} /* a longer word or a sentence: smaller, inside its card (engines.js) */
.dcard .pic:empty+.label.long{font-size:1rem}
.dcard .label.long{font-size:.85rem} /* a sentence under a picture: smaller, inside its card */
.dcard.wide{width:13rem;height:5.5rem} /* a printed word card: as wide as its word, as printed (step 4) */
.dcard.dim{opacity:.35;filter:saturate(.3)} /* «أظهر الإجابة»: the card that has no place dims, as a tile does */
.dcard.sel{border-color:var(--c);box-shadow:0 0 0 .25rem var(--c-tint)}
.dcard.drag{position:fixed;z-index:100;pointer-events:none;transform:scale(1.08) rotate(-3deg);box-shadow:var(--shadow-lg);cursor:grabbing}
.dcard.ok{border-color:var(--green);background:var(--green-tint);cursor:default}
.dcard.bad{border-color:var(--red);animation:shake .45s}
.dcard .badge{position:absolute;top:-.5rem;left:-.5rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1rem;transform:scale(0);transition:.25s}
.dcard.ok .badge{transform:scale(1)}
.bin .items .dcard{width:7rem;height:7rem}
.bin .items .dcard.wide{width:11rem;height:4.6rem}
.bin .items .dcard.cap{width:8.5rem;height:8.5rem} /* a picture with a long caption keeps its picture in its group */
.seq{display:flex;gap:1rem;justify-content:center;align-items:stretch;flex:1.1;min-height:0}
.slot{flex:1;max-width:14rem;background:var(--white);border:2px dashed var(--c-line);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;position:relative;min-height:0;transition:.15s}
.slot.over{border-color:var(--c);background:var(--c-tint)}
.slot .n{position:absolute;top:.5rem;right:.6rem;width:2rem;height:2rem;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700}
.slot .dcard{width:85%;height:75%;cursor:default}
.slot.ok{border-style:solid;border-color:var(--green);background:var(--green-tint)}
.slot.bad{border-color:var(--red);animation:shake .45s}
.slot .arrow{position:absolute;left:-1.15rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.6rem}

/* placement into a scene */
.scene{flex:1;min-height:0;display:flex;gap:1rem}
.scene .board{flex:1.6;min-height:0;position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.scene .board img.bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}
.scene .board .bgfill{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#dff1ff 0%,#eaf7ea 60%,#d7ebc8 100%)}
.zone{position:absolute;border:2px dashed var(--c);border-radius:1rem;background:rgba(var(--c-rgb),.1);display:flex;align-items:center;justify-content:center;transition:.15s}
.zone .zl{position:absolute;bottom:-1.6rem;font-weight:700;color:var(--c);font-size:1rem;white-space:nowrap;background:rgba(255,255,255,.85);padding:0 .5rem;border-radius:.5rem}
.zone.over{background:rgba(var(--c-rgb),.22)}
.zone.ok{border-style:solid;border-color:var(--green);background:transparent}
.zone.ok .zl{color:var(--green)}
.zone .dcard{width:88%;height:88%;cursor:default;border-color:transparent;box-shadow:none;background:transparent}
.scene .pool{flex:1;align-content:center}
.scene .board .frame{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto} /* the picture's own box: its size set by engines.js */
.zone .zl.name{bottom:-2.6rem;font-size:1.3rem;padding:.15rem .9rem;background:var(--c-tint)} /* a place's printed name: a heading under it, as printed */
.zone .zl.top{bottom:auto;top:-2.6rem;font-size:1.3rem;padding:.15rem .9rem;background:var(--c-tint)} /* «… أسفل «مكة المكرمة»»: the name above its place, a heading as printed */
.frame .zone:not(.over){background:var(--white)} /* a place on a picture: a white box, as printed (it hides the picture's own box under it) */
.zone .dcard{position:static} /* the ✓ of a placed card on the place's frame, never on its picture (SPEC §5) */
.zone .dcard .badge{top:-.9rem;left:-.9rem}
.zone.ok:not([data-z]) .zl{color:var(--c)} /* the number under a printed card: as the empty places', not the green of «right» */

/* counting */
.count{flex:1;min-height:0;display:flex;gap:1rem}
.count .hero{flex:1.4}
.numpad{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;align-content:center}
.numpad button{aspect-ratio:1.3;border-radius:1rem;background:var(--white);border:2px solid var(--line);font-size:2.4rem;font-weight:700;font-family:var(--display);box-shadow:var(--shadow);transition:.15s;color:var(--ink)}
.numpad button:hover{border-color:var(--c-line);transform:translateY(-.1rem)}
.numpad button.ok{background:var(--green);border-color:var(--green);color:#fff;animation:pop .45s}
.numpad button.bad{background:var(--red-tint);border-color:var(--red);color:var(--red);animation:shake .45s}
.numpad button.reveal{border-color:var(--gold);background:var(--gold-tint);color:var(--gold-dark)}
.counters{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.countdot{position:absolute;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.1rem;box-shadow:var(--shadow);animation:pop .3s}

/* letters / word building */
.word{flex:1;min-height:0;display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center}
.word .target{display:flex;flex-direction:row;gap:.7rem;direction:rtl}
.word .cell{width:6rem;height:6.5rem;border-radius:1rem;border:2px dashed var(--c-line);background:var(--white);display:grid;place-items:center;font-size:3.4rem;font-weight:700;transition:.15s}
.word .cell.f{border-style:solid;border-color:var(--c);background:var(--c-tint)}
.word .cell.ok{border-color:var(--green);background:var(--green-tint);color:var(--green)}
.word .cell.bad{border-color:var(--red);animation:shake .45s}
.word .letters{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.word .letters button{width:6rem;height:6.5rem;border-radius:1rem;border:2px solid var(--line);background:var(--white);font-size:3.2rem;font-weight:700;box-shadow:var(--shadow);transition:.15s;color:var(--ink)}
.word .letters button:hover{border-color:var(--c-line);transform:translateY(-.15rem)}
.word .letters button.used{opacity:.25;pointer-events:none}
.word .model{font-size:3rem;font-weight:700;color:var(--muted);letter-spacing:.1em}
.word .model.hidden{visibility:hidden}

/* colouring */
.colour{flex:1;min-height:0;display:flex;gap:1rem}
.colour .canvaswrap{flex:1.6;min-height:0;position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.colour .shape{position:relative;height:90%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.colour .shape svg{width:100%;height:100%}
.colour .shape svg [data-region]{cursor:pointer;transition:fill .2s;stroke:#1F2A33;stroke-width:3}
.palette{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;align-content:center}
.swatch{aspect-ratio:1;border-radius:1rem;border:3px solid #fff;box-shadow:var(--shadow);transition:.15s;position:relative}
.swatch::before{content:"";display:block;padding-top:100%} /* square without aspect-ratio (old browsers) */
.swatch.on{transform:scale(1.08);box-shadow:0 0 0 .3rem var(--c-tint), var(--shadow-lg)}
.swatch.on::after{content:"✓";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.colour .modelbox{display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--muted);font-weight:700}
.colour .modelbox .mini{width:7rem;height:7rem}
.colour .modelbox .mini svg{width:100%;height:100%}

/* show-only (pen / reading tasks) */
.show{flex:1;min-height:0;display:flex;gap:1rem}
.show .hero{flex:1.5}
.show .side{flex:1;display:flex;flex-direction:column;gap:.8rem;justify-content:center}
.show .answer{background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:var(--r);padding:1rem 1.2rem;font-size:1.5rem;font-weight:700;color:var(--gold-dark);display:none}
.show .answer.on{display:block;animation:fade .3s}
.show .side{min-height:0}
.show .answer.on{min-height:0;overflow:auto} /* a long answer key scrolls in its column: it once spread over both bars and off the screen */
.show .note{color:var(--muted);font-size:1.05rem;line-height:1.5}
/* the steps after «أظهر الإجابة»: the column scrolls from its top to the answer, the steps keep their height (they once
   spread over the instruction, and the tools line over a step) */
.show .side.stepcol.on{justify-content:flex-start;overflow-y:auto} /* the steps keep their height: engines.js, on reveal */
.stepcol.on .answer.on{flex-shrink:0;overflow:visible;animation-name:fadeonly} /* no slide: the column scrolls to it at once */
@keyframes fadeonly{from{opacity:0}to{opacity:1}}
.stepcol.on>:first-child{margin-top:auto} /* in the middle while all fits, as before the answer; from the top once it scrolls */
.stepcol.on>.answer.on{margin-bottom:auto}

/* ---------- bottom bar ---------- */
.bottombar{height:var(--bottom);display:flex;align-items:center;gap:.8rem;padding:0 1.4rem;background:var(--white);border-top:1px solid var(--line)}
.navbtn{display:inline-flex;align-items:center;gap:.5rem;height:3rem;padding:0 1.1rem;border-radius:1rem;background:var(--paper);color:var(--ink);font-weight:700;font-size:1.05rem;transition:.15s;border:1px solid transparent}
.navbtn:hover{background:var(--c-tint);color:var(--c);border-color:var(--c-line)}
.navbtn.primary{background:var(--c);color:#fff}
.navbtn.primary:hover{filter:brightness(1.08);color:#fff}
.navbtn.primary.pulse{animation:pulse 1.2s infinite}
.navbtn:disabled{opacity:.35;pointer-events:none}
.navbtn svg{width:1.3rem;height:1.3rem}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--c-rgb),.45)}60%{box-shadow:0 0 0 .7rem transparent}}
.sheetdots{flex:1;display:flex;justify-content:flex-start;align-items:center;gap:.45rem;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
/* centred while they fit; on a narrow screen (a tablet held upright) they scroll, none cut off at either end */
.sheetdots::-webkit-scrollbar{display:none}
.sheetdots>:first-child{margin-inline-start:auto}
.sheetdots>:last-child{margin-inline-end:auto}
.sheetdots button{flex:none}
.sheetdots button{height:2.2rem;min-width:2.2rem;padding:0 .6rem;border-radius:2rem;background:var(--paper);color:var(--body);font-weight:700;font-size:.9rem;border:1px solid transparent;transition:.15s;display:inline-flex;align-items:center;gap:.3rem}
.sheetdots button.on{background:var(--c);color:#fff}
.sheetdots button.done{border-color:var(--green);color:var(--green)}
.sheetdots button.done.on{background:var(--green);color:#fff}
.sheetdots button{justify-content:center;font-size:1rem}
.tools{display:flex;gap:.5rem;align-items:center}
.tools .sep{width:1px;height:2rem;background:var(--line);margin:0 .3rem}

/* ---------- pen overlay ---------- */
#pen{position:fixed;top:calc(var(--top) + .45rem);right:0;bottom:var(--bottom);left:0;z-index:80;display:none;cursor:crosshair;touch-action:none} /* over the exercise only: the bars stay usable */
body.clean #pen{top:.45rem;bottom:0}
#pen.on{display:block}
#pen canvas{width:100%;height:100%;display:block}
/* the pen's tools: one column on the left edge, beside the exercise (owner, 31 Oct), with its own «خروج» */
.pentools{position:fixed;z-index:81;left:.7rem;top:50%;transform:translateY(-50%);display:none;flex-direction:column;align-items:center;gap:.5rem;background:var(--white);padding:.7rem .5rem;border-radius:1.8rem;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.pentools.on{display:flex}
.pentools .ink{width:2.5rem;height:2.5rem;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.pentools .ink.on{box-shadow:0 0 0 3px var(--ink)}
.pentools .tool{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--body)}
.pentools .tool svg{width:1.35rem;height:1.35rem}
.pentools .tool.on{background:var(--ink);color:#fff}
.pentools .exit{display:flex;flex-direction:column;align-items:center;gap:.15rem;width:3.2rem;margin-top:.3rem;padding:.5rem 0 .45rem;border-radius:1.1rem;background:var(--ink);color:#fff;font-weight:700;font-size:.9rem}
.pentools .exit svg{width:1.2rem;height:1.2rem}
body.pen-on .stage{padding-left:5.6rem} /* the column never covers the exercise */

/* ---------- celebration ---------- */
.cheer{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:20}
.cheer .bubble{background:var(--white);border:2px solid var(--green);color:var(--green);border-radius:2rem;padding:1rem 2.2rem;font-family:var(--display);font-size:2.6rem;box-shadow:var(--shadow-lg);animation:cheer 1.6s forwards}
@keyframes cheer{0%{transform:scale(.6);opacity:0}15%{transform:scale(1.05);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-1rem)}}
.confetti{position:absolute;width:.7rem;height:.7rem;border-radius:.15rem;animation:fall 1.4s ease-in forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx), var(--dy)) rotate(540deg);opacity:0}}

/* toast */
.toast{position:fixed;bottom:calc(var(--bottom) + 1rem);right:50%;transform:translateX(50%);background:var(--ink);color:#fff;padding:.6rem 1.2rem;border-radius:2rem;font-size:1rem;z-index:90;opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1}

/* demo banner for lessons without content yet */
.placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;color:var(--body)}
.placeholder .ticon{transform:rotate(-6deg)}
.placeholder h2{font-size:1.9rem}
.placeholder p{max-width:34rem;line-height:1.6;color:var(--muted)}

/* help overlay */
.help{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(31,42,51,.55);z-index:95;display:none;align-items:center;justify-content:center;padding:2rem}
.help.on{display:flex}
.help .box{background:var(--white);border-radius:1.6rem;padding:1.8rem 2rem;max-width:46rem;width:100%;box-shadow:var(--shadow-lg)}
.help h3{font-family:var(--display);font-size:1.8rem;margin-bottom:.8rem}
/* a phone: the note each time the site opens (owner, 2 Nov), in the help box's dress; the phone in it turns sideways */
.phonenotice{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(31,42,51,.55);z-index:96;display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeonly .25s ease}
.phonenotice .box{background:var(--white);border-radius:1.6rem;padding:1.8rem 2rem 1.6rem;max-width:30rem;width:100%;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
.phonenotice .turn{width:4.6rem;height:4.6rem;color:var(--green)}
.phonenotice .turn svg{width:100%;height:100%;display:block}
.phonenotice .turn .phone{transform-box:fill-box;transform-origin:center;animation:turnphone 2.8s ease-in-out infinite}
@keyframes turnphone{0%,20%{transform:none}40%,75%{transform:rotate(-90deg)}95%,100%{transform:none}}
.phonenotice h3{font-family:var(--display);font-size:1.8rem;line-height:1.35;color:var(--ink)}
.phonenotice p{font-size:1.45rem;line-height:1.7;color:var(--body)}
.phonenotice .navbtn.primary{background:var(--green);height:4rem;min-width:11rem;justify-content:center;font-size:1.3rem;margin-top:.3rem}
.phonenotice .navbtn.primary:focus{outline:.22rem solid var(--green-line);outline-offset:.18rem}
@media (prefers-reduced-motion:reduce){.phonenotice .turn .phone{animation:none;transform:rotate(-90deg)}}
.help table{width:100%;border-collapse:collapse;font-size:1.05rem}
.help td{padding:.45rem .3rem;border-bottom:1px solid var(--line)}
.help kbd{display:inline-block;min-width:2rem;text-align:center;padding:.1rem .5rem;border-radius:.4rem;background:var(--paper);border:1px solid var(--line);font-family:var(--font);font-weight:700;margin-left:.2rem}

/* ---------- identity: the program logo and the approved subject icons (owner, 31 Oct 2026) ---------- */
#boot{display:none!important}
.sicon{width:2.9rem;height:2.9rem;object-fit:contain;flex:none}
.sicon.lg{width:4.8rem;height:4.8rem}
.toplogo{height:2.5rem;width:auto;flex:none;padding-right:1rem;border-right:1px solid var(--line)}
.player .toplogo{height:2.1rem}
@media (max-width:1180px){.player .toplogo{display:none}}

/* ---------- cover (home) ---------- */
.cover{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--bg) 70%)}
.cover-tools{position:absolute;top:1.1rem;left:1.4rem;display:flex;align-items:center;gap:.6rem;z-index:2}
.cover-main{position:relative;z-index:1;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 3rem 2.4rem;text-align:center}
.cover-logo{width:24rem;max-width:70%;height:auto}
.cover-title{font-family:var(--display);font-size:3.2rem;line-height:1.1;margin-top:1.4rem;color:var(--ink)}
.cover-sub{font-size:1.3rem;color:var(--body);margin-top:.6rem;max-width:40rem}
.cover-term{margin-top:1rem}
.cover-ask{font-size:1.25rem;font-weight:700;color:var(--body);margin-top:2rem}
.cover .cards.grades{margin-top:.9rem;width:100%;max-width:56rem}
.cover .card.grade{min-height:9.5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem}
.deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.deco img{position:absolute;width:6rem;height:6rem;opacity:.12}
.deco img:nth-child(1){top:9%;right:5%;transform:rotate(-10deg)}
.deco img:nth-child(2){top:40%;right:2.5%;width:4.6rem;height:4.6rem;transform:rotate(8deg)}
.deco img:nth-child(3){bottom:12%;right:7%;transform:rotate(-4deg)}
.deco img:nth-child(4){top:24%;right:14%;width:3.6rem;height:3.6rem;transform:rotate(14deg)}
.deco img:nth-child(5){top:12%;left:13%;width:4.4rem;height:4.4rem;transform:rotate(9deg)}
.deco img:nth-child(6){top:38%;left:4%;transform:rotate(-12deg)}
.deco img:nth-child(7){bottom:10%;left:8%;width:5rem;height:5rem;transform:rotate(6deg)}
.deco img:nth-child(8){top:60%;left:1.5%;width:3.4rem;height:3.4rem;transform:rotate(-8deg)}

/* sheets per level in a lesson row: «●○○ ٧ أوراق» */
.lrow .lt small{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.1rem}
.counts{display:inline-flex;flex-wrap:wrap;gap:.3rem 1rem}
.count{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.count .dots i{width:.45rem;height:.45rem}
/* clean mode: the corner button that brings the bars back */
.showbars{position:fixed;left:1rem;bottom:1rem;z-index:79;display:none;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:2rem;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--body);font-weight:700;font-size:.95rem;opacity:.75;transition:opacity .15s}
.showbars:hover{opacity:1}
.showbars svg{width:1.2rem;height:1.2rem}
body.clean .showbars{display:inline-flex}

/* ---------- the drawings the printed engine draws with code (engines 16–27, «تحسينات العرض» step 1) ---------- */
.drawn{flex:1;min-height:0;display:flex;gap:1.2rem}
.dstage{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.drawn .hero.aside{flex:0 1 14rem;min-width:8rem}
.drawn .side.dside{flex:none;width:14rem}
/* the keypad stands where the colouring palette stands, beside the drawing */
.drawn .numpad{flex:none;width:13.5rem;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;align-self:center}
.drawn .numpad button{height:4rem;aspect-ratio:auto;font-size:2.2rem}
/* a box the student writes in: dashed while empty, lit while written, green when right, gold when shown */
.abox{flex:none;min-width:4.6rem;height:4.4rem;padding:0 .5rem;border:2px dashed var(--c-soft);border-radius:.9rem;background:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:2.5rem;font-weight:700;line-height:1;color:var(--ink);cursor:pointer;transition:border-color .15s, box-shadow .15s, background .15s}
.abox.on{border:2px solid var(--c);box-shadow:0 0 0 .25rem var(--c-tint)}
.abox.ok{border:2px solid var(--green);background:var(--green-tint);color:var(--green);box-shadow:none;cursor:default;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.abox.bad{border-color:var(--red);background:var(--red-tint);animation:shake .45s}
.abox.reveal{border:2px solid var(--gold);background:var(--gold-tint);color:var(--gold-dark);box-shadow:none}
.abox.free{cursor:default}
.ntile{flex:none;width:6rem;height:6rem;border:2px solid var(--c-line);border-radius:1.1rem;background:var(--white);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:3.2rem;font-weight:700;line-height:1;color:var(--ink)}
.opdisc{flex:none;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;box-shadow:0 .2rem 0 var(--c-line)}
.opdisc svg{width:60%;height:60%;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
.opdisc svg circle{fill:#fff;stroke:none}
.startarrow{flex:none;width:3.4rem;height:2.2rem;border-radius:2rem;background:var(--c-tint);color:var(--c);display:flex;align-items:center;justify-content:center}
.startarrow svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.eqline{flex:none;display:flex;align-items:center;justify-content:center;gap:1rem}
.eqline .abox.eqbox{width:6rem;height:6rem;font-size:3.2rem}
/* the number train: wagons left to right, couplings, wheels and the rail */
.trainrow{flex:none;align-self:center;width:calc(var(--n) * 10.5rem + (var(--n) - 1) * 1.4rem);max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.wagons{align-self:stretch;display:flex;gap:1.4rem}
.wagon{position:relative;flex:1;min-width:0;padding-bottom:1.7rem}
.wagon + .wagon::before{content:"";position:absolute;right:100%;width:1.4rem;top:3.3rem;height:.4rem;background:var(--c);border-radius:.2rem}
.wbox{height:7rem;border:3px solid var(--c);border-radius:1rem;display:flex;align-items:center;justify-content:center;background:var(--white);box-shadow:var(--shadow)}
.wbox.given{background:var(--c-tint);color:var(--c);font-family:var(--display);font-size:3.2rem;font-weight:700;line-height:1}
.wbox .abox{min-width:0;width:78%;height:72%;font-size:2.8rem}
.wh{position:absolute;bottom:0;left:18%;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--white);border:.32rem solid var(--body)}
.wh.r{left:auto;right:18%}
.rail{display:block;align-self:stretch;height:.35rem;margin:-.2rem -.6rem 0;border-radius:.2rem;background:var(--body)}
/* place value: a row for each number, its box, its unit squares and its rods of ten */
.pv{max-width:60rem;margin:0 auto;gap:.5rem}
.pvrow{display:grid;grid-template-columns:2.4rem 8rem minmax(0,1fr) minmax(0,1.5fr);column-gap:1rem;align-items:center}
.pvhead{flex:none;font-weight:700;color:var(--c);text-align:center;font-size:1.15rem}
.pvhead span:not(:empty){background:var(--c-tint);border-radius:2rem;padding:.15rem 0}
.pvrows{flex:1;min-height:0;display:flex;flex-direction:column;gap:.55rem}
.pvrows .pvrow{flex:1;min-height:0;max-height:6.6rem;padding:.4rem .9rem;border:2px solid var(--c-line);border-radius:1.1rem;background:var(--white);box-shadow:var(--shadow);grid-template-rows:minmax(0,1fr)}
.pvn{flex:none;width:2.2rem;height:2.2rem;border-radius:.6rem;background:var(--c);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.pvcell{height:100%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.pvcell .abox{width:7rem;height:100%;max-height:4.4rem;font-size:2.4rem}
.rods{height:100%;display:flex;gap:.45rem}
.rods svg{flex:none;width:1.05rem;height:100%;overflow:visible}
.rods svg:nth-child(5n+6){margin-left:.45rem}
.rod rect{fill:var(--c-tint)}
.rod rect,.rod path{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.rod path{fill:none}
.ones{display:grid;grid-auto-rows:1.45rem;gap:.35rem}
.ones i{display:block;border:2px solid var(--gold-dark);border-radius:.3rem;background:var(--gold-tint)}
/* identical pictures (scenes, counting groups): one size for all, measured to their box */
.scene2{gap:1rem}
.pairrow{flex:1;min-height:0;display:flex;align-items:center;gap:1rem}
.icard{flex:1;align-self:stretch;min-width:0;min-height:0;display:flex;border:2px dashed var(--c-line);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);padding:.7rem}
.icard.bare{border-color:transparent;background:transparent;box-shadow:none}
.ibox{flex:1;min-width:0;min-height:0;position:relative}
.icons{position:absolute;top:50%;left:50%;display:flex;flex-direction:column} /* sized and centred by fitGroups: no transform, so the pictures' white melts into the card */
.icons.start .irow{justify-content:flex-start}
.irow{display:flex;justify-content:center}
.ic{position:relative;flex:none;width:var(--cell,3rem);height:var(--cell,3rem);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ic img{max-width:88%;max-height:88%;object-fit:contain;pointer-events:none;mix-blend-mode:multiply;filter:brightness(1.04) contrast(1.03)} /* the picture's white melts into the card, as on paper (special.css) */
.ic.g5{margin-left:calc(var(--cell,3rem) * .4)}
.ic.x{cursor:default}
.ic.x img{opacity:.45}
.ic .strike{position:absolute;left:10%;top:10%;width:80%;height:80%;fill:none;stroke:var(--red);stroke-width:1.1;stroke-linecap:round;pointer-events:none}
.ic .countdot{top:0;right:0;width:calc(var(--cell,3rem) * .46);height:calc(var(--cell,3rem) * .46);font-size:calc(var(--cell,3rem) * .26);pointer-events:none}
.icons.tens{flex-direction:row;align-items:flex-start}
.tblk{display:grid;grid-template-columns:repeat(var(--w), var(--cell,3rem));grid-auto-rows:var(--cell,3rem);padding:calc(var(--cell,3rem) * .12);border-radius:calc(var(--cell,3rem) * .3);background:var(--c-tint)}
.tblk + .tblk{margin-left:calc(var(--cell,3rem) * .4)}
.copycol{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.copycol .model{font-family:var(--display);font-size:2.4rem;font-weight:700;line-height:1;color:var(--ink)}
.copycol .model.q{color:var(--muted)}
/* the operator card of a missing operator, and its box */
.abox.opslot{width:5rem;height:5rem;padding:0;cursor:default}
.abox.opslot.over{border-color:var(--c);background:var(--c-tint)}
.abox.opslot.ok{border-style:solid}
.oppool{flex:none;align-self:center;padding:.8rem 2rem}
.dcard.opcard{width:6.5rem;height:6.5rem}
.abox.opslot .dcard{width:100%;height:100%;border:0;box-shadow:none;background:transparent}
/* clocks: the printed clock pictures, a box under each */
.clocks{flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:1rem 2.4rem}
.clock{width:12rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.clock .pic{width:100%;height:10rem;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:.5rem}
.clock .pic img{max-width:100%;max-height:100%;object-fit:contain}
.clock .abox{width:9rem;height:3.6rem;font-size:2.3rem}
/* money: rows of value cards and empty boxes, the value cards to put beside them */
.money{gap:.5rem}
.mrow{flex:1;min-height:0;max-height:6.2rem;display:flex;align-items:center;gap:1rem;padding:.35rem .9rem;border:2px solid var(--c-line);border-radius:1.1rem;background:var(--white);box-shadow:var(--shadow);transition:border-color .2s, background .2s}
.mrow.ok{border-color:var(--green);background:var(--green-tint)}
.mrow.bad{border-color:var(--red);animation:shake .45s}
.mlab{flex:0 1 11rem;min-width:7.5rem;display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--c);font-size:1.1rem;line-height:1.25}
.notes{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center;gap:.55rem}
.vcard{flex:0 1 5.2rem;min-width:3.6rem;height:4.4rem;border:2px solid var(--c-line);border-radius:.8rem;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;line-height:1}
.vcard b,.abox.mbox b{font-family:var(--display);font-size:2rem;color:var(--ink)}
.vcard small,.abox.mbox small{font-family:var(--font);font-size:.85rem;font-weight:700;color:var(--body)}
.abox.mbox{flex:0 1 5.2rem;min-width:3.6rem;width:auto;height:4.4rem;padding:0;border-radius:.8rem;flex-direction:column;gap:.15rem}
.abox.mbox.filled{border-style:solid;border-color:var(--c-line)}
.abox.mbox.reveal b{color:var(--gold-dark)}
.abox.mbox.skip{opacity:.35}
.vpal{flex:none;width:8.5rem;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.vpal .dcard.vcard{flex:none;width:100%;height:6.2rem;padding:0;border-style:solid;border-color:var(--c-line);cursor:grab}
.vpal .dcard.vcard b{font-size:2.8rem}
.vpal .dcard.vcard:hover{border-color:var(--c)}
/* counting groups: the numbers under them, or beside them with wires; the number to say, shown with «أظهر الإجابة» */
.countg{flex-direction:column;gap:1rem;position:relative}
.gcol{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;gap:.7rem}
.gcard{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border:2px dashed var(--c-line);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);padding:.5rem .9rem;transition:border-color .15s, background .15s}
.tiles.orow{flex:none;height:6.4rem;justify-content:center}
.tile.onum .label.big{font-family:var(--display)}
.countg.matchg{flex-direction:row;gap:5rem}
.ocol{flex:none;width:8rem;display:flex;flex-direction:column;justify-content:space-around;gap:.7rem}
.ocol .tile{flex:1;min-height:0;max-height:7rem;padding:.3rem}
.cport{position:absolute;top:50%;width:1.3rem;height:1.3rem;margin-top:-.65rem;border-radius:50%;background:var(--white);border:3px solid var(--c);z-index:1}
.gcard .cport{right:-.75rem}
.ocol .cport{left:-.75rem}
.matchg .gcard{cursor:pointer}
.gcard.sel{border-style:solid;border-color:var(--c);box-shadow:0 0 0 .25rem var(--c-tint)}
.gcard.ok{border-style:solid;border-color:var(--green);background:var(--green-tint)}
.gcard.reveal{border-style:solid;border-color:var(--gold)}
.gcard.ok .cport,.ocol .tile.ok .cport{background:var(--green);border-color:var(--green)}
.countg svg.wires{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.countg svg.wires line{stroke-width:.4rem;stroke-linecap:round}
.countg svg.wires line.ok{stroke:var(--green)}
.countg svg.wires line.bad{stroke:var(--red);stroke-dasharray:.6rem .5rem;animation:fadeout .8s forwards}
.gnum{flex:none;text-align:center;font-family:var(--display);font-size:1.8rem;font-weight:700;line-height:1.1;color:var(--ink)}
.gsum{flex:none;align-self:center;min-width:6rem;padding:.3rem 1.4rem;border-radius:1rem;background:var(--gold-tint);border:2px solid var(--gold);color:var(--gold-dark);font-family:var(--display);font-size:2.8rem;font-weight:700;line-height:1.2;text-align:center;visibility:hidden}
.gsum.on{visibility:visible;animation:fade .3s}
/* colouring a drawn shape: the ring around a portrait, the shape beside its model */
.ringbox{position:absolute;top:.8rem;right:.8rem;bottom:.8rem;left:.8rem}
.ringsvg,.cmsvg{display:block;width:100%;height:100%}
.ringsvg .band,.cmsvg .fillshape{fill:#fff;stroke:var(--ink);stroke-width:3;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .2s}
.cmrow{gap:3rem}
.cmmodel{flex:none;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-weight:700;color:var(--body);font-size:1.15rem}
.cmshape{width:7rem;height:7rem;border-radius:50%;border:3px solid var(--ink)}
.cmshape.sq{border-radius:1rem}
.cmbig{flex:none;width:22rem;height:22rem;max-width:60%;max-height:90%}
.cmsvg.bad{animation:shake .45s}
.cmsvg.reveal .fillshape{stroke:var(--gold-dark)}
/* the boxes to draw in, with the pen, under the model */
.dg{gap:.8rem}
.dgmodel{flex:none;align-self:center;display:flex;align-items:center;gap:.8rem;background:var(--white);border:2px solid var(--c-line);border-radius:var(--r);padding:.4rem 1.1rem;box-shadow:var(--shadow)}
.dgmodel .pic{width:9rem;height:4.6rem;display:flex;align-items:center;justify-content:center}
.dgmodel .pic img{max-width:100%;max-height:100%;object-fit:contain}
.dglab{font-weight:700;color:var(--c)}
.dggrid{flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:.7rem}
.dgbox{position:relative;min-height:0;border:2px dashed var(--c-line);border-radius:1rem;background:var(--white)}
.dgn{position:absolute;top:.35rem;right:.45rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--c-tint);color:var(--c);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.drawn.show .side{flex:none;width:16rem;min-height:0}
.drawn.show .side .answer{min-height:0;overflow:auto;font-size:1.05rem;line-height:1.6} /* the long answer key scrolls in its column, never over the bars */
/* the calendar card and the number cards (English) */
.calstage{align-items:center}
.cal{width:100%;height:22rem;max-height:100%;display:flex;flex-direction:column;border:3px solid var(--c-line);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);overflow:hidden}
.calbar{flex:0 0 3rem;background:var(--c);display:flex;justify-content:space-evenly;align-items:center}
.calbar i{width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .3rem var(--c-soft)}
.calgrid{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,2fr) minmax(0,3fr);grid-gap:2px;background:var(--c-line)}
.cald{display:flex;align-items:center;justify-content:center;background:var(--c-tint);font-size:2.2rem;font-weight:700;color:var(--ink);direction:ltr}
.cald.hidden{cursor:pointer}
.cald.shown{background:var(--green-tint);color:var(--green)}
.cald.reveal{background:var(--gold-tint);color:var(--gold-dark)}
.caln{display:flex;align-items:center;justify-content:center;background:var(--white);font-family:var(--display);font-size:4.2rem;font-weight:700;color:var(--ink)}
.ngrid{flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:1rem 1.2rem;max-height:24rem}
.ncard{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--c-line);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s, background .15s}
.ncard b{font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--ink)}
/* the name under the number, out of the flow: every card's number stands in the same place before a tap */
.ncard .nword{position:absolute;left:0;right:0;bottom:.6rem;text-align:center;font-size:1.3rem;font-weight:700;color:var(--green);direction:ltr;visibility:hidden}
.ncard.sel{border-color:var(--c);box-shadow:0 0 0 .25rem var(--c-tint)}
.ncard.shown{border-color:var(--green);background:var(--green-tint)}
.ncard.shown .nword{visibility:visible}
.ncard.reveal{border-color:var(--gold);background:var(--gold-tint)}
.ncard.reveal .nword{color:var(--gold-dark)}

/* ---------- the places for the pictures a sheet prints around its activity (PLACES in engines.js) ---------- */
/* context: the picture printed under the instruction, a band at the top of the activity (a quarter of its height), the
   picture whole in its card; beside the groups of a sort; above the picture of a writing task */
.ctxband{flex:0 0 26%;min-height:0;display:flex;justify-content:center;min-width:0}
.ctxpic{height:100%;max-width:100%;display:flex;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:.45rem;box-shadow:var(--shadow)}
.ctxpic img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:.6rem}
.binsrow{display:flex;gap:1rem;flex:1.25;min-height:0}
.binsrow .bins{flex:1;min-width:0}
.binsrow .ctxside{flex:0 0 24%}
.show .herocol{flex:1.5}
.show .herocol .hero{flex:1}
/* look: the picture printed above a colouring drawing to look at, above it */
.colour .lookcol{flex:1.6}
.colour .lookcol .canvaswrap{flex:1}
/* model: the model printed with a colouring drawing, above the palette, «النموذج» under it as the sheet prints it */
.palcol{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.palcol .palette{flex:none}
.palcol .modelpic{flex:0 1 17rem;min-height:7rem;flex-direction:column;gap:.3rem}
.palcol .modelpic > .pic{position:static;flex:1;min-height:0;width:100%}
.palcol .modelpic .caption{position:static;background:none;padding:0}

/* a sheet that prints two activities (owner decision 60): one after the other, a button for each under the goal, in words,
   the one shown in the subject's colour and the one done with a ✓, as the sheet buttons below */
.instruction .parts{display:flex;gap:.35rem;position:relative;z-index:85} /* above the pen, as the bars: a tap moves on and closes it */
.instruction .parts button{height:1.9rem;padding:0 .75rem;border-radius:2rem;background:var(--paper);color:var(--body);font-weight:700;font-size:.85rem;border:1px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:.25rem;transition:.15s}
.instruction .parts button:hover{background:var(--c-tint);color:var(--c);border-color:var(--c-line)}
.instruction .parts button.on{background:var(--c);color:#fff}
.instruction .parts button.done{border-color:var(--green);color:var(--green)}
.instruction .parts button.done.on{background:var(--green);color:#fff}
.instruction .parts button.done::before{content:'✓'}

/* phones (the artifact preview): stack the menus; the player keeps its projector layout but shrinks its gutters */
@media (max-width:640px){
  .cards.grades{grid-template-columns:1fr}
  .cards.subjects{grid-template-columns:1fr 1fr}
  .menu{padding:1.2rem max(16px, env(safe-area-inset-right,0px)) 2rem max(16px, env(safe-area-inset-left,0px))}
  .stage{padding:.6rem max(16px, env(safe-area-inset-right,0px)) .4rem max(16px, env(safe-area-inset-left,0px))}
  .topbar,.bottombar{padding:0 16px}
  .levelswitch button{padding:.4rem .6rem}
}