:root{--ev-bg:var(--edu-admin-bg,#edf5fa);--ev-text:var(--edu-admin-ink,#142c46);--ev-muted:var(--edu-admin-muted,#638098);--ev-surface:var(--edu-admin-surface,#fff);--ev-primary:var(--edu-admin-primary,#0874b8);--ev-primary-text:var(--edu-admin-primary-text,#fff);--ev-secondary:var(--edu-admin-secondary,#e5f0f4);--ev-secondary-text:var(--edu-admin-secondary-text,#16506c);--ev-accent:var(--edu-admin-accent,#00a995);--ev-border:var(--edu-admin-border,#dce8ef);--ev-control-radius:var(--edu-admin-control-radius,10px);--ev-card-radius:var(--edu-admin-card-radius,20px);--ev-control-height:var(--edu-admin-control-height,40px)}
/* Kiosk layout only. Colors and component skins belong to eduvize-styly. */
:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ev-text)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--ev-bg)}
.wrap{width:100%;height:var(--kiosk-visual-height,100dvh);min-height:0;display:flex;flex-direction:column;gap:var(--kiosk-space,clamp(12px,2vmin,24px));padding:clamp(6px,1vmin,14px)}
body.embedded-subpage .wrap{padding:0;gap:8px}
.wrap>header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none;position:relative;z-index:30;margin:0}
#fullscreen{display:none}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hero{flex:none;display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 12px;text-align:center;padding:clamp(8px,1.5vmin,20px);border-radius:var(--ev-card-radius);background:var(--ev-primary);color:var(--ev-primary-text);min-width:0}
.hero h2{margin:0;font-size:clamp(14px,2.3vmin,30px);line-height:1.15}.hero p{margin:0;font-size:clamp(10px,1.4vmin,17px);line-height:1.2}
.grid{display:grid;flex:1;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(4px,1vmin,12px);overflow:auto}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;min-width:0;min-height:0;cursor:pointer;text-align:center}
.tile strong{font-size:clamp(12px,2vmin,22px);line-height:1.15;overflow-wrap:anywhere;max-width:100%}.tile small{display:none}
.app-icon{display:grid;place-items:center;width:clamp(28px,6vmin,70px);height:clamp(28px,6vmin,70px);padding:5px;flex-shrink:0}.app-icon svg{width:100%;height:100%;display:block}
#contentFrame{flex:1;width:100%;min-height:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent}
.hidden{display:none!important}
body.frame-open:not(.menu-layout) .hero,body.frame-open:not(.menu-layout) #tiles{display:none}
/* Home tracks: status height is independent of tile height. */
body:is(.menu-layout,.tiles-home) .wrap{display:grid;gap:clamp(4px,1vmin,12px);grid-template-columns:minmax(0,var(--menu-side,240px)) minmax(0,1fr);grid-template-rows:var(--status-band,90px) minmax(0,1fr)}
body:is(.menu-layout,.tiles-home) .wrap>header{display:none}
#statusPanel{flex:none;align-self:stretch;--edu-status-height:var(--status-band,90px)}
body.menu-layout #statusPanel{grid-column:2;grid-row:1}
body.menu-layout #tiles{grid-column:1;grid-row:1/-1;grid-template-columns:repeat(var(--menu-cols,2),minmax(0,1fr));grid-template-rows:repeat(var(--menu-rows,5),minmax(0,1fr));padding:0;overflow:hidden}
body.menu-layout #contentFrame{grid-column:2;grid-row:2;width:100%;height:100%}
body:is(.menu-layout,.tiles-home) #tiles .tile{container-type:size;--tile-icon-size:48cqmin;display:grid;grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:0;padding:0;overflow:hidden}
body:is(.menu-layout,.tiles-home) #tiles .tile .app-icon{width:var(--tile-icon-size);height:var(--tile-icon-size);aspect-ratio:1;padding:3px;margin-bottom:calc(var(--tile-icon-size)*.12);align-self:center}
body:is(.menu-layout,.tiles-home) #tiles .tile strong{width:82%;max-width:82%;justify-self:center;text-align:center;text-wrap:balance;font-size:max(5px,calc(var(--tile-icon-size)*.22));line-height:1.15;font-weight:400}
body.menu-layout.menu-right .wrap{grid-template-columns:minmax(0,1fr) minmax(0,var(--menu-side,240px))}
body.menu-layout.menu-right #tiles{grid-column:2}
body.menu-layout.menu-right :is(#statusPanel,#contentFrame){grid-column:1}
body.menu-layout.menu-top .wrap{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:var(--status-band,90px) minmax(0,1fr)}
body.menu-layout.menu-top #tiles{grid-column:1/8;grid-row:1}
body.menu-layout.menu-top #statusPanel{grid-column:8/11;grid-row:1}
body.menu-layout.menu-top #contentFrame{grid-column:1/-1;grid-row:2}
body.menu-layout.menu-bottom .wrap{grid-template-columns:1fr;grid-template-rows:var(--status-band,90px) minmax(0,1fr) var(--menu-band,100px)}
body.menu-layout.menu-bottom #statusPanel{grid-column:1;grid-row:1}
body.menu-layout.menu-bottom #tiles{grid-column:1;grid-row:3}
body.menu-layout.menu-bottom #contentFrame{grid-column:1;grid-row:2}
body.tiles-home .wrap{grid-template-columns:1fr;grid-template-rows:var(--status-band,90px) minmax(0,1fr)}
body.tiles-home #statusPanel{grid-column:1;grid-row:1}
body.tiles-home #tiles{width:100%;height:100%;grid-column:1;grid-row:2;grid-template-columns:repeat(var(--home-cols,4),minmax(0,1fr));grid-template-rows:repeat(var(--home-rows,2),minmax(0,1fr))}
body.tiles-home #contentFrame{grid-column:1;grid-row:2;height:100%}
body.tiles-home.frame-open .wrap{grid-template-rows:auto minmax(0,1fr)}
body.tiles-home.frame-open .wrap>header{display:flex;grid-column:1;grid-row:1}
body.tiles-home.frame-open #navigationHeading{display:none}
@media(orientation:portrait){
 body.menu-layout .wrap{grid-template-rows:var(--status-band,90px) minmax(0,1fr)}
 body.menu-layout #statusPanel,body.menu-layout.menu-right #statusPanel{grid-column:1/-1;grid-row:1}
 body.menu-layout #tiles,body.menu-layout.menu-right #tiles{grid-row:2}
 body.menu-layout.menu-top .wrap{grid-template-columns:1fr;grid-template-rows:var(--status-band,90px) calc(var(--menu-band,80px)*2 + clamp(4px,1vmin,12px)) minmax(0,1fr)}
 body.menu-layout.menu-top #statusPanel{grid-column:1;grid-row:1}
 body.menu-layout.menu-top #tiles{grid-column:1;grid-row:2}
 body.menu-layout.menu-top #contentFrame{grid-column:1;grid-row:3}
 body.menu-layout.menu-bottom .wrap{grid-template-columns:1fr;grid-template-rows:var(--status-band,90px) minmax(0,1fr) calc(var(--menu-band,80px)*2 + clamp(4px,1vmin,12px))}
 body.menu-layout.menu-bottom #statusPanel{grid-column:1;grid-row:1}
 body.menu-layout.menu-bottom #tiles{grid-row:3}
}
@media(max-width:600px){body:not(.menu-layout):not(.tiles-home) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Eduvize touch keyboard v20261027-6 */#touchKeyboard{position:fixed;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(96vw,940px);z-index:9999;background:var(--ev-secondary);border:1px solid var(--ev-border);border-radius:18px;padding:12px;box-shadow:0 12px 40px #0003;display:none;touch-action:manipulation}#touchKeyboard.visible{display:block}#touchKeyboard .kb-row{display:flex;justify-content:center;gap:clamp(3px,.6vw,8px);margin:5px 0}#touchKeyboard button{min-width:0;flex:1;min-height:clamp(34px,5.5vh,55px);border:1px solid var(--ev-border);border-radius:8px;background:var(--ev-surface);color:var(--ev-text);font-size:clamp(14px,2vw,23px);font-weight:700;cursor:pointer}#touchKeyboard button.kb-special{background:var(--ev-secondary)}#touchKeyboard button.kb-wide{flex:4}body.keyboard-open .wrap{padding-bottom:clamp(190px,33vh,330px)}body.keyboard-open #contentFrame{min-height:0}body.segment-mode.keyboard-open .wrap{padding-bottom:clamp(150px,35cqh,320px)}@media(max-height:550px){#touchKeyboard{padding:5px}#touchKeyboard button{min-height:30px}#touchKeyboard .kb-row{margin:2px 0}}
/* Scale only embedded content, keeping the kiosk navigation at 100%. */body.frame-open .wrap{position:relative}body.frame-open.zoom-frame #contentFrame{position:absolute;left:max(10px,env(safe-area-inset-left));top:var(--embedded-top,70px);width:calc((100% - 20px)/var(--embedded-scale,1));height:calc((var(--kiosk-visual-height,100dvh) - var(--embedded-top,70px) - 12px)/var(--embedded-scale,1));max-width:none;max-height:none;min-height:0;flex:none;transform:scale(var(--embedded-scale,1));transform-origin:top left}
.wrap>header .edu-navigation-heading{min-width:0;flex:1}
.wrap>header .toolbar{flex-shrink:0;margin-left:auto}
body.frame-open #pageContent{display:none}
body:not(.menu-layout) .hero{display:none}

/* Custom pages use the same header roles and skin as embedded applications. */
body.subpage .wrap>.edu-output-header{display:flex!important;justify-content:space-between}
body.subpage #navigationHeading{display:block!important;min-width:0;flex:1;background:transparent;color:inherit;padding:0;border:0;border-radius:0}
body.subpage #navigationHeading .edu-header-title{color:inherit;margin:0!important}
body.subpage #navigationHeading .edu-header-meta{color:inherit;margin:0!important}
body.subpage #navigationHeading .edu-header-meta[hidden]{display:none!important}
body.embedded-subpage #navigationActions{display:none!important}

/* Kiosk visual refinement 20261101-1. Scoped to kiosk; web and other apps keep their skin. */
html[data-kiosk-app="kiosk"]:not(.web-output) #tiles .ev-app-tile .app-icon{
 background:transparent!important;color:var(--ev-secondary)!important;
 border:0!important;box-shadow:none!important;
}
html[data-kiosk-app="kiosk"]:not(.web-output) #tiles .ev-app-tile.active .app-icon{
 color:var(--ev-secondary-text)!important;
}
/* Double only the menu/content separation, preserving gaps inside the menu. */
html[data-kiosk-app="kiosk"]:not(.web-output) body.menu-layout:not(.menu-top):not(.menu-bottom) .wrap{
 column-gap:calc(clamp(4px,1vmin,12px)*2);
}
html[data-kiosk-app="kiosk"]:not(.web-output) body.menu-layout:is(.menu-top,.menu-bottom) .wrap{
 row-gap:calc(clamp(4px,1vmin,12px)*2);
}
/* Light title surfaces for custom pages and school identity; retain theme text contrast. */
html[data-kiosk-app="kiosk"]:not(.web-output) body.subpage .wrap>.edu-output-header,
html[data-kiosk-app="kiosk"]:not(.web-output) .school-intro.edu-content-heading{
 background:var(--ev-surface)!important;color:var(--ev-text)!important;
}

/* Zoomed websites fill their assigned content track, including the full width.
   Keep the iframe in the grid: absolute offsets were based on the whole kiosk. */
body.menu-layout.frame-open.zoom-frame #contentFrame{
 position:static;left:auto;top:auto;
 width:calc(100% / var(--embedded-scale,1));
 height:calc(100% / var(--embedded-scale,1));
 align-self:start;justify-self:start;
}


/* The kiosk returns home from a bottom row; application headings contain no kiosk controls. */
.kiosk-navigation{display:flex;justify-content:center;align-items:center;flex:0 0 auto;padding:clamp(4px,.6vmin,10px) 0}
.kiosk-navigation[hidden],.kiosk-navigation.hidden{display:none!important}
html[data-kiosk-app="kiosk"][data-output-mode] #navigationActions #home{
 display:inline-flex!important;align-items:center;justify-content:center;gap:.4em;
 box-sizing:border-box!important;width:auto!important;min-width:var(--edu-navigation-size,44px)!important;
 height:var(--edu-navigation-size,44px)!important;min-height:var(--edu-navigation-size,44px)!important;
 flex:0 0 auto!important;padding:0 .8em!important;
 font-size:max(16px,calc(var(--edu-navigation-size,44px)*.4))!important;line-height:1.2!important;
 border-radius:var(--ev-control-radius)!important;
 background:var(--ev-secondary);color:var(--ev-secondary-text);
}
html[data-kiosk-app="kiosk"][data-output-mode] #navigationActions #home svg{width:1.35em;height:1.35em;flex:none}
html[data-kiosk-app="kiosk"] body.frame-open .wrap>.edu-content-navigation,html[data-kiosk-app="kiosk"] body.frame-open #schoolContent{display:none!important}
body.tiles-home.frame-open .wrap{grid-template-rows:minmax(0,1fr) auto}
body.tiles-home.frame-open #contentFrame{grid-column:1;grid-row:1}
body.tiles-home.frame-open #navigationActions{grid-column:1;grid-row:2}


/* A single, icon-only home anchor stays at the lower left. */
html[data-kiosk-app="kiosk"]:not(.web-output) .kiosk-navigation{justify-content:flex-start}
html[data-kiosk-app="kiosk"][data-output-mode] #navigationActions #home{width:var(--edu-navigation-size)!important;padding:0!important}
/* External sites retain their own design viewport and fill the content track. */
body.frame-open.zoom-frame #contentFrame{position:static;left:auto;top:auto;align-self:start;justify-self:start;transform-origin:top left;width:calc(100% / var(--embedded-scale,1));height:calc(100% / var(--embedded-scale,1))}