/* Step 6-9: final, intentionally sparse student-facing visual refinements.
   This file only adjusts presentation. Existing simulation, saving, and input remain unchanged. */
:root { --g-student-ink:#203c40; --g-student-teal:#22636b; --g-student-paper:#fbfcf9; }
:where(.sim-shell,.materials-shell,.roof-shell) button {
  -webkit-tap-highlight-color:rgba(34,99,107,.16);
}
:where(.sim-shell,.materials-shell,.roof-shell) :is(button,a,select,[tabindex]):focus-visible {
  outline:3px solid #d49b39;outline-offset:2px;
}
/* Keep one simple instruction near the scene, not a wide translucent 'AI dashboard'.
   At classroom landscape widths this avoids hiding two of the four blinds. */
.sim-shell[data-lesson="8"] .lesson-guide {
  left:clamp(12px,2vw,28px);
  top:92px;
  width:clamp(274px,27vw,342px);
  min-width:0;
  max-width:calc(100vw - 40px);
  padding:10px 12px;
  gap:6px;
  background:rgba(251,253,249,.97);
  box-shadow:0 6px 20px rgba(20,56,56,.12);
}
.sim-shell[data-lesson="8"] .guide-copy{gap:8px}
.sim-shell[data-lesson="8"] .guide-index{min-width:36px;padding:5px 4px}
.sim-shell[data-lesson="8"] .guide-message strong{font-size:15px;line-height:1.3}
.sim-shell[data-lesson="8"] .guide-message p{font-size:12px;line-height:1.38;margin-top:4px}
.sim-shell[data-lesson="8"] .desk-mission{display:none}
.sim-shell[data-lesson="8"] .guide-actions{margin:2px 0 0;gap:5px;flex-wrap:wrap}
.sim-shell[data-lesson="8"] .guide-primary{min-height:44px;font-size:12px;padding:0 8px}
.sim-shell[data-lesson="8"] .guide-more,
.sim-shell[data-lesson="8"] .trial-action{min-height:44px;font-size:12px;padding:0 8px}
.sim-shell[data-lesson="8"] .guide-feedback{margin:0;font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Weather is a condition, not a second set of switches. */
.sim-shell[data-lesson="8"] .weather-switch{top:92px;right:clamp(12px,2vw,28px);padding:7px 10px}
.sim-shell[data-lesson="8"] .weather-explain{display:none}
.sim-shell[data-lesson="8"] .weather-caption small{font-size:15px}
/* Larger visual signals and tighter reading flow, while retaining the three criteria. */
.sim-shell[data-lesson="8"] .analysis-bar{gap:10px}
.sim-shell[data-lesson="8"] .reading{gap:6px;padding:0 clamp(5px,1vw,15px)}
.sim-shell[data-lesson="8"] .reading strong{font-weight:800}
.sim-shell[data-lesson="8"] .visual-bright-spots{gap:2px}
/* Controls remain discoverable, without competing with the room drawing. */
.sim-shell .experiment-dock{background:rgba(252,254,250,.97)}
.sim-shell .desk-visual-toggle{min-height:44px}
.sim-shell .reset-control{min-height:44px}
/* Materials: equal emphasis for tangible sheets and chosen method; avoid tiny grey labels. */
.materials-shell .next-action,.roof-shell .roof-next-action {color:#225a60}
.materials-shell .interaction-title {color:#204e52;font-weight:750}
.materials-shell .interaction-hint{color:#486c6b}
.materials-shell .paper-pack:focus-visible,.materials-shell .paper-tray:focus-visible{outline-offset:3px}
.materials-shell .method-picker button[aria-pressed="true"]{box-shadow:inset 3px 0 #236c67}
.materials-shell .comparison{box-shadow:0 10px 30px rgba(31,62,59,.16)}
/* Rooftop: the eight power cells should read like a picture first, not eight numbers. */
.roof-shell .power-cells{gap:4px}
.roof-shell .power-cells span{border-radius:2px}
.roof-shell .roof-power-board{border-radius:5px}
.roof-shell .power-source-actions button{font-size:12px;line-height:1.2}
.roof-shell .roof-drop-zone:focus-visible{outline:3px solid #d49b39;outline-offset:3px}
/* Large classroom screens: maintain the smaller mission and a full-width scene. */
@media (min-width:1200px) and (min-height:700px){
  .sim-shell[data-lesson="8"] .lesson-guide{top:97px;width:340px}
  .sim-shell[data-lesson="8"] .guide-actions{gap:7px}
}
/* Common tablet with browser chrome reducing usable height to ~700px. */
@media (min-width:821px) and (max-height:745px){
  .sim-shell .experiment-heading{top:11px}
  .sim-shell .experiment-heading p{margin-top:3px}
  .sim-shell[data-lesson="8"] .lesson-guide{top:76px;padding:8px 10px;gap:4px}
  .sim-shell[data-lesson="8"] .weather-switch{top:77px}
  .sim-shell .scene-art{inset:82px 0 0}
  .sim-shell .experiment-dock{bottom:6px;padding:5px}
  .materials-shell .materials-main,.roof-shell .roof-main{padding-top:5px;padding-bottom:3px}
  .materials-shell .heading-line,.roof-shell .roof-titleline{margin-bottom:5px}
  .materials-shell .experiment-layout{min-height:0}
  .materials-shell .experiment-controls{padding:7px 12px 5px}
  .materials-shell .material-footer,.roof-shell .roof-footer{min-height:25px}
  .roof-shell .roof-controls{padding:7px 12px}
  .roof-shell .roof-stage{min-height:380px}
}
@media (max-width:820px){
  .sim-shell[data-lesson="8"] .lesson-guide{width:min(315px,calc(100vw - 25px));top:92px}
  .sim-shell[data-lesson="8"] .weather-switch{top:auto;bottom:83px}
  .sim-shell .experiment-dock{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;overscroll-behavior-inline:contain}
  .sim-shell .dock-set{flex-shrink:0}
  .sim-shell .dock-divider{display:none}
}
@media (prefers-reduced-motion:reduce){
  .materials-shell .flip-sheet,.roof-shell .power-cells span{animation:none!important;transition:none!important}
}
/* At 1024px a 340px mission fits all three actions in one line; it takes less
   vertical space than the previous wrapped 276px version. */
@media (min-width:821px) and (max-width:1199px) {
  .sim-shell[data-lesson="8"] .lesson-guide { width:340px; }
}