/* Component: disclosure — the "Why?" button (aria-expanded) and what it opens (lane UI-V). */

.disclosure {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.disclosure__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-1) var(--sp-4);
  border: 2px solid var(--sea-300);
  border-radius: var(--r-pill);
  background: var(--sea-50);
  color: var(--sea-800);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.disclosure__btn:hover {
  border-color: var(--sea-500);
}

.disclosure__caret {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease);
}

.disclosure__btn[aria-expanded='true'] .disclosure__caret {
  transform: rotate(90deg);
}

.disclosure__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-50);
  border: 1px solid var(--sand-200);
}

.disclosure__panel[hidden] {
  display: none;
}