/* Keep the stage generous; the two glass tool groups share one fixed rail. */
:root {
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --viewport-color:#dfe8ec;
  --mode-rail-h:0px;
  --header-h:calc(max(64px,4rem) + var(--safe-top));
  --dock-h:calc(84px + var(--safe-bottom));
  background-color:var(--viewport-color);
}
/* The same root background extends into the safe areas, with no status strip. */
body {background:transparent}
.app-header {padding:var(--safe-top) calc(24px + var(--safe-right)) 0 calc(24px + var(--safe-left))}
.workspace {
  left:calc(20px + var(--safe-left));right:calc(20px + var(--safe-right));max-width:1720px;
  height:calc(var(--app-height) - var(--header-h) - var(--dock-h));gap:18px;
}
.paper-stage {padding:8px}
.paper,.paper[data-shape] {transition:none}
/* The wrapper owns placement, so no item jumps when modes or panels change. */
.workspace-tools {
  position:fixed;z-index:8;left:calc(50% + (var(--safe-left) - var(--safe-right)) / 2);
  bottom:calc(10px + var(--safe-bottom));transform:translateX(-50%);
  display:flex;align-items:stretch;gap:10px;width:670px;
  max-width:calc(100% - 40px - var(--safe-left) - var(--safe-right));height:60px;
}
.workspace-tools .caption-actions {
  position:relative;inset:auto;transform:none;flex:0 0 258px;
  width:auto;max-width:none;height:100%;padding:4px;gap:2px;
}
.workspace-tools .caption-actions .create-shortcut {
  flex:1;min-width:0;min-height:44px;height:100%;padding:6px 8px;font-size:.8125rem;
}
.workspace-tools .tool-dock,.editor-open .workspace-tools .tool-dock,body[data-mode=video] .workspace-tools .tool-dock {
  position:relative;inset:auto;transform:none;flex:1;min-width:0;width:auto;max-width:none;height:100%;padding:4px;gap:2px;
}
.workspace-tools .tabs button {min-height:44px;padding:3px 0;gap:2px;font-size:.6875rem;border-radius:24px}
.workspace-tools .tabs button>svg,.workspace-tools .font-tool-icon {height:21px}
.workspace-tools .font-tool-icon {font-size:22px;line-height:21px}
/* More controls fit in the inspector without shrinking the touch targets. */
.inspector-heading {padding:8px 12px 4px 20px}
.inspector-heading .close-button {width:44px;min-width:44px;height:44px}
.panel-scroll {padding:2px 20px 20px}
dialog[open],.keyboard-open dialog[open] {
  top:calc(var(--visual-top) + (var(--app-height) + var(--safe-top) - var(--safe-bottom)) / 2);
  left:var(--safe-left);right:var(--safe-right);
  width:calc(100% - 24px - var(--safe-left) - var(--safe-right));
  max-height:calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 24px);
}
.typing-toolbar {
  left:calc(var(--visual-left,0px) + var(--safe-left) + 10px);
  width:calc(var(--visual-width,100%) - var(--safe-left) - var(--safe-right) - 20px);
}
@media(min-width:900px) {
  .editor-open .workspace {grid-template-columns:360px minmax(0,1fr)}
}
@media(max-width:899px) {
  :root {--header-h:calc(max(56px,3.5rem) + var(--safe-top));--dock-h:calc(80px + var(--safe-bottom))}
  .app-header {padding:var(--safe-top) calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left))}
  .workspace {left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right))}
  .editor-open .workspace {grid-template-rows:minmax(0,1fr) minmax(0,min(31dvh,252px));gap:8px}
  .paper-stage {padding:2px}
  .preview-meta {display:none}
  .canvas-caption,.editor-open .canvas-caption {margin:0;gap:0}
  body[data-mode=image] .canvas-caption {display:none}
  .reel-transport {height:36px;width:min(100%,300px)}
  .workspace-tools {height:60px;width:520px;max-width:calc(100% - 16px - var(--safe-left) - var(--safe-right));gap:6px}
  .workspace-tools .caption-actions {flex-basis:100px}
  .workspace-tools .caption-actions .create-shortcut {flex-direction:column;gap:2px;padding:3px 0;font-size:.6875rem}
  .workspace-tools .create-shortcut svg {height:20px;width:20px}
  .mode-word {display:none}
  .inspector-heading {padding:4px 10px 2px 16px}
  .inspector-heading h1 {font-size:.9375rem}
  .panel-scroll {padding:0 16px 16px}
  #text-input {min-height:112px;height:112px;max-height:240px;padding:12px 14px;line-height:1.7}
  .field-heading {margin-bottom:8px}
}
/* A small phone keeps two compact rows so every tab remains easy to hit. */
@media(max-width:359px) {
  :root {--dock-h:calc(132px + var(--safe-bottom))}
  :root:not(.keyboard-open) {--header-h:calc(max(56px,3.5rem) + var(--safe-top))}
  .app-header {padding-left:calc(12px + var(--safe-left));padding-right:calc(12px + var(--safe-right))}
  .workspace-tools {height:116px;flex-direction:column;width:300px}
  .workspace-tools .caption-actions {flex:0 0 50px;width:260px;align-self:center;padding:2px}
  .workspace-tools .caption-actions .create-shortcut {flex-direction:row;gap:5px;padding:3px 6px;font-size:.75rem}
  .workspace-tools .tool-dock,.editor-open .workspace-tools .tool-dock,body[data-mode=video] .workspace-tools .tool-dock {flex:0 0 60px}
  .mode-word {display:inline}
  .editor-open .workspace {grid-template-rows:minmax(0,1fr) minmax(0,min(29dvh,200px))}
}
/* Keep side-by-side editing in short landscape windows, with the same rail. */
@media(min-width:600px) and (max-height:500px) and (orientation:landscape) {
  :root {--header-h:calc(max(52px,3.25rem) + var(--safe-top));--dock-h:calc(74px + var(--safe-bottom))}
  .editor-open .workspace {grid-template-columns:minmax(0,1fr) minmax(280px,46%);grid-template-rows:minmax(0,1fr);gap:12px}
  .editor-open .editor {grid-column:2;grid-row:1}
  .editor-open .preview-area {grid-column:1;grid-row:1}
  .workspace-tools {width:590px;height:56px;bottom:calc(8px + var(--safe-bottom))}
  .workspace-tools .caption-actions {flex-basis:220px}
  .workspace-tools .caption-actions .create-shortcut {flex-direction:row;font-size:.75rem;gap:5px}
  .mode-word {display:inline}
  .paper-stage {padding:2px}
}
@media(max-width:1024px) {
  :root.keyboard-open {--header-h:calc(44px + var(--safe-top));--dock-h:64px}
  .keyboard-open .app-header {padding-top:var(--safe-top)}
  .keyboard-open .workspace-tools {display:none}
  .keyboard-open .workspace,.keyboard-open .editor-open .workspace {grid-template-columns:minmax(0,1fr);grid-template-rows:64px minmax(0,1fr);gap:6px}
  .keyboard-open .preview-area {grid-column:1;grid-row:1}
  .keyboard-open .editor {grid-column:1;grid-row:2}
  .keyboard-open .inspector-heading {padding:4px 12px 2px 16px}
  .keyboard-open #text-input {min-height:104px;height:104px;max-height:180px}
}