/* 4P3X SafeSpark™ production polish layer — additive only. */
:root{scroll-padding-top:84px;}
html{font-size:16px;}
body{min-height:100dvh;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(255,214,99,.95);outline-offset:4px;border-radius:12px;}
.roleButton,.btn,a,button{touch-action:manipulation;}
.roleCard,.rolePanel,.panel{overflow-wrap:anywhere;}
.fullRoleLessonGrid{align-items:stretch;}
.fullRoleLessonCard{display:flex;flex-direction:column;gap:.75rem;}
.fullRoleLessonCard .fullRoleLessonActions{margin-top:auto;}
.fullRoleLessonCard h3{line-height:1.2;}
.scopeNotice,.roleMini,.smallNote{line-height:1.55;}
img{max-width:100%;height:auto;}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:9999;background:#111;color:#fff;padding:.7rem 1rem;border:2px solid #ffd663;border-radius:12px;}
[data-guide-active="true"],.guided-next-active,.safeSparkNextStepGlow{box-shadow:0 0 0 3px rgba(255,214,99,.72),0 0 28px rgba(122,92,255,.45)!important;position:relative;}
.safeSparkGuidePanel,.guidedNextStepPanel,#safeSparkGuidePanel,#guidedNextStepPanel{display:none!important;}
.safeSparkNextArrow{position:absolute;pointer-events:none;z-index:20;font-size:1.1rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}}
@media (max-width:760px){.roleGrid.three,.grid.three{grid-template-columns:1fr!important}.roleCleanTop,.topbar{gap:.6rem}.roleCleanTopActions,.actions,.roleActions{flex-wrap:wrap}.roleButton,.btn{min-height:44px}.roleMain{padding-left:1rem;padding-right:1rem}}


/* Platform Perfection accessibility and private-admin layer — 2026-07-11 */
:root{color-scheme:dark;}
.visuallyHidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.adminAccessGate{min-height:100dvh;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);background:radial-gradient(circle at top,rgba(110,77,255,.18),transparent 42%),#080808;}
.adminAccessCard{width:min(620px,100%);padding:clamp(1.15rem,4vw,2rem);border-radius:28px;border:1px solid rgba(255,214,99,.32);background:linear-gradient(145deg,rgba(255,214,99,.08),rgba(120,87,255,.09),rgba(28,96,72,.08));box-shadow:0 24px 70px rgba(0,0,0,.42);}
.adminAccessCard>img{width:72px;height:72px;object-fit:contain;margin-bottom:.75rem;}
.adminAccessCard .formPanel{margin-block:1rem;}
.adminAccessCard [data-tone="warn"]{border-color:rgba(255,157,157,.45);color:#ffd4d4;}
.adminAccessCard [data-tone="good"]{border-color:rgba(121,255,194,.42);color:#caffdf;}
html{overflow-x:hidden;}
body{overflow-x:hidden;}
input,select,textarea,button{font:inherit;}
textarea{resize:vertical;}
@media (forced-colors:active){.roleButton,.btn,button,a:focus-visible{forced-color-adjust:auto}.roleCard,.rolePanel,.panel{border:1px solid CanvasText}}
@media (max-width:480px){.roleMain,main{max-width:100%;}.roleButton,.btn{max-width:100%;white-space:normal;text-align:center}.landingWelcomeTitle{overflow-wrap:anywhere}.roleCleanBrand small,.brand small{line-height:1.25}}

/* VexSpark™ proportion and cross-page alignment repair — 2026-07-11 */
:root{
  --safe-page-width:1220px;
  --safe-page-edge:1rem;
}

/* Keep the public page shells on one consistent centre line. */
body > main:not(.displayApp){
  width:min(var(--safe-page-width),calc(100% - 2rem));
  margin-inline:auto;
}
body > main.demoDirectorMain{width:min(1320px,calc(100% - 2rem));}
body > main.securityModelMain{width:min(1240px,calc(100% - 2rem));}
body > main.schoolOpsMain{width:min(1240px,calc(100% - 2rem));}
.roleFooter{width:min(var(--safe-page-width),calc(100% - 2rem));}

/* Prevent grid and flex children from forcing sections out of alignment. */
.hero > *,
.pageHero > *,
.roleHero > *,
.grid > *,
.roleGrid > *,
.split > *,
.demoDirectorLayout > *,
.demoDirectorStageGrid > *{min-width:0;}
.actions,.roleActions,.heroActions,.roleCleanTopActions{max-width:100%;}
.panel,.sparkCard,.rolePanel,.roleCard,.heroText,.pageHero > div{overflow-wrap:anywhere;}

/*
  The VexSpark™ source artwork is 1024 × 1536 (2:3 portrait).
  Never force it into a square, 3:4 crop or fixed-height frame.
*/
img[src*="assets/vexspark/"]{
  display:block;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:2 / 3!important;
  object-fit:contain!important;
  object-position:center!important;
  flex-shrink:0;
}
.vexsparkAvatar{
  width:min(100%,240px)!important;
  max-width:240px!important;
  height:auto!important;
  aspect-ratio:2 / 3!important;
  object-fit:contain!important;
}
.vexsparkAvatar.small{width:min(100%,145px)!important;max-width:145px!important;}
.vexsparkAvatar.wide{aspect-ratio:2 / 3!important;object-fit:contain!important;}
.vexsparkMiniRow{align-items:center;min-width:0;}
.vexsparkMiniRow img{
  width:72px!important;
  max-width:72px!important;
  height:auto!important;
  aspect-ratio:2 / 3!important;
  object-fit:contain!important;
  border-radius:18px;
}
.childShell .vexsparkMiniRow img{width:80px!important;max-width:80px!important;}
.roleMascot{
  width:120px!important;
  max-width:120px!important;
  height:auto!important;
  aspect-ratio:2 / 3!important;
  object-fit:contain!important;
}
.roleMascot.small{width:78px!important;max-width:78px!important;height:auto!important;}
.roleHomeCard img[src*="assets/vexspark/"]{width:70px!important;max-width:70px!important;height:auto!important;}
.pupilLoginCard .roleMascot{
  width:82px!important;
  max-width:82px!important;
  height:auto!important;
  object-fit:contain!important;
  border-radius:18px;
}
.rolePortalHeader .roleMascot{align-self:flex-start;}
.demoDirectorStartPanel .roleMascot{width:100px!important;max-width:100px!important;height:auto!important;}
.teacherFullStage .vexsparkAvatar,.pupilFullStage .vexsparkAvatar{max-height:none!important;}

/* Balanced page spacing on phones, tablets and wide displays. */
@media (max-width:900px){
  body > main:not(.displayApp),
  body > main.demoDirectorMain,
  body > main.securityModelMain,
  body > main.schoolOpsMain,
  .roleFooter{width:min(100% - 2rem,var(--safe-page-width));}
  body > main.roleMain{padding-left:0;padding-right:0;}
  .roleMascot{width:96px!important;max-width:96px!important;height:auto!important;}
  .rolePortalHeader .roleMascot{width:64px!important;max-width:64px!important;height:auto!important;}
  .vexsparkAvatar{width:min(100%,190px)!important;max-width:190px!important;}
}
@media (max-width:480px){
  body > main:not(.displayApp),
  body > main.demoDirectorMain,
  body > main.securityModelMain,
  body > main.schoolOpsMain,
  .roleFooter{width:calc(100% - 1.5rem);}
  .vexsparkMiniRow{gap:.65rem;}
  .vexsparkMiniRow img{width:60px!important;max-width:60px!important;}
  .childShell .vexsparkMiniRow img{width:68px!important;max-width:68px!important;}
  .roleMascot{width:82px!important;max-width:82px!important;}
  .vexsparkAvatar{width:min(100%,160px)!important;max-width:160px!important;}
}