@layer components {
  /* A faint, openable box: tucks secondary detail (e.g. the full eligibility
     checklist) under a clickable summary, clearly set apart from the surface
     it sits on. */
  .disclosure {
    margin-top: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }
  .disclosure > summary {
    padding: var(--space-2) var(--space-3);
    color: var(--ink-3);
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
  }
  .disclosure > summary:hover { color: var(--ink-2); }
  .disclosure[open] > summary { border-bottom: 1px solid var(--rule); }
  .disclosure__body { padding: var(--space-3); }
}