/* v623 - STATE ICONS: coloured 3D-style animated icons (js/299-state-icons.js) + the new "Featured icon" picker layout.
   Motion = transform / opacity only, long rests between moves, a random offset per row (--fd from js/233) so icons never
   move in unison. js/265 pauses every animation that is off screen. Reduced-motion = fully still.
   Must stay AFTER css/296. Roll back: remove this <link> and the js/299 <script>. */

/* ---------- size & placement ---------- */
.feat-mk--icon .fi3{display:block;width:18px;height:18px;overflow:visible}
.feat-mk--icon{line-height:0}
@media (max-width:1024px){
  .m-flag .feat-mk--icon .fi3{width:calc(var(--l-val,12px)*1.5);height:calc(var(--l-val,12px)*1.5)}
}
.fi3{--fi-ease:cubic-bezier(.45,.05,.35,1)}
.fi3 *{transform-box:view-box;animation-delay:var(--fd,0s)}
.fi3 .fi-tw{transform-box:fill-box;transform-origin:50% 50%}
.fi3 .fi-d1{animation-delay:calc(var(--fd,0s) + .7s)}
.fi3 .fi-d2{animation-delay:calc(var(--fd,0s) + 1.4s)}

/* ---------- motions ---------- */
.fi3 .fi-tw{animation:fiTwinkle 3.6s var(--fi-ease) infinite}
.fi3 .fi-float{animation:fiFloat 3.8s ease-in-out infinite}
.fi3 .fi-bob{transform-origin:16px 16px;animation:fiBob 4.2s ease-in-out infinite}
.fi3 .fi-pop{transform-origin:16px 16px;animation:fiPop 4.6s var(--fi-ease) infinite}
.fi3 .fi-swing{transform-origin:16px 2px;animation:fiSwing 4.4s ease-in-out infinite}
.fi3 .fi-spin{transform-origin:16px 16px;animation:fiSpin 16s linear infinite}
.fi3 .fi-flick{transform-origin:16px 29px;animation:fiFlick 1.5s ease-in-out infinite}
.fi3 .fi-flick2{transform-origin:16px 28px;animation-duration:1.1s;animation-direction:alternate-reverse}
.fi3 .fi-flash{transform-origin:16px 16px;animation:fiFlash 3.4s linear infinite}
.fi3 .fi-ring{transform-origin:16px 20px;animation:fiRing 4.2s ease-in-out infinite}
.fi3 .fi-hop{transform-origin:16px 14px;animation:fiHop 3.8s var(--fi-ease) infinite}
.fi3 .fi-tagswing{transform-origin:9px 9px;animation:fiTag 4.2s ease-in-out infinite}
.fi3 .fi-drop{animation:fiDrop 2.4s ease-in-out infinite}
.fi3 .fi-flip{transform-origin:16px 16px;animation:fiFlip 5s var(--fi-ease) infinite}
.fi3 .fi-wig{transform-origin:16px 16px;animation:fiWig 4.6s ease-in-out infinite}
.fi3 .fi-beat{transform-origin:16px 17px;animation:fiBeat 2.6s ease-in-out infinite}
.fi3 .fi-thumb{transform-origin:16px 28px;animation:fiThumb 4.6s var(--fi-ease) infinite}
.fi3 .fi-wave{transform-origin:8px 10px;animation:fiWave 2.8s ease-in-out infinite}
.fi3 .fi-ringb{transform-origin:16px 4px;animation:fiBell 4.4s ease-in-out infinite}

@keyframes fiTwinkle{0%,55%,100%{transform:scale(.55);opacity:.45}75%{transform:scale(1.25);opacity:1}88%{transform:scale(.9);opacity:.85}}
@keyframes fiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}
@keyframes fiBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.9px) scale(1.04)}}
@keyframes fiPop{0%,66%,100%{transform:scale(1) rotate(0)}78%{transform:scale(1.16) rotate(-6deg)}90%{transform:scale(.97) rotate(2deg)}}
@keyframes fiSwing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes fiSpin{to{transform:rotate(360deg)}}
@keyframes fiFlick{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.95,1.07) skewX(-2.5deg)}50%{transform:scale(1.03,.97) skewX(1.5deg)}75%{transform:scale(.97,1.05) skewX(2.5deg)}}
@keyframes fiFlash{0%,58%,70%,100%{transform:scale(1);opacity:1}62%{transform:scale(1.14);opacity:.55}66%{transform:scale(1.08);opacity:1}}
@keyframes fiRing{0%,64%,100%{transform:rotate(0)}68%{transform:rotate(-9deg)}72%{transform:rotate(9deg)}76%{transform:rotate(-7deg)}80%{transform:rotate(7deg)}84%{transform:rotate(-3deg)}88%{transform:rotate(0)}}
@keyframes fiHop{0%,62%,100%{transform:translateY(0) rotate(0)}72%{transform:translateY(-2.6px) rotate(-4deg)}84%{transform:translateY(0) rotate(1deg)}}
@keyframes fiTag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes fiDrop{0%,100%{transform:translateY(-1.2px)}50%{transform:translateY(2px)}}
@keyframes fiFlip{0%,62%,100%{transform:scaleX(1)}76%{transform:scaleX(.12)}90%{transform:scaleX(1)}}
@keyframes fiWig{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-9deg)}80%{transform:rotate(8deg)}90%{transform:rotate(-3deg)}}
@keyframes fiBeat{0%,50%,100%{transform:scale(1)}58%{transform:scale(1.17)}66%{transform:scale(1)}74%{transform:scale(1.11)}84%{transform:scale(1)}}
@keyframes fiThumb{0%,64%,100%{transform:rotate(0) scale(1)}78%{transform:rotate(-12deg) scale(1.12)}90%{transform:rotate(2deg) scale(1)}}
@keyframes fiWave{0%,100%{transform:skewY(-5deg)}50%{transform:skewY(5deg)}}
@keyframes fiBell{0%,58%,100%{transform:rotate(0)}63%{transform:rotate(-14deg)}69%{transform:rotate(12deg)}75%{transform:rotate(-9deg)}81%{transform:rotate(6deg)}87%{transform:rotate(-2deg)}}

@media (prefers-reduced-motion:reduce){.fi3 *{animation:none!important}}

/* ---------- picker (Featured icon) ---------- */
.fsm-simple{max-width:420px}
.fsm-simple .fsm-body{max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 8px}
.fsm-grp{margin:2px 0 8px}
.fsm-gl{margin:8px 2px 4px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#667085)}
.fsm-simple .fsm-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;padding:0}
.fsm-simple .fsm-ic{flex-direction:column;gap:3px;width:auto;height:auto;min-height:62px;padding:7px 2px 5px;border-radius:12px;background:#fff}
.fsm-simple .fsm-ic .fi3{width:30px;height:30px;display:block;overflow:visible}
.fsm-simple .fsm-ic > span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;line-height:1.15;font-weight:600;color:var(--muted,#667085)}
.fsm-simple .fsm-ic.is-on{border-color:var(--gold-500,#cea577);background:rgba(206,165,119,.18);box-shadow:0 0 0 2px rgba(206,165,119,.35)}
.fsm-simple .fsm-ic.is-on > span{color:var(--gold-600,#a9803f)}
.fsm-simple .fsm-ic-none i{font-size:20px;line-height:30px;height:30px}

/* automatic state icons */
.fsm-auto{margin:6px 0 4px;padding:10px 12px 12px;border:1px solid var(--line,#dfe4ea);border-radius:14px;background:rgba(206,165,119,.07)}
.fsm-auto-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.fsm-auto-head b{display:block;font-size:12.5px;color:var(--navy-900,#162d4c)}
.fsm-auto-head small{display:block;margin-top:1px;font-size:10.5px;line-height:1.3;color:var(--muted,#667085)}
.fsm-sw{flex:none;position:relative;width:38px;height:22px;border-radius:999px;border:1px solid var(--line,#dfe4ea);background:#e7eaf0;padding:0;cursor:pointer;transition:background .15s}
.fsm-sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.fsm-sw.is-on{background:var(--gold-500,#cea577);border-color:var(--gold-500,#cea577)}
.fsm-sw.is-on::after{transform:translateX(16px)}
[dir="rtl"] .fsm-sw.is-on::after{transform:translateX(-16px)}
.fsm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fsm-auto.is-off .fsm-chips{opacity:.4;pointer-events:none}
.fsm-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 5px;border:1px solid var(--line,#dfe4ea);border-radius:999px;background:#fff;font-size:11px;font-weight:600;color:var(--muted,#667085);cursor:pointer}
.fsm-chip .fi3{width:20px;height:20px;display:block;overflow:visible;opacity:.45;filter:grayscale(.7)}
.fsm-chip.is-on{border-color:var(--gold-500,#cea577);background:rgba(206,165,119,.18);color:var(--navy-900,#162d4c)}
.fsm-chip.is-on .fi3{opacity:1;filter:none}

/* Edit Unit > Priority Presentation: live preview beside the per-unit icon select */
.fsm-selrow{display:flex;align-items:center;gap:8px}
.fsm-selrow select{flex:1;min-width:0}
.fsm-prev{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line,#dfe4ea);border-radius:10px;background:#fff}
.fsm-prev .fi3{width:24px;height:24px;display:block;overflow:visible}