/* Harrogate staff identity: role labels remain explicit; colour is an extra cue. */
:root {
  --staff-role-red: #0077c8;
  --staff-role-red-light: #8ecbff;
  --staff-role-red-line: #a2cbe8;
  --staff-role-red-soft: #f5faff;
  --staff-role-ink: #171717;
}

/* Directory and profile badges. */
html .staff-coach-badge,
html .staff-admin-badge {
  border-radius: 8px;
  border-width: 1px;
  padding: 8px 11px;
  font-weight: 800;
  letter-spacing: .045em;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
}
html .staff-coach-badge {
  background: var(--staff-role-red);
  border-color: var(--staff-role-red);
  color: #fff;
}
html .staff-coach-badge > span:first-child { color: #fff; }
html .staff-admin-badge {
  background: var(--staff-role-ink);
  border-color: var(--staff-role-ink);
  border-left: 3px solid var(--staff-role-red);
  color: #fff;
}
html .staff-admin-badge > span:first-child { color: var(--staff-role-red-light); }
html .staff-admin-badge > span:last-child { min-width: 0; }
html .staff-coach-badge::after,
html .staff-admin-badge::after,
html .staff-coach-card::before,
html .staff-coach-profile::before { display: none; animation: none; }

html .member-card.staff-coach-card,
html .card.staff-coach-card {
  border: 1px solid var(--staff-role-red-line);
  border-left: 5px solid var(--staff-role-red);
  background: linear-gradient(105deg, var(--staff-role-red-soft), #fff 65%);
  box-shadow: 0 3px 12px #1717170a;
}
html .member-card.staff-admin-card,
html .card.staff-admin-card {
  border: 1px solid #959595;
  border-left: 5px solid var(--staff-role-ink);
  background: linear-gradient(105deg, #f5f5f5, #fff 65%);
  box-shadow: 0 3px 12px #1717170a;
}
html .member-card.staff-coach-card:hover,
html .card.staff-coach-card:hover { border-color: var(--staff-role-red); }
html .member-card.staff-admin-card:hover,
html .card.staff-admin-card:hover { border-color: var(--staff-role-ink); }
html .member-card.staff-coach-card:focus-visible,
html .card.staff-coach-card:focus-visible,
html .member-card.staff-admin-card:focus-visible,
html .card.staff-admin-card:focus-visible { outline: 3px solid var(--staff-role-red); outline-offset: 3px; }

/* Calm profile banners, with the same badge treatment as the directory. */
html .staff-coach-profile { outline: 2px solid var(--staff-role-red-line); }
html .staff-admin-profile { outline: 2px solid #959595; }
html .staff-coach-profile .staff-role-profile-label {
  background: var(--staff-role-red-soft);
  border: 1px solid var(--staff-role-red-line);
  border-left: 4px solid var(--staff-role-red);
  color: var(--staff-role-ink);
  box-shadow: none;
}
html .staff-admin-profile .staff-role-profile-label {
  background: var(--staff-role-ink);
  border: 1px solid var(--staff-role-ink);
  border-left: 4px solid var(--staff-role-red);
  color: #fff;
  box-shadow: none;
}
html .staff-coach-profile .staff-role-profile-label .staff-coach-badge {
  border-color: var(--staff-role-red);
  font-size: 14px;
  letter-spacing: .045em;
}
html .staff-admin-profile .staff-role-profile-label .staff-admin-badge {
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid #666;
  font-size: 14px;
  letter-spacing: .06em;
}
html .staff-admin-profile .staff-admin-profile-description { color: #fff; }
html .staff-coach-profile .staff-admin-profile-description { color: var(--staff-role-ink); }

/* Signed-in staff identity, including the account panel and avatar ring. */
html .staff-account-role-admin {
  background: var(--staff-role-ink);
  border-color: var(--staff-role-ink);
  border-left: 3px solid var(--staff-role-red);
  color: #fff;
}
html .staff-account-role-admin > span,
html .staff-account-bar .staff-account-role-admin > span { color: var(--staff-role-red-light); }
html .staff-workspace-coach .staff-account-role {
  background: var(--staff-role-red);
  border-color: var(--staff-role-red);
  color: #fff;
}
html .staff-workspace-coach .staff-account-role > span,
html .staff-workspace-coach .staff-account-bar .staff-account-role > span { color: #fff; }
html .staff-account-authority-admin {
  background: #f7f7f7;
  border: 1px solid #aaa;
  border-left: 5px solid var(--staff-role-ink);
}
html .staff-workspace-coach .staff-account-authority {
  background: var(--staff-role-red-soft);
  border: 1px solid var(--staff-role-red-line);
  border-left: 5px solid var(--staff-role-red);
}
html .account-avatar-admin {
  border-color: var(--staff-role-red);
  background: var(--staff-role-ink);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
}
html .staff-workspace-coach .account-avatar {
  background: var(--staff-role-red-soft);
  border-color: var(--staff-role-red);
  color: var(--staff-role-red);
  box-shadow: 0 0 0 2px #fff;
}

@media (forced-colors: active) {
  html .staff-coach-badge,
  html .staff-admin-badge,
  html .member-card.staff-coach-card,
  html .card.staff-coach-card,
  html .member-card.staff-admin-card,
  html .card.staff-admin-card,
  html .staff-coach-profile .staff-role-profile-label,
  html .staff-admin-profile .staff-role-profile-label,
  html .staff-coach-profile .staff-role-profile-label .staff-coach-badge,
  html .staff-admin-profile .staff-role-profile-label .staff-admin-badge,
  html .staff-account-role-admin,
  html .staff-workspace-coach .staff-account-role,
  html .staff-account-authority-admin,
  html .staff-workspace-coach .staff-account-authority,
  html .account-avatar-admin,
  html .staff-workspace-coach .account-avatar {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
  }
  html .staff-coach-badge > span:first-child,
  html .staff-admin-badge > span:first-child,
  html .staff-account-role-admin > span,
  html .staff-account-bar .staff-account-role-admin > span,
  html .staff-workspace-coach .staff-account-role > span,
  html .staff-workspace-coach .staff-account-bar .staff-account-role > span,
  html .staff-admin-profile .staff-admin-profile-description,
  html .staff-coach-profile .staff-admin-profile-description { color: CanvasText; }
  html .staff-coach-profile,
  html .staff-admin-profile { outline-color: CanvasText; }
}