.viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
}

.viewport[data-board-hydrated="false"] {
  overflow: clip;
}

.sizer {
  position: relative;
}

.canvas {
  position: absolute;
  inset: 0 auto auto 0;

  /*
   * Keep dashboard UI at its normal readable density while the fixed canvas
   * is fitted below 100%. Above 100%, the canvas still behaves like browser
   * zoom and enlarges everything together.
   */
  --mantine-scale: var(--board-canvas-ui-scale, 1);
  /* Keep a subtle boundary inset without widening the visual gap too much. */
  --board-grid-item-inset: calc(var(--mantine-spacing-xs) / 2);
  --mantine-spacing-xs: calc(0.625rem * var(--board-canvas-ui-scale, 1));
  --mantine-spacing-sm: calc(0.75rem * var(--board-canvas-ui-scale, 1));
  --mantine-spacing-md: calc(1rem * var(--board-canvas-ui-scale, 1));
  --mantine-spacing-lg: calc(1.25rem * var(--board-canvas-ui-scale, 1));
  --mantine-spacing-xl: calc(2rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-xxs: calc(0.6875rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-xs: calc(0.75rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-sm: calc(0.875rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-md: calc(1rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-lg: calc(1.125rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-xl: calc(1.25rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-2xl: calc(1.5rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-3xl: calc(1.75rem * var(--board-canvas-ui-scale, 1));
  --mantine-font-size-4xl: calc(2.25rem * var(--board-canvas-ui-scale, 1));
  --mantine-h1-font-size: calc(2.125rem * var(--board-canvas-ui-scale, 1));
  --mantine-h2-font-size: calc(1.625rem * var(--board-canvas-ui-scale, 1));
  --mantine-h3-font-size: calc(1.375rem * var(--board-canvas-ui-scale, 1));
  --mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1));
  --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
  --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
  /* Without these, border-radius tokens (e.g. the board's "Item radius" setting) stay at their
   * flat rem value while the canvas zoom shrinks the rendered card, so the chosen radius becomes
   * imperceptibly small on busy/zoomed-out boards - same class of bug as the spacing/font tokens
   * above, just never ported over to radius. */
  --mantine-radius-xs: calc(0.25rem * var(--board-canvas-ui-scale, 1));
  --mantine-radius-sm: calc(0.25rem * var(--board-canvas-ui-scale, 1));
  --mantine-radius-md: calc(0.5rem * var(--board-canvas-ui-scale, 1));
  --mantine-radius-lg: calc(0.75rem * var(--board-canvas-ui-scale, 1));
  --mantine-radius-xl: calc(1rem * var(--board-canvas-ui-scale, 1));
}