:root {
  --details-background: var(--color-content-tinted);
  /* Optional inherited override for both summary and body foregrounds. */
  --details-foreground: initial;
  /* Description sits on the tinted summary; neutral muted text lacks 4.5:1 here. */
  --details-muted: var(--color-content-tinted-foreground);
  --details-accent: var(--color-accent-foreground);
  --details-border-color: var(--color-border);
  --details-default-border: var(--control-border-width) solid var(--details-border-color);
  --details-default-radius: var(--radius-12);
  --details-default-summary-height: var(--size-48);
  --details-summary-padding-block: var(--space-3);
  --details-summary-padding-inline: var(--space-4) var(--space-5);
  --details-gap: var(--space-4);
  --details-default-font: var(--font-type-label-strong);
  --details-description-default-align: start;
  --details-description-font: var(--font-type-caption);
  --details-indicator-font: var(--font-type-label-small-strong);
  --details-icon-size: var(--space-4);
  --details-indicator-gap: var(--space-1-5);
  --details-open-transform: rotate(var(--rotate-half));
  --details-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --details-focus-inset: calc(-1 * var(--focus-offset));
  --details-content-background: var(--color-surface);
  --details-content-font: var(--font-type-body-small);
  --details-content-padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  --details-content-limit: var(--size-240);
  --details-row-border: 0;
  --details-row-radius: 0;
  --details-row-height: var(--size-56);
  --details-row-font: var(--font-type-label-small);
}

.details {
  --details-description-align: var(--details-description-default-align);
  --details-border: var(--details-default-border);
  --details-radius: var(--details-default-radius);
  --details-summary-height: var(--details-default-summary-height);
  --details-font: var(--details-default-font);
}

.details--row {
  --details-border: var(--details-row-border);
  --details-radius: var(--details-row-radius);
  --details-summary-height: var(--details-row-height);
  --details-font: var(--details-row-font);
}

.details {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  inline-size: 100%;
  min-inline-size: 0;
  border: var(--details-border);
  border-radius: var(--details-radius);
  overflow: hidden;
  background: var(--details-content-background);
  color: var(--details-foreground, var(--color-surface-foreground));
}

.details__summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-block-size: var(--details-summary-height);
  gap: var(--details-gap);
  padding-block: var(--details-summary-padding-block);
  padding-inline: var(--details-summary-padding-inline);
  border-radius: inherit;
  background: var(--details-background);
  color: var(--details-foreground, var(--color-content-tinted-foreground));
  font: var(--details-font);
  list-style: none;
  cursor: pointer;
}

.details[open] > .details__summary {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.details__summary::-webkit-details-marker { display: none; }
.details__label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  flex: 0 1 auto;
}

.details__description {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  color: var(--details-muted);
  font: var(--details-description-font);
  text-align: var(--details-description-align);
}

.details__indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--details-indicator-gap);
  margin-inline-start: auto;
  color: var(--details-accent);
  font: var(--details-indicator-font);
}

.details__icon, .details__chevron {
  display: block;
  flex: none;
  inline-size: var(--details-icon-size);
  block-size: var(--details-icon-size);
}
.details__collapse { display: none; }
.details[open] > .details__summary .details__expand { display: none; }
.details[open] > .details__summary .details__collapse { display: inline; }
.details[open] > .details__summary .details__chevron { transform: var(--details-open-transform); }
.details__summary:hover .details__label { text-decoration: underline; }
.details__summary:focus-visible, .details__content:focus-visible {
  outline: var(--details-focus-outline);
  outline-offset: var(--details-focus-inset);
}

.details__content {
  box-sizing: border-box;
  min-inline-size: 0;
  padding: var(--details-content-padding);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  background: var(--details-content-background);
  overflow-wrap: anywhere;
  font: var(--details-content-font);
}

/* Row disclosures own their padding; their parent is an edge-to-edge group. */
.details__content:has(> .details--row) {
  padding: 0;
}

.details__content--bounded {
  box-sizing: border-box;
  max-block-size: var(--details-content-limit);
  overflow: auto;
}