/*
 * M2 · Profile: D-19 (identity, photo, password, signed records, email notifications, Sign Out) and
 * the "View all" signed records list. The Admin profile reuses these classes (identity, photo and
 * password cards).
 */
@layer pages {
  .profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .profile-grid__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* Identity (read-only) */
  .profile-identity__head {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .profile-identity__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .profile-identity__name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
  }
  .profile-identity__role {
    font-size: 14px;
    color: var(--color-neutral-700);
  }
  .profile-identity__note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--color-neutral-700);
  }
  .profile-identity__note .icon { font-size: 14px; }
  /* A long email moves under its label instead of breaking mid-word. */
  .profile-identity .kv__row { flex-wrap: wrap; column-gap: 16px; }
  .profile-identity .kv__value { margin-left: auto; overflow-wrap: break-word; }

  /* Photo: the current photo (or initials), Upload / Replace and Remove, the reason under them. */
  .profile-photo__body {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .profile-photo__main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .profile-photo__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-neutral-800);
  }
  .profile-photo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .profile-photo__form { display: flex; margin: 0; }
  /* The label is the button; the file input inside it is visually hidden but keeps the focus. */
  .profile-photo__pick:has(input:focus-visible) { box-shadow: var(--ring); }
  .profile-photo__main.is-uploading .profile-photo__pick { cursor: progress; opacity: 0.75; }

  /* Password */
  .profile-password__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .profile-password__actions { display: flex; }

  /* Signed records */
  .profile-records__all { align-self: flex-start; }
  .profile-records .rows__item { min-height: 69px; }
  /* A policy the Director can no longer see: neutral label instead of its title. */
  .records__unavailable { color: var(--color-neutral-700); font-weight: 600; }

  .profile-signout { display: flex; }

  /* "View all" list */
  .records-list {
    --list-cols: minmax(0, 2.4fr) 120px 84px minmax(0, 1.3fr) 150px;
    --list-cols-mobile: minmax(0, 1fr) auto;
  }

  @media (max-width: 1023px) {
    .profile-grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 767px) {
    .profile-grid { gap: 16px; }
    .profile-grid .card--lg { padding: 22px 20px; }
    .profile-identity__name { font-size: 20px; }
    .profile-photo__body { align-items: flex-start; gap: 14px; }
    .profile-photo__pick,
    .profile-photo .button-to .btn { height: 44px; }
    /* 44px tap target; the extra height is split above and below the text. */
    .profile-records__all {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      margin-block: -11px;
    }
  }
}