/* The canvas owns the height; controls live in the two side columns. */
body.studio-docked{height:100dvh;overflow:hidden;background:#e9e8e2}
body.studio-docked .builder-layout{grid-template-columns:76px minmax(0,1fr) 320px;grid-template-rows:minmax(0,1fr);height:100dvh!important;min-height:0}
.studio-docked .studio-rail{padding:15px 7px 12px;gap:4px;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* The embedded return sits outside the scrolling viewport, even in a short window. */
.studio-docked.builder-embedded .studio-rail{margin-top:64px;height:calc(100% - 64px);padding-top:6px}
.studio-docked .editor-steps{gap:4px;flex:none;min-width:0}
.studio-docked .editor-steps button,.studio-docked .rail-setup{flex-shrink:0;min-width:0;max-width:100%;height:auto;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-transform:none;text-align:center;letter-spacing:0;line-height:1.25}
.studio-docked .editor-steps button{min-height:58px;font-size:10px}
.studio-docked .editor-steps button>span[aria-hidden],.studio-docked .rail-setup>span[aria-hidden]{flex-shrink:0}
.studio-docked .editor-steps button>span:not([aria-hidden]),.studio-docked .rail-setup>span:not([aria-hidden]){min-width:0;max-width:100%;font:inherit;line-height:inherit}
.studio-docked .rail-setup{margin-top:7px;min-height:57px;padding:7px 1px}
.studio-docked .rail-home{padding-top:15px;flex-shrink:0;max-width:100%}
.studio-docked .editor-sidebar{overflow:auto;min-height:0;scrollbar-gutter:stable;background:#fbfaf7}
.studio-side-controls{position:sticky;top:0;z-index:12;background:#fbfaf7;border-bottom:1px solid #dcd9cf;flex:none;padding:0 16px;box-shadow:0 5px 12px #312c1705;color:#24241e}
.studio-docked .preview-toolbar{padding:17px 0 12px;min-height:0;border:0;background:none;gap:10px}
.studio-docked .preview-caption{font-size:8px;line-height:1.4;letter-spacing:.07em}
.studio-docked .preview-business{font-size:16px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:174px}
.studio-docked .viewport-switch{border:0;padding:3px;border-radius:7px;gap:1px;flex:none}
.studio-docked .viewport-switch button{padding:5px;min-height:30px;width:30px;display:grid;place-items:center;border-radius:5px}
.studio-docked .viewport-switch button span{display:none}
.studio-docked .viewport-switch button svg{width:16px;height:16px}
.studio-docked .studio-canvas-tools{padding:0;gap:8px;border:0;background:none;flex-wrap:wrap}
.studio-docked .canvas-mode-switch{flex:1;gap:2px;padding:3px;border:1px solid #e1ded4;background:#efede6;border-radius:7px}
.studio-docked .canvas-mode-switch button{flex:1;padding:7px 8px;font-size:11px;border-radius:4px}
.studio-docked .canvas-history{margin-left:0;gap:3px}
.studio-docked .canvas-history button{width:29px;height:31px;font-size:20px;border-radius:5px}
.studio-docked .canvas-tool-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.studio-docked .canvas-tool-hint[data-error=true]{position:static;clip-path:none;width:auto;height:auto;flex:1 0 100%;font-size:11px;padding:9px;background:#fff0e8;border-radius:5px}
.studio-docked .studio-test-shortcut{display:none}
.studio-zoom-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;font-size:11px}
.studio-zoom-controls>label{display:flex!important;align-items:center;gap:7px;margin:0!important;font-size:10px!important;color:#747065}
.studio-zoom-controls svg{width:15px;height:15px}
.studio-zoom-input{display:flex;align-items:center;gap:1px;background:#eeece5;border:1px solid #dedacf;border-radius:6px;padding:2px}
.studio-zoom-input button{width:28px;height:27px;padding:0;border-radius:4px;background:transparent;color:#343127;font-size:17px}
.studio-zoom-input button:hover:not(:disabled){background:#fff}
.studio-zoom-input select{width:78px;padding:3px 16px 3px 6px;min-height:27px;height:27px;border:0;background:transparent;border-radius:0;font:11px var(--mono);text-align:center}
.studio-side-links{display:grid;grid-template-columns:1fr 1.1fr;gap:7px}
.studio-side-links button{margin:0;min-width:0;min-height:37px;font-size:10px;padding:8px;border-radius:6px;display:flex;justify-content:center;align-items:center;gap:6px;line-height:1.3}
.studio-side-links .studio-test-launch{background:var(--studio-action);border:1px solid var(--studio-action);color:#fff;text-align:center}
.studio-fullsize-launch{border:1px solid #cbc6b9;background:#fff;color:#3b362a}
.studio-fullsize-launch svg{width:15px;height:15px;flex:none}
.studio-docked .preview-notice{padding:8px 0;min-height:27px;font-size:9px;line-height:1.4;border:0;background:none;color:#827e72}
.studio-docked .preview-notice .status-indicator{width:5px;height:5px}
.studio-viewport-feedback,.studio-docked .studio-test-feedback{margin:8px 0;padding:9px;border-radius:5px;background:#f8e8eb;color:#9d3020;font-size:11px;line-height:1.5}
.studio-docked .editor-journey{height:auto;min-height:0;padding:15px 16px 13px;display:block;background:#f1efe7;flex:none}
.studio-docked .editor-journey-steps{display:flex;width:100%;justify-content:space-between;gap:8px}
.studio-docked .editor-journey-steps button{padding:0;gap:5px;font-size:10px;white-space:normal;line-height:1.3}
.studio-docked .editor-journey-steps b{font-size:8px;width:21px;height:21px;flex:none}
.studio-docked .editor-journey-steps small,.studio-docked .journey-connector,.studio-docked #journey-note{display:none}
.studio-docked .editor-journey-next{display:flex;justify-content:flex-end;margin-top:10px}
.studio-docked .editor-journey-next button{border:0;background:none;color:#8f3827;padding:3px 0;font-size:10px}
.studio-docked .journey-error{font-size:11px;padding:12px 16px}
.studio-docked .editor-intro{padding:18px 18px 0;border:0;background:none}
.studio-docked .editor-intro .mono-kicker,.studio-docked.studio-visual #journey-panel-help{display:none}
.studio-docked .editor-intro h1{font-size:11px;margin:0;color:#858073;font-weight:400;letter-spacing:0}
.studio-docked .editor-panels{padding:9px 18px 20px}
.studio-docked .panel-heading{margin-bottom:18px}
.studio-docked .panel-heading h2{font-size:21px}
.studio-docked .panel-heading p{font-size:11px}
.studio-docked .builder-header{position:sticky;bottom:0;z-index:11;height:auto!important;min-height:0;padding:12px 15px!important;margin-top:auto;display:grid;grid-template-columns:1fr;gap:9px;background:#24251f;flex:none}
.studio-docked .builder-header .builder-brand{display:none}
.studio-docked .setup-launch{width:100%;margin:0!important;padding:7px 9px;border-color:#4a4a3f;background:#303129;border-radius:6px;font-size:11px;gap:8px}
.studio-docked .setup-launch small{font-size:9px}
.studio-docked .setup-orbit{height:25px;width:25px;font-size:17px}
.studio-docked .setup-launch #setup-progress-count{margin-left:auto;font-size:9px}
.studio-docked .header-actions{width:100%;display:flex;margin:0!important;gap:7px}
.studio-docked .header-actions .save-button{flex:1;min-height:35px;font-size:11px;justify-content:space-between;padding:8px 12px;border-radius:6px}
.studio-docked .header-actions .export-button{width:35px;height:35px;min-height:35px;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:6px}
.studio-docked .export-label{display:none}
.studio-docked .sidebar-foot{display:none}
.studio-docked .preview-foot{padding:9px 15px;display:block;font-size:9px;line-height:1.5;flex:none;color:#8b8679;background:#f1efe7}
.studio-docked .preview-foot>span{display:none}
.studio-docked .preview-foot p{font-size:9px;text-align:left;max-width:none}
.studio-docked .preview-panel{height:100%;min-height:0!important;position:relative}
.studio-docked .preview-canvas{padding:12px!important;height:100%;min-height:0!important;flex:1}
.studio-docked .preview-browser{height:100%;border-radius:4px;transition:none}
.studio-docked .browser-chrome{display:none}
/* The iframe owns vertical page scrolling. Reserving it again on the stage
   makes classic horizontal/vertical scrollbars feed back into ResizeObserver. */
.studio-docked .frame-stage{overflow-x:auto;overflow-y:hidden;min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
.studio-docked .preview-browser[data-viewport=mobile]{width:calc(390px * var(--studio-zoom,.8) + 10px);max-width:100%;border:5px solid #25261f;border-radius:24px}
.studio-docked .preview-browser[data-viewport=mobile] .frame-stage{border-radius:18px}
.studio-docked .studio-dock-feedback{top:12px;right:334px;max-width:min(450px,calc(100vw - 100px));z-index:60}
.studio-tools-toggle,.studio-fullsize-close,.studio-fullsize-label{display:none}
.studio-fullsize-guard{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.studio-docked.studio-canvas-full .preview-panel{position:fixed;inset:0;width:100vw;height:100dvh;z-index:80;display:flex!important;background:#f9f8f5}
.studio-docked.studio-canvas-full .preview-canvas{padding:0!important}
.studio-docked.studio-canvas-full .preview-browser{width:100%!important;border:0!important;border-radius:0;box-shadow:none}
.studio-docked.studio-canvas-full .frame-stage{border-radius:0}
.studio-docked.studio-canvas-full .studio-fullsize-close{position:absolute;display:flex;align-items:center;gap:8px;top:12px;left:12px;z-index:15;padding:10px 13px;min-height:40px;background:#24251fee;color:#fff;border:1px solid #ffffff35;border-radius:7px;font-size:11px;box-shadow:0 4px 18px #0002}
.studio-fullsize-close kbd{font:9px var(--mono);opacity:.6;margin-left:5px}
.studio-docked.studio-canvas-full .studio-fullsize-label{position:absolute;display:block;top:18px;right:20px;z-index:15;background:#fffdf1e6;border:1px solid #d9d4c4;color:#655f50;padding:7px 10px;border-radius:20px;font:9px var(--mono);pointer-events:none}
.studio-docked.studio-canvas-full .studio-tools-toggle,.studio-docked.studio-canvas-full .preview-panel>.studio-side-controls{display:none!important}
@media(min-width:768px) and (max-width:1150px){body.studio-docked .builder-layout{grid-template-columns:68px minmax(0,1fr) 290px}.studio-side-controls{padding-inline:12px}.studio-docked .editor-journey{padding-inline:12px}.studio-docked .editor-panels{padding-inline:15px}.studio-docked .preview-business{max-width:150px}.studio-docked .preview-canvas{padding:8px!important}.studio-docked .studio-dock-feedback{right:304px}}
@media(max-width:767px){
  body.studio-docked .builder-layout{grid-template-columns:1fr;grid-template-rows:44px auto minmax(0,1fr);height:100dvh!important;min-height:0}
  .studio-docked .mobile-workspace-switch{height:44px;min-height:0;padding:5px 10px;gap:6px}
  .studio-docked .mobile-workspace-switch button{font-size:11px;padding:6px;min-height:32px;border-radius:5px}
  .studio-docked .studio-rail,.studio-docked.builder-embedded .studio-rail{padding:4px 10px;gap:0;margin-top:0;height:auto}
  .studio-docked .editor-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .studio-docked .editor-steps button{min-height:44px;gap:3px;font-size:9px}
  .studio-docked .editor-steps button span{font-size:17px}
  .studio-docked .editor-sidebar{height:100%;border:0;overflow:auto}
  .studio-docked .studio-side-controls{position:relative;top:auto;padding:0 16px;box-shadow:none}
  .studio-docked .preview-toolbar{padding-block:12px 9px}
  .studio-docked .preview-business{max-width:210px}
  .studio-docked .preview-panel{height:100%;min-height:0}
  .studio-docked .preview-canvas{padding:9px!important;min-height:0;height:100%;align-items:stretch}
  .studio-docked .preview-browser[data-viewport=mobile]{width:calc(390px * var(--studio-zoom,.8) + 10px)}
  .studio-docked .canvas-mobile-inspect:not([hidden]){margin:0;padding:8px;font-size:11px}
  .studio-docked .canvas-tool-hint{display:none}
  .studio-docked .canvas-tool-hint[data-error=true]{display:block}
  .studio-docked .setup-launch small,.studio-docked .setup-launch #setup-progress-count{display:block}
  .studio-docked .studio-tools-toggle{position:absolute;display:block;right:16px;top:16px;z-index:14;background:#24251ff2;color:#fff;border:1px solid #ffffff38;border-radius:20px;padding:10px 14px;font-size:11px;box-shadow:0 3px 16px #0002}
  .studio-docked .preview-panel>.studio-side-controls{display:none;position:absolute;right:10px;top:60px;z-index:15;width:min(310px,calc(100% - 20px));border:1px solid #d4cec0;border-radius:10px;box-shadow:0 16px 50px #24201535;max-height:calc(100% - 70px);overflow:auto}
  .studio-docked[data-canvas-tools=open] .preview-panel>.studio-side-controls{display:block}
  .studio-docked .studio-dock-feedback{top:50px;left:12px;right:12px;max-width:none}
  .studio-docked.studio-canvas-full .studio-fullsize-label{display:none}
  .studio-docked.studio-canvas-full .studio-fullsize-close{top:9px;left:9px;font-size:11px;padding:9px 12px}
}
@media(max-height:750px) and (min-width:768px){.studio-docked .editor-steps button{min-height:50px}.studio-docked .rail-setup{min-height:48px}.studio-docked .editor-journey{padding-block:10px}.studio-docked .preview-toolbar{padding-top:12px}.studio-docked .preview-notice{font-size:8px}}

/* Four product phases, readable in the side panel without taking canvas height. */
.studio-docked .editor-journey-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.studio-docked .editor-journey-steps button{font-size:11px;min-width:0;justify-content:flex-start}.studio-docked .editor-journey-next button{font-size:12px;text-align:left;white-space:normal}.studio-docked .editor-journey-next{justify-content:flex-start}