/* Active projects fill the phone screen; the project picker and desktop retain their layout. */
@media (max-width:900px), (max-width:1100px) and (max-height:600px) {
  body[data-immersive=true] .workshop[data-workshop-active=true] {
    width:100%;max-width:none;margin:0;padding:5px 5px max(4px,env(safe-area-inset-bottom));
    height:var(--immersive-workshop-height,calc(100dvh - var(--immersive-header-height,54px)));
    min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:64px minmax(0,1fr) auto;
    gap:3px;overflow:hidden;isolation:isolate;
  }
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-top {
    grid-area:1/1;margin:0;align-self:start;justify-self:start;width:100px;z-index:1;
  }
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-back {
    min-height:44px;font-size:10px;gap:5px;padding:0 10px;border-radius:14px;background:#fff8;
  }
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-heading {
    grid-area:1/1;position:relative;margin:0;padding:0 3px 8px 104px;text-align:left;min-width:0;
  }
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-heading .ws-kicker {font-size:7px;letter-spacing:1.4px;line-height:10px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-title {font-size:17px;line-height:21px;letter-spacing:-.3px;margin:1px 0;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-subtitle {font-size:10px;line-height:13px;margin:0;color:#687660;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-steps {position:absolute;bottom:1px;left:4px;right:4px;max-width:none;margin:0;gap:5px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-step {height:3px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-stage-card {
    grid-area:2/1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 13px 44px;
    gap:5px;min-height:0;padding:7px 5px 5px;border-radius:21px;box-shadow:0 6px 20px #5d553412;
  }
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-surface {grid-area:1/1;aspect-ratio:auto;width:100%;height:100%;min-height:0;max-width:none;margin:0;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-progress-row {grid-area:2/1;margin:0 7px;gap:10px;min-height:0;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-count {font-size:9px;line-height:13px;min-width:36px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-meter {height:3px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-action-row {grid-area:3/1;margin:0 4px;min-height:44px;gap:8px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-feedback {font-size:10px;line-height:13px;max-width:49%;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-continue {min-height:44px;font-size:10px;line-height:14px;padding:0 11px;border-radius:13px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-helper-row {grid-area:3/1;margin:0;min-height:15px;gap:0;align-self:center;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-helper {min-height:44px;padding:0 15px;font-size:11px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-prompt {font-size:9px;line-height:13px;color:#829076;}
  body[data-immersive=true] .workshop[data-workshop-active=true]:is([data-workshop-stage="1"],[data-workshop-stage="4"]) .ws-prompt {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  body[data-immersive=true] .workshop[data-workshop-active=true] :is(.ws-edition,.ws-bench-top,.ws-tool-label,.ws-reward-note,.ws-notice) {
    position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important;
  }
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-finish {border-radius:20px;padding:18px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-finish h3 {font-size:30px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-finish-mark {width:48px;height:48px;margin-bottom:13px;}
}
/* A side rail leaves landscape height for four full-size rows. */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px) {
  body[data-immersive=true] .workshop[data-workshop-active=true] {grid-template-columns:minmax(0,1fr) 160px;grid-template-rows:50px minmax(0,1fr) 46px;gap:5px;padding:5px max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-stage-card {grid-area:1/1/4/2;grid-template-rows:minmax(0,1fr);padding:5px;position:static;overflow:visible;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-top {grid-area:1/2;width:auto;justify-self:stretch;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-back {width:100%;justify-content:center;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-heading {grid-area:2/2;padding:0 4px 10px;align-self:start;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-title {font-size:18px;line-height:21px;margin:4px 0;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-subtitle {font-size:10px;line-height:14px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-steps {bottom:-1px;left:4px;right:4px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-progress-row {position:absolute;bottom:58px;right:10px;width:148px;margin:0;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-action-row {position:absolute;bottom:5px;right:5px;width:160px;margin:0;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-feedback {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-action-row>.ws-continue {width:100%;white-space:normal;padding:0 7px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-helper-row {grid-area:2/2;align-self:end;padding-bottom:12px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-helper {min-height:44px;padding:0 5px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-prompt {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-finish {inset:5px 170px 5px 5px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-finish-mark {display:none;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-finish h3 {font-size:27px;margin:5px 0;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-finish p {font-size:11px;margin:5px 0 10px;}
}
@media (max-width:350px) and (orientation:portrait) {
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-heading {padding-left:90px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-top {width:87px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-back {font-size:9px;padding:0 8px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-title {font-size:15px;}
  body[data-immersive=true] .workshop[data-workshop-active=true] .ws-subtitle {font-size:9px;line-height:12px;}
}