/* A daylight classroom around the canonical lesson. Game renderers keep their own palette. */
.approved-display[data-surface="lesson"]{
  --classroom-ink:#17324f;--classroom-muted:#526b82;--classroom-blue:#245caa;
  --classroom-line:#c5d8eb;--display-head:64px;--display-foot:42px;
  height:calc(100dvh - var(--smartboard-space,0px));min-height:0;
  background:
    radial-gradient(circle at 3% 48%,#fff9dc 0 28px,transparent 29px),
    radial-gradient(circle at 96% 82%,#8cd9d959 0 100px,transparent 101px),
    radial-gradient(circle at 92% 12%,#b9a9f54a 0 140px,transparent 141px),
    radial-gradient(circle,#517bc51a 1px,transparent 1.8px) 8px 8px/22px 22px,
    linear-gradient(125deg,#d6e3ff,#d9effa 55%,#d7f1eb);
  color:var(--classroom-ink)
}
body:has(.approved-display[data-surface="lesson"]:not([hidden])){background:#dcecff}
.approved-display[data-surface="lesson"]::before{display:none}
body.has-smartboard-controls{--smartboard-space:var(--smartboard-controls-height,76px)}
.approved-display[data-surface="lesson"].has-guide{--display-foot:76px}
.approved-display[data-surface="lesson"].is-instruction{--display-foot:76px}
.approved-display[data-surface="lesson"].is-embed{--display-foot:0px}
.approved-display[data-mode="route"]:not(.has-guide){--display-foot:0px}
.approved-display[data-mode="route"]:not(.has-guide) .d-foot{display:none}
.approved-display[data-surface="lesson"] .d-head{
  height:var(--display-head);min-height:0;padding:0 24px;gap:16px;
  border:0;background:linear-gradient(110deg,#294eaa,#276b91);color:#e5f2ff;box-shadow:0 3px 0 #ffffffa6
}
.approved-display[data-surface="lesson"] .d-brand{gap:8px;font-size:12px}
.approved-display[data-surface="lesson"] .d-brand>strong{color:#fff;letter-spacing:.12em}
.approved-display[data-surface="lesson"] .d-kairos-logo{width:36px;height:36px}
.approved-display[data-surface="lesson"] .d-step{justify-content:flex-start;gap:10px}
.approved-display[data-surface="lesson"] .d-hito{
  width:32px;height:32px;border:0;background:#ffe39b;color:#243e70;box-shadow:none;animation:none;font-size:15px
}
.approved-display[data-surface="lesson"] .d-step>b{padding:6px 12px;border:1px solid #a4dcd4;background:#d7f6eb;color:#145e58;font-size:14px;max-width:100%;box-shadow:0 2px 0 #102f6b2b}
.approved-display[data-surface="lesson"] .d-path li{border-color:#96b4d3}
.approved-display[data-surface="lesson"] .d-path li.is-now{background:#245caa;border-color:#245caa;box-shadow:none}
.approved-display[data-surface="lesson"] .d-path li.is-done{background:#087f77;border-color:#087f77}
.approved-display[data-surface="lesson"] #displayLesson{color:#edf7ff;font-size:14px;max-width:28%}
.approved-display[data-surface="lesson"] .d-school{position:static;transform:none;width:36px;height:36px;flex:none}
.approved-display[data-surface="lesson"] #screen.d-main{padding:clamp(16px,2.2vw,34px);gap:0;overflow:hidden}
.approved-display[data-surface="lesson"] #screen>section{
  height:100%;min-height:0!important;max-height:none;width:100%;border-radius:clamp(20px,2.5vw,32px)!important;
  box-shadow:0 6px 0 #6b99cb38,0 16px 32px #305c9221;border:3px solid #ffffffd9
}
.approved-display[data-surface="lesson"] #screen>.slide:not(.theme-workbook){background-color:#173d63}
.approved-display[data-surface="lesson"] #screen>.slide.is-piece{background:#f8fbff;color:var(--classroom-ink);padding:clamp(14px,2vw,32px);gap:10px}
.approved-display[data-surface="lesson"] .slide.is-piece>.kicker{color:var(--classroom-blue)}
.approved-display[data-surface="lesson"] .slide.is-piece .piece-stage{border:0;box-shadow:none;padding:clamp(12px,1.5vw,28px);border-radius:12px}
.approved-display[data-surface="lesson"] #screen>.slide.authored{padding:clamp(20px,3vh,48px) clamp(24px,4vw,90px)}
.approved-display[data-surface="lesson"] #screen>.rv:not(.rv-map){background:#173d63}
/* Useful information gets a line, rather than a full-width dark stage of its own. */
.approved-display[data-surface="lesson"] .d-foot{
  height:var(--display-foot);min-height:0;max-height:var(--display-foot);margin:0;
  padding:6px 24px!important;gap:12px;border:0;background:transparent;color:var(--classroom-muted)
}
.approved-display[data-surface="lesson"] .d-status{padding:0;margin-left:auto;gap:16px}
.approved-display[data-surface="lesson"] .d-clock{font-size:14px;font-weight:600;color:#345777;padding:4px 10px;border:1px solid #ffffffd9;border-radius:999px;background:#ffffff80;font-variant-numeric:tabular-nums}
.approved-display[data-surface="lesson"] .d-code{padding:4px 10px;background:#ffffff80;border-color:var(--classroom-line);font-size:11px;color:var(--classroom-muted)}
.approved-display[data-surface="lesson"] .d-code b{font-size:16px;color:var(--classroom-ink)}
.approved-display[data-surface="lesson"] .coach{gap:10px}
.approved-display[data-surface="lesson"] #displayGuideFace{width:44px;height:44px;border-color:#a4b9e0;background:#fff}
.approved-display[data-surface="lesson"] #displayGuideName{color:#28527b;font-size:12px;margin-bottom:2px}
.approved-display[data-surface="lesson"] #displayGuideText{color:var(--classroom-ink);font-size:clamp(15px,1.4vw,24px);line-height:1.3}
.approved-display[data-surface="lesson"].is-instruction #displayGuideName{color:#14645f;font-size:11px}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu{bottom:calc(var(--smartboard-space,0px) + 5px);right:12px}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu>button{width:32px;min-height:32px;height:32px;border-color:#afc6db;background:#eff7ff;color:#17324f;font-size:20px}
.approved-display[data-surface="lesson"] .d-status{padding-right:32px}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .voice-toggle{position:static;max-width:none;min-height:44px;padding:8px 14px;border-color:#a6c7dc;background:#f6fbff;color:#17324f;box-shadow:none;font-size:14px}
/* The class route keeps the night sky; the active station reads as the lit stage. */
.approved-display[data-surface="lesson"] #screen>.rv-map{
  background:
    radial-gradient(circle at 8% 15%,#bed8ff80 0 1px,transparent 2px),
    radial-gradient(circle at 67% 18%,#f8dfa680 0 1px,transparent 2px),
    radial-gradient(circle at 83% 72%,#bed8ff70 0 1px,transparent 2px),
    radial-gradient(circle at 40% 84%,#f8dfa670 0 1px,transparent 2px),
    radial-gradient(ellipse at 82% 8%,#286b8f55,transparent 42%),
    radial-gradient(ellipse at 14% 82%,#34347880,transparent 50%),
    linear-gradient(145deg,#10243f,#141d3c 55%,#101830);
  background-size:190px 170px,250px 230px,310px 280px,360px 330px,auto,auto,auto;
  padding:clamp(16px,2vw,32px);gap:14px;color:#edf5ff;border-color:#607aa4!important;
  box-shadow:inset 0 0 0 1px #a8c5ea26,0 22px 50px #0a1c4660!important
}
.approved-display[data-surface="lesson"] .rv-map .rv-head{align-items:center;gap:16px}
.approved-display[data-surface="lesson"] .rv-map .rv-headline{display:flex;align-items:center;gap:14px}
.approved-display[data-surface="lesson"] .rv-map .rv-eyebrow{color:#9fcbdc;font-size:11px;letter-spacing:.13em;margin:0}
.approved-display[data-surface="lesson"] .rv-map .rv-title{font-size:clamp(22px,2vw,36px);color:#f7f4ff;margin:0;line-height:1.15}
.approved-display[data-surface="lesson"] .rv-map .rv-title-icon{font-size:24px}
.approved-display[data-surface="lesson"] .rv-map .rv-clock{font-size:clamp(28px,2.5vw,44px);color:#e7d39d;line-height:1}
.approved-display[data-surface="lesson"] .rv-map .rv-clock.is-over{color:#ffb7a5}
.approved-display[data-surface="lesson"] .rv-map .rv-clock-wrap small{font-size:10px;color:#bfd0e5;letter-spacing:.06em}
.approved-display[data-surface="lesson"] .rv-map .rv-entry{gap:20px;align-items:center;margin:0}
.approved-display[data-surface="lesson"] .rv-map .rv-entry-title{color:#f7f4ff;font-size:clamp(26px,3.3vw,64px);line-height:1.08;letter-spacing:-.025em;max-width:22em}
.approved-display[data-surface="lesson"] .rv-map .rv-entry-unit{color:#e7d39d;font-size:clamp(11px,1vw,18px);letter-spacing:.08em;margin-top:8px}
.approved-display[data-surface="lesson"] .rv-map .rv-entry-goals-title{color:#14645f;font-size:11px}
.approved-display[data-surface="lesson"] .rv-map .rv-entry-goals{background:#eaf6f2;border-color:#b6dcd2;padding:12px 16px;border-radius:14px}
.approved-display[data-surface="lesson"] .rv-map .rv-entry-goals li{color:#1d4e48;font-size:clamp(14px,1.3vw,24px);font-weight:600;line-height:1.35}
.approved-display[data-surface="lesson"] .rv-map .rv-entry-goals li::before{color:#14645f}
.approved-display[data-surface="lesson"] .rv-map .rv-building{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.approved-display[data-surface="lesson"] .rv-map .rv-roof{display:none}
.approved-display[data-surface="lesson"] .rv-map .rv-floor{display:grid;flex:1;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:0;overflow:auto;border-radius:0;background:none;box-shadow:none}
.approved-display[data-surface="lesson"] .rv-map .rv-room{border:1px solid #8096c45c;border-radius:14px;background:#1b2b50d9;color:#dce8fa;box-shadow:none}
.approved-display[data-surface="lesson"] .rv-map .rv-room.is-current{grid-column:1/-1;grid-row:1;min-height:0;padding:14px;gap:12px;justify-content:flex-start;border:2px solid #dfc789;background:linear-gradient(120deg,#203a66,#172d53)}
.approved-display[data-surface="lesson"] .rv-map .rv-room:not(.is-current){min-height:68px;padding:10px;flex-direction:row;gap:8px;border-style:solid}
.approved-display[data-surface="lesson"] .rv-map .rv-room.is-past{opacity:.78;background:#1a414b;border-color:#63b9a27d}
.approved-display[data-surface="lesson"] .rv-map .rv-room-top{width:100%;gap:8px;flex-wrap:wrap}
.approved-display[data-surface="lesson"] .rv-map .rv-room-n{width:26px;height:26px;font-size:13px;color:#dce8fa;background:#2c4674;border:0;box-shadow:none}
.approved-display[data-surface="lesson"] .rv-map .rv-room.is-current .rv-room-n{background:#e7d39d;color:#152748}
.approved-display[data-surface="lesson"] .rv-map .rv-room.is-past .rv-room-n{background:#2d736d;color:#eafff7}
.approved-display[data-surface="lesson"] .rv-map .rv-room-icon{font-size:23px;filter:none;opacity:1}
.approved-display[data-surface="lesson"] .rv-map .rv-room-name{font-size:clamp(13px,1.15vw,20px);line-height:1.2;writing-mode:horizontal-tb!important;transform:none!important;white-space:normal!important;color:inherit;overflow-wrap:normal;hyphens:none}
.approved-display[data-surface="lesson"] .rv-map .rv-count{margin-left:auto;background:#2d736d;color:#ecfff6;font-size:12px;padding:4px 10px}
.approved-display[data-surface="lesson"] .rv-map .rv-groups{flex:1;width:100%;min-height:0;overflow:auto;grid-template-rows:minmax(0,1fr);gap:10px}
.approved-display[data-surface="lesson"] .rv-map .rv-group{height:100%;background:#10213fa8;color:#f0f5ff;border-width:1px;border-color:#80a9d77a;border-radius:12px;padding:10px}
.approved-display[data-surface="lesson"] .rv-map .rv-group .rv-faces{height:100%;align-content:center;justify-content:space-evenly;gap:8px 10px}
.approved-display[data-surface="lesson"] .rv-map .rv-face{width:clamp(64px,7vw,112px)}
.approved-display[data-surface="lesson"] .rv-map .rv-room[data-size="0"] .rv-face{width:clamp(76px,9vw,132px)}
.approved-display[data-surface="lesson"] .rv-map .rv-room[data-size="0"] .rv-avatar{width:clamp(68px,13vh,112px);height:clamp(68px,13vh,112px)}
.approved-display[data-surface="lesson"] .rv-map .rv-group-name{color:#d5e8ff;font-size:15px}
.approved-display[data-surface="lesson"] .rv-map .rv-group.is-mixed{background:#10213fa8}
.approved-display[data-surface="lesson"] .rv-map .rv-avatar{border:2px solid #b4d3f0;background:#10213f}
.approved-display[data-surface="lesson"] .rv-map .rv-name{background:#edf4ff;color:#17324f;border-color:#9ab6d7;font-size:12px;padding:3px 8px}
.approved-display[data-surface="lesson"] .rv-map .rv-waiting{font-size:16px;color:#d2dfef;margin:12px}
/* Blackout remains black, including when the lesson surface is active. */
.approved-display[data-surface="lesson"].is-blackout{background:#000}
@media(max-width:760px){
  .approved-display[data-surface="lesson"]{--display-head:56px}
  .approved-display[data-surface="lesson"] .d-head{padding:0 14px;gap:10px}
  .approved-display[data-surface="lesson"] .d-brand>strong{display:none}
  .approved-display[data-surface="lesson"] #displayLesson{max-width:30%;font-size:12px}
  .approved-display[data-surface="lesson"] .d-step>b{font-size:12px;padding:5px 9px}
  .approved-display[data-surface="lesson"] .d-foot{padding-inline:14px!important}
  .approved-display[data-surface="lesson"] .rv-map .rv-entry{grid-template-columns:minmax(0,1fr);gap:10px}
  .approved-display[data-surface="lesson"] .rv-map .rv-headline{display:block}
  .approved-display[data-surface="lesson"] .rv-map .rv-eyebrow{margin-bottom:3px}
  .approved-display[data-surface="lesson"] .rv-map .rv-room:not(.is-current){flex-basis:100px;min-height:60px}
}
@media(max-width:900px){
  .approved-display[data-surface="lesson"] .rv-map .rv-floor{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr);grid-auto-rows:minmax(52px,auto);gap:7px}
  .approved-display[data-surface="lesson"] .rv-map .rv-room.is-current{grid-column:1/-1;min-height:106px}
  .approved-display[data-surface="lesson"] .rv-map .rv-room:not(.is-current){min-height:52px;padding:6px;gap:5px}
  .approved-display[data-surface="lesson"] .rv-map .rv-room.is-current .rv-group{padding:5px}
  .approved-display[data-surface="lesson"] .rv-map .rv-room.is-current .rv-faces{gap:2px 4px}
  .approved-display[data-surface="lesson"] .rv-map .rv-room.is-current .rv-face{width:60px;gap:2px}
}
@media(max-width:400px){
  .approved-display[data-surface="lesson"] .rv-map .rv-floor{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-height:600px){
  .approved-display[data-surface="lesson"]{--display-head:52px;--display-foot:36px}
  .approved-display[data-surface="lesson"].has-guide,.approved-display[data-surface="lesson"].is-instruction{--display-foot:64px}
  .approved-display[data-surface="lesson"] .rv-map .rv-room.is-current{min-height:100px}
  .approved-display[data-surface="lesson"] .rv-map .rv-title{font-size:18px}
  .approved-display[data-surface="lesson"] .rv-map .rv-clock{font-size:28px}
  .approved-display[data-surface="lesson"] .rv-map .rv-entry-title{font-size:clamp(24px,3vw,40px)}
}
@media(max-width:520px){
  .approved-display[data-surface="lesson"] .rv-map .rv-floor{grid-template-rows:minmax(150px,1fr)}
  .approved-display[data-surface="lesson"] .rv-map .rv-room.is-current{min-height:150px}
  .approved-display[data-surface="lesson"] .rv-map .rv-group{padding:6px}
}
@media(prefers-reduced-motion:reduce){.approved-display[data-surface="lesson"] *{animation:none!important;transition:none!important}}
/* Keep editorial decoration within the frame and the crest visible on a light header. */
.approved-display[data-surface="lesson"] #screen>.slide{position:relative}
.approved-display[data-surface="lesson"] .d-kairos-logo{padding:3px;border-radius:11px;background:#ffffff1f;border:1px solid #ffffff4d}
.approved-display[data-surface="lesson"] .d-hito:not(.is-done):not(.is-soon){box-shadow:none;animation:none;border:0}
.approved-display[data-surface="lesson"] .rv-map .rv-room.is-current{padding:10px;gap:8px;box-shadow:inset 0 1px 0 #ffffff25,0 12px 26px #07152e8a}
.approved-display[data-surface="lesson"] .rv-map .rv-room:not(.is-current):nth-child(3n+1){border-color:#a798d177}
.approved-display[data-surface="lesson"] .rv-map .rv-room:not(.is-current):nth-child(3n+2){border-color:#7bbfb077}
.approved-display[data-surface="lesson"] .rv-map .rv-room:not(.is-current):nth-child(3n){border-color:#d8c18a77}
.approved-display[data-surface="lesson"] .rv-map .rv-group{padding:6px}
.approved-display[data-surface="lesson"] .rv-map .rv-face{gap:4px}
.approved-display[data-surface="lesson"] .rv-map .rv-avatar{width:clamp(44px,5.5vh,72px);height:clamp(44px,5.5vh,72px)}
.approved-display[data-surface="lesson"] .rv-map .rv-room:is([data-size="3"],[data-size="4"],[data-size="5"]) .rv-avatar{width:clamp(44px,7vh,64px);height:clamp(44px,7vh,64px)}
.approved-display[data-surface="lesson"] .rv-map .rv-room:is([data-size="3"],[data-size="4"],[data-size="5"]) .rv-name{font-size:11px;padding-inline:5px}
@media(max-width:900px){.approved-display[data-surface="lesson"] .rv-map .rv-room:is([data-size="3"],[data-size="4"],[data-size="5"]) .rv-avatar{width:34px;height:34px}}
.approved-display[data-surface="lesson"] .rv-map .rv-name{font-size:clamp(12px,1.1vw,20px)}
.approved-display[data-surface="lesson"] .entrada-voz{background:#245caa;border-color:#245caa;color:#fff;box-shadow:none;font-size:14px}
.approved-display[data-surface="lesson"] .entrada-voz:focus-visible{outline:3px solid #17324f;outline-offset:3px}
/* Screen options belong to the header; the collapsed teacher dock keeps its corner. */
#displayShell[data-surface="lesson"] .d-head{padding-right:68px}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu{top:10px;bottom:auto;right:12px;flex-direction:column}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu>button{width:44px;height:44px;min-height:44px;font-size:22px;background:#ffffff1f;border-color:#ffffff59;color:#fff}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu-list{background:#f8fcff;border-color:#afc6db;box-shadow:0 8px 24px #1c466b24}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu-list button{background:#edf5fd;color:#17324f;font-size:14px;min-height:44px}
body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu-list button:hover{background:#dcecff}
.approved-display[data-surface="lesson"] .d-status{padding-right:0}
body:has(.smartboard-controls.is-collapsed:not([hidden])) .approved-display[data-surface="lesson"] .d-status{padding-right:142px}
.approved-display[data-surface="lesson"].has-guide .d-status{display:none}
@media(max-width:760px){body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu{top:6px}}
@media(max-height:600px){body:has(.approved-display[data-surface="lesson"]:not([hidden])) .display-menu{top:4px}}
/* Motion signals a new activity. The content stays still while the class works. */
@media(prefers-reduced-motion:no-preference){
  .approved-display[data-surface="lesson"][data-enter="0"] .d-hito:not(.is-done):not(.is-soon){animation:classroom-step-a .38s cubic-bezier(.2,.8,.2,1)}
  .approved-display[data-surface="lesson"][data-enter="1"] .d-hito:not(.is-done):not(.is-soon){animation:classroom-step-b .38s cubic-bezier(.2,.8,.2,1)}
}
@keyframes classroom-step-a{0%{transform:scale(.78) rotate(-9deg)}65%{transform:scale(1.08) rotate(3deg)}100%{transform:none}}
@keyframes classroom-step-b{0%{transform:scale(.78) rotate(-9deg)}65%{transform:scale(1.08) rotate(3deg)}100%{transform:none}}