/** TOGGLE-COMPONENT (CT20) **/
/* De <button> IS het gestileerde vlak: hij draagt de box-classes, de
   achtergrondswatch (CT20.28) en de tekstopmaak (CT20.27). `sc-tg` houdt hem
   buiten het legacy `.nav-toggle`-blok van base.css (display:none, 60x60,
   padding:0), zodat `.box-N` zijn padding gewoon kan zetten — Box = padding.
   Wrapper vars (patched live): --sc-tg-thick | -radius | -text-gap | -iw |
   -ih | -dur | -delay | -ease. Derived here: --sc-tg-box (the icon square) and --sc-tg-gap
   (the line gap). */

/* The wrapper is always a flex row, so the button follows the column
   alignment (base.css, .cpos-al-follow) or its own (.cpos-al-*). */
.component.component-toggle { display: flex; }

.component-toggle > .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-tg-text-gap, 8px);
    position: relative;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    font: inherit;
    color: inherit;
    text-align: inherit;
    /* CP1-CP8 (style.css) overrulet padding met var(--sc-cp-p, --sc-cp-p-def).
       Zonder CP7 valt die keten hier terug op de eigen ruimte van de box, in
       plaats van op 0 — anders zou een CP-maat de box-padding doodslaan. */
    --sc-cp-p-def: var(--sc-box-pad-t, 0px) var(--sc-box-pad-r, 0px) var(--sc-box-pad-b, 0px) var(--sc-box-pad-l, 0px);
}

/* CT20.23 — de positie van de tekst is puur de flex-richting; het label staat
   altijd vóór het icoon in de DOM. */
.tg-txt-none .sc-tg-label { display: none; }
.tg-txt-before { flex-direction: row; }
.tg-txt-after { flex-direction: row-reverse; }
.tg-txt-above { flex-direction: column; }
.tg-txt-below { flex-direction: column-reverse; }
.sc-tg-label-open { display: none; }
.nav-toggle[aria-expanded="true"] .sc-tg-label-closed,
.nav-toggle.sc-ov-force-o .sc-tg-label-closed { display: none; }
.nav-toggle[aria-expanded="true"] .sc-tg-label-open,
.nav-toggle.sc-ov-force-o .sc-tg-label-open { display: inline; }

/* The icon is ONE square, --sc-tg-box: 24px, or — when CP sets a px width
   and/or height (toggle.php: .tg-sz-w / .tg-sz-h on the wrapper) — the inner
   size of the button (CP size minus the box padding; with both, the smaller).
   --sc-tg-cw/-ch follow the CP band chain (--sc-cp-w-d → --sc-cp-w). */
.sc-tg {
    --sc-tg-box: 24px;
    --sc-tg-cw: var(--sc-cp-w);
    --sc-tg-ch: var(--sc-cp-h);
}
@media screen and (min-width: 1025px) {
    .sc-tg { --sc-tg-cw: var(--sc-cp-w-d, var(--sc-cp-w)); --sc-tg-ch: var(--sc-cp-h-d, var(--sc-cp-h)); }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .sc-tg { --sc-tg-cw: var(--sc-cp-w-t, var(--sc-cp-w)); --sc-tg-ch: var(--sc-cp-h-t, var(--sc-cp-h)); }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .sc-tg { --sc-tg-cw: var(--sc-cp-w-tp, var(--sc-cp-w)); --sc-tg-ch: var(--sc-cp-h-tp, var(--sc-cp-h)); }
}
@media screen and (max-width: 480px) {
    .sc-tg { --sc-tg-cw: var(--sc-cp-w-m, var(--sc-cp-w)); --sc-tg-ch: var(--sc-cp-h-m, var(--sc-cp-h)); }
}
.tg-sz-w .sc-tg { --sc-tg-box: calc(var(--sc-tg-cw) - var(--sc-box-pad-l, 0px) - var(--sc-box-pad-r, 0px)); }
.tg-sz-h .sc-tg { --sc-tg-box: calc(var(--sc-tg-ch) - var(--sc-box-pad-t, 0px) - var(--sc-box-pad-b, 0px)); }
.tg-sz-w.tg-sz-h .sc-tg {
    --sc-tg-box: min(var(--sc-tg-cw) - var(--sc-box-pad-l, 0px) - var(--sc-box-pad-r, 0px),
                     var(--sc-tg-ch) - var(--sc-box-pad-t, 0px) - var(--sc-box-pad-b, 0px));
}

.sc-tg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--sc-tg-iw, var(--sc-tg-box));
    height: var(--sc-tg-ih, var(--sc-tg-box));
}
.sc-tg-svg,
.sc-tg-svg > svg {
    display: block;
    width: 100%;
    height: 100%;
}
.sc-tg-svg { line-height: 0; }
.sc-tg-svg-open { display: none; }
.nav-toggle[aria-expanded="true"] .sc-tg-svg-closed,
.nav-toggle.sc-ov-force-o .sc-tg-svg-closed { display: none; }
.nav-toggle[aria-expanded="true"] .sc-tg-svg-open,
.nav-toggle.sc-ov-force-o .sc-tg-svg-open { display: block; }

/* The lines fill the square. Three lines: top at 0, bottom at box - thick,
   so the gap is (box - 3 * thick) / 2. Two lines sit centred, box / 3 apart.
   S = thick + gap stays the distance between two neighbouring lines, which is
   what every animation below moves by. currentColor comes from the clr-*
   class on .sc-tg-icon (CT20.17), as for an SVG icon. An own width/height
   (--sc-tg-iw/-ih, run 22a) replaces one axis of the square; the gap follows
   the height. */
.sc-tg-bars {
    position: relative;
    flex: 0 0 auto;
    width: var(--sc-tg-iw, var(--sc-tg-box));
    height: var(--sc-tg-ih, var(--sc-tg-box));
    --sc-tg-gap: calc((var(--sc-tg-ih, var(--sc-tg-box)) - var(--sc-tg-thick, 2px) * 3) / 2);
    /* The diagonal of the icon: the cross runs corner to corner, so it stays
       inside a non-square icon (a square gives exactly 45deg). */
    --sc-tg-ang: atan2(var(--sc-tg-ih, var(--sc-tg-box)), var(--sc-tg-iw, var(--sc-tg-box)));
}
.sc-tg-bars.is-2 { --sc-tg-gap: calc(var(--sc-tg-ih, var(--sc-tg-box)) / 3); }
.sc-tg-bars > span {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--sc-tg-thick, 2px);
    border-radius: var(--sc-tg-radius, 0);
    background-color: currentColor;
    transition: transform var(--sc-tg-dur, 300ms) var(--sc-tg-ease, var(--sc-tg-ease-def, ease)) var(--sc-tg-delay, 0ms),
                opacity var(--sc-tg-dur, 300ms) var(--sc-tg-ease, var(--sc-tg-ease-def, ease)) var(--sc-tg-delay, 0ms);
}
.sc-tg-bars > span:nth-child(1) { top: 0; }
.sc-tg-bars > span:nth-child(2) { top: calc(50% - var(--sc-tg-thick, 2px) / 2); }
.sc-tg-bars > span:nth-child(3) { top: calc(100% - var(--sc-tg-thick, 2px)); }
.sc-tg-bars.is-2 > span:nth-child(1) { top: calc(50% - var(--sc-tg-thick, 2px) - var(--sc-tg-gap, 6px) / 2); }
.sc-tg-bars.is-2 > span:nth-child(2) { top: calc(50% + var(--sc-tg-gap, 6px) / 2); }
.sc-tg-bars,
.sc-tg-icon {
    transition: transform var(--sc-tg-dur, 300ms) var(--sc-tg-ease, var(--sc-tg-ease-def, ease)) var(--sc-tg-delay, 0ms);
}

/** CT20.20 — de dertien icoonanimaties.
    De open-stand is `aria-expanded="true"` (menu.js zet hem publiek) of
    `.sc-ov-force-o` (de editor forceert de state vanuit de state-tab). De
    verschuiving van een buitenste streepje naar het midden is telkens
    S = dikte + ruimte. **/

/* cross — de klassieke hamburger naar een kruis. */
.tg-anim-cross[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-cross.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-cross[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-cross.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { opacity: 0; }
.tg-anim-cross[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-cross.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
}

/* cross-rotate — hetzelfde kruis, met een halve slag van het hele icoon. */
.tg-anim-cross-rotate[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-cross-rotate.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-cross-rotate[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-cross-rotate.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { opacity: 0; }
.tg-anim-cross-rotate[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-cross-rotate.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
}
.tg-anim-cross-rotate[aria-expanded="true"] .sc-tg-bars,
.tg-anim-cross-rotate.sc-ov-force-o .sc-tg-bars { transform: rotate(180deg); }

/* squeeze — eerst klapt het middelste streepje in, dan draaien de buitenste. */
.tg-anim-squeeze[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-squeeze.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
    transition-delay: calc(var(--sc-tg-dur, 300ms) * 0.15);
}
.tg-anim-squeeze[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-squeeze.sc-ov-force-o .sc-tg-bars > span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
    transition-delay: 0ms;
}
.tg-anim-squeeze[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-squeeze.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
    transition-delay: calc(var(--sc-tg-dur, 300ms) * 0.15);
}

/* collapse — alles vouwt op het middelste streepje samen. */
.tg-anim-collapse[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-collapse.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-collapse[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-collapse.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { transform: rotate(calc(var(--sc-tg-ang) * -1)); }
.tg-anim-collapse[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-collapse.sc-ov-force-o .sc-tg-bars > span:nth-child(3) { opacity: 0; }

/* slide — het middelste streepje schuift naar links weg. */
.tg-anim-slide[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-slide.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-slide[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-slide.sc-ov-force-o .sc-tg-bars > span:nth-child(2) {
    transform: translateX(-120%);
    opacity: 0;
}
.tg-anim-slide[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-slide.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
}

/* spin — het kruis plus een hele slag. */
.tg-anim-spin[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-spin.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-spin[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-spin.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { opacity: 0; }
.tg-anim-spin[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-spin.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
}
.tg-anim-spin[aria-expanded="true"] .sc-tg-bars,
.tg-anim-spin.sc-ov-force-o .sc-tg-bars { transform: rotate(360deg); }

/* arrow-left — de buitenste streepjes worden een pijlpunt naar links. */
.tg-anim-arrow-left .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-left .sc-tg-bars > span:nth-child(3) { transform-origin: left center; }
.tg-anim-arrow-left[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-left.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(-45deg) scaleX(0.55);
}
.tg-anim-arrow-left[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-arrow-left.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(45deg) scaleX(0.55);
}

/* arrow-right — de spiegeling daarvan. */
.tg-anim-arrow-right .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-right .sc-tg-bars > span:nth-child(3) { transform-origin: right center; }
.tg-anim-arrow-right[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-right.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(45deg) scaleX(0.55);
}
.tg-anim-arrow-right[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-arrow-right.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(-45deg) scaleX(0.55);
}

/* minus — alleen het middelste streepje blijft over. */
.tg-anim-minus[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-minus.sc-ov-force-o .sc-tg-bars > span:nth-child(1),
.tg-anim-minus[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-minus.sc-ov-force-o .sc-tg-bars > span:nth-child(3) { opacity: 0; }

/* plus — deze keuze verandert bewust ook de GESLOTEN stand: dicht is een plus,
   open een kruis. Staat als zodanig in de tegel-title van het paneel. */
.tg-anim-plus .sc-tg-bars > span:nth-child(1) { opacity: 0; }
.tg-anim-plus .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(90deg);
}
/* The upright line is at most as long as the icon is high, centred. */
.tg-anim-plus .sc-tg-bars > span:nth-child(3),
.tg-anim-plus .sc-tg-bars.is-2 > span:nth-child(2) {
    width: min(100%, var(--sc-tg-ih, var(--sc-tg-box)));
    left: calc((100% - min(100%, var(--sc-tg-ih, var(--sc-tg-box)))) / 2);
}
.tg-anim-plus[aria-expanded="true"] .sc-tg-bars,
.tg-anim-plus.sc-ov-force-o .sc-tg-bars { transform: rotate(45deg); }

/* flip — het icoon draait om zijn as terwijl het kruis ontstaat. */
.tg-anim-flip,
.tg-anim-flip-y,
.tg-anim-flip-xy { perspective: calc(var(--sc-tg-box) * 8); }
.tg-anim-flip[aria-expanded="true"] .sc-tg-icon,
.tg-anim-flip.sc-ov-force-o .sc-tg-icon { transform: rotateY(180deg); }
.tg-anim-flip-y[aria-expanded="true"] .sc-tg-icon,
.tg-anim-flip-y.sc-ov-force-o .sc-tg-icon { transform: rotateX(180deg); }
.tg-anim-flip-xy[aria-expanded="true"] .sc-tg-icon,
.tg-anim-flip-xy.sc-ov-force-o .sc-tg-icon { transform: rotateX(180deg) rotateY(180deg); }
.tg-anim-flip[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-flip.sc-ov-force-o .sc-tg-bars > span:nth-child(1),
.tg-anim-flip-y[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-flip-y.sc-ov-force-o .sc-tg-bars > span:nth-child(1),
.tg-anim-flip-xy[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-flip-xy.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-flip[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-flip.sc-ov-force-o .sc-tg-bars > span:nth-child(2),
.tg-anim-flip-y[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-flip-y.sc-ov-force-o .sc-tg-bars > span:nth-child(2),
.tg-anim-flip-xy[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-flip-xy.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { opacity: 0; }
.tg-anim-flip[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-flip.sc-ov-force-o .sc-tg-bars > span:nth-child(3),
.tg-anim-flip-y[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-flip-y.sc-ov-force-o .sc-tg-bars > span:nth-child(3),
.tg-anim-flip-xy[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-flip-xy.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
}

/* elastic — het kruis met een doorveerende curve; een eigen easing (CT20.22)
   wint, want die zet --sc-tg-ease op de wrapper. */
.tg-anim-elastic { --sc-tg-ease-def: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.tg-anim-elastic[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-elastic.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-elastic[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-elastic.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { opacity: 0; }
.tg-anim-elastic[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-elastic.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
    transition-delay: calc(var(--sc-tg-dur, 300ms) * 0.15);
}

/** Round 21 — the animations that were added, and the two-line variants.
    toggle-anim-matrix.php decides which key a line count may use; the render
    clamps to it, so no rule below has to guard against an invalid pair. **/

/* cross-shrink — the cross at 70 %. */
.tg-anim-cross-shrink[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-cross-shrink.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang)) scaleX(0.7);
}
.tg-anim-cross-shrink[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-cross-shrink.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { opacity: 0; }
.tg-anim-cross-shrink[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-cross-shrink.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1)) scaleX(0.7);
}

/* slide-cross — the outer lines cross while the middle one slides out to the right. */
.tg-anim-slide-cross[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-slide-cross.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-slide-cross[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-slide-cross.sc-ov-force-o .sc-tg-bars > span:nth-child(2) {
    transform: translateX(120%);
    opacity: 0;
}
.tg-anim-slide-cross[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-slide-cross.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
}

/* spin-reverse — the cross plus a full turn the other way. */
.tg-anim-spin-reverse[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-spin-reverse.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(var(--sc-tg-ang));
}
.tg-anim-spin-reverse[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-spin-reverse.sc-ov-force-o .sc-tg-bars > span:nth-child(2) { opacity: 0; }
.tg-anim-spin-reverse[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-spin-reverse.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1));
}
.tg-anim-spin-reverse[aria-expanded="true"] .sc-tg-bars,
.tg-anim-spin-reverse.sc-ov-force-o .sc-tg-bars { transform: rotate(-360deg); }

/* arrow-up / arrow-down — arrow-left, turned a quarter. */
.tg-anim-arrow-up .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-up .sc-tg-bars > span:nth-child(3),
.tg-anim-arrow-down .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-down .sc-tg-bars > span:nth-child(3) { transform-origin: left center; }
.tg-anim-arrow-up[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-up.sc-ov-force-o .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-down[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-down.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(-45deg) scaleX(0.55);
}
.tg-anim-arrow-up[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-arrow-up.sc-ov-force-o .sc-tg-bars > span:nth-child(3),
.tg-anim-arrow-down[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-arrow-down.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(45deg) scaleX(0.55);
}
.tg-anim-arrow-up[aria-expanded="true"] .sc-tg-bars,
.tg-anim-arrow-up.sc-ov-force-o .sc-tg-bars { transform: rotate(90deg); }
.tg-anim-arrow-down[aria-expanded="true"] .sc-tg-bars,
.tg-anim-arrow-down.sc-ov-force-o .sc-tg-bars { transform: rotate(-90deg); }

/* Two lines (.is-2): S = thick + gap is the distance between them, so each
   line moves S / 2 to meet in the middle. These rules outrank the three-line
   rules above by the extra .is-2 and also undo their `opacity: 0` on line 2. */
.tg-anim-cross[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-cross.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-cross-rotate[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-cross-rotate.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-spin[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-spin.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-spin-reverse[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-spin-reverse.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-flip[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-flip.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-flip-y[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-flip-y.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-flip-xy[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-flip-xy.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-elastic[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-elastic.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / 2)) rotate(var(--sc-tg-ang));
}
.tg-anim-cross[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-cross.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-cross-rotate[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-cross-rotate.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-spin[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-spin.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-spin-reverse[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-spin-reverse.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-flip[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-flip.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-flip-y[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-flip-y.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-flip-xy[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-flip-xy.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-elastic[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-elastic.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2)) rotate(calc(var(--sc-tg-ang) * -1));
    opacity: 1;
}

/* arrow-left/-up/-down (2) — a chevron with its tip on the left middle. */
.tg-anim-arrow-left .sc-tg-bars.is-2 > span,
.tg-anim-arrow-up .sc-tg-bars.is-2 > span,
.tg-anim-arrow-down .sc-tg-bars.is-2 > span { transform-origin: left center; }
.tg-anim-arrow-left[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-arrow-left.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-arrow-up[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-arrow-up.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-arrow-down[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-arrow-down.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / 2)) rotate(-45deg) scaleX(0.55);
}
.tg-anim-arrow-left[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-arrow-left.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-arrow-up[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-arrow-up.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-arrow-down[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-arrow-down.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2)) rotate(45deg) scaleX(0.55);
}

/* arrow-right (2) — the mirror image. */
.tg-anim-arrow-right .sc-tg-bars.is-2 > span { transform-origin: right center; }
.tg-anim-arrow-right[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-arrow-right.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / 2)) rotate(45deg) scaleX(0.55);
}
.tg-anim-arrow-right[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-arrow-right.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2)) rotate(-45deg) scaleX(0.55);
}

/* minus (2) — the top line fades (rule above), the bottom one moves to the middle. */
.tg-anim-minus[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-minus.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2));
}

/* plus (2) — closed a plus, open a cross (the bars rotation above). */
.tg-anim-plus .sc-tg-bars.is-2 > span:nth-child(1) {
    opacity: 1;
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / 2));
}
.tg-anim-plus .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2)) rotate(90deg);
}

/* slide (2) — the top line slides out to the left, the bottom one becomes a diagonal. */
.tg-anim-slide[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-slide.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1) {
    transform: translateX(-120%);
    opacity: 0;
}
.tg-anim-slide[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-slide.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2)) rotate(calc(var(--sc-tg-ang) * -1));
    opacity: 1;
}

/* equal (2) — both lines merge into one. */
.tg-anim-equal[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-equal.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / 2));
}
.tg-anim-equal[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-equal.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2));
}

/** Run 25b (r.581) — five more animations, each for three and two lines.
    flip-y and flip-xy share the cross rules of flip above. **/

/* arrow-turn — the arrow of arrow-left, then a half turn to the right. */
.tg-anim-arrow-turn .sc-tg-bars > span { transform-origin: left center; }
.tg-anim-arrow-turn[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-arrow-turn.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(-45deg) scaleX(0.55);
}
.tg-anim-arrow-turn[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-arrow-turn.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(45deg) scaleX(0.55);
}
.tg-anim-arrow-turn[aria-expanded="true"] .sc-tg-bars,
.tg-anim-arrow-turn.sc-ov-force-o .sc-tg-bars { transform: rotate(180deg); }
.tg-anim-arrow-turn[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-arrow-turn.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / 2)) rotate(-45deg) scaleX(0.55);
}
.tg-anim-arrow-turn[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-arrow-turn.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2)) rotate(45deg) scaleX(0.55);
}

/* stand — the lines stand upright: the whole icon turns a quarter (two and
   three lines alike). */
.tg-anim-stand[aria-expanded="true"] .sc-tg-bars,
.tg-anim-stand.sc-ov-force-o .sc-tg-bars { transform: rotate(90deg); }

/* vortex — the outer lines whirl a full turn in opposite directions into the
   cross while the middle one shrinks away and the icon turns half. */
.tg-anim-vortex[aria-expanded="true"] .sc-tg-bars > span:nth-child(1),
.tg-anim-vortex.sc-ov-force-o .sc-tg-bars > span:nth-child(1) {
    transform: translateY(calc(var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px))) rotate(calc(var(--sc-tg-ang) + 360deg));
}
.tg-anim-vortex[aria-expanded="true"] .sc-tg-bars > span:nth-child(2),
.tg-anim-vortex.sc-ov-force-o .sc-tg-bars > span:nth-child(2) {
    transform: scaleX(0);
    opacity: 0;
}
.tg-anim-vortex[aria-expanded="true"] .sc-tg-bars > span:nth-child(3),
.tg-anim-vortex.sc-ov-force-o .sc-tg-bars > span:nth-child(3) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) * -1)) rotate(calc(var(--sc-tg-ang) * -1 - 360deg));
}
.tg-anim-vortex[aria-expanded="true"] .sc-tg-bars,
.tg-anim-vortex.sc-ov-force-o .sc-tg-bars { transform: rotate(180deg); }
.tg-anim-vortex[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(1),
.tg-anim-vortex.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(1) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / 2)) rotate(calc(var(--sc-tg-ang) + 360deg));
}
.tg-anim-vortex[aria-expanded="true"] .sc-tg-bars.is-2 > span:nth-child(2),
.tg-anim-vortex.sc-ov-force-o .sc-tg-bars.is-2 > span:nth-child(2) {
    transform: translateY(calc((var(--sc-tg-thick, 2px) + var(--sc-tg-gap, 6px)) / -2)) rotate(calc(var(--sc-tg-ang) * -1 - 360deg));
    opacity: 1;
}

/* Tegel in het node-paneel (TG-L4): dezelfde markup als de render, alleen
   kleiner. Het paneel-iframe laadt dit bestand, dus de tegels tonen de ECHTE
   animatie in plaats van een plaatje. */
.sc-tg-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --sc-tg-box: 20px;
    --sc-tg-thick: 2px;
    --sc-tg-dur: 320ms;
}