@media (max-width: 850px) {
  body.polish:has(#app[data-guided-panel]) {
    height: 100vh;
    height: 100dvh;
  }

  #app[data-guided-panel] > .topbar {
    height: auto;
    min-height: 0;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  }

  #app[data-guided-panel] #wide-toolbar {
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    min-height: 48px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  #app[data-guided-panel] :is(#wide-tools, #wide-actions, #polish-tools) {
    flex: none;
    width: auto;
    flex-wrap: nowrap;
  }

  #app[data-guided-panel] :is(#wide-tools, #wide-actions) > * { flex-shrink: 0; }
  #app[data-guided-panel] #polish-tools [data-workview] { display: none; }

  body.guidance-flow #app[data-guided-panel] .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  }

  #guided-mobile-panels {
    grid-area: 2 / 1;
    display: flex;
    gap: 6px;
    padding: 4px 8px;
    background: #142126;
  }

  #guided-mobile-panels button { flex: 1; }
  #guided-mobile-panels button[aria-pressed="true"] { background: #a4dedc; color: #102127; }

  body.guidance-flow.wide-dock.polish.classroom-active #app[data-guided-panel] #polish-inspector,
  body.guidance-flow #app[data-guided-panel] #lighting-dock {
    grid-area: 3 / 1 !important;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body.guidance-flow.wide-dock.polish.classroom-active #app[data-guided-panel] #polish-inspector:has(#wide-support) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 0 8px;
  }

  #app[data-guided-panel] #polish-inspector > * {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
  }

  #app[data-guided-panel] #polish-inspector > #wide-lesson { grid-area: 1 / 1; }
  #app[data-guided-panel] #polish-inspector > #dock-navigation { grid-area: 1 / 2; }
  #app[data-guided-panel] #polish-inspector > #dock-task { grid-area: 2 / 1 / auto / -1; }
  #app[data-guided-panel] #polish-inspector > #wide-support { grid-area: 3 / 1 / auto / -1; }
  #app[data-guided-panel] #polish-inspector > #dock-actions { grid-area: 4 / 1 / auto / -1; }
  #app[data-guided-panel] #polish-inspector :is(#wide-lesson, #dock-navigation) select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
  }

  #app[data-guided-panel] #polish-inspector #dock-task { display: block; overflow: visible; }
  #app[data-guided-panel] #polish-inspector #wide-support { height: auto; max-height: none; }
  #app[data-guided-panel] :is(#dock-navigation .lesson-navigation) {
    grid-template-columns: minmax(0, 1fr);
  }
  #app[data-guided-panel] #dock-navigation .lesson-navigation select { width: 100%; }
  #app[data-guided-panel] #lighting-dock #shared-controls { grid-template-columns: minmax(0, 1fr); }
  #app[data-guided-panel] #shared-primary { flex-wrap: wrap; gap: 8px; overflow: visible; }
  #app[data-guided-panel] #shared-primary > .shared-group { flex-grow: 1; max-width: 100%; }
  #app[data-guided-panel] :is(#dock-scroll-back, #dock-scroll-forward, #shared-scroll-hint) { display: none; }
  #app[data-guided-panel] #shared-rig-header { grid-template-columns: minmax(0, 1fr); }

  body.guidance-flow.wide-dock.polish.classroom-active #app[data-guided-panel="controls"] #polish-inspector:has(#wide-support),
  body.guidance-flow #app[data-guided-panel="instructions"] #lighting-dock,
  #app[data-guided-panel] :is(#workspace-divider, #dock-navigation button[id$="-prev"], #dock-navigation button[id$="-next"]) {
    display: none !important;
  }

  #guided-mobile-progress {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid #52666c;
    background: #142126;
    color: #fff;
    font-size: 14px;
  }

  #guided-mobile-progress button { min-height: 44px; padding-inline: 6px; }
  #guided-mobile-progress button:last-child:not(:disabled) { background: #a4dedc; color: #102127; }
}

@media (max-width: 850px) and (orientation: landscape) {
  body.guidance-flow #app[data-guided-panel] .workspace {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.guidance-flow #app[data-guided-panel] .stage-column { grid-row: 1 / 3 !important; }
  #guided-mobile-panels { grid-area: 1 / 2; }

  body.guidance-flow.wide-dock.polish.classroom-active #app[data-guided-panel] #polish-inspector,
  body.guidance-flow #app[data-guided-panel] #lighting-dock { grid-area: 2 / 2 !important; }
}