/* Yu motion2 — iOS "liquid glass" materials + 120Hz-safe motion. Only transform/opacity animate. No new backdrop-filter layers
   (cards/top/tabs keep their existing ones; the open-dialog backdrop-filter-off rule in hig.css still wins). */
:root{
  --m2-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.077 22.4%,1.121 25.8%,1.133 29%,1.12 33.3%,1.045 40.6%,.995 47%,.984 53.6%,.995 61.5%,1.002 73%,1);
  --m2-out:cubic-bezier(.2,.9,.25,1);
  /* material ramp: thin / regular / thick */
  --m2-thin:rgba(255,255,255,.34);--m2-reg:rgba(255,255,255,.52);--m2-thick:rgba(255,255,255,.72);
  --m2-rim:rgba(255,255,255,.78);--m2-rim2:rgba(255,255,255,.22);--m2-low:rgba(122,74,58,.10);
  --m2-sheen:linear-gradient(145deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.14) 28%,rgba(255,255,255,0) 52%,rgba(255,255,255,.10) 100%);
  --m2-glint:rgba(255,255,255,.55);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--m2-thin:rgba(255,236,220,.07);--m2-reg:rgba(255,236,220,.11);--m2-thick:rgba(255,236,220,.18);--m2-rim:rgba(255,240,230,.30);--m2-rim2:rgba(255,240,230,.08);--m2-low:rgba(0,0,0,.35);--m2-sheen:linear-gradient(145deg,rgba(255,240,230,.20) 0,rgba(255,240,230,.05) 28%,rgba(255,240,230,0) 52%,rgba(255,240,230,.04) 100%);--m2-glint:rgba(255,235,220,.32)}}
[data-theme=dark]{--m2-thin:rgba(255,236,220,.07);--m2-reg:rgba(255,236,220,.11);--m2-thick:rgba(255,236,220,.18);--m2-rim:rgba(255,240,230,.30);--m2-rim2:rgba(255,240,230,.08);--m2-low:rgba(0,0,0,.35);--m2-sheen:linear-gradient(145deg,rgba(255,240,230,.20) 0,rgba(255,240,230,.05) 28%,rgba(255,240,230,0) 52%,rgba(255,240,230,.04) 100%);--m2-glint:rgba(255,235,220,.32)}

/* ---- specular rim + inner shadow (box-shadow only: zero extra layers) ---- */
.card,.kpi{background-image:var(--m2-sheen),linear-gradient(160deg,rgba(255,255,255,.06),transparent 55%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--m2-rim),inset 0 0 0 1px var(--m2-rim2),inset 0 -10px 18px -12px var(--m2-low)}
.kpi.inc,.kpi.exp{box-shadow:var(--shadow),inset 0 1px 0 var(--m2-rim),inset 0 0 0 1px var(--m2-rim2),inset 0 -10px 18px -12px var(--m2-low)}
.top{box-shadow:0 1px 0 var(--m2-rim2),inset 0 -1px 0 var(--m2-rim2),inset 0 1px 0 var(--m2-rim)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:var(--m2-sp,0);pointer-events:none}
.tabs{box-shadow:0 10px 30px rgba(122,74,58,.2),inset 0 1px 0 var(--m2-rim),inset 0 -1px 0 var(--m2-rim2),inset 0 0 0 1px var(--m2-rim2);position:fixed;overflow:hidden}
.tabs a{position:relative;z-index:1;-webkit-tap-highlight-color:transparent}
.tabs a:not(.on){text-shadow:0 1px 0 var(--m2-thin)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tabs a:not(.on){text-shadow:0 1px 6px rgba(0,0,0,.45)}}
[data-theme=dark] .tabs a:not(.on){text-shadow:0 1px 6px rgba(0,0,0,.45)}
.btn,.icon-btn,.cat,.key{box-shadow:inset 0 1px 0 var(--m2-rim),inset 0 -6px 10px -8px var(--m2-low)}
.m2-ind-on .tabs a.on{background:transparent}
.m2-ind{position:absolute;left:0;top:6px;z-index:0;border-radius:999px;background:var(--solid);box-shadow:inset 0 1px 0 var(--m2-rim2),0 4px 12px rgba(122,74,58,.25);will-change:transform;pointer-events:none;contain:layout paint}
.m2-ind.go{filter:none}
dialog:not(.hig-wheel):not(.hig-as){box-shadow:var(--shadow,0 20px 60px rgba(0,0,0,.25)),inset 0 1px 0 var(--m2-rim),inset 0 0 0 1px var(--m2-rim2)}

/* ---- light-follow highlight on press (single fixed node) ---- */
.m2-glint{position:fixed;z-index:10;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .35s var(--m2-out);contain:strict}
.m2-glint.on{opacity:1;transition-duration:.08s}
.m2-glint i{position:absolute;left:0;top:0;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--m2-glint) 0,transparent 68%);will-change:transform}

/* ---- confetti canvas ---- */
.m2-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none;display:none}

/* ---- long lists: skip offscreen work ---- */
.rwrap[data-m2cv]{content-visibility:auto;contain-intrinsic-size:auto 68px}
.cats,.scroll,.chart-box{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

.m2-ghost{background:var(--card);border-radius:18px}

/* ---- pause decorative animation while hidden ---- */
html.m2-hidden *,html.m2-hidden *::before,html.m2-hidden *::after{animation-play-state:paused!important}

/* ---- route transitions (View Transitions API; browsers without it just swap) ---- */
@media(prefers-reduced-motion:no-preference){
  #app{view-transition-name:m2-page}
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}
  ::view-transition-old(root){display:none}
  ::view-transition-group(m2-page){animation-duration:.42s;animation-timing-function:var(--m2-out)}
  ::view-transition-old(m2-page){animation:m2Out .26s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(m2-page){animation:m2In .46s var(--m2-out) both}
  html[data-m2dir=back]::view-transition-old(m2-page){animation-name:m2OutB}
  html[data-m2dir=back]::view-transition-new(m2-page){animation-name:m2InB}
  ::view-transition-group(m2-ind){animation-duration:.5s;animation-timing-function:var(--m2-spring)}
  ::view-transition-old(m2-ind),::view-transition-new(m2-ind){animation:none;mix-blend-mode:normal;height:100%}
  ::view-transition-old(m2-ind){display:none}
  @keyframes m2Out{to{opacity:0;transform:translate3d(-7%,0,0) scale(.985)}}
  @keyframes m2In{from{opacity:0;transform:translate3d(9%,0,0) scale(.99)}}
  @keyframes m2OutB{to{opacity:0;transform:translate3d(7%,0,0) scale(.985)}}
  @keyframes m2InB{from{opacity:0;transform:translate3d(-9%,0,0) scale(.99)}}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.01ms!important}
  .m2-glint,.m2-confetti{display:none!important}
}

/* fx.js's older indicator/page push yield to the motion2 versions when the View Transitions API is available */
.m2-ind-on .fx-ind{display:none!important}
html.m2-vt #app.fx-page,html.m2-vt #app[data-dir].fx-page{animation:none!important}
