/* Clear, non-destructive disclosure state for User Guide module accordions. */
.guide-module-toggle{
  position:relative;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid color-mix(in srgb,var(--primary) 30%,#cbded6);
  border-radius:11px;
  color:var(--primary);
  background:#fff;
  box-shadow:0 2px 5px rgba(23,54,82,.05);
  transform:none!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.guide-module-toggle::before,.guide-module-toggle::after{
  position:absolute;
  width:12px;
  height:2px;
  border-radius:999px;
  content:"";
  background:currentColor;
  transition:transform .16s ease,opacity .16s ease;
}
.guide-module-toggle::after{transform:rotate(90deg)}
.guide-module>summary:hover .guide-module-toggle{
  border-color:var(--primary);
  box-shadow:0 5px 12px color-mix(in srgb,var(--primary) 16%,transparent);
}
.guide-module[open] .guide-module-toggle{
  border-color:var(--primary);
  color:#fff;
  background:var(--primary);
  box-shadow:0 5px 12px color-mix(in srgb,var(--primary) 25%,transparent);
}
.guide-module[open] .guide-module-toggle::after{
  opacity:0;
  transform:rotate(90deg) scaleX(.2);
}
.guide-module>summary:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent);
  outline-offset:-3px;
}
@media(max-width:700px){
  .guide-module-toggle{width:32px;height:32px}
}