/* The background uses every pixel; controls stay inside the device's safe area.
   Keeping these in one place also lets layout tests simulate real cutouts. */
: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:#dce6e1;
  --mode-rail-h:62px;
  --header-h:calc(max(84px,4rem) + var(--safe-top));
  --dock-h:calc(112px + var(--safe-bottom));
}
/* The root canvas owns the entire background, including exposed safe areas.
   Do not paint a separate status-bar strip or tint it with the action color. */
:root {background-color:var(--viewport-color)}
body {background:transparent}
.app-header {padding-top:var(--safe-top);padding-left:calc(36px + var(--safe-left));padding-right:calc(36px + var(--safe-right))}
.workspace {left:calc(32px + var(--safe-left));right:calc(32px + var(--safe-right));height:calc(var(--app-height) - var(--header-h) - var(--dock-h) - var(--mode-rail-h))}
/* Both modes keep the same point of contact, even when a panel opens. */
.caption-actions {
  position:fixed;z-index:8;left:calc(50% + (var(--safe-left) - var(--safe-right)) / 2);
  bottom:calc(var(--dock-h) + 4px);transform:translateX(-50%);
  width:280px;max-width:calc(100% - 28px - var(--safe-left) - var(--safe-right));
}
.caption-actions .create-shortcut,.editor-open .caption-actions .create-shortcut {flex:1;min-width:0;font-size:.8125rem;padding:8px 10px}
.tool-dock,.editor-open .tool-dock {left:calc(50% + (var(--safe-left) - var(--safe-right)) / 2);max-width:calc(100% - 28px - var(--safe-left) - var(--safe-right))}
.paper-stage {padding:12px}
.paper,.paper[data-shape] {transition:none}
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(max-width:899px) {
  :root {--header-h:calc(max(68px,4rem) + var(--safe-top));--dock-h:calc(102px + var(--safe-bottom))}
  .app-header {padding:var(--safe-top) calc(20px + var(--safe-right)) 0 calc(20px + var(--safe-left))}
  .workspace {left:calc(14px + var(--safe-left));right:calc(14px + var(--safe-right))}
  .tool-dock {left:calc(50% + (var(--safe-left) - var(--safe-right)) / 2)}
  /* Leave most of the height to the work; tools scroll inside a short tray. */
  .editor-open .workspace {grid-template-rows:minmax(0,1fr) minmax(0,min(28dvh,216px));gap:8px}
  .paper-stage {padding:4px}
  .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)}
}
@media(max-width:374px) {.app-header {padding-left:calc(12px + var(--safe-left));padding-right:calc(12px + var(--safe-right))}}
@media(max-width:359px) {.workspace {left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right))}}
@media(max-width:899px) and (max-height:500px) and (orientation:landscape) {
  :root {--header-h:calc(max(52px,3.25rem) + var(--safe-top));--dock-h:calc(86px + var(--safe-bottom))}
  .editor-open .workspace {grid-template-rows:minmax(0,1fr)}
  :root {--mode-rail-h:54px}
}
/* In a short landscape window, two stacked control rows would dwarf the work.
   Put them beside each other, retaining their positions in both modes. */
@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(80px + var(--safe-bottom));--mode-rail-h:0px}
  .paper-stage {padding:4px}
  .caption-actions {
    left:calc(var(--safe-left) + 16px);bottom:calc(15px + var(--safe-bottom));transform:none;
    width:min(280px,calc((100% - var(--safe-left) - var(--safe-right) - 44px) * .44));
  }
  .tool-dock,.editor-open .tool-dock,body[data-mode=video] .tool-dock {
    left:auto;right:calc(var(--safe-right) + 16px);bottom:calc(12px + var(--safe-bottom));transform:none;
    width:min(380px,calc((100% - var(--safe-left) - var(--safe-right) - 44px) * .56));height:56px;
  }
  .tabs button {gap:1px;font-size:.6875rem}
  .tabs button>svg,.font-tool-icon {height:20px}
  .caption-actions .create-shortcut,.editor-open .caption-actions .create-shortcut {font-size:.75rem;padding:8px 4px;gap:4px}
}
@media(max-width:1024px) {
  :root.keyboard-open {--header-h:calc(44px + var(--safe-top));--dock-h:64px;--mode-rail-h:0px}
  .keyboard-open .app-header {padding-top:var(--safe-top)}
  .keyboard-open .caption-actions {display:none}
  .keyboard-open .editor-open .workspace {grid-template-rows:64px minmax(0,1fr)}
}