/* Fit the editor to the visible browser area, including Safari's changing bars.
   The tools scroll inside their panels; the hoop and playback stay in view. */
@media screen {
  html,body{height:100%;overflow:hidden}
  body{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
  .studio{height:auto;min-height:0;position:relative;grid-template-columns:260px minmax(0,1fr) 280px}
  .library{overflow-y:auto;overscroll-behavior:contain}
  .library>.rail-section{flex-shrink:0}
  .order-section{flex:1 0 260px}
  .object-list{flex:1 1 auto;max-height:36dvh;min-height:104px;overflow:auto}
  #browser-engine-panel{order:3}
  #satin-column-tools{order:2}
  .order-section{order:1}
  .workarea{min-height:0;height:auto;overflow:hidden;container-type:inline-size}
  .canvas-wrap{min-height:0}
  button,summary,.object-row{touch-action:manipulation}
  .object-row,.canvas-tools,.studio-nav,canvas{-webkit-user-select:none;user-select:none}
  .canvas-topbar{flex-wrap:wrap;padding:8px 12px 0;gap:6px}
  .canvas-tools{display:flex;gap:2px;align-items:center}
  .canvas-tools button{padding:6px 8px;min-height:36px;font-size:12.5px}
  .canvas-tools [aria-pressed=true]{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand)}
  .zoom-controls{margin-left:auto}
  .canvas-caption{left:12px;right:12px;bottom:6px;font-size:11.5px;line-height:1.3}
  .playback{display:grid;grid-template-columns:36px minmax(0,1fr);gap:3px 10px;padding:6px 12px;flex-shrink:0}
  .play-button{grid-column:1;grid-row:1}
  .playback-main{grid-column:2;grid-row:1;min-width:0}
  .playback-meta{flex-wrap:wrap;gap:0 12px;margin:0;line-height:1.4}
  .playback-meta span{white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
  .playback-meta #playback-position{white-space:nowrap}
  .speed{grid-column:2;grid-row:2;justify-self:start;display:flex}
  .jump-toggle{grid-column:2;grid-row:2;justify-self:end}
  .design-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:auto;min-width:0}
  .design-stats>div{min-width:0;padding:6px 10px;flex:none}
  .design-stats strong{font-size:16px;line-height:1.3;white-space:nowrap}
  .design-stats>div>span{white-space:nowrap}
  .design-stats .machine-note{grid-column:1/3;max-width:none;margin:0;padding:4px 10px 6px;font-size:11.5px}
  .design-stats .engine{grid-column:3/5;display:flex;padding:4px 10px 6px}
  .design-stats .engine span:last-child{white-space:normal;overflow-wrap:anywhere;font-size:11.5px}
  .panel-close,.studio-nav,.panel-backdrop{display:none}
  dialog{max-height:calc(100dvh - 24px)}
}
@media screen and (max-width:1280px){
  .brand-name span{display:none}
  /* The app switcher still reads "CutArc ▾" here (js/app-switcher.js). */
  .brand-name .cutarc-apps-label,.brand-name .cutarc-apps-brand{display:inline}
  .project-title{width:150px}
  .app-header{gap:8px}
}
@media screen and (max-width:1100px){
  .app-header{height:auto;min-height:56px;flex-wrap:wrap;padding:6px 12px;gap:4px 8px}
  .brand{border:0;padding:0}
  .project-title{flex:1;min-width:130px;width:auto;order:0}
  .header-actions{margin-left:auto}
  .history-controls{display:flex}
  .menu-panel{max-height:calc(100dvh - 100px);overflow:auto;width:min(300px,calc(100vw - 24px))}
  .menu-panel .header-setup{display:grid;order:0;width:auto;margin:6px 0 0;gap:8px;padding:8px 4px;border-top:1px solid var(--line)}
  .menu-panel .setup-field{min-width:0}
  .menu-panel .setup-field>span{display:inline}
  .menu-panel #project-library,.menu-panel #account-link{display:block;width:100%;text-align:left;margin-top:4px}
  .studio{display:block;height:auto;overflow:hidden}
  .workarea{height:100%;min-height:0}
  .library,.inspector{position:absolute;top:0;bottom:0;width:min(360px,calc(100% - 36px));max-width:100%;z-index:22;visibility:hidden;overflow-y:auto;overscroll-behavior:contain;border-top:0}
  .library{left:0;border-right:1px solid var(--line)}
  .inspector{right:0;border-left:1px solid var(--line)}
  .inspector-scroll{overflow:auto;min-height:0}
  .generate-area{position:static;flex-shrink:0}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-close{display:flex;align-self:flex-end;align-items:center;justify-content:center;margin:6px 8px;flex-shrink:0;min-height:40px}
  .studio-nav{display:flex;gap:6px;padding:4px max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid var(--line);background:var(--panel)}
  .studio-nav button{flex:1;min-height:44px;border-color:transparent}
  .studio-nav button[aria-expanded=true],.studio-nav button[aria-pressed=true]{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand)}
  body[data-studio-panel=tools] .library,body[data-studio-panel=properties] .inspector{visibility:visible}
  body[data-studio-panel] .panel-backdrop{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:rgb(28 41 36/.35);z-index:21}
  .design-stats>div{flex:none;border-bottom:0}
}
@media screen and (max-width:600px){
  .brand-name{display:none}
  /* Phones: only the app switcher's arrow shows next to the mark. */
  .brand-name:has(#cutarc-apps-button){display:inline}
  .brand-name #cutarc-apps-button .cutarc-apps-brand{display:none}
  .brand-name #cutarc-apps-button{min-width:32px;min-height:32px;justify-content:center;padding:0;margin:-4px 0 -4px -4px}
  .project-title{order:4;flex-basis:100%;display:flex;flex-direction:row;align-items:center;gap:8px}
  .project-title input{min-width:0;flex:1}
  .project-title>span{white-space:nowrap;flex-shrink:0}
  .header-actions{gap:4px}
  .canvas-topbar{padding:6px 8px 0;gap:4px}
  .view-switch{order:0}
  .view-switch button{padding:5px 8px}
  .zoom-controls{order:1}
  .canvas-tools{order:2;width:100%}
  .canvas-tools button{flex:1}
  .playback{padding:4px 8px;gap:2px 8px}
  .design-stats>div{padding:4px 6px}
  .design-stats strong{font-size:15px}
  .design-stats span{font-size:11px}
  .design-stats .machine-note,.design-stats .engine{padding:4px 6px;font-size:11px}
  .design-stats .engine span:last-child{font-size:11px}
}
@media screen and (any-pointer:coarse){
  button,.icon-button,.zoom-controls button,.play-button,.order-actions button,.view-switch button,.canvas-tools button,.panel-close,.menu summary,.account-link{min-height:44px}
  .icon-button,.play-button,.zoom-controls button,.eye-button{min-width:44px}
  .app-header{height:auto;min-height:56px}
  .playback{grid-template-columns:44px minmax(0,1fr)}
  .speed{grid-column:2;grid-row:2}
  .jump-toggle{grid-column:2;grid-row:2}
  .scrub-wrap,#scrub{height:44px}
  .thread-track{top:18px}
  #scrub::-webkit-slider-runnable-track{height:44px}
  #scrub::-webkit-slider-thumb{width:18px;height:32px;margin-top:6px;border-radius:5px}
  #scrub::-moz-range-thumb{width:18px;height:32px;border-radius:5px}
  .speed,.jump-toggle{min-height:40px}
  .jump-toggle input{width:20px;height:20px}
  .toggle-label{min-height:44px}
  input:not([type=range]):not([type=color]):not([type=checkbox]),select,textarea,.setup-field select,.speed select{font-size:16px!important;min-height:40px}
  .palette{grid-template-columns:repeat(5,minmax(0,1fr))}
  .palette button{min-width:0;min-height:36px}
  .canvas-caption{font-size:11px}
}
@container (min-width:700px){
  .playback{grid-template-columns:44px minmax(0,1fr) auto auto}
  .speed,.jump-toggle{grid-column:auto;grid-row:1}
}
@media screen and (max-height:550px) and (min-width:600px){
  .project-title{flex-basis:auto;min-width:100px}
  .canvas-topbar{flex-wrap:nowrap;padding-top:4px}
  .canvas-tools{width:auto}
  .canvas-caption{display:none}
  .playback{grid-template-columns:44px minmax(0,1fr) auto auto;gap:8px;padding:2px 8px}
  .speed,.jump-toggle{grid-column:auto;grid-row:1}
  .design-stats{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(150px,1.5fr)}
  .design-stats .machine-note{display:none}
  .design-stats .engine{grid-column:5;grid-row:1}
  .drawing-bar{margin:4px 8px 0;padding:2px 6px}
}