/* Lambda: the sign-in on the entrance (task T20). The styles of gateway/sign-in.js; every class starts with si-.
   The Lab's panel is night glass, the Kindergarten's is paper, the grown-ups' corner is plain and small on purpose.

   READY FOR ARABIC (right to left): inside the panels everything is laid out with "start" and "end" (flex, grid,
   text-align:start, margin-inline). Only the rules marked FOLLOWS THE SPLIT SCREEN use left and right, because they
   must lie exactly where gateway/gate.css puts the two halves and the sound button. If task E01 mirrors those in
   gate.css, it mirrors these few lines with them.

   With "reduce motion" nothing here moves: the one small animation is asked for only when motion is welcome. */
.gate [class^="si-"][hidden]{display:none!important}

/* ---------------------------------------------------------------- the small controls on the split screen */
/* FOLLOWS THE SPLIT SCREEN: "Grown-ups" sits beside the sound button (gate.css: .sound, top right, 44 px) */
.si-grown{position:absolute;z-index:7;top:clamp(10px,2.2vh,22px);right:calc(clamp(10px,2vw,22px) + 54px);height:44px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;
 font:600 13.5px/1 'DM Sans',system-ui,sans-serif;color:var(--ink);background:rgba(255,255,255,.78);box-shadow:0 6px 18px rgba(10,20,60,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gate[data-si="grown"] .si-grown{z-index:12;background:#fff}
/* FOLLOWS THE SPLIT SCREEN: the school's name is in the Lab's top corner, clear of the mark on the seam */
.si-school{position:absolute;z-index:7;top:clamp(10px,2.2vh,22px);left:clamp(10px,2vw,22px);max-width:calc(var(--s)*100% - 100px);height:44px;display:flex;align-items:center;gap:6px;padding-inline:16px 5px;border-radius:999px;
 font:700 14px/1.15 'DM Sans',system-ui,sans-serif;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);box-shadow:0 6px 18px rgba(2,6,30,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.si-school b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the school's own colour and picture (chosen by its admin from Lambda's own; the colour is put on by sign-in.js) */
.si-school img{flex:none;width:32px;height:32px;margin-inline-start:-9px}
.si-school[data-colour]:not([data-colour=""]){border-color:rgba(255,255,255,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
.gate.v .si-school img{width:26px;height:26px;margin-inline-start:-7px}
.si-school .si-round{flex:none;width:32px;height:32px;color:#fff;background:rgba(255,255,255,.14)}
/* a phone: the Lab's card is in that corner, so the name sits in the middle, just above the mark on the seam, and moves with it */
.gate.v .si-school{left:50%;top:auto;bottom:calc((1 - var(--s))*100% + 28px);transform:translateX(-50%);max-width:calc(100% - 24px);height:36px;font-size:12.5px;padding-inline-start:13px}
.gate.v .si-school .si-round{width:28px;height:28px}
@media (max-width:359px){.gate.v .si-grown{right:clamp(10px,2vw,22px);top:calc(clamp(10px,2.2vh,22px) + 52px)}}   /* a very narrow phone: under the sound button */

/* the small "Sign in" under each big button (shown while the big button goes in by itself) */
.si-link{display:block;width:fit-content;margin-top:12px;padding:3px 0;cursor:pointer;font:600 14px/1.2 'DM Sans',system-ui,sans-serif;color:#c8f3ff;text-decoration:underline;text-underline-offset:3px}
.kp-paper .si-link{color:#2b3170;font:800 16px/1.2 'Baloo Bhaijaan 2',sans-serif}
.gate.v .labcard .si-link{margin-top:7px;font-size:13px}
.gate.v .kp-sign .kp-paper{flex-wrap:wrap;row-gap:2px}          /* on a phone that card is one row: the link gets a short row of its own */
.gate.v .kp-sign .si-link{margin:0;margin-inline-start:auto;font-size:14px}

/* who is signed in, at the bottom */
.si-who{position:absolute;z-index:6;left:50%;bottom:8px;transform:translateX(-50%);max-width:calc(100% - 16px);display:flex;align-items:center;gap:14px;padding:3px 14px;border-radius:999px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
 font:500 13px/1.2 'DM Sans',system-ui,sans-serif;color:var(--ink);background:rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(10,20,60,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.si-who::-webkit-scrollbar{display:none}
.si-who-l{opacity:.7}
.si-in{display:inline-flex;align-items:center;gap:9px}
.si-in img{width:26px;height:26px;border-radius:50%;background:#fff3c4}
.si-in b{font-weight:700;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
.si-who .si-a{min-height:34px}
/* "Close this device?": the question is read whole, so here the bar may take two lines */
.si-who[data-ask="1"]{white-space:normal;border-radius:18px;padding-block:6px}
.si-who[data-ask="1"] .si-who-l{display:none}
.si-who[data-ask="1"] .si-in{flex-wrap:wrap;justify-content:center;gap:0 12px;text-align:center}
.si-who[data-ask="1"] .si-in b{max-width:none;flex-basis:100%}
.gate.entering .si-grown,.gate.entering .si-school,.gate.entering .si-who{opacity:0;transition:opacity .3s}

/* ---------------------------------------------------------------- the panels */
.si-scrim{position:absolute;inset:0;z-index:10;background:rgba(4,8,30,.36)}
.si-layer{position:absolute;z-index:11;display:grid;grid-template-columns:minmax(0,1fr);padding:14px;overflow:auto;overscroll-behavior:contain}
/* FOLLOWS THE SPLIT SCREEN: each layer lies exactly over its half (gate.css: .half.lab, .half.kids) */
.si-layer.lab{top:0;bottom:0;left:0;width:calc(var(--s)*100%)}
.si-layer.kids{top:0;bottom:0;left:calc(var(--s)*100%);right:0}
.gate.v .si-layer.lab{right:0;bottom:auto;width:auto;height:calc(var(--s)*100%)}
.gate.v .si-layer.kids{left:0;top:calc(var(--s)*100%)}
/* FOLLOWS THE SPLIT SCREEN: the grown-ups' panel hangs under its button */
.si-layer.grown{top:calc(clamp(10px,2.2vh,22px) + 52px);right:clamp(10px,2vw,22px);width:min(380px,calc(100% - 2*clamp(10px,2vw,22px)));max-height:calc(100% - clamp(10px,2.2vh,22px) - 62px);padding:0}
.gate[data-si="lab"] .labcard,.gate[data-si="kids"] .kp-sign{visibility:hidden}
.gate.v .si-layer.lab,.gate.v .si-layer.kids{padding:10px}

.si-card{position:relative;box-sizing:border-box;width:min(380px,100%);margin:auto;padding:16px 18px 18px;border-radius:22px;display:flex;flex-direction:column;gap:12px;text-align:start;user-select:none;-webkit-user-select:none}
.si-layer.grown .si-card{width:100%;margin:0}
.si-card.glass{font-family:'DM Sans',system-ui,sans-serif;color:#fff;background:linear-gradient(160deg,rgba(26,44,112,.9),rgba(8,16,54,.93));border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 60px rgba(2,6,30,.5);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.si-card.paper{font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;color:#2b3170;background-color:#fff9ec;background-image:var(--grain);background-size:220px;box-shadow:0 2px 0 rgba(31,48,90,.08),0 18px 38px rgba(31,48,90,.34)}
.si-card.plain{font-family:'DM Sans',system-ui,sans-serif;color:#1d2550;background:#fff;box-shadow:0 18px 44px rgba(6,12,44,.38)}
@media (prefers-reduced-motion:no-preference){.si-card{animation:siIn .18s ease-out}@keyframes siIn{from{opacity:0;transform:translateY(8px)}}}

.si-head{display:flex;align-items:center;gap:8px;min-height:38px}
.si-head h3{flex:1;margin:0;font:700 17px/1.2 'Unbounded','DM Sans',sans-serif;letter-spacing:-.01em}
.si-card.paper .si-head h3{font:800 24px/1.1 'Baloo Bhaijaan 2',sans-serif;color:#e4473c;letter-spacing:0}
.si-card.plain .si-head h3{font:700 17px/1.2 'DM Sans',sans-serif}
.si-round{flex:none;width:38px;height:38px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:inherit;background:rgba(120,130,180,.16)}
.si-card.glass .si-round{background:rgba(255,255,255,.14)}
.si-round svg{width:18px;height:18px}
[dir="rtl"] .si-flip{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}

.si-hint,.si-note,.si-ok,.si-msg,.si-again,.si-more,.si-kid{margin:0}
.si-hint{font-size:14.5px;line-height:1.4;opacity:.9}
.si-card.paper .si-hint{font-size:16px;font-weight:600}
.si-note{padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.4;font-weight:600;background:rgba(90,150,255,.16)}
.si-card.glass .si-note{background:rgba(134,232,255,.16)}
.si-ok{font-size:16px;line-height:1.4;font-weight:600}
.si-msg{padding:9px 12px;border-radius:12px;font-size:14.5px;line-height:1.4;font-weight:600;color:#93201a;background:#fde6e3}
.si-card.glass .si-msg{color:#ffe7e3;background:rgba(255,110,96,.24);border:1px solid rgba(255,150,140,.4)}
.si-again{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

.si-f{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:700}
.si-card.paper .si-f{font-size:15.5px;font-weight:800}
.si-f input{box-sizing:border-box;width:100%;min-width:0;height:48px;padding:0 13px;border-radius:13px;font:500 17px/1 'DM Sans',system-ui,sans-serif;color:inherit;user-select:text;-webkit-user-select:text;
 background:#fff;border:2px solid #c6cbe8;outline:0}
.si-card.glass .si-f input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.si-f input::placeholder{color:currentColor;opacity:.42}
.si-f input:focus-visible,.si-card button:focus-visible,.si-card a:focus-visible,.si-grown:focus-visible,.si-who button:focus-visible,.si-school button:focus-visible{outline:3px solid #ffd34d;outline-offset:2px}
.si-secret{display:flex;align-items:center;gap:10px}
.si-secret input{flex:1}
.si-check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.35;cursor:pointer}
.si-check input{flex:none;width:19px;height:19px;margin:0;accent-color:#2b3bb0}

.si-a{padding:0;border:0;background:none;cursor:pointer;min-height:40px;font:inherit;font-size:14px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}
.si-card.paper .si-a{font-size:15.5px;font-weight:800}
.si-more{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 18px;margin-block:-4px -8px}

.si-go{height:50px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;font:700 16px/1 'DM Sans',system-ui,sans-serif;color:#fff;background:#2b3bb0;box-shadow:0 8px 20px rgba(43,59,176,.3)}
.si-card.glass .si-go{color:#05214a;background:linear-gradient(180deg,#e6fbff,#9ef0ff);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 8px 28px rgba(110,230,255,.4)}
.si-card.paper .si-go{border-radius:16px;font:800 19px/1 'Baloo Bhaijaan 2',sans-serif;background:#e4473c;box-shadow:0 5px 0 #b3322a,0 12px 20px rgba(180,50,42,.3)}
.si-go:disabled{opacity:.5;cursor:default}

/* lists: the classes, the names, the two choices of the grown-ups' corner, a person's pages */
.si-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px;max-height:min(44vh,292px);overflow:auto;overscroll-behavior:contain;padding:2px}
.si-list.col{grid-template-columns:1fr;max-height:none}
.si-item{box-sizing:border-box;min-height:50px;padding:9px 12px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;text-align:center;text-decoration:none;
 font:inherit;font-size:15px;color:inherit;background:#f1f3ff;border:2px solid #dde1f6}
.si-card.glass .si-item{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
.si-item img{width:46px;height:46px}
.si-item b{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.si-item small{font-size:13px;font-weight:500;opacity:.8}
.si-item.two{align-items:flex-start;text-align:start;gap:2px;padding:11px 14px}
.si-item.off{cursor:default;opacity:.62}
.si-kid{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800}
.si-kid img{width:50px;height:50px}

/* the two big picture buttons of the Kindergarten, and Pip */
.si-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.si-big{min-width:0;padding:12px 8px 12px;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:#2b3170;background:#fff;border:3px solid #2f7be0;box-shadow:0 5px 0 #1f5fb8}
.si-big+.si-big{border-color:#3e9150;box-shadow:0 5px 0 #2c6f3b}
.si-big:active{transform:translateY(3px);box-shadow:0 2px 0 #1f5fb8}
.si-big b{font:800 18px/1.15 'Baloo Bhaijaan 2',sans-serif}
.si-pic{width:min(104px,100%);aspect-ratio:1;display:grid;place-items:center}
.si-pic svg,.si-pic img{width:100%;height:auto;display:block}
.si-pip{align-self:center;width:88px;height:88px;padding:0;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:#ffefb0;box-shadow:0 4px 0 #f2c94c}
.si-pip img,.si-pip .pip{display:block;width:74px;height:74px;overflow:visible}
@media (max-height:520px){.si-pic{width:64px}.si-pip{width:60px;height:60px}.si-pip img,.si-pip .pip{width:50px;height:50px}.si-card{gap:9px;padding:12px 16px 14px}.si-where svg{width:120px}}

/* Pip is drawn by kindergarten/kg-pip.js; these few rules move him here (the kindergarten's own style file is not loaded on the
   entrance). Still by default; he breathes, blinks and moves his beak only when motion is welcome. */
.si-pip .pip *{transform-box:view-box}
.si-pip .pp-lid,.si-pip .pp-brow{opacity:0}
.si-pip .pp-mouth{transform-origin:50px 54px;transform:scale(.2);opacity:0}
.si-pip .pp-wing{transition:transform .38s cubic-bezier(.3,1.5,.5,1)}
.si-pip .pp-wing.l{transform-origin:31px 45px}
.si-pip .pp-wing.r{transform-origin:69px 45px}
.si-pip.says .pp-mouth{opacity:1;transform:scale(.9,.95)}
.si-pip.says .pp-beak-b{transform:translateY(3.3px)}
/* he lifts the wing on the side of the button he names (the first button is at the start: left, or right when the page reads from the right) */
.si-card[data-now="0"] .si-pip .pp-wing.l,[dir="rtl"] .si-card[data-now="1"] .si-pip .pp-wing.l{transform:rotate(62deg)}
.si-card[data-now="1"] .si-pip .pp-wing.r,[dir="rtl"] .si-card[data-now="0"] .si-pip .pp-wing.r{transform:rotate(-62deg)}
[dir="rtl"] .si-card[data-now="0"] .si-pip .pp-wing.l,[dir="rtl"] .si-card[data-now="1"] .si-pip .pp-wing.r{transform:none}
/* the button he names lights up; a tapped button answers */
.si-card[data-now="0"] .si-big:first-child,.si-card[data-now="1"] .si-big:last-child{outline:5px solid #ffc83a;outline-offset:3px;background:#fffbe3}
.si-big.tapped{transform:translateY(3px) scale(.95)}
@media (prefers-reduced-motion:no-preference){
 .si-pip .pp-bodyg{transform-origin:50px 88px;animation:siBreathe 3.4s ease-in-out infinite}
 .si-pip .pp-eye{transform-box:fill-box;transform-origin:50% 50%;animation:siBlink 4.8s infinite}
 .si-pip.says .pp-beak-b{animation:siJaw .46s ease-in-out infinite}
 .si-pip.says .pp-mouth{animation:siMouth .46s ease-in-out infinite}
 .si-card[data-now="0"] .si-big:first-child,.si-card[data-now="1"] .si-big:last-child{animation:siNow .55s ease-in-out infinite alternate}
 .si-big{transition:transform .12s}
 @keyframes siBreathe{50%{transform:scale(1.022,.972)}}
 @keyframes siBlink{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
 @keyframes siJaw{0%,100%{transform:translateY(0)}22%{transform:translateY(4.2px)}48%{transform:translateY(1px)}72%{transform:translateY(3.3px)}}
 @keyframes siMouth{0%,100%{transform:scale(.4,.1)}22%{transform:scale(1,1.15)}48%{transform:scale(.6,.35)}72%{transform:scale(.9,.95)}}
 @keyframes siNow{to{transform:translateY(-5px) scale(1.03)}}
}

/* a code is typed into boxes (three of four signs for a card, six for a class); a code is always read from left to right */
.si-boxes{display:flex;gap:8px}
.si-boxes.class{gap:6px}
.si-f .si-box{flex:1 1 0;width:0;height:56px;padding:0;text-align:center;font:700 22px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase}
.si-boxes.class .si-box{letter-spacing:0;text-indent:0;font-size:25px}
.si-card.paper .si-box:focus-visible,.si-card.plain .si-box:focus-visible{border-color:#2f7be0}

/* the drawing of the card, with its code marked */
.si-where{margin:0;display:flex;align-items:center;gap:12px}
.si-where svg{flex:none;width:156px;max-width:46%;height:auto;filter:drop-shadow(0 4px 8px rgba(31,48,90,.2))}
.si-where figcaption{font-size:14.5px;line-height:1.35;font-weight:600}
.si-card.paper .si-where figcaption{font-size:15.5px}
@media (prefers-reduced-motion:no-preference){.si-ring{animation:siRing 1.5s ease-in-out infinite}@keyframes siRing{50%{stroke-width:7;stroke:#ff8a5c}}}

/* "Hello, <name>!" before the Lab opens */
.si-hello{align-items:center;text-align:center;padding:26px 22px 24px;gap:10px}
.si-hello img{width:104px;height:104px}
.si-hello h3{margin:0;font:700 24px/1.25 'Unbounded','DM Sans',sans-serif}
@media (prefers-reduced-motion:no-preference){.si-hello img{animation:siHi .6s cubic-bezier(.3,1.6,.5,1)}@keyframes siHi{from{transform:scale(.4) rotate(-12deg);opacity:0}}}

/* the camera that reads the card */
.si-cam{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#101536}
.si-cam video{display:block;width:100%;height:100%;object-fit:cover}
.si-cam i{position:absolute;inset:14% 20%;border:3px solid rgba(255,255,255,.92);border-radius:16px;box-shadow:0 0 0 999px rgba(8,12,40,.3)}
.si-small{font-size:13px;opacity:.85}
.si-card.paper .si-small{font-size:14px}

/* "Set up this computer": which school */
.si-set{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.si-set legend{padding:0;margin-bottom:6px;font-size:13.5px;font-weight:700}