.dl-disclosure-group {
  display: flex;
  flex-direction: column;
  max-width: 34rem;
}

.dl-disclosure {
  border-top: var(--dl-border) solid var(--dl-line);
}

.dl-disclosure:last-of-type {
  border-bottom: var(--dl-border) solid var(--dl-line);
}

/* Quiet by default: a muted line in the text face at regular weight, the same look as the charts' own "show as a
   table" disclosures, so every "open in place" on a screen reads alike. */
.dl-disclosure__summary {
  cursor: pointer;
  padding: var(--dl-space-3) var(--dl-space-1);
  font: var(--dl-weight-regular) var(--dl-text-sm) / var(--dl-leading-normal) var(--dl-font-text);
  color: var(--dl-ink-muted);
}

/* tone: "strong": the summary as a small heading, bold in the heading face and in ink. */
.dl-disclosure-group--strong .dl-disclosure__summary {
  font: var(--dl-weight-strong) var(--dl-text-sm) / var(--dl-leading-tight) var(--dl-font-head);
  color: var(--dl-ink);
}

.dl-disclosure__summary::marker {
  color: var(--dl-ink-faint);
}

.dl-disclosure__summary:focus-visible {
  outline: 2px solid var(--dl-focus-ring);
  outline-offset: 2px;
}

.dl-disclosure__content {
  padding: 0 var(--dl-space-1) var(--dl-space-4);
  color: var(--dl-ink-muted);
  font-size: var(--dl-text-sm);
}

.dl-disclosure__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dl-disclosure__table-wrap {
  max-height: 14rem;
  overflow: auto;
  border: var(--dl-border) solid var(--dl-line);
  border-radius: var(--dl-radius-control);
}

.dl-disclosure__table-wrap:focus-visible {
  outline: 2px solid var(--dl-focus-ring);
  outline-offset: -2px;
}

.dl-disclosure__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dl-text-xs);
}

.dl-disclosure__table th,
.dl-disclosure__table td {
  padding: var(--dl-space-1) var(--dl-space-2);
  text-align: right;
}

.dl-disclosure__table th:first-child,
.dl-disclosure__table td:first-child {
  text-align: left;
}

/* The sticky header row is painted so rows scrolling under it don't show through: in the page's own surface, not
   the raised one, which drew a white band across a gray page. Inside a raised panel, set --disclosure-surface to
   var(--dl-surface-raised) on the panel or the disclosure so the row matches it. */
.dl-disclosure__table thead th {
  position: sticky;
  top: 0;
  background: var(--disclosure-surface, var(--dl-surface));
  border-bottom: var(--dl-border) solid var(--dl-line);
  color: var(--dl-ink-muted);
  font-weight: var(--dl-weight-strong);
}

.dl-disclosure__table tbody td {
  border-bottom: var(--dl-border) solid var(--dl-line);
  color: var(--dl-ink);
}

.dl-disclosure__table tbody tr:last-child td {
  border-bottom: none;
}

.dl-disclosure__calc {
  margin: 0 0 var(--dl-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-2);
}

.dl-disclosure__calc-row dt {
  margin: 0;
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-strong);
  color: var(--dl-ink);
}

.dl-disclosure__calc-row dd {
  margin: 0;
  font-size: var(--dl-text-sm);
  color: var(--dl-ink-muted);
}

.dl-disclosure__note-text {
  margin: 0;
  font-size: var(--dl-text-xs);
  color: var(--dl-ink-faint);
}

/* Demo page only: the quiet group, then the strong one under it. */
.dl-demo > .dl-disclosure-block + .dl-disclosure-block {
  margin-top: var(--dl-space-7);
}