/*
 * My Team for reporting lines (module R, docs/PHASE2.md §18.3): the D-31 record header — the 64px
 * avatar beside the crumbs, the title and the job role / level / "Reports to" line, with Edit
 * Details, Change Manager and Change Job Role — and D-20's List | Org chart toggle (D-30).
 */
@layer pages {
  .rl-record-head { align-items: center; gap: 18px; }
  .rl-record-head__avatar { font-size: 15px; }
  .rl-record-head__text { flex: 1; gap: 8px; }
  .rl-record-head__text > .crumbs { font-weight: 600; }
  .rl-record-head__text > .crumbs a { color: var(--color-blue); }
  .rl-record-head__text > .crumbs a:hover { color: var(--color-blue-deep); }
  .rl-record-head__text > .crumbs .crumbs__current { font-weight: 600; color: inherit; }
  .rl-record-head .page-head__title { font-size: 36px; }
  .rl-record-head__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .rl-record-head__reports { color: var(--color-neutral-800); font-size: 13.5px; }
  .rl-record-head__manager { color: var(--color-blue); font-weight: 700; text-decoration: none; }
  .rl-record-head__manager:hover { color: var(--color-blue-deep); text-decoration: underline; }
  .rl-record-head .page-head__actions { align-self: center; }

  .rl-team-toggle { margin-bottom: -8px; }

  @media (max-width: 1199px) {
    .rl-record-head { flex-wrap: wrap; }
    .rl-record-head .page-head__actions { flex: 1 1 100%; justify-content: flex-start; }
  }

  @media (max-width: 767px) {
    .rl-record-head { flex-direction: row; align-items: center; gap: 14px; }
    .rl-record-head__avatar { width: 48px; height: 48px; }
    .rl-record-head__text > .crumbs { display: none; }
    .rl-record-head .page-head__title { font-size: 26px; }
    .rl-team-toggle { margin-bottom: 0; }
  }
}