/* Classroom branding uses two CSS windows onto the supplied, unmodified logo.
   The original square asset is kept locally, including its English/tagline. */
.brand{flex-shrink:0;gap:10px;background:#fff;border-radius:10px;padding:5px 10px 5px 6px;user-select:none}
.brand-symbol,.brand-wordmark{display:block;position:relative;overflow:hidden;flex-shrink:0}
.brand-symbol{width:58px;height:44px}
.brand-symbol img{position:absolute;width:123px;height:123px;max-width:none;left:-33px;top:-27px}
.brand-wordmark{width:167px;height:29px}
.brand-wordmark img{position:absolute;width:243px;height:243px;max-width:none;left:-38px;top:-140px}
.brand small{font-size:11px;letter-spacing:.15em;color:#657783;margin:1px 0 0;text-align:center}
.brand-copy{min-width:0}
.projection .brand{box-shadow:0 0 0 1px #ffffff18}
.panel-toggle{min-width:54px;min-height:44px;padding:0 10px;font-size:.82rem;white-space:nowrap;color:var(--accent)}
.panel-heading .panel-toggle{background:var(--button)}
.stage-bottom #big-canvas span:last-child{display:inline}
.stage-bottom #big-canvas{min-height:44px;padding:0 12px;background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--line)}
.top-actions .icon-button{width:44px;min-width:44px}
.entrances button{min-height:44px}
@media(min-width:551px){.top-actions #projection span:last-child{display:inline}}
.model-list,.info-scroll{touch-action:pan-y;-webkit-overflow-scrolling:touch}
.presets button,.rotor-axis-row select{min-height:44px}
.toolbar #numbers-toggle{min-height:48px}
select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Width alone does not identify iPad: large touch screens use the same logic. */
.compact-layout .model-panel{width:260px}
.compact-layout.builder-mode .model-panel{width:320px}
.compact-layout .info-panel{width:320px}
.compact-layout .panel-heading{padding:13px 15px}
.compact-layout .panel-heading .eyebrow{margin-bottom:5px}
.compact-layout select,.compact-layout .rotation-tray select,.compact-layout input[type=text]{font-size:16px}
.compact-layout .rotation-tray .presets button{min-height:44px;padding:7px 11px}
.compact-layout .rotation-actions .icon-button{width:44px;min-width:44px;min-height:44px}
.compact-layout .menu-foot{padding:9px 16px}
.builder-mode .menu-foot{display:none}
.compact-layout .stage-top{gap:12px}
.compact-layout .toolbar>button{min-height:48px}
/* Leave room for the full heading even while both labelled drawer handles show. */
@media(min-width:551px) and (max-width:850px){
 .brand{gap:5px;padding-inline:5px}.brand-symbol{width:51px;height:38px}
 .brand-symbol img{width:110px;height:110px;left:-31px;top:-22px}
 .brand-wordmark{width:150px;height:27px}.brand-wordmark img{width:220px;height:220px;left:-35px;top:-126px}
 .brand small{font-size:10px;letter-spacing:.08em}
 .topbar{padding-inline:12px;gap:6px}
 .entrances button{padding-inline:10px;font-size:.78rem}
 .top-actions{gap:2px}
}
@media(max-width:850px){
 .compact-layout .model-panel,.compact-layout .info-panel{max-width:88%;box-shadow:0 0 32px #10263a38}
 .stage-heading h1{font-size:1.4rem}
 .stage-top{left:16px;right:16px}
 .toolbar{justify-content:space-evenly;gap:2px}
 .model-switch button{min-height:44px}
 .rotation-tray{grid-template-columns:150px minmax(0,1fr)}
 .rotation-tray .presets{grid-column:1/-1;grid-row:3;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain}
 .rotation-tray .presets button{flex-shrink:0;white-space:nowrap}
 .rotation-actions{grid-column:1/-1;grid-row:2}
 .rotation-status{grid-row:4}
 .rotation-note{display:none}
}
@media(max-width:550px){
 .topbar,.projection .topbar{height:120px;padding:5px 12px;row-gap:5px}
 .brand{gap:5px;padding:3px 5px}.brand-symbol{width:49px;height:36px}
 .brand-symbol img{width:103px;height:103px;left:-28px;top:-22px}
 .brand-wordmark{width:140px;height:24px}.brand-wordmark img{width:204px;height:204px;left:-32px;top:-117px}
 .brand small{font-size:9px;margin:0;letter-spacing:.08em}
 .top-actions{gap:0}.top-actions button{width:44px;min-height:44px;padding:0}
 .entrances button{min-height:44px;font-size:.78rem}
 .stage-top{top:12px;left:12px;right:12px;gap:7px;flex-wrap:wrap}
 .stage-heading{flex-basis:100%;order:3;padding-top:2px}
 .stage-top #info-open{margin-left:auto}
 .stage-top .panel-toggle{min-height:44px;font-size:.75rem;padding-inline:9px}
 .stage-kicker{display:none}.stage-heading h1,.projection .stage-heading h1{font-size:1.35rem}
 .structural{margin-top:4px}.stage-badges{top:135px;left:13px}
 .stage-bottom{left:13px;right:10px}.stage-bottom #big-canvas{font-size:.68rem;padding:0 9px}
 .legend{gap:7px;font-size:.65rem;max-width:58%}
 .toolbar{justify-content:flex-start;gap:4px}
 .toolbar>button,.projection .toolbar>button{min-width:62px;font-size:.66rem}
 .model-switch button{min-height:28px}
 .rotation-tray{grid-template-columns:112px minmax(0,1fr);padding:7px 10px;gap:4px 8px}
 .rotation-choice label{font-size:.65rem}
 .rotation-caption{font-size:.61rem;gap:3px}
 .rotation-caption span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .rotation-open .stage-top{top:6px}
 .rotation-open .stage-heading{padding:0}
 .rotation-open .stage-heading h1{font-size:1.1rem;line-height:1.4}
 .rotation-open .stage-badges{display:none}
 .rotation-status{font-size:.66rem}
 .big-canvas .stage-heading{padding-top:10px}
 .big-canvas .stage-badges{top:103px}
}
@media(max-height:540px) and (orientation:landscape){
 .topbar{height:62px}.brand{padding-block:1px}
 .rotation-tray{grid-template-columns:150px minmax(0,1fr) auto}
 .rotation-actions{grid-column:3;grid-row:1}
 .rotation-tray .presets{grid-column:3;grid-row:2}
 .rotation-status{grid-column:1/3;grid-row:2}
 .compact-layout .rotation-tray .presets button{min-height:36px}
 .stage-bottom #big-canvas{min-height:38px}
}