.pages-page {
 display: flex;
 flex-direction: column;
 gap: 16px;
 min-height: 100%;
 padding: 32px;
 max-width: 52rem;
}

.pages-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
}

.pages-heading h1 {
 margin: 0 0 4px;
}

.pages-heading p {
 margin: 0;
}

.pages-actions {
 display: flex;
 gap: 8px;
 flex-shrink: 0;
}

.pages-title-row {
 margin-bottom: 8px;
}

.page-block-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.page-block {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 12px;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--card);
 cursor: grab;
 touch-action: none;
}

.page-block h3 {
 margin: 0;
 font-size: 14px;
}

.page-block-body {
 margin: 0;
}

.page-block-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.page-block-dragging {
 opacity: 0.55;
}

.page-block-form .label {
 display: block;
 margin-bottom: 4px;
}

.page-block-script {
 cursor: default;
}

.page-block-head {
 display: flex;
 align-items: center;
 gap: 8px;
}

.page-block-type {
 font-size: 11px;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--muted-foreground);
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 2px 8px;
}

.page-script-stage {
 min-height: 240px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--card);
 overflow: hidden;
}

.page-script-stage:empty::before {
 content: 'Paused';
 display: block;
 padding: 12px;
 color: var(--muted-foreground);
 font-size: 13px;
}

.page-script-log {
 margin: 0;
 max-height: 160px;
 overflow: auto;
 font-size: 12px;
 white-space: pre-wrap;
}

.page-script-source {
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  Consolas, monospace;
 font-size: 13px;
 min-height: 12rem;
}

.script-app-page.page {
 display: flex;
 flex-direction: column;
 gap: 0;
 min-height: 100%;
 max-width: none;
 margin: 0;
 padding: 0;
 width: 100%;
}

.script-app-page .pages-heading {
 /* The collapse control and portal toolbar
    are fixed 8px in from this column and
    36px square. Keep the title and host
    actions clear of both. */
 align-items: center;
 padding: 8px 144px 12px 56px;
 border-bottom: 1px solid var(--border);
 background: var(--background);
}

.script-app-page .message {
 margin: 12px 20px 0;
}

.script-app-stage {
 flex: 1;
 min-height: 0;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 overflow: hidden;
 display: flex;
 flex-direction: column;
}

.script-sandbox-frame {
 display: block;
 width: 100%;
 height: 100%;
 min-height: 240px;
 border: 0;
 background: transparent;
 flex: 1;
}

.script-app-stage
 .script-sandbox-frame {
 min-height: calc(100vh - 132px);
}

body[data-color-mode='dark']
 .script-sandbox-frame,
body.color-mode-dark
 .script-sandbox-frame {
 color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
 body[data-color-mode='system']
  .script-sandbox-frame,
 body.color-mode-system
  .script-sandbox-frame {
  color-scheme: dark;
 }
}

@media (max-width: 720px) {
 .pages-page {
  padding: 16px;
 }

 .script-app-page .pages-heading {
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 168px 12px 64px;
  padding-left: max(
   64px,
   calc(
    64px + env(safe-area-inset-left)
   )
  );
 }
}