/* Shared disclosure and select chevrons. Native controls retain their behavior. */
:root {
  --disclosure-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%236c7b8d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html body details > summary {
  position: relative;
  /* Reserve icon space across section-specific summary padding rules. */
  padding-inline-end: 32px !important;
  list-style: none !important;
}

html body details > summary::marker { content: ""; }
html body details > summary::-webkit-details-marker { display: none !important; }

html body details > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--disclosure-chevron) center / contain no-repeat;
  mask: var(--disclosure-chevron) center / contain no-repeat;
  opacity: .7;
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

html body details[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}

html body details[open] > :not(summary) {
  animation: disclosure-reveal 260ms ease-out both;
}

@keyframes disclosure-reveal {
  from { opacity: 0; translate: 0 -5px; }
  to { opacity: 1; translate: none; }
}

@supports (interpolate-size: allow-keywords) {
  html body details { interpolate-size: allow-keywords; }
  html body details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 300ms cubic-bezier(.2,.8,.2,1), content-visibility 300ms allow-discrete;
  }
  html body details[open]::details-content { block-size: auto; }
}

html body select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--disclosure-chevron) !important;
  background-position: right 10px center !important;
  background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
  padding-inline-end: 38px !important;
}

@media (prefers-reduced-motion: reduce) {
  html body details > summary::after,
  html body details::details-content { transition: none; }
  html body details[open] > :not(summary) { animation: none; }
}

@media print {
  html body details > summary::after { display: none; }
  html body details::details-content { block-size: auto; overflow: visible; }
  html body details[open] > :not(summary) { animation: none; }
}