@layer components {
  .subject-form {
    container: subject-form / inline-size;
  }

  @container subject-form (width >= 28rem) {
    .subject-form .field {
      grid-template-columns: 8rem minmax(0, 1fr);
      column-gap: 1rem;

      & > .label,
      & > [data-herb-debug-outline-type] > .label {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding-block-start: 0.75rem;
        overflow-wrap: anywhere;
      }

      & > .input,
      & > [data-herb-debug-outline-type] > .input {
        grid-column: 2;
        grid-row: 1;
        min-inline-size: 0;
      }

      & > .field__hint,
      & > .field__error {
        grid-column: 2;
      }
    }
  }

  .subject-profile {
    display: grid;
    gap: 1rem;
  }

  .profile-summary {
    margin: 0;
  }

  .profile-summary__unset {
    color: var(--muted-foreground);
  }

  .subject-notes {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 40rem;
    margin-block-start: 1.25rem;

    & > h2 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: var(--leading-tight);
    }
  }

  .subject-conversations,
  .subject-bookings,
  .subject-orders {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 40rem;
    margin-block-start: 1.25rem;

    & > h2 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: var(--leading-tight);
    }
  }

  .subject-conversations__body,
  .subject-bookings__body,
  .subject-bookings__group,
  .subject-orders__body {
    display: grid;
    gap: 0.75rem;
  }

  .subject-bookings__group > h3 {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);
  }

  .subject-bookings__list,
  .subject-orders__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .subject-bookings__item,
  .subject-orders__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .subject-bookings__when,
  .subject-orders__name {
    margin: 0;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .subject-bookings__status,
  .subject-orders__status {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .subject-bookings__services,
  .subject-bookings__meta,
  .subject-orders__items,
  .subject-orders__meta {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    overflow-wrap: anywhere;
  }

  .subject-bookings__meta,
  .subject-orders__meta {
    color: var(--muted-foreground);
  }

  .subject-orders__name time {
    white-space: nowrap;
  }

  .subject-orders__status {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.25rem;
  }

  .subject-notes__body,
  .subject-notes__form {
    display: grid;
    gap: 0.75rem;
  }

  .subject-notes__form {
    justify-items: start;

    & > .field {
      justify-self: stretch;
    }
  }

  .subject-notes__list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .subject-notes__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .subject-notes__text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .subject-notes__meta {
    grid-column: 1;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .subject-notes__remove,
  .subject-notes__item > .button-form {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .space-form + .space-form {
    margin-block-start: 2rem;
  }

  .settings-list {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
  }

  .settings-list__list {
    display: grid;
    gap: 0.5rem;
    justify-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .settings-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .settings-list__body {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }

  .settings-list__name {
    margin: 0;
    font-weight: var(--font-weight-medium);
  }

  .settings-list__meta {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    overflow-wrap: anywhere;
  }

  .settings-list__danger {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    max-inline-size: 40rem;
    margin-block-start: 2rem;

    & > h2 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: var(--leading-tight);
    }
  }

  .subject-provider-changes {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 40rem;
    margin-block-start: 1.25rem;

    & > h2 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: var(--leading-tight);
    }
  }

  .provider-changes__body {
    display: grid;
    gap: 0.75rem;
  }

  .provider-change__header {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;

    & > h3 {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: var(--text-sm--line-height);
    }
  }

  .provider-change__value,
  .provider-changes__value {
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .provider-change__note {
    margin: 0;
    text-wrap: pretty;

    &:empty {
      display: none;
    }
  }

  /* A decision hides the actions until the page shows what the server did. */
  .provider-change:has(.provider-change__actions[hidden]) {
    & .provider-change__note {
      display: none;
    }

    & .provider-change__status {
      border-color: var(--border);
      background: none;
      color: var(--foreground);
    }
  }

  .provider-change__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    &[hidden] {
      display: none;
    }
  }

  .provider-changes__history {
    display: grid;
    gap: 0.5rem;

    & > h3 {
      color: var(--muted-foreground);
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: var(--text-sm--line-height);
    }

    & > ol {
      display: grid;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & li {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.25rem 0.75rem;
      padding: 0.75rem 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
  }

  .provider-changes__summary,
  .provider-changes__meta {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    overflow-wrap: anywhere;
  }

  .provider-changes__status {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .provider-changes__meta {
    grid-column: 1 / -1;
    color: var(--muted-foreground);
  }

  /* The pipelines a subject's page can add it to, as a menu of links. */
  .popover.add-to-pipeline {
    gap: 0;
    min-inline-size: 14rem;
    padding: 0.25rem;
  }

  /* Only the icon on a narrow toolbar, so Delete stays in reach. */
  .add-to-pipeline__trigger .button__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;

    @media (width >= 40rem) {
      position: static;
      inline-size: auto;
      block-size: auto;
      overflow: visible;
      clip-path: none;
    }
  }
}