/* Goal100 film player (g100-film.js). Space is reserved before the script runs: no layout shift.
   Nov 12, 2026 pm (job "film"): role switcher, "Tap for sound" pill, words link under the film, top-layer big mode for iPhone.
   Nov 13, 2026 (job "filmsb"): picture-and-voice version (.g1f-sb) for a device that cannot open the film file. */
[data-g100-film]{position:relative;display:block;width:100%;max-width:960px;margin:18px auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#1E1D6B;box-shadow:0 14px 40px rgba(30,29,107,.22)}
@supports not (aspect-ratio:16/9){[data-g100-film]{height:0;padding-top:56.25%}}
[data-g100-film] video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#1E1D6B;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.g1f-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:84px;min-height:84px;border-radius:999px;border:0;background:#F2A93B;color:#2A1C00;font:800 1.15rem/1.1 'Baloo 2',Lexend,sans-serif;padding:14px 26px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;gap:10px;white-space:nowrap;touch-action:manipulation}
.g1f-big .g1f-tri{font-size:1.6rem;line-height:1}
/* the captions are burned into the bottom of the picture, so the controls sit at the top and fade while the film plays.
   The strip itself never takes a tap: only its buttons do, so a tap between them reaches the picture. */
.g1f-bar{position:absolute;left:0;right:0;top:0;display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:8px 10px;background:linear-gradient(rgba(16,17,38,.6),transparent);flex-wrap:nowrap;transition:background .3s;pointer-events:none}
.g1f-idle .g1f-bar{background:none}
.g1f-idle .g1f-bar button:not(.g1f-snd){opacity:0;pointer-events:none}
.g1f-bar button{pointer-events:auto;transition:opacity .3s;min-width:44px;min-height:44px;border-radius:12px;border:2px solid rgba(255,255,255,.65);background:rgba(30,29,107,.82);color:#fff;font:700 .95rem/1 Lexend,sans-serif;cursor:pointer;padding:0 12px;white-space:nowrap;touch-action:manipulation}
/* "Tap for sound": a clear gold pill at the top left while the film has no sound */
.g1f-bar .g1f-snd{margin-right:auto;border-radius:999px;background:#F2A93B;color:#2A1C00;border-color:#fff;font-weight:800;font-size:1rem;padding:0 16px;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:g1f-pulse 1.8s ease-in-out infinite}
@keyframes g1f-pulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 0 rgba(242,169,59,.75)}60%{box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 10px rgba(242,169,59,0)}}
.g1f-bar button:focus-visible,.g1f-big:focus-visible,.g1f-next:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #2B2A8C}
.g1f-spin{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:5px solid rgba(255,255,255,.35);border-top-color:#F2A93B;animation:g1f-rot .9s linear infinite;pointer-events:none}
@keyframes g1f-rot{to{transform:rotate(360deg)}}
/* "Next: Teachers" chip when a film ends */
.g1f-next{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);min-height:48px;max-width:94%;padding:8px 22px;border-radius:999px;border:2px solid #F2A93B;background:#fff;color:#1E1D6B;font:800 1.05rem/1.1 'Baloo 2',Lexend,sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;touch-action:manipulation;animation:g1f-up .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes g1f-up{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.g1f-hasnext .g1f-big{top:36%}
.g1f-hide{display:none!important}
[data-g100-film]:fullscreen{max-width:none;border-radius:0}
/* ---------- under the film: title and the words link ---------- */
[data-g100-film].g1f-ready{margin-bottom:0}
.g1f-under{max-width:960px;margin:6px auto 18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px}
.g1f-ttl{margin:4px 0 0;flex:1 1 240px;min-width:0;font:800 .98rem/1.3 var(--display,'Baloo 2',sans-serif);color:var(--ink,#16163A)}
.g1f-wlink{min-height:44px;padding:8px 6px;border:0;background:none;color:var(--brand,#2B2A8C);font:700 .95rem/1.25 var(--body,system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:10px;text-align:left;touch-action:manipulation}
.g1f-wlink:focus-visible,.g1f-role:focus-visible,.g1f-wpanel:focus-visible{outline:3px solid var(--brand,#2B2A8C);outline-offset:3px}
.g1f-wpanel{flex:1 1 100%;margin-top:4px;background:var(--card,#fff);color:var(--ink,#16163A);border:2px solid var(--line,#DCDBEE);border-radius:14px;padding:14px 16px;max-height:420px;overflow:auto;font:500 1rem/1.55 var(--body,system-ui,sans-serif);overflow-wrap:anywhere}
.g1f-wpanel h3{margin:0 0 8px;font:800 1.08rem/1.3 var(--display,'Baloo 2',sans-serif)}
.g1f-wpanel p{margin:0 0 6px}
.g1f-wmsg{color:var(--ink2,#55577A)}
/* ---------- above the film: the role switcher ---------- */
.g1f-who{max-width:960px;margin:18px auto 0}
.g1f-who + [data-g100-film]{margin-top:0}
.g1f-ask{margin:0 0 10px;text-align:center;font:800 clamp(1.05rem,3.9vw,1.5rem)/1.25 var(--display,'Baloo 2',sans-serif);color:var(--ink,#16163A)}
.g1f-ask b{display:inline-block;color:var(--brand,#2B2A8C);font-size:1.12em;margin-right:.2em}
.g1f-roles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(5px,1.4vw,14px);padding:6px 5px 12px;--g1f-fs:1em}
.g1f-role{--c:#2B2A8C;--c2:#3F3DB0;--ct:#fff;--cs:#E6E5FA;--cb:#2B2A8C;--cg:rgba(43,42,140,.28);--tr:rgba(255,255,255,.38);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:68px;margin:0;padding:8px 2px 12px;border-radius:16px;border:2px solid var(--cb);
  background:linear-gradient(180deg,var(--card,#fff) 20%,var(--cs));color:var(--ink,#16163A);font:800 clamp(.68rem,2.9vw,1.08rem)/1.1 var(--display,'Baloo 2',sans-serif);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .28s cubic-bezier(.3,1.5,.5,1),box-shadow .28s,background-color .28s,color .2s}
.g1f-ri{display:block;font-size:clamp(1.55rem,6.2vw,2.4rem);line-height:1.1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.g1f-rl{display:block;max-width:100%;white-space:nowrap;overflow:hidden;font-size:var(--g1f-fs,1em);letter-spacing:-.01em}
.g1f-rp{position:absolute;left:14%;right:14%;bottom:5px;height:3px;border-radius:3px;background:var(--tr);overflow:hidden;opacity:0}
.g1f-rp i{display:block;width:100%;height:100%;background:currentColor;border-radius:3px;transform-origin:0 50%;transform:scaleX(var(--g1f-p,0));transition:transform .3s linear}
.g1f-r-students{--c:#F2A93B;--c2:#FFCB6E;--ct:#2A1C00;--cs:#FDF0D8;--cb:#D98E12;--cg:rgba(242,169,59,.42);--tr:rgba(42,28,0,.22)}
.g1f-r-teachers{--c:#B4235A;--c2:#C93A70;--cs:#FCE4EE;--cb:#B4235A;--cg:rgba(180,35,90,.3)}
.g1f-r-families{--c:#0E7C66;--c2:#12917A;--cs:#DDF3EE;--cb:#0E7C66;--cg:rgba(14,124,102,.3)}
.g1f-r-schools{--c:#2B2A8C;--c2:#3F3DB0;--cs:#E6E5FA;--cb:#2B2A8C;--cg:rgba(43,42,140,.3)}
.g1f-r-districts{--c:#6D3BB8;--c2:#8250CC;--cs:#EFE6FB;--cb:#6D3BB8;--cg:rgba(109,59,184,.3)}
@media (hover:hover){.g1f-role:hover{transform:translateY(-3px);box-shadow:0 8px 18px var(--cg)}.g1f-role:hover .g1f-ri{transform:scale(1.12) rotate(-6deg)}}
.g1f-role:active{transform:scale(.96)}
/* the chosen role: filled with its color, a soft glow, a little bigger, a pointer down to the film, and a thin line that fills while its film plays */
.g1f-role.g1f-on{z-index:1;color:var(--ct);border-color:var(--c);background:var(--c) linear-gradient(110deg,var(--c) 0%,var(--c) 36%,var(--c2) 50%,var(--c) 64%,var(--c) 100%) 0 0/280% 100%;transform:scale(1.06);box-shadow:0 0 0 4px var(--cg),0 12px 26px var(--cg);animation:g1f-shine 3.4s linear infinite,g1f-glow 2.4s ease-in-out infinite}
.g1f-role.g1f-on::after{content:"";position:absolute;left:50%;bottom:-9px;width:16px;height:16px;margin-left:-8px;background:var(--c);border-radius:3px;transform:rotate(45deg);z-index:-1}
.g1f-role.g1f-on .g1f-rp{opacity:1}
.g1f-role.g1f-on .g1f-ri{animation:g1f-bob .6s ease-in-out 1}
@keyframes g1f-shine{from{background-position:100% 0}to{background-position:-180% 0}}
@keyframes g1f-glow{0%,100%{box-shadow:0 0 0 4px var(--cg),0 12px 26px var(--cg)}50%{box-shadow:0 0 0 7px var(--cg),0 14px 32px var(--cg)}}
@keyframes g1f-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-7deg)}}
/* entrance: the five buttons pop in one after another the first time they come on screen */
.g1f-pre .g1f-role{opacity:0}
.g1f-in .g1f-role{animation:g1f-pop .55s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes g1f-pop{from{opacity:0;transform:translateY(16px) scale(.86)}to{opacity:1}}
/* the film wears the color of the chosen role */
[data-g100-roles]{transition:box-shadow .3s}
[data-g100-roles][data-g1f-role="students"]{box-shadow:0 0 0 3px #F2A93B,0 14px 40px rgba(30,29,107,.22)}
[data-g100-roles][data-g1f-role="teachers"]{box-shadow:0 0 0 3px #B4235A,0 14px 40px rgba(30,29,107,.22)}
[data-g100-roles][data-g1f-role="families"]{box-shadow:0 0 0 3px #0E7C66,0 14px 40px rgba(30,29,107,.22)}
[data-g100-roles][data-g1f-role="schools"]{box-shadow:0 0 0 3px #2B2A8C,0 14px 40px rgba(30,29,107,.22)}
[data-g100-roles][data-g1f-role="districts"]{box-shadow:0 0 0 3px #6D3BB8,0 14px 40px rgba(30,29,107,.22)}
@media (min-width:700px){.g1f-role{flex-direction:row;gap:10px;min-height:72px;padding:10px 8px 14px}.g1f-ri{font-size:2.1rem}}
@media (max-width:480px){.g1f-ask b{display:block;margin:0 0 1px;font-size:1.3em}.g1f-bar{gap:6px;padding:6px}.g1f-bar button{padding:0 9px;font-size:.85rem}.g1f-bar .g1f-snd{font-size:.92rem;padding:0 12px}[data-g100-film]{border-radius:12px;margin:12px 0}[data-g100-film].g1f-ready{margin-bottom:0}.g1f-who{margin-top:12px}.g1f-role{border-radius:13px}.g1f-under{margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){.g1f-bar,.g1f-bar button,.g1f-role,.g1f-ri,.g1f-rp i,[data-g100-roles]{transition:none!important}.g1f-role,.g1f-role .g1f-ri,.g1f-bar .g1f-snd,.g1f-next,.g1f-spin{animation:none!important}.g1f-role.g1f-on,.g1f-role:hover,.g1f-role:active,.g1f-role:hover .g1f-ri{transform:none}.g1f-pre .g1f-role{opacity:1}}
html.calm .g1f-role,html.calm .g1f-role .g1f-ri,html.calm .g1f-bar .g1f-snd,html.calm .g1f-next,html.calm .g1f-spin,html[data-motion="calm"] .g1f-role,html[data-motion="calm"] .g1f-role .g1f-ri,html[data-motion="calm"] .g1f-bar .g1f-snd,html[data-motion="calm"] .g1f-next,html[data-motion="calm"] .g1f-spin{animation:none!important;transition:none!important}
html.calm .g1f-role.g1f-on,html[data-motion="calm"] .g1f-role.g1f-on{transform:none}
html.calm .g1f-pre .g1f-role,html[data-motion="calm"] .g1f-pre .g1f-role{opacity:1}
/* dark look: softer button backgrounds, lighter borders */
@media (prefers-color-scheme:dark){[data-g100-film]{box-shadow:0 14px 40px rgba(0,0,0,.5)}
  :root:not([data-theme="light"]) .g1f-r-students{--cs:#3A2D12;--cb:#F6BE5E}:root:not([data-theme="light"]) .g1f-r-teachers{--cs:#3D1A2A;--cb:#FF8FB8}:root:not([data-theme="light"]) .g1f-r-families{--cs:#123A33;--cb:#5ED3B8}:root:not([data-theme="light"]) .g1f-r-schools{--cs:#25265A;--cb:#A9A6FF}:root:not([data-theme="light"]) .g1f-r-districts{--cs:#2E1F45;--cb:#C9A6FF}
  :root:not([data-theme="light"]) .g1f-role.g1f-on{border-color:var(--c2)}}
:root[data-theme="dark"] .g1f-r-students{--cs:#3A2D12;--cb:#F6BE5E}:root[data-theme="dark"] .g1f-r-teachers{--cs:#3D1A2A;--cb:#FF8FB8}:root[data-theme="dark"] .g1f-r-families{--cs:#123A33;--cb:#5ED3B8}:root[data-theme="dark"] .g1f-r-schools{--cs:#25265A;--cb:#A9A6FF}:root[data-theme="dark"] .g1f-r-districts{--cs:#2E1F45;--cb:#C9A6FF}
:root[data-theme="dark"] .g1f-role.g1f-on{border-color:var(--c2)}
/* ---------- "big mode" (no Fullscreen API: iPhone). In the browser's top layer when the Popover API exists; else a fixed overlay. ---------- */
[data-g100-film].g1f-over{position:fixed;inset:0;top:0;left:0;z-index:2147483000;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;aspect-ratio:auto;background:#000;box-shadow:none;overflow:hidden;touch-action:none;overscroll-behavior:contain}
[data-g100-film].g1f-over::backdrop{background:#000}
[data-g100-film].g1f-over video,[data-g100-film]:fullscreen video{background:#000}
[data-g100-film]:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;margin:0;background:#000;box-shadow:none}
.g1f-ph{display:block;width:100%;max-width:960px;margin:0 auto}
html.g1f-lock,body.g1f-lock{overflow:hidden}
.g1f-over .g1f-bar{padding-top:max(8px,env(safe-area-inset-top));padding-right:max(10px,env(safe-area-inset-right));padding-left:max(10px,env(safe-area-inset-left))}
.g1f-over .g1f-next{bottom:max(6%,env(safe-area-inset-bottom))}

/* ---------- picture-and-voice version (Nov 13, 2026, job "filmsb"): the same film as pictures + voice, for a device that cannot open the film file ---------- */
.g1f-sb{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:#1E1D6B;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* two layers: the new picture fades in on top, the one before stays under it until the fade is done (no dark flash between pictures) */
.g1f-sb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block;border:0;opacity:0;z-index:1;pointer-events:none;transition:opacity 0s linear .5s}
.g1f-sb img.g1f-on{opacity:1;z-index:2;transition:opacity .45s ease}
.g1f-sb.g1f-sbw{background:transparent}
[data-g100-film].g1f-over .g1f-sb,[data-g100-film]:fullscreen .g1f-sb{background:#000}
@media (prefers-reduced-motion:reduce){.g1f-sb img,.g1f-sb img.g1f-on{transition:none!important}}
html.calm .g1f-sb img,html[data-motion="calm"] .g1f-sb img{transition:none!important}
/* small line under the film: "Picture version of this film" (quiet), or the note when a device could not show the film at all */
.g1f-diag{flex:1 1 100%;margin:4px 0 0;font:500 .85rem/1.4 var(--body,Lexend,system-ui,sans-serif);color:var(--ink2,#4a4a6a);overflow-wrap:anywhere}
.g1f-diag a{color:var(--brand,#2B2A8C);font-weight:700;display:inline-block;min-height:44px;padding:11px 0;text-underline-offset:3px}
.g1f-diag a:focus-visible{outline:3px solid var(--brand,#2B2A8C);outline-offset:3px;border-radius:6px}
.g1f-diag .g1f-code{font:500 .78rem/1.35 ui-monospace,Menlo,Consolas,monospace}