[data-aos='screen'][data-aos-route^='aos://apps/calendar'] > [data-aos-region='detail-pane']:has(.form-inner) {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow: hidden;
  background: var(--surface-100);

  & > [data-aos='section'] {
    flex: none;
  }

  & > [data-aos='section']:has(> .form-scroll) {
    flex: 1;
    min-block-size: 0;
  }

  & .phead > [data-component='pane-head'] {
    flex: 1;
    min-inline-size: 0;
    inline-size: auto;

    &::after {
      display: none;
    }
  }

  & .form-scroll {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  & .form-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-150);
    padding: var(--space-150) var(--space-300) var(--space-300);
  }

  & .form-inner > * {
    flex: none;
    max-inline-size: none;
    min-inline-size: 0;
  }

  & .form-title {
    font-size: var(--type-500);
    font-weight: var(--weight-strong);
  }

  & [data-form-choice] {
    grid-template-columns: calc(var(--space-300) * 3 + var(--space-100)) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-150);
    font-size: var(--type-200);

    & > [data-slot='field'] {
      justify-self: start;
      max-inline-size: 100%;
      min-inline-size: 0;
    }

    & [data-component='field'] {
      inline-size: max-content;
      max-inline-size: 100%;
      background-color: var(--surface-200);
      cursor: pointer;
    }

    & select {
      max-inline-size: 100%;
      font-weight: var(--weight-medium);
    }
  }

  & .dt-row {
    flex-wrap: wrap;
    gap: var(--space-100);
  }

  & .dt-half {
    flex: none;
    gap: var(--space-100);
    max-inline-size: 100%;
  }

  & .dt-field {
    min-inline-size: 0;
  }

  & .dt-date {
    inline-size: calc(var(--control-500) * 3 + var(--space-200));
  }

  & .dt-time {
    inline-size: calc(var(--control-500) * 2 + var(--space-200));
  }

  & .form-foot {
    flex-wrap: wrap;
    padding: var(--space-150) var(--space-300);
    border-block-start: var(--border-state);
    border-block-start-color: var(--hairline);
  }

  & .form-foot > * {
    flex: none;
  }

  & .form-foot > .ff-gap {
    flex: 1;
  }

  & select {
    cursor: pointer;
  }
}