[data-fui-comp="ui-workbench"] {
  display: flex;
  align-items: stretch;
  block-size: 100dvh;
  inline-size: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

[data-fui-comp="ui-workbench"] .ui-workbench__rail {
  flex: 0 0 auto;
  inline-size: var(--ui-workbench-rail, 320px);
  min-inline-size: 0;
  /* The rail scrolls, the page does not. Without this the whole document
     grows to the length of the control list and the pane scrolls away. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--spacing-md, 16px);
  box-sizing: border-box;
  background-color: var(--color-surface, #fff);
  border-inline-end: 1px solid var(--color-border, #e4e4e7);
}

[data-fui-comp="ui-workbench"] .ui-workbench__pane {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  overflow: hidden;
  background-color: var(--color-background, #fafaf9);
}

/* An iframe is the pane's motivating occupant and defaults to a small bordered
   box, so fill it here rather than making every caller remember. */
[data-fui-comp="ui-workbench"] .ui-workbench__pane > iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* Below the split point the rail sits above the pane and the page scrolls
   normally — a 320px rail beside anything is unusable on a phone. */
@media (max-width: 720px) {
  [data-fui-comp="ui-workbench"] {
    display: block;
    block-size: auto;
    overflow: visible;
  }
  [data-fui-comp="ui-workbench"] .ui-workbench__rail {
    inline-size: 100%;
    overflow-y: visible;
    border-inline-end: none;
    border-block-end: 1px solid var(--color-border, #e4e4e7);
  }
  [data-fui-comp="ui-workbench"] .ui-workbench__pane {
    block-size: 70vh;
  }
}