/* Host layout is responsive; the phone's internal layout is always 390 × 844. */
.phone-preview {display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;gap:5px;width:100%;}
.phone-preview-slot {position:relative;flex:1;min-height:0;min-width:0;width:100%;overflow:clip;}
.phone-preview-screen {box-sizing:border-box;position:absolute;left:50%;top:50%;width:390px!important;height:844px!important;min-width:390px!important;max-width:390px!important;max-height:844px!important;transform:translate(-50%,-50%) scale(var(--phone-scale,0));transform-origin:center;isolation:isolate;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px #0002;}
.phone-preview-screen>* {box-sizing:border-box;}
.phone-preview .phone-preview-expand {display:flex;align-items:center;justify-content:center;gap:12px;align-self:center;flex:none;width:auto;min-height:28px;margin:0;padding:3px 8px;border:0;border-radius:5px;background:transparent;color:#66716a;font:12px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;cursor:pointer;}
.phone-preview .phone-preview-expand:hover {color:#078948;background:#edf8ef;}
.phone-preview-expand:focus-visible {outline:2px solid #07c160;outline-offset:2px;}
@media(max-width:960px),(max-height:619px) {
 .phone-preview {flex:none;}
 .phone-preview-slot {flex:none;width:min(390px,100%);aspect-ratio:390 / 844;margin-inline:auto;}
 .phone-preview .phone-preview-expand {min-height:40px;font-size:13px;}
}
.dialog.phone-zoom-dialog {width:min(462px,calc(100% - 24px));max-height:calc(100dvh - 24px);}
.phone-zoom-dialog .dialog-header {padding:16px 18px 0;align-items:center;}
.phone-zoom-dialog .dialog-header h2 {font-size:16px;}
.phone-zoom-dialog .dialog-body {padding:12px 18px 20px;}
.phone-zoom-dialog .phone-zoom-caption {margin:0 0 10px;color:#66716a;font-size:12px;}
.phone-zoom-dialog .phone-zoom-context {display:block;padding:0;margin:0;width:100%;height:auto;min-height:0;}
.phone-zoom-slot {position:relative;width:min(390px,100%);aspect-ratio:390 / 844;margin-inline:auto;}

/* Actual app pages use one fixed phone canvas throughout the exercises. */
.practice-artifact.has-phone {display:flex;flex-direction:column;min-height:0;border:0;border-radius:0;background:transparent;overflow:visible;}
.practice-artifact.has-phone>.phone-preview {height:100%;min-height:0;}
.phone-preview-screen>.play-chat,.phone-preview-screen>.play-navigation,
.phone-preview-screen>.visual-play,.phone-preview-screen>.work-play {width:390px;max-width:390px;height:844px!important;min-height:844px;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;}
.phone-preview-screen .play-appbar {height:52px;min-height:52px;flex-basis:52px;padding:10px 16px;font-size:17px;}
.phone-preview-screen .play-messages {padding:18px 16px;gap:16px;justify-content:flex-start;}
.phone-preview-screen .play-message {max-width:100%;gap:10px;}
.phone-preview-screen .play-message img {width:36px;height:36px;flex-basis:36px;}
.phone-preview-screen .play-message p {font-size:16px;line-height:1.65;padding:10px 12px;}
.phone-preview-screen .play-speaker {font-size:12px;}
.phone-preview-screen .play-menu>button {min-height:56px;padding:14px 18px;font-size:17px;}
.phone-preview-screen .play-find-goal {padding:14px 16px;}
.phone-preview-screen .play-navigation-footer {flex-wrap:wrap;font-size:13px;padding:12px 16px;}
.phone-preview-screen .wp-upload {flex:1;padding:40px 24px;}
.phone-preview-screen .wp-sheet-stage {flex:1;display:flex;flex-direction:column;}
.phone-preview-screen .wp-sheet {margin-top:auto;}
.phone-preview-screen .wp-transfer,.phone-preview-screen .wp-recipients {flex:1;}
.phone-preview-screen .vplay-body {min-height:0;}
.practice-history>button {flex:1;min-height:40px;}
.practice-context {margin-top:0;}
.practice-heading h1 {font-size:20px;}
.practice-heading .practice-help {display:flex;}
.practice-compare-previews .practice-artifact.has-phone {height:460px;min-height:0;}
.practice-compare-previews .phone-preview-expand {display:none;}
@media(max-width:960px),(max-height:619px) {
 .practice-artifact.has-phone,.practice-artifact.has-phone>.phone-preview {height:auto;min-height:0;}
 .practice-compare-previews .practice-artifact.has-phone {height:auto;}
}
@media(max-width:600px) {
 .practice-heading {gap:8px;}
 .practice-heading h1 {font-size:19px;}
 .practice-heading .practice-crumb {font-size:11px;}
 .practice-heading .commission-help {font-size:12px;}
 .practice-heading .commission-help .icon {display:none;}
}

.result-dialog.has-result-page {width:min(1040px,calc(100% - 32px));}
.result-with-preview {display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr);gap:22px;align-items:start;}
.result-page>h3 {font-size:14px;margin:0 0 10px;}
.result-page-preview {height:500px;display:flex;min-width:0;}
.result-page .phone-preview-expand {display:none;}
.result-with-preview .feedback {margin:0;min-width:0;}
.result-learning {display:block;font-size:14px;line-height:1.65;margin-bottom:12px;}
@media(max-width:600px) {
 .result-with-preview {grid-template-columns:1fr;}
 .result-page-preview {height:auto;}
}
/* The expand control is part of the outer workspace, not the phone canvas. */
.phone-preview .phone-preview-expand:focus-visible { outline-color: var(--ink); }