@layer components {
  .priority-panel {
    display: flex;
    flex: auto;
    flex-direction: column;
    min-block-size: var(--space-0);
  }

  .stage:has(.sheet__disclosure[open]) .priority-panel {
    visibility: hidden;
    transition: visibility var(--dur-sheet);
  }

  .priority-panel__scroller {
    flex: auto;
    min-block-size: var(--space-0);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block-end: calc(var(--dock-clearance) + var(--sheet-clearance));
  }

  .priority-items {
    display: block;
    padding-block-end: calc(var(--dock-clearance) + var(--sheet-clearance) + var(--space-8));
  }

  .priority-items > .page-title {
    padding-block-start: var(--space-7);
  }
}

@layer components {
  @media (width >= 1100px) {
    .priority-panel,
    .stage:has(.sheet__disclosure[open]) .priority-panel {
      inline-size: 40%;
      visibility: visible;
      border-inline-end: var(--border-width) solid var(--color-border);
    }

    .priority-panel__scroller {
      scroll-padding-block-end: var(--dock-clearance);
    }

    .priority-items {
      padding-block-end: calc(var(--dock-clearance) + var(--space-8));
    }

    .priority-panel .item-row {
      padding-inline: var(--space-4);
      margin-inline: calc(var(--space-4) * -1);
      border-radius: var(--radius-md);
    }

    .priority-panel .item-row + .item-row {
      border-block-start: none;
    }

    .priority-panel .item-row__description {
      display: none;
    }
  }
}