@layer components {
  /* Detail cards — bordered content sections within detail pages. */
  details.app-details-card {
    margin-bottom: calc(var(--app-spacing) * 0.75);
    border: 1px solid
      var(--app-card-border-color, var(--app-accordion-border-color));
    border-radius: var(--app-border-radius);
    background: var(--app-card-background-color);
    overflow: hidden;
  }

  details.app-details-card > summary {
    margin: 0;
    padding: calc(var(--app-spacing) * 0.75) var(--app-spacing);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    text-transform: none;
    background: var(--app-card-sectioning-background-color);
    display: flex;
    align-items: center;
    gap: calc(var(--app-spacing) * 0.5);
  }

  details.app-details-card > summary::after {
    margin-inline-start: calc(var(--app-spacing) * 0.5);
  }

  details.app-details-card > summary .app-details-card-summary-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  details.app-details-card > summary .app-details-card-summary-meta {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-spacing) * 0.35);
  }

  details.app-details-card > summary .app-details-card-summary-meta .badge {
    white-space: nowrap;
  }

  details.app-details-card[open] > summary {
    margin-bottom: var(--app-spacing);
    border-bottom: 1px solid
      var(--app-card-border-color, var(--app-accordion-border-color));
    background: var(
      --app-details-card-open-summary-bg,
      var(--app-card-sectioning-background-color)
    );
  }

  .app-details-card-container {
    padding-inline: var(--app-spacing);
    padding-bottom: var(--app-spacing);
  }

  .app-details-card-container > *:last-child {
    margin-bottom: 0;
  }
  details.app-details-card[open] {
    border-width: 2px;
  }
}