/* Desktop comparison rules remain in style.css; these overrides target phones only. */
#upload-preview{display:none}
/* Scoped to the editor, including its SVG image and touch targets. */
#eye-canvas,#eye-canvas *{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.workspace>*{min-width:0}fieldset,figure{min-width:0}
@media(max-width:700px){
  #upload-preview:not([hidden]){display:grid;gap:12px;min-width:0}
  #upload-original{display:block;width:100%;height:auto;max-height:min(40dvh,320px);object-fit:contain;background:#f3eee8;border-radius:10px}
  #upload-card.has-upload-preview>.upload,#upload-card.has-upload-preview>#photo{display:none}
  #change-photo{width:100%}
  .compare-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .photo-area:has(img:not([hidden])){aspect-ratio:auto;display:block}
  .photo-area img:not([hidden]){display:block;width:100%;height:auto;object-fit:contain;max-width:100%}
  .card{min-width:0}.section-head{flex-wrap:wrap}main{padding-left:4%;padding-right:4%}
  #photo{max-width:100%;min-width:0;font-size:13px}
  button,input[type=file]::file-selector-button{min-height:48px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;flex-shrink:0}
  .check{min-height:44px;align-items:center;font-size:13px;gap:10px}
  .upload{min-height:160px}.result-footer{align-items:stretch;gap:8px}
  #download{width:100%}.comparison{scroll-margin-top:12px}
  .topbar{gap:10px;flex-wrap:wrap}.brand{max-width:100%}
}
/* A selected point uses a small marker and a separate 44px screen-space hit target. */
#eye-canvas [data-hit]{pointer-events:all;cursor:grab}
#eye-canvas[data-tool=pan]{cursor:grab}#eye-canvas[data-moving=true]{cursor:grabbing}
.editor-selection{font-size:12px;line-height:1.6;background:#f1e7d8;border-radius:8px;padding:9px 12px;min-height:58px}
#editor-view-scale{font-size:12px;color:#766c63;min-width:72px}
@media(max-width:600px){
  #eye-editor{width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:96dvh;margin:auto;padding:12px}
  .editor-head{position:sticky;top:-12px;background:#fffdfa;z-index:2;padding:8px 0}
  .editor-tools>*{max-width:100%;min-width:0}.editor-tools select{max-width:100%;font-size:16px}
  .editor-tools label{flex-wrap:wrap}.editor-tools button{padding:10px 12px;white-space:normal}
  #eye-canvas{height:38dvh;min-height:240px;width:100%;max-width:100%}
  .editor-actions{z-index:2;gap:8px}.editor-actions button{min-width:0;white-space:normal;min-height:48px}
  #editor-diameters{font-size:11px}#editor-zoom{min-height:44px;max-width:180px}
  #eye-editor pre{max-width:100%}
}