:root {
  --canvas-shell-inline-padding: var(--canvas-spacing-md);
  --canvas-shell-block-padding: var(--canvas-spacing-md);
  --canvas-shell-sticky-gap: var(--canvas-spacing-sm);
}

.canvas-application-shell,
.canvas-gameplay-shell,
.canvas-modal-shell {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  isolation: isolate;
}

.canvas-application-shell,
.canvas-gameplay-shell {
  position: absolute;
  inset: var(--canvas-safe-top) var(--canvas-safe-right) var(--canvas-safe-bottom) var(--canvas-safe-left);
  inline-size: auto;
  block-size: auto;
}

.canvas-application-shell {
  padding-inline: var(--canvas-shell-inline-padding);
}

.canvas-gameplay-shell {
  padding-inline: var(--canvas-spacing-sm);
}

.canvas-modal-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  padding:
    max(var(--canvas-spacing-sm), var(--canvas-safe-top))
    max(var(--canvas-spacing-sm), var(--canvas-safe-right))
    max(var(--canvas-spacing-sm), var(--canvas-safe-bottom))
    max(var(--canvas-spacing-sm), var(--canvas-safe-left));
}

.canvas-modal-shell {
  inline-size: min(100%, var(--canvas-panel-wide));
  max-block-size: 100%;
  border-radius: var(--canvas-radius-lg);
}

.canvas-shell-header,
.canvas-shell-actions {
  position: relative;
  z-index: 2;
  min-inline-size: 0;
  flex: none;
}

.canvas-shell-header { grid-row: 1; padding-block: var(--canvas-shell-sticky-gap); }
.canvas-shell-actions {
  grid-row: 3;
  padding-block: var(--canvas-shell-sticky-gap);
}
.canvas-shell-actions :is(button, a, input, select, textarea, [role="button"]) { min-block-size: 44px; }

.canvas-shell-scroll {
  grid-row: 2;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-block:
    calc(var(--canvas-control-standard) + var(--canvas-shell-sticky-gap))
    calc(var(--canvas-control-standard) + var(--canvas-shell-sticky-gap) + var(--keyboard-inset));
  -webkit-overflow-scrolling: touch;
}

body.is-keyboard-open .canvas-modal-overlay {
  place-items: stretch center;
  padding-block: max(var(--canvas-spacing-xs), var(--canvas-safe-top)) max(var(--canvas-spacing-xs), var(--canvas-safe-bottom));
}
body.is-keyboard-open .canvas-modal-shell { block-size: 100%; max-block-size: 100%; }

html[data-canvas-compact-height="true"] {
  --canvas-shell-block-padding: var(--canvas-spacing-sm);
  --canvas-shell-sticky-gap: var(--canvas-spacing-xs);
}