@lincyaw/workbench 0.0.0-stage → 0.2.0-rc.0

package/src/styles.css

@@ -0,0 +1,1025 @@
+@import '@lincyaw/design/block-preview.css';
+@import '@blocknote/mantine/style.css';
+@import './document-editor/style.css';
+@import './step-production.css';
+@import './component-properties.css';
+@import './caption-timing.css';
+
+.pmw-preview__frames[data-pending-snapshot]:not([data-presentation-gated]) { visibility: hidden; }
+
+.pmw-muted {
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-sm);
+}
+
+.pmw-spacer {
+  flex: 1;
+}
+
+/* The documents, as an editor's start page lists them. */
+
+.pmw-home {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-4);
+  min-height: 100%;
+  padding: var(--pm-space-8) clamp(var(--pm-space-4), 5vw, var(--pm-space-10));
+  background: var(--pm-color-chrome);
+  overflow: auto;
+}
+
+.pmw-home > * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: 0;
+  width: 100%;
+  max-width: var(--pm-sheet-width);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.pmw-home__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-3);
+}
+
+.pmw-home__title {
+  min-width: 0;
+  margin: 0 auto 0 0;
+  overflow-wrap: anywhere;
+  font-size: var(--pm-text-title);
+  font-weight: 600;
+  line-height: var(--pm-leading-tight);
+}
+
+.pmw-home__heading-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pm-space-3);
+  margin-top: var(--pm-space-2);
+}
+
+.pmw-home__heading {
+  margin: 0;
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--pm-tracking-label);
+  text-transform: uppercase;
+}
+
+.pmw-home__search {
+  width: min(18rem, 100%);
+}
+
+.pmw-home__cards {
+  margin-block: 0;
+  padding: 0;
+  overflow: hidden;
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-radius: var(--pm-radius-small);
+  background: var(--pm-color-surface);
+  list-style: none;
+}
+
+.pmw-home__card {
+  display: flex;
+  align-items: center;
+  gap: var(--pm-space-2);
+  padding-right: var(--pm-space-2);
+}
+
+.pmw-home__card + .pmw-home__card {
+  border-top: var(--pm-size-hairline) solid var(--pm-color-line);
+}
+
+.pmw-home__card:hover {
+  background: var(--pm-color-selected);
+}
+
+.pmw-home__open {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--pm-space-3);
+  min-width: 0;
+  min-height: var(--pm-size-row);
+  margin: 0;
+  padding: var(--pm-space-2) var(--pm-space-4);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.pmw-home__open:focus-visible {
+  outline: var(--pm-size-stroke) solid var(--pm-color-accent);
+  outline-offset: calc(-1 * var(--pm-size-stroke));
+}
+
+.pmw-home__doc-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: var(--pm-size-avatar);
+  height: var(--pm-size-avatar);
+  border-radius: var(--pm-radius-tool);
+  background: var(--pm-color-accent-soft);
+  color: var(--pm-color-accent);
+}
+
+.pmw-home__doc-title {
+  overflow-wrap: anywhere;
+  font-size: var(--pm-text-md);
+  font-weight: 500;
+  line-height: var(--pm-leading-tight);
+}
+
+.pmw-operation {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-3);
+  min-width: min(24rem, 80vw);
+}
+
+.pmw-operation p {
+  margin: 0;
+}
+
+.pmw-operation__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--pm-space-2);
+}
+
+/* The open document, as an editor shows it: the command bar, the panes, the page on its canvas, the status bar. */
+
+.pmw-document {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  background: var(--pm-color-chrome);
+}
+
+.pmw-toolbar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-px);
+  min-height: var(--pm-toolbar-height);
+  padding: var(--pm-space-1) var(--pm-space-2);
+  overflow-x: auto;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
+  scrollbar-width: none;
+}
+
+.pmw-toolbar__title {
+  min-width: 0;
+  max-width: calc(var(--pm-navigation-width) * 1.5);
+  margin: 0 var(--pm-space-2) 0 var(--pm-space-1);
+  overflow: hidden;
+  font-size: var(--pm-text-md);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pmw-toolbar__document { display: contents; }
+
+.pmw-toolbar__group {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-px);
+}
+
+.pmw-toolbar__divider {
+  flex: none;
+  width: var(--pm-size-hairline);
+  height: var(--pm-size-divider);
+  margin: 0 var(--pm-space-1);
+  background: var(--pm-color-line);
+}
+
+.pmw-toolbar__status-short { display: none; }
+
+.pmw-toolbar__status {
+  margin: 0 var(--pm-space-2) 0 var(--pm-space-1);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  white-space: nowrap;
+}
+
+.pmw-notices:empty {
+  display: none;
+}
+
+.pmw-notices {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  padding: var(--pm-space-2) var(--pm-space-3) 0;
+}
+
+.pmw-notices > .pm-ui-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-2);
+}
+
+.pmw-notice__actions {
+  display: inline-flex;
+  gap: var(--pm-space-2);
+  margin-left: auto;
+}
+
+.pmw-problems {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--pm-space-1);
+  min-width: 0;
+}
+
+.pmw-problems__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-2);
+}
+
+.pmw-problems__failure {
+  margin: 0;
+  color: var(--pm-color-danger);
+}
+
+.pmw-problems__details summary {
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  cursor: pointer;
+}
+
+.pmw-problems__details ul {
+  margin: var(--pm-space-1) 0 0;
+  padding-left: var(--pm-space-4);
+  font-family: var(--pm-font-mono);
+  font-size: var(--pm-text-xs);
+  overflow-wrap: anywhere;
+}
+
+.pmw-document__body {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.pmw-document__body > .pmw-preview {
+  flex: 1;
+  min-width: 0;
+}
+
+.pmw-document__aside {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 min(var(--pm-aside-width), 38%);
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-left: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
+}
+
+/* The navigation pane: the document's headings, or its slides. */
+
+.pmw-navigation {
+  display: flex;
+  flex: 0 0 var(--pm-navigation-width);
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-right: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
+}
+
+.pmw-navigation__empty {
+  margin: var(--pm-space-3);
+}
+
+.pmw-navigation__list {
+  flex: 1;
+  margin: 0;
+  padding: var(--pm-space-2) var(--pm-space-2) var(--pm-space-4);
+  overflow: auto;
+  list-style: none;
+}
+
+.pmw-navigation__row { display: flex; align-items: center; gap: var(--pm-space-1); }
+.pmw-navigation__row > .pmw-navigation__item { flex: 1; min-width: 0; }
+.pmw-navigation > .pm-ui-notice { margin: var(--pm-space-2); }
+
+.pmw-navigation__item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: baseline;
+  gap: var(--pm-space-2);
+  width: 100%;
+  margin: 0;
+  padding: var(--pm-space-1) var(--pm-space-2);
+  border: 0;
+  border-radius: var(--pm-radius-tool);
+  background: none;
+  color: var(--pm-color-ink);
+  font: inherit;
+  font-size: var(--pm-text-sm);
+  line-height: 1.4;
+  text-align: start;
+  cursor: pointer;
+}
+
+.pmw-navigation__item:hover {
+  background: var(--pm-color-hover);
+}
+
+.pmw-navigation__item[aria-current] {
+  background: var(--pm-color-selected);
+  box-shadow: inset var(--pm-size-stroke) 0 0 var(--pm-color-accent);
+  color: var(--pm-color-accent);
+  font-weight: 600;
+}
+
+.pmw-navigation__item:focus-visible {
+  outline: var(--pm-size-stroke) solid var(--pm-color-accent);
+  outline-offset: calc(-1 * var(--pm-size-stroke));
+}
+
+.pmw-navigation__item[data-depth='0'] { font-weight: 600; }
+.pmw-navigation__item[data-depth='1'] { padding-left: calc(var(--pm-space-2) + var(--pm-space-4)); }
+.pmw-navigation__item[data-depth='2'] { padding-left: calc(var(--pm-space-2) + 2 * var(--pm-space-4)); color: var(--pm-color-muted); }
+.pmw-navigation__item[data-depth='3'] { padding-left: calc(var(--pm-space-2) + 3 * var(--pm-space-4)); color: var(--pm-color-muted); }
+
+.pmw-navigation__number {
+  flex: none;
+  min-width: var(--pm-space-5);
+  color: var(--pm-color-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+.pmw-navigation__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The status bar. */
+
+.pmw-statusbar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-4);
+  min-height: var(--pm-statusbar-height);
+  padding: 0 var(--pm-space-3);
+  overflow: hidden;
+  border-top: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  white-space: nowrap;
+}
+
+.pmw-statusbar__item > .pm-ui-icon {
+  width: var(--pm-size-icon-sm);
+  height: var(--pm-size-icon-sm);
+}
+
+.pmw-statusbar__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pm-space-1);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The document on its canvas: the page draws itself in it, a slide lies on it at its own proportions. */
+
+.pmw-preview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--pm-color-canvas);
+}
+
+.pmw-preview > .pm-ui-notice,
+.pmw-preview__loading {
+  margin: var(--pm-space-2);
+}
+
+.pmw-preview__stage {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pmw-preview__frames {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.pmw-preview__frame {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  border: 0;
+  background: var(--pm-color-canvas);
+}
+
+/* A slide is as large as fits with the canvas around it, at the deck's proportions (`--pmw-slide-aspect`). */
+.pmw-preview__frames[data-renderer='slides'] {
+  align-items: center;
+  justify-content: center;
+  container-type: size;
+}
+
+.pmw-preview__frames[data-renderer='slides'] > .pmw-preview__frame {
+  flex: none;
+  width: min(100cqw - 2 * var(--pm-space-6), (100cqh - 2 * var(--pm-space-6)) * var(--pmw-slide-aspect));
+  height: auto;
+  aspect-ratio: var(--pmw-slide-aspect);
+  box-shadow: var(--pm-shadow-page);
+}
+
+.pmw-preview__frame[hidden] {
+  display: none;
+}
+
+/* The toolbar beside the mouse. */
+
+.pmw-pointer {
+  position: absolute;
+  z-index: 5;
+  max-width: min(26rem, calc(100% - var(--pm-space-4)));
+  padding: var(--pm-space-1);
+  border: var(--pm-size-hairline) solid var(--pm-color-line-strong);
+  border-radius: var(--pm-radius-panel);
+  background: var(--pm-color-surface);
+  box-shadow: var(--pm-shadow-float);
+}
+
+.pmw-pointer[data-step='comment'] {
+  width: min(24rem, calc(100% - var(--pm-space-4)));
+  padding: var(--pm-space-3);
+}
+
+.pmw-pointer[data-step='tools'] {
+  width: max-content;
+  padding: 0;
+  border-radius: var(--pm-radius-control);
+}
+
+.pmw-pointer__tools {
+  display: flex;
+  align-items: center;
+}
+
+.pmw-pointer__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+}
+
+.pmw-pointer__quote {
+  max-height: 4.5em;
+  margin: 0;
+  padding-left: var(--pm-space-2);
+  overflow: hidden;
+  border-left: var(--pm-size-rule) solid var(--pm-color-accent);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-sm);
+  line-height: 1.5;
+}
+
+.pmw-pointer__text {
+  width: 100%;
+  font: inherit;
+}
+
+.pmw-pointer__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--pm-space-2);
+}
+
+/* The side panes: comments and version history. */
+
+.pmw-pane {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  min-height: 0;
+  padding-bottom: var(--pm-space-3);
+  overflow: auto;
+}
+
+.pmw-pane > .pm-ui-notice,
+.pmw-pane > .pm-ui-empty {
+  margin: 0 var(--pm-space-3);
+}
+
+.pmw-pane__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-2);
+  min-height: var(--pm-pane-header-height);
+  padding: 0 var(--pm-space-2) 0 var(--pm-space-3);
+  background: var(--pm-color-chrome);
+}
+
+.pmw-pane__title {
+  flex: 1;
+  margin: 0;
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--pm-tracking-label);
+  text-transform: uppercase;
+}
+
+.pmw-pane__footer {
+  margin: 0 var(--pm-space-3);
+}
+
+.pmw-comments,
+.pmw-versions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding: 0 var(--pm-space-3);
+  list-style: none;
+}
+
+.pmw-comment {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  padding: var(--pm-space-3);
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-left: var(--pm-size-rule) solid var(--pm-color-accent);
+  border-radius: var(--pm-radius-card);
+  background: var(--pm-color-surface);
+}
+
+.pmw-comment[data-status='resolved'] {
+  border-left-color: var(--pm-color-line-strong);
+  opacity: 0.75;
+}
+
+.pmw-comment__place {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--pm-color-muted);
+  font: inherit;
+  font-size: var(--pm-text-xs);
+  text-align: start;
+  cursor: pointer;
+}
+
+.pmw-comment__place:hover {
+  color: var(--pm-color-accent);
+}
+
+.pmw-comment__number {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--pm-size-badge);
+  height: var(--pm-size-badge);
+  padding: 0 var(--pm-space-1);
+  box-sizing: border-box;
+  border-radius: var(--pm-radius-pill);
+  background: var(--pm-color-accent);
+  color: var(--pm-color-on-accent);
+  font-size: var(--pm-text-xs);
+  font-weight: 600;
+}
+
+.pmw-comment__quote {
+  margin: 0;
+  padding-left: var(--pm-space-2);
+  border-left: var(--pm-size-stroke) solid var(--pm-color-line-strong);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-sm);
+}
+
+.pmw-comment__text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.pmw-comment__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-2);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-comment__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-1);
+}
+
+.pmw-comment__actions > .pm-ui-icon-button {
+  margin-left: auto;
+}
+
+.pmw-version {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--pm-space-1) var(--pm-space-2);
+  padding: var(--pm-space-2) 0;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-color-line);
+}
+
+.pmw-version__icon {
+  display: grid;
+  place-items: center;
+  width: var(--pm-size-avatar);
+  height: var(--pm-size-avatar);
+  border-radius: 50%;
+  background: var(--pm-color-sunk);
+  color: var(--pm-color-muted);
+}
+
+.pmw-version[data-origin='agent'] .pmw-version__icon {
+  background: var(--pm-color-accent-soft);
+  color: var(--pm-color-accent);
+}
+
+.pmw-version__summary {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--pm-text-sm);
+  font-weight: 600;
+}
+
+.pmw-version[data-undone] .pmw-version__summary {
+  color: var(--pm-color-muted);
+  text-decoration: line-through;
+}
+
+.pmw-version__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-1);
+  margin: 0;
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-version__action {
+  grid-column: 2;
+  justify-self: start;
+}
+
+/* Above the video: its file. */
+
+
+
+/* The Export pane: what the document can be made into, and what was made. */
+
+.pmw-export__targets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding: 0 var(--pm-space-3);
+  list-style: none;
+}
+
+.pmw-export__subtitle {
+  margin: var(--pm-space-2) var(--pm-space-3) 0;
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  font-weight: 600;
+}
+
+.pmw-export__video {
+  display: block;
+  width: 100%;
+  max-height: 70vh;
+  border-radius: var(--pm-radius-small);
+  background: var(--pm-color-sunk);
+}
+
+.pmw-jobs {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0 var(--pm-space-3);
+  list-style: none;
+}
+
+.pmw-job {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--pm-space-1) var(--pm-space-2);
+  padding: var(--pm-space-2) 0;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-color-line);
+}
+
+.pmw-job__icon {
+  display: grid;
+  place-items: center;
+  width: var(--pm-size-avatar);
+  height: var(--pm-size-avatar);
+  border-radius: 50%;
+  background: var(--pm-color-sunk);
+  color: var(--pm-color-muted);
+}
+
+.pmw-job[data-state='running'] .pmw-job__icon {
+  background: var(--pm-color-accent-soft);
+  color: var(--pm-color-accent);
+}
+
+.pmw-job[data-state='failed'] .pmw-job__icon {
+  background: var(--pm-color-danger-soft);
+  color: var(--pm-color-danger);
+}
+
+.pmw-job__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-1);
+  min-width: 0;
+}
+
+.pmw-job__title {
+  margin: 0;
+  font-size: var(--pm-text-sm);
+  font-weight: 600;
+}
+
+.pmw-job__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-1);
+  margin: 0;
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-job__progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-1);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-job__progress progress {
+  width: 100%;
+  height: var(--pm-space-1);
+  accent-color: var(--pm-color-accent);
+}
+
+/* The kitten above the bar, as far along it as the job has come (`--pmw-job-done`, 0 to 1), never past its ends. */
+.pmw-job__runner {
+  display: block;
+  margin-left: calc((100% - var(--pm-size-mascot-sm)) * var(--pmw-job-done));
+  line-height: 0;
+}
+
+.pmw-job__runner:empty {
+  display: none;
+}
+
+.pmw-job__error {
+  margin: 0;
+  color: var(--pm-color-danger);
+  font-size: var(--pm-text-xs);
+  overflow-wrap: anywhere;
+}
+
+.pmw-job__log summary {
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  cursor: pointer;
+}
+
+.pmw-job__log-lines {
+  display: flex;
+  flex-direction: column-reverse;
+  max-height: calc(var(--pm-size-row) * 5);
+  margin-top: var(--pm-space-1);
+  overflow: auto;
+  border-radius: var(--pm-radius-small);
+  background: var(--pm-color-code);
+}
+
+.pmw-job__log pre {
+  margin: 0;
+  padding: var(--pm-space-2);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-mono);
+  font-size: var(--pm-text-xs);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.pmw-job__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pm-space-2);
+}
+
+.pmw-job__actions:empty {
+  display: none;
+}
+
+/* Radix owns positioning, layering and keyboard/focus behavior; these are visual tokens only. */
+
+
+.pmw-help {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding-left: var(--pm-space-4);
+  line-height: var(--pm-leading-ui);
+}
+
+/* Narrow: labels go, icons stay; the side pane covers the document. */
+
+@media (max-width: 1279px) {
+  .pmw-toolbar__title { max-width: 40vw; }
+  .pmw-document__body { position: relative; }
+  .pmw-navigation {
+    position: absolute;
+    inset: 0 auto 0 0;
+    z-index: 6;
+    width: min(100%, var(--pm-navigation-width));
+    box-shadow: var(--pm-shadow-float);
+  }
+  .pmw-document__aside {
+    position: absolute;
+    inset: 0 0 0 auto;
+    z-index: 6;
+    width: min(100%, 24rem);
+    box-shadow: var(--pm-shadow-float);
+  }
+}
+
+/* Per-step speech: compact step strip and two tracks, alongside either document or presentation. */
+.pmw-narration { min-height: 0; overflow: auto; }
+.pmw-narration__body { display: grid; gap: var(--pm-space-3); padding: var(--pm-space-3); }
+.pmw-narration__place { display: flex; align-items: center; gap: var(--pm-space-2); margin: 0; font-family: var(--pm-font-mono); font-size: var(--pm-text-xs); }
+.pmw-narration__place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pmw-narration__steps { display: flex; gap: var(--pm-space-1); overflow: auto; padding-block: var(--pm-space-1); }
+.pmw-narration__steps button { flex: none; }
+.pmw-narration__modes { display: flex; flex-wrap: wrap; gap: var(--pm-space-1); }
+.pmw-narration__actions { display: flex; justify-content: flex-end; gap: var(--pm-space-2); }
+.pmw-narration__timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-1); padding: var(--pm-space-2); border-radius: var(--pm-radius-control); background: var(--pm-color-sunk); font-size: var(--pm-text-xs); }
+.pmw-narration__timeline span { display: flex; align-items: center; gap: var(--pm-space-1); padding: var(--pm-space-2); border-radius: var(--pm-radius-control); }
+.pmw-narration__animation { grid-column: 1; background: var(--pm-color-accent-soft); color: var(--pm-color-accent); }
+.pmw-narration__speech { grid-column: 1; background: var(--pm-color-surface); color: var(--pm-color-ink); }
+.pmw-narration__timeline[data-mode='after'] .pmw-narration__speech { grid-column: 2; }
+
+/* Business regions arrange shared controls; their surfaces and states stay in design. */
+.pmw-document__main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; isolation: isolate; }
+.pmw-document__source { display: flex; flex: 1; min-width: 0; min-height: 0; }
+.pmw-document__source[hidden] { display: none; }
+.pmw-source-document { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: var(--pm-space-5); background: var(--pm-color-canvas); }
+.pmw-source-document__notices { position: sticky; inset-block-start: 0; z-index: var(--pm-z-site-header); display: grid; gap: var(--pm-space-3); margin-block-end: var(--pm-space-3); }
+.pmw-source-document__recovery { display: grid; gap: var(--pm-space-2); min-width: 0; }
+.pmw-source-document__recovery-actions { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); }
+.pmw-source-document__diagnostics { margin-block-end: var(--pm-space-3); }
+.pmw-source-document__sheet { position: relative; max-width: var(--pm-sheet-width); min-height: 100%; margin-inline: auto; padding-block: var(--pm-space-4); background: var(--pm-color-surface); box-shadow: var(--pm-shadow-page); }
+/* Opening: the page's own margins, so that the placeholder lines sit where the text will. */
+.pmw-source-document__sheet--loading { box-sizing: border-box; padding: var(--pm-space-10) var(--pm-space-12); }
+.pmw-voice__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-3); }
+.pmw-voice__summary, .pmw-voice__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2); min-width: 0; overflow-wrap: anywhere; }
+.pmw-voice__status { justify-content: space-between; }
+.pmw-voice__steps { display: flex; flex-wrap: wrap; gap: var(--pm-space-1); }
+.pmw-voice__sample { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.pmw-document__main > .pmw-preview { flex: 1; height: auto; }
+.pmw-step-timeline { display: flex; flex: none; flex-direction: column; gap: var(--pm-space-2); padding: var(--pm-space-3); border-top: var(--pm-size-hairline) solid var(--pm-color-line); }
+.pmw-step-timeline__heading { display: flex; justify-content: space-between; gap: var(--pm-space-3); color: var(--pm-color-muted); font-size: var(--pm-text-xs); }
+.pmw-step-timeline__steps { display: flex; gap: var(--pm-space-1); overflow-x: auto; padding: var(--pm-space-1); }
+.pmw-step-timeline__steps > * { flex: none; }
+.pmw-toolbar--present { justify-content: flex-end; }
+@media (max-width: 767px) {
+  .pmw-source-document { padding: var(--pm-space-2); }
+  .pmw-toolbar--document { flex-wrap: wrap; }
+  .pmw-toolbar--document .pmw-toolbar__document { display: flex; flex: 1 0 100%; align-items: center; gap: var(--pm-space-px); min-width: 0; }
+  .pmw-toolbar--document .pmw-toolbar__title { flex: 1; max-width: none; }
+  .pmw-toolbar--document .pmw-toolbar__status { flex: 1 1 0; }
+  .pmw-toolbar--document > .pmw-spacer { display: none; }
+  .pmw-toolbar__status { flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .pmw-toolbar__status-full:has(+ .pmw-toolbar__status-short) { display: none; }
+  .pmw-toolbar__status-short { display: inline; }
+  .pmw-document__aside { width: 100%; }
+  .pmw-step-timeline { padding: var(--pm-space-2); }
+}
+
+/* Production owns pane layout; controls and dock chrome live in the shared design layer. */
+.pmw-speech-settings { min-width: 0; }
+.pmw-speech-settings__content, .pmw-speech-settings__fields { display: flex; flex-direction: column; gap: var(--pm-space-3); min-width: 0; }
+.pmw-speech-settings__content { padding: var(--pm-space-3); }
+.pmw-speech-settings__content > p, .pmw-speech-settings__fields > p { margin: 0; }
+.pmw-speech-settings__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2); }
+.pmw-production { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+.pmw-production__workarea { flex: 1; min-width: 0; min-height: 0; }
+.pmw-production__main, .pmw-production__body { flex: 1; min-width: 0; min-height: 0; }
+.pmw-production__library, .pmw-production__visuals, .pmw-production__properties { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.pmw-production__frame { display: flex; flex: 1; min-width: 0; min-height: 0; }
+.pmw-production__frame > .pmw-preview { flex: 1; }
+.pmw-production__monitor-tools { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pm-space-2); padding: var(--pm-space-2) var(--pm-space-3); }
+.pmw-production__transport { display: flex; flex: 0 1 auto; align-items: center; flex-wrap: wrap; gap: var(--pm-space-2); min-width: 0; }
+.pmw-production__fields { display: flex; flex-direction: column; gap: var(--pm-space-4); min-width: 0; }
+.pmw-production [hidden] { display: none; }
+.pmw-production__feedback { display: flex; flex-direction: column; gap: var(--pm-space-2); max-height: min(60vh, var(--pm-production-feedback-height)); overflow-y: auto; }
+.pmw-production__timeline { min-width: 0; min-height: 0; overflow: auto; }
+.pmw-voice__form { display: flex; flex-direction: column; gap: var(--pm-space-3); min-width: 0; }
+.pmw-voice__actions { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); }
+.pmw-audio-recording { display: flex; flex-direction: column; gap: var(--pm-space-3); min-width: 0; }
+.pmw-voice__steps { display: flex; flex-wrap: wrap; gap: var(--pm-space-1); max-height: var(--pm-block-preview-height); overflow-y: auto; }
+.pmw-transcription, .pmw-transcription__atoms { display: grid; gap: var(--pm-space-3); min-width: 0; }
+.pmw-transcription__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2); min-width: 0; }
+.pmw-transcription__actions > span { min-width: 0; overflow-wrap: anywhere; }
+.pmw-transcription__review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-3); }
+@media (max-width: 767px) { .pmw-transcription__review { grid-template-columns: minmax(0, 1fr); } }
+
+.pmw-history-pages {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--pm-space-2);
+  margin: 0 var(--pm-space-3);
+}
+
+/* The host's pending approvals, from the app bar. */
+.pmw-approvals { display: grid; gap: var(--pm-space-2); }
+.pmw-approvals__heading { margin: 0; font-size: var(--pm-text-md); font-weight: var(--pm-weight-semibold); }
+.pmw-approvals__list { display: grid; gap: var(--pm-space-3); margin: 0; padding: 0; list-style: none; }
+.pmw-approvals__item { display: grid; gap: var(--pm-space-1); }
+.pmw-approvals__item + .pmw-approvals__item { padding-top: var(--pm-space-3); border-top: var(--pm-size-hairline) solid var(--pm-color-line); }
+.pmw-approvals__title { margin: 0; color: var(--pm-color-ink); overflow-wrap: anywhere; }
+.pmw-approvals .pmw-muted { margin: 0; }
+.pmw-approvals__detail { max-height: 30vh; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
+.pmw-approvals__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pm-space-2); }
+
+/* The kitten walking over the preview to the blocks the AI changed: its ground line meets the block's lower left. */
+.pmw-change-trail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  transform: translate(calc(var(--pmw-trail-x) - 45%), calc(var(--pmw-trail-y) - 89%));
+  transition: transform var(--pm-duration-walk) linear, opacity var(--pm-duration-slow);
+}
+
+.pmw-change-trail[data-phase='done'] {
+  opacity: 0.9;
+}
+
+.pmw-change-trail__facing[data-facing='left'] {
+  transform: scaleX(-1);
+}