.toggle {
  /*max-width: 420px;*/
  /*border: 1px solid #ccc;*/
  /*border-radius: .5rem;*/
  overflow: hidden;              /* keeps corners rounded */
 --accent: #dae5f1;           /* tweak theme color here */
}

/* hide the real checkbox but keep it focusable for a11y */
.toggle__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  border-radius: 12px;
  border-radius: .5rem;
  color: #1a202c;
}

/* the clickable header */
.toggle__label {
  display: block;
  cursor: pointer;
  padding: .7em;
  margin: .2rem;
  background: var(--accent);
  color: #1a202c;
  font-weight: 600;
  user-select: none;
  border-radius: 12px;
  border-radius: .5rem;
}

/* the chevron (▼) rotates when open */
.toggle__label::after {
  content: "▼";
  float: right;
  transition: transform .3s;
}

/* collapsed panel starts hidden */
.toggle__content {
  max-height:  0;
  padding: 0 1rem;
  overflow: hidden;
  background: #f9f9f9;
  transition: max-height .3s ease, padding .25s ease;
}

/* when checkbox is checked → expand */
.toggle__checkbox:checked + .toggle__label::after {
  transform: rotate(-180deg);
}

.toggle__checkbox:checked ~ .toggle__content {
  max-height: 100%;             /* > expected content height */
  padding: .75rem 1rem;
}