/*
 * A person's page (people/show): the person beside their actions, the same
 * layout as an objective's page. Every field is edited in place.
 */
@layer components {
  .person-detail__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    border-block-end: var(--border);
  }

  .person-detail__meta {
    font: var(--text-small);
    color: var(--color-muted);
  }

  .person-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-8);
    padding-block: var(--space-6) var(--space-8);
    align-items: start;
  }

  .person-detail__main {
    display: grid;
    gap: var(--space-7);

    & > * + * {
      margin-block-start: 0;
    }
  }

  /* Stays beside the content while it scrolls, below the sticky banner. */
  .person-detail__sidebar {
    position: sticky;
    inset-block-start: calc(var(--app-header-height) + var(--space-6));
    display: grid;
    gap: var(--space-3);
    padding-inline-start: var(--space-6);
    border-inline-start: var(--border);

    & > * + * {
      margin-block-start: 0;
    }
  }

  /* The large avatar beside the name. */
  .person-detail__identity {
    display: flex;
    align-items: center;
    gap: var(--space-5);

    & .field-error {
      display: block;
      max-inline-size: 12rem;
    }
  }

  .person-detail__name {
    flex: 1;
  }

  /* The name as plain text, for a viewer. */
  .person-detail__title {
    margin: 0;
    font: var(--text-display-m);
    color: var(--color-ink);
  }

  .person-detail--inactive .person-detail__identity .avatar {
    opacity: 0.6;
  }

  /* The name reads as the page's heading until focused (title-form). */
  .title-form .title-form__input--display {
    font: var(--text-display-m);
  }
}

/* The person's details: label on the left, the value (or its field) beside it. */
@layer components {
  .person-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
  }

  .person-facts__item {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);

    & dt {
      font: var(--text-small);
      color: var(--color-muted);
    }

    & dt label {
      margin: 0;
      font: inherit;
      color: inherit;
    }

    & dd {
      margin: 0;
    }
  }

  .person-facts__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    & > a {
      font: var(--text-small);
    }
  }

  .person-facts__form {
    & :where(select) {
      inline-size: 16rem;
    }

    /* Save shows only while the field is being edited. */
    & input[type="submit"] {
      visibility: hidden;
    }

    &:focus-within input[type="submit"],
    &:has([aria-invalid="true"]) input[type="submit"] {
      visibility: visible;
    }
  }

  .person-facts__unit {
    font: var(--text-small);
    color: var(--color-muted);
  }
}

/* A year of availability: the year's neighbours, then twelve months in a grid. */
@layer components {
  .availability__years {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
  }

  .availability__months {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;

    & > li + li {
      margin-block-start: 0;
    }
  }

  .availability-month {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: var(--border);
    border-radius: var(--radius-m);
    background: var(--color-paper);

    & label,
    & > span:first-child {
      margin: 0;
      font: var(--text-small);
      color: var(--color-muted);
    }

    & input {
      inline-size: 100%;
      min-inline-size: 0;
    }

    & .field-message {
      margin-block-start: 0;
    }
  }

  .availability-month__status {
    font: var(--text-caption);
    color: var(--color-subtle);
  }

  .availability-month--recorded .availability-month__status {
    color: var(--color-muted);
  }

  .availability__fill {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
  }
}