/* Shared responsive layout for web and native. */
html .settingToggle{justify-content:space-between}
@media (min-width: 651px) and (max-height: 550px) {
  /* A phone turned sideways needs side panels, not a bottom panel that
     consumes almost its entire drawing height. */
  html body .siteHeadIn { padding: 8px 16px; }
  html .app { --controlsWidth: 240px; --detailsWidth: 290px;
    display: grid; grid-template-columns: var(--controlsWidth) minmax(0, 1fr) var(--detailsWidth);
    grid-template-rows: max-content minmax(0, 1fr); }
  html .app.controls-collapsed { --controlsWidth: 0px; }
  html .app.details-collapsed { --detailsWidth: 0px; }
  html .resultsStrip { padding: 8px 16px; gap: 16px; }
  html .rsHeroValue { font-size: 28px; }
  html .rsStatValue { font-size: 20px; }
  html .rsStatus { display: none; }
  html .stageArea { grid-column: 2; grid-row: 2; }
  html .rail { grid-column: 1; grid-row: 2; }
  html .drawer { grid-column: 3; grid-row: 2; border-left: 1px solid var(--rule); }
  html .studio-controls { left: auto; right: 12px; width: 300px; max-height: calc(100dvh - 76px); }
  html .intro { top: 70px; }
  html .intro h1 { font-size: 28px; }
}
html .masthead { padding-top: calc(17px + env(safe-area-inset-top, 0px)); }
html .studio-controls { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 650px) {
  html body:has(.app) { height: 100dvh; overflow: hidden; }
  html body .siteHeadIn { padding: 10px 14px; align-items: center; gap: 8px; }
  html .siteBrand { font-size: 19px; white-space: nowrap; }
  html .siteHeadIn nav { gap: 10px; }
  html .siteHeadIn nav a { font-size: 11px; min-height: 36px; display: flex; align-items: center; letter-spacing: 0; text-transform: none; }
  html .siteHeadIn nav a[aria-current="page"] { display: none; }
  html .app { flex: 1; min-height: 0; overflow: hidden; position: relative; }
  html .resultsStrip { gap: 10px; padding: 10px 12px; flex: none; }
  html .rsHeroValue { font-size: 27px; }
  html .rsStatValue { font-size: 19px; }
  html .rsStatus { display: none; }
  html .panelToggles { gap: 8px; }
  html .panelToggles button { min-height: 44px; }
  html .stageArea,
  html .app.controls-collapsed.details-collapsed .stageArea {
    flex: 1; min-height: 160px; height: auto;
  }
  html .app > .rail,
  html .app > .drawer { flex: none; height: min(42dvh, 340px); min-height: 0;
    overflow: auto; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  html .app > .rail:not([hidden]) ~ .drawer:not([hidden]) { height: 25dvh; }
  html .rail { padding-top: 12px; }
  html .masthead { padding-top: max(14px, env(safe-area-inset-top)); }
  html .intro { top: max(76px, calc(env(safe-area-inset-top) + 60px)); }
  html .intro h1 { font-size: 28px; letter-spacing: -1px; }
  html .intro h1 br { display: none; }
  html .intro p { margin-top: 8px; }
  html .studio-controls { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (orientation:landscape) and (min-width:651px) and (max-width:1366px) and (any-pointer:coarse){
 html .app{--controlsWidth:240px;--detailsWidth:280px;display:grid;grid-template-columns:var(--controlsWidth) minmax(0,1fr) var(--detailsWidth);grid-template-rows:max-content minmax(0,1fr)}
 html .app.controls-collapsed{--controlsWidth:0px}html .app.details-collapsed{--detailsWidth:0px}
 html .stageArea{grid-column:2;grid-row:2}html .rail{grid-column:1;grid-row:2;min-height:0;overflow:auto}html .drawer{grid-column:3;grid-row:2;min-height:0;overflow:auto;border-left:1px solid var(--rule)}
 html .stageArea #toggleDetails{top:12px;bottom:auto;right:0;border-radius:8px 0 0 8px}
}