body.work-mobile{max-width:1600px;-webkit-text-stroke:0;text-shadow:none}
.work-mobile button,.work-mobile select,.work-mobile summary{min-height:44px;min-width:44px}
.work-mobile input[type=range]{height:44px;min-height:44px;touch-action:pan-y}
.work-mobile input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
.work-mobile input[type=checkbox]{width:24px;height:24px;flex-shrink:0}
.work-mobile .check-row,.work-mobile .loop{min-height:44px}
.work-mobile header{gap:8px}.work-mobile header button{height:44px;padding:5px 10px}
.work-mobile .workspace{background:var(--panel)}.work-mobile .workspace>footer{display:none}
.work-mobile .workspace .tabs{order:4;position:relative;top:auto;border-top:1px solid var(--line);padding:5px 10px max(5px,env(safe-area-inset-bottom));gap:6px}
.work-mobile .workspace .tabs button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;min-height:54px;line-height:1.3;font-size:12px}
.work-icon-label{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.work-mobile svg{width:24px;height:24px;flex:none}
.work-mobile .tabs .active{background:color-mix(in srgb,var(--purple) 30%,var(--panel));border-color:var(--accent);color:var(--accent)}
.work-mobile .workspace .panels{padding:10px 14px;overscroll-behavior:contain}
.work-mobile #expressionSavebar{order:3;padding:8px 14px;grid-template-columns:1.15fr 1fr}
.work-mobile #expressionSavebar button{font-size:14px;min-height:46px}
.work-mobile #faceStatus{max-height:3em;overflow:auto;font-size:11px;line-height:1.4}
.work-mobile #panel-face.expression-compact .expression-filters{gap:4px;margin:0}
.work-mobile #panel-face.expression-compact .expression-filters button{padding:3px;font-size:12px;min-height:44px}
.work-mobile .expression-picker-row{margin-top:6px}.work-mobile #savedFaces{display:none}
.work-mobile #newExpression{width:100%;border-style:dashed}
.work-faces{display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x proximity;padding:7px 0 5px;scrollbar-width:thin;overscroll-behavior-x:contain}
.work-mobile .work-face-card{width:68px;min-width:68px;min-height:72px;padding:7px 3px;display:flex;align-items:center;flex-direction:column;gap:4px;scroll-snap-align:start;background:color-mix(in srgb,var(--panel) 86%,var(--accent))}
.work-face-card svg{width:30px;height:30px}.work-face-card span{max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:11px}
.work-mobile .work-face-card[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.work-mobile .expression-feedback{flex-wrap:nowrap!important;margin:0!important;min-height:44px}
.work-mobile #expressionSelected{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34%}
.work-mobile #expressionDirty{white-space:nowrap;font-size:10px!important}
.work-mobile .work-compare{margin-left:auto;width:auto;min-height:44px;font-size:12px;padding:5px 9px}
.work-mobile #panel-face.expression-compact .expression-parts{position:sticky;top:-10px;z-index:3;background:var(--panel);padding:6px 0;margin:0;gap:5px}
.work-mobile #panel-face.expression-compact .expression-parts button{min-height:58px;display:flex;flex-direction:column;gap:2px;font-size:11px}
.work-mobile .morph-section-heading{display:none!important}
.work-mobile #panel-face.expression-compact #morphList .morph-row{padding:9px 10px;margin:7px 0;background:color-mix(in srgb,var(--accent) 6%,var(--panel));border:1px solid var(--line);border-radius:14px}
.work-mobile #panel-face.expression-compact .morph-reference summary{min-height:44px;font-size:11px}
.work-mobile #panel-face.expression-compact .morph-heading label{font-size:13px}
.work-mobile #panel-face.expression-compact .morph-heading button{border-radius:50%;font-size:12px}
.work-mobile #panel-face.expression-compact .expression-compare-row button{flex:1;width:auto;min-width:0;font-size:12px}
.work-mobile #pupilDetails{display:none!important}
.work-mobile #panel-face.expression-compact details{border-radius:14px}
.work-mobile .expression-add-panel summary{color:var(--muted)}
.work-mobile #workAudition{width:100%;margin-top:8px}.work-mobile #workAudition.auditioning{background:var(--purple);color:white}
.work-mobile input:not([type=range]):not([type=checkbox]),.work-mobile select{font-size:16px}
.work-mobile #expressionNameRow label{font-size:12px}.work-mobile #expressionNameRow input{border-radius:12px;padding:9px}
.work-mobile .view-actions button{min-height:44px;min-width:44px}
.work-mobile .panel-handle{min-height:44px;flex-basis:44px}
@media(max-width:759px) and (orientation:portrait){
 .work-mobile header{flex-basis:52px;padding:0 10px}.work-mobile .version{font-size:9px}
 .work-mobile #helpOpen{font-size:0;width:44px;padding:0}.work-mobile #helpOpen:after{content:'？';font-size:18px}
 .work-mobile #settingsOpen{font-size:0;width:44px;padding:0}.work-mobile #settingsOpen:after{content:'⚙';font-size:20px}
 .work-mobile .workspace{height:57dvh;max-height:none;padding-bottom:0}
 .work-mobile:not(.panels-collapsed) #stage{bottom:57dvh;height:auto}
 .work-mobile .panel-handle{min-height:44px;flex-basis:44px}
 .work-mobile .panel-handle:after{content:'スワイプで開閉';font-size:9px;color:var(--muted);position:absolute;right:16px}
 .work-mobile:not(.panels-collapsed) .view-actions{bottom:10px}
 .work-mobile.panels-collapsed .workspace{height:calc(110px + env(safe-area-inset-bottom))}
 .work-mobile.panels-collapsed #stage{bottom:calc(110px + env(safe-area-inset-bottom));height:auto}
 .work-mobile.panels-collapsed #expressionSavebar{display:none}
 .work-mobile #empty h1{font-size:24px}.work-mobile #empty .orbit,.work-mobile #empty .eyebrow,.work-mobile #empty small{display:none}
}
@media(min-width:760px){
 .work-mobile main{grid-template-columns:minmax(0,1fr) minmax(370px,440px);padding:16px;gap:16px}
 .work-mobile .panel-handle{display:none}.work-mobile #stageHint{bottom:70px}
}
@media(orientation:landscape) and (max-height:550px){
 .work-mobile header{height:44px;flex-basis:44px}
 .work-mobile main{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,1fr);grid-template-rows:minmax(0,1fr);padding:0;gap:0}
 .work-mobile #stage{position:relative;inset:auto;height:100%;width:100%;border-radius:0}
 .work-mobile .workspace{position:relative;height:100%;border-radius:0;padding:0;overflow:hidden}
 .work-mobile .panel-handle{display:none}
 .work-mobile .workspace .tabs button{flex-direction:row;min-height:44px;gap:5px}
 .work-mobile #faceStatus{display:none}.work-mobile #expressionSavebar{padding:5px 10px}
 .work-mobile .workspace .panels{padding:8px 10px}.work-mobile .view-actions{bottom:10px}
}
.work-mobile #panel-face.expression-compact .work-picker{padding:0;margin:0;border:0;background:none}
.work-mobile #panel-face.expression-compact .work-picker>summary{padding:0 10px;border:1px solid var(--line);border-radius:12px;min-height:44px;font-size:13px;color:var(--accent)}
.work-mobile #panel-face.expression-compact .work-picker .expression-filters{margin-top:7px}
.work-mobile #panel-face.expression-compact .work-picker:not([open])~*{display:none}
.work-mobile #panel-face.expression-compact #morphList{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px;max-height:190px;scrollbar-width:thin;overscroll-behavior-x:contain}
.work-mobile #panel-face.expression-compact #morphList .morph-row{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.work-mobile #morphList>.note{flex:0 0 100%;font-size:12px}
.work-mobile #panel-face.expression-compact .expression-feedback{padding:0}
.work-mobile #panel-face.expression-compact .expression-chooser{margin:0}
.work-mobile #panel-face.expression-compact .morph-reference[open]{max-height:160px;overflow:auto}
.work-mobile input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;padding:0}
.work-mobile input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--line)}
.work-mobile input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent)}
.work-mobile #morphList .morph-row:after{content:'← スワイプでほかの調整 →';font-size:10px;color:var(--muted);display:block;text-align:center}
@media(orientation:landscape) and (max-height:550px){
 .work-mobile .expression-chooser{padding-right:94px!important}
 .work-mobile .expression-feedback{position:absolute;right:10px;top:8px;width:86px;z-index:4;background:var(--panel)}
 .work-mobile #expressionSelected,.work-mobile #expressionDirty{display:none}
 .work-mobile #panel-face.expression-compact .expression-parts button{min-height:44px;flex-direction:row;font-size:11px;gap:3px}
 .work-mobile .expression-parts svg{width:20px;height:20px}
 .work-mobile #panel-face.expression-compact .expression-parts{padding:4px 0}
 .work-mobile #panel-face.expression-compact #morphList .morph-row{margin:3px 0;padding:3px 8px}
}
.work-mobile #panel-face.expression-compact .morph-heading{min-height:44px;line-height:1.2}
.work-mobile #panel-face.expression-compact .morph-heading label{margin:0}
.work-mobile #panel-face.expression-compact .expression-feedback{min-height:44px;max-height:44px}
.work-mobile #panel-face.expression-compact #morphList .morph-row{padding-top:3px;padding-bottom:3px}
.work-mobile #panel-face.expression-compact #morphList .morph-row input[type=range]{margin:0}


/* Full-screen stage: override mobile portrait sheet and landscape split-view.
   Safari on iPhone falls back to .fullscreen-fallback when element Fullscreen
   API is unavailable. The stage controls stay visible for fit/face/exit. */
body.work-mobile.stage-fullscreen {
  max-width: none !important;
  width: 100% !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.work-mobile.stage-fullscreen > header,
body.work-mobile.stage-fullscreen .workspace {
  display: none !important;
}
body.work-mobile.stage-fullscreen main {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.work-mobile.stage-fullscreen #stage,
body.work-mobile #stage.fullscreen-fallback,
body.work-mobile #stage:fullscreen {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 200 !important;
}
body.work-mobile.stage-fullscreen #stage .view-actions,
body.work-mobile #stage:fullscreen .view-actions {
  display: flex;
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 18px)) !important;
  gap: 8px;
  flex-wrap: nowrap;
  z-index: 10;
}
body.work-mobile.stage-fullscreen #stage .view-actions button {
  min-width: 44px;
  min-height: 48px;
}
body.work-mobile.stage-fullscreen #stage .stage-top {
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
}
body.work-mobile.stage-fullscreen #stageHint {
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 80px)) !important;
}

/* Notifications must not cover the full-screen exit or view buttons. */
body.work-mobile.stage-fullscreen #toast {
  display: none !important;
}

/* Toast messages are informational; never intercept model view control taps. */
body.work-mobile #toast { pointer-events: none !important; }