.item-avatar {
  --item-avatar-size: 22px;
  --item-avatar-display-size: var(--item-avatar-size);
  --item-avatar-background: #e2e8f0;
  --item-avatar-foreground: #334155;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0 !important;
  color: var(--item-avatar-foreground);
  display: inline-flex;
  flex: 0 0 var(--item-avatar-display-size);
  height: var(--item-avatar-display-size);
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: var(--item-avatar-display-size);
}

.item-avatar__image,
.item-avatar__fallback {
  border: 0;
  height: 100%;
  width: 100%;
}

.item-avatar__image {
  border-radius: 0 !important;
  background: transparent;
  display: block;
  object-fit: cover;
}

.item-avatar__fallback {
  border-radius: 50% !important;
  align-items: center;
  background: var(--item-avatar-background);
  color: var(--item-avatar-foreground);
  display: inline-flex;
  font-size: clamp(0.55rem, calc(var(--item-avatar-display-size) * 0.38), 1.15rem);
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

/* Legacy/dynamically inserted item thumbnails use the same photo/avatar shapes. */
img.item-image-actual,
img[data-item-image],
img.js-img,
img.transaction-item-photo,
img.process-item-photo {
  border-radius: 0 !important;
  aspect-ratio: 1;
  object-fit: cover;
}

.item-image-fallback,
.item-avatar-fallback,
.js-img-fallback {
  border-radius: 50% !important;
  aspect-ratio: 1;
}

.item-avatar__image[hidden],
.item-avatar__fallback[hidden] {
  display: none !important;
}

.item-avatar--tone-0 { --item-avatar-background: #dbeafe; --item-avatar-foreground: #1e3a8a; }
.item-avatar--tone-1 { --item-avatar-background: #cffafe; --item-avatar-foreground: #155e75; }
.item-avatar--tone-2 { --item-avatar-background: #ccfbf1; --item-avatar-foreground: #115e59; }
.item-avatar--tone-3 { --item-avatar-background: #d1fae5; --item-avatar-foreground: #065f46; }
.item-avatar--tone-4 { --item-avatar-background: #fef3c7; --item-avatar-foreground: #78350f; }
.item-avatar--tone-5 { --item-avatar-background: #ffedd5; --item-avatar-foreground: #7c2d12; }
.item-avatar--tone-6 { --item-avatar-background: #ffe4e6; --item-avatar-foreground: #881337; }
.item-avatar--tone-7 { --item-avatar-background: #ede9fe; --item-avatar-foreground: #4c1d95; }

@media screen {
  /* Table rows and table-like report lists share the larger item-photo size. */
  :where(table, .table, .air-tracker-list) .item-avatar {
    --item-avatar-display-size: var(
      --item-avatar-table-size,
      calc(var(--item-avatar-size) + var(--item-avatar-size))
    );
  }
}

@media print {
  .item-avatar,
  .item-avatar__fallback {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}