[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;
  }

  /* The glyph rows share these columns through subgrid, so every dropdown takes the widest one's width. */
  & .form-inner {
    display: grid;
    grid-template-columns: var(--space-200) fit-content(100%) minmax(0, 1fr);
    align-content: start;
    gap: var(--space-150);
    padding: var(--space-150) var(--space-300) var(--space-300);
  }

  & .form-inner > * {
    grid-column: 1 / -1;
    max-inline-size: none;
    min-inline-size: 0;
  }

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

  & [data-form-glyph] {
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--space-150);
    font-size: var(--type-200);

    & > [data-slot='field'] {
      min-inline-size: 0;
    }

    & [data-component='select'] {
      inline-size: 100%;
    }
  }

  & [data-form-glyph='location'] > [data-slot='field'] {
    grid-column: 2 / -1;
  }

  & .form-glyph {
    display: flex;
    color: var(--ink-muted);

    & > svg {
      inline-size: var(--space-200);
      block-size: var(--space-200);
      flex: none;
    }
  }

  /* The held value and every option it could hold share one cell, so the trigger is as wide as the longest. */
  & .form-choice__value {
    display: grid;
    overflow: visible;

    & > * {
      grid-area: 1 / 1;
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  & .form-choice__size {
    visibility: hidden;
    block-size: 0;
  }

  & [data-label='hidden'] > [data-slot='label'] {
    display: none;
  }

  & .dt-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-150);
    row-gap: var(--space-050);
    inline-size: 100%;
    min-block-size: var(--kit-step);
    padding: var(--space-050) var(--space-150);
    border: 0;
    border-radius: var(--radius-200);
    background-color: var(--surface-300);
    color: var(--ink-body);
    font: inherit;
    font-size: var(--type-300);
    text-align: start;
    cursor: pointer;

    &:hover {
      box-shadow: inset 0 0 0 100vmax var(--state-hover);
    }

    &:focus-visible {
      outline: var(--focus-ring-width) solid var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  & .dt-part {
    white-space: nowrap;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: var(--border-mark-width);
    text-underline-offset: var(--space-050);
    transition: text-decoration-color var(--duration-100) var(--ease);

    &:hover {
      text-decoration-color: currentColor;
    }
  }

  & .dt-until {
    color: var(--ink-muted);
  }

  & .dt-row {
    display: grid;
    grid-template-columns:
      max-content
      minmax(calc(var(--control-500) * 3), calc(var(--control-500) * 3 + var(--space-200) + var(--space-300)))
      minmax(calc(var(--control-500) * 2), calc(var(--control-500) * 2 + var(--space-200) + var(--space-300)));
    gap: var(--space-100);
    justify-content: start;
  }

  & .dt-line {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }

  & .dt-edge {
    padding-inline-end: var(--space-050);
    color: var(--ink-muted);
    font-size: var(--type-200);
  }

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

  & [data-all-day] {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: subgrid;
    align-items: center;
    justify-items: start;
    padding-inline: 0;

    & > [data-slot='label'] {
      grid-column: 1;
      grid-row: 1;
      padding-inline-end: var(--space-050);
      color: var(--ink-muted);
      font-size: var(--type-200);
    }

    & > [data-slot='box'] {
      grid-column: 2;
      grid-row: 1;
    }
  }

  & .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-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-100);
    padding-block: var(--space-050);
  }

  & .form-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--control-400);
    block-size: var(--control-400);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--swatch-hue);
    color: var(--surface-000);
    cursor: pointer;
    transition: transform var(--duration-100) var(--ease), box-shadow var(--duration-100) var(--ease);

    & > svg {
      inline-size: var(--space-200);
      block-size: var(--space-200);
      opacity: 0;
    }

    &:hover {
      transform: scale(1.08);
    }

    &:active {
      transform: scale(0.96);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    &[aria-checked='true'] {
      box-shadow: 0 0 0 2px var(--surface-100), 0 0 0 3.5px var(--swatch-hue);

      & > svg {
        opacity: 1;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-aos='screen'][data-aos-route^='aos://apps/calendar'] .form-swatch {
    transition: none;
  }
}