/* The original font and copy remain in the normal page flow. No JS means full text. */
.section-text-collapsed{max-height:var(--section-text-limit);overflow:hidden;mask-image:linear-gradient(to bottom,#000 35%,transparent 100%)}
.section-text-toggle{display:block;position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--type-ink,#171717);cursor:pointer;font:400 24px/44px Montserrat,Arial,sans-serif;text-align:center;margin:0 0 16px;isolation:isolate}
.section-text-toggle:focus-visible{outline:1px solid #171717;outline-offset:2px}
.section-text-toggle[hidden]{display:none}
@media(min-width:761px){.direction-introduction>header>.section-text-toggle{grid-column:2}}

/* Reference: a fine geometric cross, without a background tile. */
.section-text-toggle{font-size:0}
.section-text-toggle::before,.section-text-toggle::after{content:'';position:absolute;background:currentColor;left:12px;top:21px;width:20px;height:1px}
.section-text-toggle::after{transform:rotate(90deg)}
.section-text-toggle[aria-expanded=true]::after{display:none}

/* Expand in the page flow rather than moving the following image in one jump. */
.section-text-animating{overflow:hidden;transition:max-height 280ms cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.section-text-animating{transition:none}}
html:has(.section-text-toggle){scrollbar-gutter:stable}

/* Prose-only groups share the same disclosure without a native details arrow. */
.kmew-panel-info>h3{font:600 14px/22px Montserrat,Arial,sans-serif;margin:0 0 12px}
.kmew-panel-info [data-disclosure-prose]>ol{margin-top:0}
.kmew-panel-info>.section-text-toggle{margin-bottom:0}

/* Compact introductions keep the lead and opening prose line readable. */
.section-text-collapsed[data-disclosure-compact-preview]{mask-image:linear-gradient(to bottom,#000 var(--section-text-opaque),transparent 100%)}
