/* MAGACCI NOTE — preview motion items. Loaded only when at least one flag is on; every rule is scoped to html.mn-fxN.
   Transitions 250–400 ms, ease-out, transform / opacity; prefers-reduced-motion switches them off. */
:root{--fx-ease:cubic-bezier(.22,.61,.36,1);--fx-spring:cubic-bezier(.32,.72,0,1)}

/* 1 · count-up */
html.mn-fx1 .fx-cu,html.mn-fx3 .fx-cu{font-variant-numeric:tabular-nums}

/* 2 · bars / cards appear */
@keyframes fxGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fxFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fxPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.mn-fx2 .fx-grow{animation:fxGrow .4s var(--fx-ease) both}
html.mn-fx2 .fx-fill{transform-origin:left center;animation:fxFill .4s var(--fx-ease) both}
html.mn-fx2 .fx-in{animation:fxIn .32s var(--fx-ease) both}
html.mn-fx2 .fx-dot{fill:var(--color-accent);stroke:var(--color-surface);stroke-width:2.5;transform-box:fill-box;transform-origin:center}
html.mn-fx2 .fx-dot.fx-pop{animation:fxPop .32s var(--fx-ease) .3s both}
html.mn-fx2 .fx-badge{position:absolute;z-index:1;transform-origin:right bottom;margin-left:-6px;translate:-100% 0;padding:3px 9px;border-radius:999px;background:var(--color-accent);color:#fff;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--color-accent) 60%,transparent);pointer-events:none;transition:opacity .2s var(--fx-ease)}
html.mn-fx2 .fx-badge.fx-pop{animation:fxPop .32s var(--fx-ease) .34s both}
html.mn-fx2 .fx-badge.fx-off{opacity:0}
@media (prefers-reduced-motion:reduce){html[class*=mn-fx] .fx-grow,html[class*=mn-fx] .fx-fill,html[class*=mn-fx] .fx-in,html[class*=mn-fx] .fx-pop{animation:none!important}}

/* 3 · synchronous update */
@keyframes fxBump{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
html.mn-fx3 .fx-cu.fx-bump{display:inline-block;transform-origin:left center;animation:fxBump .4s var(--fx-ease)}
@media (prefers-reduced-motion:reduce){html.mn-fx3 .fx-cu.fx-bump{animation:none}}

/* 4 · dark pill toasts */
html.mn-fx4 .fx-toast{left:50%;translate:-50% 0;transform:translateY(14px) scale(.97);opacity:0;display:flex;align-items:center;gap:8px;max-width:min(90vw,420px);padding:11px 18px;border-radius:999px;background:#1c1c1e;color:#fff;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.01em;box-shadow:0 10px 30px -8px rgba(0,0,0,.45),0 0 0 .5px rgba(255,255,255,.06) inset;transition:opacity .28s var(--fx-ease),transform .32s var(--fx-spring);pointer-events:none}
html.mn-fx4[data-theme=dark] .fx-toast{background:#2c2c2e;box-shadow:0 10px 30px -8px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.12) inset}
html.mn-fx4 .fx-toast.in{opacity:1;transform:none}
html.mn-fx4 .fx-toast.out{opacity:0;transform:translateY(8px) scale(.98);transition-duration:.25s}
@media (min-width:1024px){html.mn-fx4 .fx-toast{left:276px;bottom:28px;translate:none}}
@media (prefers-reduced-motion:reduce){html.mn-fx4 .fx-toast{transform:none!important;transition:opacity .15s linear}}

/* 5 · day progress ring */

/* 7 · filter reflow */
@keyframes fxOut{to{opacity:0;transform:scale(.94)}}
@keyframes fxEnter{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.fx-ghost-out{animation:fxOut .26s var(--fx-ease) forwards}
html.mn-fx7 .fx-enter{animation:fxEnter .32s var(--fx-ease) .06s both}
@media (prefers-reduced-motion:reduce){.fx-ghost-out{display:none}html.mn-fx7 .fx-enter{animation:none}}

/* 6 · drag & drop */
html.mn-fx6 .fx-cnt{display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:11px;font-weight:600;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;opacity:.85}
@keyframes fxCnt{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
html.mn-fx6 .fx-cnt-bump{animation:fxCnt .36s var(--fx-ease)}
html.mn-fx6 .mosaic-cell,html.mn-fx6 .mn-nrow{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html.fx-dragging,html.fx-dragging *{cursor:grabbing!important;user-select:none!important}
.fx-lift{transition:transform .25s var(--fx-spring),box-shadow .25s var(--fx-ease),opacity .25s var(--fx-ease),translate 0s;will-change:transform,translate}
.fx-lift.on{transform:scale(1.04) rotate(-1.5deg);box-shadow:0 22px 44px -12px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04)!important}
.fx-lift.on.near{transform:translate(18px,22px) scale(.5) rotate(-1.5deg);opacity:.92}
.fx-lift.back{transition:translate .26s var(--fx-ease),transform .26s var(--fx-ease),box-shadow .26s}
.fx-lift.drop{transition:translate .26s var(--fx-ease),transform .26s var(--fx-ease),opacity .26s var(--fx-ease);transform:scale(.25);opacity:0}
html.mn-fx6 .fx-src{opacity:.3;transition:opacity .2s var(--fx-ease)}
html.mn-fx6 .fx-drop{outline:1.5px dashed color-mix(in srgb,var(--color-accent) 55%,transparent);outline-offset:2px;transition:transform .2s var(--fx-ease),outline-color .2s}
html.mn-fx6 .fx-over{outline:2px solid var(--color-accent);outline-offset:2px;transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.fx-lift,.fx-lift.on,.fx-lift.back,.fx-lift.drop{transition:none;transform:none}html.mn-fx6 .fx-over{transform:none}html.mn-fx6 .fx-cnt-bump{animation:none}}

/* 8 · tasks calendar */
html.mn-fx8 .fx-vseg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--color-surface-2);box-shadow:var(--shadow-border)}
html.mn-fx8 .fx-vseg button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:var(--color-muted);transition:background-color .2s var(--fx-ease),color .2s}
html.mn-fx8 .fx-vseg button.on{background:var(--color-surface);color:var(--color-fg);box-shadow:var(--shadow-border)}
html.mn-fx8 .fx-cwrap{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
html.mn-fx8 .fx-cmain{display:flex;flex-direction:column;min-height:0;border-radius:var(--radius-3xl);background:var(--color-surface);box-shadow:var(--shadow-border);padding:14px 14px 10px}
html.mn-fx8 .fx-chead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 10px}
html.mn-fx8 .fx-chead h2{font-size:20px;font-weight:700;letter-spacing:-.02em}
html.mn-fx8 .fx-chead h2 span{color:var(--color-muted);font-weight:500}
html.mn-fx8 .fx-cnav{display:flex;align-items:center;gap:6px}
html.mn-fx8 .fx-cnav button{display:flex;align-items:center;justify-content:center;height:34px;min-width:34px;border-radius:999px;background:var(--color-surface-2);color:var(--color-fg);font-size:13px;font-weight:600;transition:transform .2s var(--fx-ease)}
html.mn-fx8 .fx-cnav button:active{transform:scale(.94)}
html.mn-fx8 .fx-cnav button:first-child svg{transform:rotate(180deg)}
html.mn-fx8 .fx-cnav .fx-ctoday{padding:0 14px;background:var(--color-accent);color:#fff}
html.mn-fx8 .fx-cal{display:flex;flex-direction:column;min-height:0;flex:1}
html.mn-fx8 .fx-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:0 0 6px}
html.mn-fx8 .fx-dow span{font-size:11px;font-weight:600;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;padding-left:6px}
html.mn-fx8 .fx-dow .we{color:color-mix(in srgb,var(--color-expense,#ff3b30) 70%,var(--color-muted))}
html.mn-fx8 .fx-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;flex:1;min-height:0}
html.mn-fx8 .fx-day{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:44px;padding:5px;border-radius:12px;background:var(--color-surface-2);overflow:hidden}
html.mn-fx8 .fx-day.we{background:color-mix(in srgb,var(--color-surface-2) 70%,var(--color-surface))}
html.mn-fx8 .fx-day.out{opacity:.45}
html.mn-fx8 .fx-dn{font-size:12px;font-weight:600;line-height:20px;min-width:20px;height:20px;padding:0 4px;align-self:flex-start;border-radius:999px;text-align:center;font-variant-numeric:tabular-nums}
html.mn-fx8 .fx-day.today{box-shadow:inset 0 0 0 1.5px var(--color-accent)}
html.mn-fx8 .fx-day.today .fx-dn{background:var(--color-accent);color:#fff}
html.mn-fx8 .fx-pill{display:block;width:100%;text-align:left;font-size:11.5px;font-weight:500;line-height:17px;padding:1px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .2s var(--fx-ease)}
html.mn-fx8 .fx-pill:hover{transform:translateX(2px)}
html.mn-fx8 .fx-pill b{font-weight:600;margin-right:4px;opacity:.8;font-variant-numeric:tabular-nums}
html.mn-fx8 .fx-pill.imp{background:var(--color-expense,#ff3b30);color:#fff}
html.mn-fx8 .fx-pill.work{background:var(--color-work,#007aff);color:#fff}
html.mn-fx8 .fx-pill.plain{background:color-mix(in srgb,var(--color-accent) 14%,var(--color-surface));color:var(--color-fg)}
html.mn-fx8 .fx-pill.late{background:color-mix(in srgb,#ff9500 18%,var(--color-surface));color:var(--color-fg)}
html.mn-fx8 .fx-pill.done{background:transparent;color:var(--color-muted);text-decoration:line-through;box-shadow:inset 0 0 0 1px var(--color-border)}
html.mn-fx8 .fx-more{font-size:11px;color:var(--color-muted);padding-left:6px}
html.mn-fx8 .fx-dots{display:flex;gap:3px;padding-left:4px}
html.mn-fx8 .fx-dots i,html.mn-fx8 .fx-crow i{width:6px;height:6px;border-radius:99px;flex-shrink:0}
html.mn-fx8 i.imp{background:var(--color-expense,#ff3b30)}html.mn-fx8 i.work{background:var(--color-work,#007aff)}html.mn-fx8 i.plain{background:color-mix(in srgb,var(--color-accent) 45%,var(--color-surface-3))}html.mn-fx8 i.done{background:var(--color-surface-3)}
html.mn-fx8 .fx-cside{display:flex;flex-direction:column;gap:12px}
html.mn-fx8 .fx-cside section{border-radius:var(--radius-3xl);background:var(--color-surface);box-shadow:var(--shadow-border);padding:14px 16px}
html.mn-fx8 .fx-cside h3{font-size:15px;font-weight:700;margin-bottom:6px}
html.mn-fx8 .fx-cside h3 span{color:var(--color-muted);font-weight:500;font-size:13px;margin-left:4px}
html.mn-fx8 .fx-crow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:.5px solid var(--color-border)}
html.mn-fx8 .fx-crow:first-child{border-top:0}
html.mn-fx8 .fx-crow i{width:8px;height:8px}
html.mn-fx8 .fx-crow button{display:flex;flex-direction:column;min-width:0;text-align:left}
html.mn-fx8 .fx-crow span{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mn-fx8 .fx-crow small{font-size:12px;color:var(--color-muted)}
html.mn-fx8 .fx-cempty{font-size:13px;color:var(--color-muted);padding:4px 0}
@media (max-width:1023.98px){
  html.mn-fx8 .fx-cmain,html.mn-fx8 .fx-cside{flex-shrink:0}
  html.mn-fx8 .fx-cmain{padding:12px 10px 10px}
  html.mn-fx8 .fx-grid{grid-template-rows:none!important;grid-auto-rows:48px;gap:3px}
  html.mn-fx8 .fx-day{min-height:0;padding:4px;border-radius:10px;gap:4px}
  html.mn-fx8 .fx-chead h2{font-size:18px}
  html.mn-fx8 .fx-dow span{padding-left:4px;font-size:10px}
}
@media (min-width:1024px){
  html.mn-fx8 .fx-cwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch;overflow:hidden}
  html.mn-fx8 .fx-cside{overflow-y:auto;min-height:0}
  html.mn-fx8 .fx-day{min-height:0}
}
@keyframes fxCalIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fxCalNext{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes fxCalPrev{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes fxToday{0%{box-shadow:inset 0 0 0 1.5px var(--color-accent),0 0 0 0 color-mix(in srgb,var(--color-accent) 45%,transparent)}100%{box-shadow:inset 0 0 0 1.5px var(--color-accent),0 0 0 10px transparent}}
html.mn-fx8 .fx-c-today .fx-day{animation:fxCalIn .3s var(--fx-ease) both;animation-delay:calc(var(--i) * 5ms)}
html.mn-fx8 .fx-c-today .fx-day.today{animation:fxCalIn .3s var(--fx-ease) both,fxToday .7s var(--fx-ease) .3s}
html.mn-fx8 .fx-c-next .fx-grid{animation:fxCalNext .28s var(--fx-ease) both}
html.mn-fx8 .fx-c-prev .fx-grid{animation:fxCalPrev .28s var(--fx-ease) both}
@media (prefers-reduced-motion:reduce){html.mn-fx8 .fx-cal *,html.mn-fx8 .fx-grid{animation:none!important}}

/* 9 · chart tooltip, previous period, 3/6/12 */
html.mn-fx9 .fx-hide{display:none}
html.mn-fx9 .fx-chd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
html.mn-fx9 .fx-ctot{display:flex;flex-direction:column;min-width:0}
html.mn-fx9 .fx-ctot span{font-size:12px;color:var(--color-muted)}
html.mn-fx9 .fx-ctot b{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
html.mn-fx9 .fx-ctot small{font-size:12px;color:var(--color-muted)}
html.mn-fx9 .fx-ctot i{font-style:normal;font-variant-numeric:tabular-nums}
html.mn-fx9 .fx-ctot em{font-style:normal;font-weight:600}
html.mn-fx9 .fx-ctot em.up{color:var(--color-success)}html.mn-fx9 .fx-ctot em.dn{color:var(--color-expense)}
html.mn-fx9 .fx-rseg{display:flex;flex-shrink:0;padding:2px;border-radius:999px;background:var(--color-surface-2)}
html.mn-fx9 .fx-rseg button{height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--color-muted);transition:background-color .2s var(--fx-ease),color .2s}
html.mn-fx9 .fx-rseg button.on{background:var(--color-surface);color:var(--color-fg);box-shadow:var(--shadow-border)}
html.mn-fx9 .fx-gl{stroke:var(--color-border);stroke-width:1}
html.mn-fx9 .fx-prev{fill:none;stroke:var(--color-muted);stroke-opacity:.55;stroke-width:1.5;stroke-dasharray:4 4}
html.mn-fx9 .fx-vl{stroke:var(--color-fg);stroke-opacity:.25;stroke-width:1;opacity:0;transition:opacity .2s var(--fx-ease)}
html.mn-fx9 .fx-hd{fill:var(--color-accent);stroke:var(--color-surface);stroke-width:2.5;opacity:0;transition:opacity .2s var(--fx-ease)}
html.mn-fx9 .fx-hover .fx-vl,html.mn-fx9 .fx-hover .fx-hd{opacity:1}
html.mn-fx9 .fx-tip{position:absolute;left:0;top:0;z-index:3;display:flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:12px;background:#1c1c1e;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:opacity .2s var(--fx-ease),transform .25s var(--fx-ease)}
html.mn-fx9[data-theme=dark] .fx-tip{background:#3a3a3c}
html.mn-fx9 .fx-hover .fx-tip{opacity:1}
html.mn-fx9 .fx-tip span{font-size:11px;opacity:.7}
html.mn-fx9 .fx-tip b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
html.mn-fx9 .fx-tip small{font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
html.mn-fx9 .fx-leg{position:absolute;right:0;top:-2px;display:none;gap:12px;font-size:11px;color:var(--color-muted)}
html.mn-fx9 .fx-leg span{display:flex;align-items:center;gap:5px}
html.mn-fx9 .fx-leg i{width:14px;height:2px;border-radius:2px;background:var(--color-accent)}
html.mn-fx9 .fx-leg i.pv{background:repeating-linear-gradient(90deg,var(--color-muted) 0 4px,transparent 4px 7px);opacity:.7}
@media (min-width:1024px){html.mn-fx9 .fx-leg{display:flex;top:auto;bottom:-20px;right:auto;left:0}html.mn-fx9 .mn-dchart{margin-bottom:18px}}
@media (prefers-reduced-motion:reduce){html.mn-fx9 .fx-tip{transition:opacity .1s linear}}

/* 10 · accent colour */
html.mn-fx10[data-accent=green]{--color-accent:#28a745;--fx-acc-sh:#28a74547}
html.mn-fx10[data-accent=plum]{--color-accent:#8e4ec6;--fx-acc-sh:#8e4ec647}
html.mn-fx10[data-accent=orange]{--color-accent:#f57c00;--fx-acc-sh:#f57c0047}
html.mn-fx10[data-accent=green][data-theme=dark]{--color-accent:#30d158;--fx-acc-sh:#30d15859}
html.mn-fx10[data-accent=plum][data-theme=dark]{--color-accent:#b07ce8;--fx-acc-sh:#b07ce859}
html.mn-fx10[data-accent=orange][data-theme=dark]{--color-accent:#ff9f0a;--fx-acc-sh:#ff9f0a59}
html.mn-fx10[data-accent]{--shadow-float:0 10px 28px var(--fx-acc-sh)}
html.mn-fx10[data-accent] .shadow-float{--tw-shadow-color:var(--fx-acc-sh)}
html.mn-fx10[data-accent] ::selection{background:var(--fx-acc-sh)}
html.mn-fx10 body,html.mn-fx10 .mn-dshell{transition:none}
html.mn-fx10 .fx-acc-i{width:20px;height:20px;border-radius:99px;background:conic-gradient(#007aff 0 25%,#28a745 0 50%,#8e4ec6 0 75%,#f57c00 0);opacity:.85}
html.mn-fx10 .fx-sw{display:flex;gap:10px}
html.mn-fx10 .fx-sw button{position:relative;width:28px;height:28px;border-radius:99px;transition:transform .25s var(--fx-spring)}
html.mn-fx10 .fx-sw button::after{content:"";position:absolute;inset:-4px;border-radius:99px;box-shadow:0 0 0 2px currentColor;opacity:0;transform:scale(.8);transition:opacity .25s var(--fx-ease),transform .25s var(--fx-ease)}
html.mn-fx10 .fx-sw button.on::after{opacity:1;transform:none}
html.mn-fx10 .fx-sw button:active{transform:scale(.9)}
html.mn-fx10 .fx-blue{background:#007aff;color:#007aff}html.mn-fx10 .fx-green{background:#28a745;color:#28a745}html.mn-fx10 .fx-plum{background:#8e4ec6;color:#8e4ec6}html.mn-fx10 .fx-orange{background:#f57c00;color:#f57c00}
html.mn-fx10[data-theme=dark] .fx-blue{background:#0a84ff;color:#0a84ff}html.mn-fx10[data-theme=dark] .fx-green{background:#30d158;color:#30d158}html.mn-fx10[data-theme=dark] .fx-plum{background:#b07ce8;color:#b07ce8}html.mn-fx10[data-theme=dark] .fx-orange{background:#ff9f0a;color:#ff9f0a}