/*
 * M2 · M-07 More (the phone tab bar's "More"): profile card, Resources and Account groups.
 * Rows: 60px resource rows with 38px category discs, 56px account rows, hairlines between rows.
 */
@layer pages {
  .more-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 560px;
  }

  .more-page__label { margin: 4px 0 0; }

  .more-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 24px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
  }
  .more-profile:hover { background: var(--color-neutral-300); color: var(--color-text); }

  .more-profile__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.45;
  }
  .more-profile__name { font-size: 16px; font-weight: 700; }
  .more-profile__sub { font-size: 13px; color: var(--color-neutral-700); }

  .more-chev {
    font-size: 17px;
    color: var(--color-neutral-700);
  }
  .more-profile .more-chev { font-size: 18px; }

  .more-group {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: var(--color-surface);
  }
  .more-group > :not(:first-child) { border-top: 1px solid var(--color-hairline); }

  .more-item__form { display: block; margin: 0; }

  .more-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
  }
  .more-item:hover { background: var(--color-neutral-300); color: var(--color-text); }
  .more-item:focus-visible { outline-offset: -2px; }

  .more-item--resource {
    min-height: 60px;
    font-weight: 700;
  }

  /* An Admin-created category and My Team: a plain disc on the card. */
  .more-item .icon-circle--neutral { background: var(--color-bg); }

  .more-item__label { flex: 1; min-width: 0; }
  .more-item__icon { display: flex; flex: none; font-size: 18px; }

  @media (max-width: 767px) {
    .more-page { max-width: none; }
    .more-page__label { margin: 0; }
  }
}