@layer env.components {
  .env-panes {
    --env-panes-size: 22.5rem;
    --env-panes-other-min: 16rem;
    --env-panes-sheet-room: 3.5rem;
    --env-panes-gap: var(--env-space-4);
    container: env-panes / inline-size;
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    block-size: 100%;
    min-block-size: 0;
    min-inline-size: 0;
  }
  .env-panes[data-behavior='supporting'] {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .env-panes[data-behavior='list-detail'] {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .env-panes-main,
  .env-panes-supporting,
  .env-panes-list,
  .env-panes-detail {
    box-sizing: border-box;
    grid-row: 1;
    min-inline-size: 0;
    min-block-size: 0;
    overflow: auto;
    outline: none;
  }
  .env-panes-main {
    grid-column: 1;
  }
  .env-panes-divider {
    --env-resize-handle-size: var(--env-panes-gap);
    display: none;
    grid-column: 2;
    grid-row: 1;
  }
  @media (pointer: coarse) {
    .env-panes-divider::before {
      content: '';
      position: absolute;
      inset-block: 0;
      inset-inline: calc((var(--env-panes-gap) - var(--env-control-height-touch)) / 2);
    }
  }
  .env-panes[data-behavior='supporting']:not(:has(> .env-panes-divider)) > .env-panes-supporting {
    margin-inline-start: calc(var(--env-panes-split, 0) * var(--env-panes-gap));
  }
  .env-panes[data-behavior='list-detail']:not(:has(> .env-panes-divider)) > .env-panes-list {
    margin-inline-end: calc(var(--env-panes-split, 0) * var(--env-panes-gap));
  }
  .env-panes-supporting {
    --env-panes-sheet-edge: var(--env-theme-high-contrast) var(--env-elevation-3-border);
    position: absolute;
    inset-inline: 0;
    inset-block: auto 0;
    z-index: var(--env-z-supporting-pane);
    display: none;
    max-block-size: 85%;
    border: var(--env-control-border-width) solid var(--env-panes-sheet-edge, transparent);
    border-block-end-width: 0;
    border-start-start-radius: var(--env-radius-surface);
    border-start-end-radius: var(--env-radius-surface);
    background: var(--env-color-bg-default);
    overscroll-behavior: contain;
  }
  .env-panes[data-behavior='supporting'][data-open] > .env-panes-supporting {
    display: block;
  }
  .env-panes-close {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--env-z-raised);
    display: flex;
    justify-content: flex-end;
    padding: var(--env-space-2);
    background: var(--env-color-bg-default);
  }
  .env-panes-backdrop {
    display: none;
  }
  .env-panes[data-behavior='supporting'][data-open] > .env-panes-backdrop {
    position: absolute;
    inset: 0;
    z-index: calc(var(--env-z-supporting-pane) - 1);
    display: block;
    background: var(--env-color-bg-backdrop-muted);
  }
  @container env-panes (width >= 37.5rem) {
    .env-panes > .env-panes-supporting {
      inset-block: 0;
      inset-inline: auto 0;
      inline-size: min(var(--env-panes-size), 100% - var(--env-panes-sheet-room));
      max-block-size: none;
      border-width: 0;
      border-inline-start-width: var(--env-control-border-width);
      border-radius: 0;
    }
  }
  .env-panes-list,
  .env-panes-detail {
    grid-column: 1 / -1;
  }
  .env-panes[data-behavior='list-detail'][data-open] > .env-panes-list,
  .env-panes[data-behavior='list-detail']:not([data-open]) > .env-panes-detail {
    display: none;
  }
  .env-panes[data-behavior='list-detail'][data-open] > .env-panes-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .env-panes-back {
    padding-block: var(--env-space-3) var(--env-space-2);
    padding-inline: var(--env-space-4);
  }
  .env-panes-back .env-icon:dir(rtl) {
    transform: scaleX(-1);
  }
  @container env-panes (width >= 37.5rem) {
    .env-panes:is([data-split-at='medium'])[data-behavior] > .env-panes-divider {
      display: block;
    }
    .env-panes:is([data-split-at='medium'])[data-behavior]
      > :is(.env-panes-supporting, .env-panes-list) {
      --env-panes-split: 1;
    }
    .env-panes:is([data-split-at='medium'])[data-behavior='supporting'] > .env-panes-supporting {
      position: static;
      display: block;
      grid-column: 3;
      inline-size: min(
        var(--env-panes-size),
        100cqi - var(--env-panes-other-min) - var(--env-panes-gap)
      );
      max-block-size: none;
      border: 0;
      border-radius: 0;
      background: none;
    }
    .env-panes:is([data-split-at='medium'])[data-behavior='supporting'] > .env-panes-backdrop {
      display: none;
    }
    .env-panes:is([data-split-at='medium'])[data-behavior='supporting']
      > .env-panes-supporting
      > .env-panes-close {
      display: none;
    }
    .env-panes:is([data-split-at='medium'])[data-behavior='supporting'] .env-panes-trigger {
      display: none;
    }
    .env-panes:is([data-split-at='medium'])[data-behavior='list-detail'] > .env-panes-list {
      display: block;
      grid-column: 1;
      inline-size: min(
        var(--env-panes-size),
        100cqi - var(--env-panes-other-min) - var(--env-panes-gap)
      );
    }
    .env-panes:is([data-split-at='medium'])[data-behavior='list-detail'] > .env-panes-detail {
      display: block;
      grid-column: 3;
    }
    .env-panes:is([data-split-at='medium'])[data-behavior='list-detail']
      > .env-panes-detail
      > .env-panes-back {
      display: none;
    }
  }
  @container env-panes (width >= 52.5rem) {
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior]
      > .env-panes-divider {
      display: block;
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior]
      > :is(.env-panes-supporting, .env-panes-list) {
      --env-panes-split: 1;
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior='supporting']
      > .env-panes-supporting {
      position: static;
      display: block;
      grid-column: 3;
      inline-size: min(
        var(--env-panes-size),
        100cqi - var(--env-panes-other-min) - var(--env-panes-gap)
      );
      max-block-size: none;
      border: 0;
      border-radius: 0;
      background: none;
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior='supporting']
      > .env-panes-backdrop {
      display: none;
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior='supporting']
      > .env-panes-supporting
      > .env-panes-close {
      display: none;
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior='supporting']
      .env-panes-trigger {
      display: none;
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior='list-detail']
      > .env-panes-list {
      display: block;
      grid-column: 1;
      inline-size: min(
        var(--env-panes-size),
        100cqi - var(--env-panes-other-min) - var(--env-panes-gap)
      );
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior='list-detail']
      > .env-panes-detail {
      display: block;
      grid-column: 3;
    }
    .env-panes:is([data-split-at='medium'], [data-split-at='expanded'])[data-behavior='list-detail']
      > .env-panes-detail
      > .env-panes-back {
      display: none;
    }
  }
  @container env-panes (width >= 75rem) {
    .env-panes:is([data-split-at])[data-behavior] > .env-panes-divider {
      display: block;
    }
    .env-panes:is([data-split-at])[data-behavior] > :is(.env-panes-supporting, .env-panes-list) {
      --env-panes-split: 1;
    }
    .env-panes:is([data-split-at])[data-behavior='supporting'] > .env-panes-supporting {
      position: static;
      display: block;
      grid-column: 3;
      inline-size: min(
        var(--env-panes-size),
        100cqi - var(--env-panes-other-min) - var(--env-panes-gap)
      );
      max-block-size: none;
      border: 0;
      border-radius: 0;
      background: none;
    }
    .env-panes:is([data-split-at])[data-behavior='supporting'] > .env-panes-backdrop {
      display: none;
    }
    .env-panes:is([data-split-at])[data-behavior='supporting']
      > .env-panes-supporting
      > .env-panes-close {
      display: none;
    }
    .env-panes:is([data-split-at])[data-behavior='supporting'] .env-panes-trigger {
      display: none;
    }
    .env-panes:is([data-split-at])[data-behavior='list-detail'] > .env-panes-list {
      display: block;
      grid-column: 1;
      inline-size: min(
        var(--env-panes-size),
        100cqi - var(--env-panes-other-min) - var(--env-panes-gap)
      );
    }
    .env-panes:is([data-split-at])[data-behavior='list-detail'] > .env-panes-detail {
      display: block;
      grid-column: 3;
    }
    .env-panes:is([data-split-at])[data-behavior='list-detail']
      > .env-panes-detail
      > .env-panes-back {
      display: none;
    }
  }
  @media (forced-colors: active) {
    .env-panes-supporting {
      border-color: CanvasText;
    }
  }
}