.summary {
  --summary-detail-lines: 3;
  --summary-padding: var(--space-lg);
  --summary-radius: var(--radius-xl);
  --summary-tone: var(--color-outline);
  --summary-wash-strength: 11%;
  --summary-blob-size: clamp(7rem, 22%, 14rem);
  --summary-blob-overhang: 22%;
  --summary-blob-opacity: 0.32;
  --summary-blob-blur: 1.25rem;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: var(--summary-padding);
  border: var(--border-width) solid
    color-mix(in oklab, var(--summary-tone) 28%, var(--color-border));
  border-radius: var(--summary-radius);
  background-color: var(--color-surface-sunken);
  text-align: center;
}

.summary--incoming {
  --summary-tone: var(--color-incoming);
}

.summary--outgoing {
  --summary-tone: var(--color-outgoing);
  --summary-wash-strength: 7%;
  --summary-blob-opacity: 0.2;
}

.summary > :not(.summary__field) {
  position: relative;
}

.summary__field {
  position: absolute;
  inset: 0;
  overflow: clip;
  clip-path: inset(0 round var(--summary-radius));
  background-image: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in oklab, var(--summary-tone) var(--summary-wash-strength), transparent),
    transparent 65%
  );
  pointer-events: none;
}

.summary__field::before,
.summary__field::after {
  content: "";
  position: absolute;
  inline-size: var(--summary-blob-size);
  aspect-ratio: 1;
  background-color: var(--summary-tone);
  opacity: var(--summary-blob-opacity);
  filter: blur(var(--summary-blob-blur));
}

.summary__field::before {
  inset-block-start: 0;
  inset-inline-start: 0;
  translate: calc(-1 * var(--summary-blob-overhang)) calc(-1 * var(--summary-blob-overhang));
  border-radius: 62% 38% 47% 53% / 57% 44% 56% 43%;
}

.summary__field::after {
  --summary-blob-size: clamp(5.25rem, 16%, 10.5rem);

  inset-block-end: 0;
  inset-inline-end: 0;
  translate: var(--summary-blob-overhang) var(--summary-blob-overhang);
  border-radius: 39% 61% 55% 45% / 44% 52% 48% 56%;
  opacity: calc(var(--summary-blob-opacity) * 0.7);
}

.summary__title {
  max-inline-size: 100%;
  font-size: var(--font-size-heading-2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.summary__lookup {
  --icon-size: var(--icon-size-xs);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  max-inline-size: 100%;
  vertical-align: bottom;
  color: inherit;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-state);
}

.summary__lookup .icon {
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .summary__lookup:hover {
    text-decoration-color: currentcolor;
  }
}

.summary__value {
  font-size: var(--font-size-heading-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.summary--incoming .summary__value {
  color: var(--summary-tone);
}

.summary__detail {
  --summary-measure: 56ch;

  max-inline-size: var(--summary-measure);
  margin-block-start: var(--space-2xs);
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.summary--clamped .summary__detail {
  block-size: calc(var(--summary-detail-lines) * 1lh);
  overflow: hidden;
}

.summary[data-expanded] .summary__detail {
  block-size: auto;
}

.summary[data-clipped]:not([data-expanded]) .summary__detail {
  mask-image: linear-gradient(to bottom, black calc(100% - 1lh), transparent);
}

.summary .summary__toggle {
  position: absolute;
  inset-block-end: var(--summary-padding);
  inset-inline-end: var(--summary-padding);
}

.summary:not([data-clipped], [data-expanded]) .summary__toggle {
  display: none;
}

.summary[data-expanded] .summary__toggle {
  rotate: 0.5turn;
}

@media (width <= 48rem) {
  .summary {
    --summary-detail-lines: 4;
    --summary-padding: var(--space-md);
  }
}

@media (prefers-contrast: more) {
  .summary__field {
    display: none;
  }
}

@media (forced-colors: active) {
  .summary {
    border-color: currentcolor;
  }

  .summary__field {
    display: none;
  }

  .summary__lookup {
    text-decoration-color: currentcolor;
  }
}