/* Step C-1: tablet-ready spacing and unbroken labels. Does not reduce core text to fit.
   Preserves the practical three-column/landscape tools established in Step A+B. */
:where(.sim-shell,.materials-shell,.roof-shell) :is(button,a,select,[tabindex]):focus-visible,
:where(.site-bar,.places-section) :is(button,a,[tabindex]):focus-visible {outline:3px solid #dfaa50;outline-offset:3px}
:where(.sim-shell,.materials-shell,.roof-shell,.site-bar) .audio-toggle{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:43px;min-width:88px;padding:6px 10px;border:1px solid #88a6a0;
  border-radius:5px;color:#f4faf6;background:#294f52;
  font-size:13px;font-weight:760;line-height:1.2;letter-spacing:-.015em;
  white-space:nowrap;cursor:pointer;box-shadow:none;text-decoration:none;
}
.site-bar .audio-toggle{background:#f7faf6;color:#234747;border-color:#a9bdb5}
.audio-toggle svg{width:20px;height:20px;flex:none}
.audio-toggle[aria-pressed="true"]{border-color:#e7b95b;background:#245d5a;color:#fff}
.site-bar .audio-toggle[aria-pressed="true"]{background:#245d5a;color:#fff}
.audio-screenreader-status{position:absolute!important;width:1px!important;height:1px!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important}
/* The roof label describes a place and its hypothetical condition together. */
.roof-shell .roof-stage-caption{max-width:calc(100% - 120px);line-height:1.35;white-space:normal;word-break:keep-all;gap:7px}
.roof-shell .roof-stage-caption .roof-live-dot{flex:0 0 7px}
.roof-shell .roof-titleline>div{min-width:0}
.roof-shell .roof-titleline h1{max-width:100%;white-space:normal;overflow-wrap:break-word;word-break:keep-all}
.roof-shell .simulation-tag{flex:none}
.roof-shell .solar-progress>span{line-height:1.3;white-space:normal;word-break:keep-all;min-height:28px}
.roof-shell .roof-controls h2{white-space:normal;word-break:keep-all}
.materials-shell .heading-line>div:first-child{min-width:0}
.materials-shell .heading-line h1{white-space:normal;word-break:keep-all}
.materials-shell .lesson-selector{flex:none}
.materials-shell .material-header,.roof-shell .roof-header{flex-wrap:nowrap}
.materials-shell .header-nav,.roof-shell .roof-nav{margin-left:auto;min-width:0}
.sim-shell .sim-header .header-controls{min-width:0;gap:9px}
.sim-shell .experiment-heading{right:16px;max-width:min(690px,calc(100% - 35px))}
.sim-shell .experiment-heading h1{line-height:1.32;word-break:keep-all;white-space:normal}
.sim-shell .experiment-heading p{line-height:1.44;word-break:keep-all;white-space:normal}
@media(max-width:1100px){
 :where(.sim-shell,.materials-shell,.roof-shell,.site-bar) .audio-toggle{min-width:43px;width:43px;padding:6px}
 .audio-toggle [data-audio-label]{display:none}
 .audio-controls{gap:4px}
 .roof-shell .roof-header,.materials-shell .material-header{gap:10px}
 .roof-shell .roof-nav,.materials-shell .header-nav{gap:12px}
 .sim-shell .header-controls{gap:4px}
 .sim-shell .experiment-heading h1{font-size:21px}
}
@media(max-width:820px){
 .roof-shell .roof-stage-caption{max-width:calc(100% - 105px);font-size:12px}
 .roof-shell .roof-titleline{align-items:flex-start}
 .roof-shell .roof-titleline h1{line-height:1.3}
 .materials-shell .header-nav a:last-child{display:none}
 .roof-shell .roof-nav a:last-child{display:none}
 .sim-shell .header-controls .utility-control{padding-inline:6px}
}
@media(max-width:580px){
 .audio-controls{gap:3px}
 :where(.site-bar,.materials-shell,.roof-shell) .audio-toggle{min-width:43px;width:43px;padding:0;border-radius:4px}
 :where(.site-bar,.materials-shell,.roof-shell) .audio-toggle [data-audio-label]{display:none}
 .site-bar .top-links{gap:10px}
 .materials-shell .material-header,.roof-shell .roof-header{gap:6px}
 .materials-shell .header-nav,.roof-shell .roof-nav{gap:8px}
 .materials-shell .brand{gap:5px}
 .roof-shell .roof-brand{gap:6px}
 .roof-shell .roof-stage-caption{padding:6px 7px;max-width:calc(100% - 104px);line-height:1.4}
 .roof-shell .sky-status{padding:6px;gap:4px}
 .roof-shell .sky-status svg{width:16px;height:16px}
 .sim-shell .sim-header{padding:0 8px}
 .sim-shell .identity-main{font-size:14px}
 .sim-shell .header-controls{gap:3px}
 .sim-shell .header-controls .utility-control:not(.help-button) span{display:none}
 .sim-shell .lesson-picker{max-width:94px}
 .sim-shell .experiment-heading{right:8px;left:12px}
}
@media(prefers-reduced-motion:reduce){.audio-toggle{transition:none!important}}