/* One centered page frame; wide screens retain space for future side placements. */
@media screen {
  :root {
    --ag-frame-width: 1280px;
    --ag-frame-edge: max(0px, calc((100vw - var(--ag-frame-width)) / 2));
    --gutter: clamp(18px, 2.5vw, 32px);
  }
  html { background: #f8f6f2; }
  body {
    width: 100%;
    max-width: var(--ag-frame-width);
    margin-inline: auto;
    min-height: 100vh;
  }
}

@media screen and (min-width: 1281px) {
  /* Floating controls belong to the page, leaving the side spaces unobstructed. */
  .support-launcher,
  .ag-workspace .support-launcher { right: calc(var(--ag-frame-edge) + 20px); }
  .support-dialog { margin-right: calc(var(--ag-frame-edge) + 20px); }
  .ag-workspace .active-tripbar {
    left: calc(var(--ag-frame-edge) + 238px);
    max-width: calc(var(--ag-frame-width) - 320px);
  }
}