.main-container{grid-template-rows:auto auto minmax(0,1fr) auto}
.main-container>.topbar{grid-row:1;min-width:0;flex-wrap:wrap;gap:8px 12px;padding:8px 12px}
.main-container>.reference-editor-panel{grid-row:2;min-width:0}
.main-container>.workspace{grid-row:3;min-width:0}
.main-container>.bottom-dock{grid-row:4;min-width:0}
.topbar .topbar-group,.topbar .topbar-user{min-width:0;max-width:100%;flex-wrap:wrap}
.topbar select{max-width:100%}
.topbar #topbarUserName{overflow-wrap:anywhere}
.image-wrapper{min-width:0}
.reference-editor-toggle{border:1px solid #b98016;border-radius:8px;background:var(--surface,#fff);color:var(--text,#172027);padding:7px 12px;font-weight:650;white-space:nowrap;cursor:pointer}
.reference-editor-toggle.active{background:#8a610c;color:#fff}
.reference-editor-panel[hidden],.reference-editor-toggle[hidden]{display:none!important}
.reference-editor-panel{flex:0 0 auto;border-bottom:1px solid #b98016;background:var(--surface,#fff);color:var(--text,#172027);padding:10px 18px;max-height:32vh;overflow:auto}
.reference-editor-heading{display:flex;align-items:center;gap:12px;font-size:13px}
.reference-editor-heading>strong{color:#a26b07}
.reference-editor-heading>span{font-weight:650}
.reference-editor-heading>button{margin-left:auto}
.reference-editor-content{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.reference-editor-content>div:first-child{flex:1;min-width:220px}
.reference-editor-content p{margin:4px 0;font-size:13px}
.reference-editor-panel .reference-editor-note{font-size:12px;color:var(--text-muted,#586676);line-height:1.45;margin:4px 0}
.reference-editor-readouts{display:flex;flex-direction:column;gap:6px;font-size:12px;font-variant-numeric:tabular-nums}
.reference-editor-readouts strong{margin-left:6px}
.reference-editor-actions,.reference-dialog-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reference-editor-panel button,.reference-save-dialog button{border:1px solid var(--border,#cbd4db);border-radius:8px;padding:8px 12px;min-height:36px;background:var(--surface,#fff);color:var(--text,#172027);font:inherit;font-size:12px;cursor:pointer}
.reference-editor-panel button:disabled,.reference-save-dialog button:disabled{opacity:.5;cursor:default}
button.reference-primary{background:#096f68;color:white;border-color:#096f68;font-weight:650}
.reference-save-dialog{background:var(--surface,#fff);color:var(--text,#172027);border:1px solid var(--border,#cbd4db);border-radius:14px;padding:24px;max-width:460px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;box-sizing:border-box}
.reference-save-dialog::backdrop{background:rgba(10,20,30,.6)}
.reference-save-dialog h2{font-size:20px;margin:0 0 12px}
.reference-save-dialog p{font-size:14px;line-height:1.5}
.reference-save-dialog label{display:block;margin:16px 0 6px;font-size:13px;font-weight:650}
.reference-save-dialog input{width:100%;box-sizing:border-box;min-height:44px;border:1px solid var(--border,#cbd4db);border-radius:8px;padding:10px;background:var(--surface,#fff);color:var(--text,#172027);font-size:16px}
.reference-save-error{color:#be312c!important}
.reference-dialog-actions{justify-content:flex-end}
@media(max-width:700px){.reference-editor-panel{padding:8px 12px;max-height:36dvh}.reference-editor-heading{flex-wrap:wrap;gap:8px}.reference-editor-content{gap:8px}.reference-editor-readouts{width:100%}.reference-editor-panel button,.reference-save-dialog button,.reference-editor-toggle{min-height:44px}.reference-editor-actions{width:100%}.reference-editor-actions button{flex:1}.reference-editor-content>div:first-child{min-width:0}}
/* A landscape phone can be wider than the ordinary mobile breakpoint. Keep
   its existing stacked workspace, without changing the layout of a laptop. */
@media(pointer:coarse) and (min-width:821px) and (max-width:1000px){
  html,body{height:auto;overflow-y:auto;overflow-x:hidden}
  .main-container{height:auto;min-height:100vh}
  body.game-panel-open .main-container{width:100vw}
  .topbar .spacer{display:none}
  .workspace,.workspace.stereo,.workspace.sidebar-collapsed,.workspace.stereo.sidebar-collapsed,.workspace.stereo.right-collapsed,.workspace.stereo.sidebar-collapsed.right-collapsed{grid-template-columns:1fr}
  .image-wrapper{order:-1;min-height:max(52vh,280px)}
  .menu,.right-menu{border-left:none;border-right:none;border-top:1px solid var(--border);max-height:none}
  .workspace.sidebar-collapsed .menu .menu-body,.workspace.sidebar-collapsed .menu .menu-header h3,.workspace.right-collapsed .right-menu .menu-body,.workspace.right-collapsed .right-menu .menu-header h3{display:block}
  .collapse-btn{display:none}
  .workspace.stereo .image-wrapper{flex-direction:column}
  .menu button,.right-menu button,.reference-editor-toggle,.reference-editor-panel button{min-height:44px}
}