/* On phones, each toolbar occupies a grid row instead of absolute offsets. */
@media (max-width:700px) {
 body .stage {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"heading menu" "notice notice" "tools tools" "navigation navigation" "model model" "footer footer";
  gap:8px;
  padding:12px;
  min-height:0;
 }
 body .stage>.stage-heading {
  grid-area:heading;
  position:static;
  min-width:0;
  max-width:none;
  align-self:center;
 }
 body .stage>.stage-heading .eyebrow {margin:0 0 4px;font-size:8px;line-height:1.4;letter-spacing:1.5px}
 body .stage>.stage-heading h2 {font-size:13px;line-height:1.35;margin:0;overflow-wrap:anywhere}
 body .stage>#mobile-menu {
  grid-area:menu;
  position:static;
  align-self:center;
  min-height:36px;
  max-width:110px;
  margin:0;
  padding:7px 9px;
  font-size:10px;
 }
 body .stage>.foundation-notice-button {
  grid-area:notice;
  position:static;
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:7px 9px;
  font-size:10px;
  line-height:1.45;
  white-space:normal;
  text-align:left;
  overflow-wrap:anywhere;
 }
 body .stage>.tools {
  grid-area:tools;
  position:static;
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0;
  padding:0 0 4px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
 }
 body .stage>.tools button {flex:0 0 auto;min-height:36px;margin:0;padding:8px 11px;font-size:10px;white-space:nowrap}
 body .stage>.view-controls {
  grid-area:navigation;
  position:static;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  align-items:end;
  gap:8px;
  width:100%;
  min-width:0;
  margin:0;
  padding:8px;
 }
 body .stage>.view-controls>#interior-mode {min-width:0;min-height:36px;padding:7px;font-size:10px;line-height:1.3;white-space:normal}
 body .stage .lens-controls {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;min-width:0;max-width:none;width:auto}
 body .stage .lens-label {grid-column:1/-1;width:auto;min-width:0;margin:0;font-size:9px;line-height:1.35;overflow-wrap:anywhere}
 body .stage .lens-controls button {min-width:0;min-height:36px;padding:6px 3px;font-size:10px;line-height:1.3;white-space:normal}
 body .stage>#viewer {grid-area:model;position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
 body .stage>.stage-footer {grid-area:footer;position:static;gap:10px;min-width:0;margin:0;font-size:8px;line-height:1.5}
 body .stage>.stage-footer>span {min-width:0;overflow-wrap:anywhere}
 body.simple-mode .stage {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"heading" "notice" "model" "client";
 }
 body.simple-mode .stage>.stage-heading {max-width:none}
 body.simple-mode .stage>#viewer {position:relative;inset:auto;width:100%;height:100%;min-height:0}
 body.simple-mode .stage>#client-panel {
  grid-area:client;
  position:static;
  inset:auto;
  transform:none;
  width:100%;
  max-height:42dvh;
  min-height:0;
  margin:0;
  padding:10px;
  gap:10px;
  overflow-y:auto;
  overscroll-behavior-y:contain;
 }
}

@media (max-width:700px) and (max-height:520px) {
 body .stage {
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"heading menu" "notice notice" "tools navigation" "model model" "footer footer";
  padding:8px;
  gap:6px;
 }
 body .stage>.stage-heading .eyebrow {display:none}
 body .stage>.foundation-notice-button {padding:5px 7px;font-size:9px}
 body .stage>.tools {align-self:end}
 body .stage>.view-controls {padding:5px;gap:5px}
 body .stage>.view-controls>#interior-mode,body .stage .lens-controls button {min-height:32px;font-size:9px;padding:5px 3px}
 body .stage .lens-label {font-size:8px}
 body.simple-mode .stage {
  grid-template-columns:minmax(0,1fr) minmax(270px,.95fr);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"heading client" "notice client" "model client";
 }
 body.simple-mode .stage>#client-panel {max-height:100%;height:100%;gap:8px;padding:8px}
 body.simple-mode .client-models {border:0;border-top:1px solid var(--line);padding:8px 0 0}
 body.simple-mode .stage>#client-panel {grid-template-columns:minmax(0,1fr)}
}