/* Mobile editor v2: a persistent workspace, not a dismissible sheet. */
.mobile-dock,.mobile-panel-head,.mobile-property-rail,.mobile-property-hint{display:none}
@media(max-width:699px){
  :root{--mobile-reserve:346px;--mobile-dock:calc(64px + env(safe-area-inset-bottom,0px));--editor-height:272px}
  html,body{overscroll-behavior:none}
  body{height:100dvh;-webkit-text-size-adjust:100%}
  button,a,select{touch-action:manipulation}
  button{user-select:none;-webkit-user-select:none}
  .brandhome{top:calc(18px + env(safe-area-inset-top,0px));left:20px}
  .brandhome span{display:inline;font-size:13px}
  .stage>.kit-nav{top:calc(8px + env(safe-area-inset-top,0px));right:12px;min-height:44px;display:flex;align-items:center;padding:0 8px;font-size:12px}
  .stagechrome{top:calc(56px + env(safe-area-inset-top,0px));left:20px;right:20px}
  .stagechrome .viewtabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .stagechrome .viewtabs button{font-size:12px;min-height:44px;padding:10px;color:#aeb5c0}
  .combo{margin-top:12px;font-size:9px;color:#9198a4}
  .combo b{font-size:13px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .readout{top:calc(150px + env(safe-area-inset-top,0px));left:20px;right:20px;display:flex;overflow-x:auto;overflow-y:hidden;gap:16px;padding:8px 0;animation:none;scrollbar-width:none}
  .readout::-webkit-scrollbar{display:none}
  .readout>span{flex:0 0 118px}
  .readout>span:nth-child(1){order:0}.readout>span:nth-child(4){order:1}.readout>span:nth-child(5){order:2}.readout>span:nth-child(2){order:3}.readout>span:nth-child(3){order:4}
  .readout i{font-size:10px;line-height:14px;color:#a3aab6;white-space:nowrap}
  .readout var{font-size:15px;line-height:18px}
  .readout .info{min-width:24px;height:24px;font-size:10px;flex-shrink:0}
  .readout .apblock,.readout>span:last-child{display:none}
  .stage svg.scene{top:calc(224px + env(safe-area-inset-top,0px));height:calc(100dvh - 236px - env(safe-area-inset-top,0px) - var(--mobile-reserve));min-height:0}
  .mobile-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;position:fixed;z-index:14;bottom:0;left:0;right:0;height:var(--mobile-dock);padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:var(--sheet-bg);border:0}
  .mobile-dock button{border:0;border-radius:8px;color:#939ca9;background:none;font:500 12px var(--sans);min-height:44px}
  .mobile-dock button[aria-pressed=true]{background:rgba(184,216,242,.065);color:#e7edf3}
  .mobile-dock button:focus-visible,.mobile-property-rail button:focus-visible{outline:2px solid #a3c8e8;outline-offset:-2px}
  body .controls,body.mode-frame .controls,body.mode-frame .controls.open,body.in-lesson .controls{
    top:auto;left:0;right:0;bottom:var(--mobile-dock);width:auto;height:var(--editor-height);max-height:calc(100dvh - 240px - var(--mobile-dock));
    padding:0 20px 12px;overflow:auto;overscroll-behavior:contain;transform:none;visibility:visible;transition:none;box-shadow:none;border:0;border-radius:0;background:var(--sheet-bg);scrollbar-width:none}
  .controls::-webkit-scrollbar{display:none}
  body[data-mobile-panel=gear] .controls,body[data-mobile-panel=scene] .controls,body[data-mobile-panel=lesson] .controls{height:350px}
  .controls .sheet-grip{display:none}
  .mobile-panel-head{display:flex;align-items:center;position:sticky;top:0;order:-10;z-index:15;background:var(--sheet-bg);padding:16px 0;min-height:56px;flex-shrink:0}
  .mobile-panel-head strong{font:500 15px var(--sans);color:var(--txt-hi)}
  .mobile-panel-head[hidden],.mobile-property-rail[hidden],.mobile-property-hint[hidden]{display:none}
  .controls>.ctabs,.controls>.sect,.controls>.pip,.controls>.plib,.controls>.optical-library,.controls>.gap,.controls>.credits,.controls>.explain-panel,.controls>.lesson-panel{display:none!important}
  .mobile-property-rail{display:flex;position:relative;order:-9;flex-shrink:0;overflow-x:auto;overflow-y:hidden;width:calc(100% + 40px);margin:0 -20px 8px;gap:12px;padding:12px calc(50% - 22px) 4px;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;box-sizing:border-box}
  .mobile-property-rail::-webkit-scrollbar{display:none}
  .mobile-property-rail button{position:relative;flex:0 0 84px;min-height:88px;padding:6px 0 14px;border:0;border-radius:12px;scroll-snap-align:center;background:none;color:#969eab;font:400 11px var(--sans)}
  .mobile-property-rail button[aria-pressed=true]{background:rgba(184,216,242,.065);color:#f1f2f3;font-weight:500}
  .mobile-property-rail button[aria-pressed=true]::after{content:"";position:absolute;bottom:8px;left:calc(50% - 5px);width:10px;height:2px;background:#b8d8f2;border-radius:2px;opacity:.8}
  .mobile-property-icon{display:flex;align-items:center;justify-content:center;width:44px;height:40px;margin:0 auto 6px}
  .mobile-property-icon svg{width:21.6px;height:21.6px}
  .mobile-property-rail button[aria-pressed=true] svg{color:#b8d8f2;transform:scale(1.12)}
  body[data-mobile-panel=adjust] .controls>.sect.mobile-active-section{display:block!important;order:0;padding:0;margin:0}
  body[data-mobile-panel=adjust] .mobile-active-section>*{display:none!important}
  body[data-mobile-panel=adjust] .mobile-active-section>.mobile-active-rail{display:block!important;margin:0}
  .controls .rail .lbl{position:relative;min-height:44px;justify-content:center;margin:0 0 4px;gap:0}
  .controls .rail .lbl>span{font-size:0}
  .controls .rail .lbl>span>.info{position:absolute;right:0;top:0;min-width:44px;min-height:44px;font-size:12px;background:none;color:#a0a9b6}
  .controls .rail .lbl var{font:400 30px var(--sans);font-variant-numeric:tabular-nums;color:var(--txt-hi);white-space:nowrap}
  .controls .rail .lbl var u{font:12px var(--sans);color:#a0a9b6;margin-left:5px}
  .controls .rail .lock{display:none}
  .controls .rail .track{height:44px;margin:0 4px}
  .controls .rail .ticks{display:none}
  .controls .rail input[type=range]{appearance:none;-webkit-appearance:none;position:relative;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;background:none;touch-action:pan-y}
  .controls .rail input[type=range]::-webkit-slider-runnable-track{height:2px;margin:0;border:0;border-radius:2px;background:linear-gradient(to right,#b8d8f2 var(--range-progress,0%),#32363e var(--range-progress,0%))}
  .controls .rail input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border:0;border-radius:50%;background:#eaf0f5;box-shadow:none}
  .controls .rail input[type=range]::-moz-range-track{height:2px;border:0;border-radius:2px;background:#32363e}
  .controls .rail input[type=range]::-moz-range-progress{height:2px;background:#b8d8f2;border:0}
  .controls .rail input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#eaf0f5;box-shadow:none}
  .controls .rail input:disabled{opacity:.4}
  .mobile-property-hint{display:block;order:1;font:12px/1.5 var(--sans);text-align:center;color:#a0a9b6;margin:4px 0 0}
  .controls .rail .note,.controls #focalPreviewNote,.controls .photo-focus-note{font:12px/1.5 var(--sans);color:#a0a9b6;margin:8px 0;text-align:center}
  .controls .rail .note:empty{display:none}
  body[data-mobile-panel=adjust] .mobile-active-section:has(#railFd.mobile-active-rail)>.framing{display:flex!important;margin:12px 0 0;gap:8px}
  .controls #framing>span{font:11px var(--sans);color:#a0a9b6;margin-bottom:4px}
  .controls #framing button{min-height:44px;flex:1 1 calc(50% - 8px);border:0;color:#c0c8d2}
  body[data-mobile-panel=gear] .controls>.sect[data-ct=gear],body[data-mobile-panel=gear] .controls>.credits,body[data-mobile-panel=gear] .controls>.gap,body[data-mobile-panel=gear] .controls>.explain-panel{display:block!important}
  body[data-mobile-panel=gear] .controls>.sect h3{display:none}
  body[data-mobile-panel=scene] .controls>.optical-library{display:block!important;position:relative;left:auto;right:auto;top:auto;width:auto;order:0}
  body[data-mobile-panel=scene] .controls>.pip{display:block!important;position:relative;order:1;margin:12px 0 0}
  .controls .scene-picker select{font-size:16px;min-height:44px}
  body.mode-frame .pip:not(.expanded){top:calc(220px + env(safe-area-inset-top,0px));left:20px;right:20px;bottom:calc(var(--mobile-reserve) + 12px);height:auto;width:auto;max-height:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
  body.mode-frame .pip:not(.expanded) .pipbox{max-height:100%;width:100%;display:flex;justify-content:center;align-items:center}
  body.mode-frame .pip:not(.expanded) canvas{max-height:100%;width:100%;object-fit:contain}
  body.mode-frame>.plib{display:none!important}
  .pip{animation:none}
  body.mode-compare .cmp,body.mode-compare:has(.controls.open) .cmp{top:calc(158px + env(safe-area-inset-top,0px));left:20px;right:20px;bottom:calc(var(--mobile-reserve) + 12px);grid-template-columns:1fr;gap:12px}
  .comparison-lens-slot .picker{border:0;border-top:1px solid var(--hairline);padding:10px 0;min-height:80px}
  .comparison-lens-slot .picker .val{font-size:12px;line-height:1.5;white-space:normal}
  .cmpcol .row{flex-wrap:wrap;gap:4px}.cmpcol .row s{display:none}
  .compare-actions .kit-save{gap:6px}
  body[data-mobile-panel=lesson] .controls>.lesson-panel:not([hidden]){display:block!important}
}
@media(max-width:699px) and (max-height:700px){
  :root{--editor-height:232px}
  .combo,.readout{display:none!important}
  .stage svg.scene{top:114px;height:calc(100dvh - 126px - var(--mobile-reserve))}
  body.mode-frame .pip:not(.expanded){top:114px}
  body.mode-compare .cmp,body.mode-compare:has(.controls.open) .cmp{top:114px}
  .mobile-property-rail{padding-top:4px;margin-bottom:0}
  .mobile-property-rail button{min-height:76px}
  .mobile-property-icon{height:30px}
}
/* Lessons live with the tools instead of covering the small-screen stage. */
@media(max-width:699px){
  .mobile-dock{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-inline:12px}
  .mobile-dock .lesson-launch{position:static;min-width:0;margin:0;padding:0 6px!important;
    font:500 13px var(--sans)!important;background:var(--tab-bg)!important;
    color:var(--txt-val);border-radius:8px}
  .in-lesson .mobile-dock .lesson-launch{display:none}
  .in-lesson .mobile-dock{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:700px) and (max-width:1024px){
  .controls>.lesson-launch{position:static;order:-1;align-self:flex-start;flex-shrink:0;
    margin:8px 0 12px;min-height:44px;font-size:13px}
  .in-lesson .controls>.lesson-launch{display:none}
}
/* The live aperture remains in the main diagram and its adjustment control. */
@media(min-width:1025px) and (max-width:1599px){
  .readout .apblock{display:none}
  .readout{padding-right:0}
}

@media(min-width:700px) and (max-width:1024px){.controls>.sheet-grip{order:-2}}

/* Small-screen comparison: one full-width result, with a persistent A/B switch. */
@media(max-width:1024px){
  body.mode-compare .cmp,body.mode-compare .cmpdelta{grid-template-columns:minmax(0,1fr)}
  body.mode-compare .cmpab{display:flex;align-items:center;position:sticky;
    top:0;z-index:10;width:100%;justify-self:stretch;gap:12px;padding:0;
    background:#191b21;border:0;border-radius:0}
  .cmpab::before{content:"Viewing";font:12px var(--sans);color:#939ca9;margin-right:4px}
  .cmpab button{position:relative;min-height:44px;padding:10px 12px;
    font-size:13px;color:#939ca9;border-radius:0;background:none}
  .cmpab button[aria-pressed=true]{color:#f1f2f3;background:none}
  .cmpab button[aria-pressed=true]::after{content:"";position:absolute;
    bottom:3px;left:12px;right:12px;height:2px;background:#a3c8e8;border-radius:1px}
  .cmpab button:focus-visible{outline:2px solid #a3c8e8;outline-offset:-2px}
  body.mode-compare .cmp:not(.showB) #paneA,
  body.mode-compare .cmp:not(.showB) .cmpside.colA,
  body.mode-compare .cmp.showB #paneB,
  body.mode-compare .cmp.showB .cmpside.colB{display:block;min-width:0}
  body.mode-compare .cmp.showB #paneA,
  body.mode-compare .cmp.showB .cmpside.colA,
  body.mode-compare .cmp:not(.showB) #paneB,
  body.mode-compare .cmp:not(.showB) .cmpside.colB{display:none}
  .cmpcol .row{justify-content:space-between}
  .cmpcol .row i,.cmpcol .row var{font-size:13px}
}

/* Consistent insets for every simulator dropdown, including comparison cards. */
.picker{padding-left:8px!important;padding-right:8px!important}
select{padding-left:8px!important;padding-right:8px!important}
.mobile-panel-head select{
  appearance:none;-webkit-appearance:none;padding-right:36px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23abb4c1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}

/* Let the hit area extend around the shared text edge, rather than indenting
   dropdown labels further than headings, descriptions, and slider labels. */
.controls .picker,.comparison-lens-slot .picker{
  margin-left:-8px;margin-right:-8px;width:calc(100% + 16px);box-sizing:border-box;
}
.library-head>.scene-picker{width:auto}
.mobile-panel-head>label{margin-left:-8px}

/* Distance presets move the simulated camera; a source photo cannot move. */
body.mode-frame #simulatorControls #framing,body.mode-compare #simulatorControls #framing{display:none!important}
body.mode-frame .lock,body.mode-compare .lock{display:none}
.photo-focus-note{display:none;font-size:12px;line-height:1.55;color:#a0a9b6;margin:14px 0 0}
body.mode-frame #railFd .photo-focus-note,body.mode-compare #railFd .photo-focus-note{display:block}
@media(max-width:699px){
  .controls .rail [data-dial-hint],.controls .rail .photo-focus-note{display:none!important}
  body[data-mobile-panel=adjust]:has(#focalPreviewNote:not([hidden])) .mobile-property-hint{display:none}
  body:not(.mode-frame):not(.mode-compare) .controls .rail .lock{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0;font:12px var(--sans);color:#a0a9b6}
  .controls .rail .lock input{width:18px;height:18px}
  .controls .rail .lock span{display:flex;align-items:center;gap:4px}
}
.mobile-framing-presets{display:none}
@media(max-width:699px){
  body:not(.mode-frame):not(.mode-compare)[data-mobile-panel=adjust]:has(#railFd.mobile-active-rail) .mobile-framing-presets{display:block;order:2;font:12px/1.5 var(--sans);color:#a0a9b6}
  .mobile-framing-presets summary{min-height:44px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;list-style:none}
  .mobile-framing-presets summary::-webkit-details-marker{display:none}
  .mobile-framing-presets summary::after{content:'+';font-size:18px}
  .mobile-framing-presets[open] summary::after{content:'−'}
  .mobile-framing-presets #framing{display:flex;margin-top:4px}
  .mobile-framing-presets #framing>span{display:none}
  body:not(.mode-frame):not(.mode-compare)[data-mobile-panel=adjust]:has(#railFd.mobile-active-rail) .mobile-property-hint{display:none}
}
@media(max-width:699px){
  .cmppane canvas{max-height:max(80px,calc(100dvh - var(--mobile-reserve) - 222px - env(safe-area-inset-top,0px)));object-fit:contain;background:none}
}
@media(max-width:699px) and (max-height:700px){
  .cmppane canvas{max-height:max(72px,calc(100dvh - var(--mobile-reserve) - 178px))}
}
@media(max-width:699px){
  body[data-mobile-panel=adjust] .controls>.explain-panel:has(input:checked){display:block!important;order:3;font-size:12px;line-height:1.5;margin-top:12px}
}