/*
 * The People overview: a search above a list of cards (PersonRowComponent),
 * each the person's avatar beside their name and hours -- the same card as an
 * objective's row on the strategic plan.
 */
@layer components {
  .people-search {
    max-inline-size: var(--width-reading);
    margin-block-end: var(--space-7);
  }

  .person-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;

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

  .person-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border: var(--border);
    border-radius: var(--radius-m);
    background: var(--color-paper);

    &:hover {
      border-color: var(--color-text);
    }

    & > * {
      margin: 0;
    }
  }

  .person-row__body > * {
    margin: 0;
    max-inline-size: none;
  }

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

  /* The name links to the person's page; it reads as a heading. */
  .person-row__open {
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      color: var(--color-ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
  }

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

  /* Inactive: listed after everyone active, faded, still opens their page. */
  .person-row--inactive {
    background: var(--color-surface-2);

    & .avatar,
    & .person-row__summary {
      opacity: 0.6;
    }

    & .person-row__open {
      color: var(--color-muted);
    }
  }
}

/*
 * The new person card at the top of the list (people/_new_form): hidden until
 * the "Add person" button targets #new-person, or until it holds an error.
 */
@layer components {
  .person-row--new {
    display: none;
    /* The cards below are list items at reading width; the card matches them. */
    max-inline-size: var(--width-reading);
    margin-block-end: var(--space-3);
    padding-block: var(--space-5);
    /* Jumping to it keeps the banner and the "Add person" row in view. */
    scroll-margin-block-start: calc(var(--app-header-height) + var(--control-height) + var(--space-9));
    border-style: dashed;
    border-color: var(--color-text);

    &:target,
    &:has([aria-invalid="true"]) {
      display: block;
    }
  }

  .person-new-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: start;

    & > p {
      margin: 0;
      max-inline-size: none;
    }

    & :is(input, select) {
      inline-size: 100%;
      max-inline-size: 100%;
    }

    & input[type="submit"] {
      inline-size: auto;
    }
  }

  .person-new-form__wide {
    grid-column: 1 / -1;
  }
}