/* Authors' avatars (macros.ftl) and profile cards (author-card.ftl), in the comments drawer
   (ftl/comments) and in article bylines, and the byline avatars that open a card. Colors meet WCAG
   AA contrast. Card rules are scoped to the card, so the page's styles and Bootstrap's don't reach
   into it. */

/* Avatars. Where one appears sets its size. */
.author-avatar {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e8edf3;
  object-fit: cover;
}
.author-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e1effe;
  color: #0360b8;
  font-size: 14px;
  font-weight: 700;
}

/* Profile cards: fixed in place by positionCard in author-card.js. A byline's card is at the end of
   the page, outside the drawer, so it sets its own text styles. */
.author-card {
  --author-card-heading: #1b2b44;
  --author-card-text: #3b4f68;
  --author-card-muted: #5b6168;
  --author-card-accent: #0360b8;
  --author-card-focus: #0175e4;
  --author-card-border: #e3e6ea;

  position: fixed;
  z-index: 20;
  width: min(320px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid var(--author-card-border);
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.06);
  color: var(--author-card-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
}
.author-card:focus {
  outline: none;
}
.author-card :is(a, [tabindex]):focus-visible {
  outline: 2px solid var(--author-card-focus);
  outline-offset: 2px;
}
.author-card p {
  margin: 0;
}
.author-card .author-card-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.author-card .author-card-message {
  color: var(--author-card-muted);
}
.author-card .author-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-card .author-card-top .author-avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
}
.author-card .author-card-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.author-card .author-card-name {
  color: var(--author-card-heading);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.author-card .author-card-name:hover {
  color: var(--author-card-accent);
  text-decoration: underline;
}
.author-card .author-card-job {
  color: var(--author-card-muted);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.author-card .author-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
/* The site's badges in its brand colors, as on profile pages (users/profile/styles.css) */
.author-card .author-card-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.author-card .author-card-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  cursor: default;
}
.author-card .author-card-badge i {
  font-size: 18px;
}
.author-card .author-card-badge i::before {
  width: auto;
  margin: 0;
}
.author-card .author-card-badge.is-staff {
  color: #f4bd25;
}
.author-card .author-card-badge.is-mvb {
  color: #1bd281;
}
.author-card .author-card-badge.is-core {
  gap: 2px;
  color: #009ddc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -1px;
  user-select: none;
}
.author-card .author-card-stats {
  display: flex;
  gap: 24px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--author-card-border);
}
.author-card .author-card-stats div {
  display: flex;
  flex-direction: column-reverse;
}
.author-card .author-card-stats dt {
  color: var(--author-card-muted);
  font-size: 12.5px;
  font-weight: 400;
}
.author-card .author-card-stats dd {
  margin: 0;
  color: var(--author-card-heading);
  font-size: 16px;
  font-weight: 700;
}
.author-card .author-card-website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 12px;
  color: var(--author-card-accent);
  font-weight: 600;
  text-decoration: none;
}
.author-card .author-card-website span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.author-card .author-card-website:hover span:first-of-type {
  text-decoration: underline;
}

/* An avatar in an article's byline, which opens the author's card (authorByline in author-card.js).
   The byline's own styles size and round the image; its height follows the width, and keeps the
   button in view when the image doesn't load. */
.author-avatar-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  vertical-align: middle;
  cursor: pointer;
}
.author-avatar-button img {
  height: auto;
  background-color: #e8edf3;
}
.author-avatar-button:hover img,
.author-avatar-button[aria-expanded="true"] img {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b8d8fb;
}
.author-avatar-button:focus-visible {
  outline: none;
}
.author-avatar-button:focus-visible img {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0175e4;
}