/* MoxKit advanced-list widget. */
.moxkit-al{--al-primary:var(--moxkit-accent);--al-size:20px;--al-boxpad:calc(var(--al-size) * .4);--al-border:2px;--al-space:12px;--al-gap:12px;--al-stroke:3.2;--al-ring:rgba(22,16,95,.28);--al-dur:800ms;--al-stagger:150ms;--al-delay:300ms;--al-mark-w:var(--al-size)}
.moxkit-al-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.moxkit-al-item{--al-d:calc(var(--al-delay) + var(--al-i, 0) * var(--al-stagger));margin:0;padding:calc(var(--al-gap) / 2) 0}
.moxkit-al-item:first-child{padding-top:0}
.moxkit-al-item:last-child{padding-bottom:0}
.moxkit-al-row{display:flex;align-items:var(--al-valign,center);gap:var(--al-space);text-decoration:none}
/* Three classes so a linked row keeps its colours over the kit's link colours. */
.moxkit-root.moxkit-al a.moxkit-al-row{color:inherit;text-decoration:none}
.moxkit-al-text{flex:1;min-width:0;transition:color .25s ease}
/* In a row */
.moxkit-al--inline .moxkit-al-list{flex-direction:row;flex-wrap:wrap;justify-content:var(--al-justify,flex-start);column-gap:var(--al-gap)}
.moxkit-al--inline .moxkit-al-item{padding:calc(var(--al-gap) / 4) 0}
.moxkit-al--inline .moxkit-al-text{flex:none}
/* Divider */
.moxkit-al--divider .moxkit-al-item + .moxkit-al-item{border-top:var(--al-div-w,1px) var(--al-div-style,solid) var(--al-div-color,var(--moxkit-line))}
.moxkit-al--inline.moxkit-al--divider .moxkit-al-item + .moxkit-al-item{border-top:0;border-left:var(--al-div-w,1px) var(--al-div-style,solid) var(--al-div-color,var(--moxkit-line));padding-left:var(--al-gap)}

/* Marker: default, stacked or framed, like Elementor's Icon. */
.moxkit-al-marker{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:content-box;min-width:1em;height:1em;font-size:var(--al-size);line-height:1;color:var(--al-primary)}
.moxkit-al--view-stacked{--al-mark-w:calc(var(--al-size) + 2 * var(--al-boxpad))}
.moxkit-al--view-framed{--al-mark-w:calc(var(--al-size) + 2 * var(--al-boxpad) + 2 * var(--al-border))}
.moxkit-al--view-stacked .moxkit-al-marker{padding:var(--al-boxpad);background-color:var(--al-primary);color:var(--al-secondary,#fff)}
.moxkit-al--view-framed .moxkit-al-marker{padding:var(--al-boxpad);border:var(--al-border) solid var(--al-primary);background-color:var(--al-secondary,transparent)}
.moxkit-al--shape-circle .moxkit-al-marker{border-radius:50%}
.moxkit-al--shape-rounded .moxkit-al-marker{border-radius:22%}
.moxkit-al--shape-square .moxkit-al-marker{border-radius:0}
.moxkit-al:not(.moxkit-al--view-default) .moxkit-al-marker{width:1em}
.moxkit-al-glyph{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}
.moxkit-al-glyph > :is(svg,i){width:1em;height:1em;font-size:1em;line-height:1}
.moxkit-al-glyph > svg:not(.moxkit-al-mark){fill:currentColor}
.moxkit-al-num{font-size:.62em;font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.moxkit-al--view-default .moxkit-al-num{font-size:.8em}
.moxkit-al-mark{overflow:visible;fill:none;stroke:currentColor;stroke-width:var(--al-stroke);stroke-linecap:round;stroke-linejoin:round}
.moxkit-al-mark circle{stroke:var(--al-ring);stroke-width:1.5}

/* Note pad: yellow lined paper with a torn-off strip and a red margin line. */
.moxkit-al--note{--al-size:30px;--al-space:28px;--al-paper:#fff6c2;--al-head:#ffd60a;--al-head-h:44px;--al-head-line:rgba(22,16,95,.28);--al-margin:rgba(255,86,86,.5);--al-rule:rgba(0,0,255,.16);--al-row:15px;--al-tilt:1deg;--al-note-x:36px;--al-primary:#f03a3a;color:#16105f}
.moxkit-al-pad{position:relative;overflow:clip;padding:calc(var(--al-head-h) + 20px) var(--al-note-x) 28px;border-radius:24px;background:var(--al-paper);box-shadow:0 14px 34px rgba(5,5,61,.08);rotate:var(--al-tilt)}
.moxkit-al-pad::before{content:"";position:absolute;inset:0 0 auto;height:var(--al-head-h);box-sizing:border-box;border-bottom:2px dashed var(--al-head-line);background:var(--al-head)}
.moxkit-al-pad::after{content:"";position:absolute;top:var(--al-head-h);bottom:0;left:calc(var(--al-note-x) + var(--al-mark-w) + var(--al-space) / 2 - 1.5px);width:3px;box-sizing:border-box;border-inline:1px solid var(--al-margin);pointer-events:none}
.moxkit-al--no-margin .moxkit-al-pad::after,.moxkit-al--marker-none .moxkit-al-pad::after{display:none}
.moxkit-al--note .moxkit-al-pad .moxkit-al-item{padding:var(--al-row) 0;border-bottom:1px solid var(--al-rule)}
.moxkit-al--no-rules .moxkit-al-pad .moxkit-al-item{border-bottom-color:transparent}
.moxkit-al--note .moxkit-al-text{position:relative;z-index:1}
@media (max-width:767px){
	.moxkit-al--note{--al-tilt:0deg;--al-note-x:20px;--al-space:22px}
}

/* Entrance: JS adds .is-armed, then .is-in when the list scrolls into view.
   --al-d staggers each item; draw traces each stroke, the others move the whole marker. */
.moxkit-al.is-armed:not(.is-in):is([data-anim=pop],[data-anim=bounce],[data-anim=spin],[data-anim=slide],[data-anim=fade]) .moxkit-al-marker{opacity:0}
.moxkit-al.is-in[data-anim=pop] .moxkit-al-marker{animation:moxkit-al-pop var(--al-dur) cubic-bezier(.3,1.4,.5,1) var(--al-d) both}
.moxkit-al.is-in[data-anim=bounce] .moxkit-al-marker{animation:moxkit-al-bounce var(--al-dur) ease-out var(--al-d) both}
.moxkit-al.is-in[data-anim=spin] .moxkit-al-marker{animation:moxkit-al-spin var(--al-dur) cubic-bezier(.2,.8,.3,1) var(--al-d) both}
.moxkit-al.is-in[data-anim=slide] .moxkit-al-marker{animation:moxkit-al-slide var(--al-dur) cubic-bezier(.2,.8,.3,1) var(--al-d) both}
.moxkit-al.is-in[data-anim=fade] .moxkit-al-marker{animation:moxkit-al-fade var(--al-dur) ease var(--al-d) both}
/* Draw: hand-drawn marks, one pen stroke after the other. */
.moxkit-al.is-armed[data-anim=draw] .moxkit-al-mark path{stroke-dasharray:1;stroke-dashoffset:1}
.moxkit-al.is-armed:not(.is-in)[data-anim=draw] .moxkit-al-mark circle{opacity:0}
.moxkit-al.is-in[data-anim=draw] .moxkit-al-mark path{animation:moxkit-al-pen calc(var(--al-dur) * .5) cubic-bezier(.77,0,.18,1) var(--al-d) both}
.moxkit-al.is-in[data-anim=draw] .moxkit-al-mark path:nth-of-type(2){animation-delay:calc(var(--al-d) + var(--al-dur) * .45)}
.moxkit-al.is-in[data-anim=draw] .moxkit-al-mark circle{animation:moxkit-al-fade calc(var(--al-dur) * .4) ease var(--al-d) both}
/* Draw: Icon Library SVGs trace their outline, then fill in (JS sets pathLength and the pen width). */
.moxkit-al.is-armed[data-anim=draw] .moxkit-al-glyph.is-ink svg *{stroke:currentColor;stroke-width:var(--al-ink,20);stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.moxkit-al.is-in[data-anim=draw] .moxkit-al-glyph.is-ink svg *{animation:moxkit-al-ink var(--al-dur) ease-in-out var(--al-d) both}
/* Draw: numbers and font icons are written in from the left. */
.moxkit-al.is-armed:not(.is-in)[data-anim=draw] .moxkit-al-glyph:not(.moxkit-al-glyph--mark,.is-ink){clip-path:inset(0 100% 0 0)}
.moxkit-al.is-in[data-anim=draw] .moxkit-al-glyph:not(.moxkit-al-glyph--mark,.is-ink){animation:moxkit-al-write var(--al-dur) cubic-bezier(.77,0,.18,1) var(--al-d) both}
/* Text fades up with its marker. */
.moxkit-al.is-armed:not(.is-in)[data-rows=yes] .moxkit-al-text{opacity:0;transform:translateY(10px)}
.moxkit-al.is-in[data-rows=yes] .moxkit-al-text{animation:moxkit-al-rise calc(var(--al-dur) * .8) ease var(--al-d) both}
@keyframes moxkit-al-pop{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes moxkit-al-bounce{0%{opacity:0;transform:translateY(-90%)}45%{opacity:1;transform:none}65%{transform:translateY(-28%)}82%{transform:none}92%{transform:translateY(-8%)}100%{opacity:1;transform:none}}
@keyframes moxkit-al-spin{0%{opacity:0;transform:rotate(-200deg) scale(.3)}100%{opacity:1;transform:none}}
@keyframes moxkit-al-slide{0%{opacity:0;transform:translateX(-120%)}100%{opacity:1;transform:none}}
@keyframes moxkit-al-fade{0%{opacity:0}100%{opacity:1}}
@keyframes moxkit-al-pen{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes moxkit-al-ink{0%{stroke-dashoffset:1;fill-opacity:0;stroke-opacity:1}65%{stroke-dashoffset:0;fill-opacity:0;stroke-opacity:1}100%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}}
@keyframes moxkit-al-write{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes moxkit-al-rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
	.moxkit-al .moxkit-al-marker,.moxkit-al .moxkit-al-glyph,.moxkit-al .moxkit-al-text,.moxkit-al svg *{animation:none!important;opacity:1!important;clip-path:none!important;stroke-dashoffset:0!important;fill-opacity:1!important;transform:none!important}
}