/* ---------- disclosure ----------
   One pattern for every fold-away block on the site (the prompt, the MC raw
   prompt, anything added later). Two rules make it behave the same
   everywhere: the label names the action available now, so an open block is
   never headed "Show…", and a chevron shows the block folds at all.

   Markup:
     <details class="disclosure [extra]" [open]>
       <summary>
         <span class="disclosure-chevron" aria-hidden="true"></span>
         <span class="when-closed" data-i18n="…">Show …</span>
         <span class="when-open"   data-i18n="…">Hide …</span>
         <span class="disclosure-hint">optional aside</span>
       </summary>
       …
     </details>
*/
.disclosure > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::marker { content: ""; }

.disclosure > summary .when-open { display: none; }
.disclosure[open] > summary .when-closed { display: none; }
.disclosure[open] > summary .when-open { display: inline; }

.disclosure-chevron {
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0.55;
  transition: transform var(--t-fast, 150ms) ease;
}
.disclosure[open] > summary .disclosure-chevron { transform: rotate(90deg); }

.disclosure-hint {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted, #6b7280);
}